상품 목록

<main>
    <section class="content">
        <div class="bar">
            <div>
                <a href="/">HOME</a>&nbsp;&nbsp;&gt;&nbsp;&nbsp;
                <a th:text="${productDTOList[0].mainCategoryName}" href="#">1차 카테고리</a>&nbsp;&nbsp;&gt;&nbsp;&nbsp;
                <a th:text="${productDTOList[0].subCategory.subCategoryName}" href="#">2차 카테고리</a>
            </div>
        </div>
        <p class="page_name" th:text="${productDTOList[0].subCategory.subCategoryName}">2차 카테고리</p>
        <th:block th:include="/product/side.html"/>
        <div class="container">
            <div class="slider">
                <div class="slides" id="slides">
                    <img src="/images/product/banner1.jpg" alt="배너 1">
                    <img src="/images/product/banner2.jpg" alt="배너 2">
                    <img src="/images/product/banner1.jpg" alt="배너 3">
                    <img src="/images/product/banner2.jpg" alt="배너 4">
                </div>
                <button class="prev" onclick="moveSlide(-1)">&#10094;</button>
                <button class="next" onclick="moveSlide(1)">&#10095;</button>
            </div>
            <h2>카테고리 베스트 상품</h2>
            <div class="best-grid">
                <div class="best-card"
                     th:each="product, stat : ${productDTOList}"
                     th:attr="data-prodno=${product.prodNo}">
                    <p class="rank" th:text="${stat.count}"></p>
                    <img class="product-img" th:src="${product.sNameList}" alt="상품 이미지" />
                    <div class="vendor-row">
                        <span class="vendor-name" th:text="${product.company}"></span>
                        <div class="icons">
                            <button><img th:src="@{/images/product/icon_favorite.png}" alt="찜"></button>
                            <button><img th:src="@{/images/product/icon_cart.png}" alt="장바구니"></button>
                        </div>
                    </div>
                    <p class="name">
                        <span class="brand" th:text="${product.prodBrand}"></span><br>
                        <span class="product-name" th:text="${product.prodName}"></span>
                    </p>
                    <p class="price">
                        <span class="discount" th:text="${product.prodDiscount + '%'}"></span>
                        <span th:text="${#numbers.formatInteger(product.prodPrice, 3, 'COMMA')} + '원'"></span>
                    </p>
                    <p class="review">
                        <span class="star" th:text="'★ ' + ${product.ratingAvg}"></span>
                        &nbsp;&nbsp;|&nbsp;&nbsp;리뷰 <span th:text="${product.reviewCount}"></span>
                    </p>
                </div>
            </div>
            <div class="nab_bar">
                <div class="nav">
                    <div>
                        <select id="salesPeriodSelect">
                            <option value="">판매많은순</option>
                            <option value="1year">1년</option>
                            <option value="6month">6개월</option>
                            <option value="1month">1개월</option>
                        </select>
                        <a href="#" data-sort="lowPrice">&nbsp;&nbsp;|&nbsp;&nbsp;낮은가격순&nbsp;&nbsp;|&nbsp;&nbsp;</a>
                        <a href="#" data-sort="highPrice">높은가격순&nbsp;&nbsp;|&nbsp;&nbsp;</a>
                        <a href="#" data-sort="highRating">평점높은순&nbsp;&nbsp;|&nbsp;&nbsp;</a>
                        <select id="reviewPeriodSelect">
                            <option value="">후기많은순</option>
                            <option value="1year">1년</option>
                            <option value="6month">6개월</option>
                            <option value="1month">1개월</option>
                        </select>
                        <a href="#" data-sort="latest">&nbsp;&nbsp;|&nbsp;&nbsp;최근등록순</a>
                    </div>
                </div>
                <div class="view-toggle">
                    <button id="toGrid" onclick="toggleView('grid')">
                        <img src="/images/product/grid.png" alt="그리드 보기">
                    </button>
                    <button id="toList" onclick="toggleView('list')" style="display: none;">
                        <img src="/images/product/list.png" alt="리스트 보기">
                    </button>
                </div>
            </div>
            <div id="productWrapper" class="product-wrapper list">
                <div class="product-list">
                    <div class="product-item">
                        <img class="product-img">
                        <div class="product-info">
                            <span class="vendor-name">판매자명</span><span class="vendor-rank">판매자등급</span><br>
                            <span class="brand">브랜드</span><br>
                            <span class="pname">상품명</span>
                            <div class="meta">
                                <span>★ 4.8</span>&nbsp;|&nbsp;리뷰 <span>0</span>
                            </div>
                            <span class="badge-free">무료배송</span>
                            <span>배송비</span>
                        </div>
                        <div class="product-price">
                            <del>정가</del><br>
                            <span class="discount">할인율</span>
                            <span>판매가</span> 원
                            <div class="icons">
                                <button><img src="/images/product/icon_favorite.png" alt="찜"></button>
                                <button><img src="/images/product/icon_cart.png" alt="장바구니"></button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page"></div>
        </div>
    </section>
</main>