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

style: align header with reference center capsule layout

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

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

@@ -19,42 +19,43 @@ 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-9 shrink-0 items-center overflow-hidden border-b border-emerald-200/20 bg-[linear-gradient(180deg,#158051_0%,#0b5a3d_46%,#052f27_100%)] px-3 text-white shadow-[0_8px_22px_rgba(2,44,34,0.45)]"> <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)]">
<div className="pointer-events-none absolute inset-x-0 top-0 h-[45%] bg-white/14" /> <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 bottom-0 h-px bg-emerald-200/60" /> <div className="pointer-events-none absolute inset-x-0 bottom-0 h-px bg-emerald-200/65" />
<div className="pointer-events-none absolute left-1/2 top-0 h-full w-[44rem] -translate-x-1/2 rounded-b-full bg-black/22 blur-sm" />
<div className="relative z-10 flex min-w-0 flex-1 items-center gap-2"> {/* 좌측 타이틀 */}
<span className="shrink-0 text-[14px] font-black leading-none tracking-[-0.01em] text-white drop-shadow"> <div className="relative z-10 flex min-w-0 shrink-0 items-center gap-2">
<span className="shrink-0 text-[13px] font-black leading-none tracking-[-0.02em] text-white drop-shadow">
총괄기획실 | Poeple Growth Hub 총괄기획실 | Poeple Growth Hub
</span> </span>
<span className="grid h-6 w-6 shrink-0 place-items-center rounded-full border border-emerald-100/20 bg-black/30 text-[12px] shadow-inner"> <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)]">
👥 👥
</span> </span>
<span className="ml-8 shrink-0 text-[13px] font-black leading-none text-emerald-50/95">{quarterLabel}</span> </div>
<span className="mx-1 text-[13px] leading-none text-emerald-200/60">•</span>
<div className="flex min-w-0 items-center gap-1.5"> {/* 중앙 상태 캡슐 */}
<StatPill label="전체" value={stats.total} statusKey="전체" activeStatus={activeStatus} onClick={onStatusChange} accent="text-yellow-200" /> <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)]">
<StatPill label="진행" value={stats.inProgress} statusKey="IN_PROGRESS" activeStatus={activeStatus} onClick={onStatusChange} accent="text-sky-200" /> <span className="shrink-0 text-[13px] font-black leading-none text-emerald-50/95">{quarterLabel}</span>
<StatPill label="보류" value={stats.review} statusKey="REVIEW" activeStatus={activeStatus} onClick={onStatusChange} accent="text-orange-200" /> <span className="text-[13px] leading-none text-emerald-200/65">•</span>
<StatPill label="완료" value={stats.done} statusKey="DONE" activeStatus={activeStatus} onClick={onStatusChange} accent="text-emerald-200" /> <StatPill label="전체" value={stats.total} statusKey="전체" activeStatus={activeStatus} onClick={onStatusChange} accent="text-yellow-200" />
<StatPill label="이슈" value={stats.issues} statusKey="ISSUES" activeStatus={activeStatus} onClick={onStatusChange} accent="text-rose-200" /> <StatPill label="진행" value={stats.inProgress} statusKey="IN_PROGRESS" activeStatus={activeStatus} onClick={onStatusChange} accent="text-sky-200" />
</div> <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.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-2">
<button <button
onClick={onOpenTaskManager} onClick={onOpenTaskManager}
title="업무관리" title="업무관리"
className="grid h-6 w-6 place-items-center rounded-full border border-emerald-100/20 bg-black/30 text-[15px] font-black leading-none text-emerald-50 shadow-inner transition hover:bg-white/15" 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"
> >
+ +
</button> </button>
<button <button
onClick={onOpenDetailWindow} onClick={onOpenDetailWindow}
title="우측 모니터에 상세 창 열기" title="우측 모니터에 상세 창 열기"
className="grid h-6 w-6 place-items-center rounded-full border border-emerald-100/20 bg-black/30 text-[13px] leading-none text-emerald-50 shadow-inner transition hover:bg-white/15" 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"
> >
🖥 🖥
</button> </button>
@@ -78,7 +79,7 @@ function StatPill({ label, value, statusKey, activeStatus, onClick, accent }: St
return ( return (
<button <button
onClick={() => onClick(isActive ? '전체' : statusKey)} onClick={() => onClick(isActive ? '전체' : statusKey)}
className={`flex h-6 cursor-pointer select-none items-center gap-1 rounded-[0.4rem] border px-2 text-[12px] font-black leading-none shadow-inner transition-all ${ 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 ${
isActive isActive
? 'border-emerald-100/35 bg-white/18 text-white' ? 'border-emerald-100/35 bg-white/18 text-white'
: 'border-emerald-100/10 bg-black/20 text-white/75 hover:border-emerald-100/25 hover:bg-white/10' : 'border-emerald-100/10 bg-black/20 text-white/75 hover:border-emerald-100/25 hover:bg-white/10'