프로젝트 7일차 회고

작업내용

1. 상품 수정 및 조회 페이지 구현

• 수정 페이지에서 중요했던 내용
  1. 수정 시 옵션이 추가, 변경, 삭제 되었을 때 어떻게 값을 넘겨줄 것인지

2. 상품 수정 및 조회 구현

• 상품 수정 시 중요했던 내용

  1. 상품 수정 시 상품 옵션이 삭제 되거나 추가되는 경우의 경우의 수를 생각해서 작업을 해야 했음

     • 3가지 경우의 수로 나누어서 작업 진행

     // 5. 상품 옵션 수정
     // 5-1. 기존 옵션이 더 많을 때(상품 옵션이 삭제 되었을 때)
     if(findProduct.getProductOptionList().size() > product.getProductOptionList().size()) {
         for (int i = 0; i < findProduct.getProductOptionList().size(); i++) {
             ProductOption productOption = findProduct.getProductOptionList().get(i);
     
             if(i < product.getProductOptionList().size()) {
                 ProductOptionDto productOptionDto = product.getProductOptionList().get(i);
     
                 if(productOption.getId().equals(productOptionDto.getId())) {
                     productOption.changeProductOption(productOptionDto, findProduct);
                 }
             } else {
                 productOptionRepository.delete(productOption);
             }
         }
     }
     // 5-2. 수정하는 옵션이 더 많을 때
     else if (findProduct.getProductOptionList().size() < product.getProductOptionList().size()) {
         for (int i = 0; i < product.getProductOptionList().size(); i++) {
             ProductOptionDto productOptionDto = product.getProductOptionList().get(i);
     
             if(i < findProduct.getProductOptionList().size()) {
                 ProductOption productOption = findProduct.getProductOptionList().get(i);
                 if(productOption.getId().equals(productOptionDto.getId())) {
                     productOption.changeProductOption(productOptionDto, findProduct);
                 } else {
                     // 기존 옵션을 삭제하고 새로운 옵션 추가
                     productOptionRepository.delete(productOption);
                     addProductOption(findProduct, productOptionDto);
                 }
             } else {
                 // 옵션 추가
                 addProductOption(findProduct, productOptionDto);
             }
         }
     }
     // 5-3. 리스트의 갯수가 같을 때
     else {
         for (int i = 0; i < product.getProductOptionList().size(); i++) {
             ProductOptionDto productOptionDto = product.getProductOptionList().get(i);
             ProductOption productOption = findProduct.getProductOptionList().get(i);
     
             if(productOption.getId().equals(productOptionDto.getId())) {
                 productOption.changeProductOption(productOptionDto, findProduct);
             } else {
                 // 기존 옵션을 삭제하고 새로운 옵션 추가
                 productOptionRepository.delete(productOption);
                 addProductOption(findProduct, productOptionDto);
             }
         }
     }
     
     // 상품 옵션 추가
     private void addProductOption(Product findProduct, ProductOptionDto productOptionDto) {
         productOptionRepository.save(ProductOption.builder()
                 .size(productOptionDto.getSize())
                 .color(productOptionDto.getColor())
                 .stock(productOptionDto.getStock())
                 .product(findProduct)
                 .build());
     }

  2. 상품 수정 시 이미지가 변경이 되었으면 S3에서 기존 이미지를 삭제 후 새로 업로드 해줘야함

     
     //파일 삭제 코드를 구현하여 삭제함
     if(mainImg != null) {
         // 인덱스값 추출
         AttachDetail findAttachDetail = findProduct.getAttach().getAttachDetailList().get(0);
         String filename = findAttachDetail.getFileUrl();
         int idx = filename.indexOf("/product/");
         // 삭제할 파일명 추출
         String deleteFilename = findAttachDetail.getFileUrl().substring(idx + 1);
         // 이미지 삭제
         s3UploadService.deleteFile(deleteFilename);
         // 이미지 업로드
         String mainImgFileUrl = s3UploadService.upload(mainImg, "product");
         // 이미지 수정
         findAttachDetail.changeFile(
                 findAttachDetail.getId(),
                 mainImgFileUrl,
                 mainImg.getSize(),
                 mainImg.getOriginalFilename(),
                 findProduct.getAttach());
     
         log.info("대표 이미지 수정 완료");
     }
     
     // s3UploadService.deleteFile(fileName)
     public void deleteFile(String fileName){
         log.info("파일삭제 시작");
         DeleteObjectRequest request = new DeleteObjectRequest(bucket, fileName);
         amazonS3Client.deleteObject(request);
         log.info("파일삭제 끝");
     }

