72 lines
3.5 KiB
JavaScript
72 lines
3.5 KiB
JavaScript
/** 상품 그리드·페이지네이션 렌더링 */
|
|
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' });
|
|
}
|