💷상품 등록 페이지 만들기

Item과 ItemImage 👉 1 : N, 즉 ItemImage 가 주인. Item 외래키를 갖고 오면 된다.

📌ItemImg Entity 클래스 생성

package com.shop.entity;

import jakarta.persistence.*;
import lombok.Getter;
import lombok.Setter;

@Entity
@Table(name = "item_img")
@Getter
@Setter
public class ItemImg extends BaseEntity{

    @Id
    @Column(name = "item_img_id")
    @GeneratedValue
    private Long id;

    private String imgName; // 이미지 파일명 (랜덤)
    private String oriImgName; // 원본 이미지 파일명 (처음 올리는 이미지)
    private String imgUrl; // 이미지 경로
    private String repImgYn; // 대표 이미지 Y/N 여부

    @ManyToOne(fetch = FetchType.LAZY)
    @JoinColumn(name = "item_id")
    private Item item;

    public void updateItemImg(String oriImgName, String imgName, String imgUrl){
        this.oriImgName = oriImgName;
        this.imgName = imgName;
        this.imgUrl = imgUrl;
    }

}

📌modelmapper 라이브러리

DTO와 Entity를 자동으로 연결해주는 라이브러리.

• 상품 등록 화면으로부터 전달받은 DTO 객체를 Entity 로 변환해야함
• 상품 조회 결과를 화면에 반환할 때 Entity 를 DTO 객체로 변환해야함
• modelmapper 라이브러리를 통해서 서로 다른 클래스의 값을 필드의 이름과 자료형이 같으면(다르면 사용 X) getter, setter 를 통해 값을 복사해서 객체를 반환해준다.

ModelMapper

<!-- https://mvnrepository.com/artifact/org.modelmapper/modelmapper -->
<dependency>
    <groupId>org.modelmapper</groupId>
    <artifactId>modelmapper</artifactId>
    <version>3.2.0</version>
</dependency>

👉 의존성 추가

📌ItemImgDto 클래스 생성

package com.shop.dto;

import com.shop.entity.ItemImg;
import lombok.Getter;
import lombok.Setter;
import org.modelmapper.ModelMapper;

// 상품 이미지에 대한 DTO
@Getter
@Setter
public class ItemImgDto {

    private Long id;
    private String imgName;
    private String oriImgName;
    private String imgUrl;
    private String repImgYn;
    private static ModelMapper modelMapper = new ModelMapper();

    public static ItemImgDto of(ItemImg itemImg){

        // ItemImg 엔티티 객체를 ItemImgDto 객체로 변환
        return modelMapper.map(itemImg, ItemImgDto.class); // itemImg Entity와 ItemImgDto 매핑

    }

}

📌ItemFormDto 클래스 생성

package com.shop.dto;

import com.shop.constant.ItemSellStatus;
import com.shop.entity.Item;
import jakarta.validation.constraints.NotBlank;
import jakarta.validation.constraints.NotEmpty;
import jakarta.validation.constraints.NotNull;
import lombok.Getter;
import lombok.Setter;
import org.modelmapper.ModelMapper;

import java.time.LocalDateTime;
import java.util.ArrayList;
import java.util.List;

// View로 부터 입력 받은 상품 데이터 정보 DTO
@Getter
@Setter
public class ItemFormDto {

    //------------------------- Item -------------------------//

    private Long id;

    @NotBlank(message = "상품명은 필수 입력 값입니다.")
    private String itemNm;

    @NotNull(message = "가격은 필수 입력 값입니다.") // Integer 타입은 @NotNull
    private Integer price;

    @NotBlank(message = "상세 설명은 필수 입력 값입니다.")
    private String itemDetail;

    @NotNull(message = "재고는 필수 입력 값입니다.")
    private Integer stockNumber;

    private ItemSellStatus itemSellStatus;

    //------------------------- 상품 이미지 -------------------------//

    private List<ItemImgDto> itemImgDtoList = new ArrayList<>(); // 상품 이미지 정보

    private List<Long> itemImgIds = new ArrayList<>(); // 상품 이미지 아이디

    private static ModelMapper modelMapper = new ModelMapper();


    public Item createItem(){
        // ItemFormDto 👉 Entity Item 연결. 바로 바꿔준다
        return modelMapper.map(this, Item.class);
    }

    public static ItemFormDto of(Item item){
        // Entity Item 👉 ItemFormDto 연결. 바로 바꿔준다
        return modelMapper.map(item, ItemFormDto.class);
    }

}

📌ItemController 클래스 수정

package com.shop.controller;

import com.shop.dto.ItemFormDto;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class ItemController {

    @GetMapping(value = "/admin/item/new") // ADMIN ROLE 만 들어올 수 있다
    // ItemFormDto 객체를 model 객체에 담아서 뷰로 전달
    public String itemForm(Model model){
        
        model.addAttribute("itemFormDto", new ItemFormDto());
        
        return "/item/itemForm";
    }

}

