[DIOS] 상품 수정 페이지

📌 상품 수정 페이지(U)

- 조건 : 관리자만 접근, 수정 가능

- 기능 : 상품의 정보를 불러온 뒤 수정내용 반영

 

✅ 조건설정 :  관리자만 수정페이지에 접근 허용하기

 

<a th:href="@{/goods/modify(gid=${goods.getIndex()})}" class="title" id="title"
   th:if="${session.user!=null && session.user.isAdmin}">
<span class="text">상품 수정하기</span>
</a>

상품 읽기 html 에서 '상품수정하기' 버튼을 만든 태그에 타임리프를 이용하여 로그인한 사용자가 관리자일때에만 보여지도록 조건을 설정해준다.

<script
        th:if="${user == null || !user.isAdmin()}">
    alert('해당 페이지는 관리자만 접근할 수 있는 페이지입니다.');
    window.location.href='/dios/login';
</script>

 

마찬가지로, 만약 관리자가 아닌 사용자가 임의로 주소창을 입력해서 들어갈 경우도 대비해야하기 때문에 상품읽기html 에서도 <script> 태그 안에 타임리프 조건을 이용하여 alert 경고창을 띄운 뒤 로그인 화면으로 이동하도록 한다.

---

✅  Controller 에서 getModify 메서드 작성 : 상품수정 html modelAndView로 연결 

 

ℹ️ Controller : service에서 가져온 정보들을 modelAndView 에 addObject 하여 html에 정보 전달

@RequestMapping(value = "modify",
   	method = RequestMethod.GET, produces = MediaType.TEXT_HTML_VALUE)
	public ModelAndView getModify(@SessionAttribute(value = "user", required = false) UserEntity user,
                                  @RequestParam(value = "gid", required = false) int gid) {

        ModelAndView modelAndView = new ModelAndView("goods/modify");
        ItemEntity item = new ItemEntity();
        item.setIndex(gid);

        Enum<?> result = this.goodsService.prepareModifyItem(item, user);
        modelAndView.addObject("item", item);
        modelAndView.addObject("result", result.name());
        SellerEntity[] sellers = this.goodsService.getSeller();
        ItemCategoryEntity[] categories = this.goodsService.getItemCategory();
        modelAndView.addObject("seller", sellers);
        modelAndView.addObject("category", categories);
        ItemColorEntity[] colors = this.goodsService.getItemColors(item.getIndex());
        modelAndView.addObject("colors", colors);
        ItemSizeEntity[] sizes = this.goodsService.getItemSize(item.getIndex());
        modelAndView.addObject("sizes", sizes);

        modelAndView.addObject("user", user);

        if (result == CommonResult.SUCCESS) {
            modelAndView.addObject("gid", item.getIndex());
        }

        return modelAndView;
    }

ℹ️ Service(수정 사전 준비) :  itemIndex 값으로 수정하려는 item DB에 저장되어있는 상품의 정보를 mapper에서 모두 select 하여 수정할 아이템 정보 불러오기

@Transactional
    public Enum<? extends IResult> prepareModifyItem(ItemEntity item, UserEntity user) {
        if (user == null) {
            return ModifyItemResult.NOT_SIGNED;
        }
        ItemEntity existingItem = this.goodsMapper.selectItemByIndex(item.getIndex());
        if (existingItem == null) {
            return ModifyItemResult.NO_SUCH_Item;
        }
        if (!user.isAdmin()) {
            return ModifyItemResult.NOT_ALLOWED;
        }
        item.setCategoryId(existingItem.getCategoryId());// 이게 cad
        item.setSellerIndex(existingItem.getSellerIndex());
        item.setItemName(existingItem.getItemName());
        item.setItemDetail(existingItem.getItemDetail());
        item.setPrice(existingItem.getPrice());
        item.setCount(existingItem.getCount());
        item.setCreatedOn(existingItem.getCreatedOn());
        item.setTitleImageData(existingItem.getTitleImageData());
        item.setTitleImageMime(existingItem.getTitleImageMime());
        item.setTitleImageName(existingItem.getTitleImageName());

        return CommonResult.SUCCESS;
    }

 

ℹ️ HTML : Controller에서 전달받은 정보를thymeleaf 를 이용해 값을 가져온다.

<select id="itemCategory" th:name="itemCategory">
    <option value=""> 상품 종류를 선택해주세요.</option>
    <option th:each="categories : ${category}"
            th:value="${categories.getId()}"
            th:text="${categories.getText()}" name="category"></option>
