From d9b8e9ca44c6f44054f180404d057e4f330f8ac6 Mon Sep 17 00:00:00 2001
From: htlee <htlee@gcsc.co.kr>
Date: Tue, 17 Feb 2026 07:11:42 +0900
Subject: [PATCH] =?UTF-8?q?fix(topbar):=20=ED=86=B5=EA=B3=84=20=ED=86=A0?=
 =?UTF-8?q?=EA=B8=80=20=ED=83=AD=EC=9D=84=20=ED=95=98=EB=8B=A8=20=EC=9A=B0?=
 =?UTF-8?q?=EC=B8=A1=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 통계 펼치기 버튼을 topbar 내부에서 하단 우측 탭으로 이동
- 통계 바를 absolute→flow 레이아웃으로 변경 (지도 줌 겹침 방지)
- 모바일 grid-rows를 auto로 변경하여 통계 바 높이 수용

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

diff --git a/apps/web/src/pages/dashboard/DashboardPage.tsx b/apps/web/src/pages/dashboard/DashboardPage.tsx
index 972e56d..4a011c0 100644
--- a/apps/web/src/pages/dashboard/DashboardPage.tsx
+++ b/apps/web/src/pages/dashboard/DashboardPage.tsx
@@ -248,7 +248,7 @@ export function DashboardPage() {
 
   // ── Render ──
   return (
-    <div className="grid h-screen grid-cols-[310px_1fr] grid-rows-[44px_1fr] max-md:grid-cols-[1fr]">
+    <div className="grid h-screen grid-cols-[310px_1fr] grid-rows-[44px_1fr] max-md:grid-cols-[1fr] max-md:grid-rows-[auto_1fr]">
       <Topbar
         total={legacyVesselsAll.length}
         fishing={fishingCount}
diff --git a/apps/web/src/widgets/topbar/Topbar.tsx b/apps/web/src/widgets/topbar/Topbar.tsx
index 98be137..5a3a420 100644
--- a/apps/web/src/widgets/topbar/Topbar.tsx
+++ b/apps/web/src/widgets/topbar/Topbar.tsx
@@ -81,27 +81,13 @@ export function Topbar({ total, fishing, transit, pairLinks, alarms, clock, admi
           {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 className="ml-auto hidden items-center gap-3.5 md:flex">
+          <StatChips total={total} fishing={fishing} transit={transit} pairLinks={pairLinks} alarms={alarms} />
         </div>
 
         {/* 항상 표시: 시계 + 테마 + 사용자 */}
-        <div className="flex shrink-0 items-center gap-2.5 md:ml-2.5">
+        <div className="ml-auto 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
@@ -128,12 +114,21 @@ export function Topbar({ total, fishing, transit, pairLinks, alarms, clock, admi
         </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">
+        <div className="flex items-center justify-center gap-4 border-b border-wing-border bg-wing-surface px-3.5 py-2 md:hidden">
           <StatChips total={total} fishing={fishing} transit={transit} pairLinks={pairLinks} alarms={alarms} />
         </div>
       )}
+
+      {/* 모바일 통계 토글 탭 — topbar 하단 우측에 걸침 */}
+      <button
+        className="absolute bottom-0 right-3.5 z-10 translate-y-full cursor-pointer rounded-b-md border border-t-0 border-wing-border bg-wing-surface px-2 py-0.5 text-[8px] text-wing-muted transition-colors hover:text-wing-text md:hidden"
+        onClick={() => setIsStatsOpen((v) => !v)}
+        aria-label={isStatsOpen ? "통계 닫기" : "통계 열기"}
+      >
+        {isStatsOpen ? "▴" : "▾ 통계"}
+      </button>
     </div>
   );
 }