칩 컬러 수정

index.html

@@ -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>© 2026 sori.studio</span>
-                            <span class="px-1 text-slate-300">•</span>
-                            <span>Personal Sales Page</span>
                         </div>
-                        <div class="flex items-center gap-6">
+                        <div class="flex items-center gap-2 text-slate-400 dark:text-slate-500 text-sm font-medium">
-                            <a class="text-slate-500 hover:text-primary transition-colors" href="#"><span class="material-symbols-outlined">mail</span></a>
+                            <span>by zenn</span>
-                            <a class="text-slate-500 hover:text-primary transition-colors" href="#"><span class="material-symbols-outlined">share</span></a>
                         </div>
                     </div>
                 </footer>

scripts/app.js

@@ -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
+          status-chip
-        border
+          px-4 py-2
-        ${isActive ? baseColor : 'bg-slate-50 text-slate-600 border-slate-200'}
+          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;
 }
 

style/tailwind.css

@@ -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) {