87 lines
2.7 KiB
React
87 lines
2.7 KiB
React
|
import { useState } from 'react';
|
||
|
|
import { useNavigate, useLocation } from 'react-router-dom';
|
||
|
|
import SideNav, { keyToPath, pathToKey } from './SideNav';
|
||
|
|
|
||
|
|
// 퍼블리시 패널 컴포넌트 재사용
|
||
|
|
import Panel1Component from '../../publish/pages/Panel1Component';
|
||
|
|
import Panel2Component from '../../publish/pages/Panel2Component';
|
||
|
|
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';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 사이드바 컴포넌트
|
||
|
|
* - 네비게이션 메뉴
|
||
|
|
* - 패널 영역 (경로에 따라 다른 패널 표시)
|
||
|
|
*/
|
||
|
|
export default function Sidebar() {
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const location = useLocation();
|
||
|
|
const [isPanelOpen, setIsPanelOpen] = useState(true);
|
||
|
|
|
||
|
|
// URL에서 활성 메뉴 키 추출
|
||
|
|
const getActiveKey = () => {
|
||
|
|
const path = location.pathname.split('/')[1] || 'ship';
|
||
|
|
return pathToKey[path] || 'gnb1';
|
||
|
|
};
|
||
|
|
|
||
|
|
const activeKey = getActiveKey();
|
||
|
|
|
||
|
|
const handleMenuChange = (key) => {
|
||
|
|
setIsPanelOpen(true);
|
||
|
|
const path = keyToPath[key] || 'ship';
|
||
|
|
navigate(`/${path}`);
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleTogglePanel = () => {
|
||
|
|
setIsPanelOpen((prev) => !prev);
|
||
|
|
};
|
||
|
|
|
||
|
|
// 패널 공통 props
|
||
|
|
const panelProps = {
|
||
|
|
isOpen: isPanelOpen,
|
||
|
|
onToggle: handleTogglePanel,
|
||
|
|
};
|
||
|
|
|
||
|
|
// 활성 키에 따른 패널 컴포넌트 렌더링
|
||
|
|
const renderPanel = () => {
|
||
|
|
switch (activeKey) {
|
||
|
|
case 'gnb1':
|
||
|
|
return <Panel1Component {...panelProps} />;
|
||
|
|
case 'gnb2':
|
||
|
|
return <Panel2Component {...panelProps} />;
|
||
|
|
case 'gnb3':
|
||
|
|
return <Panel3Component {...panelProps} />;
|
||
|
|
case 'gnb4':
|
||
|
|
return <Panel4Component {...panelProps} />;
|
||
|
|
case 'gnb5':
|
||
|
|
return <Panel5Component {...panelProps} />;
|
||
|
|
case 'gnb6':
|
||
|
|
return <Panel6Component {...panelProps} />;
|
||
|
|
case 'gnb7':
|
||
|
|
return <Panel7Component {...panelProps} />;
|
||
|
|
case 'gnb8':
|
||
|
|
return <Panel8Component {...panelProps} />;
|
||
|
|
case 'filter':
|
||
|
|
case 'layer':
|
||
|
|
return <DisplayComponent {...panelProps} />;
|
||
|
|
default:
|
||
|
|
return <Panel1Component {...panelProps} />;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section id="sidePanel">
|
||
|
|
<SideNav activeKey={activeKey} onChange={handleMenuChange} />
|
||
|
|
<div className="sidePanelContent">
|
||
|
|
{renderPanel()}
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|