## Summary
- 기상 맵 컨트롤 컴포넌트 추가 및 KHOA API 연동 개선
- KHOA API 엔드포인트 교체 및 해양예측 오버레이 Canvas 렌더링 전환
## 변경 파일
- OceanForecastOverlay.tsx
- WeatherMapOverlay.tsx
- WeatherView.tsx
- useOceanForecast.ts
- khoaApi.ts
- vite.config.ts
## Test plan
- [ ] 기상정보 -> 기상 레이어 -> 해황 예보도 클릭 -> 이미지 렌더링 확인
- [ ] 기상정보 -> 기상 레이어 -> 백터 바람 클릭 -> 백터 이미지 렌더링 확인
Co-authored-by: Nan Kyung Lee <nankyunglee@Nanui-Macmini.local>
Reviewed-on: #78
Co-authored-by: leedano <dnlee@gcsc.co.kr>
Co-committed-by: leedano <dnlee@gcsc.co.kr>
- prediction/image/ FastAPI 서버 Docker 환경 구성
- Dockerfile: PyTorch 2.1 + CUDA 12.1 기반 GPU 이미지
- docker-compose.yml: GPU 할당 + 데이터 볼륨 마운트
- requirements.txt: 서버 의존성 목록
- .env.example: 환경변수 템플릿
- DOCKER_USAGE.md: 빌드/실행/API 사용법 문서
- Dockerfile에 .dockerignore 제외 폴더 mkdir -p 추가
- .gitignore: prediction/image 결과물 및 모델 가중치(.pth) 제외 추가
- dbInsert_csv.py, dbInsert_shp.py 삭제 (미사용 DB 로직)
- api.py: dbInsert import 및 주석 처리된 DB 호출 코드 제거
- aerialRouter.ts: req.params 타입 오류 수정
- MapView: flyToIncident/onIncidentFlyEnd props 추가, moveend 이벤트 후 콜백 호출
- OilSpillView: 사고 지점 변경 시 flyTo 완료 후 재생(pendingPlayRef), 동일 지점은 즉시 재생
- opendrift/config.py: STORAGE_BASE 환경변수로 스토리지 경로 설정
- opendrift/dockerfile, .dockerignore 추가
- opendrift/createKmaImage.py 제거
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
[예측]
- OpenDrift Python API 서버 및 스크립트 추가 (prediction/opendrift/)
- 시뮬레이션 상태 폴링 훅(useSimulationStatus), 로딩 오버레이 추가
- HydrParticleOverlay: deck.gl 기반 입자 궤적 시각화 레이어
- OilSpillView/LeftPanel/RightPanel: 시뮬레이션 실행·결과 표시 UI 개편
- predictionService/predictionRouter: 시뮬레이션 CRUD 및 상태 관리 API
- simulation.ts: OpenDrift 연동 엔드포인트 확장
- docs/PREDICTION-GUIDE.md: 예측 기능 개발 가이드 추가
[CCTV/항공방제]
- CCTV 오일 감지 GPU 추론 연동 (OilDetectionOverlay, useOilDetection)
- CCTV 안전관리 감지 기능 추가 (선박 출입, 침입 감지)
- oil_inference_server.py: Python GPU 추론 서버
[관리자]
- 관리자 화면 고도화 (사용자/권한/게시판/선박신호 패널)
- AdminSidebar, BoardMgmtPanel, VesselSignalPanel 신규 컴포넌트
[기타]
- DB: 시뮬레이션 결과, 선박보험 시드(1391건), 역할 정리 마이그레이션
- 팀 워크플로우 v1.6.1 동기화
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
해양수산부 공공데이터(유류오염보장계약관리) 1,391건을 SHIP_INSURANCE 테이블에 임포트하고,
백엔드 API 및 프론트엔드 ShipInsurance 컴포넌트를 실제 DB 데이터 기반으로 전환.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- useSubMenu에 scat 서브메뉴 설정 추가 (survey, distribution, pre-scat)
- ScatView wrapper 컴포넌트로 서브탭 분기 처리
- SurveyView, DistributionView placeholder 컴포넌트 생성
- hasPermission에 부모 리소스 fallback 로직 추가 (scat:survey → scat)
- App.tsx에서 PreScatView → ScatView 교체
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- 방제선/유회수기/이송펌프/방제차량/살포장치 장비 필터 드롭다운 추가
- 페이지네이션 위 합계 행에 필터된 기관의 장비별 총합 표시
- 장비 필터 선택 시 해당 컬럼 헤더/셀/합계 항목 cyan 하이라이트
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- 152개 기관 방제장비 현황 엑셀 데이터 DB 마이그레이션 (018)
- 연락처 탭에 기관 기본 정보(기관명, 유형, 관할청, 주소, 대표 연락처) 섹션 추가
- 담당자 목록에 직책/담당자명/연락처 표시 및 cyan 색상 강조
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
CCTV 실시간 영상:
- CCTVPlayer 컴포넌트 (hls.js 기반 HLS/MJPEG/MP4 재생)
- 백엔드 HLS 프록시 엔드포인트 (CORS 우회, m3u8 URL 재작성)
- KHOA 15개 + KBS 6개 실제 해안 CCTV 연동
- Vite dev proxy, 스트림 타입 자동 감지 유틸리티
HNS 분석:
- HNS 시나리오 저장/불러오기/재계산 기능
- 물질 DB 검색 및 상세 정보 연동
- 좌표/파라미터 입력 UI 개선
- Python 확산 모델 스크립트 (hns_dispersion.py)
공통:
- 3D 지도 토글, 보고서 생성 개선
- useSubMenu 훅, mapUtils 확장
- ESLint set-state-in-effect 수정
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
기존 HTML Blob → .doc 저장 방식을 OWPML 표준 HWPX(ZIP+XML) 포맷으로 교체.
JSZip으로 HWPX 파일을 순수 브라우저에서 생성하여 한글에서 직접 열 수 있도록 구현.
- hwpxExport.ts 신규: HWPX ZIP 패키징 (mimetype, header.xml, section0.xml 등)
- reportUtils.ts: exportAsHWP → dynamic import로 HWPX 위임
- ReportsView.tsx, TemplateFormEditor.tsx: 구조화 데이터 직접 전달
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- mapStore.ts(신규): Zustand 기반 mapToggles 전역 상태 (s57/s101/threeD/satellite)
- TopBar.tsx: 로컬 상태 → mapStore 전환 (3D 토글 전역 공유)
- MapView.tsx:
- SATELLITE_3D_STYLE 추가 (VWorld WMTS 위성 + OpenFreeMap 벡터타일)
- MapLibre fill-extrusion으로 3D 건물 렌더링 (zoom 13+, render_height 사용)
- MapPitchController: 3D ON → pitch 45°/bearing -17°, OFF → 0° 복귀
- mapToggles.threeD 상태에 따라 지도 스타일 전환 (BASE_STYLE ↔ SATELLITE_3D_STYLE)
- deps: @deck.gl/mesh-layers, @deck.gl/extensions 추가 (관련 기능용)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- className 중복 속성 31건 수정 (12파일)
- KOSPS codeBox spread TypeError 해결
- HNS 페놀(C₆H₅OH) 물질 데이터 추가
- ScatRightPanel 280px 우측 패널 신규 구현 (3탭+액션버튼)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
대형 파일 집중 변환:
- SatelliteRequest: 134→66 (hex 색상 일괄 변환)
- IncidentsView: 141→90, MediaModal: 97→38
- HNSScenarioView: 78→38, HNSView: 49→31
- LoginPage, MapView, PredictionInputSection 등 중소 파일 8개
변환 패턴: hex 색상→text-[#hex], CSS 변수→Tailwind 유틸리티,
flex/grid/padding/fontSize/fontWeight/overflow 등 정적 속성 className 이동
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
안전한 패턴 매칭으로 단독 color/background/fontWeight/fontSize/flex 스타일을
Tailwind 유틸리티 클래스로 변환. 혼합 style에서 개별 속성 추출은 제외하여
시각적 회귀 방지.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- 확산분석: 오일 확산 방향 NE→SSW(200°)로 수정, 민감자원 여수 실제 좌표 적용
- 해류 화살표: 아이콘 ➤, 크기 22px, 투명도 증가, SSW 방향 동기화
- 통합조회: 선박/사고 마커 hover 시 다크 테마 툴팁 표시 (이름, 유형, 속도, 좌표)
- 선박 아이콘: SVG 삼각형 16×20 확대 + 글로우 효과 + pickable 전환
- vesselLayer(ScatterplotLayer 원형) 제거, vesselIconLayer로 통합
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- TextLayer: characterSet 'auto', NanumSquare 한글 폰트, outline 설정 (MapView, RealtimeDrone)
- 확산분석 탭: 진입 시 데모 궤적/방어선/민감자원 자동 로드 (useEffect + handleSelectAnalysis)
- SensorAnalysis: Vessel/Pollution 3DModel을 requestAnimationFrame 기반 360° 회전으로 전환
- 3D geometry useMemo 생성, Y축 회전 + X축 틸트, depth 기반 크기/밝기
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
항공탐색 탭:
- CctvView 크래시 수정 (cctvCameras → cameras 필드 매핑)
- AerialView 이중 서브메뉴 분기 → 플랫 switch 단순화
- SensorAnalysis SVG 300pt → Canvas 2D 5000/8000pt 고밀도 전환
- RealtimeDrone CSS 시뮬레이션 → MapLibre + deck.gl 실제 지도 전환
확산분석 탭:
- 시뮬레이션 백엔드 미구현 시 클라이언트 데모 궤적 fallback 생성
- AI 방어선 3개(직교차단/U형포위/연안보호) 자동 배치
- 민감자원 5개소(양식장/해수욕장/보호구역) deck.gl 레이어 표시
- 해류 화살표 11x11 그리드 TextLayer 추가
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- scatDetailData는 scatConstants에 없는 export — import 제거, seg.id 직접 사용
- deck.gl → @loaders.gl/worker-utils가 Node.js child_process.spawn 참조하나
브라우저에서 미사용 코드 경로이므로 shimMissingExports: true로 해결
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- App.tsx: 중복 API_BASE_URL 정의 → @common/services/api import
- MapView.tsx: GeoServer localhost:8080 → VITE_GEOSERVER_URL 환경변수
- ShipInsurance.tsx: 해운조합 API URL → VITE_HAEWOON_API_URL 환경변수
- server.ts CORS: 운영 도메인 → FRONTEND_URL 환경변수 통합
- server.ts CSP: localhost 허용을 개발 환경(NODE_ENV≠production)에만 적용
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
fetch('http://localhost:3001/...') → api.post('/simulation/run', ...)
배포 환경에서 CORS loopback 차단 문제 해결
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
ACDNT_WEATHER 테이블의 실제 컬럼명에 맞게 weather 쿼리 수정
(WEATHER_DTM→OBS_DTM, WIND_SPD→WIND 등 존재하지 않는 컬럼 참조 제거)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- Board: 매뉴얼 CRUD + 첨부파일 API (012_board_ext.sql)
- HNS: 분석 CRUD 5개 API (013_hns_analysis.sql)
- Prediction: 분석/역추적/오일펜스 7개 API (014_prediction.sql)
- Aerial: 미디어/CCTV/위성 6개 API + PostGIS (015_aerial.sql)
- Rescue: 구난 작전/시나리오 3개 API + JSONB (016_rescue.sql)
- backtrackMockData.ts 삭제
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- PostGIS GEOMETRY 컬럼 추가 (010_postgis_geom.sql)
- ASSET_ORG.GEOM (84건), ACDNT.LOC_GEOM (12건) + GIST 인덱스
- SCAT 테이블 생성 + 시드 (011_scat.sql)
- CST_SRVY_ZONE 28건, CST_SECT 1,092건, 상세 21건
- GEOMETRY 컬럼 + GIST 공간 인덱스
- 백엔드 API: GET /api/scat/zones, /sections, /sections/:sn
- 프론트엔드: Mock 데이터 완전 제거, API 호출로 전환
- 에러 상태 UI, USE_YN 논리삭제 조건 적용
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- 기상 API URL http:// → https:// 변경 (KHOA, data.go.kr)
- deploy.yml에 VITE_DATA_GO_KR_API_KEY, VITE_WEATHER_API_KEY 환경변수 추가
- Gitea Actions Secrets에 DATA_GO_KR_API_KEY, AIS_API_KEY 등록 완료
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- DB: ACDNT, SPIL_DATA, PRED_EXEC, ACDNT_WEATHER, ACDNT_MEDIA 5개 테이블 생성
- 시드: 사고 12건, 유출정보 12건, 예측실행 18건, 기상 6건, 미디어 6건
- 백엔드: incidentsService + incidentsRouter (사고 목록/상세/예측/기상/미디어 5개 API)
- 프론트: IncidentsView, IncidentTable, IncidentsLeftPanel, MediaModal mock → API 전환
- mockIncidents, WEATHER_DATA, MEDIA_DATA 3개 mock 완전 제거
- SECTION_DATA, MOCK_SENSITIVE, mockVessels는 별도 도메인으로 유지
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- DB 스키마: ASSET_ORG, ASSET_EQUIP, ASSET_CONTACT, ASSET_UPLOAD_LOG 4개 테이블
- 초기 데이터: 84개 기관, 469개 장비, 86개 담당자 시드
- 백엔드: assetsService + assetsRouter (기관 목록/상세/업로드이력 3개 API)
- 프론트: AssetManagement, AssetMap, AssetUpload mock → API 호출 전환
- ShipInsurance: 외부 API 의존 데모 데이터 컴포넌트 내부 상수로 이동
- assetMockData.ts 의존성 완전 제거
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- DB 마이그레이션 007_reports.sql: 7개 테이블 (REPORT_TMPL, REPORT_TMPL_SECT,
REPORT_ANALYSIS_CTGR, REPORT_CTGR_SECT, REPORT, REPORT_SECT_DATA 등)
+ 초기 데이터 (5개 템플릿, 3개 카테고리, 섹션 정의)
- 백엔드 reportsService.ts: 템플릿/카테고리 조회, 보고서 CRUD, 섹션 UPSERT
- 백엔드 reportsRouter.ts: GET/POST only 패턴 (보안취약점 가이드 준수)
- GET /api/reports, GET /api/reports/:sn (조회)
- POST /api/reports (생성), POST /:sn/update (수정), POST /:sn/delete (삭제)
- POST /:sn/sections/:sectCd (개별 섹션 수정)
- 프론트 reportsApi.ts: API 호출 + OilSpillReportData ↔ API 변환 + 캐싱
- 프론트 4개 컴포넌트 localStorage → API 전환:
ReportsView, OilSpillReportTemplate, TemplateFormEditor, ReportGenerator
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- BoardView.tsx: initialPosts mock 제거, fetchBoardPosts API로 전환
- 서브탭별 카테고리 필터링 (NOTICE/DATA/QNA)
- 실제 페이지네이션 (totalCount 기반)
- hasPermission 기반 글쓰기 버튼 조건부 노출
- BoardWriteForm.tsx: createBoardPost/updateBoardPost API 직접 호출
- 카테고리 코드 DB 규격 (NOTICE/DATA/QNA) 사용
- 작성자 입력 필드 제거 (JWT 인증 사용자 자동 설정)
- BoardDetailView.tsx: fetchBoardPost API로 상세 조회
- 본인 게시글만 수정/삭제 버튼 노출 (authorId 비교)
- 댓글 mock 제거, 향후 구현 예정 안내 표시
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- ../../../data/layerData → @common/data/layerData
- ../../../data/layerDatabase → @common/services/layerService
- MR#23 파일 이동 후 서브컴포넌트에 반영 누락된 import 경로 수정
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- wing + wing_auth DB를 wing 단일 DB로 통합 (wing/auth 스키마 분리)
- wingPool 단일 Pool + search_path 설정, authPool 하위 호환 유지
- 게시판 BOARD_POST DDL + 초기 데이터 10건 마이그레이션
- boardService/boardRouter CRUD 구현 (페이징, 검색, 소유자 검증, 논리삭제)
- requirePermission 카테고리별 서브리소스 동적 적용 (board:notice, board:qna 등)
- 프론트엔드 boardApi 서비스 + BoardListTable mock→API 전환
- CRUD-API-GUIDE (범용 가이드 + 게시판 튜토리얼) 문서 작성
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- CLAUDE.md: 프로젝트 구조 (common/, tabs/, path alias), DB 스택, 지도 라이브러리
- README.md: 프로젝트 구조 트리, 기술 스택 테이블 (OpenLayers·SQLite 제거)
- docs/README.md: 기술 스택, 프로젝트 구조 트리
- docs/MENU-TAB-GUIDE.md: 새 탭 추가 경로 (tabs/ + @common/ alias)
- App.tsx: audit/log sendBeacon URL 수정 (Phase 4 버그 수정 포함)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- HNS_SUBSTANCE 테이블 마이그레이션 SQL 추가 (002_hns_substance.sql)
- HNS 검색/상세 API 구현 (hnsRouter, hnsService)
- HNS 시드 스크립트 추가 (seedHns.ts, 20종 물질 데이터)
- 프론트엔드 HNSSubstanceView: 정적 HNS_SEARCH_DB → API 호출 전환
- HNSSearchSubstance 타입 common/types/hns.ts로 분리
- Mock 데이터 이동: data/ → common/mock/ (vesselMockData, backtrackMockData)
- layerDatabase.ts → common/services/layerService.ts 이동
- layerData.ts → common/data/layerData.ts 이동
- scat/index.ts 누락 수정 + .gitignore scat 규칙 수정
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- 11개 탭 디렉토리 생성: tabs/{prediction,hns,rescue,weather,incidents,aerial,board,reports,assets,scat,admin}/
- 51개 컴포넌트를 역할 기반(views/, analysis/, layout/) → 탭 기반(tabs/) 구조로 이동
- weather 탭에 전용 hooks/, services/ 포함
- incidents 탭에 전용 services/ 포함
- 공통 지도 컴포넌트(MapView, BacktrackReplay)를 common/components/map/으로 이동
- 각 탭에 index.ts 생성하여 View 컴포넌트 re-export
- App.tsx import를 @tabs/ alias 사용으로 변경
- 전체 import 경로 수정 (탭 내부 상대경로, 외부 @common/ alias)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
- OpenLayers(ol) 패키지 제거 (미사용, import 0건)
- common/ 디렉토리 생성: components, hooks, services, store, types, utils
- 17개 공통 파일을 common/으로 이동 (git mv, blame 이력 보존)
- MainTab 타입을 App.tsx에서 common/types/navigation.ts로 분리
- tsconfig path alias (@common/*, @tabs/*) + vite resolve.alias 설정
- 42개 import 경로를 @common/ alias 또는 상대경로로 수정
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
