- 
-
- sori.inventory
+
+ inventory_2
+
+ sori.inventory
@@ -133,6 +130,15 @@
+
+
+
+
+ Total Results
+ 0
+
+
diff --git a/scripts/config.js b/scripts/config.js
index a2042ee..34b619c 100644
--- a/scripts/config.js
+++ b/scripts/config.js
@@ -64,3 +64,11 @@ export const TAG_STYLES = {
};
export const TAG_DEFAULT_STYLE = 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400';
+
+export const SEARCH_CONFIG = {
+ USE_TITLE: true, // 상품명 검색
+ USE_CUSTOM_TAG: true, // 커스텀 태그 검색
+ USE_TAGS: true, // 태그 배열 검색
+ USE_DESCRIPTION: true, // 요약 설명 검색
+ USE_FULL_DESCRIPTION: false, // 상세 설명 배열 검색
+};
\ No newline at end of file
diff --git a/scripts/filters.js b/scripts/filters.js
index cf279a6..8a0112e 100644
--- a/scripts/filters.js
+++ b/scripts/filters.js
@@ -1,11 +1,6 @@
/** 상태·카테고리·검색 필터 로직 및 UI */
import { state, productsData } from './state.js';
-import {
- VISIBILITY_CONFIG,
- STATUS_FILTERS,
- STATUS_ORDER,
- STATUS_COLOR,
-} from './config.js';
+import { VISIBILITY_CONFIG, STATUS_FILTERS, STATUS_ORDER, STATUS_COLOR, SEARCH_CONFIG } from './config.js';
import { renderProducts } from './productList.js';
function getStatusChipClass(status, isActive) {
@@ -46,13 +41,37 @@ function toggleStatusFilter(status) {
export function applyFilters() {
state.currentPage = 1;
+ const keyword = state.searchKeyword.toLowerCase();
+
state.visibleProducts = productsData
.filter((product) => {
+ // [1] 가시성 및 상태/카테고리 필터
if (product.status === '미판매' && !VISIBILITY_CONFIG.showUnlisted) return false;
if (product.status === '판매완료' && !VISIBILITY_CONFIG.showSold) return false;
+
const statusMatch = state.activeStatuses.has(product.status);
const categoryMatch = state.activeCategories.has('All') || state.activeCategories.has(product.category);
- const searchMatch = state.searchKeyword === '' || product.title.toLowerCase().includes(state.searchKeyword);
+
+ // [2] config 설정을 기반으로 한 동적 검색 매칭
+ const searchMatch =
+ keyword === '' ||
+ (() => {
+ const searchPool = [];
+
+ if (SEARCH_CONFIG.USE_TITLE) searchPool.push(product.title);
+
+ if (SEARCH_CONFIG.USE_CUSTOM_TAG && product.customTag) searchPool.push(product.customTag);
+
+ if (SEARCH_CONFIG.USE_DESCRIPTION && product.description) searchPool.push(product.description);
+
+ if (SEARCH_CONFIG.USE_TAGS && product.tags) searchPool.push(...product.tags); // 배열 요소를 풀어서 추가
+
+ if (SEARCH_CONFIG.USE_FULL_DESCRIPTION && product.fullDescription) searchPool.push(...product.fullDescription);
+
+ // 검색 풀(Pool)에 있는 단어 중 키워드를 포함하는 게 하나라도 있는지 확인
+ return searchPool.some((text) => String(text).toLowerCase().includes(keyword));
+ })();
+
return statusMatch && categoryMatch && searchMatch;
})
.sort((a, b) => {
@@ -60,9 +79,20 @@ export function applyFilters() {
const bOrder = STATUS_ORDER[b.status] ?? 999;
return aOrder - bOrder;
});
+
+ renderTotalCount(state.visibleProducts.length);
+
renderProducts(state.currentPage);
}
+/** 총 개수를 화면에 표시하는 보조 함수 */
+function renderTotalCount(count) {
+ const totalCountElement = document.getElementById('total-count');
+ if (totalCountElement) {
+ totalCountElement.textContent = count.toLocaleString(); // 3자리마다 콤마
+ }
+}
+
export function getCategories(products) {
return ['All', ...new Set(products.map((p) => p.category))];
}
@@ -115,3 +145,27 @@ export function bindCategoryFilter(products) {
});
});
}
+
+// 로고 클릭 시 초기화 로직
+document.getElementById('logo-title')?.addEventListener('click', () => {
+ // 1. 검색어 초기화
+ state.searchKeyword = '';
+ const searchInput = document.getElementById('search-input'); // 검색창 ID가 있다면
+ if (searchInput) searchInput.value = '';
+
+ // 2. 카테고리 초기화 (All 선택)
+ state.activeCategories.clear();
+ state.activeCategories.add('All');
+
+ // 3. 상태 필터 초기화 (기본 활성화 상태로)
+ state.activeStatuses.clear();
+ STATUS_FILTERS.filter(f => f.defaultActive).forEach(f => state.activeStatuses.add(f.key));
+
+ // 4. 필터 적용 및 UI 갱신
+ applyFilters();
+ renderStatusChips();
+ renderCategoryChips(productsData);
+
+ // 5. 페이지 최상단으로 스크롤 (선택 사항)
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+});
\ No newline at end of file
diff --git a/scripts/main.js b/scripts/main.js
index d49a7ed..f039706 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -97,3 +97,4 @@ document.addEventListener('DOMContentLoaded', () => {
// 데이터용 새 ID 생성기
const newId = Math.random().toString(36).substring(2, 10);
console.log(`%c[NUMBER]: ${newId}`, 'color: #137fec; font-weight: bold; border: 1px solid #137fec; padding: 2px 5px; border-radius: 4px;');
+
diff --git a/scripts/productList.js b/scripts/productList.js
index e0d471b..f174adc 100644
--- a/scripts/productList.js
+++ b/scripts/productList.js
@@ -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 = `
+
+
+ search_off
+
+
+ `;
+
+ 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 = `
검색 결과가 없습니다
++ 입력하신 검색어나 선택한 필터를 확인해 주세요. +
+
-
+
`;
@@ -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);
+ });
+}
\ No newline at end of file
-
-
- ${product.status}
-
-
-
-
- ${product.title}
-${product.currency}${product.price.toLocaleString()}
-${product.description}
+${product.title}
+${product.description}