zenn/zenn.inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[260206]

Browse Source 
- 검색 조건 보완, 검색 결과 개수 표시, 검색 결과 없을 경우 안내 추가
- 상품 +7
This commit is contained in:
zenn
2026-02-06 00:05:19 +09:00
parent dd2ccbc12b
commit dfe59e516e
34 changed files with 364 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
scripts/productList.js
View File

@@ -2,33 +2,49 @@
import { state } from './state.js';
import { ITEMS_PER_PAGE, STATUS_META } from './config.js';
export function renderProducts(page) {
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="relative w-full aspect-[4/5] bg-slate-50 dark:bg-slate-800 rounded-xl overflow-hidden shadow-sm">
<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>
<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-500 dark:text-slate-400 text-sm font-normal line-clamp-1">${product.description}</p>
</div>
</div>
`;
@@ -69,3 +85,24 @@ export function changePage(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);
});
}