📌itemForm.html 수정

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layouts/layout1}">

<!-- 상품 등록 페이지에서 상품 이미지를 browse 기능을 통해 선택했을 때 (change) 수행되는 스크립트 -->
<th:block layout:fragment="script">
    <script th:inline="javascript">
        $(document).ready(function(){
            var errorMessage = [[${errorMessage}]];
            if(errorMessage != null){
                alert(errorMessage);
            }
            bindDomEvent();
        });

        function bindDomEvent(){
            // 클래스 설정 <input type="file" class="imageFile form-control" name="itemImgFile"> 여기서 사용
            $(".imageFile.form-control").on("change", function(){
                // 이미지 파일명. ex) a.jpg
                var fileName = $(this).val().split("\\").pop();
                var fileExt = fileName.substring(fileName.lastIndexOf(".")+1);
                // 확장자 추출, 소문자 변환
                fileExt = fileExt.toLowerCase();

                if(fileExt != "jpg" && fileExt != "jpeg" && fileExt != "gif"
                && fileExt != "png" && fileExt != "bmp"){
                    alert("이미지 파일만 등록이 가능합니다.");
                    $(this).val("");
                    return;
                }
            });
        }

    </script>
</th:block>

<!-- 사용자 CSS 추가 -->
<th:block layout:fragment="css">
    <style>
        .input-group {
            margin-bottom : 15px;
        }
        .img-div {
            margin-bottom : 10px;
        }
        .fieldError {
            color: red;
        }
    </style>
</th:block>

<!-- 상품 이미지 부분은 상품을 등록하는 경우와 상품을 수정하는 경우로 나뉨 -->
<div layout:fragment="content">
    <!-- 파일을 전송할 때는 form 태그의 enctype(인코딩 타입) 값을 "multipart/form-data" 로 설정 -->
    <form role="form" method="post" enctype="multipart/form-data" th:object="${itemFormDto}">
        <p class="h2">상품 등록</p>

        <input type="hidden" th:field="*{id}">

        <div class="input-group">
            <select th:field="*{itemSellStatus}" class="form-select">
                <option value="SELL">판매중</option>
                <option value="SOLD_OUT">품절</option>
            </select>
        </div>

        <div class="input-group">
            <div class="input-group-text">
                <span>상품명</span>
            </div>
            <input type="text" th:field="*{itemNm}" class="form-control" placeholder="상품명을 입력해주세요">
        </div>
        <p th:if="${#fields.hasErrors('itemNm')}" th:errors="*{itemNm}" class="fieldError">Incorrect data</p>

        <div class="input-group">
            <div class="input-group-text">
                <span>가격</span>
            </div>
            <input type="number" th:field="*{price}" class="form-control" placeholder="상품의 가격을 입력해주세요">
        </div>
        <p th:if="${#fields.hasErrors('price')}" th:errors="*{price}" class="fieldError">Incorrect data</p>

        <div class="input-group">
            <div class="input-group-text">
                <span>재고</span>
            </div>
            <input type="number" th:field="*{stockNumber}" class="form-control" placeholder="상품의 재고를 입력해주세요">
        </div>
        <p th:if="${#fields.hasErrors('stockNumber')}" th:errors="*{stockNumber}" class="fieldError">Incorrect data</p>

        <div class="input-group">
            <div class="input-group-text">
                <span>상품 상세 내용</span>
            </div>
            <textarea class="form-control" aria-label="With textarea" th:field="*{itemDetail}"></textarea>
        </div>
        <p th:if="${#fields.hasErrors('itemDetail')}" th:errors="*{itemDetail}" class="fieldError">Incorrect data</p>

        <!-- 상품을 처음 등록할 경우 Controller 를 통해 전달 받은 itemFormDtoList 가 존재하지 않음 👉 실행 -->
        <div th:if="${#lists.isEmpty(itemFormDto.itemImgDtoList)}">
            <!-- Thymeleaf builtin 메소드 #numbers.sequence() 를 통해서 1 부터 5 까지 상품이미지명 출력 -->
            <div class="form-group" th:each="num: ${#numbers.sequence(1,5)}">
                <div class="custom-file img-div">
                    <label class="form-control-file" th:text="상품이미지 + ${num}"></label>
                    <input type="file" class="imageFile form-control" name="itemImgFile">
                </div>
            </div>
        </div>

        <!-- 상품을 수정할 경우는 이미 존재하던 상품 이미지가 있으므로 itemFormDtoList가 존재 👉 실행
             이미지가 존재하면 해당 이미지의 이름을 출력하고
             빈칸이면 상품이미지+index 를 출력 -->
        <div th:if = "${not #lists.isEmpty(itemFormDto.itemImgDtoList)}">
            <div class="form-group" th:each="itemImgDto, status: ${itemFormDto.itemImgDtoList}">
                <div class="custom-file img-div">
                    <!-- itemImgDto.id 👉 hidden으로 숨겨서 화면에 나오지 않는다 -->
                    <input type="hidden" name="itemImgIds" th:value="${itemImgDto.id}">
                    <!-- itemImgDto.oriImgName 오리지널 이미지 네임이 비어있지 않으면
                            ? 참(이미지 이름) : 거짓(자기 열 상품이미지 인덱스)-->
                    <label class="form-control-file" th:text="${not #strings.isEmpty(itemImgDto.oriImgName)}
                     ? ${itemImgDto.oriImgName} : '상품이미지' + ${status.index+1}"></label>
                    <input type="file" class="imageFile form-control" name="itemImgFile">
                </div>
            </div>
        </div>

        <!-- String 문자열이 비어있으면 실행 👉 itemFormDto.id 현재 저장된 상품 ❌ 👉 저장 -->
        <div th:if="${#strings.isEmpty(itemFormDto.id)}" style="text-align: center">
            <!-- formaction=＂@{/admin/item/new}＂ href mapping /admin/item/new method 👉 post -->
            <button th:formaction="@{/admin/item/new}" type="submit" class="btn btn-success">저장</button>
        </div>
        <!-- 위 조건이 아니면 실행 ="${#strings.isEmpty(itemFormDto.id)}" 가 있으면 저장이 되므로 상품 ⭕ 👉 수정 -->
        <!-- ="@{'/admin/item/'+${itemFormDto.id} 👉 /admin/item/3  -->
        <div th:unless="${#strings.isEmpty(itemFormDto.id)}" style="text-align: center">
            <button th:formaction="@{'/admin/item/' + ${itemFormDto.id} }" type="submit" class="btn btn-warning">수정</button>
        </div>

        <!-- CSRF 토큰 -->
        <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}">

    </form>

