[260204] 역할별 스크립트 분리, 다크모드 추가

2026-02-04 14:56:59 +09:00
parent d4ccc616a7
commit b29cd5e7d9
12 changed files with 1165 additions and 1056 deletions
--- a/scripts/productList.js
+++ b/scripts/productList.js
@@ -0,0 +1,71 @@
+/** 상품 그리드·페이지네이션 렌더링 */
+import { state } from './state.js';
+import { ITEMS_PER_PAGE, STATUS_META } from './config.js';
+
+export function renderProducts(page) {
+    const grid = document.getElementById('product-grid');
+    if (!grid) return;
+    grid.innerHTML = '';
+
+    const startIndex = (page - 1) * ITEMS_PER_PAGE;
+    const pagedProducts = state.visibleProducts.slice(startIndex, startIndex + ITEMS_PER_PAGE);
+
+    pagedProducts.forEach((product) => {
+        const isSold = STATUS_META[product.status]?.soldOut === true;
+        const cardHtml = `
+            <div class="group flex flex-col gap-4 cursor-pointer" onclick="openModal('${product.id}')">
+                <div class="relative w-full aspect-[4/5] bg-slate-50 dark:bg-slate-800 rounded-xl overflow-hidden shadow-sm group-hover:shadow-md transition-shadow">
+                    <div class="w-full h-full bg-center bg-no-repeat bg-cover transform ${isSold ? 'grayscale opacity-80' : 'group-hover:scale-105'} transition-transform duration-500"
+                         style="background-image: url('${product.images[0]}')"></div>
+                    <div class="absolute top-3 left-3">
+                        <span class="px-2 py-1 text-[10px] uppercase tracking-wider font-bold rounded ${isSold ? 'bg-slate-900/10 text-slate-500' : 'bg-primary/10 text-primary'} backdrop-blur-md border border-primary/20">
+                            ${product.status}
+                        </span>
+                    </div>
+                </div>
+                <div class="flex flex-col gap-1">
+                    <div class="flex flex-col sm:flex-row justify-between items-start">
+                        <h3 class="text-slate-900 dark:text-white text-base font-semibold ${isSold ? 'line-through text-slate-400' : ''}">${product.title}</h3>
+                        <p class="text-slate-900 dark:text-white text-base font-bold text-nowrap">${product.currency}${product.price.toLocaleString()}</p>
+                    </div>
+                    <p class="text-slate-500 dark:text-slate-400 text-sm font-normal">${product.description}</p>
+                </div>
+            </div>
+        `;
+        grid.insertAdjacentHTML('beforeend', cardHtml);
+    });
+
+    renderPagination();
+}
+
+export function renderPagination() {
+    const container = document.getElementById('pagination');
+    if (!container) return;
+    const totalPages = Math.ceil(state.visibleProducts.length / ITEMS_PER_PAGE);
+    const { currentPage } = state;
+
+    let html = `<button onclick="changePage(${currentPage - 1})" class="size-10 flex items-center justify-center ${currentPage === 1 ? 'invisible' : ''}"><svg viewBox="0 0 24 24" fill="none"
+     stroke="#64748B" stroke-width="3"
+     stroke-linecap="round" stroke-linejoin="round"
+     class="w-5 h-5">
+  <path d="M15 18l-6-6 6-6" />
+</svg>
+</button>`;
+    for (let i = 1; i <= totalPages; i++) {
+        html += `<button onclick="changePage(${i})" class="size-10 font-bold rounded-lg ${i === currentPage ? 'bg-primary text-white' : 'text-slate-500'}">${i}</button>`;
+    }
+    html += `<button onclick="changePage(${currentPage + 1})" class="size-10 flex items-center justify-center ${currentPage === totalPages ? 'invisible' : ''}"><svg viewBox="0 0 24 24" fill="none"
+     stroke="#64748B" stroke-width="3"
+     stroke-linecap="round" stroke-linejoin="round"
+     class="w-5 h-5">
+  <path d="M9 18l6-6-6-6" />
+</svg>
+</button>`;
+    container.innerHTML = html;
+}
+
+export function changePage(page) {
+    state.currentPage = page;
+    renderProducts(page);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+}