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-03 19:02:11 +09:00
parent ef0bf6c5d7
commit b0e5fec03e
3 changed files with 64 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
scripts/app.js
View File

@@ -81,6 +81,28 @@ let activeStatuses = new Set(
.map(([status]) => status),
);
function getStatusChipClass(status, isActive) {
const base = STATUS_COLOR[status] ?? '';
if (isActive) {
return `
${base}
opacity-100
shadow-sm
`;
}
// 🔥 비활성
return `
bg-slate-50
text-slate-400
border-slate-200
opacity-30
grayscale
hover:opacity-50
`;
}
function renderStatusChips() {
const container = document.getElementById('status-chips');
if (!container) return;
@@ -89,21 +111,20 @@ function renderStatusChips() {
STATUS_FILTERS.filter((f) => f.visible).forEach(({ key, label }) => {
const isActive = activeStatuses.has(key);
const baseColor = STATUS_COLOR[key] ?? '';
const chip = document.createElement('button');
chip.className = `
status-chip px-4 py-2 rounded-full text-sm font-medium transition
border
${isActive ? baseColor : 'bg-slate-50 text-slate-600 border-slate-200'}
`;
status-chip
px-4 py-2
rounded-full
text-sm font-medium
transition-all duration-200
border
${getStatusChipClass(key, isActive)}
`;
chip.textContent = label;
chip.onclick = () => {
toggleStatusFilter(key);
};
chip.onclick = () => toggleStatusFilter(key);
container.appendChild(chip);
});
@@ -382,11 +403,23 @@ function renderPagination() {
if (!container) return;
const totalPages = Math.ceil(visibleProducts.length / ITEMS_PER_PAGE);
let html = `<button onclick="changePage(${currentPage - 1})" class="size-10 flex items-center justify-center ${currentPage === 1 ? 'invisible' : ''}"><span class="material-symbols-outlined">chevron_left</span></button>`;
let html = `<button onclick="changePage(${currentPage - 1})" class="size-10 flex items-center justify-center ${currentPage === 1 ? 'invisible' : ''}"><svg viewBox="0 0 24 24" fill="none"
stroke="#64748B" stroke-width="3"
stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5">
<path d="M15 18l-6-6 6-6" />
</svg>
</button>`;
for (let i = 1; i <= totalPages; i++) {
html += `<button onclick="changePage(${i})" class="size-10 font-bold rounded-lg ${i === currentPage ? 'bg-primary text-white' : 'text-slate-500'}">${i}</button>`;
}
html += `<button onclick="changePage(${currentPage + 1})" class="size-10 flex items-center justify-center ${currentPage === totalPages ? 'invisible' : ''}"><span class="material-symbols-outlined">chevron_right</span></button>`;
html += `<button onclick="changePage(${currentPage + 1})" class="size-10 flex items-center justify-center ${currentPage === totalPages ? 'invisible' : ''}"><svg viewBox="0 0 24 24" fill="none"
stroke="#64748B" stroke-width="3"
stroke-linecap="round" stroke-linejoin="round"
class="w-5 h-5">
<path d="M9 18l6-6-6-6" />
</svg>
</button>`;
container.innerHTML = html;
}