fix(topbar): 통계 토글 탭을 하단 우측으로 이동

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

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
htlee 2026-02-17 07:11:42 +09:00
부모 541135977c
커밋 d9b8e9ca44
2개의 변경된 파일16개의 추가작업 그리고 21개의 파일을 삭제

파일 보기

@ -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}

파일 보기

@ -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>
);
}