[DIOS] 상품 읽기 페이지

📌  상품읽기 페이지(R)

- 기능 :  모든 사용자가 상품의 정보를 보는 페이지

 

[DIOS] 상품 등록 페이지

이전 포스팅의 내용인 상품등록을 끝내면 자동으로 상품 읽기 페이지로 넘어오기도 하고 사용자가 상품 목록에서 직접 상품 읽기 페이지로 접근할 수도 있다. 그렇다면 상품 읽기를 할때 필요한 데이터들을 생각해보고 만들어보자 !

 

---

✅  read.html modelAndView로 연결 

ℹ️ Controller 

▶️  매개변수로 받는 gid는 post Write 메서드에서 resposeObject로 보내준 goodsIndex 값

▶️ gid 값을 기준으로 상품을 select 하여 사용자가 읽고싶은 상품을 선택한뒤 정보를 modelAndView로 보낸다.

▶️ 선택한 상품이 가지고 있는 정보와 서비스에서 작성한 메서드를 이용해 읽기페이지에서 필요한 정보 (category, seller,sizes,colors)를 선택 후 modelAndView로 보낸다.

@RequestMapping(value = "read",
        method = RequestMethod.GET,
        produces = MediaType.TEXT_HTML_VALUE)
@ResponseBody
public ModelAndView getRead(@RequestParam(value = "gid") int gid) {

    ModelAndView modelAndView = new ModelAndView("goods/read");
    GoodsVo goods = this.goodsService.getItem(gid);
    ReviewEntity[] reviews = this.goodsService.getReviews(gid);
    int sum = 0;
    int reviewCount = reviews.length;
    double ScoreAvg = 0;
    for (int i = 0; i < reviews.length; i++) {
        sum += reviews[i].getScore();
    }
    if (reviewCount > 0) {
        ScoreAvg = (double) sum / reviewCount;
        ScoreAvg = (double) (Math.round(ScoreAvg * 10));
        ScoreAvg = ScoreAvg / 10;

    } else {
        ScoreAvg = 0;
    }
    goods.setScoreAvg(ScoreAvg);
    goods.setIndex(gid);
    modelAndView.addObject("goods", goods);
    modelAndView.addObject("category", this.goodsService.getCategory(goods.getCategoryId()));
    modelAndView.addObject("seller", this.goodsService.getBrand(goods.getSellerIndex()));
    modelAndView.addObject("sizes", this.goodsService.getItemSize(gid));
    modelAndView.addObject("colors", this.goodsService.getItemColors(gid));
    return modelAndView;
}

 

ℹ️ Service : 각 테이블의 기본키(index,id)를 기준으로 데이터를 select 하는 서비스를 작성한다.

    public GoodsVo getItem(int index) {
    return this.goodsMapper.selectItemByIndexExceptImage(index);
    }

    public ItemCategoryEntity getCategory(String id) {
        return this.goodsMapper.selectItemCategoryById(id);
    }
    
    public SellerEntity getBrand(int index) {
        return this.goodsMapper.selectSellerByIndexExceptImage(index);
    }
    
    public ItemSizeEntity[] getItemSize(int itemIndex) {
        return this.goodsMapper.selectSizeByItemIndex(itemIndex);
    }
    
    public ItemColorEntity[] getItemColors(int itemIndex) {
        return this.goodsMapper.selectColorsByItemIndex(itemIndex);
    }

ℹ️ HTML

 

▶️ 타임리프를 이용하여 Controller에서 보내준 값을 이용해 데이터를 불러와 상품읽기 페이지를 만든다.

<div class="title_box">
    <div class="item-title-img">
        <img th:src="@{./titleImage (index=${goods.getIndex()})}"
             th:alt="${goods.getTitleImageName()}">
    </div>
    <div class="item-info" id="itemInfo">
        <h2 th:utext="${goods.getItemName()}" style="font-family: none"></h2>

        <form class="content" id="form">
            <input name="price" type="hidden" th:value="${goods.getPrice()}">
            <table class="table" id="table">
                <tbody>
                <tr class="item-category">
                    <th>상품 분류</th>
                    <td th:text="${category.getText()}"></td>
                </tr>
                <tr class="item-brand">
                    <th>브랜드</th>
                    <td>
                        <div class="item-content" id="logoContainer">

                            <img class="logo"
                                 th:src="@{./sellerImage (index=${seller.getIndex()})}"
                                 th:alt="${seller.getImageName()}">

                            <a th:href="${seller.getHomePage()}"
                               th:text="${seller.getStoreName()}"
                               class="brand"></a>
                        </div>
                    </td>
                </tr>
                <tr class="item-price">
                    <th>가격</th>
                    <td name="price" class="price"
                        th:value="${goods.getPrice()}"
                        th:text="${#numbers.formatInteger(goods.getPrice(), 0, 'COMMA')+'원'}"></td>
                </tr>
                <tr class="color-option">
                    <th>색상</th>
                    <td>
                        <select id="colorOption" onchange="result()">
                            <option value="0">색상을 선택해 주세요</option>
                            <option disabled value="">------------------------</option>
                            <option th:each="color: ${colors}"
                                    th:value="${color.getItemIndex}"
                                    th:text="${color.getColor()}">
                            </option>
                        </select>
                    </td>
                </tr>
                <tr class="size-option">
                    <th>사이즈</th>
                    <td>
                        <select id="sizeOption" onchange="result()">
                            <option value="0">사이즈를 선택해 주세요</option>
                            <option disabled value="">------------------------</option>
                            <option th:each="size:${sizes}"
                                    th:value="${size.getItemIndex}"
                                    th:text="${size.getSize()}">
                            </option>
                        </select>
                    </td>
                </tr>
                </tbody>
            </table>
        </form>