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}
/>
@@ -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}{' '}
- {value}
- 건
+ {value}
+ 건
);
}
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;
}