116 lines
5.4 KiB
JavaScript
116 lines
5.4 KiB
JavaScript
/** 상품 그리드·페이지네이션 렌더링 */
|
|
import { state } from './state.js';
|
|
import { ITEMS_PER_PAGE, STATUS_META } from './config.js';
|
|
|
|
export function renderProducts(page = 1) {
|
|
const grid = document.getElementById('product-grid');
|
|
const paginationContainer = document.getElementById('pagination');
|
|
if (!grid) return;
|
|
|
|
// 1. 결과가 0개인 경우 (안내 텍스트만 출력)
|
|
if (state.visibleProducts.length === 0) {
|
|
grid.classList.remove('grid'); // 중앙 정렬을 위해 그리드 해제
|
|
grid.innerHTML = `
|
|
<div class="flex flex-col items-center justify-center py-20 w-full text-center">
|
|
<span class="material-symbols-outlined text-6xl text-slate-300 dark:text-slate-700 mb-4">
|
|
search_off
|
|
</span>
|
|
<h3 class="text-lg font-bold text-slate-900 dark:text-white mb-2">검색 결과가 없습니다</h3>
|
|
<p class="text-slate-500 dark:text-slate-400 text-sm">
|
|
입력하신 검색어나 선택한 필터를 확인해 주세요.
|
|
</p>
|
|
</div>
|
|
`;
|
|
|
|
if (paginationContainer) paginationContainer.innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
// 2. 결과가 있을 경우 (그리드 복구 및 초기화)
|
|
grid.classList.add('grid');
|
|
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 gap-1">
|
|
<h3 class="text-slate-900 dark:text-white text-base font-semibold leading-tight ${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 line-clamp-1">${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' });
|
|
}
|
|
|
|
/** 모든 필터를 초기 상태로 되돌리는 함수 */
|
|
function resetAllFilters() {
|
|
state.searchKeyword = '';
|
|
const searchInput = document.getElementById('search-input');
|
|
if (searchInput) searchInput.value = '';
|
|
|
|
state.activeCategories.clear();
|
|
state.activeCategories.add('All');
|
|
|
|
// 상태 필터 초기화 (config에서 defaultActive인 것만)
|
|
import('./config.js').then(({ STATUS_FILTERS }) => {
|
|
state.activeStatuses.clear();
|
|
STATUS_FILTERS.filter(f => f.defaultActive).forEach(f => state.activeStatuses.add(f.key));
|
|
|
|
// UI 전체 갱신
|
|
applyFilters();
|
|
renderStatusChips();
|
|
renderCategoryChips(productsData);
|
|
});
|
|
} |