AI 웹 개발 : Cursor로 검색·필터·페이징 기능 구현하기 (초보자ㆍ비전공자 실무 강화) | 쇼핑몰 만들기 Part 4

쇼핑몰 상품 리스트에 검색, 필터, 페이징 기능을 HTML과 CSS로 만들어 주세요.
요구사항:
- 검색창: 상품명 및 태그 검색 가능
- 필터: 카테고리, 가격대, 할인율 선택 가능
- 페이징: 한 페이지당 12개 상품, 이전/다음 버튼 포함
- 모바일, 태블릿, 데스크톱 반응형
- CSS/HTML 구조를 가독성 있게 작성

<!-- 검색창 -->
            <div class="search-box">
                <input 
                    type="text" 
                    id="searchInput" 
                    class="search-input" 
                    placeholder="상품명 또는 태그로 검색..."
                    aria-label="상품 검색"
                >
                <button class="search-button" aria-label="검색">
                    <span class="search-icon">🔍</span>
                </button>
            </div>

<!-- 가격대 필터 -->
                <div class="filter-group">
                    <label for="priceFilter" class="filter-label">가격대</label>
                    <select id="priceFilter" class="filter-select" aria-label="가격대 선택">
                        <option value="">전체</option>
                        <option value="0-20000">20,000원 이하</option>
                        <option value="20000-50000">20,000원 ~ 50,000원</option>
                        <option value="50000-100000">50,000원 ~ 100,000원</option>
                        <option value="100000-999999">100,000원 이상</option>
                    </select>
                </div>

 <!-- 페이징 컨트롤 -->
        <nav class="pagination-section" id="paginationSection" aria-label="페이지 네비게이션">
            <!-- 페이징 버튼들은 JavaScript로 동적 생성됩니다 -->
        </nav>

// ============================================
// 페이징 렌더링 함수
// ============================================

function renderPagination() {
    const totalPages = Math.ceil(filteredProducts.length / productsPerPage);
    
    paginationSection.innerHTML = '';

    if (totalPages <= 1) {
        return; // 페이지가 1개 이하면 페이징 숨기기
    }

    // 이전 버튼
    const prevButton = document.createElement('button');
    prevButton.className = 'pagination-button prev-next';
    prevButton.textContent = '이전';
    prevButton.disabled = currentPage === 1;
    prevButton.addEventListener('click', () => {
        if (currentPage > 1) {
            currentPage--;
            renderProducts();
            renderPagination();
            window.scrollTo({ top: 0, behavior: 'smooth' });
        }
    });
    paginationSection.appendChild(prevButton);

    // 페이지 번호 버튼
    const maxVisiblePages = 5;
    let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
    let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);

    if (endPage - startPage < maxVisiblePages - 1) {
        startPage = Math.max(1, endPage - maxVisiblePages + 1);
    }

                <button class="search-button" aria-label="검색">
                    <span class="search-icon">🔍</span>
                </button>