</select>

예시로 상품분류란 코드만 가져왔지만, 브랜드 정보를 가져오는 방법은 위와 동일하다.

---

✅ 옵션 값 추가입력(색상, 사이즈)

ℹ️ JavaScript: input 박스에서 내용입력 후  'enter'를 누르면 selectBox로 입력한 값 넘기기

* 사이즈의 코드도 동일하다

form['newColor'].addEventListener('keyup', e => {

    if (e.key === 'Enter') {

        if (form['newColor'].value === '') {
            return;
        }

        const optionElement = document.createElement('option');
        optionElement.innerText = e.target.value;
        optionElement.setAttribute('value', e.target.value);
        optionElement.dataset.virtual = "true";
        form['colors'].append(optionElement);
        e.target.value = '';
        e.target.focus();
    }
});

✅ 옵션 값 삭제(색상, 사이즈) : 

ℹ️ JavaScript: 삭제할 옵션값을 선택 후 삭제 버튼을 누를 시 Ajax 요청이 생기도록 event 코드 작성

* 사이즈의 코드도 동일하다

const colorDeleteButton = document.getElementById('colorDeleteButton');
colorDeleteButton.addEventListener('click', () => {
    const selectedOptions = Array.from(form['colors']
        .querySelectorAll(':scope > option'))
        .filter(x => x.selected);
    const formData = new FormData();
    let added = 0;
    for (let selectedOption of selectedOptions) {
        if (selectedOption.dataset.virtual === 'true') {
            selectedOption.remove();
        } else {
            formData.append('color', selectedOption.value);
            added++;
        }
    }
    if (added === 0) {
        return;
    }
    const xhr = new XMLHttpRequest();
    formData.append('itemIndex', form['itemIndex'].value);
    xhr.open('DELETE', './colors');
    xhr.onreadystatechange = () => {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status >= 200 && xhr.status < 300) {
                alert('선택한 색상이 삭제되었습니다!');
                window.location.href = window.location.href;
            }
        }
    };
    xhr.send(formData);
});

---

✅ 상품 대표 이미지 수정

ℹ️ JavaScript

form.querySelector('[rel = "imageSelectButton"]').addEventListener('click', e => {
    e.preventDefault();
    form['images'].click();
});

form['images'].addEventListener('input', () => {
    const imageContainerElement = form.querySelector('[rel="imageContainer"]');
    imageContainerElement.querySelectorAll('img.image').forEach(x => x.remove());
    const imageSrc = URL.createObjectURL(form['images'].files[0]);
    document.getElementById('imgThumb').setAttribute('src', imageSrc);
})

---

✅ Controller에서 patchModify 메서드 작성

ℹ️ Controller

@RequestMapping(value = "modify",
            method = RequestMethod.PATCH,
            produces = MediaType.APPLICATION_JSON_VALUE)
    @ResponseBody //xhr 로 반환 받을 것들은 무조건 ResponseBody 붙여준다.
    public String patchModify(@SessionAttribute(value = "user", required = false) UserEntity user,
                              @RequestParam(value = "gid") int gid,
                              @RequestParam(value = "newImage", required = false) MultipartFile newImage,
                              @RequestParam(value = "sizes", required = false) String[] sizes,
                              @RequestParam(value = "colors", required = false) String[] colors,
                              ItemEntity item) throws IOException {

        item.setIndex(gid);
        Enum<?> result = this.goodsService.ModifyItem(item, user, newImage);
        if (colors != null) {
            ItemColorEntity[] itemColors = new ItemColorEntity[colors.length];
            for (int i = 0; i < colors.length; i++) {
                itemColors[i] = new ItemColorEntity();
                itemColors[i].setItemIndex(item.getIndex());
                itemColors[i].setColor(colors[i]);
            }
            this.goodsService.addItemColors(itemColors);
        }

        if (sizes != null) {
            ItemSizeEntity[] itemSize = new ItemSizeEntity[sizes.length];
            for (int i = 0; i < sizes.length; i++) {
                itemSize[i] = new ItemSizeEntity();
                itemSize[i].setItemIndex(item.getIndex());
                itemSize[i].setSize(sizes[i]);
            }
            this.goodsService.addItemSizes(itemSize);
        }


        JSONObject responseObject = new JSONObject();
        responseObject.put("result", result.name().toLowerCase());
        if (result == CommonResult.SUCCESS) {
            responseObject.put("gid", gid);
        }
        return responseObject.toString();
    }

