From cd3b534dd80b2a7953028f4331db6166568f1009 Mon Sep 17 00:00:00 2001 From: HeungTak Lee Date: Thu, 5 Feb 2026 06:38:01 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EA=B2=BD?= =?UTF-8?q?=EB=A1=9C=20BASE=5FURL=20=EC=A0=81=EC=9A=A9=20(=EB=B0=B0?= =?UTF-8?q?=ED=8F=AC=20=ED=99=98=EA=B2=BD=20=ED=98=B8=ED=99=98)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 하드코딩된 /images/ 경로를 import.meta.env.BASE_URL 기반으로 변경 - 배포 환경(/kcgv/) 서브패스 호환성 확보 Co-Authored-By: Claude Opus 4.5 --- src/component/wrap/ToolComponent.jsx | 42 ++++++++------- src/component/wrap/main/ShipComponent.jsx | 9 ++-- src/component/wrap/side/DisplayComponent.jsx | 55 ++++++++++++++++---- src/component/wrap/side/Panel1Component.jsx | 53 ++++++++++--------- src/component/wrap/side/Panel3Component.jsx | 17 +++--- src/component/wrap/side/Panel6Component.jsx | 13 +++-- 6 files changed, 120 insertions(+), 69 deletions(-) diff --git a/src/component/wrap/ToolComponent.jsx b/src/component/wrap/ToolComponent.jsx index 845902c8..fb39b1c4 100644 --- a/src/component/wrap/ToolComponent.jsx +++ b/src/component/wrap/ToolComponent.jsx @@ -1,6 +1,8 @@ import { useState } from "react" import useShipStore from '../../stores/shipStore'; +const BASE_URL = import.meta.env.BASE_URL; + export default function ToolComponent() { const [isLegendOpen, setIsLegendOpen] = useState(false); const { isIntegrate, toggleIntegrate } = useShipStore(); @@ -57,83 +59,83 @@ export default function ToolComponent() {
  • - 통합통합 + 통합통합 0
  • - 중국어선중국어선 + 중국어선중국어선 0
  • - 중국어선허가중국어선허가 + 중국어선허가중국어선허가 0
  • - 일본어선일본어선 + 일본어선일본어선 0
  • - 위험물위험물 + 위험물위험물 0
  • - 여객선여객선 + 여객선여객선 0
  • - 함정함정 + 함정함정 0
  • - 함정-RADAR함정-RADAR + 함정-RADAR함정-RADAR 0
  • - 일반일반 + 일반일반 0
  • - VTS-일반VTS-일반 + VTS-일반VTS-일반 0
  • - VTS-RADARVTS-RADAR + VTS-RADARVTS-RADAR 0
  • - VPASS일반VPASS일반 + VPASS일반VPASS일반 0
  • - ENAV어선ENAV어선 + ENAV어선ENAV어선 0
  • - ENAV위험물ENAV위험물 + ENAV위험물ENAV위험물 0
  • - ENAV화물선ENAV화물선 + ENAV화물선ENAV화물선 0
  • - ENAV관공선ENAV관공선 + ENAV관공선ENAV관공선 0
  • - ENAV일반ENAV일반 + ENAV일반ENAV일반 0
  • - D-MF/HFD-MF/HF + D-MF/HFD-MF/HF 0
  • - 항공기항공기 + 항공기항공기 0
  • - NLLNLL + NLLNLL 0
diff --git a/src/component/wrap/main/ShipComponent.jsx b/src/component/wrap/main/ShipComponent.jsx index 2f4ff033..5cd42583 100644 --- a/src/component/wrap/main/ShipComponent.jsx +++ b/src/component/wrap/main/ShipComponent.jsx @@ -1,12 +1,15 @@ import { useState } from "react"; + +const BASE_URL = import.meta.env.BASE_URL; + export default function ShipComponent() { //progress bar value 선언 const [value, setValue] = useState(60); // 갤러리 이미지 const images = [ - { src: "/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_001.png`, alt: "1511함A-05" }, + { src: `${BASE_URL}images/photo_ship_002.png`, alt: "1511함A-05" }, ]; const [currentIndex, setCurrentIndex] = useState(0); @@ -30,7 +33,7 @@ export default function ShipComponent() {
- 대한민국 + 대한민국 1511함A-05 13450135
diff --git a/src/component/wrap/side/DisplayComponent.jsx b/src/component/wrap/side/DisplayComponent.jsx index b016adca..e513b476 100644 --- a/src/component/wrap/side/DisplayComponent.jsx +++ b/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 Slider from '../../common/Slider'; import useShipStore from '../../../stores/shipStore'; +import { useMapStore, BASE_MAP_TYPES } from '../../../stores/mapStore'; import { SIGNAL_SOURCE_CODE_AIS, SIGNAL_SOURCE_CODE_ENAV, @@ -55,10 +56,14 @@ const NATIONAL_FILTERS = [ { code: NATIONAL_CODE_OTHER, label: '기타' }, ]; -export default function DisplayComponent({ isOpen, onToggle }) { +export default function DisplayComponent({ isOpen, onToggle, initialTab = 'filter' }) { const navigate = useNavigate(); - // 스토어 연결 + // 지도 스토어 연결 + const baseMapType = useMapStore((s) => s.baseMapType); + const setBaseMapType = useMapStore((s) => s.setBaseMapType); + + // 선박 스토어 연결 const { sourceVisibility, kindVisibility, @@ -124,8 +129,13 @@ export default function DisplayComponent({ isOpen, onToggle }) { }); }, [isAllNationalsOn, nationalVisibility, toggleNationalVisibility]); - // 탭이동 - const [activeTab, setActiveTab] = useState('filter'); + // 탭이동 (좌측 메뉴와 동기화) + const [activeTab, setActiveTab] = useState(initialTab); + + // 좌측 메뉴 변경 시 탭 동기화 + useEffect(() => { + setActiveTab(initialTab); + }, [initialTab]); const tabs = [ { id: 'filter', label: '필터' }, @@ -415,15 +425,42 @@ export default function DisplayComponent({ isOpen, onToggle }) {
  • 전자해도 - +
  • 일반지도 - +
  • - 영상지도 - + 야간지도 +
diff --git a/src/component/wrap/side/Panel1Component.jsx b/src/component/wrap/side/Panel1Component.jsx index 65358c2a..905ce205 100644 --- a/src/component/wrap/side/Panel1Component.jsx +++ b/src/component/wrap/side/Panel1Component.jsx @@ -1,5 +1,8 @@ import { useState } from 'react'; import { Link } from "react-router-dom"; + +const BASE_URL = import.meta.env.BASE_URL; + export default function Panel1Component({ isOpen, onToggle }) { // 아코디언 @@ -169,11 +172,11 @@ export default function Panel1Component({ isOpen, onToggle }) { 0001 1511함A-05 - 대한민국 + 대한민국 (AIS) - 선박 + 선박 @@ -183,11 +186,11 @@ export default function Panel1Component({ isOpen, onToggle }) { 0001 1511함A-05 - 대한민국 + 대한민국 (AIS) - 선박 + 선박 @@ -197,11 +200,11 @@ export default function Panel1Component({ isOpen, onToggle }) { 0001 1511함A-05 - 대한민국 + 대한민국 (AIS) - 선박 + 선박 @@ -211,11 +214,11 @@ export default function Panel1Component({ isOpen, onToggle }) { 0001 1511함A-05 - 대한민국 + 대한민국 (AIS) - 선박 + 선박 @@ -258,7 +261,7 @@ export default function Panel1Component({ isOpen, onToggle }) { Fishing
- 대한민국 + 대한민국 412
@@ -344,11 +347,11 @@ export default function Panel1Component({ isOpen, onToggle }) { 0001 1511함A-05 - 대한민국 + 대한민국 (AIS) - 선박 + 선박 @@ -358,11 +361,11 @@ export default function Panel1Component({ isOpen, onToggle }) { 0001 1511함A-05 - 대한민국 + 대한민국 (AIS) - 선박 + 선박 @@ -411,11 +414,11 @@ export default function Panel1Component({ isOpen, onToggle }) { 0001 1511함A-05 - 대한민국 + 대한민국 (AIS) - 선박 + 선박 @@ -425,11 +428,11 @@ export default function Panel1Component({ isOpen, onToggle }) { 0001 1511함A-05 - 대한민국 + 대한민국 (AIS) - 선박 + 선박 @@ -588,11 +591,11 @@ export default function Panel1Component({ isOpen, onToggle }) { 0001 1511함A-05 - 대한민국 + 대한민국 (AIS) - 선박 + 선박 @@ -602,11 +605,11 @@ export default function Panel1Component({ isOpen, onToggle }) { 0001 1511함A-05 - 대한민국 + 대한민국 (AIS) - 선박 + 선박 @@ -660,11 +663,11 @@ export default function Panel1Component({ isOpen, onToggle }) { 0001 1511함A-05 - 대한민국 + 대한민국 (AIS) - 선박 + 선박 @@ -674,11 +677,11 @@ export default function Panel1Component({ isOpen, onToggle }) { 0001 1511함A-05 - 대한민국 + 대한민국 (AIS) - 선박 + 선박 diff --git a/src/component/wrap/side/Panel3Component.jsx b/src/component/wrap/side/Panel3Component.jsx index 2263b47d..8abc7bbd 100644 --- a/src/component/wrap/side/Panel3Component.jsx +++ b/src/component/wrap/side/Panel3Component.jsx @@ -1,5 +1,8 @@ import { useState } from 'react'; import { Link } from "react-router-dom"; + +const BASE_URL = import.meta.env.BASE_URL; + export default function Panel3Component({ isOpen, onToggle }) { // 탭이동 @@ -136,11 +139,11 @@ export default function Panel3Component({ isOpen, onToggle }) {
조위관측 범례
    -
  • 조위관측소조위관측소
    • -
  • 해양관측소해양관측소
    • -
  • 해양관측부이해양관측부이
    • -
  • 해수유동관측소해수유동관측소
    • -
  • 해양과학기지해양과학기지
    • +
  • 조위관측소조위관측소
    • +
  • 해양관측소해양관측소
    • +
  • 해양관측부이해양관측부이
    • +
  • 해수유동관측소해수유동관측소
    • +
  • 해양과학기지해양과학기지
@@ -187,8 +190,8 @@ export default function Panel3Component({ isOpen, onToggle }) {
조위관측 범례
    -
  • 조위관측소조위관측소
    • -
  • 일출몰관측지역일출몰관측지역
    • +
  • 조위관측소조위관측소
    • +
  • 일출몰관측지역일출몰관측지역
diff --git a/src/component/wrap/side/Panel6Component.jsx b/src/component/wrap/side/Panel6Component.jsx index 3451b3f1..0abb6593 100644 --- a/src/component/wrap/side/Panel6Component.jsx +++ b/src/component/wrap/side/Panel6Component.jsx @@ -1,5 +1,8 @@ import { useState } from "react"; import { Link } from "react-router-dom"; + +const BASE_URL = import.meta.env.BASE_URL; + export default function Panel6Component({ isOpen, onToggle }) { return ( @@ -13,7 +16,7 @@ export default function Panel6Component({ isOpen, onToggle }) {
  • ON
    - 소실항적소실항적 + 소실항적소실항적 AIS 신호가 소실된 선박 Signal Gap @@ -21,7 +24,7 @@ export default function Panel6Component({ isOpen, onToggle }) {
  • OFF
    - 항로예측항로예측 + 항로예측항로예측 AI 기반 선박 항로 예측 ML Pattern @@ -29,7 +32,7 @@ export default function Panel6Component({ isOpen, onToggle }) {
  • OFF
    - 선종분석선종분석 + 선종분석선종분석 선박 유형 자동 분류 Auto Class @@ -37,7 +40,7 @@ export default function Panel6Component({ isOpen, onToggle }) {
  • ON
    - 조업분석조업분석 + 조업분석조업분석 구역별 위험도 평가 Risk Score @@ -45,7 +48,7 @@ export default function Panel6Component({ isOpen, onToggle }) {
  • ON
    - 해역별 위험지수해역별 위험지수 + 해역별 위험지수해역별 위험지수 구역별 위험도 평가 Risk Score