From 61dc5a0e4dc2060ea241e0b8a00f72088cc17631 Mon Sep 17 00:00:00 2001 From: HeungTak Lee Date: Thu, 5 Feb 2026 06:36:27 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20?= =?UTF-8?q?UI=20=EB=B0=8F=20=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20?= =?UTF-8?q?=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Header, Sidebar, SideNav, ToolBar 컴포넌트 업데이트 - 사이드바 스타일 개선 Co-Authored-By: Claude Opus 4.5 --- src/components/layout/Header.jsx | 18 +++++++++--------- src/components/layout/SideNav.jsx | 4 ++-- src/components/layout/Sidebar.jsx | 24 ++++++++++++++++-------- src/components/layout/ToolBar.jsx | 27 ++++++++++++++++++++++++++- src/scss/SideComponent.scss | 6 ++++-- 5 files changed, 57 insertions(+), 22 deletions(-) diff --git a/src/components/layout/Header.jsx b/src/components/layout/Header.jsx index fb9254e0..2f609dce 100644 --- a/src/components/layout/Header.jsx +++ b/src/components/layout/Header.jsx @@ -21,15 +21,15 @@ export default function Header() { 알람 -
  • - - 설정 - -
    - 신호설정 - 맞춤설정 -
    -
    • + {/*
  • */} + {/* */} + {/* 설정*/} + {/* */} + {/*
    */} + {/* 신호설정*/} + {/* 맞춤설정*/} + {/*
    */} + {/*
    • */}
  • 마이페이지 diff --git a/src/components/layout/SideNav.jsx b/src/components/layout/SideNav.jsx index 32f49d15..e6b9afff 100644 --- a/src/components/layout/SideNav.jsx +++ b/src/components/layout/SideNav.jsx @@ -9,9 +9,9 @@ const gnbList = [ { key: 'gnb3', className: 'gnb3', label: '기상', path: 'weather' }, { key: 'gnb4', className: 'gnb4', label: '분석', path: 'analysis' }, { key: 'gnb5', className: 'gnb5', label: '타임라인', path: 'timeline' }, - { key: 'gnb6', className: 'gnb6', label: 'AI모드', path: 'ai' }, + // { key: 'gnb6', className: 'gnb6', label: 'AI모드', path: 'ai' }, { key: 'gnb7', className: 'gnb7', label: '리플레이', path: 'replay' }, - { key: 'gnb8', className: 'gnb8', label: '항적조회', path: 'tracking' }, + // { key: 'gnb8', className: 'gnb8', label: '항적조회', path: 'tracking' }, ]; const sideList = [ diff --git a/src/components/layout/Sidebar.jsx b/src/components/layout/Sidebar.jsx index e10dfffe..72483f96 100644 --- a/src/components/layout/Sidebar.jsx +++ b/src/components/layout/Sidebar.jsx @@ -9,10 +9,11 @@ import Panel3Component from '../../publish/pages/Panel3Component'; import Panel4Component from '../../publish/pages/Panel4Component'; import Panel5Component from '../../publish/pages/Panel5Component'; import Panel6Component from '../../publish/pages/Panel6Component'; -import Panel7Component from '../../publish/pages/Panel7Component'; import Panel8Component from '../../publish/pages/Panel8Component'; // DisplayComponent는 스토어 연결된 버전 사용 import DisplayComponent from '../../component/wrap/side/DisplayComponent'; +// 구현된 페이지 +import ReplayPage from '../../pages/ReplayPage'; /** * 사이드바 컴포넌트 @@ -22,12 +23,18 @@ import DisplayComponent from '../../component/wrap/side/DisplayComponent'; export default function Sidebar() { const navigate = useNavigate(); const location = useLocation(); - const [isPanelOpen, setIsPanelOpen] = useState(true); + // 초기에 메뉴가 선택되지 않았으면 패널도 닫힌 상태 + const initialActiveKey = (() => { + const path = location.pathname.split('/')[1]; + return path ? pathToKey[path] : null; + })(); + const [isPanelOpen, setIsPanelOpen] = useState(initialActiveKey !== null); - // URL에서 활성 메뉴 키 추출 + // URL에서 활성 메뉴 키 추출 (루트 경로면 비활성) const getActiveKey = () => { - const path = location.pathname.split('/')[1] || 'ship'; - return pathToKey[path] || 'gnb1'; + const path = location.pathname.split('/')[1]; + if (!path) return null; // 루트 경로면 비활성 + return pathToKey[path] || null; }; const activeKey = getActiveKey(); @@ -64,14 +71,15 @@ export default function Sidebar() { case 'gnb6': return ; case 'gnb7': - return ; + return ; case 'gnb8': return ; case 'filter': + return ; case 'layer': - return ; + return ; default: - return ; + return null; // 선택된 메뉴 없으면 패널 없음 } }; diff --git a/src/components/layout/ToolBar.jsx b/src/components/layout/ToolBar.jsx index ff1e74a2..a123891a 100644 --- a/src/components/layout/ToolBar.jsx +++ b/src/components/layout/ToolBar.jsx @@ -2,6 +2,11 @@ import { useState, useCallback } from 'react'; import { useMapStore } from '../../stores/mapStore'; import useShipStore from '../../stores/shipStore'; import { downloadShipCsv } from '../../utils/csvDownload'; +import { showLiveShips } from '../../utils/liveControl'; +import useReplayStore from '../../replay/stores/replayStore'; +import useAnimationStore from '../../replay/stores/animationStore'; +import { unregisterReplayLayers } from '../../replay/utils/replayLayerRegistry'; +import { shipBatchRenderer } from '../../map/ShipBatchRenderer'; // 면적 도형 옵션 const AREA_SHAPES = [ @@ -45,7 +50,27 @@ export default function ToolBar() { {/* 툴바 */}
      -
      • +
    • + +