From e6f117efbf67377a8c733289a60f40ea4ce0c01f Mon Sep 17 00:00:00 2001
From: EENE Dashboard <roowj0325@gmail.com>
Date: Fri, 5 Jun 2026 23:55:48 +0900
Subject: [PATCH] style: match poly-click-stat active state from reference hub

Apply default, hover, and selected styles for stat filter chips including white text when active.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../components/dashboard/DashboardHeader.tsx  | 12 +++++-------
 frontend/src/index.css                        | 19 +++++++++++--------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/dashboard/DashboardHeader.tsx b/frontend/src/components/dashboard/DashboardHeader.tsx
index b60fc99..b4ebddd 100644
--- a/frontend/src/components/dashboard/DashboardHeader.tsx
+++ b/frontend/src/components/dashboard/DashboardHeader.tsx
@@ -41,7 +41,7 @@ export function DashboardHeader({
     { label: '진행', value: stats.inProgress, statusKey: 'IN_PROGRESS' as const },
     { label: '보류', value: stats.review, statusKey: 'REVIEW' as const },
     { label: '완료', value: stats.done, statusKey: 'DONE' as const },
-    { label: '이슈', value: stats.issues, statusKey: 'ISSUES' as const, issue: true },
+    { label: '이슈', value: stats.issues, statusKey: 'ISSUES' as const },
   ];
 
   return (
@@ -70,7 +70,6 @@ export function DashboardHeader({
                 statusKey={item.statusKey}
                 activeStatus={activeStatus}
                 accent={STAT_ACCENT[item.statusKey]}
-                issue={item.issue}
                 onClick={onStatusChange}
               />
             </span>
@@ -110,11 +109,10 @@ interface StatClickProps {
   statusKey: keyof typeof STAT_ACCENT;
   activeStatus: string;
   accent: string;
-  issue?: boolean;
   onClick: (key: string) => void;
 }
 
-function StatClick({ label, value, statusKey, activeStatus, accent, issue, onClick }: StatClickProps) {
+function StatClick({ label, value, statusKey, activeStatus, accent, onClick }: StatClickProps) {
   const isActive = activeStatus === statusKey;
 
   return (
@@ -123,11 +121,11 @@ function StatClick({ label, value, statusKey, activeStatus, accent, issue, onCli
       onClick={() => onClick(isActive ? '전체' : statusKey)}
       className={`poly-click-stat header-stat-text cursor-pointer whitespace-nowrap leading-none ${
         isActive ? 'active' : ''
-      } ${issue && !isActive ? 'issue' : ''}`}
+      }`}
     >
       {label}{' '}
-      <span className={`font-extrabold ${accent}`}>{value}</span>
-      <span className="text-[14px] font-medium opacity-50">건</span>
+      <span className={`poly-stat-val font-extrabold ${isActive ? '' : accent}`}>{value}</span>
+      <span className="poly-stat-unit text-[14px] font-medium opacity-50">건</span>
     </button>
   );
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 142a929..1659e25 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -138,14 +138,17 @@ body,
   background-color: rgba(230, 234, 227, 0.4);
 }
 
-/* F12 — poly-click-stat */
+/* F12 — poly-click-stat (기본 / hover / active) */
 .poly-click-stat {
-  color: rgba(255, 255, 255, 0.99);
+  color: #fffc;
+  user-select: none;
+  font-size: 18px;
   font-weight: 400;
   padding: 2px 6px;
   border-radius: 4px;
-  border: 1px solid transparent;
-  background: transparent;
+  border: 1px solid #1d6947;
+  background: linear-gradient(180deg, #337c5f 0%, #1c4638 100%);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
   transition: all 0.15s ease;
 }
 
@@ -170,8 +173,8 @@ body,
   box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
 }
 
-.poly-click-stat.issue {
-  background: linear-gradient(180deg, #337c5f 0%, #1c4638 100%);
-  border: 1px solid #1d6947;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
+.poly-click-stat.active .poly-stat-val,
+.poly-click-stat.active .poly-stat-unit {
+  color: #fff;
+  opacity: 1;
 }