</div>

</html>

📍결과

👉 Member 클래스 변경

👉 어떤 구조로 실행 되는지는 파일 업로드와 함께

---

💷파일 업로드 하기

📌application.properties 수정

spring.servlet.multipart.maxFileSize=20MB
spring.servlet.multipart.maxRequestSize=100MB
itemImgLocation=C:/shop1/item
uploadPath=file:///C:/shop1/

👉 추가. 파일 크기 및 경로 지정

👉 위 경로에 맞는 파일 생성

📌WebMvcConfig 클래스 생성

package com.shop.config;

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    // "${uploadPath}" 👉 application.properties 에 설정한 "uploadPath" 프로퍼티 값
    @Value("${uploadPath}") // application.properties 설정한 uploadPath
    String uploadPath;

    // addResourceHandlers 메소드 Override 👉 파일 업로드 경로 지정
    // uploadPath = "C:/shop
    // images/item/xxx.jpg
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry){
        // " /images/** " 패턴의 URL 은 uploadPath 폴더를 기준으로 탐색
        registry.addResourceHandler("/images/**")
                // /images로 시작하는 경우 uploadPath에 설정한 폴더를 기준으로 파일을
                // 읽어 오도록 설정
                .addResourceLocations(uploadPath); // 로컬 컴퓨터 에서 root 결로를 설정
    }
}

📌FileService 클래스 생성

package com.shop.service;

import lombok.extern.java.Log;
import org.springframework.stereotype.Service;

import java.io.File;
import java.io.FileOutputStream;
import java.util.UUID;

// 이미지 파일 저장 로직을 담당할 Service 객체
// 파일 저장은 DB 에 저장되는 것이 아니기 때문에 Repository가 필요 없음 (FileOutputStream 가 대신함)
@Service
@Log
public class FileService {
    public String uploadFile(String uploadPath, String originalFileName, byte[] fileData)
            throws Exception{
        // UUID(Universally Unique IDentifier) - 서로 다른 개체들을 구별하기 위한 클래스. 랜덤으로 UUID를 생성
        UUID uuid = UUID.randomUUID();
        String extension = originalFileName.substring(originalFileName.lastIndexOf("."));
        String savedFileName = uuid.toString() + extension;
        String fileUploadFullUrl = uploadPath+"/"+savedFileName;
        System.out.println(fileUploadFullUrl);
        // FileOutputStream 클래스를 이용하여 파일을 저장
        FileOutputStream fos = new FileOutputStream(fileUploadFullUrl);
        fos.write(fileData);
        fos.close();
        return savedFileName;
    }

