diff --git a/frontend/index.html b/frontend/index.html index 2c84558..5f56e8b 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -5,6 +5,7 @@ EENE 인재성장팀 대시보드 +
diff --git a/frontend/src/components/dashboard/DashboardHeader.tsx b/frontend/src/components/dashboard/DashboardHeader.tsx index e71efd2..b779135 100644 --- a/frontend/src/components/dashboard/DashboardHeader.tsx +++ b/frontend/src/components/dashboard/DashboardHeader.tsx @@ -15,7 +15,17 @@ interface DashboardHeaderProps { onOpenTaskManager: () => void; } -export function DashboardHeader({ quarter, stats, activeStatus, onStatusChange, onOpenDetailWindow, onOpenTaskManager }: 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'; + +export function DashboardHeader({ + quarter, + stats, + activeStatus, + onStatusChange, + onOpenDetailWindow, + onOpenTaskManager, +}: DashboardHeaderProps) { const quarterLabel = quarter.replace(/^(\d{4})-Q(\d)$/, '$1 $2분기 업무'); return ( @@ -23,83 +33,85 @@ export function DashboardHeader({ quarter, stats, activeStatus, onStatusChange,
- {/* 좌측 타이틀 */} -
- - 총괄기획실 | Poeple Growth Hub +
+ + 총괄기획실 | People Growth Hub
- {/* 중앙 상태 캡슐 */} -
- {quarterLabel} - · - - - - - - - +
+ + {quarterLabel} + + + + + +
- ); } -interface StatPillProps { +interface StatItemProps { label: string; value: number; statusKey: string; activeStatus: string; onClick: (key: string) => void; accent: string; + dot?: 'orange' | 'red' | 'yellow'; + issue?: boolean; } -function StatPill({ label, value, statusKey, activeStatus, onClick, accent }: StatPillProps) { +function StatItem({ label, value, statusKey, activeStatus, onClick, accent, dot, issue }: StatItemProps) { 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%)]'; + 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 ( ); } - -function StatDivider() { - return
; -} diff --git a/frontend/src/index.css b/frontend/src/index.css index f1d8c73..730d48e 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -1 +1,61 @@ @import "tailwindcss"; + +html, +body, +#root { + font-family: + "Pretendard Variable", + Pretendard, + -apple-system, + BlinkMacSystemFont, + system-ui, + sans-serif; +} + +/* 상단 통계 바 — Design Planning Hub 스타일 곡면 장식 */ +.header-stats-bar::before, +.header-stats-bar::after { + content: ""; + pointer-events: none; + position: absolute; + top: 0; + width: 36px; + height: 30px; + background: transparent; + z-index: 101; +} + +.header-stats-bar::before { + left: -35px; + border-top-left-radius: 20px; + box-shadow: 18px 0 #093023; +} + +.header-stats-bar::after { + right: -35px; + border-top-right-radius: 20px; + box-shadow: -18px 0 #093023; +} + +.poly-stat-dot { + flex-shrink: 0; + width: 10px; + height: 10px; + border-radius: 50%; + display: inline-block; +} + +.poly-stat-dot-orange { + background-color: #ff8b13; + box-shadow: 0 0 8px #ff8b13, inset 0 1px 2px rgba(255, 255, 255, 0.4); +} + +.poly-stat-dot-red { + background-color: red; + box-shadow: 0 0 8px red, inset 0 1px 2px rgba(255, 255, 255, 0.4); +} + +.poly-stat-dot-yellow { + background-color: #ffeb3b; + box-shadow: 0 0 8px #ffeb3b, inset 0 1px 2px rgba(255, 255, 255, 0.4); +}