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

style: refine header center capsule from reference CSS

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
EENE Dashboard
2026-06-05 10:19:27 +09:00
parent 0587370c81
commit 7c600b2176
1 changed files with 12 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,16 +38,16 @@ export function DashboardHeader({ quarter, stats, activeStatus, onStatusChange,
</div>
{/* 중앙 상태 캡슐 */}
<div className="absolute left-1/2 top-0 z-10 flex h-10 -translate-x-1/2 items-center gap-2 rounded-b-2xl bg-[linear-gradient(90deg,#093023_20%,#074833_50%,#093023_80%)] px-12">
<div className="absolute left-1/2 top-0 z-10 flex h-10 w-[716px] -translate-x-1/2 items-center justify-center gap-2 rounded-b-2xl bg-[linear-gradient(90deg,#093023_20%,#074833_50%,#093023_80%)] px-12">
<span className="shrink-0 text-[18px] font-semibold leading-normal text-white/75">{quarterLabel}</span>
<span className="text-[18px] font-bold leading-normal text-[#eeeae3]/40">·</span>
<StatPill label="전체" value={stats.total} statusKey="전체" activeStatus={activeStatus} onClick={onStatusChange} accent="text-yellow-200" />
<StatPill label="전체" value={stats.total} statusKey="전체" activeStatus={activeStatus} onClick={onStatusChange} accent="text-[#ffdb3a]" />
<StatDivider />
<StatPill label="진행" value={stats.inProgress} statusKey="IN_PROGRESS" activeStatus={activeStatus} onClick={onStatusChange} accent="text-sky-200" />
<StatPill label="보류" value={stats.review} statusKey="REVIEW" activeStatus={activeStatus} onClick={onStatusChange} accent="text-orange-200" />
<StatPill label="완료" value={stats.done} statusKey="DONE" activeStatus={activeStatus} onClick={onStatusChange} accent="text-emerald-200" />
<StatPill label="진행" value={stats.inProgress} statusKey="IN_PROGRESS" activeStatus={activeStatus} onClick={onStatusChange} accent="text-[#10b981]" />
<StatPill label="보류" value={stats.review} statusKey="REVIEW" activeStatus={activeStatus} onClick={onStatusChange} accent="text-[#ff9f0a]" />
<StatPill label="완료" value={stats.done} statusKey="DONE" activeStatus={activeStatus} onClick={onStatusChange} accent="text-[#b0b0b0]" />
<StatDivider />
<StatPill label="이슈" value={stats.issues} statusKey="ISSUES" activeStatus={activeStatus} onClick={onStatusChange} accent="text-rose-200" />
<StatPill label="이슈" value={stats.issues} statusKey="ISSUES" activeStatus={activeStatus} onClick={onStatusChange} accent="text-[#ff5252]" />
</div>
<div className="relative z-10 ml-auto flex shrink-0 items-center gap-3">
@@ -82,13 +82,15 @@ interface StatPillProps {
function StatPill({ label, value, statusKey, activeStatus, onClick, accent }: StatPillProps) {
const isActive = activeStatus === statusKey;
const isIssue = statusKey === 'ISSUES';
const background = isIssue
? 'bg-[linear-gradient(180deg,#337c5f_0%,#1c4638_100%)]'
: 'bg-[linear-gradient(180deg,rgba(0,0,0,0.54)_0%,rgba(0,0,0,0.25)_20%,rgba(0,0,0,0.09)_80%,rgba(0,0,0,0.54)_100%)]';
return (
<button
onClick={() => onClick(isActive ? '전체' : statusKey)}
className={`flex h-[27px] cursor-pointer select-none items-center gap-1 rounded px-1.5 py-0.5 text-[18px] font-semibold leading-normal transition-all ${
isActive
? 'bg-[linear-gradient(180deg,rgba(0,0,0,0.54)_0%,rgba(0,0,0,0.25)_20%,rgba(0,0,0,0.09)_80%,rgba(0,0,0,0.54)_100%)] text-white'
: 'bg-[linear-gradient(180deg,#337c5f_0%,#1c4638_100%)] text-white/80 hover:brightness-110'
className={`flex h-[27px] cursor-pointer select-none items-center gap-1 rounded px-1.5 py-0.5 text-[18px] font-semibold leading-normal text-white transition-all hover:brightness-110 ${background} ${
isActive ? 'ring-1 ring-white/20' : ''
}`}
>
<span>{label}</span>