[260222]
필터 로직 개선 최종 스크립트 코드 정리
This commit is contained in:
@@ -1,25 +1,116 @@
|
||||
/** 상태·카테고리·검색 필터 로직 및 UI */
|
||||
/**
|
||||
* filters.js
|
||||
* 상태(Status), 카테고리(Category), 검색(Search), 태그(Tag) 필터 로직 및 UI 제어
|
||||
*/
|
||||
|
||||
import { state, productsData } from './state.js';
|
||||
import { ITEMS_PER_PAGE, STATUS_META, STATUS_FILTERS, STATUS_ORDER, STATUS_COLOR, SEARCH_CONFIG, SORT_CONFIG } from './config.js';
|
||||
import { ITEMS_PER_PAGE, STATUS_META, STATUS_FILTERS, STATUS_ORDER, STATUS_COLOR, SORT_CONFIG } from './config.js';
|
||||
import { renderProducts } from './productList.js';
|
||||
|
||||
// 1 & 2. 칩 사이즈 통일 및 미판매 활성화 스타일 강화
|
||||
function getStatusChipClass(status, isActive) {
|
||||
// 1. 태그 칩과 동일한 사이즈 (텍스트 크기 포함)
|
||||
const commonSize = 'min-w-[70px] justify-center px-3 py-1 text-[11px] md:text-xs';
|
||||
const base = STATUS_COLOR[status] ?? '';
|
||||
// ==========================================================================
|
||||
// 1. 데이터 필터링 및 검색 로직 (Logic)
|
||||
// ==========================================================================
|
||||
|
||||
if (isActive) {
|
||||
if (status === '미판매') {
|
||||
// 2. 미판매 활성화 시 특수 컬러 (인디고)
|
||||
return `${commonSize} bg-indigo-600 text-white border-indigo-700 shadow-md ring-1 ring-indigo-300 opacity-100`;
|
||||
}
|
||||
return `${commonSize} ${base} opacity-100 shadow-sm ring-1 ring-offset-1 ring-slate-200 dark:ring-slate-700`;
|
||||
}
|
||||
/**
|
||||
* 검색어 매칭 여부 확인 (AND 조건)
|
||||
* @param {Object} product - 상품 객체
|
||||
* @param {string} keyword - 검색 키워드
|
||||
*/
|
||||
function checkSearchMatch(product, keyword) {
|
||||
if (!keyword) return true;
|
||||
|
||||
return `${commonSize} bg-slate-50 dark:bg-slate-800 text-slate-400 border-slate-200 dark:border-slate-700 opacity-40 grayscale`;
|
||||
const searchTerms = keyword.split(/\s+/).filter((t) => t.length > 0);
|
||||
|
||||
const title = product.title || '';
|
||||
const desc = product.description || '';
|
||||
const tags = Array.isArray(product.tags) ? product.tags.join(' ') : '';
|
||||
const fullDesc = Array.isArray(product.fullDescription) ? product.fullDescription.join(' ') : String(product.fullDescription || '');
|
||||
|
||||
const pool = `${title} ${desc} ${tags} ${fullDesc}`.toLowerCase();
|
||||
|
||||
return searchTerms.every((term) => pool.includes(term.toLowerCase()));
|
||||
}
|
||||
|
||||
/**
|
||||
* 현재 조건에 맞는 유효한 태그 목록 추출
|
||||
* @returns {string[]} 정렬된 태그 배열
|
||||
*/
|
||||
function getAvailableTags() {
|
||||
const availableTags = new Set();
|
||||
|
||||
productsData
|
||||
.filter((p) => {
|
||||
const sMatch = state.activeStatuses.has(p.status);
|
||||
const cMatch = state.activeCategories.has('All') || state.activeCategories.has(p.category);
|
||||
const kMatch = checkSearchMatch(p, state.searchKeyword.toLowerCase());
|
||||
return sMatch && cMatch && kMatch;
|
||||
})
|
||||
.forEach((p) => p.tags?.forEach((t) => availableTags.add(t)));
|
||||
|
||||
// 선택된 태그는 결과가 없더라도 목록 유지
|
||||
state.activeTags.forEach((t) => availableTags.add(t));
|
||||
return Array.from(availableTags).sort();
|
||||
}
|
||||
|
||||
/**
|
||||
* 필터 및 정렬 통합 적용 (핵심 실행 함수)
|
||||
*/
|
||||
export function applyFilters() {
|
||||
const keyword = state.searchKeyword.toLowerCase();
|
||||
|
||||
// [1] 데이터 필터링 및 정렬
|
||||
state.visibleProducts = productsData
|
||||
.filter((product) => {
|
||||
const meta = STATUS_META[product.status];
|
||||
if (!meta || !meta.isSystemVisible) return false;
|
||||
|
||||
const statusMatch = state.activeStatuses.has(product.status);
|
||||
const categoryMatch = state.activeCategories.has('All') || state.activeCategories.has(product.category);
|
||||
const searchMatch = checkSearchMatch(product, keyword);
|
||||
const tagMatch = state.activeTags.size === 0 || Array.from(state.activeTags).every((tag) => product.tags && product.tags.includes(tag));
|
||||
|
||||
return statusMatch && categoryMatch && searchMatch && tagMatch;
|
||||
})
|
||||
.sort((a, b) => {
|
||||
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 === '미판매';
|
||||
|
||||
if (SORT_CONFIG.PUSH_SOLD_OUT_TO_END && isASold !== isBSold) return isASold ? 1 : -1;
|
||||
if (SORT_CONFIG.PUSH_NON_SALE_TO_END && isANonSale !== isBNonSale) return isANonSale ? 1 : -1;
|
||||
|
||||
return (STATUS_ORDER[a.status] ?? 999) - (STATUS_ORDER[b.status] ?? 999);
|
||||
});
|
||||
|
||||
// [2] 페이지 위치 안전 조정
|
||||
const totalPages = Math.ceil(state.visibleProducts.length / ITEMS_PER_PAGE);
|
||||
state.currentPage = Math.max(1, Math.min(state.currentPage, totalPages || 1));
|
||||
|
||||
// [3] UI 업데이트 순차적 호출
|
||||
renderTotalCount(state.visibleProducts.length);
|
||||
renderProducts(state.currentPage);
|
||||
renderTagChips();
|
||||
}
|
||||
|
||||
// ==========================================================================
|
||||
// 2. UI 렌더링 함수 (Rendering)
|
||||
// ==========================================================================
|
||||
|
||||
/**
|
||||
* 필터 결과 총 개수 표시
|
||||
* @param {number} count
|
||||
*/
|
||||
function renderTotalCount(count) {
|
||||
const totalCountElement = document.getElementById('total-count');
|
||||
if (totalCountElement) totalCountElement.textContent = count.toLocaleString();
|
||||
}
|
||||
|
||||
/**
|
||||
* 상태(Status) 필터 칩 렌더링
|
||||
*/
|
||||
export function renderStatusChips() {
|
||||
const container = document.getElementById('status-chips');
|
||||
if (!container) return;
|
||||
@@ -29,7 +120,6 @@ export function renderStatusChips() {
|
||||
const isActive = state.activeStatuses.has(key);
|
||||
const chip = document.createElement('button');
|
||||
|
||||
// 칩 공통 스타일 적용
|
||||
chip.className = `status-chip flex items-center rounded-full font-bold transition-all duration-200 border ${getStatusChipClass(key, isActive)}`;
|
||||
chip.textContent = label;
|
||||
|
||||
@@ -43,278 +133,186 @@ export function renderStatusChips() {
|
||||
});
|
||||
}
|
||||
|
||||
function toggleStatusFilter(status) {
|
||||
if (state.activeStatuses.has(status)) {
|
||||
state.activeStatuses.delete(status);
|
||||
} else {
|
||||
state.activeStatuses.add(status);
|
||||
/**
|
||||
* 상태 칩 스타일 클래스 생성 헬퍼
|
||||
*/
|
||||
function getStatusChipClass(status, isActive) {
|
||||
const commonSize = 'min-w-[70px] justify-center px-3 py-1 text-[11px] md:text-xs';
|
||||
const base = STATUS_COLOR[status] ?? '';
|
||||
|
||||
if (isActive) {
|
||||
if (status === '미판매') {
|
||||
return `${commonSize} bg-indigo-600 text-white border-indigo-700 shadow-md ring-1 ring-indigo-300 opacity-100`;
|
||||
}
|
||||
return `${commonSize} ${base} opacity-100 shadow-sm ring-1 ring-offset-1 ring-slate-200 dark:ring-slate-700`;
|
||||
}
|
||||
if (state.activeStatuses.size === 0) {
|
||||
STATUS_FILTERS.filter((f) => f.defaultActive).forEach((f) => state.activeStatuses.add(f.key));
|
||||
}
|
||||
applyFilters();
|
||||
renderStatusChips();
|
||||
return `${commonSize} bg-slate-50 dark:bg-slate-800 text-slate-400 border-slate-200 dark:border-slate-700 opacity-40 grayscale`;
|
||||
}
|
||||
|
||||
export function renderTagChips() {
|
||||
const container = document.getElementById('tag-chips');
|
||||
/**
|
||||
* 카테고리(Category) 필터 칩 렌더링
|
||||
*/
|
||||
export function renderCategoryChips(products = productsData) {
|
||||
const container = document.getElementById('filter-chips');
|
||||
if (!container) return;
|
||||
|
||||
// 1. 모든 상품에서 유니크한 태그 추출
|
||||
const allTags = new Set();
|
||||
productsData.forEach((p) => {
|
||||
if (p.tags) p.tags.forEach((tag) => allTags.add(tag));
|
||||
});
|
||||
const sortedTags = Array.from(allTags).sort();
|
||||
const validCategories = products.filter((p) => STATUS_META[p.status]?.isSystemVisible).map((p) => p.category);
|
||||
|
||||
// 2. 리셋 버튼 HTML (맨 앞에 배치)
|
||||
// 활성화된 태그가 있을 때만 강조되거나, 항상 보이게 설정 가능합니다.
|
||||
const hasActiveTags = state.activeTags.size > 0;
|
||||
const categories = ['All', ...new Set(validCategories)];
|
||||
|
||||
container.innerHTML = categories
|
||||
.map((cat) => {
|
||||
const isActive = state.activeCategories.has(cat);
|
||||
const activeClass = isActive ? 'bg-primary text-white border-primary shadow-sm ring-1 ring-offset-1 ring-slate-200' : 'bg-slate-50 text-slate-400 border-slate-200 opacity-40 hover:opacity-60';
|
||||
|
||||
return `<button class="filter-chip flex items-center justify-center min-w-[65px] px-3 py-1 rounded-full text-[11px] md:text-xs font-bold transition-all duration-200 border ${activeClass}"
|
||||
data-category="${cat}">${cat}</button>`;
|
||||
})
|
||||
.join('');
|
||||
|
||||
container.querySelectorAll('.filter-chip').forEach((chip) => {
|
||||
chip.onclick = () => toggleCategory(chip.dataset.category);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 태그(Tag) 필터 칩 렌더링 및 UI 제어
|
||||
*/
|
||||
export function renderTagChips() {
|
||||
const container = document.getElementById('tag-chips');
|
||||
const tagParent = document.getElementById('tag-container');
|
||||
const toggleBtn = document.getElementById('toggle-tags');
|
||||
const activeCountBadge = document.getElementById('active-tag-count');
|
||||
|
||||
if (!container) return;
|
||||
|
||||
const sortedTags = getAvailableTags();
|
||||
const hasActive = state.activeTags.size > 0;
|
||||
|
||||
// [1] HTML 구조 생성 (리셋 버튼 + 태그 칩)
|
||||
const resetBtnHtml = `
|
||||
<button id="tag-reset-btn" class="flex items-center justify-center px-2 py-1 rounded-full border transition-all duration-200
|
||||
${hasActiveTags ? 'bg-red-50 text-red-500 border-red-200 hover:bg-red-100' : 'bg-slate-50 text-slate-400 border-slate-200 opacity-60'}"
|
||||
title="태그 초기화">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
|
||||
<path d="M3 3v5h5"/>
|
||||
</svg>
|
||||
</button>
|
||||
`;
|
||||
${hasActive ? 'bg-red-50 text-red-500 border-red-200 hover:bg-red-100' : 'bg-slate-50 text-slate-400 border-slate-200 opacity-60'}" title="태그 초기화">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>
|
||||
</button>`;
|
||||
|
||||
// 3. 태그 칩들과 합치기
|
||||
container.innerHTML =
|
||||
resetBtnHtml +
|
||||
sortedTags
|
||||
.map((tag) => {
|
||||
const isActive = state.activeTags.has(tag);
|
||||
return `
|
||||
<button class="tag-chip flex items-center justify-center px-3 py-1 rounded-full text-[11px] md:text-xs font-bold transition-all duration-200 border
|
||||
${isActive ? 'bg-primary text-white border-primary shadow-sm' : 'bg-slate-50 dark:bg-slate-800 text-slate-500 border-slate-200 dark:border-slate-700 hover:border-primary'}"
|
||||
data-tag="${tag}">
|
||||
#${tag}
|
||||
</button>
|
||||
`;
|
||||
return `<button class="tag-chip flex items-center justify-center px-3 py-1 rounded-full text-[11px] md:text-xs font-bold transition-all duration-200 border
|
||||
${isActive ? 'bg-primary text-white border-primary' : 'bg-slate-50 dark:bg-slate-800 text-slate-500 border-slate-200 dark:border-slate-700 hover:border-primary'}"
|
||||
data-tag="${tag}">#${tag}</button>`;
|
||||
})
|
||||
.join('');
|
||||
|
||||
// 4. 리셋 버튼 이벤트 바인딩
|
||||
// [2] 뱃지 상태 업데이트
|
||||
if (activeCountBadge) {
|
||||
activeCountBadge.textContent = state.activeTags.size;
|
||||
activeCountBadge.classList.toggle('hidden', state.activeTags.size === 0);
|
||||
}
|
||||
|
||||
// [3] 더보기 버튼 노출 여부 계산 (브라우저 렌더링 후)
|
||||
requestAnimationFrame(() => {
|
||||
const isOverflow = container.scrollHeight > 36;
|
||||
if (toggleBtn) toggleBtn.classList.toggle('hidden', !isOverflow);
|
||||
if (!isOverflow && tagParent) {
|
||||
tagParent.style.maxHeight = '34px';
|
||||
tagParent.classList.remove('expanded');
|
||||
}
|
||||
});
|
||||
|
||||
// [4] 이벤트 바인딩
|
||||
document.getElementById('tag-reset-btn').onclick = () => {
|
||||
if (state.activeTags.size === 0) return;
|
||||
state.activeTags.clear();
|
||||
renderTagChips(); // UI 갱신
|
||||
applyFilters(); // 필터 적용
|
||||
applyFilters();
|
||||
};
|
||||
|
||||
// 5. 개별 태그 칩 이벤트 바인딩
|
||||
container.querySelectorAll('.tag-chip').forEach((chip) => {
|
||||
chip.onclick = () => {
|
||||
const tag = chip.dataset.tag;
|
||||
if (state.activeTags.has(tag)) state.activeTags.delete(tag);
|
||||
else state.activeTags.add(tag);
|
||||
|
||||
renderTagChips();
|
||||
state.activeTags.has(tag) ? state.activeTags.delete(tag) : state.activeTags.add(tag);
|
||||
applyFilters();
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// [핵심] 필터 적용 함수
|
||||
export function applyFilters() {
|
||||
const keyword = state.searchKeyword.toLowerCase();
|
||||
|
||||
// 1. 데이터 필터링 및 정렬
|
||||
state.visibleProducts = productsData
|
||||
.filter((product) => {
|
||||
const meta = STATUS_META[product.status];
|
||||
|
||||
// [1] 시스템 가시성 체크
|
||||
if (!meta || !meta.isSystemVisible) return false;
|
||||
|
||||
// [2] 상태 필터 체크
|
||||
const statusMatch = state.activeStatuses.has(product.status);
|
||||
|
||||
// [3] 카테고리 필터 체크
|
||||
const categoryMatch = state.activeCategories.has('All') || state.activeCategories.has(product.category);
|
||||
|
||||
// [4] 검색어 매칭 로직
|
||||
const searchMatch =
|
||||
keyword === '' ||
|
||||
(() => {
|
||||
// 검색어를 공백 기준으로 쪼개서 배열로 만듭니다 (예: "jp r19" -> ["jp", "r19"])
|
||||
const searchTerms = keyword.split(/\s+/).filter((term) => term.length > 0);
|
||||
|
||||
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);
|
||||
|
||||
// 모든 텍스트를 하나의 검색용 문자열로 결합
|
||||
const combinedText = searchPool.map((text) => String(text || '').toLowerCase()).join(' ');
|
||||
|
||||
// [핵심] 사용자가 입력한 모든 단어(searchTerms)가 결합된 텍스트에 포함되어 있는지 확인 (AND 조건)
|
||||
return searchTerms.every((term) => combinedText.includes(term));
|
||||
})();
|
||||
|
||||
// [5] 태그 필터 체크
|
||||
const tagMatch = state.activeTags.size === 0 || Array.from(state.activeTags).every((tag) => product.tags && product.tags.includes(tag));
|
||||
|
||||
return statusMatch && categoryMatch && searchMatch && tagMatch;
|
||||
})
|
||||
.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. 페이지 위치 안전 조정 로직
|
||||
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) {
|
||||
state.currentPage = 1;
|
||||
}
|
||||
|
||||
// 3. UI 업데이트
|
||||
// renderTotalCount 함수가 정의되어 있다면 실행
|
||||
if (typeof renderTotalCount === 'function') {
|
||||
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))];
|
||||
}
|
||||
|
||||
export function renderCategoryChips(products) {
|
||||
const container = document.getElementById('filter-chips'); // 혹은 HTML 구조에 맞춰 'category-chips'
|
||||
if (!container) return;
|
||||
|
||||
// 1. 가시성 있는 상품의 카테고리만 추출
|
||||
const validCategories = products
|
||||
.filter((p) => {
|
||||
const meta = STATUS_META[p.status];
|
||||
return meta && meta.isSystemVisible;
|
||||
})
|
||||
.map((p) => p.category);
|
||||
|
||||
const categories = ['All', ...new Set(validCategories)];
|
||||
|
||||
container.innerHTML = '';
|
||||
|
||||
categories.forEach((cat) => {
|
||||
const isActive = state.activeCategories.has(cat);
|
||||
const chip = document.createElement('button');
|
||||
|
||||
// [수정] 태그 칩 사이즈(px-3 py-1) 및 폰트 크기(text-[11px]) 통일
|
||||
// min-w-[65px]를 주면 'All' 같은 짧은 글자도 정갈하게 보입니다.
|
||||
chip.className = `filter-chip flex items-center justify-center min-w-[65px] px-3 py-1 rounded-full text-[11px] md:text-xs font-bold transition-all duration-200 border
|
||||
${isActive ? 'bg-primary text-white border-primary shadow-sm ring-1 ring-offset-1 ring-slate-200 dark:ring-slate-700 opacity-100' : 'bg-slate-50 dark:bg-slate-800 text-slate-400 border-slate-200 dark:border-slate-700 opacity-40 grayscale hover:opacity-60'}`;
|
||||
|
||||
chip.textContent = cat;
|
||||
chip.dataset.category = cat;
|
||||
|
||||
chip.onclick = () => {
|
||||
toggleCategory(cat);
|
||||
};
|
||||
|
||||
container.appendChild(chip);
|
||||
});
|
||||
}
|
||||
// ==========================================================================
|
||||
// 3. 사용자 인터랙션 제어 (Interaction)
|
||||
// ==========================================================================
|
||||
|
||||
/**
|
||||
* 카테고리 선택 토글
|
||||
* @param {string} category
|
||||
*/
|
||||
export function toggleCategory(category) {
|
||||
if (category === 'All') {
|
||||
state.activeCategories.clear();
|
||||
state.activeCategories.add('All');
|
||||
} else {
|
||||
state.activeCategories.delete('All');
|
||||
if (state.activeCategories.has(category)) {
|
||||
state.activeCategories.delete(category);
|
||||
} else {
|
||||
state.activeCategories.add(category);
|
||||
}
|
||||
if (state.activeCategories.size === 0) {
|
||||
state.activeCategories.add('All');
|
||||
}
|
||||
state.activeCategories.has(category) ? state.activeCategories.delete(category) : state.activeCategories.add(category);
|
||||
if (state.activeCategories.size === 0) state.activeCategories.add('All');
|
||||
}
|
||||
renderCategoryChips(productsData); // 디자인(활성화 상태) 즉시 반영
|
||||
renderCategoryChips(productsData);
|
||||
applyFilters();
|
||||
}
|
||||
|
||||
export function bindCategoryFilter(products) {
|
||||
const chips = document.querySelectorAll('.filter-chip');
|
||||
chips.forEach((chip) => {
|
||||
chip.addEventListener('click', () => {
|
||||
const category = chip.dataset.category;
|
||||
if (category === 'All') {
|
||||
state.activeCategories.clear();
|
||||
state.activeCategories.add('All');
|
||||
} else {
|
||||
state.activeCategories.delete('All');
|
||||
if (state.activeCategories.has(category)) state.activeCategories.delete(category);
|
||||
else state.activeCategories.add(category);
|
||||
if (state.activeCategories.size === 0) state.activeCategories.add('All');
|
||||
}
|
||||
applyFilters();
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 로고 클릭 시 초기화 로직
|
||||
/**
|
||||
* 로고(타이틀) 클릭 시 모든 필터 초기화
|
||||
*/
|
||||
document.getElementById('logo-title')?.addEventListener('click', () => {
|
||||
// 1. 검색어 초기화
|
||||
state.searchKeyword = '';
|
||||
const searchInput = document.getElementById('search-input'); // 검색창 ID가 있다면
|
||||
const searchInput = document.getElementById('search-input');
|
||||
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 갱신
|
||||
state.activeTags.clear();
|
||||
|
||||
applyFilters();
|
||||
renderStatusChips();
|
||||
renderCategoryChips(productsData);
|
||||
|
||||
// 5. 페이지 최상단으로 스크롤 (선택 사항)
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
});
|
||||
|
||||
/**
|
||||
* 태그 컨테이너 확장/축소 토글 설정 (최초 1회 실행)
|
||||
*/
|
||||
export function setupTagToggle() {
|
||||
const toggleBtn = document.getElementById('toggle-tags');
|
||||
const tagContainer = document.getElementById('tag-container');
|
||||
const tagChips = document.getElementById('tag-chips');
|
||||
|
||||
if (!toggleBtn || !tagContainer || !tagChips) return;
|
||||
|
||||
toggleBtn.onclick = () => {
|
||||
const isExpanded = tagContainer.classList.contains('expanded');
|
||||
const svgIcon = toggleBtn.querySelector('svg');
|
||||
|
||||
if (isExpanded) {
|
||||
tagContainer.style.maxHeight = tagContainer.scrollHeight + 'px';
|
||||
requestAnimationFrame(() => {
|
||||
tagContainer.style.maxHeight = '2rem';
|
||||
tagContainer.classList.remove('expanded');
|
||||
if (svgIcon) svgIcon.style.transform = 'rotate(0deg)';
|
||||
});
|
||||
} else {
|
||||
tagContainer.style.maxHeight = tagChips.scrollHeight + 'px';
|
||||
tagContainer.classList.add('expanded');
|
||||
if (svgIcon) svgIcon.style.transform = 'rotate(180deg)';
|
||||
|
||||
setTimeout(() => {
|
||||
if (tagContainer.classList.contains('expanded')) {
|
||||
tagContainer.style.maxHeight = 'none';
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user