HeungTak Lee
cd3b534dd8
- 하드코딩된 /images/ 경로를 import.meta.env.BASE_URL 기반으로 변경 - 배포 환경(/kcgv/) 서브패스 호환성 확보 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
705 lines
32 KiB
JavaScript
705 lines
32 KiB
JavaScript
import { useState } from 'react';
|
|
import { Link } from "react-router-dom";
|
|
|
|
const BASE_URL = import.meta.env.BASE_URL;
|
|
|
|
export default function Panel1Component({ isOpen, onToggle }) {
|
|
|
|
// 아코디언
|
|
const [isAccordionOpen1, setIsAccordionOpen1] = useState(false); // 기존
|
|
const [isAccordionOpen2, setIsAccordionOpen2] = useState(false); // 새 아코디언
|
|
|
|
const toggleAccordion1 = () => setIsAccordionOpen1(prev => !prev);
|
|
const toggleAccordion2 = () => setIsAccordionOpen2(prev => !prev);
|
|
|
|
// 탭이동
|
|
const [activeTab, setActiveTab] = useState('ship01');
|
|
|
|
const tabs = [
|
|
{ id: 'ship01', label: '선박검색' },
|
|
{ id: 'ship02', label: '허가선박' },
|
|
{ id: 'ship03', label: '제재단속' },
|
|
{ id: 'ship04', label: '침몰선박' },
|
|
{ id: 'ship05', label: '선박입출항' },
|
|
{ id: 'ship06', label: '관심선박' }
|
|
];
|
|
return (
|
|
<aside className={`slidePanel ${!isOpen ? 'is-closed' : ''}`}>
|
|
{/* 탭 버튼 */}
|
|
<div className="tabBox">
|
|
<div className="tabDefault">
|
|
{tabs.map(tab => (
|
|
<button
|
|
key={tab.id}
|
|
type="button"
|
|
className={activeTab === tab.id ? 'on' : ''}
|
|
onClick={() => setActiveTab(tab.id)}
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 탭 콘텐츠 01 */}
|
|
<div className={`tabWrap ${activeTab === 'ship01' ? 'is-active' : ''}`}>
|
|
<div className="tabTop">
|
|
<div className="title">선박 검색</div>
|
|
|
|
<div className="formGroup">
|
|
<ul>
|
|
<li>
|
|
<label>
|
|
<span>선종</span>
|
|
<select>
|
|
<option value="">전체</option>
|
|
<option value="">어선</option>
|
|
<option value="">함정</option>
|
|
<option value="">여객선</option>
|
|
<option value="">카고</option>
|
|
<option value="">탱커</option>
|
|
<option value="">관공선</option>
|
|
<option value="">기타</option>
|
|
<option value="">낚시어선</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
<span>국적</span>
|
|
<select>
|
|
<option value="">전체</option>
|
|
<option value="">한국</option>
|
|
<option value="">미국</option>
|
|
<option value="">중국</option>
|
|
<option value="">일본</option>
|
|
<option value="">북한</option>
|
|
<option value="">기타</option>
|
|
</select>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<span>타겟ID</span>
|
|
<input type="text" placeholder="타겟ID" />
|
|
</label>
|
|
<label>
|
|
<span>선박명</span>
|
|
<input type="text" placeholder="선박명" />
|
|
</label>
|
|
</li>
|
|
{/* 아코디언 1 */}
|
|
<div className={`accordion ${isAccordionOpen1 ? 'is-open' : ''}`}>
|
|
<li>
|
|
<label>
|
|
<span>위험물</span>
|
|
<input type="text" placeholder="타겟ID" />
|
|
</label>
|
|
<label className="checkbox">
|
|
<input type="checkbox" />
|
|
<span className="w70">MMSI / 호출부호 변경이력</span>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<span>승선원수</span>
|
|
<div className="labelRow">
|
|
<div className="numInput">
|
|
<input type="number" placeholder="최소" min="" max="" />
|
|
<div className="spin">
|
|
<button type="button" className="spinUp"><span className="blind">증가</span></button>
|
|
<button type="button" className="spinDown"><span className="blind">감소</span></button>
|
|
</div>
|
|
</div>
|
|
<span>-</span>
|
|
|
|
<div className="numInput">
|
|
<input type="number" placeholder="최대" min="" max="" />
|
|
<div className="spin">
|
|
<button type="button" className="spinUp"><span className="blind">증가</span></button>
|
|
<button type="button" className="spinDown"><span className="blind">감소</span></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<span>너비(m)</span>
|
|
<div className="numInput">
|
|
<input type="number" placeholder="최소" min="" max="" />
|
|
<div className="spin">
|
|
<button type="button" className="spinUp"><span className="blind">증가</span></button>
|
|
<button type="button" className="spinDown"><span className="blind">감소</span></button>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</li>
|
|
</div>
|
|
{/* 여기까지 아코디언1 */}
|
|
<li>
|
|
<button
|
|
type="button"
|
|
className={`btn btnS semi btnToggle ${isAccordionOpen1 ? 'is-open' : ''}`}
|
|
aria-expanded={isAccordionOpen1}
|
|
onClick={toggleAccordion1}
|
|
>
|
|
상세검색
|
|
{isAccordionOpen1 ? ' 닫기' : ' 열기'}
|
|
</button>
|
|
</li>
|
|
<li className="fgBtn">
|
|
<button type="button" className="schBtn">검색</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* <div className="schbox mtb24">
|
|
<ul>
|
|
<li>
|
|
<input type="text" className="schInput" placeholder="대표검도" />
|
|
</li>
|
|
<li>
|
|
<button type="button" className="schBtn">검색</button>
|
|
</li>
|
|
</ul>
|
|
</div> */}
|
|
</div>
|
|
|
|
<div className="tabBtm">
|
|
<ul className="colList line">
|
|
<li>
|
|
<Link to="/" className="active">
|
|
<i className="cicle default"></i>
|
|
<span>0001</span>
|
|
<span>1511함A-05</span>
|
|
<span>
|
|
<img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
|
|
</span>
|
|
<span>(AIS)</span>
|
|
<span className="legend">
|
|
<img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/" className="">
|
|
<i className="cicle default"></i>
|
|
<span>0001</span>
|
|
<span>1511함A-05</span>
|
|
<span>
|
|
<img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
|
|
</span>
|
|
<span>(AIS)</span>
|
|
<span className="legend">
|
|
<img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/" className="">
|
|
<i className="cicle red"></i>
|
|
<span>0001</span>
|
|
<span>1511함A-05</span>
|
|
<span>
|
|
<img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
|
|
</span>
|
|
<span>(AIS)</span>
|
|
<span className="legend">
|
|
<img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/" className="">
|
|
<i className="cicle orng"></i>
|
|
<span>0001</span>
|
|
<span>1511함A-05</span>
|
|
<span>
|
|
<img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
|
|
</span>
|
|
<span>(AIS)</span>
|
|
<span className="legend">
|
|
<img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 탭 콘텐츠 02 */}
|
|
<div className={`tabWrap ${activeTab === 'ship02' ? 'is-active' : ''}`}>
|
|
<div className="tabTop">
|
|
<div className="title">허가선박</div>
|
|
<div className="formGroup">
|
|
<ul>
|
|
<li>
|
|
<label>
|
|
<span>타겟 ID</span>
|
|
<input type="text" placeholder="타겟 ID" />
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<span>선박명</span>
|
|
<input type="text" placeholder="선박명" />
|
|
</label>
|
|
</li>
|
|
<li className="fgBtn">
|
|
<button type="button" className="schBtn">검색</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="tabBtm">
|
|
<div className="detailWrap">
|
|
|
|
<ul className="detailBox">
|
|
<li className="dbHeader">
|
|
<div className="headerL">
|
|
<span className="name">ZHELINGYU29801</span>
|
|
<span className="type">Fishing</span>
|
|
</div>
|
|
<div className="headerR">
|
|
<img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
|
|
<span className="num">412</span>
|
|
<button className="icoArrow"></button>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<span className="label">타겟 ID</span>
|
|
<span className="value">412417712</span>
|
|
</li>
|
|
<li>
|
|
<span className="label">주정박항</span>
|
|
<span className="value">zhelingyu29801</span>
|
|
</li>
|
|
<li>
|
|
<span className="label">어획할당량</span>
|
|
<span className="value">100(ton)</span>
|
|
</li>
|
|
<li>
|
|
<span className="label">조업수역구역</span>
|
|
<span className="value">Ⅱ, Ⅲ</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
{/* 탭 콘텐츠 03 */}
|
|
<div className={`tabWrap ${activeTab === 'ship03' ? 'is-active' : ''}`}>
|
|
<div className="tabTop">
|
|
<div className="title">제재단속</div>
|
|
<div className="formGroup">
|
|
<ul>
|
|
<li>
|
|
<label>
|
|
<span>제재 유형</span>
|
|
<select>
|
|
<option value="">전체</option>
|
|
<option value="">고래포획 의심</option>
|
|
<option value="">UN 제재</option>
|
|
<option value="">위반행위 규제 정보</option>
|
|
<option value="">불법 선박</option>
|
|
<option value="">음주 운항 이력</option>
|
|
<option value="">다잡아 처분 선박</option>
|
|
<option value="">어획량 위반</option>
|
|
<option value="">조업 일지 위반</option>
|
|
<option value="">망목 내경 미준수</option>
|
|
<option value="">입출역 미통보</option>
|
|
<option value="">선박서류 미비치</option>
|
|
<option value="">어구위반</option>
|
|
<option value="">허가 중/표지판 위반</option>
|
|
<option value="">어획물 전재 위반</option>
|
|
<option value="">선원수첩 등 신분증명서 위반</option>
|
|
<option value="">정선 명령 위반</option>
|
|
<option value="">어구 설치 후 조업수역 이탈</option>
|
|
<option value="">어획물 운반선 체크포인트 제도 위반</option>
|
|
<option value="">포획 채취 금지 체장 위반 어획물 포획</option>
|
|
<option value="">조업수역 위반</option>
|
|
<option value="">조업 기간 위반</option>
|
|
<option value="">어창 용적 위반</option>
|
|
<option value="">어창 용적 위반</option>
|
|
<option value="">메모</option>
|
|
</select>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<span>선박명</span>
|
|
<input type="text" placeholder="선박명" />
|
|
</label>
|
|
</li>
|
|
<li className="fgBtn">
|
|
<button type="button" className="schBtn">검색</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="tabBtm">
|
|
<ul className="colList line">
|
|
<li>
|
|
<Link to="/" className="active">
|
|
<i className="cicle default"></i>
|
|
<span>0001</span>
|
|
<span>1511함A-05</span>
|
|
<span>
|
|
<img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
|
|
</span>
|
|
<span>(AIS)</span>
|
|
<span className="legend">
|
|
<img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/" className="">
|
|
<i className="cicle default"></i>
|
|
<span>0001</span>
|
|
<span>1511함A-05</span>
|
|
<span>
|
|
<img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
|
|
</span>
|
|
<span>(AIS)</span>
|
|
<span className="legend">
|
|
<img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{/* 탭 콘텐츠 04 */}
|
|
<div className={`tabWrap ${activeTab === 'ship04' ? 'is-active' : ''}`}>
|
|
<div className="tabTop">
|
|
<div className="title">침몰선박</div>
|
|
<div className="formGroup">
|
|
<ul>
|
|
<li>
|
|
<label>
|
|
<span>선박명</span>
|
|
<input type="text" placeholder="선박명" />
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<span>사고기간</span>
|
|
<div className='labelRow'>
|
|
<input type="text" className="dateInput" placeholder="연도-월-일" />
|
|
<span>-</span>
|
|
<input type="text"className="dateInput" placeholder="연도-월-일" /></div>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<span>사고내용</span>
|
|
<input type="text" placeholder="사고내용" />
|
|
</label>
|
|
</li>
|
|
<li className="fgBtn">
|
|
<button type="button" className="schBtn">검색</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="tabBtm">
|
|
<ul className="colList line">
|
|
<li>
|
|
<Link to="/" className="active">
|
|
<i className="cicle default"></i>
|
|
<span>0001</span>
|
|
<span>1511함A-05</span>
|
|
<span>
|
|
<img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
|
|
</span>
|
|
<span>(AIS)</span>
|
|
<span className="legend">
|
|
<img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/" className="">
|
|
<i className="cicle default"></i>
|
|
<span>0001</span>
|
|
<span>1511함A-05</span>
|
|
<span>
|
|
<img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
|
|
</span>
|
|
<span>(AIS)</span>
|
|
<span className="legend">
|
|
<img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{/* 탭 콘텐츠 05 */}
|
|
<div className={`tabWrap ${activeTab === 'ship05' ? 'is-active' : ''}`}>
|
|
<div className="tabTop">
|
|
<div className="title">선박입출항</div>
|
|
<div className="formGroup">
|
|
<ul>
|
|
<li>
|
|
<label>
|
|
<span>출항일시</span>
|
|
<input type="text" className="dateInput" placeholder="연도-월-일 - -:-" />
|
|
</label>
|
|
<label>
|
|
<span>~ 입항일시</span>
|
|
<input type="text" className="dateInput" placeholder="연도-월-일 - -:-" />
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<span>PMS<br/>출항항구</span>
|
|
<select>
|
|
<option value="">전체</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
<span>PMS<br/>입항항구</span>
|
|
<select>
|
|
<option value="">전체</option>
|
|
</select>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<span>SIE<br/>출항항구</span>
|
|
<select>
|
|
<option value="">전체</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
<span>SIE<br/>입항항구</span>
|
|
<select>
|
|
<option value="">전체</option>
|
|
</select>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<span>타겟ID</span>
|
|
<input type="text" placeholder="타겟ID" />
|
|
</label>
|
|
<label>
|
|
<span>선박명</span>
|
|
<input type="text" placeholder="선박명" />
|
|
</label>
|
|
</li>
|
|
{/* 여기부터 아코디언 */}
|
|
<div className={`accordion ${isAccordionOpen2 ? 'is-open' : ''}`}>
|
|
<li>
|
|
<label>
|
|
<span>낚시여부</span>
|
|
<select>
|
|
<option value="">전체</option>
|
|
<option value="">미선택</option>
|
|
<option value="">선택</option>
|
|
</select>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<span>최대<br/>적재톤수</span>
|
|
<input type="text" placeholder="0" />
|
|
</label>
|
|
<label>
|
|
<span>최소<br/>적재톤수</span>
|
|
<input type="text" placeholder="0" />
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<span>최대<br/>승선원</span>
|
|
<input type="text" placeholder="0" />
|
|
</label>
|
|
<label>
|
|
<span>최소<br/>승선원</span>
|
|
<input type="text" placeholder="0" />
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<span>최대<br/>승객수</span>
|
|
<input type="text" placeholder="0" />
|
|
</label>
|
|
<label>
|
|
<span>최소<br/>승객수</span>
|
|
<input type="text" placeholder="0" />
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<span>선종</span>
|
|
<select>
|
|
<option value="">전체</option>
|
|
<option value="">어선</option>
|
|
<option value="">함정</option>
|
|
<option value="">여객선</option>
|
|
<option value="">카고</option>
|
|
<option value="">탱커</option>
|
|
<option value="">관공선</option>
|
|
<option value="">기타</option>
|
|
<option value="">낚시어선</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
<span>국적</span>
|
|
<select>
|
|
<option value="">전체</option>
|
|
<option value="">한국</option>
|
|
<option value="">미국</option>
|
|
<option value="">중국</option>
|
|
<option value="">일본</option>
|
|
<option value="">북한</option>
|
|
<option value="">기타</option>
|
|
</select>
|
|
</label>
|
|
</li>
|
|
</div>
|
|
{/* 여기까지 아코디언 */}
|
|
<li>
|
|
<button
|
|
type="button"
|
|
className={`btn btnS semi btnToggle ${isAccordionOpen2 ? 'is-open' : ''}`}
|
|
aria-expanded={isAccordionOpen2}
|
|
onClick={toggleAccordion2}
|
|
>
|
|
상세검색
|
|
{isAccordionOpen2 ? ' 닫기' : ' 열기'}
|
|
</button>
|
|
</li>
|
|
<li className="fgBtn">
|
|
<button type="button" className="schBtn">검색</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="tabBtm">
|
|
<ul className="colList line">
|
|
<li>
|
|
<Link to="/" className="active">
|
|
<i className="cicle default"></i>
|
|
<span>0001</span>
|
|
<span>1511함A-05</span>
|
|
<span>
|
|
<img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
|
|
</span>
|
|
<span>(AIS)</span>
|
|
<span className="legend">
|
|
<img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/" className="">
|
|
<i className="cicle default"></i>
|
|
<span>0001</span>
|
|
<span>1511함A-05</span>
|
|
<span>
|
|
<img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
|
|
</span>
|
|
<span>(AIS)</span>
|
|
<span className="legend">
|
|
<img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{/* 탭 콘텐츠 06 */}
|
|
<div className={`tabWrap ${activeTab === 'ship06' ? 'is-active' : ''}`}>
|
|
<div className="tabTop">
|
|
<div className="title">관심선박</div>
|
|
<div className="formGroup">
|
|
<ul className="lagelW12">
|
|
<li>
|
|
<label>
|
|
<span>관심사유 지정사유</span>
|
|
<select>
|
|
<option value="">전체</option>
|
|
<option value="">불법조업의심</option>
|
|
<option value="">불법포경의심</option>
|
|
<option value="">MMSI 신호 임의 변경</option>
|
|
<option value="">제재 선박 의심</option>
|
|
<option value="">북한 선박 의심</option>
|
|
<option value="">기타</option>
|
|
</select>
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<span>타겟 ID</span>
|
|
<input type="text" placeholder="타겟 ID" />
|
|
</label>
|
|
</li>
|
|
<li>
|
|
<label>
|
|
<span>선박명</span>
|
|
<input type="text" placeholder="선박명" />
|
|
</label>
|
|
</li>
|
|
<li className="fgBtn">
|
|
<button type="button" className="schBtn">검색</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="tabBtm">
|
|
<ul className="colList line">
|
|
<li>
|
|
<Link to="/" className="active">
|
|
<i className="cicle default"></i>
|
|
<span>0001</span>
|
|
<span>1511함A-05</span>
|
|
<span>
|
|
<img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
|
|
</span>
|
|
<span>(AIS)</span>
|
|
<span className="legend">
|
|
<img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to="/" className="">
|
|
<i className="cicle default"></i>
|
|
<span>0001</span>
|
|
<span>1511함A-05</span>
|
|
<span>
|
|
<img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
|
|
</span>
|
|
<span>(AIS)</span>
|
|
<span className="legend">
|
|
<img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
|
|
</span>
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{/* 사이드패널 토글버튼 */}
|
|
<button
|
|
type="button"
|
|
className="toogle"
|
|
aria-expanded={isOpen}
|
|
onClick={onToggle}
|
|
>
|
|
<span className="blind">
|
|
{isOpen ? '패널 접기' : '패널 열기'}
|
|
</span>
|
|
</button>
|
|
</aside>
|
|
);
|
|
}
|