From fb1248db758e434304bc0c85f01d2931e59eebd1 Mon Sep 17 00:00:00 2001 From: EENE Dashboard Date: Fri, 5 Jun 2026 23:30:09 +0900 Subject: [PATCH] style: apply exact F12 DevTools values from Design Planning header Co-authored-by: Cursor --- .../components/dashboard/DashboardHeader.tsx | 107 +++++++++++------- frontend/src/index.css | 56 +++++++++ 2 files changed, 119 insertions(+), 44 deletions(-) diff --git a/frontend/src/components/dashboard/DashboardHeader.tsx b/frontend/src/components/dashboard/DashboardHeader.tsx index b779135..9fd3a83 100644 --- a/frontend/src/components/dashboard/DashboardHeader.tsx +++ b/frontend/src/components/dashboard/DashboardHeader.tsx @@ -16,7 +16,15 @@ interface DashboardHeaderProps { } const ICON_BTN = - 'grid h-8 w-8 shrink-0 place-items-center rounded-full border-[1.5px] border-[#1a4d42] bg-[linear-gradient(180deg,#0d3f34_0%,#051f19_100%)] text-[#cef1eb] shadow-[0_0_0_1px_#000,0_2px_2px_rgba(0,0,0,0.60)] transition hover:brightness-125'; + 'team-status-btn-new grid h-8 w-8 shrink-0 place-items-center rounded-full border-[1.5px] border-[#1a4d42] bg-[linear-gradient(180deg,#0d3f34_0%,#051f19_100%)] text-[#cef1eb] shadow-[0_0_0_1px_#000,0_2px_2px_rgba(0,0,0,0.60)] transition hover:brightness-125'; + +const STAT_ACCENT = { + 전체: 'text-[#ffdb3a]', + IN_PROGRESS: 'text-[#10b981]', + REVIEW: 'text-[#ff9f0a]', + DONE: 'text-[#e2e8f0]', + ISSUES: 'text-[#ff5252]', +} as const; export function DashboardHeader({ quarter, @@ -28,41 +36,57 @@ export function DashboardHeader({ }: DashboardHeaderProps) { const quarterLabel = quarter.replace(/^(\d{4})-Q(\d)$/, '$1 $2분기 업무'); + const statItems = [ + { label: '전체', value: stats.total, statusKey: '전체' as const }, + { 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 }, + ]; + return (
-
- +
+ 총괄기획실 | People Growth Hub -
-
- - {quarterLabel} - - - - - - +
+
+ + {quarterLabel} + + · + {statItems.map((item, index) => ( + + {index > 0 && } + + + ))} +
-
+
@@ -70,7 +94,7 @@ export function DashboardHeader({ type="button" onClick={onOpenDetailWindow} title="우측 모니터에 상세 창 열기" - className={`${ICON_BTN} text-[16px] leading-none`} + className={`header-view-btn-new ${ICON_BTN} text-[16px] leading-none`} > 🖥 @@ -79,39 +103,34 @@ export function DashboardHeader({ ); } -interface StatItemProps { - label: string; - value: number; - statusKey: string; - activeStatus: string; - onClick: (key: string) => void; - accent: string; - dot?: 'orange' | 'red' | 'yellow'; - issue?: boolean; +function StatDivider() { + return ; } -function StatItem({ label, value, statusKey, activeStatus, onClick, accent, dot, issue }: StatItemProps) { +interface StatClickProps { + label: string; + value: number; + 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) { const isActive = activeStatus === statusKey; - const bg = issue - ? 'bg-[linear-gradient(180deg,#337c5f_0%,#1c4638_100%)] border border-[#1d6947]' - : 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%)] border border-black/80' - : 'border border-transparent hover:bg-[#1b543b] hover:border-[#1d6947]'; return ( ); } diff --git a/frontend/src/index.css b/frontend/src/index.css index 730d48e..a6f0bfc 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -59,3 +59,59 @@ body, background-color: #ffeb3b; box-shadow: 0 0 8px #ffeb3b, inset 0 1px 2px rgba(255, 255, 255, 0.4); } + +/* F12 Design Planning Hub — 타이틀 */ +.main_tit { + color: #bad8ca; + font-weight: 700; + text-shadow: + -1px -1px 1px rgba(0, 0, 0, 0.25), + 1px -1px 1px rgba(0, 0, 0, 0.25), + -1px 1px 1px rgba(0, 0, 0, 0.25), + 1px 1px 1px rgba(0, 0, 0, 0.25); +} + +/* F12 — 통계 영역 텍스트 그림자 */ +.header-stat-text { + text-shadow: + -1px -1px 1px rgba(0, 0, 0, 0.25), + 1px -1px 1px rgba(0, 0, 0, 0.25), + -1px 1px 1px rgba(0, 0, 0, 0.25), + 1px 1px 1px rgba(0, 0, 0, 0.25); +} + +/* F12 — poly-click-stat */ +.poly-click-stat { + color: rgba(255, 255, 255, 0.99); + font-weight: 400; + border: 1px solid transparent; + background: transparent; + transition: all 0.15s ease; +} + +.poly-click-stat:hover { + color: #fff; + background: #1b543b; + border-color: #1d6947; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); +} + +.poly-click-stat.active { + color: #fff; + font-weight: 600; + background: 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% + ); + border: 1px solid rgba(0, 0, 0, 0.86); + 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); +}