style: match reference header measured dimensions
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -19,43 +19,49 @@ export function DashboardHeader({ quarter, stats, activeStatus, onStatusChange,
|
|||||||
const quarterLabel = quarter.replace(/^(\d{4})-Q(\d)$/, '$1 $2분기 업무');
|
const quarterLabel = quarter.replace(/^(\d{4})-Q(\d)$/, '$1 $2분기 업무');
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header className="relative flex h-8 shrink-0 items-center overflow-hidden border-b border-emerald-200/20 bg-[linear-gradient(180deg,#148150_0%,#0b6040_42%,#07352b_100%)] px-2.5 text-white shadow-[0_8px_22px_rgba(2,44,34,0.45)]">
|
<header className="relative flex h-12 shrink-0 items-center overflow-hidden bg-[linear-gradient(180deg,#37a184_0%,#29724f_20%,#07412e_100%)] px-5 text-white shadow-[0_2px_10px_rgba(0,0,0,0.20)]">
|
||||||
<div className="pointer-events-none absolute inset-x-0 top-0 h-[48%] bg-white/16" />
|
<div className="pointer-events-none absolute inset-x-0 top-0 h-[45%] bg-white/10" />
|
||||||
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-px bg-emerald-200/65" />
|
<div className="pointer-events-none absolute inset-x-0 bottom-0 h-px bg-emerald-200/50" />
|
||||||
|
|
||||||
{/* 좌측 타이틀 */}
|
{/* 좌측 타이틀 */}
|
||||||
<div className="relative z-10 flex min-w-0 shrink-0 items-center gap-2">
|
<div className="relative z-10 flex h-full min-w-0 shrink-0 items-center gap-4">
|
||||||
<span className="shrink-0 text-[13px] font-black leading-none tracking-[-0.02em] text-white drop-shadow">
|
<span className="shrink-0 text-[20px] font-bold leading-normal text-[#bad8ca]">
|
||||||
총괄기획실 | Poeple Growth Hub
|
총괄기획실 | Poeple Growth Hub
|
||||||
</span>
|
</span>
|
||||||
<span className="grid h-[22px] w-[22px] shrink-0 place-items-center rounded-full border border-emerald-100/20 bg-black/35 text-[11px] shadow-[inset_0_1px_4px_rgba(0,0,0,0.45)]">
|
<button
|
||||||
|
type="button"
|
||||||
|
title="팀 현황"
|
||||||
|
className="grid h-8 w-8 shrink-0 place-items-center rounded-full border border-[#1a4d42] bg-[linear-gradient(180deg,#0d3f34_0%,#051f19_100%)] text-[15px] text-[#cef1eb] shadow-[0_0_0_1px_#000,0_2px_2px_rgba(0,0,0,0.60)]"
|
||||||
|
>
|
||||||
👥
|
👥
|
||||||
</span>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 중앙 상태 캡슐 */}
|
{/* 중앙 상태 캡슐 */}
|
||||||
<div className="absolute left-1/2 top-0 z-10 flex h-8 -translate-x-1/2 items-center gap-2 rounded-b-[1.15rem] border-x border-b border-emerald-100/10 bg-black/24 px-7 shadow-[inset_0_-5px_14px_rgba(0,0,0,0.28)]">
|
<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">
|
||||||
<span className="shrink-0 text-[13px] font-black leading-none text-emerald-50/95">{quarterLabel}</span>
|
<span className="shrink-0 text-[18px] font-semibold leading-normal text-white/75">{quarterLabel}</span>
|
||||||
<span className="text-[13px] leading-none text-emerald-200/65">•</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-yellow-200" />
|
||||||
|
<StatDivider />
|
||||||
<StatPill label="진행" value={stats.inProgress} statusKey="IN_PROGRESS" activeStatus={activeStatus} onClick={onStatusChange} accent="text-sky-200" />
|
<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.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.done} statusKey="DONE" activeStatus={activeStatus} onClick={onStatusChange} accent="text-emerald-200" />
|
||||||
|
<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-rose-200" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="relative z-10 ml-auto flex shrink-0 items-center gap-2">
|
<div className="relative z-10 ml-auto flex shrink-0 items-center gap-3">
|
||||||
<button
|
<button
|
||||||
onClick={onOpenTaskManager}
|
onClick={onOpenTaskManager}
|
||||||
title="업무관리"
|
title="업무관리"
|
||||||
className="grid h-[22px] w-[22px] place-items-center rounded-full border border-emerald-100/20 bg-black/35 text-[14px] font-black leading-none text-emerald-50 shadow-[inset_0_1px_4px_rgba(0,0,0,0.45)] transition hover:bg-white/15"
|
className="grid h-8 w-8 place-items-center rounded-full border border-[#1a4d42] bg-[linear-gradient(180deg,#0d3f34_0%,#051f19_100%)] text-[18px] font-bold leading-none text-[#cef1eb] shadow-[0_0_0_1px_#000,0_2px_2px_rgba(0,0,0,0.60)] transition hover:brightness-125"
|
||||||
>
|
>
|
||||||
+
|
+
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={onOpenDetailWindow}
|
onClick={onOpenDetailWindow}
|
||||||
title="우측 모니터에 상세 창 열기"
|
title="우측 모니터에 상세 창 열기"
|
||||||
className="grid h-[22px] w-[22px] place-items-center rounded-full border border-emerald-100/20 bg-black/35 text-[12px] leading-none text-emerald-50 shadow-[inset_0_1px_4px_rgba(0,0,0,0.45)] transition hover:bg-white/15"
|
className="grid h-8 w-8 place-items-center rounded-full border border-[#1a4d42] bg-[linear-gradient(180deg,#0d3f34_0%,#051f19_100%)] text-[16px] leading-none text-[#cef1eb] shadow-[0_0_0_1px_#000,0_2px_2px_rgba(0,0,0,0.60)] transition hover:brightness-125"
|
||||||
>
|
>
|
||||||
🖥
|
🖥
|
||||||
</button>
|
</button>
|
||||||
@@ -79,14 +85,19 @@ function StatPill({ label, value, statusKey, activeStatus, onClick, accent }: St
|
|||||||
return (
|
return (
|
||||||
<button
|
<button
|
||||||
onClick={() => onClick(isActive ? '전체' : statusKey)}
|
onClick={() => onClick(isActive ? '전체' : statusKey)}
|
||||||
className={`flex h-[21px] cursor-pointer select-none items-center gap-1 rounded-[0.35rem] border px-2 text-[12px] font-black leading-none shadow-[inset_0_1px_3px_rgba(0,0,0,0.3)] transition-all ${
|
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
|
isActive
|
||||||
? 'border-emerald-100/35 bg-white/18 text-white'
|
? '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'
|
||||||
: 'border-emerald-100/10 bg-black/20 text-white/75 hover:border-emerald-100/25 hover:bg-white/10'
|
: 'bg-[linear-gradient(180deg,#337c5f_0%,#1c4638_100%)] text-white/80 hover:brightness-110'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<span>{label}</span>
|
<span>{label}</span>
|
||||||
<span className={`font-black ${accent}`}>{value}</span>
|
<span className={`font-extrabold ${accent}`}>{value}</span>
|
||||||
|
<span className="text-[14px] font-medium text-white">건</span>
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function StatDivider() {
|
||||||
|
return <div className="h-4 w-px bg-[#eeeae3]/40" />;
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user