[DIOS] 상품 등록 페이지

📌  상품 등록(C)

- 조건 : 관리자만 작성가능

- 기능 : 쇼핑몰에 판매할 상품을 등록

---

✅ DB구성

상품에 필요한 정보들은 상품명(item_name),상품상세(item_detail),가격(price), 수량(count), 작성날짜(created_on), 대표 이미지(titleImage_name,titleImage_mime,titleImage_data), 상품분류(category_id), 브랜드(seller_index) 로 정했다.

그 중에서 상품분류와 브랜드는 상품을 등록할때마다 새로 적기엔 번거로우니 테이블을 따로 만들어 값을 넣고, 각 테이블의 기본키( id와 index)를 외래키로 받아오도록 작성했다. 또한 대표이미지의 사진은 1개만 등록할것임으로 이미지 테이블을 따로 빼지않고 상품 테이블에 함께 넣어줬다.

---

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

관리자 로그인시에만 '상품등록하기' 버튼이 상품 목록 상단에 표시

<div class="input-container" id="inputContainer"
     th:if="${session.user!=null && session.user.isAdmin()}">
    <div class="temp"></div>
    <div class="button-container" rel="write">
        <a class="article-creation">상품 등록하기</a>
    </div>
</div>

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

관리자가 아닌 사용자가 주소를 직접 입력하여 들어간 경우 보여지는 화면

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

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

---

 

✅  Controller 에서 getWrite 메서드 작성 : 상품등록 html modelAndView로 연결 

 

dios에서(가상으로) 판매하는 상품 분류는의류,신발,기구/용품/장비이고

(가상으로) 입점한 브랜드는나이키,푸마,아디다스로 각각 3가지씩 DB에 저장되어있다.

따라서 관리자가 상품등록을 할때 상품분류와 브랜드는 이미 저장되어있는 DB를 가져와 선택하도록 구상하였다.

 

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

@RequestMapping(value = "write",
        method = RequestMethod.GET)
public ModelAndView getWrite(@SessionAttribute(value = "user", required = false) UserEntity user) {
    ModelAndView modelAndView;
    modelAndView = new ModelAndView("goods/write");
    SellerEntity[] sellers = this.goodsService.getSeller();
    ItemCategoryEntity[] categories = this.goodsService.getItemCategory();
    modelAndView.addObject("seller", sellers);
    modelAndView.addObject("category", categories);
    modelAndView.addObject("user", user);
    return modelAndView;
}

ℹ️ Service :  DB에 저장되어있는 아이템 분류, 브랜드의 정보를 mapper에서 모두 select한 데이터를 반환

public SellerEntity[] getSeller() {
    return this.goodsMapper.selectSeller();
}

public ItemCategoryEntity[] getItemCategory() {
    return this.goodsMapper.selectItemCategory();
}

 

ℹ️ 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.onsubmit = e => {
    e.preventDefault();
};

// color
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);
        form['colors'].append(optionElement);
        e.target.value = '';
        e.target.focus();
    }
});

// size
form['newSize'].addEventListener('keyup', e => {
    if (e.key === 'Enter') {
        if (form['newSize'].value === '') {
            return;
        }
        const optionElement = document.createElement('option');
        optionElement.innerText = e.target.value;
        optionElement.setAttribute('value', e.target.value);
        form['sizes'].append(optionElement);
        e.target.value = '';
        e.target.focus();
    }
});

키보드에서 키를 놓을때 이벤트가 발생하도록 keyup event를 사용해주고, 

'Enter'를 쳤을때 입력받은 내용을 값으로 하는 option을 생성해 selectBox에 생성한 값을 보낸다.

---

✅ 대표사진 등록

ℹ️ JavaScript

//대표 이미지 삽입
ImageForm.querySelector('[rel = "imageSelectButton"]').addEventListener('click', e => {
    e.preventDefault();
    ImageForm['images'].click();
});

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

 

---

✅ Controller 에서 postWrite 메서드 작성

 

ℹ️ Controller

@PostMapping(value = "write")
@ResponseBody
public String postWrite(ItemEntity item,
                        @SessionAttribute(value = "user", required = false) UserEntity user,
                        @RequestParam(value = "sizes", required = false) String[] sizes,
                        @RequestParam(value = "colors", required = false) String[] colors,
                        @RequestParam(value = "images", required = false) MultipartFile images) throws IOException {

    Enum<?> result = this.goodsService.addItem(user, item, images);

    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);

    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("gid", item.getIndex()); //gid는 goodsIndex 의 줄임말이다.
    responseObject.put("result", result.name().toLowerCase());
    return responseObject.toString();
}

 

ℹ️ Service

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

상품 등록한 갯수에따라 성공여부 반환 

@Transactional
    public Enum<? extends IResult> addItem(UserEntity user, ItemEntity item, MultipartFile images) throws IOException {
        if (user == null || !user.isAdmin()) {
            return ReviewDeleteResult.NOT_ALLOWED;
        }
        item.setTitleImageData(images.getBytes());
        item.setTitleImageMime(images.getContentType());
        item.setTitleImageName(images.getName());
        return this.goodsMapper.insertItem(item) > 0
                ? CommonResult.SUCCESS
                : CommonResult.FAILURE;
    }

ℹ️ JavaScript

위에서 옵션값을 입력받을때 onsubmit을 사용해버려서,

상품등록하기 버튼을 따로 submit을 지정해주고 click event를 사용했다.

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();

    for (let file of ImageForm['images'].files) {
        formData.append('images', file);
    }
    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 => {
        formData.append('colors', option.value);
    });

    form['sizes'].querySelectorAll(':scope > option').forEach(option => {
        formData.append('sizes', option.value);
    });
    
    xhr.open('POST', './write');
    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'];
                    ImageForm['image'].value;
                }
            } else {
                alert('서버와 통신하지 못하였습니다. 잠시 후 다시 시도해주세요.')
            }
        }
    }
    xhr.send(formData);
});

---

개발 후기

상품등록 자체의 구현은 보기엔 쉬워보였지만, 그 안에서 내가 원하는 방향대로 코드를 짠다는 것이 얼마나 생각해야할게 많고 논리적인 구상을 요하는지 깨닫게 되었다.

 처음엔 옵션정보(색상,발사이즈, 옷 사이즈)테이블을 다 따로 만들어서 외래키로 받은 뒤 select option으로 선택한 값들만 insert 하도록 하고싶었다. 그리고  실제로 DB에 insert하는 것까지 성공했었는데, 그 뒤에 일어나는 수많은 오류(id 값이 PK라서 id 자체로 insert가 안됨, item_index가 FK라서 강제로 insert가 안됨, ...)까지는 고려하지 못해서..  DB부터 갈아엎고 다시 시작하는 과정을  몇번이나 반복하면서 앞으로 DB설계 하는 방법을 조금 더 공부한 뒤 개발 전에 더 논리적이고 체계적으로 DB를 설계할 필요성이 있다는걸 정말 느꼈다..ㅎㅎ