    // 이미지 파일 삭제
    public void deleteFile(String filePath) throws Exception{
        File deleteFile = new File(filePath);

        if(deleteFile.exists()) { //deleteFile 객체 여부를 확인
            deleteFile.delete();
            log.info("파일을 삭제하였습니다.");
        }else{
            log.info("파일이 존재하지 않습니다.");
        }
    }
}

📌ItemImgRepository 인터페이스 생성

package com.shop.repository;

import com.shop.entity.ItemImg;
import org.springframework.data.jpa.repository.JpaRepository;

// 상품 이미지 정보 쿼리문 날리는 Repository
public interface ItemImgRepository extends JpaRepository<ItemImg,Long> {
}

📌ItemImgService 클래스 생성

package com.shop.service;


import com.shop.entity.ItemImg;
import com.shop.repository.ItemImgRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.multipart.MultipartFile;
import org.thymeleaf.util.StringUtils;

import java.io.IOException;

// 상품 이미지 업로드, 상품 이미지 정보 저장 Service
@Service
@RequiredArgsConstructor
@Transactional
public class ItemImgService {

    @Value("${itemImgLocation}") // application.properties의 itemImgLocation
    private String itemImgLocation; // @Value("${itemImgLocation}") 를 String itemImgLocation로 치환
    private final ItemImgRepository itemImgRepository; // 상품 이미지 정보 저장
    private final FileService fileService; // 상품 이미지 업로드


    // MultipartFile : 클라이언트가 보낸 이미지 정보
    // 상품 이미지 저장 (내부에 사진 업로드 포함)
    public void saveItemImg(ItemImg itemImg, MultipartFile itemImgFile) throws Exception {

        // a.jpg가 그냥 온다
        String oriImgName = itemImgFile.getOriginalFilename(); // 오리지널 이미지 경로
        String imgName = "";
        String imgUrl = "";
        System.out.println(oriImgName);

        // 파일 업로드
        if (!StringUtils.isEmpty(oriImgName)){ // oriImgName 이 존재하면 실행
            System.out.println("******");

            // fileService.uploadFile() 메소드로 파일 업로드 후 UUID 를 통해 변경된 파일명 return
            imgName = fileService.uploadFile(itemImgLocation, oriImgName,
                    itemImgFile.getBytes()); // Byte 배열 👉 실제 이미지 파일

            System.out.println(imgName);

            imgUrl = "/images/item/" + imgName; // 이미지 URL을 만든다.
        }

        System.out.println("1111");

        // 상품 이미지 정보 저장
        // update 한 이유? 👉 위 3개가 채워지지 않았기 때문에 채우는 것
        // updateItemImg 메소드와 itemImgRepository.save() 메소드를 이용해서 상품 이미지 정보 저장
        itemImg.updateItemImg(oriImgName, imgName, imgUrl);

        System.out.println("(((((");

        itemImgRepository.save(itemImg); // 위에서 싹 정리하고 DB에 저장. 끝

    }
}

📌ItemService 클래스 생성

package com.shop.service;

import com.shop.dto.ItemFormDto;
import com.shop.entity.Item;
import com.shop.entity.ItemImg;
import com.shop.repository.ItemImgRepository;
import com.shop.repository.ItemRepository;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.multipart.MultipartFile;

import java.util.List;

@Service
@RequiredArgsConstructor
@Transactional
public class ItemService {

    private final ItemRepository itemRepository; // 상품 저장
    private final ItemImgService itemImgService; // 상품 이미지 저장

    private final ItemImgRepository itemImgRepository;

    // 상품 저장
    public Long saveItem(ItemFormDto itemFormDto, List<MultipartFile> itemImgFileList) throws Exception {

        // 상품 등록. return modelMapper.map(this, Item.class); 바로 바꿔준다.
        // ItemFormDto 객체를 DB 에 저장하기 위해 Item 객체로 바꿈
        Item item = itemFormDto.createItem();
        itemRepository.save(item);

        // 이미지 등록
        for (int i = 0; i < itemImgFileList.size(); i++) {

            ItemImg itemImg = new ItemImg();
            itemImg.setItem(item);

            if(i == 0){ // 첫 번째 이미지 👉 대표 이미지
                itemImg.setRepImgYn("Y");
            }
            else { // 첫 번째 이미지를 제외한 이미지들은 다 NO
                itemImg.setRepImgYn("N");
            }
            itemImgService.saveItemImg(itemImg, itemImgFileList.get(i));
        }
        
        return item.getId(); // item_id를 넘겨준다

    }
}

📌ItemController 클래스 수정

package com.shop.controller;

import com.shop.dto.ItemFormDto;
import com.shop.service.ItemService;
import jakarta.validation.Valid;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;

import java.util.List;

@Controller
@RequiredArgsConstructor
public class ItemController {

    private final ItemService itemService;

