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

style: match central stats bar to F12 poly-stat-item specs

Browse Source 
Apply reference gap, colors, pipe separator, dividers, text-shadow, and click-stat padding.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
EENE Dashboard
2026-06-05 23:48:20 +09:00
parent 7a3b2c5dfe
commit 273f50edd3
2 changed files with 41 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -58,13 +58,11 @@ export function DashboardHeader({
</div>
<div className="header-stats-bar side-polygon-stats absolute left-1/2 top-0 z-10 flex h-10 -translate-x-1/2 items-center justify-center rounded-b-2xl border-b border-[#135643] bg-[linear-gradient(90deg,#093023_20%,#074833_50%,#093023_80%)] px-12 [filter:drop-shadow(0_2px_4px_rgba(0,0,0,0.2))]">
<div className="poly-stat-item flex items-center gap-2 text-[18px]">
<span className="header-stat-text shrink-0 whitespace-nowrap font-semibold text-[rgba(255,255,255,0.77)]">
{quarterLabel}
</span>
<span className="header-stat-text text-[#eeeae3]/60">·</span>
<div className="poly-stat-item">
<span className="poly-stat-quarter header-stat-text">{quarterLabel}</span>
<span className="poly-stat-pipe header-stat-text">|</span>
{statItems.map((item, index) => (
<span key={item.statusKey} className="flex items-center gap-2">
<span key={item.statusKey} className="contents">
{index > 0 && <StatDivider />}
<StatClick
label={item.label}
@@ -103,7 +101,7 @@ export function DashboardHeader({
}
function StatDivider() {
return <span className="h-4 w-px shrink-0 bg-[rgba(238,234,227,0.4)]" aria-hidden />;
return <div className="poly-stat-divider" aria-hidden />;
}
interface StatClickProps {
@@ -123,7 +121,7 @@ function StatClick({ label, value, statusKey, activeStatus, accent, issue, onCli
<button
type="button"
onClick={() => onClick(isActive ? '전체' : statusKey)}
className={`poly-click-stat header-stat-text cursor-pointer whitespace-nowrap rounded px-1.5 py-0.5 text-[18px] leading-none ${
className={`poly-click-stat header-stat-text cursor-pointer whitespace-nowrap leading-none ${
isActive ? 'active' : ''
} ${issue && !isActive ? 'issue' : ''}`}
>

39
frontend/src/index.css
View File

@@ -103,16 +103,47 @@ body,
/* 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);
-1px -1px 0 #00000040,
1px -1px 0 #00000040,
-1px 1px 0 #00000040,
1px 1px 0 #00000040;
}
/* F12 — poly-stat-item (중앙 통계 한 줄) */
.poly-stat-item {
display: flex;
align-items: center;
gap: 8px;
font-size: 18px;
white-space: nowrap;
color: #e6eae3;
}
.poly-stat-quarter {
flex-shrink: 0;
font-weight: 600;
color: rgba(255, 255, 255, 0.77);
}
.poly-stat-pipe {
flex-shrink: 0;
color: rgba(238, 234, 227, 0.4);
}
.poly-stat-divider {
flex-shrink: 0;
width: 1px;
height: 16px;
margin: 0 4px;
background-color: rgba(230, 234, 227, 0.4);
}
/* F12 — poly-click-stat */
.poly-click-stat {
color: rgba(255, 255, 255, 0.99);
font-weight: 400;
padding: 2px 6px;
border-radius: 4px;
border: 1px solid transparent;
background: transparent;
transition: all 0.15s ease;