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) { return ( -
- {onMenuToggle && ( - - )} -
- WING - 조업감시·선단연관 - {adminMode ? (ADMIN) : null} + <> +
+ {total}
-
-
- POLL{" "} - - {pollingStatus.toUpperCase()} - {lastFetchMinutes ? `(${lastFetchMinutes}m)` : ""} - -
-
- {total}척 -
-
- 조업 {fishing} -
-
- 항해 {transit} -
-
- 쌍연결 {pairLinks} -
-
- 경고 {alarms} -
+
+ 조업 {fishing}
-
{clock}
- {onToggleTheme && ( -
+
+ 쌍연결 {pairLinks} +
+
+ 경고 {alarms} +
+ + ); +} + +export function Topbar({ total, fishing, transit, pairLinks, alarms, clock, adminMode, onLogoClick, userName, onLogout, theme, onToggleTheme, isSidebarOpen, onMenuToggle }: Props) { + const [isStatsOpen, setIsStatsOpen] = useState(false); + + return ( +
+
+ {/* 햄버거 메뉴 (모바일) */} + {onMenuToggle && ( + + )} + + {/* 로고 */} +
- {theme === "dark" ? "Light" : "Dark"} - - )} - {userName && ( -
- {userName} - {onLogout && ( + WING + 조업감시·선단연관 + {adminMode ? (ADMIN) : null} +
+ + {/* 통계 영역 */} +
+ {/* 데스크톱: 인라인 통계 */} +
+ +
+ {/* 모바일: 통계 펼치기 버튼 */} + +
+ + {/* 항상 표시: 시계 + 테마 + 사용자 */} +
+ {clock} + {onToggleTheme && ( )} + {userName && ( +
+ {userName} + {onLogout && ( + + )} +
+ )} +
+
+ + {/* 모바일 통계 바 (펼침 시) */} + {isStatsOpen && ( +
+
)}