3. 오류 수정

• 상품 등록, 수정 페이지에서 옵션을 추가 하면 맨 마지막에 추가가 되는 것이 아니라 두번째 칸에 계속 추가되는 버그를 수정

  $(document).on("click", "#add-button", function() {
        let newItem = $("#item-" + nowItemCnt).clone(); // 새로운 아이템 복제
        newItem.attr("id", "item-" + ++nowItemCnt); // 아이템 ID 설정
        newItem.find("input[type='text']").val(""); // 입력 필드 초기화
        newItem.find("select").prop("selectedIndex", 0); // 셀렉트 박스 초기화
  			// 이 부분을 밑에 코드로 수정
  			// $("#item").after(newItem); 
        $("#item-" + (nowItemCnt - 1)).after(newItem); // 복제한 아이템 추가
    });

🚀 Trouble Shooting

1. DB에 한글이 깨져서 들어감

   • 문제 : DB에 한글이 깨져서 들어감
   • 원인 : DB를 확인해보니 character set 이 utf-8로 되어 있지 않음
   • 해결 : docker를 이용하여 mysql을 올려놓은 상태라 docker 안에 있는 mysql에 접속하여 utf-8로 변경

     # 해당 컨테이너의 bash로 들어감
     docker exec -it <container_id_or_name> /bin/bash
     
     # 설정파일을 생성
     cat << 'EOF' > /etc/mysql/conf.d/utf8.cnf
     
     # 컨테이너 리스타트 
     docker restart <container_id_or_name>

     # 해당 내용 적용
     
     [client]
     default-character-set = utf8
     
     [mysqld]
     init_connect = SET collation_connection = utf8_general_ci
     init_connect = SET NAMES utf8
     character-set-server = utf8
     collation-server = utf8_general_ci
     
     [mysqldump]
     default-character-set = utf8
     
     [mysql]
     default-character-set = utf8
     EOF

2. S3에 파일 삭제를 요청하면 파일이 삭제 안됨

   • 문제 : S3에 파일 삭제를 요청하면 파일이 삭제 안됨
   • 원인 : 파일을 product 폴더에 관리중인데 파일명을 폴더명/파일명 이런식으로 전달해야 하는데 폴더명 앞에 /가 하나 더 붙어 있었음..
   • 해결 : /를 제거하여 해결

   if(mainImg != null) {
       // 인덱스값 추출
       AttachDetail findAttachDetail = findProduct.getAttach().getAttachDetailList().get(0);
       String filename = findAttachDetail.getFileUrl();
       //int idx = filename.indexOf("/product/");
   		int idx = filename.indexOf("product/");
       // 삭제할 파일명 추출
       String deleteFilename = findAttachDetail.getFileUrl().substring(idx + 1);
       // 이미지 삭제
       s3UploadService.deleteFile(deleteFilename);
       // 이미지 업로드
       String mainImgFileUrl = s3UploadService.upload(mainImg, "product");
       // 이미지 수정
       findAttachDetail.changeFile(
               findAttachDetail.getId(),
               mainImgFileUrl,
               mainImg.getSize(),
               mainImg.getOriginalFilename(),
               findProduct.getAttach());
   
       log.info("대표 이미지 수정 완료");
   }