    // 상품 등록 페이지 GET으로 접근
    @GetMapping(value = "/admin/item/new") // ADMIN ROLE 만 들어올 수 있다
    // ItemFormDto 객체를 model 객체에 담아서 뷰로 전달
    public String itemForm(Model model){

        model.addAttribute("itemFormDto", new ItemFormDto());

        return "/item/itemForm";
    }

    // 상품 등록 페이지 POST으로 접근
    @PostMapping(value = "/admin/item/new")
    // 입력값 검증 및 에러 메시지 표시
    public String itemNew(@Valid ItemFormDto itemFormDto, BindingResult bindingResult, Model model,
                          // POST 입력으로 들어온 이미지 파일 (name = "itemImgFile")을 MultipartFile 객체로 받음
                          @RequestParam("itemImgFile")List<MultipartFile> itemImgFileList) {
        if (bindingResult.hasErrors()) {
            return "item/itemForm";
        }


        // 입력값이 비정상이거나, 첫 번째 상품 이미지를 지정하지 않았으면 다시 상품 등록 페이지로 돌아감
        if (itemImgFileList.get(0).isEmpty() && itemFormDto.getId() == null){
            model.addAttribute("errorMessage",
                    "첫 번째 상품 이미지는 필수 입력 값입니다.");
            return "item/itemForm";
        }

        // 입력값이 정상이면 수행
        try {

            itemService.saveItem(itemFormDto, itemImgFileList);

        }catch (Exception e){
            model.addAttribute("errorMessage",
                    "상품 등록 중 에러가 발생하였습니다.");

            return "item/itemForm";
        }

        return "redirect:/";

    }


}

    

📌ItemImgRepository 인터페이스 수정

package com.shop.repository;

import com.shop.entity.ItemImg;
import org.springframework.data.jpa.repository.JpaRepository;

import java.util.List;

// 상품 이미지 정보 쿼리문 날리는 Repository
public interface ItemImgRepository extends JpaRepository<ItemImg,Long> {
    // 이미지가 잘 저장되었는지 확인하기 위해 쿼리 조회문 추가
    List<ItemImg> findByItemIdOrderByIdAsc(Long itemId);
}

🤦‍♀️ItemService Test 하기

package com.shop.service;

import com.shop.constant.ItemSellStatus;
import com.shop.dto.ItemFormDto;
import com.shop.dto.ItemImgDto;
import com.shop.entity.Item;
import com.shop.entity.ItemImg;
import com.shop.repository.ItemImgRepository;
import com.shop.repository.ItemRepository;
import jakarta.persistence.EntityNotFoundException;
import lombok.RequiredArgsConstructor;
import org.junit.jupiter.api.DisplayName;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.mock.web.MockMultipartFile;
import org.springframework.security.test.context.support.WithMockUser;
import org.springframework.test.context.TestPropertySource;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.multipart.MultipartFile;

import java.util.ArrayList;
import java.util.List;

import static org.junit.jupiter.api.Assertions.*;

@SpringBootTest
@Transactional
@TestPropertySource(locations = "classpath:application-test.properties")
class ItemServiceTest {

    @Autowired
    ItemService itemService;

    @Autowired
    ItemRepository itemRepository;

    @Autowired
    ItemImgRepository itemImgRepository;

    // MockMultipartFile 객체를 이용해 가상의 이미지 파일 5개 생성하는 메소드
    List<MultipartFile> createMultipartFiles(){

        List<MultipartFile> multipartFileList = new ArrayList<>();

        for (int i = 0; i < 5; i++) {

            String path = "C:/shop1/item";
            String imageName = "image" + i + ".jpg";

            MockMultipartFile multipartFile =
                    new MockMultipartFile(path, imageName,
                            "image/jpg", new byte[]{1, 2, 3, 4});

            multipartFileList.add(multipartFile);

        }

        return multipartFileList;

    }

    @Test
    @DisplayName("상품 등록 테스트")
    // 상품 등록은 ADMIN만
    @WithMockUser(username = "admin", roles = "ADMIN")
    // ItemFormDto 객체와 MultipartFile 객체를 임의로 생성 후 itemService.saveItem 수행
    void saveItem() throws Exception {

        ItemFormDto itemFormDto = new ItemFormDto();
        itemFormDto.setItemNm("테스트 상품");
        itemFormDto.setItemSellStatus(ItemSellStatus.SELL);
        itemFormDto.setItemDetail("테스트 상품 상세 설명.");
        itemFormDto.setPrice(1000);
        itemFormDto.setStockNumber(100);

        List<MultipartFile> multipartFileList = createMultipartFiles();
        Long itemId = itemService.saveItem(itemFormDto, multipartFileList);
        // 저장된 이미지를 itemImgRepository.findByItemIdOrderByIdAsc(itemId) 로 조회
        List<ItemImg> itemImgList = itemImgRepository.findByItemIdOrderByIdAsc(itemId);
        // 저장을 하면 itemId를 잉용해 Item 데이터를 받아 item에 대입
        Item item = itemRepository.findById(itemId)
                .orElseThrow(EntityNotFoundException::new);

        // itemFormDto 내용과 Item 내용을 비교해 같은지 확인
        assertEquals(itemFormDto.getItemNm(), item.getItemNm());
        assertEquals(itemFormDto.getItemSellStatus(), item.getItemSellStatus());
        assertEquals(itemFormDto.getItemDetail(), item.getItemDetail());
        assertEquals(itemFormDto.getPrice(), item.getPrice());
        assertEquals(itemFormDto.getStockNumber(), item.getStockNumber());
        // multipartFileList의 0번 인덱스 내용과 itemImgList 0번 인덱스 내용을 비교해 같은지 확인
        assertEquals(multipartFileList.get(0).getOriginalFilename(), itemImgList.get(0).getOriImgName());

    }

}