ℹ️ Service(수정) 

상품수정하는 사용자가 로그인이 되어있지 않거나 관리자가 아니라면 권한없음을 반환,

기존 상품을 불러와 새로운 정보 set 한 뒤 상품 수정한 갯수에따라 성공여부 반환 

 @Transactional
    public Enum<? extends IResult> ModifyItem(ItemEntity item, UserEntity user, MultipartFile images) throws IOException {
        if (user == null) {
            return ModifyItemResult.NOT_SIGNED;
        }
        GoodsVo existingItem = this.goodsMapper.selectItemByIndex(item.getIndex());
        // 기존에 있는 title 이미지 select
        ItemEntity existingTitleImage = this.goodsMapper.selectItemTitleImageByIndex(item.getIndex());
        if (existingItem == null) {
            return ModifyItemResult.NO_SUCH_Item;
        }
        if (!user.isAdmin()) {
            return ModifyItemResult.NOT_ALLOWED;
        }

        //새로 저장할 내용을 set해주기 > 수정된 내용이 저장됨
        existingItem.setCategoryId(item.getCategoryId());
        existingItem.setSellerIndex(item.getSellerIndex());
        existingItem.setItemName(item.getItemName());
        existingItem.setItemDetail(item.getItemDetail());
        existingItem.setPrice(item.getPrice());
        existingItem.setCount(item.getCount());
        existingItem.setCreatedOn(new Date());

        existingItem.setTitleImageData(images == null ? existingTitleImage.getTitleImageData() : images.getBytes()); //조건 안걸면 이미지가 null 일 때 오류뜸
        existingItem.setTitleImageMime(images == null ? existingTitleImage.getTitleImageMime(): images.getContentType()); //조건 안걸면 이미지가 null 일 때 오류뜸
        existingItem.setTitleImageName(images == null ? existingTitleImage.getTitleImageName() : images.getName()); //마찬가지
        return this.goodsMapper.updateItem(existingItem) > 0
                ? CommonResult.SUCCESS
                : CommonResult.FAILURE;
    }

ℹ️ JavaScript 

insert 할때 DB에 필요한 값들을 formData에 append 해준뒤

ajax 통신을 이용해 Controller 에서 받은 결과값에 알맞는 구현을 해주고

성공했을 시에는 상품읽기 페이지로 이동하도록 작성했다.

submit.addEventListener('click', e => {

    e.preventDefault();

    if (form['itemName'].value === '') {
        alert('상품 이름을 입력해주세요.');
        form['itemName'].focus();
        return false;
    }
    if (editor.getData() === '') {
        alert('상품 상세페이지를 입력해 주세요.');
        editor.focus();
        return false;
    }


    const xhr = new XMLHttpRequest();
    const formData = new FormData();
    formData.append('newImage', form['images'].files.length > 0 ? form['images'].files[0] : null);
    // formData.append('images', form['images'].files);// 이미지 파일
    formData.append('categoryId', itemCategory.options[itemCategory.selectedIndex].value); // 상품 분류
    formData.append('itemName', form['itemName'].value);//상품 이름
    formData.append('sellerIndex', seller.options[seller.selectedIndex].value);//상품 브랜드 네임
    formData.append('itemDetail', editor.getData());
    formData.append('price', form['itemPrice'].value);
    formData.append('count', form['count'].value);

    form['colors'].querySelectorAll(':scope > option').forEach(option => {
        if (option.dataset.virtual === 'true') {
            formData.append('colors', option.value);
        }
    });

    form['sizes'].querySelectorAll(':scope > option').forEach(option => {
        if (option.dataset.virtual === 'true') {
            formData.append('sizes', option.value);
        }
    });

    xhr.open('PATCH', window.location.href);
    xhr.onreadystatechange = () => {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status >= 200 && xhr.status < 300) {
                const responseObject = JSON.parse(xhr.responseText);
                if (responseObject['result'] === 'not_allowed') {
                    alert('상품 수정의 권한이 없습니다.');
                } else if (responseObject['result'] === 'success') {
                    alert('상품이 수정되었습니다!');
                    window.location.href = './read?gid=' + responseObject['gid'];
                    form['image'].value;
                }
            } else {
                alert('서버와 통신하지 못하였습니다. 잠시 후 다시 시도해주세요.');
            }
        }
    }
    xhr.send(formData);
});