From ecb897009ae4d5514aed4a4ac084e31b1395f3d0 Mon Sep 17 00:00:00 2001
From: EENE Dashboard <roowj0325@gmail.com>
Date: Sat, 6 Jun 2026 00:09:08 +0900
Subject: [PATCH] fix: match center stats bar dimensions to reference F12

Apply exact 40px bar height, 48px padding, inline-flex chips, and span-based stat controls.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../components/dashboard/DashboardHeader.tsx  | 27 ++++++----
 frontend/src/index.css                        | 52 +++++++++++++++++--
 2 files changed, 64 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/dashboard/DashboardHeader.tsx b/frontend/src/components/dashboard/DashboardHeader.tsx
index b2a0bd5..08924ea 100644
--- a/frontend/src/components/dashboard/DashboardHeader.tsx
+++ b/frontend/src/components/dashboard/DashboardHeader.tsx
@@ -57,7 +57,7 @@ export function DashboardHeader({
         </button>
       </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="header-stats-bar side-polygon-stats">
         <div className="poly-stat-item">
           <span className="poly-stat-quarter header-stat-text">{quarterLabel}</span>
           <span className="poly-stat-bullet header-stat-text">·</span>
@@ -115,17 +115,24 @@ interface StatClickProps {
 function StatClick({ label, value, statusKey, activeStatus, accent, onClick }: StatClickProps) {
   const isActive = activeStatus === statusKey;
 
+  const handleActivate = () => onClick(isActive ? '전체' : statusKey);
+
   return (
-    <button
-      type="button"
-      onClick={() => onClick(isActive ? '전체' : statusKey)}
-      className={`poly-click-stat header-stat-text cursor-pointer whitespace-nowrap leading-none ${
-        isActive ? 'active' : ''
-      }`}
+    <span
+      role="button"
+      tabIndex={0}
+      onClick={handleActivate}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          handleActivate();
+        }
+      }}
+      className={`poly-click-stat header-stat-text whitespace-nowrap ${isActive ? 'active' : ''}`}
     >
       {label}{' '}
-      <span className={`poly-stat-val font-extrabold ${accent}`}>{value}</span>
-      <span className="poly-stat-unit text-[14px] font-medium opacity-50">건</span>
-    </button>
+      <span className={`poly-stat-val ${accent}`}>{value}</span>
+      <span className="poly-stat-unit"> 건</span>
+    </span>
   );
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index fa11734..cc0ec07 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -12,9 +12,33 @@ body,
     sans-serif;
 }
 
+/* F12 — side-polygon-stats (가운데 통계 바) */
+.side-polygon-stats {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  z-index: 100;
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  height: 40px;
+  min-height: 40px;
+  padding: 0 48px;
+  margin: 0;
+  border: none;
+  border-bottom: 1px solid #135643;
+  border-radius: 0 0 16px 16px;
+  background: linear-gradient(90deg, #093023 20%, #074833 50%, #093023 80%);
+  box-shadow: none;
+  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
+  transform: translateX(-50%);
+}
+
 /* 상단 통계 바 — Design Planning Hub 스타일 곡면 장식 */
 .header-stats-bar::before,
-.header-stats-bar::after {
+.header-stats-bar::after,
+.side-polygon-stats::before,
+.side-polygon-stats::after {
   content: "";
   pointer-events: none;
   position: absolute;
@@ -25,13 +49,15 @@ body,
   z-index: 101;
 }
 
-.header-stats-bar::before {
+.header-stats-bar::before,
+.side-polygon-stats::before {
   left: -35px;
   border-top-left-radius: 20px;
   box-shadow: 18px 0 #093023;
 }
 
-.header-stats-bar::after {
+.header-stats-bar::after,
+.side-polygon-stats::after {
   right: -35px;
   border-top-right-radius: 20px;
   box-shadow: -18px 0 #093023;
@@ -115,8 +141,10 @@ body,
   align-items: center;
   gap: 8px;
   font-size: 18px;
+  font-weight: 400;
+  letter-spacing: -0.3px;
   white-space: nowrap;
-  color: #e6eae3;
+  color: #eeeae3;
 }
 
 .poly-stat-quarter {
@@ -135,11 +163,15 @@ body,
   width: 1px;
   height: 16px;
   margin: 0 4px;
-  background-color: rgba(230, 234, 227, 0.4);
+  background-color: rgba(238, 234, 227, 0.4);
 }
 
 /* F12 — poly-click-stat (기본 / hover / active) */
 .poly-click-stat {
+  display: inline-flex;
+  align-items: center;
+  line-height: 1;
+  cursor: pointer;
   color: #fffc;
   user-select: none;
   font-size: 18px;
@@ -152,6 +184,16 @@ body,
   transition: all 0.15s ease;
 }
 
+.poly-stat-val {
+  font-weight: 800;
+}
+
+.poly-stat-unit {
+  font-size: 14px;
+  font-weight: 500;
+  opacity: 0.5;
+}
+
 .poly-click-stat:hover {
   color: #fff;
   background: #1b543b;