📍결과

Hibernate: 
    select
        next value for item_seq
image0.jpg
******
C:/shop1/item/e4fea683-7aec-4d9b-bb30-687ad442cc64.jpg
e4fea683-7aec-4d9b-bb30-687ad442cc64.jpg
1111
(((((
Hibernate: 
    select
        next value for item_img_seq
image1.jpg
******
C:/shop1/item/0c340b74-bb36-4a8e-94c8-5f139b947eb0.jpg
0c340b74-bb36-4a8e-94c8-5f139b947eb0.jpg
1111
(((((
Hibernate: 
    select
        next value for item_img_seq
image2.jpg
******
C:/shop1/item/25f4801c-3e2d-4b29-bfb7-387e41ef3f9a.jpg
25f4801c-3e2d-4b29-bfb7-387e41ef3f9a.jpg
1111
(((((
image3.jpg
******
C:/shop1/item/a5114d7f-a79f-497a-97fb-91ef8e9972ab.jpg
a5114d7f-a79f-497a-97fb-91ef8e9972ab.jpg
1111
(((((
image4.jpg
******
C:/shop1/item/983331d1-1576-44e7-b26b-8dca4e029ef8.jpg
983331d1-1576-44e7-b26b-8dca4e029ef8.jpg
1111
(((((

💷실제 상품 이미지 등록하기

👉 회원 가입

👉 ItemFormDto 를 통한 유효성 처리

👉 상품 등록 전

👉 이미지 등록을 하지 않았을 때

👉 성공. 빈 4칸은 수정을 위해 생성 된 것

👁‍🗨다른 사람 웹에서 넣어보기

👉 상대방 경로에 잘 들어감

❓🔥어떤 구조로 실행?🔥

참고

1. "ADMIN" 권한을 가진 아이디로 상품 등록 페이지 Get 요청

2. Item Controller 에서 상품 등록 페이지를 반환하면서 itemFormDto 객체도 넘김

3. 상품 등록 페이지에서 상품 정보 및 이미지를 입력하고 "저장" (POST 요청)

4. Item Controller 에서 입력값을 검증하고 itemService.saveItem() 메소드를 수행. 이 때, 파라미터는 입력받은 itemFormDto 객체와 이미지 정보를 담고있는 itemImgFileList 를 넘김

5. itemService 에서 itemFormDto 객체를 item 엔티티로 변환하고 itemRepository.save() 메소드 수행

6. itemService 에서 itemImg 객체를 생성하고 itemImgService.saveItemImg() 메소드 수행. 이 때, 파라미터는 itemImg 객체와 이미지 정보를 담고있는 itemImgFileList.get(i) 객체 하나를 지정

7. ItemImgService 에서 상품 이미지가 존재한다면 fileService.uploadFile() 메소드 수행. 이 때, 파라미터는 "저장위치", "원래 파일명", "이미지 Byte 파일"

8. FileService 에서 UUID 객체를 이용해 파일명을 새로 만들고 FileOutputStream 을 이용하여 저장

9. ItemImgService 에서 itemImgRepository.save() 메소드 수행

10. 저장 완료

상품 객체만 필요하다? ❌

상품을 등록한다고 해서 상품 Entity 만 있으면 되는 것이 아니라 상품을 보여줄 이미지도 필요하다.

그렇다고해서 상품과 이미지 정보를 하나의 객체로 구현하지말고,
각각 따로 구현해야 올바른 설계이다.

추가적으로 상품과 상품 이미지 정보는 DB에 저장되지만 실제 이미지 File 은 로컬내에 저장되는 구조기 때문에 아래처럼 총 3개의 부분으로 나눠야함

• 상품 Entity
• 상품 이미지 정보 Entity
• 상품 이미지 File
  
  

3개의 부분으로 나눴다면 Service 로직도 아래처럼 3개로 나눠야하고,
상품 이미지 File 은 DB 에 저장되는 것이 아니기 때문에 Repository 가 아닌 FileOutputStream 으로 저장

• 상품 Entity 👉 상품 Service 👉 상품 Repository
  
  
• 상품 이미지 정보 Entity 👉 상품 이미지 Service 👉 상품 이미지 Repository
  
  
• 상품 이미지 File 👉 File Service 👉 FileOutputStream
  
  

즉, 상품을 등록한다고 했을 때 상품 객체 하나만을 구현하는 것이 아니라 최대한 세분화 한 뒤에 Service 로직도 나눠서 구현해야 한다.

💷상품 수정하기

📌ItemService 클래스 수정

...

// 상품 수정
    // 상품을 수정하려면 해당 상품을 불러와야 함
    // 👉 ItemService 에 상품 조회 메소드 getItemDtl 추가 (조회 기능이므로 읽기 전용으로 불러옴)
    @Transactional(readOnly = true)
    public ItemFormDto getItemDtl(Long itemId){

        List<ItemImg> itemImgList = itemImgRepository.findByItemIdOrderByIdAsc(itemId);

        // DB에서 데이터를 가져 옴
        // DTO
        List<ItemImgDto> itemImgDtoList = new ArrayList<>();

        for(ItemImg itemImg : itemImgList){

            // Entity 👉 DTO (modelMapper)
            ItemImgDto itemImgDto = ItemImgDto.of(itemImg);
            itemImgDtoList.add(itemImgDto);

        }

        // item 엔티티와 img 정보 엔티티를 itemFormDto 객체로 변환 후 반환하는 조회 기능
        Item item = itemRepository.findById(itemId).orElseThrow(EntityNotFoundException::new);
        // Item 👉 ItemFormDto (modelMapper)
        ItemFormDto itemFormDto = ItemFormDto.of(item);
        itemFormDto.setItemImgDtoList(itemImgDtoList);

        return itemFormDto;

    }

}

📌ItemController 클래스 수정

...


    @GetMapping(value = "/admin/item/{itemId}")
    public String itemDtl(@PathVariable("itemId") Long itemId, Model model){

        try {

            ItemFormDto itemFormDto = itemService.getItemDtl(itemId);
            model.addAttribute("itemFormDto", itemFormDto);

        }catch (EntityNotFoundException e){

            model.addAttribute("errorMessage", "존재하지 않는 상품입니다.")
            model.addAttribute("itemFormDto", new ItemFormDto());

            return "item/itemForm";
            
        }

        return "item/itemForm";

    }


}

📍결과

👉 로그인

👉 item_id를 이용해 /admin/item/{itemId} 인 /admin/item/1 로 가보자

👉 item_id에 따른 수정 페이지로 잘 이동 했다. 이제 실제 수정을 해보자

📌상품 수정하기

📍ItemImgService 클래스 수정

...

    public void updateItemImg(Long itemImgId, MultipartFile itemImgFile) throws Exception {
        // 상품의 이미지를 수정한 경우, 기존의 이미지 정보 객체를 불러와 상품 이미지 업데이트
        if (!itemImgFile.isEmpty()){
            ItemImg savedItemImg = itemImgRepository.findById(itemImgId).
                    orElseThrow(EntityExistsException::new); // 기존 엔티티 조회

            // 기존에 등록된 상품 이미지 파일이 있는 경우 파일 삭제(존재하지 않는다면 이미지를 추가한 것)
            if(!StringUtils.isEmpty(savedItemImg.getImgName())){
                fileService.deleteFile(itemImgLocation + "/" + savedItemImg.getImgName());
            }

            String oriImgName = itemImgFile.getOriginalFilename();
            // 수정한 이미지 파일을 fileService.uploadFile() 메소드를 통해 업로드
            String imgName = fileService.uploadFile(itemImgLocation, oriImgName,
                    itemImgFile.getBytes()); // 파일 업로드
            String imgUrl = "/images/item/" + imgName;
            // 변경된 상품 이미지 정보 세팅
            // 상품 등록을 하는 경우에는 ItemImgRepository.save()로직을 호출 하지만
            // 호출을 하지 않았다. itemImgRepository.save() 가 아닌
            // savedItemImg.updateItemImg() 메소드로 객체를 수정 👉 변경 감지
            // savedItemimg 엔티티는 현재 영속성 상태이므로 데이터를 변경하는 것만으로 변경을 감지한다.
            // 트랜잭션이 끝날 때 update 쿼리가 실행 된다.
            // ❗ 영속성 상태여야 사용 가능!
            // 상품 수정 페이지에서 기존 이미지 파일을 수정하지 않았다면 "null" 객체로 넘어옴
            // 👉 상품 이미지 라벨에는 이름이 표시되어 있지만 파일이 등록된 것은 아님
            savedItemImg.updateItemImg(oriImgName, imgName, imgUrl);

        }
    }

❗ 변경감지?

애플리케이션의 Entity 객체와 1차 캐시에 저장된 해당 Entity의 스냅샷을 비교하여 변경 사항이 있다면 자동으로 UPDATE 문을 쓰기 지연 SQL 저장소에 담아 두어 커밋 시점에 변경 내용을 자동으로 반환

• JPA 는 1차 캐시에 DB 에서 처음 불러온 엔티티의 스냅샷을 저장
• 스냅샷과 비교하여 변경 내용이 있따면 UPDATE SQL 수행

📍Item 엔티티 클래스 수정

...

// 엔티티 클래스에 로직을 추가한다면 좀 더 객체지향적이고 코드 재활용이 가능
// 또한 변경 포인트를 한군데에서 관리할 수 있음
    public void updateItem(ItemFormDto itemFormDto){
        this.itemNm = itemFormDto.getItemNm();
        this.price = itemFormDto.getPrice();
        this.stockNumber = itemFormDto.getStockNumber();
        this.itemDetail = itemFormDto.getItemDetail();
        this.itemSellStatus = itemFormDto.getItemSellStatus();
    }
}

👉 변경 감지를 위해 만듦

📍ItemService 클래스 수정

...

    public Long updateItem(ItemFormDto itemFormDto, List<MultipartFile> itemImgFileList) throws Exception {

        // 상품 Id 를 이용하여 기존의 상품 Entity 객체를 불러온 뒤
        // Post 입력값으로 들어온 상품 정보로 수정
        Item item = itemRepository.findById(itemFormDto.getId())
                .orElseThrow(EntityNotFoundException::new);
        item.updateItem(itemFormDto);

        List<Long> itemImgIds = itemFormDto.getItemImgIds();

        // itemImgService.updateItemImg() 메소드를 이용하여 for문을 돌려 상품 이미지 수정
        for (int i = 0; i < itemImgFileList.size(); i++) {
            itemImgService.updateItemImg(itemImgIds.get(i), itemImgFileList.get(i));
        }

        return item.getId();

    }

}

📍ItemController 클래스 수정

...

// 상품 등록과 update만 다르다. 엔티티 빼서 변경 감지하고 바꿈
    @PostMapping(value = "/admin/item/{itemId}")
    public String itemUpdate(@Valid ItemFormDto itemFormDto, BindingResult bindingResult,
                             @RequestParam("itemImgFile") List<MultipartFile> itemImgFileList,
                             Model model){
        if (bindingResult.hasErrors()){
            return "item/itemForm";
        }

        if (itemImgFileList.get(0).isEmpty() && itemFormDto.getId() == null){
            model.addAttribute("errorMessage", "첫 번째 상품 이미지는 필수 입력 값 입니다.");
            return "item/itemForm";
        }

        try {
            itemService.updateItem(itemFormDto, itemImgFileList);
        }catch (Exception e){
            model.addAttribute("errorMessage", "상품 수정 중 에러가 발생하였습니다.");
            return "item/itemForm";
        }

        return "redirect:/";

    }

}

📍결과

👉 키티얼굴을 R로 변경

👉 있던 파일을 삭제하고 다시 넣음 (변경 감지)

👉 수정 날짜 등 잘 바뀐 것을 확인 할 수 있다.

❓어떤 구조로 실행?

❗ 상품 등록은 save() 메소드만 수행
상품 수정은 조회 👉 update() 메소드를 수행. 변경 감지 이용

1. "ADMIN" 권한을 가진 아이디로 상품 수정 페이지 Get 요청 th:formaction="@{'/admin/item/' + ${itemFormDto.id} } 👉 Controller ("/admin/item/{itemId}")

2. Item Controller 에서 itemService.getItemDtl(itemId) 수행하여 해당 상품 조회

3. Item Controller 에서 상품 수정 페이지 반환하면서 해당 상품 Dto 객체 넘김

4. 상품 수정 페이지에서 수정한 후 "수정" (POST 요청)

5. Item Controller 에서 입력값을 검증하고 itemService.updateItem() 메소드를 수행. 이 때, 파라미터는 입력받은 itemFormDto 객체와 이미지 정보를 담고있는 itemImgFileList 를 넘김

6. itemService 에서 Item 객체를 조회하여 불러온 뒤 item.updateItem(itemFormDto) 수행

7. itemService 에서 itemImgService.updateItemImg() 메소드 수행. 이 때, 파라미터는 "상품 이미지의 id", "상품 이미지 파일"

8. itemImgService 에서 기존 이미지 파일 삭제 후 savedItemImg.updateItemImg () 수행

9. 이미지 수정 완료