gc/ship-gis
1
0
포크 0
코드 이슈 풀 리퀘스트 위키 활동

fix: 이미지 경로 BASE_URL 적용 (배포 환경 호환)

소스 검색 
- 하드코딩된 /images/ 경로를 import.meta.env.BASE_URL 기반으로 변경
- 배포 환경(/kcgv/) 서브패스 호환성 확보

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
HeungTak Lee 2026-02-05 06:38:01 +09:00
부모 fa34c6cd0c
커밋 cd3b534dd8
6개의 변경된 파일과 120개의 추가작업 그리고 69개의 파일을 삭제
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/component/wrap/ToolComponent.jsx
파일 보기

@ -1,6 +1,8 @@
import { useState } from "react" import { useState } from "react"
import useShipStore from '../../stores/shipStore'; import useShipStore from '../../stores/shipStore';
const BASE_URL = import.meta.env.BASE_URL;
export default function ToolComponent() { export default function ToolComponent() {
const [isLegendOpen, setIsLegendOpen] = useState(false); const [isLegendOpen, setIsLegendOpen] = useState(false);
const { isIntegrate, toggleIntegrate } = useShipStore(); const { isIntegrate, toggleIntegrate } = useShipStore();
@ -57,83 +59,83 @@ export default function ToolComponent() {
<div className="legendWrap"> <div className="legendWrap">
<ul className="legendList"> <ul className="legendList">
<li className="legendItem"> <li className="legendItem">
<span className="legendLabel"><img src="/images/ico_legend_all.svg" alt="통합" />통합</span> <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_all.svg`} alt="통합" />통합</span>
<span className="legendValue">0</span> <span className="legendValue">0</span>
</li> </li>
<li> <li>
<span className="legendLabel"><img src="/images/ico_legend_china.svg" alt="중국어선" />중국어선</span> <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_china.svg`} alt="중국어선" />중국어선</span>
<span className="legendValue">0</span> <span className="legendValue">0</span>
</li> </li>
<li> <li>
<span className="legendLabel"><img src="/images/ico_legend_china_permit.svg" alt="중국어선허가" />중국어선허가</span> <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_china_permit.svg`} alt="중국어선허가" />중국어선허가</span>
<span className="legendValue">0</span> <span className="legendValue">0</span>
</li> </li>
<li> <li>
<span className="legendLabel"><img src="/images/ico_legend_japan.svg" alt="일본어선" />일본어선</span> <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_japan.svg`} alt="일본어선" />일본어선</span>
<span className="legendValue">0</span> <span className="legendValue">0</span>
</li> </li>
<li> <li>
<span className="legendLabel"><img src="/images/ico_legend_danger.svg" alt="위험물" />위험물</span> <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_danger.svg`} alt="위험물" />위험물</span>
<span className="legendValue">0</span> <span className="legendValue">0</span>
</li> </li>
<li> <li>
<span className="legendLabel"><img src="/images/ico_legend_passenger.svg" alt="여객선" />여객선</span> <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_passenger.svg`} alt="여객선" />여객선</span>
<span className="legendValue">0</span> <span className="legendValue">0</span>
</li> </li>
<li> <li>
<span className="legendLabel"><img src="/images/ico_legend_vessel.svg" alt="함정" />함정</span> <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_vessel.svg`} alt="함정" />함정</span>
<span className="legendValue">0</span> <span className="legendValue">0</span>
</li> </li>
<li> <li>
<span className="legendLabel"><img src="/images/ico_legend_vessel_radar.svg" alt="함정-RADAR" />함정-RADAR</span> <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_vessel_radar.svg`} alt="함정-RADAR" />함정-RADAR</span>
<span className="legendValue">0</span> <span className="legendValue">0</span>
</li> </li>
<li> <li>
<span className="legendLabel"><img src="/images/ico_legend_general.svg" alt="일반" />일반</span> <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_general.svg`} alt="일반" />일반</span>
<span className="legendValue">0</span> <span className="legendValue">0</span>
</li> </li>
<li> <li>
<span className="legendLabel"><img src="/images/ico_legend_vts_general.svg" alt="VTS-일반" />VTS-일반</span> <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_vts_general.svg`} alt="VTS-일반" />VTS-일반</span>
<span className="legendValue">0</span> <span className="legendValue">0</span>
</li> </li>
<li> <li>
<span className="legendLabel"><img src="/images/ico_legend_vts_radar.svg" alt="VTS-RADAR" />VTS-RADAR</span> <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_vts_radar.svg`} alt="VTS-RADAR" />VTS-RADAR</span>
<span className="legendValue">0</span> <span className="legendValue">0</span>
</li> </li>
<li> <li>
<span className="legendLabel"><img src="/images/ico_legend_vpass.svg" alt="VPASS일반" />VPASS일반</span> <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_vpass.svg`} alt="VPASS일반" />VPASS일반</span>
<span className="legendValue">0</span> <span className="legendValue">0</span>
</li> </li>
<li> <li>
<span className="legendLabel"><img src="/images/ico_legend_enav_fishing.svg" alt="ENAV어선" />ENAV어선</span> <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_enav_fishing.svg`} alt="ENAV어선" />ENAV어선</span>
<span className="legendValue">0</span> <span className="legendValue">0</span>
</li> </li>
<li> <li>
<span className="legendLabel"><img src="/images/ico_legend_enav_danger.svg" alt="ENAV위험물" />ENAV위험물</span> <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_enav_danger.svg`} alt="ENAV위험물" />ENAV위험물</span>
<span className="legendValue">0</span> <span className="legendValue">0</span>
</li> </li>
<li> <li>
<span className="legendLabel"><img src="/images/ico_legend_enav_cargo.svg" alt="ENAV화물선" />ENAV화물선</span> <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_enav_cargo.svg`} alt="ENAV화물선" />ENAV화물선</span>
<span className="legendValue">0</span> <span className="legendValue">0</span>
</li> </li>
<li> <li>
<span className="legendLabel"><img src="/images/ico_legend_enav_government.svg" alt="ENAV관공선" />ENAV관공선</span> <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_enav_government.svg`} alt="ENAV관공선" />ENAV관공선</span>
<span className="legendValue">0</span> <span className="legendValue">0</span>
</li> </li>
<li> <li>
<span className="legendLabel"><img src="/images/ico_legend_enav_general.svg" alt="ENAV일반" />ENAV일반</span> <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_enav_general.svg`} alt="ENAV일반" />ENAV일반</span>
<span className="legendValue">0</span> <span className="legendValue">0</span>
</li> </li>
<li> <li>
<span className="legendLabel"><img src="/images/ico_legend_dmfhf.svg" alt="D-MF/HF" />D-MF/HF</span> <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_dmfhf.svg`} alt="D-MF/HF" />D-MF/HF</span>
<span className="legendValue">0</span> <span className="legendValue">0</span>
</li> </li>
<li> <li>
<span className="legendLabel"><img src="/images/ico_legend_aircraft.svg" alt="항공기" />항공기</span> <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_aircraft.svg`} alt="항공기" />항공기</span>
<span className="legendValue">0</span> <span className="legendValue">0</span>
</li> </li>
<li> <li>
<span className="legendLabel"><img src="/images/ico_legend_nll.svg" alt="NLL" />NLL</span> <span className="legendLabel"><img src={`${BASE_URL}images/ico_legend_nll.svg`} alt="NLL" />NLL</span>
<span className="legendValue">0</span> <span className="legendValue">0</span>
</li> </li>
</ul> </ul>

9
src/component/wrap/main/ShipComponent.jsx
파일 보기

@ -1,12 +1,15 @@
import { useState } from "react"; import { useState } from "react";
const BASE_URL = import.meta.env.BASE_URL;
export default function ShipComponent() { export default function ShipComponent() {
//progress bar value 선언 //progress bar value 선언
const [value, setValue] = useState(60); const [value, setValue] = useState(60);
// 갤러리 이미지 // 갤러리 이미지
const images = [ const images = [
{ src: "/images/photo_ship_001.png", alt: "1511함A-05" }, { src: `${BASE_URL}images/photo_ship_001.png`, alt: "1511함A-05" },
{ src: "/images/photo_ship_002.png", alt: "1511함A-05" }, { src: `${BASE_URL}images/photo_ship_002.png`, alt: "1511함A-05" },
]; ];
const [currentIndex, setCurrentIndex] = useState(0); const [currentIndex, setCurrentIndex] = useState(0);
@ -30,7 +33,7 @@ export default function ShipComponent() {
<div className="pmHeader"> <div className="pmHeader">
<div className="rowL"> <div className="rowL">
<i className="shipType"></i> <i className="shipType"></i>
<img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" /> <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
<span className="shipName">1511함A-05</span> <span className="shipName">1511함A-05</span>
<span className="shipNum">13450135</span> <span className="shipNum">13450135</span>
</div> </div>

55
src/component/wrap/side/DisplayComponent.jsx
파일 보기

@ -1,7 +1,8 @@
import { useState, useCallback } from 'react'; import { useState, useCallback, useEffect } from 'react';
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import Slider from '../../common/Slider'; import Slider from '../../common/Slider';
import useShipStore from '../../../stores/shipStore'; import useShipStore from '../../../stores/shipStore';
import { useMapStore, BASE_MAP_TYPES } from '../../../stores/mapStore';
import { import {
SIGNAL_SOURCE_CODE_AIS, SIGNAL_SOURCE_CODE_AIS,
SIGNAL_SOURCE_CODE_ENAV, SIGNAL_SOURCE_CODE_ENAV,
@ -55,10 +56,14 @@ const NATIONAL_FILTERS = [
{ code: NATIONAL_CODE_OTHER, label: '기타' }, { code: NATIONAL_CODE_OTHER, label: '기타' },
]; ];
export default function DisplayComponent({ isOpen, onToggle }) { export default function DisplayComponent({ isOpen, onToggle, initialTab = 'filter' }) {
const navigate = useNavigate(); const navigate = useNavigate();
// 스토어 연결 // 지도 스토어 연결
const baseMapType = useMapStore((s) => s.baseMapType);
const setBaseMapType = useMapStore((s) => s.setBaseMapType);
// 선박 스토어 연결
const { const {
sourceVisibility, sourceVisibility,
kindVisibility, kindVisibility,
@ -124,8 +129,13 @@ export default function DisplayComponent({ isOpen, onToggle }) {
}); });
}, [isAllNationalsOn, nationalVisibility, toggleNationalVisibility]); }, [isAllNationalsOn, nationalVisibility, toggleNationalVisibility]);
// 탭이동 // 탭이동 (좌측 메뉴와 동기화)
const [activeTab, setActiveTab] = useState('filter'); const [activeTab, setActiveTab] = useState(initialTab);
// 좌측 메뉴 변경 시 탭 동기화
useEffect(() => {
setActiveTab(initialTab);
}, [initialTab]);
const tabs = [ const tabs = [
{ id: 'filter', label: '필터' }, { id: 'filter', label: '필터' },
@ -415,15 +425,42 @@ export default function DisplayComponent({ isOpen, onToggle }) {
<ul className="optionList"> <ul className="optionList">
<li> <li>
<span>전자해도</span> <span>전자해도</span>
<label className="radio"> <input type="radio" name="map" aria-label="전자해도" /> <span></span></label> <label className="radio">
<input
type="radio"
name="baseMap"
aria-label="전자해도"
checked={baseMapType === BASE_MAP_TYPES.ENC}
onChange={() => setBaseMapType(BASE_MAP_TYPES.ENC)}
/>
<span></span>
</label>
</li> </li>
<li> <li>
<span>일반지도</span> <span>일반지도</span>
<label className="radio"> <input type="radio" name="map" aria-label="일반지도" /> <span></span></label> <label className="radio">
<input
type="radio"
name="baseMap"
aria-label="일반지도"
checked={baseMapType === BASE_MAP_TYPES.NORMAL}
onChange={() => setBaseMapType(BASE_MAP_TYPES.NORMAL)}
/>
<span></span>
</label>
</li> </li>
<li> <li>
<span>영상지도</span> <span>야간지도</span>
<label className="radio"> <input type="radio" name="map" aria-label="영상지도" /> <span></span></label> <label className="radio">
<input
type="radio"
name="baseMap"
aria-label="야간지도"
checked={baseMapType === BASE_MAP_TYPES.DARK}
onChange={() => setBaseMapType(BASE_MAP_TYPES.DARK)}
/>
<span></span>
</label>
</li> </li>
</ul> </ul>
</li> </li>

53
src/component/wrap/side/Panel1Component.jsx
파일 보기

@ -1,5 +1,8 @@
import { useState } from 'react'; import { useState } from 'react';
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
const BASE_URL = import.meta.env.BASE_URL;
export default function Panel1Component({ isOpen, onToggle }) { export default function Panel1Component({ isOpen, onToggle }) {
// 아코디언 // 아코디언
@ -169,11 +172,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
<span>0001</span> <span>0001</span>
<span>1511함A-05</span> <span>1511함A-05</span>
<span> <span>
<img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" /> <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
</span> </span>
<span>(AIS)</span> <span>(AIS)</span>
<span className="legend"> <span className="legend">
<img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" /> <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
</span> </span>
</Link> </Link>
</li> </li>
@ -183,11 +186,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
<span>0001</span> <span>0001</span>
<span>1511함A-05</span> <span>1511함A-05</span>
<span> <span>
<img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" /> <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
</span> </span>
<span>(AIS)</span> <span>(AIS)</span>
<span className="legend"> <span className="legend">
<img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" /> <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
</span> </span>
</Link> </Link>
</li> </li>
@ -197,11 +200,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
<span>0001</span> <span>0001</span>
<span>1511함A-05</span> <span>1511함A-05</span>
<span> <span>
<img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" /> <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
</span> </span>
<span>(AIS)</span> <span>(AIS)</span>
<span className="legend"> <span className="legend">
<img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" /> <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
</span> </span>
</Link> </Link>
</li> </li>
@ -211,11 +214,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
<span>0001</span> <span>0001</span>
<span>1511함A-05</span> <span>1511함A-05</span>
<span> <span>
<img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" /> <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
</span> </span>
<span>(AIS)</span> <span>(AIS)</span>
<span className="legend"> <span className="legend">
<img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" /> <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
</span> </span>
</Link> </Link>
</li> </li>
@ -258,7 +261,7 @@ export default function Panel1Component({ isOpen, onToggle }) {
<span className="type">Fishing</span> <span className="type">Fishing</span>
</div> </div>
<div className="headerR"> <div className="headerR">
<img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" /> <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
<span className="num">412</span> <span className="num">412</span>
<button className="icoArrow"></button> <button className="icoArrow"></button>
</div> </div>
@ -344,11 +347,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
<span>0001</span> <span>0001</span>
<span>1511함A-05</span> <span>1511함A-05</span>
<span> <span>
<img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" /> <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
</span> </span>
<span>(AIS)</span> <span>(AIS)</span>
<span className="legend"> <span className="legend">
<img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" /> <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
</span> </span>
</Link> </Link>
</li> </li>
@ -358,11 +361,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
<span>0001</span> <span>0001</span>
<span>1511함A-05</span> <span>1511함A-05</span>
<span> <span>
<img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" /> <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
</span> </span>
<span>(AIS)</span> <span>(AIS)</span>
<span className="legend"> <span className="legend">
<img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" /> <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
</span> </span>
</Link> </Link>
</li> </li>
@ -411,11 +414,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
<span>0001</span> <span>0001</span>
<span>1511함A-05</span> <span>1511함A-05</span>
<span> <span>
<img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" /> <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
</span> </span>
<span>(AIS)</span> <span>(AIS)</span>
<span className="legend"> <span className="legend">
<img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" /> <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
</span> </span>
</Link> </Link>
</li> </li>
@ -425,11 +428,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
<span>0001</span> <span>0001</span>
<span>1511함A-05</span> <span>1511함A-05</span>
<span> <span>
<img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" /> <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
</span> </span>
<span>(AIS)</span> <span>(AIS)</span>
<span className="legend"> <span className="legend">
<img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" /> <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
</span> </span>
</Link> </Link>
</li> </li>
@ -588,11 +591,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
<span>0001</span> <span>0001</span>
<span>1511함A-05</span> <span>1511함A-05</span>
<span> <span>
<img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" /> <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
</span> </span>
<span>(AIS)</span> <span>(AIS)</span>
<span className="legend"> <span className="legend">
<img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" /> <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
</span> </span>
</Link> </Link>
</li> </li>
@ -602,11 +605,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
<span>0001</span> <span>0001</span>
<span>1511함A-05</span> <span>1511함A-05</span>
<span> <span>
<img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" /> <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
</span> </span>
<span>(AIS)</span> <span>(AIS)</span>
<span className="legend"> <span className="legend">
<img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" /> <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
</span> </span>
</Link> </Link>
</li> </li>
@ -660,11 +663,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
<span>0001</span> <span>0001</span>
<span>1511함A-05</span> <span>1511함A-05</span>
<span> <span>
<img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" /> <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
</span> </span>
<span>(AIS)</span> <span>(AIS)</span>
<span className="legend"> <span className="legend">
<img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" /> <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
</span> </span>
</Link> </Link>
</li> </li>
@ -674,11 +677,11 @@ export default function Panel1Component({ isOpen, onToggle }) {
<span>0001</span> <span>0001</span>
<span>1511함A-05</span> <span>1511함A-05</span>
<span> <span>
<img src="/images/flag_kor.svg" alt="대한민국" className="flagIcon" /> <img src={`${BASE_URL}images/flag_kor.svg`} alt="대한민국" className="flagIcon" />
</span> </span>
<span>(AIS)</span> <span>(AIS)</span>
<span className="legend"> <span className="legend">
<img src="/images/legend_ship_pink.svg" alt="선박" className="legendShip" /> <img src={`${BASE_URL}images/legend_ship_pink.svg`} alt="선박" className="legendShip" />
</span> </span>
</Link> </Link>
</li> </li>

17
src/component/wrap/side/Panel3Component.jsx
파일 보기

@ -1,5 +1,8 @@
import { useState } from 'react'; import { useState } from 'react';
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
const BASE_URL = import.meta.env.BASE_URL;
export default function Panel3Component({ isOpen, onToggle }) { export default function Panel3Component({ isOpen, onToggle }) {
// 탭이동 // 탭이동
@ -136,11 +139,11 @@ export default function Panel3Component({ isOpen, onToggle }) {
<div className="legend"> <div className="legend">
<span className="legendTitle">조위관측 범례</span> <span className="legendTitle">조위관측 범례</span>
<ul className="legendList"> <ul className="legendList">
<li><img src="/images/ico_obsTide.svg" alt="조위관측소" />조위관측소</li> <li><img src={`${BASE_URL}images/ico_obsTide.svg`} alt="조위관측소" />조위관측소</li>
<li><img src="/images/ico_obsOcean.svg" alt="해양관측소" />해양관측소</li> <li><img src={`${BASE_URL}images/ico_obsOcean.svg`} alt="해양관측소" />해양관측소</li>
<li><img src="/images/ico_obsBuoy.svg" alt="해양관측부이" />해양관측부이</li> <li><img src={`${BASE_URL}images/ico_obsBuoy.svg`} alt="해양관측부이" />해양관측부이</li>
<li><img src="/images/ico_obsCurrent.svg" alt="해수유동관측소" />해수유동관측소</li> <li><img src={`${BASE_URL}images/ico_obsCurrent.svg`} alt="해수유동관측소" />해수유동관측소</li>
<li><img src="/images/ico_obsScience.svg" alt="해양과학기지" />해양과학기지</li> <li><img src={`${BASE_URL}images/ico_obsScience.svg`} alt="해양과학기지" />해양과학기지</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -187,8 +190,8 @@ export default function Panel3Component({ isOpen, onToggle }) {
<div className="legend"> <div className="legend">
<span className="legendTitle">조위관측 범례</span> <span className="legendTitle">조위관측 범례</span>
<ul className="legendList"> <ul className="legendList">
<li><img src="/images/ico_obsTide.svg" alt="조위관측소" />조위관측소</li> <li><img src={`${BASE_URL}images/ico_obsTide.svg`} alt="조위관측소" />조위관측소</li>
<li><img src="/images/ico_obsSunrise.svg" alt="일출몰관측지역" />일출몰관측지역</li> <li><img src={`${BASE_URL}images/ico_obsSunrise.svg`} alt="일출몰관측지역" />일출몰관측지역</li>
</ul> </ul>
</div> </div>
</div> </div>

13
src/component/wrap/side/Panel6Component.jsx
파일 보기

@ -1,5 +1,8 @@
import { useState } from "react"; import { useState } from "react";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
const BASE_URL = import.meta.env.BASE_URL;
export default function Panel6Component({ isOpen, onToggle }) { export default function Panel6Component({ isOpen, onToggle }) {
return ( return (
@ -13,7 +16,7 @@ export default function Panel6Component({ isOpen, onToggle }) {
<li> <li>
<Link to="/" className="on"> <Link to="/" className="on">
<div className="control"><i></i> ON</div> <div className="control"><i></i> ON</div>
<span className="title"><img src="/images/ico_ai_trackgap.svg" alt="소실항적" />소실항적</span> <span className="title"><img src={`${BASE_URL}images/ico_ai_trackgap.svg`} alt="소실항적" />소실항적</span>
<span className="desc">AIS 신호가 소실된 선박</span> <span className="desc">AIS 신호가 소실된 선박</span>
<span className="keywords">Signal Gap</span> <span className="keywords">Signal Gap</span>
</Link> </Link>
@ -21,7 +24,7 @@ export default function Panel6Component({ isOpen, onToggle }) {
<li> <li>
<Link to="/" className=""> <Link to="/" className="">
<div className="control"><i></i> OFF</div> <div className="control"><i></i> OFF</div>
<span className="title"><img src="/images/ico_ai_route.svg" alt="항로예측" />항로예측</span> <span className="title"><img src={`${BASE_URL}images/ico_ai_route.svg`} alt="항로예측" />항로예측</span>
<span className="desc">AI 기반 선박 항로 예측</span> <span className="desc">AI 기반 선박 항로 예측</span>
<span className="keywords">ML Pattern</span> <span className="keywords">ML Pattern</span>
</Link> </Link>
@ -29,7 +32,7 @@ export default function Panel6Component({ isOpen, onToggle }) {
<li> <li>
<Link to="/" className=""> <Link to="/" className="">
<div className="control"><i></i> OFF</div> <div className="control"><i></i> OFF</div>
<span className="title"><img src="/images/ico_ai_shiptype.svg" alt="선종분석" />선종분석</span> <span className="title"><img src={`${BASE_URL}images/ico_ai_shiptype.svg`} alt="선종분석" />선종분석</span>
<span className="desc">선박 유형 자동 분류</span> <span className="desc">선박 유형 자동 분류</span>
<span className="keywords">Auto Class</span> <span className="keywords">Auto Class</span>
</Link> </Link>
@ -37,7 +40,7 @@ export default function Panel6Component({ isOpen, onToggle }) {
<li> <li>
<Link to="/" className="on"> <Link to="/" className="on">
<div className="control"><i></i> ON</div> <div className="control"><i></i> ON</div>
<span className="title"><img src="/images/ico_ai_fishing.svg" alt="조업분석" />조업분석</span> <span className="title"><img src={`${BASE_URL}images/ico_ai_fishing.svg`} alt="조업분석" />조업분석</span>
<span className="desc">구역별 위험도 평가</span> <span className="desc">구역별 위험도 평가</span>
<span className="keywords">Risk Score</span> <span className="keywords">Risk Score</span>
</Link> </Link>
@ -45,7 +48,7 @@ export default function Panel6Component({ isOpen, onToggle }) {
<li> <li>
<Link to="/" className="on"> <Link to="/" className="on">
<div className="control"><i></i> ON</div> <div className="control"><i></i> ON</div>
<span className="title"><img src="/images/ico_ai_risk.svg" alt="해역별 위험지수" />해역별 위험지수</span> <span className="title"><img src={`${BASE_URL}images/ico_ai_risk.svg`} alt="해역별 위험지수" />해역별 위험지수</span>
<span className="desc">구역별 위험도 평가</span> <span className="desc">구역별 위험도 평가</span>
<span className="keywords">Risk Score</span> <span className="keywords">Risk Score</span>
</Link> </Link>