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

[260212]

Browse Source 
- 태그 AND 검색 도입
- UI/UX 디자인 개선 (칩 & 배지)
- 모바일 최적화 및 레이아웃
- 성능 및 리소스 최적화 (Zero-Dependency 아이콘)
- 데이터 안정성 및 기타
- 그 외 오류 복구
- Tailwind CDN 제거
This commit is contained in:
zenn
2026-02-12 17:25:56 +09:00
parent a7817d2113
commit 555321fe70
10 changed files with 990 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
scripts/filters.js
View File

@@ -3,12 +3,21 @@ 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 { 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] ?? '';
if (isActive) {
return `${base} opacity-100 shadow-sm`;
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`;
}
return `bg-slate-50 text-slate-400 border-slate-200 opacity-30 grayscale hover:opacity-50`;
return `${commonSize} bg-slate-50 dark:bg-slate-800 text-slate-400 border-slate-200 dark:border-slate-700 opacity-40 grayscale`;
}
export function renderStatusChips() {
@@ -16,15 +25,20 @@ export function renderStatusChips() {
if (!container) return;
container.innerHTML = '';
// 이제 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)}`;
// 칩 공통 스타일 적용
chip.className = `status-chip flex items-center rounded-full font-bold transition-all duration-200 border ${getStatusChipClass(key, isActive)}`;
chip.textContent = label;
chip.onclick = () => toggleStatusFilter(key);
chip.onclick = () => {
if (state.activeStatuses.has(key)) state.activeStatuses.delete(key);
else state.activeStatuses.add(key);
renderStatusChips();
applyFilters();
};
container.appendChild(chip);
});
}
@@ -42,6 +56,68 @@ function toggleStatusFilter(status) {
renderStatusChips();
}
export function renderTagChips() {
const container = document.getElementById('tag-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();
// 2. 리셋 버튼 HTML (맨 앞에 배치)
// 활성화된 태그가 있을 때만 강조되거나, 항상 보이게 설정 가능합니다.
const hasActiveTags = state.activeTags.size > 0;
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>
`;
// 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>
`;
})
.join('');
// 4. 리셋 버튼 이벤트 바인딩
document.getElementById('tag-reset-btn').onclick = () => {
if (state.activeTags.size === 0) return;
state.activeTags.clear();
renderTagChips(); // UI 갱신
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();
applyFilters();
};
});
}
// [핵심] 필터 적용 함수
export function applyFilters() {
const keyword = state.searchKeyword.toLowerCase();
@@ -64,21 +140,29 @@ export function applyFilters() {
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);
return searchPool.some((text) =>
String(text || '')
.toLowerCase()
.includes(keyword),
);
// 모든 텍스트를 하나의 검색용 문자열로 결합
const combinedText = searchPool.map((text) => String(text || '').toLowerCase()).join(' ');
// [핵심] 사용자가 입력한 모든 단어(searchTerms)가 결합된 텍스트에 포함되어 있는지 확인 (AND 조건)
return searchTerms.every((term) => combinedText.includes(term));
})();
return statusMatch && categoryMatch && searchMatch;
// [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. 스위치가 모두 꺼져있다면 정렬하지 않고 원본 순서 유지
@@ -138,19 +222,17 @@ export function getCategories(products) {
}
export function renderCategoryChips(products) {
const container = document.getElementById('filter-chips');
const container = document.getElementById('filter-chips'); // 혹은 HTML 구조에 맞춰 'category-chips'
if (!container) return;
// [핵심] 시스템 가시성이 true인 상품의 카테고리만 추출합니다.
// 1. 가시성 있는 상품의 카테고리만 추출
const validCategories = products
.filter((p) => {
const meta = STATUS_META[p.status];
// 해당 상태가 정의되어 있고, 시스템에서 보여주기로 한 경우만 포함
return meta && meta.isSystemVisible;
})
.map((p) => p.category);
// 'All'은 항상 포함하고, 필터링된 카테고리들만 중복 제거하여 합침
const categories = ['All', ...new Set(validCategories)];
container.innerHTML = '';
@@ -158,10 +240,19 @@ export function renderCategoryChips(products) {
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'}`;
// [수정] 태그 칩 사이즈(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);
chip.onclick = () => {
toggleCategory(cat);
};
container.appendChild(chip);
});
}
@@ -172,10 +263,16 @@ export function toggleCategory(category) {
state.activeCategories.add('All');
} else {
state.activeCategories.delete('All');
state.activeCategories.has(category) ? state.activeCategories.delete(category) : state.activeCategories.add(category);
if (state.activeCategories.size === 0) state.activeCategories.add('All');
if (state.activeCategories.has(category)) {
state.activeCategories.delete(category);
} else {
state.activeCategories.add(category);
}
if (state.activeCategories.size === 0) {
state.activeCategories.add('All');
}
}
renderCategoryChips(productsData);
renderCategoryChips(productsData); // 디자인(활성화 상태) 즉시 반영
applyFilters();
}