[260206]
- 검색 조건 보완, 검색 결과 개수 표시, 검색 결과 없을 경우 안내 추가 - 상품 +7
This commit is contained in:
@@ -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' });
|
||||
});
|
||||
Reference in New Issue
Block a user