From 62e0a367c4313b9ea4511e7e7893be46a4d1d424 Mon Sep 17 00:00:00 2001
From: Lee Ilseob <moon27456@naver.com>
Date: Mon, 26 Oct 2026 20:17:33 +0900
Subject: [PATCH] =?UTF-8?q?fix(stats):=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=ED=86=B5=EA=B3=84=20=ED=83=AD=20=EC=A4=84=EB=B0=94=EA=BF=88?=
 =?UTF-8?q?=EA=B3=BC=20=ED=97=A4=EB=8D=94=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=20=EC=88=98=EC=A0=95=20(#245)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

헤더와 탭의 반응형 스타일을 공통 CSS로 분리해 모든 통계 화면에 적용함. 모바일 탭의 한 줄 표시와 가로 스크롤을 지원하고 물어보기 상단 제목을 NADAB · Stats로
통일함
---
 .../resources/static/css/stats-layout.css     | 50 +++++++++++++++++++
 .../resources/static/css/stats-period.css     | 29 -----------
 .../resources/templates/stats/ask-chat.html   |  6 +--
 src/main/resources/templates/stats/daily.html |  1 +
 .../resources/templates/stats/monthly.html    |  1 +
 .../templates/stats/question-overview.html    |  1 +
 .../resources/templates/stats/question.html   |  1 +
 src/main/resources/templates/stats/total.html |  1 +
 src/main/resources/templates/stats/type.html  |  1 +
 .../resources/templates/stats/weekly.html     |  1 +
 .../resources/templates/stats/withdrawal.html |  1 +
 11 files changed, 60 insertions(+), 33 deletions(-)
 create mode 100644 src/main/resources/static/css/stats-layout.css

diff --git a/src/main/resources/static/css/stats-layout.css b/src/main/resources/static/css/stats-layout.css
new file mode 100644
index 00000000..f3b691f4
--- /dev/null
+++ b/src/main/resources/static/css/stats-layout.css
@@ -0,0 +1,50 @@
+.tabs {
+  max-width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.tabs::-webkit-scrollbar {
+  display: none;
+}
+
+.tab-link {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+.health-bar,
+.btn-refresh {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.refreshed-at span {
+  display: inline-block;
+  white-space: nowrap;
+}
+
+@media (max-width: 820px) {
+  .page-header {
+    align-items: stretch;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .header-right {
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    gap: 8px 12px;
+  }
+}
+
+@media (max-width: 680px) {
+  .tabs {
+    width: 100%;
+  }
+
+  .tab-link {
+    padding: 7px 12px;
+    font-size: .76rem;
+  }
+}
diff --git a/src/main/resources/static/css/stats-period.css b/src/main/resources/static/css/stats-period.css
index 6c1a2715..598e3f9e 100644
--- a/src/main/resources/static/css/stats-period.css
+++ b/src/main/resources/static/css/stats-period.css
@@ -149,35 +149,6 @@
 }
 
 @media (max-width: 680px) {
-  .page-header {
-    align-items: stretch;
-    flex-direction: column;
-    gap: 12px;
-  }
-
-  .header-right {
-    justify-content: flex-start;
-    flex-wrap: wrap;
-    gap: 8px 12px;
-  }
-
-  .tabs {
-    width: 100%;
-    max-width: 100%;
-    overflow-x: auto;
-    scrollbar-width: none;
-  }
-
-  .tabs::-webkit-scrollbar {
-    display: none;
-  }
-
-  .tab-link {
-    flex: 0 0 auto;
-    padding: 7px 12px;
-    font-size: .76rem;
-  }
-
   .period-panel-header {
     align-items: stretch;
     flex-direction: column;
diff --git a/src/main/resources/templates/stats/ask-chat.html b/src/main/resources/templates/stats/ask-chat.html
index 5b4d74a4..86fe7236 100644
--- a/src/main/resources/templates/stats/ask-chat.html
+++ b/src/main/resources/templates/stats/ask-chat.html
@@ -254,8 +254,6 @@
     }
     @media (max-width: 820px) {
       body { padding: 20px 14px 40px; }
-      .page-header { align-items: stretch; flex-direction: column; }
-      .header-right { flex-wrap: wrap; gap: 8px 12px; }
       .period-panel-header { align-items: stretch; flex-direction: column; }
       .chart-grid, .detail-grid { grid-template-columns: 1fr; }
     }
@@ -265,14 +263,14 @@
       .summary-value { font-size: 1.4rem; }
       .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
       .period-title { font-size: 1.05rem; }
-      .tab-link { padding: 7px 12px; font-size: .76rem; }
     }
   </style>
+  <link rel="stylesheet" th:href="@{/css/stats-layout.css}"/>
 </head>
 <body>
 
 <div class="page-header">
-  <div class="page-title">NADAB · Ask Chat Stats</div>
+  <div class="page-title">NADAB · Stats</div>
   <div class="header-right">
     <div id="healthBar" class="health-bar loading">
       <span class="health-dot"></span>
diff --git a/src/main/resources/templates/stats/daily.html b/src/main/resources/templates/stats/daily.html
index b3a0b3a7..68b90039 100644
--- a/src/main/resources/templates/stats/daily.html
+++ b/src/main/resources/templates/stats/daily.html
@@ -245,6 +245,7 @@
   </style>
   <link rel="stylesheet" th:href="@{/css/stats-peak.css}"/>
   <link rel="stylesheet" th:href="@{/css/stats-period.css}"/>
+  <link rel="stylesheet" th:href="@{/css/stats-layout.css}"/>
 </head>
 <body>
 
diff --git a/src/main/resources/templates/stats/monthly.html b/src/main/resources/templates/stats/monthly.html
index 56e46512..a71fe778 100644
--- a/src/main/resources/templates/stats/monthly.html
+++ b/src/main/resources/templates/stats/monthly.html
@@ -236,6 +236,7 @@
   </style>
   <link rel="stylesheet" th:href="@{/css/stats-peak.css}"/>
   <link rel="stylesheet" th:href="@{/css/stats-period.css}"/>
+  <link rel="stylesheet" th:href="@{/css/stats-layout.css}"/>
 </head>
 <body>
 
diff --git a/src/main/resources/templates/stats/question-overview.html b/src/main/resources/templates/stats/question-overview.html
index 0fde0d12..420285ad 100644
--- a/src/main/resources/templates/stats/question-overview.html
+++ b/src/main/resources/templates/stats/question-overview.html
@@ -307,6 +307,7 @@
       .table-scroll { max-height: 65vh; }
     }
   </style>
+  <link rel="stylesheet" th:href="@{/css/stats-layout.css}"/>
 </head>
 <body>
 
diff --git a/src/main/resources/templates/stats/question.html b/src/main/resources/templates/stats/question.html
index cdea195f..1f10f712 100644
--- a/src/main/resources/templates/stats/question.html
+++ b/src/main/resources/templates/stats/question.html
@@ -444,6 +444,7 @@
       .kpi-grid, .revision-metrics { grid-template-columns: 1fr; }
     }
   </style>
+  <link rel="stylesheet" th:href="@{/css/stats-layout.css}"/>
 </head>
 <body>
 
diff --git a/src/main/resources/templates/stats/total.html b/src/main/resources/templates/stats/total.html
index 56ee1954..7c9d523b 100644
--- a/src/main/resources/templates/stats/total.html
+++ b/src/main/resources/templates/stats/total.html
@@ -252,6 +252,7 @@
     .card { animation: fadeUp .4s ease both; }
     .card:nth-child(2) { animation-delay: .08s; }
   </style>
+  <link rel="stylesheet" th:href="@{/css/stats-layout.css}"/>
 </head>
 <body>
 
diff --git a/src/main/resources/templates/stats/type.html b/src/main/resources/templates/stats/type.html
index a7d5d5e8..cf47ea3b 100644
--- a/src/main/resources/templates/stats/type.html
+++ b/src/main/resources/templates/stats/type.html
@@ -215,6 +215,7 @@
     .dot-pink { background: var(--accent-2); }
     .dot-mint { background: #4de8c2; }
   </style>
+  <link rel="stylesheet" th:href="@{/css/stats-layout.css}"/>
 </head>
 <body>
 
diff --git a/src/main/resources/templates/stats/weekly.html b/src/main/resources/templates/stats/weekly.html
index 99516bbd..9c1aaea7 100644
--- a/src/main/resources/templates/stats/weekly.html
+++ b/src/main/resources/templates/stats/weekly.html
@@ -223,6 +223,7 @@
   </style>
   <link rel="stylesheet" th:href="@{/css/stats-peak.css}"/>
   <link rel="stylesheet" th:href="@{/css/stats-period.css}"/>
+  <link rel="stylesheet" th:href="@{/css/stats-layout.css}"/>
 </head>
 <body>
 
diff --git a/src/main/resources/templates/stats/withdrawal.html b/src/main/resources/templates/stats/withdrawal.html
index 9941db50..42c962ad 100644
--- a/src/main/resources/templates/stats/withdrawal.html
+++ b/src/main/resources/templates/stats/withdrawal.html
@@ -197,6 +197,7 @@
       padding: 8px 0;
     }
   </style>
+  <link rel="stylesheet" th:href="@{/css/stats-layout.css}"/>
 </head>
 <body>
 <div class="page-header">