From 541135977c4887465d40c03ed3760e29960f2a2b Mon Sep 17 00:00:00 2001
From: htlee <htlee@gcsc.co.kr>
Date: Tue, 17 Feb 2026 07:06:05 +0900
Subject: [PATCH] =?UTF-8?q?refactor(topbar):=20POLL=20=EC=A0=9C=EA=B1=B0?=
 =?UTF-8?q?=20+=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=ED=86=B5=EA=B3=84=20?=
 =?UTF-8?q?=EB=B0=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- POLL/DATA/API/READY 상태 표시 제거
- 데스크톱: 통계 칩 항상 인라인 표시
- 모바일: 통계 펼치기 버튼 + 하단 확장 바
- 시스템명/시계/테마/로그아웃 항상 표시
- pollingStatus/lastFetchMinutes props 제거

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../web/src/pages/dashboard/DashboardPage.tsx |   2 -
 apps/web/src/widgets/topbar/Topbar.tsx        | 189 ++++++++++--------
 2 files changed, 111 insertions(+), 80 deletions(-)

diff --git a/apps/web/src/pages/dashboard/DashboardPage.tsx b/apps/web/src/pages/dashboard/DashboardPage.tsx
index 0a5dbb7..972e56d 100644
--- a/apps/web/src/pages/dashboard/DashboardPage.tsx
+++ b/apps/web/src/pages/dashboard/DashboardPage.tsx
@@ -255,8 +255,6 @@ export function DashboardPage() {
         transit={transitCount}
         pairLinks={pairLinksAll.length}
         alarms={alarms.length}
-        pollingStatus={snapshot.status}
-        lastFetchMinutes={snapshot.lastFetchMinutes}
         clock={clock}
         adminMode={adminMode}
         onLogoClick={onLogoClick}
diff --git a/apps/web/src/widgets/topbar/Topbar.tsx b/apps/web/src/widgets/topbar/Topbar.tsx
index d281f0f..98be137 100644
--- a/apps/web/src/widgets/topbar/Topbar.tsx
+++ b/apps/web/src/widgets/topbar/Topbar.tsx
@@ -1,11 +1,11 @@
-type Props = {
+import { useState } from "react";
+
+interface Props {
   total: number;
   fishing: number;
   transit: number;
   pairLinks: number;
   alarms: number;
-  pollingStatus: "idle" | "loading" | "ready" | "error";
-  lastFetchMinutes: number | null;
   clock: string;
   adminMode?: boolean;
   onLogoClick?: () => void;
@@ -15,90 +15,123 @@ type Props = {
   onToggleTheme?: () => void;
   isSidebarOpen?: boolean;
   onMenuToggle?: () => void;
-};
+}
 
-export function Topbar({ total, fishing, transit, pairLinks, alarms, pollingStatus, lastFetchMinutes, clock, adminMode, onLogoClick, userName, onLogout, theme, onToggleTheme, isSidebarOpen, onMenuToggle }: Props) {
-  const statusColor =
-    pollingStatus === "ready" ? "#22C55E" : pollingStatus === "loading" ? "#F59E0B" : pollingStatus === "error" ? "#EF4444" : "var(--muted)";
+function StatChips({ total, fishing, transit, pairLinks, alarms }: Pick<Props, "total" | "fishing" | "transit" | "pairLinks" | "alarms">) {
   return (
-    <div className="col-span-full flex items-center gap-2.5 border-b border-wing-border bg-wing-surface px-3.5 z-[1000]">
-      {onMenuToggle && (
-        <button
-          className="flex cursor-pointer items-center justify-center rounded border border-wing-border bg-transparent p-1 text-wing-muted transition-colors hover:border-wing-accent hover:text-wing-text md:hidden"
-          onClick={onMenuToggle}
-          aria-label={isSidebarOpen ? "메뉴 닫기" : "메뉴 열기"}
-        >
-          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
-            {isSidebarOpen ? (
-              <>
-                <line x1="18" y1="6" x2="6" y2="18" />
-                <line x1="6" y1="6" x2="18" y2="18" />
-              </>
-            ) : (
-              <>
-                <line x1="3" y1="6" x2="21" y2="6" />
-                <line x1="3" y1="12" x2="21" y2="12" />
-                <line x1="3" y1="18" x2="21" y2="18" />
-              </>
-            )}
-          </svg>
-        </button>
-      )}
-      <div
-        className="flex items-center gap-1.5 whitespace-nowrap text-sm font-extrabold"
-        onClick={onLogoClick}
-        style={{ cursor: onLogoClick ? "pointer" : undefined }}
-        title={adminMode ? "ADMIN" : undefined}
-      >
-        <span className="text-wing-accent">WING</span>
-        <span className="hidden sm:inline">조업감시·선단연관</span>
-        {adminMode ? <span className="text-[10px] text-wing-warning">(ADMIN)</span> : null}
+    <>
+      <div className="flex items-center gap-1 text-[10px] text-wing-muted">
+        <b className="text-xs text-wing-text">{total}</b>척
       </div>
-      <div className="ml-auto flex flex-wrap justify-end gap-3.5">
-        <div className="hidden items-center gap-1 text-[10px] text-wing-muted sm:flex">
-          POLL{" "}
-          <b style={{ color: statusColor }}>
-            {pollingStatus.toUpperCase()}
-            {lastFetchMinutes ? `(${lastFetchMinutes}m)` : ""}
-          </b>
-        </div>
-        <div className="flex items-center gap-1 text-[10px] text-wing-muted">
-          <b className="text-xs text-wing-text">{total}</b>척
-        </div>
-        <div className="hidden items-center gap-1 text-[10px] text-wing-muted lg:flex">
-          조업 <b style={{ color: "#22C55E" }}>{fishing}</b>
-        </div>
-        <div className="hidden items-center gap-1 text-[10px] text-wing-muted lg:flex">
-          항해 <b style={{ color: "#3B82F6" }}>{transit}</b>
-        </div>
-        <div className="hidden items-center gap-1 text-[10px] text-wing-muted md:flex">
-          쌍연결 <b style={{ color: "#F59E0B" }}>{pairLinks}</b>
-        </div>
-        <div className="flex items-center gap-1 text-[10px] text-wing-muted">
-          경고 <b style={{ color: "#EF4444" }}>{alarms}</b>
-        </div>
+      <div className="flex items-center gap-1 text-[10px] text-wing-muted">
+        조업 <b style={{ color: "#22C55E" }}>{fishing}</b>
       </div>
-      <div className="ml-2.5 whitespace-nowrap text-[10px] font-semibold text-wing-accent">{clock}</div>
-      {onToggleTheme && (
-        <button
-          className="ml-1 cursor-pointer rounded border border-wing-border bg-transparent px-1.5 py-0.5 text-[9px] text-wing-muted transition-all duration-150 hover:border-wing-accent hover:text-wing-text"
-          onClick={onToggleTheme}
-          title={theme === "dark" ? "라이트 모드로 전환" : "다크 모드로 전환"}
+      <div className="flex items-center gap-1 text-[10px] text-wing-muted">
+        항해 <b style={{ color: "#3B82F6" }}>{transit}</b>
+      </div>
+      <div className="flex items-center gap-1 text-[10px] text-wing-muted">
+        쌍연결 <b style={{ color: "#F59E0B" }}>{pairLinks}</b>
+      </div>
+      <div className="flex items-center gap-1 text-[10px] text-wing-muted">
+        경고 <b style={{ color: "#EF4444" }}>{alarms}</b>
+      </div>
+    </>
+  );
+}
+
+export function Topbar({ total, fishing, transit, pairLinks, alarms, clock, adminMode, onLogoClick, userName, onLogout, theme, onToggleTheme, isSidebarOpen, onMenuToggle }: Props) {
+  const [isStatsOpen, setIsStatsOpen] = useState(false);
+
+  return (
+    <div className="col-span-full relative z-[1000]">
+      <div className="flex h-[44px] items-center gap-2.5 border-b border-wing-border bg-wing-surface px-3.5">
+        {/* 햄버거 메뉴 (모바일) */}
+        {onMenuToggle && (
+          <button
+            className="flex cursor-pointer items-center justify-center rounded border border-wing-border bg-transparent p-1 text-wing-muted transition-colors hover:border-wing-accent hover:text-wing-text md:hidden"
+            onClick={onMenuToggle}
+            aria-label={isSidebarOpen ? "메뉴 닫기" : "메뉴 열기"}
+          >
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+              {isSidebarOpen ? (
+                <>
+                  <line x1="18" y1="6" x2="6" y2="18" />
+                  <line x1="6" y1="6" x2="18" y2="18" />
+                </>
+              ) : (
+                <>
+                  <line x1="3" y1="6" x2="21" y2="6" />
+                  <line x1="3" y1="12" x2="21" y2="12" />
+                  <line x1="3" y1="18" x2="21" y2="18" />
+                </>
+              )}
+            </svg>
+          </button>
+        )}
+
+        {/* 로고 */}
+        <div
+          className="flex items-center gap-1.5 whitespace-nowrap text-sm font-extrabold"
+          onClick={onLogoClick}
+          style={{ cursor: onLogoClick ? "pointer" : undefined }}
+          title={adminMode ? "ADMIN" : undefined}
         >
-          {theme === "dark" ? "Light" : "Dark"}
-        </button>
-      )}
-      {userName && (
-        <div className="ml-2.5 hidden shrink-0 items-center gap-2 sm:flex">
-          <span className="whitespace-nowrap text-[10px] font-medium text-wing-text">{userName}</span>
-          {onLogout && (
+          <span className="text-wing-accent">WING</span>
+          <span className="hidden sm:inline">조업감시·선단연관</span>
+          {adminMode ? <span className="text-[10px] text-wing-warning">(ADMIN)</span> : null}
+        </div>
+
+        {/* 통계 영역 */}
+        <div className="ml-auto flex items-center gap-3.5">
+          {/* 데스크톱: 인라인 통계 */}
+          <div className="hidden items-center gap-3.5 md:flex">
+            <StatChips total={total} fishing={fishing} transit={transit} pairLinks={pairLinks} alarms={alarms} />
+          </div>
+          {/* 모바일: 통계 펼치기 버튼 */}
+          <button
+            className="flex cursor-pointer items-center justify-center rounded border border-wing-border bg-transparent p-1 text-wing-muted transition-colors hover:border-wing-accent hover:text-wing-text md:hidden"
+            onClick={() => setIsStatsOpen((v) => !v)}
+            aria-label={isStatsOpen ? "통계 닫기" : "통계 열기"}
+          >
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <path d="M3 3v18h18" />
+              <path d="M7 16l4-8 4 4 4-8" />
+            </svg>
+          </button>
+        </div>
+
+        {/* 항상 표시: 시계 + 테마 + 사용자 */}
+        <div className="flex shrink-0 items-center gap-2.5 md:ml-2.5">
+          <span className="whitespace-nowrap text-[10px] font-semibold text-wing-accent">{clock}</span>
+          {onToggleTheme && (
             <button
-              className="cursor-pointer whitespace-nowrap rounded border border-wing-border bg-transparent px-1.5 py-0.5 text-[9px] text-wing-muted transition-all duration-150 hover:border-wing-accent hover:text-wing-text"
-              onClick={onLogout}
+              className="cursor-pointer rounded border border-wing-border bg-transparent px-1.5 py-0.5 text-[9px] text-wing-muted transition-all duration-150 hover:border-wing-accent hover:text-wing-text"
+              onClick={onToggleTheme}
+              title={theme === "dark" ? "라이트 모드로 전환" : "다크 모드로 전환"}
             >
-              로그아웃
+              {theme === "dark" ? "Light" : "Dark"}
             </button>
           )}
+          {userName && (
+            <div className="flex shrink-0 items-center gap-2">
+              <span className="hidden whitespace-nowrap text-[10px] font-medium text-wing-text sm:inline">{userName}</span>
+              {onLogout && (
+                <button
+                  className="cursor-pointer whitespace-nowrap rounded border border-wing-border bg-transparent px-1.5 py-0.5 text-[9px] text-wing-muted transition-all duration-150 hover:border-wing-accent hover:text-wing-text"
+                  onClick={onLogout}
+                >
+                  로그아웃
+                </button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* 모바일 통계 바 (펼침 시) */}
+      {isStatsOpen && (
+        <div className="absolute left-0 right-0 top-full flex items-center justify-center gap-4 border-b border-wing-border bg-wing-surface px-3.5 py-2 shadow-md md:hidden">
+          <StatChips total={total} fishing={fishing} transit={transit} pairLinks={pairLinks} alarms={alarms} />
         </div>
       )}
     </div>