RyuWonJun/eene_dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: match poly-click-stat active state from reference hub

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

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
EENE Dashboard
2026-06-05 23:55:48 +09:00
parent 273f50edd3
commit e6f117efbf
2 changed files with 16 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/src/components/dashboard/DashboardHeader.tsx
View File

@@ -41,7 +41,7 @@ export function DashboardHeader({
{ label: '진행', value: stats.inProgress, statusKey: 'IN_PROGRESS' as const }, { label: '진행', value: stats.inProgress, statusKey: 'IN_PROGRESS' as const },
{ label: '보류', value: stats.review, statusKey: 'REVIEW' as const }, { label: '보류', value: stats.review, statusKey: 'REVIEW' as const },
{ label: '완료', value: stats.done, statusKey: 'DONE' 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 ( return (
@@ -70,7 +70,6 @@ export function DashboardHeader({
statusKey={item.statusKey} statusKey={item.statusKey}
activeStatus={activeStatus} activeStatus={activeStatus}
accent={STAT_ACCENT[item.statusKey]} accent={STAT_ACCENT[item.statusKey]}
issue={item.issue}
onClick={onStatusChange} onClick={onStatusChange}
/> />
</span> </span>
@@ -110,11 +109,10 @@ interface StatClickProps {
statusKey: keyof typeof STAT_ACCENT; statusKey: keyof typeof STAT_ACCENT;
activeStatus: string; activeStatus: string;
accent: string; accent: string;
issue?: boolean;
onClick: (key: string) => void; 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; const isActive = activeStatus === statusKey;
return ( return (
@@ -123,11 +121,11 @@ function StatClick({ label, value, statusKey, activeStatus, accent, issue, onCli
onClick={() => onClick(isActive ? '전체' : statusKey)} onClick={() => onClick(isActive ? '전체' : statusKey)}
className={`poly-click-stat header-stat-text cursor-pointer whitespace-nowrap leading-none ${ className={`poly-click-stat header-stat-text cursor-pointer whitespace-nowrap leading-none ${
isActive ? 'active' : '' isActive ? 'active' : ''
} ${issue && !isActive ? 'issue' : ''}`} }`}
> >
{label}{' '} {label}{' '}
<span className={`font-extrabold ${accent}`}>{value}</span> <span className={`poly-stat-val font-extrabold ${isActive ? '' : accent}`}>{value}</span>
<span className="text-[14px] font-medium opacity-50">건</span> <span className="poly-stat-unit text-[14px] font-medium opacity-50">건</span>
</button> </button>
); );
} }

19
frontend/src/index.css
View File

@@ -138,14 +138,17 @@ body,
background-color: rgba(230, 234, 227, 0.4); background-color: rgba(230, 234, 227, 0.4);
} }
/* F12 — poly-click-stat */ /* F12 — poly-click-stat (기본 / hover / active) */
.poly-click-stat { .poly-click-stat {
color: rgba(255, 255, 255, 0.99); color: #fffc;
user-select: none;
font-size: 18px;
font-weight: 400; font-weight: 400;
padding: 2px 6px; padding: 2px 6px;
border-radius: 4px; border-radius: 4px;
border: 1px solid transparent; border: 1px solid #1d6947;
background: transparent; background: linear-gradient(180deg, #337c5f 0%, #1c4638 100%);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
transition: all 0.15s ease; transition: all 0.15s ease;
} }
@@ -170,8 +173,8 @@ body,
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
} }
.poly-click-stat.issue { .poly-click-stat.active .poly-stat-val,
background: linear-gradient(180deg, #337c5f 0%, #1c4638 100%); .poly-click-stat.active .poly-stat-unit {
border: 1px solid #1d6947; color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); opacity: 1;
} }