feat: 레이아웃 UI 및 사이드바 개선

- Header, Sidebar, SideNav, ToolBar 컴포넌트 업데이트
- 사이드바 스타일 개선

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/layout/Header.jsx

@@ -21,15 +21,15 @@ export default function Header() {
               <span className="blind">알람</span>
             </Link>
           </li>
-          <li className="setWrap">
+          {/*<li className="setWrap">*/}
-            <Link to="/signal" className="set" title="설정">
+          {/*  <Link to="/signal" className="set" title="설정">*/}
-              <span className="blind">설정</span>
+          {/*    <span className="blind">설정</span>*/}
-            </Link>
+          {/*  </Link>*/}
-            <div className="setMenu">
+          {/*  <div className="setMenu">*/}
-              <Link to="/signal">신호설정</Link>
+          {/*    <Link to="/signal">신호설정</Link>*/}
-              <Link to="/signal/custom">맞춤설정</Link>
+          {/*    <Link to="/signal/custom">맞춤설정</Link>*/}
-            </div>
+          {/*  </div>*/}
-          </li>
+          {/*</li>*/}
           <li>
             <Link to="/mypage" className="user" title="마이페이지">
               <span className="blind">마이페이지</span>

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 = [

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';
+    const path = location.pathname.split('/')[1];
-    return pathToKey[path] || 'gnb1';
+    if (!path) return null; // 루트 경로면 비활성
+    return pathToKey[path] || null;
   };
 
   const activeKey = getActiveKey();
@@ -64,14 +71,15 @@ export default function Sidebar() {
       case 'gnb6':
         return <Panel6Component {...panelProps} />;
       case 'gnb7':
-        return <Panel7Component {...panelProps} />;
+        return <ReplayPage {...panelProps} />;
       case 'gnb8':
         return <Panel8Component {...panelProps} />;
       case 'filter':
+        return <DisplayComponent {...panelProps} initialTab="filter" />;
       case 'layer':
-        return <DisplayComponent {...panelProps} />;
+        return <DisplayComponent {...panelProps} initialTab="layer" />;
       default:
-        return <Panel1Component {...panelProps} />;
+        return null; // 선택된 메뉴 없으면 패널 없음
     }
   };
 

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() {
       {/* 툴바 */}
       <div className="toolBar">
         <ul className="toolItem space">
-          <li><button type="button" className="tool01">초기화</button></li>
+          <li>
+            <button
+              type="button"
+              className="tool01"
+              onClick={() => {
+                // 리플레이 상태 초기화
+                useReplayStore.getState().reset();
+                useAnimationStore.getState().reset();
+                unregisterReplayLayers();
+
+                // 라이브 선박 표시
+                showLiveShips();
+
+                // 지도 렌더링 갱신
+                shipBatchRenderer.immediateRender();
+
+                // 추후 모든 세팅 초기화 로직 추가 예정
+              }}
+              title="초기화"
+            >초기화</button>
+          </li>
           <li>
             <button
               type="button"

src/scss/SideComponent.scss

@@ -372,7 +372,8 @@
                 padding: 3rem 2rem;
 
                 &.noLine {
-                    overflow-y: visible;
+                    overflow-x: hidden;
+                    overflow-y: auto;
                     border-top: 0;
                     padding: 0 2rem;
                 }
@@ -389,7 +390,8 @@
 
                     .tabBtmCnt {
                     flex: 1 1 auto;
-                    min-height: 0   ;
+                    min-height: 0;
+                    overflow-x: hidden;
                     overflow-y: auto;
                     padding-bottom: 2rem;
                     }