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

18
index.html
View File

@@ -185,15 +185,6 @@
<!-- Pagination -->
<div class="px-6 md:px-40 py-12">
<div id="pagination" class="flex items-center justify-center gap-2">
<!-- <a class="flex size-10 items-center justify-center rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-500" href="#">
<span class="material-symbols-outlined">chevron_left</span>
</a>
<a class="text-sm font-bold flex size-10 items-center justify-center text-white rounded-lg bg-primary" href="#">1</a>
<a class="text-sm font-medium flex size-10 items-center justify-center text-slate-500 dark:text-slate-400 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800" href="#">2</a>
<a class="text-sm font-medium flex size-10 items-center justify-center text-slate-500 dark:text-slate-400 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800" href="#">3</a>
<a class="flex size-10 items-center justify-center rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 text-slate-500" href="#">
<span class="material-symbols-outlined">chevron_right</span>
</a> -->
</div>
</div>
</main>
@@ -289,13 +280,10 @@
<footer class="px-6 md:px-40 py-12 border-t border-slate-200 dark:border-slate-800">
<div class="flex flex-col md:flex-row justify-between items-center gap-6">
<div class="flex items-center gap-2 text-slate-400 dark:text-slate-500 text-sm font-medium">
<span>© 2024 Studio Archive Catalog</span>
<span class="px-1 text-slate-300">•</span>
<span>Personal Sales Page</span>
<span>© 2026 sori.studio</span>
</div>
<div class="flex items-center gap-6">
<a class="text-slate-500 hover:text-primary transition-colors" href="#"><span class="material-symbols-outlined">mail</span></a>
<a class="text-slate-500 hover:text-primary transition-colors" href="#"><span class="material-symbols-outlined">share</span></a>
<div class="flex items-center gap-2 text-slate-400 dark:text-slate-500 text-sm font-medium">
<span>by zenn</span>
</div>
</div>
</footer>

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;
}

16
style/tailwind.css
View File

@@ -398,6 +398,9 @@
.h-2 {
height: calc(var(--spacing) * 2);
}
.h-5 {
height: calc(var(--spacing) * 5);
}
.h-9 {
height: calc(var(--spacing) * 9);
}
@@ -446,6 +449,9 @@
.w-4 {
width: calc(var(--spacing) * 4);
}
.w-5 {
width: calc(var(--spacing) * 5);
}
.w-6 {
width: calc(var(--spacing) * 6);
}
@@ -1006,6 +1012,9 @@
.underline {
text-decoration-line: underline;
}
.opacity-30 {
opacity: 30%;
}
.opacity-70 {
opacity: 70%;
}
@@ -1165,6 +1174,13 @@
}
}
}
.hover\:opacity-50 {
&:hover {
@media (hover: hover) {
opacity: 50%;
}
}
}
.hover\:opacity-100 {
&:hover {
@media (hover: hover) {