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

- 카드 전환 방식 변경

Browse Source 
- 필터 조건 선택 가능하게 변경 등
This commit is contained in:
zenn
2026-02-12 01:35:44 +09:00
parent d9dea9581c
commit a7817d2113
17 changed files with 440 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
scripts/filters.js
View File

@@ -1,6 +1,6 @@
/** 상태·카테고리·검색 필터 로직 및 UI */
import { state, productsData } from './state.js';
import { ITEMS_PER_PAGE, STATUS_META, STATUS_FILTERS, STATUS_ORDER, STATUS_COLOR, SEARCH_CONFIG, } from './config.js';
import { ITEMS_PER_PAGE, STATUS_META, STATUS_FILTERS, STATUS_ORDER, STATUS_COLOR, SEARCH_CONFIG, SORT_CONFIG } from './config.js';
import { renderProducts } from './productList.js';
function getStatusChipClass(status, isActive) {
@@ -19,7 +19,7 @@ export function renderStatusChips() {
// 이제 config에서 자동 생성된 STATUS_FILTERS를 사용합니다.
STATUS_FILTERS.forEach(({ key, label }) => {
const isActive = state.activeStatuses.has(key);
const chip = document.createElement('button');
// getStatusChipClass 함수가 기존에 정의되어 있다면 그대로 사용하세요.
chip.className = `status-chip px-3 py-1.5 md:px-4 md:py-2 rounded-full text-xs md:text-sm font-medium transition-all duration-200 border ${getStatusChipClass(key, isActive)}`;
@@ -44,7 +44,6 @@ function toggleStatusFilter(status) {
// [핵심] 필터 적용 함수
export function applyFilters() {
// [수정] 무조건 1페이지로 초기화하지 않고, 나중에 데이터 개수에 맞춰 계산합니다.
const keyword = state.searchKeyword.toLowerCase();
// 1. 데이터 필터링 및 정렬
@@ -52,10 +51,10 @@ export function applyFilters() {
.filter((product) => {
const meta = STATUS_META[product.status];
// [1] 시스템 가시성 체크 (isSystemVisible이 false면 목록에서 완전히 제외)
// [1] 시스템 가시성 체크
if (!meta || !meta.isSystemVisible) return false;
// [2] 상태 필터 체크 (사용자가 필터 칩을 클릭해 활성화했는지)
// [2] 상태 필터 체크
const statusMatch = state.activeStatuses.has(product.status);
// [3] 카테고리 필터 체크
@@ -72,33 +71,57 @@ export function applyFilters() {
if (SEARCH_CONFIG.USE_TAGS && product.tags) searchPool.push(...product.tags);
if (SEARCH_CONFIG.USE_FULL_DESCRIPTION && product.fullDescription) searchPool.push(...product.fullDescription);
return searchPool.some((text) => String(text || '').toLowerCase().includes(keyword));
return searchPool.some((text) =>
String(text || '')
.toLowerCase()
.includes(keyword),
);
})();
return statusMatch && categoryMatch && searchMatch;
})
.sort((a, b) => {
// 0. 스위치가 모두 꺼져있다면 정렬하지 않고 원본 순서 유지
if (!SORT_CONFIG.PUSH_SOLD_OUT_TO_END && !SORT_CONFIG.PUSH_NON_SALE_TO_END) {
return 0;
}
const isASold = STATUS_META[a.status]?.soldOut;
const isBSold = STATUS_META[b.status]?.soldOut;
const isANonSale = a.status === '미판매';
const isBNonSale = b.status === '미판매';
// 1. 판매완료 정렬 제어
if (SORT_CONFIG.PUSH_SOLD_OUT_TO_END) {
if (isASold !== isBSold) return isASold ? 1 : -1;
}
// 2. 미판매 정렬 제어
if (SORT_CONFIG.PUSH_NON_SALE_TO_END) {
if (isANonSale !== isBNonSale) return isANonSale ? 1 : -1;
}
// 3. 만약 위 스위치들 중 하나라도 켜져 있다면, 나머지는 STATUS_ORDER를 따름
const aOrder = STATUS_ORDER[a.status] ?? 999;
const bOrder = STATUS_ORDER[b.status] ?? 999;
return aOrder - bOrder;
});
// 2. [추가] 페이지 위치 안전 조정 로직
// 필터링된 결과로 가질 수 있는 최대 페이지 계산
// 2. 페이지 위치 안전 조정 로직
const totalPages = Math.ceil(state.visibleProducts.length / ITEMS_PER_PAGE);
if (state.currentPage > totalPages) {
// 만약 필터링 후 전체 페이지가 현재 페이지보다 적어지면 마지막 페이지로 이동
state.currentPage = Math.max(1, totalPages);
} else if (state.currentPage < 1) {
// 혹시 모를 에러 방지용 1페이지 고정
state.currentPage = 1;
}
// ※ 참고: 필터를 걸 때마다 무조건 첫 페이지를 보게 하고 싶다면
// 위 로직 대신 단순히 state.currentPage = 1; 을 쓰시면 됩니다.
// 3. UI 업데이트
renderTotalCount(state.visibleProducts.length);
// renderTotalCount 함수가 정의되어 있다면 실행
if (typeof renderTotalCount === 'function') {
renderTotalCount(state.visibleProducts.length);
}
renderProducts(state.currentPage);
}
@@ -120,26 +143,22 @@ export function renderCategoryChips(products) {
// [핵심] 시스템 가시성이 true인 상품의 카테고리만 추출합니다.
const validCategories = products
.filter(p => {
.filter((p) => {
const meta = STATUS_META[p.status];
// 해당 상태가 정의되어 있고, 시스템에서 보여주기로 한 경우만 포함
return meta && meta.isSystemVisible;
})
.map(p => p.category);
.map((p) => p.category);
// 'All'은 항상 포함하고, 필터링된 카테고리들만 중복 제거하여 합침
const categories = ['All', ...new Set(validCategories)];
container.innerHTML = '';
categories.forEach((cat) => {
const isActive = state.activeCategories.has(cat);
const chip = document.createElement('button');
chip.className = `filter-chip px-3 py-1.5 md:px-4 md:py-2 rounded-full text-xs md:text-sm font-medium transition border ${
isActive
? 'bg-primary text-white border-primary shadow-sm'
: 'bg-slate-50 text-slate-600 border-slate-200'
}`;
chip.className = `filter-chip px-3 py-1.5 md:px-4 md:py-2 rounded-full text-xs md:text-sm font-medium transition border ${isActive ? 'bg-primary text-white border-primary shadow-sm' : 'bg-slate-50 text-slate-600 border-slate-200'}`;
chip.textContent = cat;
chip.dataset.category = cat;
chip.onclick = () => toggleCategory(cat);
@@ -192,7 +211,7 @@ document.getElementById('logo-title')?.addEventListener('click', () => {
// 3. 상태 필터 초기화 (기본 활성화 상태로)
state.activeStatuses.clear();
STATUS_FILTERS.filter(f => f.defaultActive).forEach(f => state.activeStatuses.add(f.key));
STATUS_FILTERS.filter((f) => f.defaultActive).forEach((f) => state.activeStatuses.add(f.key));
// 4. 필터 적용 및 UI 갱신
applyFilters();
@@ -202,4 +221,3 @@ document.getElementById('logo-title')?.addEventListener('click', () => {
// 5. 페이지 최상단으로 스크롤 (선택 사항)
window.scrollTo({ top: 0, behavior: 'smooth' });
});