Compare commits
No commits in common. "main" and "feature/admin-deidentify" have entirely different histories.
main
...
feature/ad
@ -5,30 +5,7 @@
|
||||
},
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"Bash(*)",
|
||||
"Bash(npm run *)",
|
||||
"Bash(npm install *)",
|
||||
"Bash(npm test *)",
|
||||
"Bash(npx *)",
|
||||
"Bash(node *)",
|
||||
"Bash(git status)",
|
||||
"Bash(git diff *)",
|
||||
"Bash(git log *)",
|
||||
"Bash(git branch *)",
|
||||
"Bash(git checkout *)",
|
||||
"Bash(git add *)",
|
||||
"Bash(git commit *)",
|
||||
"Bash(git pull *)",
|
||||
"Bash(git fetch *)",
|
||||
"Bash(git merge *)",
|
||||
"Bash(git stash *)",
|
||||
"Bash(git remote *)",
|
||||
"Bash(git config *)",
|
||||
"Bash(git rev-parse *)",
|
||||
"Bash(git show *)",
|
||||
"Bash(git tag *)",
|
||||
"Bash(curl -s *)",
|
||||
"Bash(fnm *)"
|
||||
"Bash(*)"
|
||||
],
|
||||
"deny": [
|
||||
"Bash(git push --force*)",
|
||||
@ -84,8 +61,5 @@
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"enabledPlugins": {
|
||||
"frontend-design@claude-plugins-official": true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"applied_global_version": "1.6.1",
|
||||
"applied_date": "2026-04-17",
|
||||
"applied_date": "2026-03-31",
|
||||
"project_type": "react-ts",
|
||||
"gitea_url": "https://gitea.gc-si.dev",
|
||||
"custom_pre_commit": true
|
||||
|
||||
@ -3,7 +3,6 @@
|
||||
# commit-msg hook
|
||||
# Conventional Commits 형식 검증 (한/영 혼용 지원)
|
||||
#==============================================================================
|
||||
export LC_ALL=en_US.UTF-8 2>/dev/null || export LC_ALL=C.UTF-8 2>/dev/null || true
|
||||
|
||||
COMMIT_MSG_FILE="$1"
|
||||
COMMIT_MSG=$(cat "$COMMIT_MSG_FILE")
|
||||
|
||||
@ -1,17 +0,0 @@
|
||||
# Records run_in_terminal and appmod-* tool calls as JSONL for the extension to process.
|
||||
|
||||
$raw = [Console]::In.ReadToEnd()
|
||||
|
||||
if ($raw -notmatch '"tool_name"\s*:\s*"([^"]+)"') { exit 0 }
|
||||
$toolName = $Matches[1]
|
||||
|
||||
if ($toolName -ne 'run_in_terminal' -and $toolName -notlike 'appmod-*') { exit 0 }
|
||||
|
||||
if ($raw -notmatch '"session_id"\s*:\s*"([^"]+)"') { exit 0 }
|
||||
$sessionId = $Matches[1]
|
||||
|
||||
$hooksDir = '.github\java-upgrade\hooks'
|
||||
if (-not (Test-Path $hooksDir)) { New-Item -ItemType Directory -Path $hooksDir -Force | Out-Null }
|
||||
|
||||
$line = ($raw -replace '[\r\n]+', ' ').Trim() + "`n"
|
||||
[System.IO.File]::AppendAllText("$hooksDir\$sessionId.json", $line, [System.Text.UTF8Encoding]::new($false))
|
||||
@ -1,27 +0,0 @@
|
||||
#!/usr/bin/env bash
|
||||
# Records run_in_terminal and appmod-* tool calls as JSONL for the extension to process.
|
||||
|
||||
INPUT=$(cat)
|
||||
|
||||
TOOL_NAME="${INPUT#*\"tool_name\":\"}"
|
||||
TOOL_NAME="${TOOL_NAME%%\"*}"
|
||||
|
||||
case "$TOOL_NAME" in
|
||||
run_in_terminal|appmod-*) ;;
|
||||
*) exit 0 ;;
|
||||
esac
|
||||
|
||||
case "$INPUT" in
|
||||
*'"session_id":"'*) ;;
|
||||
*) exit 0 ;;
|
||||
esac
|
||||
|
||||
SESSION_ID="${INPUT#*\"session_id\":\"}"
|
||||
SESSION_ID="${SESSION_ID%%\"*}"
|
||||
[ -z "$SESSION_ID" ] && exit 0
|
||||
|
||||
HOOKS_DIR=".github/java-upgrade/hooks"
|
||||
mkdir -p "$HOOKS_DIR"
|
||||
|
||||
LINE=$(printf '%s' "$INPUT" | tr -d '\r\n')
|
||||
printf '%s\n' "$LINE" >> "$HOOKS_DIR/${SESSION_ID}.json"
|
||||
8
.gitignore
vendored
8
.gitignore
vendored
@ -79,9 +79,6 @@ prediction/image/**/*.pth
|
||||
frontend/public/hns-manual/pages/
|
||||
frontend/public/hns-manual/images/
|
||||
|
||||
# HNS import pipeline outputs (local, 1회성 생성물)
|
||||
backend/scripts/hns-import/out/
|
||||
|
||||
# Claude Code (team workflow tracked, override global gitignore)
|
||||
!.claude/
|
||||
.claude/settings.local.json
|
||||
@ -105,7 +102,4 @@ backend/scripts/hns-import/out/
|
||||
|
||||
|
||||
# mcp
|
||||
.mcp.json
|
||||
|
||||
# python
|
||||
.venv
|
||||
.mcp.json
|
||||
25
CLAUDE.md
25
CLAUDE.md
@ -54,7 +54,7 @@ wing/
|
||||
│ │ ├── types/ backtrack, boomLine, hns, navigation
|
||||
│ │ ├── utils/ coordinates, geo, sanitize, cn.ts
|
||||
│ │ └── data/ layerData.ts (UI 레이어 트리)
|
||||
│ └── components/ 탭 단위 패키지 (@components/ alias)
|
||||
│ └── tabs/ 탭 단위 패키지 (@tabs/ alias)
|
||||
│ ├── prediction/ 확산 예측 (OilSpillView, 역추적, 오일붐)
|
||||
│ ├── hns/ HNS 분석 (시나리오, 물질 DB, 재계산)
|
||||
│ ├── rescue/ 구조 시나리오
|
||||
@ -96,7 +96,7 @@ wing/
|
||||
### Path Alias
|
||||
|
||||
- `@common/*` -> `src/common/*` (공통 모듈)
|
||||
- `@components/*` -> `src/components/*` (탭 패키지)
|
||||
- `@tabs/*` -> `src/tabs/*` (탭 패키지)
|
||||
|
||||
## 팀 컨벤션
|
||||
|
||||
@ -107,8 +107,6 @@ wing/
|
||||
- `naming.md` -- 네이밍 규칙
|
||||
- `testing.md` -- 테스트 규칙
|
||||
- `subagent-policy.md` -- 서브에이전트 활용 정책
|
||||
- `design-system.md` -- AI 에이전트 UI 디자인 시스템 규칙 (영문, 실사용)
|
||||
- `design-system-ko.md` -- 디자인 시스템 규칙 (한국어 참고용)
|
||||
|
||||
## 개발 문서 (docs/)
|
||||
|
||||
@ -127,6 +125,25 @@ wing/
|
||||
- API 인터페이스 변경 시 `memory/api-types.md` 갱신
|
||||
- 개별 탭 개발자는 공통 가이드를 참조하여 연동 구현
|
||||
|
||||
## 진행 중 작업 (완료 후 삭제)
|
||||
|
||||
### 디자인 시스템 폰트+색상 통일 작업
|
||||
|
||||
compact 후 반드시 `memory/design-system-work.md`를 읽고 작업 상태(완료/미완료 컴포넌트)를 확인할 것.
|
||||
|
||||
**색상 규칙:**
|
||||
- 하드코딩 색상(`#ef4444`, `#a855f7` 등) → CSS 변수 전환
|
||||
- `rgba(59,130,246,...)` 등 비-accent 계열 → `rgba(6,182,212,...)` (accent cyan)
|
||||
- 시맨틱 컬러(`color-accent`, `color-info`, `color-caution` 등)는 다양하게 사용 가능하되, 강조 색상은 **최대 2가지**로 제한
|
||||
- `linear-gradient` → 단색으로 단순화
|
||||
- 장식용 `border-top`, `border-left` → 제거 여부를 유저에게 확인 후 진행
|
||||
|
||||
**폰트 규칙:**
|
||||
- 하드코딩 `fontSize`/`fontWeight` → Tailwind 토큰 (`text-title-2`, `text-caption` 등)
|
||||
- `fontFamily: monospace` → `var(--font-mono)`
|
||||
- `fontFamily: sans-serif` / `'Noto Sans KR'` → `var(--font-korean)`
|
||||
- 인라인 `style={{ fontSize, padding }}` → Tailwind 클래스 전환 (가능한 범위)
|
||||
|
||||
## 환경 설정
|
||||
|
||||
- Node.js 20 (`.node-version`, fnm 사용)
|
||||
|
||||
@ -77,7 +77,7 @@ cd backend && npm run db:seed # DB 초기 데이터
|
||||
|
||||
## 프로젝트 구조
|
||||
|
||||
Path Alias: `@common/*` -> `src/common/*`, `@components/*` -> `src/components/*`
|
||||
Path Alias: `@common/*` -> `src/common/*`, `@tabs/*` -> `src/tabs/*`
|
||||
|
||||
```
|
||||
wing/
|
||||
@ -95,7 +95,7 @@ wing/
|
||||
│ │ ├── types/ backtrack, boomLine, hns, navigation
|
||||
│ │ ├── utils/ coordinates, geo, sanitize, cn.ts
|
||||
│ │ └── data/ layerData.ts (UI 레이어 트리)
|
||||
│ └── tabs/ 탭 단위 패키지 (@components/ alias)
|
||||
│ └── tabs/ 탭 단위 패키지 (@tabs/ alias)
|
||||
│ ├── prediction/ 확산 예측 (OilSpillView, 역추적, 오일붐)
|
||||
│ ├── hns/ HNS 분석 (시나리오, 물질 DB, 재계산)
|
||||
│ ├── rescue/ 구조 시나리오
|
||||
|
||||
53
backend/package-lock.json
generated
53
backend/package-lock.json
generated
@ -22,7 +22,6 @@
|
||||
"pg": "^8.19.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@anthropic-ai/sdk": "^0.89.0",
|
||||
"@types/bcrypt": "^6.0.0",
|
||||
"@types/cookie-parser": "^1.4.10",
|
||||
"@types/cors": "^2.8.17",
|
||||
@ -35,37 +34,6 @@
|
||||
"typescript": "^5.7.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@anthropic-ai/sdk": {
|
||||
"version": "0.89.0",
|
||||
"resolved": "https://registry.npmjs.org/@anthropic-ai/sdk/-/sdk-0.89.0.tgz",
|
||||
"integrity": "sha512-nyGau0zex62EpU91hsHa0zod973YEoiMgzWZ9hC55WdiOLrE4AGpcg4wXI7lFqtvMLqMcLfewQU9sHgQB6psow==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"json-schema-to-ts": "^3.1.1"
|
||||
},
|
||||
"bin": {
|
||||
"anthropic-ai-sdk": "bin/cli"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"zod": "^3.25.0 || ^4.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"zod": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/runtime": {
|
||||
"version": "7.29.2",
|
||||
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
|
||||
"integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/aix-ppc64": {
|
||||
"version": "0.27.3",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.27.3.tgz",
|
||||
@ -1721,20 +1689,6 @@
|
||||
"bignumber.js": "^9.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/json-schema-to-ts": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/json-schema-to-ts/-/json-schema-to-ts-3.1.1.tgz",
|
||||
"integrity": "sha512-+DWg8jCJG2TEnpy7kOm/7/AxaYoaRbjVB4LFZLySZlWn8exGs3A4OLJR966cVvU26N7X9TWxl+Jsw7dzAqKT6g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.18.3",
|
||||
"ts-algebra": "^2.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/jsonwebtoken": {
|
||||
"version": "9.0.3",
|
||||
"resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.3.tgz",
|
||||
@ -2664,13 +2618,6 @@
|
||||
"node": ">=0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/ts-algebra": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/ts-algebra/-/ts-algebra-2.0.0.tgz",
|
||||
"integrity": "sha512-FPAhNPFMrkwz76P7cdjdmiShwMynZYN6SgOujD1urY4oNm80Ou9oMdmbR45LotcKOXoy7wSmHkRFE6Mxbrhefw==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tsx": {
|
||||
"version": "4.21.0",
|
||||
"resolved": "https://registry.npmjs.org/tsx/-/tsx-4.21.0.tgz",
|
||||
|
||||
@ -23,7 +23,6 @@
|
||||
"pg": "^8.19.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@anthropic-ai/sdk": "^0.89.0",
|
||||
"@types/bcrypt": "^6.0.0",
|
||||
"@types/cookie-parser": "^1.4.10",
|
||||
"@types/cors": "^2.8.17",
|
||||
|
||||
@ -1,140 +0,0 @@
|
||||
# HNS 물질 Import 파이프라인
|
||||
|
||||
`C:\Projects\MeterialDB\유해물질 화물적부도 검색툴.xlsm` 외부 자료를 `HNS_SUBSTANCE` DB로 변환하는 1회성 파이프라인.
|
||||
|
||||
## 파이프라인 구조
|
||||
|
||||
```
|
||||
[Excel xlsm] [PDF 물질정보집 (193종)]
|
||||
├─ (1) extract-excel.py (2b) extract-pdf.py
|
||||
│ → out/base.json → out/pdf-data.json
|
||||
└─ (2a) extract-images.py ──────────────────────────┐
|
||||
→ out/images/*.png │
|
||||
↓ │
|
||||
(3) ocr-images.ts │
|
||||
→ out/ocr.json │
|
||||
↓ ↓
|
||||
(4) merge-data.ts ←──────────────┘
|
||||
→ frontend/src/data/hnsSubstanceData.json
|
||||
↓
|
||||
(5) tsx src/db/seedHns.ts
|
||||
→ HNS_SUBSTANCE 테이블
|
||||
```
|
||||
|
||||
**병합 우선순위**: `pdf-data.json` > `base.json` > `ocr.json`
|
||||
|
||||
## 전제 조건
|
||||
|
||||
- Python 3.9+ with `openpyxl`, `PyMuPDF(fitz)`
|
||||
- Node.js 20
|
||||
- `ANTHROPIC_API_KEY` 환경변수 (Claude Vision API, OCR 실행 시에만 필요)
|
||||
- Excel 원본: `C:\Projects\MeterialDB\유해물질 화물적부도 검색툴.xlsm`
|
||||
- PDF 원본: `C:\Projects\MeterialDB\해상화학사고_대응_물질정보집.pdf`
|
||||
|
||||
## 실행 순서
|
||||
|
||||
### 1) Excel 메타 시트 파싱
|
||||
|
||||
```bash
|
||||
cd backend
|
||||
python scripts/hns-import/extract-excel.py
|
||||
```
|
||||
|
||||
- 입력: `C:\Projects\MeterialDB\유해물질 화물적부도 검색툴.xlsm`
|
||||
- 처리 시트: `화물적부도 화물코드`(1,345개), `동의어`(215개), `IBC CODE`(분류)
|
||||
- 출력: `scripts/hns-import/out/base.json`
|
||||
|
||||
### 2a) 이미지 225개 추출 (선택 — OCR 실행 시만 필요)
|
||||
|
||||
```bash
|
||||
python scripts/hns-import/extract-images.py
|
||||
```
|
||||
|
||||
- 출력: `out/images/{nameKr}.png`, `out/image-map.json`
|
||||
|
||||
### 2b) PDF 물질정보집 파싱 ★ 권장
|
||||
|
||||
```bash
|
||||
python scripts/hns-import/extract-pdf.py
|
||||
```
|
||||
|
||||
- 입력: `C:\Projects\MeterialDB\해상화학사고_대응_물질정보집.pdf`
|
||||
- 해양경찰청 발행 193종, 텍스트 직접 추출 (OCR 불필요)
|
||||
- 출력: `scripts/hns-import/out/pdf-data.json`
|
||||
|
||||
### 3) Claude Vision OCR (선택 — pdf-data.json 없을 때 보조)
|
||||
|
||||
```bash
|
||||
export ANTHROPIC_API_KEY="sk-ant-..."
|
||||
cd backend
|
||||
npx tsx scripts/hns-import/ocr-images.ts
|
||||
```
|
||||
|
||||
- 이미지 한 장당 Claude API 1회 호출, 동시 5개 병렬
|
||||
- 출력: `out/ocr.json` `{ [nameKr]: OcrResult }`
|
||||
|
||||
### 4) 최종 JSON 병합
|
||||
|
||||
```bash
|
||||
cd backend
|
||||
npx tsx scripts/hns-import/merge-data.ts
|
||||
```
|
||||
|
||||
- 입력: `out/base.json` + `out/pdf-data.json` + `out/ocr.json` (없으면 건너뜀)
|
||||
- 출력: `frontend/src/data/hnsSubstanceData.json` (전량 덮어쓰기)
|
||||
|
||||
### 5) DB 재시드
|
||||
|
||||
```bash
|
||||
cd backend
|
||||
npx tsx src/db/seedHns.ts
|
||||
```
|
||||
|
||||
- 기존 `DELETE FROM HNS_SUBSTANCE` → 새 514종 INSERT
|
||||
|
||||
## 빠른 재실행 (PDF 추출 → 병합 → 시드)
|
||||
|
||||
```bash
|
||||
cd backend
|
||||
python scripts/hns-import/extract-pdf.py && \
|
||||
npx tsx scripts/hns-import/merge-data.ts && \
|
||||
npx tsx src/db/seedHns.ts
|
||||
```
|
||||
|
||||
## 현재 데이터 현황 (2024-04 기준)
|
||||
|
||||
| 항목 | 이전 (OCR) | 현재 (PDF) |
|
||||
|------|-----------|-----------|
|
||||
| 총 물질 수 | 514종 | 514종 |
|
||||
| 상세정보 보유 (인화점 있음) | 152종 | 195종 |
|
||||
| NFPA 코드 있음 | ~150종 | 201종 |
|
||||
| CAS 번호 있음 | ~380종 | 504종 |
|
||||
| 해양거동 있음 | ~0종 | 206종 |
|
||||
| 한국어 유사명 있음 | ~200종 | 449종 |
|
||||
|
||||
## 재실행 안내
|
||||
|
||||
- `out/` 디렉토리는 `.gitignore` 처리되어 커밋되지 않음
|
||||
- OCR 결과는 비결정적이므로 재실행 시 약간 달라질 수 있음
|
||||
- PDF 추출은 결정적(동일 입력 → 동일 출력)이므로 재실행 안전
|
||||
|
||||
## 알려진 이슈
|
||||
|
||||
### 1) PDF 매칭 실패 35종
|
||||
|
||||
PDF 국문명과 base.json 국문명이 달라 매칭되지 않는 항목이 35개 존재.
|
||||
`out/pdf-unmatched.json`에서 목록 확인 가능. 해당 항목은 OCR 데이터로 보조.
|
||||
|
||||
**원인:**
|
||||
- 영문제품명이 국문명으로 등록된 경우 (예: `DER 383 Epoxy resin` ↔ `디이알 383`)
|
||||
- 동일 CAS 충돌 (예: `컨덴세이트`와 `나프타`가 같은 CAS)
|
||||
- 표기 차이 (예: `아이소파-G` ↔ `아이소파 G`)
|
||||
|
||||
### 2) 2열 레이아웃 파싱 노이즈 (약 9건)
|
||||
|
||||
PDF 물질특성 블록이 2열로 구성되어 있어, 일부 항목에서 비중 값이 온도값으로 오추출될 수 있음.
|
||||
영향 범위 최소 (벤젠 등 9종, 값이 100 이상이면 의심).
|
||||
|
||||
### 3) SEBC/CAS/UN 번호 varchar 길이 초과
|
||||
|
||||
`base.json` 생성 시 Excel에서 복수 CAS/UN 번호를 줄바꿈으로 결합해 저장하여, `HNS_SUBSTANCE` 테이블의 `VARCHAR(20)` 등 제약을 초과했음. 현재는 [`seedHns.ts`](../../../backend/src/db/seedHns.ts) 의 `firstToken()` 헬퍼로 첫 토큰만 검색 컬럼에 저장하고 원본 전체는 `DATA` JSONB에 보존.
|
||||
@ -1,236 +0,0 @@
|
||||
"""Excel 메타 시트 → base.json 변환.
|
||||
|
||||
처리 시트:
|
||||
- 화물적부도 화물코드: 1,345개 기본 레코드
|
||||
- 동의어: 215개 한/영 유사명
|
||||
- IBC CODE: IMO IBC 분류
|
||||
|
||||
출력: HNSSearchSubstance 스키마(frontend/src/common/types/hns.ts)에 맞춘 JSON 배열.
|
||||
"""
|
||||
from __future__ import annotations
|
||||
|
||||
import io
|
||||
import json
|
||||
import os
|
||||
import re
|
||||
import sys
|
||||
from collections import defaultdict
|
||||
from pathlib import Path
|
||||
|
||||
import openpyxl
|
||||
|
||||
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
|
||||
|
||||
SCRIPT_DIR = Path(__file__).parent.resolve()
|
||||
OUT_DIR = SCRIPT_DIR / 'out'
|
||||
OUT_DIR.mkdir(exist_ok=True)
|
||||
|
||||
SOURCE_XLSX = Path(os.environ.get(
|
||||
'HNS_SOURCE_XLSX',
|
||||
r'C:\Projects\MeterialDB\유해물질 화물적부도 검색툴.xlsm',
|
||||
))
|
||||
|
||||
|
||||
def norm_key(s: str | None) -> str:
|
||||
if not s:
|
||||
return ''
|
||||
return re.sub(r'\s+', '', str(s)).strip().lower()
|
||||
|
||||
|
||||
def split_synonyms(raw: str | None) -> str:
|
||||
if not raw:
|
||||
return ''
|
||||
# 원본은 "·" 또는 "/" 구분, 개행 포함
|
||||
parts = re.split(r'[·/\n]+', str(raw))
|
||||
cleaned = [p.strip() for p in parts if p and p.strip()]
|
||||
return ' / '.join(cleaned)
|
||||
|
||||
|
||||
def clean_text(v) -> str:
|
||||
if v is None:
|
||||
return ''
|
||||
return str(v).strip()
|
||||
|
||||
|
||||
def main() -> None:
|
||||
print(f'[읽기] {SOURCE_XLSX}')
|
||||
if not SOURCE_XLSX.exists():
|
||||
raise SystemExit(f'소스 파일 없음: {SOURCE_XLSX}')
|
||||
|
||||
wb = openpyxl.load_workbook(SOURCE_XLSX, read_only=True, data_only=True, keep_vba=False)
|
||||
|
||||
# ────────── 화물적부도 화물코드 ──────────
|
||||
ws = wb['화물적부도 화물코드']
|
||||
rows = list(ws.iter_rows(values_only=True))
|
||||
# 헤더 row6: 연번, 약자/제품명, 영어명, 영문명 동의어, 국문명, 국문명 동의어, 주요 사용처, UN번호, CAS번호
|
||||
cargo_rows = [r for r in rows[6:] if r[0] is not None and isinstance(r[0], (int, float))]
|
||||
print(f'[화물적부도] 데이터 행 {len(cargo_rows)}개')
|
||||
|
||||
# ────────── 동의어 시트 ──────────
|
||||
ws_syn = wb['동의어']
|
||||
syn_rows = list(ws_syn.iter_rows(values_only=True))
|
||||
# 헤더 row2: 연번, 국문명, 영문명, cas, un, 한글 유사명, 영문 유사명
|
||||
syn_map: dict[str, dict] = {}
|
||||
for r in syn_rows[2:]:
|
||||
if not r or r[0] is None:
|
||||
continue
|
||||
name_kr = clean_text(r[1])
|
||||
cas = clean_text(r[3])
|
||||
if not name_kr and not cas:
|
||||
continue
|
||||
key = norm_key(name_kr) or norm_key(cas)
|
||||
syn_map[key] = {
|
||||
'synonymsKr': split_synonyms(r[5]) if len(r) > 5 else '',
|
||||
'synonymsEn': split_synonyms(r[6]) if len(r) > 6 else '',
|
||||
}
|
||||
print(f'[동의어] {len(syn_map)}개')
|
||||
|
||||
# ────────── IBC CODE 시트 ──────────
|
||||
ws_ibc = wb['IBC CODE']
|
||||
ibc_map: dict[str, dict] = {}
|
||||
for i, r in enumerate(ws_ibc.iter_rows(values_only=True)):
|
||||
if i < 2:
|
||||
continue # header 2 rows
|
||||
if not r or not r[0]:
|
||||
continue
|
||||
name_en = clean_text(r[0])
|
||||
key = norm_key(name_en)
|
||||
if not key:
|
||||
continue
|
||||
ibc_map[key] = {
|
||||
'ibcHazard': clean_text(r[2]), # 위험성 S/P
|
||||
'ibcShipType': clean_text(r[3]), # 선박형식
|
||||
'ibcTankType': clean_text(r[4]), # 탱크형식
|
||||
'ibcDetection': clean_text(r[10]) if len(r) > 10 else '', # 탐지장치
|
||||
'ibcFireFighting': clean_text(r[12]) if len(r) > 12 else '', # 화재대응
|
||||
'ibcMinRequirement': clean_text(r[14]) if len(r) > 14 else '', # 구체적운영상 요건
|
||||
}
|
||||
print(f'[IBC CODE] {len(ibc_map)}개')
|
||||
|
||||
wb.close()
|
||||
|
||||
# ────────── 통합 레코드 생성 ──────────
|
||||
# 동일 CAS/국문명 기준으로 cargoCodes 그룹화
|
||||
groups: dict[str, list] = defaultdict(list)
|
||||
for r in cargo_rows:
|
||||
_, abbr, name_en, syn_en, name_kr, syn_kr, usage, un, cas = r[:9]
|
||||
# 그룹 키: CAS 우선, 없으면 국문명
|
||||
cas_s = clean_text(cas)
|
||||
group_key = cas_s if cas_s else norm_key(name_kr)
|
||||
groups[group_key].append({
|
||||
'abbreviation': clean_text(abbr),
|
||||
'nameKr': clean_text(name_kr),
|
||||
'nameEn': clean_text(name_en),
|
||||
'synonymsKr': split_synonyms(syn_kr),
|
||||
'synonymsEn': split_synonyms(syn_en),
|
||||
'usage': clean_text(usage),
|
||||
'unNumber': clean_text(un),
|
||||
'casNumber': cas_s,
|
||||
})
|
||||
|
||||
records: list[dict] = []
|
||||
next_id = 1
|
||||
for group_key, entries in groups.items():
|
||||
# 대표 레코드: 가장 먼저 등장 (동의어 필드가 있는 걸 우선)
|
||||
primary = max(entries, key=lambda e: (bool(e['synonymsKr']), bool(e['synonymsEn']), len(e['nameKr'])))
|
||||
|
||||
name_kr_key = norm_key(primary['nameKr'])
|
||||
name_en_key = norm_key(primary['nameEn'])
|
||||
|
||||
# 동의어 병합
|
||||
syn_extra = syn_map.get(name_kr_key, {})
|
||||
synonyms_kr = ' / '.join(filter(None, [primary['synonymsKr'], syn_extra.get('synonymsKr', '')]))
|
||||
synonyms_en = ' / '.join(filter(None, [primary['synonymsEn'], syn_extra.get('synonymsEn', '')]))
|
||||
|
||||
# IBC 병합 (영문명 기준)
|
||||
ibc = ibc_map.get(name_en_key, {})
|
||||
|
||||
# cargoCodes 집계
|
||||
cargo_codes = [
|
||||
{
|
||||
'code': e['abbreviation'],
|
||||
'name': e['nameEn'] or e['nameKr'],
|
||||
'company': '국제공통',
|
||||
'source': '적부도',
|
||||
}
|
||||
for e in entries
|
||||
if e['abbreviation']
|
||||
]
|
||||
|
||||
record = {
|
||||
'id': next_id,
|
||||
'abbreviation': primary['abbreviation'],
|
||||
'nameKr': primary['nameKr'],
|
||||
'nameEn': primary['nameEn'],
|
||||
'synonymsKr': synonyms_kr,
|
||||
'synonymsEn': synonyms_en,
|
||||
'unNumber': primary['unNumber'],
|
||||
'casNumber': primary['casNumber'],
|
||||
'transportMethod': '',
|
||||
'sebc': '',
|
||||
# 물리·화학 (OCR 단계에서 채움)
|
||||
'usage': primary['usage'],
|
||||
'state': '',
|
||||
'color': '',
|
||||
'odor': '',
|
||||
'flashPoint': '',
|
||||
'autoIgnition': '',
|
||||
'boilingPoint': '',
|
||||
'density': '',
|
||||
'solubility': '',
|
||||
'vaporPressure': '',
|
||||
'vaporDensity': '',
|
||||
'explosionRange': '',
|
||||
# 위험도
|
||||
'nfpa': {'health': 0, 'fire': 0, 'reactivity': 0, 'special': ''},
|
||||
'hazardClass': '',
|
||||
'ergNumber': '',
|
||||
'idlh': '',
|
||||
'aegl2': '',
|
||||
'erpg2': '',
|
||||
# 방제
|
||||
'responseDistanceFire': '',
|
||||
'responseDistanceSpillDay': '',
|
||||
'responseDistanceSpillNight': '',
|
||||
'marineResponse': '',
|
||||
'ppeClose': '',
|
||||
'ppeFar': '',
|
||||
# MSDS
|
||||
'msds': {
|
||||
'hazard': '',
|
||||
'firstAid': '',
|
||||
'fireFighting': '',
|
||||
'spillResponse': '',
|
||||
'exposure': '',
|
||||
'regulation': '',
|
||||
},
|
||||
# IBC
|
||||
'ibcHazard': ibc.get('ibcHazard', ''),
|
||||
'ibcShipType': ibc.get('ibcShipType', ''),
|
||||
'ibcTankType': ibc.get('ibcTankType', ''),
|
||||
'ibcDetection': ibc.get('ibcDetection', ''),
|
||||
'ibcFireFighting': ibc.get('ibcFireFighting', ''),
|
||||
'ibcMinRequirement': ibc.get('ibcMinRequirement', ''),
|
||||
# EmS (OCR에서 채움)
|
||||
'emsCode': '',
|
||||
'emsFire': '',
|
||||
'emsSpill': '',
|
||||
'emsFirstAid': '',
|
||||
# cargoCodes / portFrequency
|
||||
'cargoCodes': cargo_codes,
|
||||
'portFrequency': [],
|
||||
}
|
||||
records.append(record)
|
||||
next_id += 1
|
||||
|
||||
print(f'[통합] 그룹화 결과 {len(records)}종 (화물적부도 {len(cargo_rows)}행 기준)')
|
||||
|
||||
# 저장
|
||||
out_path = OUT_DIR / 'base.json'
|
||||
with open(out_path, 'w', encoding='utf-8') as f:
|
||||
json.dump(records, f, ensure_ascii=False, indent=2)
|
||||
print(f'[완료] {out_path} ({out_path.stat().st_size / 1024:.0f} KB)')
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
main()
|
||||
@ -1,170 +0,0 @@
|
||||
"""물질별 시트에서 메인 카드 이미지(100KB+) 추출.
|
||||
|
||||
엑셀 워크시트 → drawing → image 관계 체인을 추적해
|
||||
각 물질 시트의 핵심 이미지만 out/images/{nameKr}.png 로 저장.
|
||||
|
||||
동시에 out/image-map.json 생성 (파일명 ↔ 시트명/국문명 매핑).
|
||||
"""
|
||||
from __future__ import annotations
|
||||
|
||||
import io
|
||||
import json
|
||||
import os
|
||||
import re
|
||||
import sys
|
||||
import zipfile
|
||||
from pathlib import Path
|
||||
from xml.etree import ElementTree as ET
|
||||
|
||||
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
|
||||
|
||||
SCRIPT_DIR = Path(__file__).parent.resolve()
|
||||
OUT_DIR = SCRIPT_DIR / 'out'
|
||||
IMG_DIR = OUT_DIR / 'images'
|
||||
IMG_DIR.mkdir(parents=True, exist_ok=True)
|
||||
|
||||
SOURCE_XLSX = Path(os.environ.get(
|
||||
'HNS_SOURCE_XLSX',
|
||||
r'C:\Projects\MeterialDB\유해물질 화물적부도 검색툴.xlsm',
|
||||
))
|
||||
|
||||
NS = {
|
||||
'm': 'http://schemas.openxmlformats.org/spreadsheetml/2006/main',
|
||||
'r': 'http://schemas.openxmlformats.org/officeDocument/2006/relationships',
|
||||
'pr': 'http://schemas.openxmlformats.org/package/2006/relationships',
|
||||
}
|
||||
|
||||
# 메타 시트(데이터 시트)는 스킵
|
||||
SKIP_SHEETS = {
|
||||
'화물적부도 화물코드',
|
||||
'항구별 코드',
|
||||
'동의어',
|
||||
'IBC CODE',
|
||||
'경계선',
|
||||
}
|
||||
# 지침서 번호 시트(115~171) 패턴: 순수 숫자
|
||||
SKIP_PATTERN = re.compile(r'^\d{3}$')
|
||||
|
||||
# 최소 이미지 크기 (주요 카드만 대상, 작은 아이콘 제외)
|
||||
MIN_IMAGE_SIZE = 50_000 # 50 KB
|
||||
|
||||
|
||||
def safe_filename(name: str) -> str:
|
||||
name = name.strip().rstrip(',').strip()
|
||||
name = re.sub(r'[<>:"/\\|?*]', '_', name)
|
||||
return name
|
||||
|
||||
|
||||
def norm_path(p: str) -> str:
|
||||
return os.path.normpath(p).replace(os.sep, '/')
|
||||
|
||||
|
||||
def main() -> None:
|
||||
print(f'[읽기] {SOURCE_XLSX}')
|
||||
if not SOURCE_XLSX.exists():
|
||||
raise SystemExit(f'소스 파일 없음: {SOURCE_XLSX}')
|
||||
|
||||
image_map: dict[str, dict] = {}
|
||||
saved = 0
|
||||
skipped = 0
|
||||
missing = 0
|
||||
|
||||
with zipfile.ZipFile(SOURCE_XLSX) as z:
|
||||
# 1) workbook.xml → sheet 목록
|
||||
with z.open('xl/workbook.xml') as f:
|
||||
wb_root = ET.parse(f).getroot()
|
||||
sheets = []
|
||||
for s in wb_root.findall('m:sheets/m:sheet', NS):
|
||||
sheets.append({
|
||||
'name': s.get('name'),
|
||||
'rid': s.get('{http://schemas.openxmlformats.org/officeDocument/2006/relationships}id'),
|
||||
})
|
||||
with z.open('xl/_rels/workbook.xml.rels') as f:
|
||||
rels_root = ET.parse(f).getroot()
|
||||
rid_target = {r.get('Id'): r.get('Target') for r in rels_root.findall('pr:Relationship', NS)}
|
||||
for s in sheets:
|
||||
s['target'] = rid_target.get(s['rid'])
|
||||
|
||||
print(f'[시트] 총 {len(sheets)}개')
|
||||
|
||||
for s in sheets:
|
||||
name = s['name']
|
||||
if name in SKIP_SHEETS or SKIP_PATTERN.match(name or ''):
|
||||
skipped += 1
|
||||
continue
|
||||
|
||||
sheet_file = 'xl/' + s['target']
|
||||
rels_file = os.path.dirname(sheet_file) + '/_rels/' + os.path.basename(sheet_file) + '.rels'
|
||||
try:
|
||||
with z.open(rels_file) as f:
|
||||
srels = ET.parse(f).getroot()
|
||||
except KeyError:
|
||||
missing += 1
|
||||
continue
|
||||
|
||||
# 시트 → drawing
|
||||
drawing_rel = None
|
||||
for r in srels.findall('pr:Relationship', NS):
|
||||
t = r.get('Target') or ''
|
||||
if 'drawing' in (r.get('Type') or '').lower() and 'drawings/' in t:
|
||||
drawing_rel = t
|
||||
break
|
||||
if not drawing_rel:
|
||||
missing += 1
|
||||
continue
|
||||
|
||||
drawing_path = norm_path(os.path.join(os.path.dirname(sheet_file), drawing_rel))
|
||||
drawing_rels_path = os.path.dirname(drawing_path) + '/_rels/' + os.path.basename(drawing_path) + '.rels'
|
||||
try:
|
||||
with z.open(drawing_rels_path) as f:
|
||||
drels = ET.parse(f).getroot()
|
||||
except KeyError:
|
||||
missing += 1
|
||||
continue
|
||||
|
||||
# drawing → images
|
||||
image_paths: list[str] = []
|
||||
for r in drels.findall('pr:Relationship', NS):
|
||||
t = r.get('Target') or ''
|
||||
if 'image' in t.lower():
|
||||
img_path = norm_path(os.path.join(os.path.dirname(drawing_path), t))
|
||||
image_paths.append(img_path)
|
||||
if not image_paths:
|
||||
missing += 1
|
||||
continue
|
||||
|
||||
# 가장 큰 이미지 선택 (실제 카드 이미지는 100KB+, 아이콘은 수 KB)
|
||||
sized = [(z.getinfo(p).file_size, p) for p in image_paths]
|
||||
sized.sort(reverse=True)
|
||||
largest_size, largest_path = sized[0]
|
||||
if largest_size < MIN_IMAGE_SIZE:
|
||||
missing += 1
|
||||
continue
|
||||
|
||||
# 저장
|
||||
safe = safe_filename(name)
|
||||
ext = os.path.splitext(largest_path)[1].lower() or '.png'
|
||||
out_name = f'{safe}{ext}'
|
||||
out_path = IMG_DIR / out_name
|
||||
with z.open(largest_path) as fin, open(out_path, 'wb') as fout:
|
||||
fout.write(fin.read())
|
||||
image_map[out_name] = {
|
||||
'sheetName': name,
|
||||
'nameKr': safe,
|
||||
'source': largest_path,
|
||||
'sizeBytes': largest_size,
|
||||
}
|
||||
saved += 1
|
||||
if saved % 25 == 0:
|
||||
print(f' {saved}개 저장 완료')
|
||||
|
||||
print(f'\n[결과] 저장 {saved} / 스킵(메타) {skipped} / 이미지없음 {missing}')
|
||||
|
||||
map_path = OUT_DIR / 'image-map.json'
|
||||
with open(map_path, 'w', encoding='utf-8') as f:
|
||||
json.dump(image_map, f, ensure_ascii=False, indent=2)
|
||||
print(f'[완료] 매핑 파일: {map_path}')
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
main()
|
||||
@ -1,707 +0,0 @@
|
||||
"""PDF 물질정보집 → pdf-data.json 변환.
|
||||
|
||||
원본: C:\\Projects\\MeterialDB\\해상화학사고_대응_물질정보집.pdf
|
||||
해양경찰청 발행 193종 물질 정보
|
||||
|
||||
PDF 구조:
|
||||
- 페이지 1-21: 표지/머리말/목차
|
||||
- 페이지 22-407: 193종 × 2페이지 물질 카드
|
||||
- 요약 카드 (홀수 순서): 인화점·발화점·증기압·증기밀도·폭발범위·NFPA·해양거동 등
|
||||
- 상세 카드 (짝수 순서): 유사명·CAS·UN·GHS분류·물질특성·인체유해성·응급조치
|
||||
- 물질 NO(1-193) → 0-인덱스 시작 페이지: 21 + (NO-1) * 2
|
||||
|
||||
출력: out/pdf-data.json
|
||||
{ [nameKr]: OcrResult } — merge-data.ts 와 동일한 키 구조
|
||||
"""
|
||||
|
||||
from __future__ import annotations
|
||||
|
||||
import io
|
||||
import json
|
||||
import os
|
||||
import re
|
||||
import sys
|
||||
from pathlib import Path
|
||||
|
||||
import fitz # PyMuPDF
|
||||
|
||||
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
|
||||
|
||||
SCRIPT_DIR = Path(__file__).parent.resolve()
|
||||
OUT_DIR = SCRIPT_DIR / 'out'
|
||||
OUT_DIR.mkdir(exist_ok=True)
|
||||
|
||||
PDF_PATH = Path(os.environ.get(
|
||||
'HNS_PDF_PATH',
|
||||
r'C:\Projects\MeterialDB\해상화학사고_대응_물질정보집.pdf',
|
||||
))
|
||||
|
||||
# 전각 문자 → 반각 변환 테이블
|
||||
_FULLWIDTH = str.maketrans(
|
||||
'（）ｔＣ°℃ ，',
|
||||
'()tC℃℃ ,',
|
||||
)
|
||||
|
||||
|
||||
def clean(s: str) -> str:
|
||||
"""텍스트 정리."""
|
||||
if not s:
|
||||
return ''
|
||||
s = s.translate(_FULLWIDTH)
|
||||
# 온도 기호 통일: 仁/七/부/사 → ℃ (OCR 오인식)
|
||||
s = re.sub(r'(?<=[0-9])\s*[仁七부사 ](?=\s|$|이|이하)', '℃', s)
|
||||
s = re.sub(r'(?<=[0-9])\s*[tT](?=\s|$|이|이하)', '℃', s)
|
||||
s = re.sub(r'\s+', ' ', s)
|
||||
return s.strip()
|
||||
|
||||
|
||||
def norm_key(s: str) -> str:
|
||||
"""정규화 키: 공백/특수문자 제거 + 소문자."""
|
||||
if not s:
|
||||
return ''
|
||||
return re.sub(r'[\s,./\-_()\[\]··]+', '', s).lower()
|
||||
|
||||
|
||||
def normalize_cas(raw: str) -> str:
|
||||
"""CAS 번호 정규화: OCR 노이즈 제거 후 X-XX-X 형식 반환."""
|
||||
if not raw:
|
||||
return ''
|
||||
# 혼합물
|
||||
if '혼합물' in raw:
|
||||
return ''
|
||||
# 특수 대시 → -
|
||||
s = raw.replace('—', '-').replace('－', '-').replace('–', '-')
|
||||
# OCR 오인식: 이,이, 공백 등 → 0
|
||||
s = re.sub(r'[이oO０]', '0', s)
|
||||
s = re.sub(r'["\'\s ]', '', s) # 잡자 제거
|
||||
# CAS 포맷 검증 후 반환
|
||||
m = re.match(r'^(\d{2,7}-\d{2}-\d)$', s)
|
||||
if m:
|
||||
return m.group(1).lstrip('0') or '0' # 앞자리 0 제거
|
||||
# 완전히 일치 안 하면 숫자+대시만 남기고 검증
|
||||
s2 = re.sub(r'[^0-9\-]', '', s)
|
||||
m2 = re.match(r'^(\d{2,7}-\d{2}-\d)$', s2)
|
||||
if m2:
|
||||
return m2.group(1).lstrip('0') or '0'
|
||||
return ''
|
||||
|
||||
|
||||
def find_cas_in_text(text: str) -> str:
|
||||
"""텍스트에서 CAS 번호 패턴 검색."""
|
||||
# 표준 CAS 패턴: 숫자-숫자2자리-숫자1자리
|
||||
candidates = re.findall(r'\b(\d{1,7}[\-—－\s]{1,2}\d{2}[\-—－\s]{1,2}\d)\b', text)
|
||||
for c in candidates:
|
||||
cas = normalize_cas(c)
|
||||
if cas and len(cas) >= 5:
|
||||
return cas
|
||||
return ''
|
||||
|
||||
|
||||
def parse_nfpa(text: str) -> dict | None:
|
||||
"""NFPA 코드 파싱: '건강 : 3 화재 : 0 반응 : 1' 형태."""
|
||||
m = re.search(r'건강\s*[：:]\s*(\d)\s*화재\s*[：:]\s*(\d)\s*반응\s*[：:]\s*(\d)', text)
|
||||
if m:
|
||||
return {
|
||||
'health': int(m.group(1)),
|
||||
'fire': int(m.group(2)),
|
||||
'reactivity': int(m.group(3)),
|
||||
'special': '',
|
||||
}
|
||||
# 대안 패턴: 줄바꿈 포함
|
||||
m2 = re.search(r'건강\s*[：:]\s*(\d).*?화재\s*[：:]\s*(\d).*?반응\s*[：:]\s*(\d)', text, re.DOTALL)
|
||||
if m2:
|
||||
return {
|
||||
'health': int(m2.group(1)),
|
||||
'fire': int(m2.group(2)),
|
||||
'reactivity': int(m2.group(3)),
|
||||
'special': '',
|
||||
}
|
||||
return None
|
||||
|
||||
|
||||
def extract_field_after(text: str, label: str, max_chars: int = 80) -> str:
|
||||
"""레이블 직후 값 추출 (단순 패턴)."""
|
||||
idx = text.find(label)
|
||||
if idx < 0:
|
||||
return ''
|
||||
snippet = text[idx + len(label): idx + len(label) + max_chars + 50]
|
||||
# 첫 비공백 줄 추출
|
||||
lines = snippet.split('\n')
|
||||
for line in lines:
|
||||
v = clean(line)
|
||||
if v and v not in (':', '：', ''):
|
||||
return v[:max_chars]
|
||||
return ''
|
||||
|
||||
|
||||
def parse_summary_card(text: str, index_entry: dict) -> dict:
|
||||
"""요약 카드(첫 번째 페이지) 파싱."""
|
||||
result: dict = {}
|
||||
|
||||
# 인화점
|
||||
m = re.search(r'인화점\s*\n([^\n화발증폭위※]+)', text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
if val and '위험' not in val and len(val) < 40:
|
||||
result['flashPoint'] = val
|
||||
|
||||
# 발화점
|
||||
m = re.search(r'발화점\s*\n([^\n화발증폭위※인]+)', text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
if val and len(val) < 40:
|
||||
result['autoIgnition'] = val
|
||||
|
||||
# 증기압 (요약 카드에서는 값이 더 명확하게 나옴)
|
||||
m = re.search(r'(?:증기압|흥기압)\s*\n?([^\n증기밀도폭발인화발화]+)', text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
# 파편화된 텍스트 제거
|
||||
if val and re.search(r'\d', val) and len(val) < 60:
|
||||
result['vaporPressure'] = val
|
||||
|
||||
# 증기밀도 숫자값
|
||||
m = re.search(r'증기밀도\s*\n?([0-9][^\n]{0,20})', text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
if val and len(val) < 20:
|
||||
result['vaporDensity'] = val
|
||||
|
||||
# 폭발범위 (2열 레이아웃으로 값이 레이블에서 멀리 떨어질 수 있어 전문 탐색도 병행)
|
||||
m = re.search(r'폭발범위\s*\n([^\n위험인화발화※]+)', text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
if val and '%' in val and len(val) < 30:
|
||||
result['explosionRange'] = val
|
||||
# 2열 레이아웃 폴백: 텍스트 전체에서 "숫자~숫자%" 패턴 검색
|
||||
if not result.get('explosionRange'):
|
||||
m = re.search(r'(\d+[\.,]?\d*\s*~\s*\d+[\.,]?\d*\s*%)', text)
|
||||
if m:
|
||||
result['explosionRange'] = clean(m.group(1))
|
||||
|
||||
# 화재시 대피거리
|
||||
m = re.search(r'화재시\s*대피거리\s*\n?([^\n]+)', text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
if val:
|
||||
result['responseDistanceFire'] = val
|
||||
|
||||
# 해양거동
|
||||
m = re.search(r'해양거동\s*\n([^\n상온이격방호방제]+)', text)
|
||||
if not m:
|
||||
m = re.search(r'해양거동\s+([^\n]+)', text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
if val and len(val) < 80:
|
||||
result['marineResponse'] = val
|
||||
|
||||
# 상온상태
|
||||
m = re.search(r'상온상태\s*\n([^\n이격방호비중색상휘발냄새]+)', text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
if val and len(val) < 60:
|
||||
result['state'] = val
|
||||
|
||||
# 냄새
|
||||
m = re.search(r'냄새\s*\n([^\n이격방호색상비중상온휘발]+)', text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
if val and len(val) < 60:
|
||||
result['odor'] = val
|
||||
|
||||
# 비중
|
||||
m = re.search(r'비중\s*\n[^\n]*\n([0-9][^\n]{0,25})', text)
|
||||
if not m:
|
||||
m = re.search(r'비중\s*\n([0-9][^\n]{0,25})', text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
if val and len(val) < 30:
|
||||
result['density'] = val
|
||||
|
||||
# 색상
|
||||
m = re.search(r'색상\s*\n([^\n이격방호냄새비중상온휘발]+)', text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
if val and len(val) < 40:
|
||||
result['color'] = val
|
||||
|
||||
# 이격거리 / 방호거리 거리 숫자 추출
|
||||
m_hot = re.search(r'(?:이격거리|Hot\s*Zone).*?\n([^\n방호거리]+(?:\d+m|반경[^\n]+))', text, re.IGNORECASE)
|
||||
if m_hot:
|
||||
result['responseDistanceSpillDay'] = clean(m_hot.group(1))
|
||||
|
||||
m_warm = re.search(r'(?:방호거리|Warm\s*Zone).*?\n([^\n이격거리]+(?:\d+m|방향[^\n]+))', text, re.IGNORECASE)
|
||||
if m_warm:
|
||||
result['responseDistanceSpillNight'] = clean(m_warm.group(1))
|
||||
|
||||
return result
|
||||
|
||||
|
||||
def parse_detail_card(text: str) -> dict:
|
||||
"""상세 카드(두 번째 페이지) 파싱."""
|
||||
result: dict = {}
|
||||
|
||||
# ── nameKr 헤더에서 추출 ──────────────────────────────────────────
|
||||
# 형식: "001 과산화수소" or "0이 과산화수소"
|
||||
first_lines = text.strip().split('\n')[:4]
|
||||
for line in first_lines:
|
||||
line = line.strip()
|
||||
# 숫자/OCR숫자로 시작하고 뒤에 한글이 오는 패턴
|
||||
m = re.match(r'^[0-9이이아오０-９]{2,3}\s+([\w\s\-,./()（）]+)$', line)
|
||||
if m:
|
||||
candidate = clean(m.group(1).strip())
|
||||
if candidate and re.search(r'[가-힣A-Za-z]', candidate):
|
||||
result['nameKr'] = candidate
|
||||
break
|
||||
|
||||
# ── 분류 ──────────────────────────────────────────────────────────
|
||||
m = re.search(r'(?:유해액체물질|위험물질|석유\s*및|해양환경관리법)[^\n]{0,60}', text)
|
||||
if m:
|
||||
result['hazardClass'] = clean(m.group(0))
|
||||
|
||||
# ── 물질요약 ───────────────────────────────────────────────────────
|
||||
# 물질요약 레이블 이후 ~ 유사명/CAS 번호 전까지
|
||||
m = re.search(r'(?:물질요약|= *닐으서|진 O야)(.*?)(?=유사명|CAS|$)', text, re.DOTALL)
|
||||
if not m:
|
||||
# 분류값 이후 ~ 유사명 전
|
||||
m = re.search(r'(?:유해액체물질|석유 및)[^\n]*\n(.*?)(?=유사명|CAS)', text, re.DOTALL)
|
||||
if m:
|
||||
summary = re.sub(r'\s+', ' ', m.group(1)).strip()
|
||||
if summary and len(summary) > 15:
|
||||
result['materialSummary'] = summary[:500]
|
||||
|
||||
# ── 유사명 ─────────────────────────────────────────────────────────
|
||||
m = re.search(r'유사명\s*\n?(.*?)(?=CAS|UN\s*번호|\d{4,7}-\d{2}-\d|분자식|$)', text, re.DOTALL)
|
||||
if m:
|
||||
synonyms_raw = re.sub(r'\s+', ' ', m.group(1)).strip()
|
||||
# CAS 번호 형태면 제외
|
||||
if synonyms_raw and not re.match(r'^\d{4,7}-\d{2}-\d', synonyms_raw) and len(synonyms_raw) < 300:
|
||||
result['synonymsKr'] = synonyms_raw
|
||||
|
||||
# ── CAS 번호 ────────────────────────────────────────────────────────
|
||||
# 1순위: "CAS번호" / "CAS 번호" 직후 줄
|
||||
m = re.search(r'CAS\s*번호\s*\n\s*([^\n분자NFPA용도인화발화물질]+)', text)
|
||||
if not m:
|
||||
m = re.search(r'CAS\s*번호\s*([0-9][^\n분자NFPA용도인화발화물질]{4,20})', text)
|
||||
if m:
|
||||
cas = normalize_cas(m.group(1).strip().split()[0])
|
||||
if cas:
|
||||
result['casNumber'] = cas
|
||||
|
||||
# 2순위: 텍스트 전체에서 CAS 패턴 검색
|
||||
if not result.get('casNumber'):
|
||||
cas = find_cas_in_text(text)
|
||||
if cas:
|
||||
result['casNumber'] = cas
|
||||
|
||||
# ── UN 번호 ─────────────────────────────────────────────────────────
|
||||
# NFPA 코드 이후 줄에 있는 4자리 숫자
|
||||
m = re.search(r'(?:UN\s*번호|UN번호)\s*\n?\s*([0-9]{3,4})', text)
|
||||
if not m:
|
||||
# NFPA 다음 4자리 숫자
|
||||
m = re.search(r'반응\s*[：:]\s*\d\s*\n\s*([0-9]{3,4})\s*\n', text)
|
||||
if m:
|
||||
result['unNumber'] = m.group(1).strip()
|
||||
|
||||
# ── NFPA 코드 ───────────────────────────────────────────────────────
|
||||
nfpa = parse_nfpa(text)
|
||||
if nfpa:
|
||||
result['nfpa'] = nfpa
|
||||
|
||||
# ── 용도 ────────────────────────────────────────────────────────────
|
||||
m = re.search(r'용도\s*\n(.*?)(?=물질특성|인체\s*유해|인체유해|흡입노출|보호복|초동|$)', text, re.DOTALL)
|
||||
if m:
|
||||
usage = re.sub(r'\s+', ' ', m.group(1)).strip()
|
||||
# GHS 마크(특수문자 블록) 제거
|
||||
usage = re.sub(r'<[^>]*>|[♦◆◇△▲▼▽★☆■□●○◐◑]+', '', usage).strip()
|
||||
if usage and len(usage) < 200:
|
||||
result['usage'] = usage
|
||||
|
||||
# ── 물질특성 블록 ───────────────────────────────────────────────────
|
||||
props_start = text.find('물질특성')
|
||||
props_end = text.find('인체 유해성')
|
||||
if props_end < 0:
|
||||
props_end = text.find('인체유해성')
|
||||
if props_end < 0:
|
||||
props_end = text.find('흡입노출')
|
||||
props_text = text[props_start:props_end] if 0 <= props_start < props_end else text
|
||||
|
||||
# 인화점 (상세) — 단일 알파벳(X/O 등 위험도 마크) 제외, 숫자 포함 값만 허용
|
||||
m = re.search(r'인화점\s+([^\n발화끓는수용상온]+)', props_text)
|
||||
if not m:
|
||||
m = re.search(r'인화점\s*\n\s*([^\n발화끓는수용상온]+)', props_text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
if val and len(val) < 40 and (re.search(r'\d', val) or re.search(r'없음|해당없음|N/A', val)):
|
||||
result['flashPoint'] = val
|
||||
|
||||
# 발화점 (상세) — 숫자 포함 값만 허용
|
||||
m = re.search(r'발화점\s+([^\n인화끓는수용상온]+)', props_text)
|
||||
if not m:
|
||||
m = re.search(r'발화점\s*\n\s*([^\n인화끓는수용상온]+)', props_text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
if val and len(val) < 40 and (re.search(r'\d', val) or re.search(r'없음|해당없음|N/A', val)):
|
||||
result['autoIgnition'] = val
|
||||
|
||||
# 끓는점
|
||||
m = re.search(r'끓는점\s+([^\n인화발화수용상온]+)', props_text)
|
||||
if not m:
|
||||
m = re.search(r'끓는점\s*\n\s*([^\n인화발화수용상온]+)', props_text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
if val and len(val) < 40:
|
||||
result['boilingPoint'] = val
|
||||
|
||||
# 수용해도
|
||||
m = re.search(r'수용해도\s+([^\n인화발화끓는상온]+)', props_text)
|
||||
if not m:
|
||||
m = re.search(r'수용해도\s*\n\s*([^\n인화발화끓는상온]+)', props_text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
if val and len(val) < 50:
|
||||
result['solubility'] = val
|
||||
|
||||
# 상온상태 (상세)
|
||||
m = re.search(r'상온상태\s+([^\n색상냄새비중증기인화발화]+)', props_text)
|
||||
if not m:
|
||||
m = re.search(r'상온상태\s*\n\s*([^\n색상냄새비중증기인화발화]+)', props_text)
|
||||
if m:
|
||||
val = clean(m.group(1)).strip('()')
|
||||
if val and len(val) < 60:
|
||||
result['state'] = val
|
||||
|
||||
# 색상 (상세)
|
||||
m = re.search(r'색상\s+([^\n상온냄새비중증기인화발화]+)', props_text)
|
||||
if not m:
|
||||
m = re.search(r'색상\s*\n\s*([^\n상온냄새비중증기인화발화]+)', props_text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
if val and len(val) < 40:
|
||||
result['color'] = val
|
||||
|
||||
# 냄새 (상세)
|
||||
m = re.search(r'냄새\s+([^\n상온색상비중증기인화발화]+)', props_text)
|
||||
if not m:
|
||||
m = re.search(r'냄새\s*\n\s*([^\n상온색상비중증기인화발화]+)', props_text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
if val and len(val) < 60:
|
||||
result['odor'] = val
|
||||
|
||||
# 비중 (상세)
|
||||
m = re.search(r'비중\s+([0-9][^\n증기점도휘발]{0,25})', props_text)
|
||||
if not m:
|
||||
m = re.search(r'비중\s*\n\s*([0-9][^\n증기점도휘발]{0,25})', props_text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
if val and len(val) < 30:
|
||||
result['density'] = val
|
||||
|
||||
# 증기압 (상세)
|
||||
m = re.search(r'증기압\s+([^\n증기밀도점도휘발]{3,40})', props_text)
|
||||
if not m:
|
||||
m = re.search(r'증기압\s*\n\s*([^\n증기밀도점도휘발]{3,40})', props_text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
if val and re.search(r'\d', val):
|
||||
result['vaporPressure'] = val
|
||||
|
||||
# 증기밀도 (상세)
|
||||
m = re.search(r'증기밀도\s+([0-9,\.][^\n]{0,15})', props_text)
|
||||
if not m:
|
||||
m = re.search(r'증기밀도\s*\n\s*([0-9,\.][^\n]{0,15})', props_text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
if val and len(val) < 20:
|
||||
result['vaporDensity'] = val
|
||||
|
||||
# 점도
|
||||
m = re.search(r'점도\s+([0-9][^\n]{0,25})', props_text)
|
||||
if not m:
|
||||
m = re.search(r'점도\s*\n\s*([0-9][^\n]{0,25})', props_text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
if val and len(val) < 30:
|
||||
result['viscosity'] = val
|
||||
|
||||
# ── 인체유해성 블록 ─────────────────────────────────────────────────
|
||||
hazard_start = max(text.find('인체 유해성'), text.find('인체유해성'))
|
||||
if hazard_start < 0:
|
||||
hazard_start = text.find('급성독성')
|
||||
response_start = text.find('초동대응')
|
||||
hazard_text = text[hazard_start:response_start] if 0 <= hazard_start < response_start else ''
|
||||
|
||||
# IDLH
|
||||
m = re.search(r'I?DLH[^\n]{0,20}\n?\s*([0-9][^\n]{0,20})', hazard_text or text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
if val and re.search(r'\d', val):
|
||||
result['idlh'] = val
|
||||
|
||||
# TWA
|
||||
m = re.search(r'TWA[^\n]{0,20}\n?\s*([0-9][^\n]{0,20})', hazard_text or text)
|
||||
if m:
|
||||
val = clean(m.group(1))
|
||||
if val and re.search(r'\d', val):
|
||||
result['twa'] = val
|
||||
|
||||
# ── 응급조치 ─────────────────────────────────────────────────────────
|
||||
fa_start = text.find('흡입노출')
|
||||
fa_end = text.find('초동대응')
|
||||
if fa_start >= 0:
|
||||
fa_text = text[fa_start: fa_end if fa_end > fa_start else fa_start + 600]
|
||||
fa = re.sub(r'\s+', ' ', fa_text).strip()
|
||||
result['msds'] = {
|
||||
'firstAid': fa[:600],
|
||||
'spillResponse': '',
|
||||
'hazard': '',
|
||||
'fireFighting': '',
|
||||
'exposure': '',
|
||||
'regulation': '',
|
||||
}
|
||||
|
||||
# ── 초동대응 - 이격거리/방호거리 (상세카드에서) ─────────────────────
|
||||
m = re.search(r'초기\s*이격거리[^\n]{0,10}m[^\n]{0,5}\n?\s*([0-9]+)', text)
|
||||
if m:
|
||||
result['responseDistanceSpillDay'] = m.group(1) + 'm'
|
||||
|
||||
m = re.search(r'방호거리[^\n]{0,10}m[^\n]{0,5}\n?\s*([0-9]+)', text)
|
||||
if m:
|
||||
result['responseDistanceSpillNight'] = m.group(1) + 'm'
|
||||
|
||||
m = re.search(r'화재\s*시\s*대피거리[^\n]{0,10}m[^\n]{0,5}\n?\s*([0-9]+)', text)
|
||||
if m:
|
||||
result['responseDistanceFire'] = m.group(1) + 'm'
|
||||
|
||||
# ── GHS 분류 ─────────────────────────────────────────────────────────
|
||||
ghs_items = re.findall(
|
||||
r'(?:인화성[^\n（(]{2,40}|급성독성[^\n（(]{2,40}|피부부식[^\n（(]{2,40}|'
|
||||
r'눈\s*손상[^\n（(]{2,40}|발암성[^\n（(]{2,40}|생식독성[^\n（(]{2,40}|'
|
||||
r'수생환경[^\n（(]{2,40}|특정표적[^\n（(]{2,40}|흡인유해[^\n（(]{2,40})',
|
||||
text,
|
||||
)
|
||||
if ghs_items:
|
||||
result['ghsClass'] = ' / '.join(clean(g) for g in ghs_items[:6])
|
||||
|
||||
return result
|
||||
|
||||
|
||||
def parse_index_pages(pdf: fitz.Document) -> dict[int, dict]:
|
||||
"""목차 페이지(4-21)에서 NO → {nameKr, nameEn, casNumber} 매핑 구축."""
|
||||
index: dict[int, dict] = {}
|
||||
|
||||
for page_idx in range(3, 21):
|
||||
page = pdf[page_idx]
|
||||
text = page.get_text()
|
||||
lines = [ln.strip() for ln in text.split('\n') if ln.strip()]
|
||||
|
||||
for i, line in enumerate(lines):
|
||||
if not re.match(r'^\d{1,3}$', line):
|
||||
continue
|
||||
no = int(line)
|
||||
if not (1 <= no <= 193):
|
||||
continue
|
||||
if no in index:
|
||||
continue
|
||||
|
||||
# 탐색 창: NO 앞 1~4줄
|
||||
cas, name_en, name_kr = '', '', ''
|
||||
if i >= 1:
|
||||
# CAS 줄: 숫자-숫자-숫자 패턴 (OCR 노이즈 허용)
|
||||
raw_cas = lines[i - 1]
|
||||
cas = normalize_cas(raw_cas) if re.match(r'^[0-9이이아oO０-９\-—－"\'\. ]{5,30}$|혼합물', raw_cas) else ''
|
||||
if not cas and '혼합물' in raw_cas:
|
||||
cas = '혼합물'
|
||||
|
||||
if cas or '혼합물' in (lines[i - 1] if i >= 1 else ''):
|
||||
if i >= 2:
|
||||
name_en = lines[i - 2]
|
||||
if i >= 3:
|
||||
name_kr = lines[i - 3]
|
||||
elif i >= 2:
|
||||
# CAS가 없는 경우(매칭 실패) - 줄 이동해서 재탐색
|
||||
raw_cas2 = lines[i - 2] if i >= 2 else ''
|
||||
cas = normalize_cas(raw_cas2) if re.match(r'^[0-9이이아oO０-９\-—－"\'\. ]{5,30}$|혼합물', raw_cas2) else ''
|
||||
if cas or '혼합물' in raw_cas2:
|
||||
name_en = lines[i - 1] if i >= 1 else ''
|
||||
# name_kr는 찾기 어려움
|
||||
|
||||
if not name_kr and i >= 3:
|
||||
# 이름이 공백/짧으면 더 위 줄에서 찾기
|
||||
for j in range(3, min(6, i + 1)):
|
||||
cand = lines[i - j]
|
||||
if re.search(r'[가-힣]', cand) and len(cand) > 1:
|
||||
name_kr = cand
|
||||
break
|
||||
|
||||
index[no] = {
|
||||
'no': no,
|
||||
'nameKr': name_kr,
|
||||
'nameEn': name_en,
|
||||
'casNumber': cas if cas != '혼합물' else '',
|
||||
}
|
||||
|
||||
return index
|
||||
|
||||
|
||||
def extract_name_from_summary(text: str) -> tuple[str, str]:
|
||||
"""요약 카드에서 nameKr, nameEn 추출."""
|
||||
name_kr, name_en = '', ''
|
||||
lines = text.strip().split('\n')
|
||||
|
||||
# 1~6번 줄에서 한글 이름 탐색 (헤더 "해상화학사고 대응 물질정보집" 이후)
|
||||
found_header = False
|
||||
for line in lines:
|
||||
line = line.strip()
|
||||
if not line:
|
||||
continue
|
||||
# 제목 줄 건너뜀
|
||||
if '해상화학사고' in line or '대응' in line or '물질정보집' in line:
|
||||
found_header = True
|
||||
continue
|
||||
# 3자리 번호 줄 건너뜀
|
||||
if re.match(r'^\d{1,3}$', line):
|
||||
continue
|
||||
# 한글이 있으면 nameKr 후보
|
||||
if re.search(r'[가-힣]', line) and len(line) > 1 and '위험' not in line and '분류' not in line:
|
||||
if not name_kr:
|
||||
name_kr = clean(line)
|
||||
|
||||
# 영문명: (영문명) 형태
|
||||
m_en = re.search(r'[（(]([A-Za-z][^）)]{3,60})[）)]', line)
|
||||
if m_en and not name_en:
|
||||
name_en = clean(m_en.group(1))
|
||||
|
||||
if name_kr and name_en:
|
||||
break
|
||||
|
||||
return name_kr, name_en
|
||||
|
||||
|
||||
def parse_substance(pdf: fitz.Document, no: int, index_entry: dict) -> dict | None:
|
||||
"""물질 번호 no에 해당하는 2페이지를 파싱하여 통합 레코드 반환."""
|
||||
start_idx = 21 + (no - 1) * 2
|
||||
if start_idx + 1 >= pdf.page_count:
|
||||
return None
|
||||
|
||||
summary_text = pdf[start_idx].get_text()
|
||||
detail_text = pdf[start_idx + 1].get_text()
|
||||
|
||||
summary = parse_summary_card(summary_text, index_entry)
|
||||
detail = parse_detail_card(detail_text)
|
||||
|
||||
# nameKr 결정 우선순위: 인덱스 > 상세카드 헤더 > 요약카드
|
||||
name_kr = index_entry.get('nameKr', '')
|
||||
if not name_kr:
|
||||
name_kr = detail.get('nameKr', '')
|
||||
if not name_kr:
|
||||
name_kr, _ = extract_name_from_summary(summary_text)
|
||||
|
||||
# nameEn
|
||||
name_en = index_entry.get('nameEn', '')
|
||||
|
||||
# 통합: detail 우선, 없으면 summary
|
||||
merged: dict = {
|
||||
'nameKr': name_kr,
|
||||
'nameEn': name_en,
|
||||
}
|
||||
|
||||
for key in ['casNumber', 'unNumber', 'usage', 'synonymsKr',
|
||||
'flashPoint', 'autoIgnition', 'boilingPoint', 'density', 'solubility',
|
||||
'vaporPressure', 'vaporDensity', 'volatility', 'explosionRange',
|
||||
'state', 'color', 'odor', 'viscosity', 'idlh', 'twa',
|
||||
'responseDistanceFire', 'responseDistanceSpillDay', 'responseDistanceSpillNight',
|
||||
'marineResponse', 'hazardClass', 'ghsClass', 'materialSummary', 'msds']:
|
||||
detail_val = detail.get(key)
|
||||
summary_val = summary.get(key)
|
||||
if detail_val:
|
||||
merged[key] = detail_val
|
||||
elif summary_val:
|
||||
merged[key] = summary_val
|
||||
|
||||
# CAS: 인덱스 우선
|
||||
if index_entry.get('casNumber') and not merged.get('casNumber'):
|
||||
merged['casNumber'] = index_entry['casNumber']
|
||||
|
||||
# NFPA: detail 우선
|
||||
if 'nfpa' in detail:
|
||||
merged['nfpa'] = detail['nfpa']
|
||||
|
||||
if 'msds' not in merged:
|
||||
merged['msds'] = {
|
||||
'firstAid': '', 'spillResponse': '', 'hazard': '',
|
||||
'fireFighting': '', 'exposure': '', 'regulation': '',
|
||||
}
|
||||
|
||||
merged['_no'] = no
|
||||
merged['_pageIdx'] = start_idx
|
||||
return merged
|
||||
|
||||
|
||||
def main() -> None:
|
||||
if not PDF_PATH.exists():
|
||||
raise SystemExit(f'PDF 파일 없음: {PDF_PATH}')
|
||||
|
||||
print(f'[읽기] {PDF_PATH}')
|
||||
pdf = fitz.open(str(PDF_PATH))
|
||||
print(f'[PDF] 총 {pdf.page_count}페이지')
|
||||
|
||||
# 1. 인덱스 파싱
|
||||
print('[인덱스] 목차 페이지 파싱 중...')
|
||||
index = parse_index_pages(pdf)
|
||||
print(f'[인덱스] {len(index)}개 항목 발견')
|
||||
|
||||
# 2. 물질 카드 파싱
|
||||
results: dict[str, dict] = {}
|
||||
failed: list[int] = []
|
||||
|
||||
for no in range(1, 194):
|
||||
entry = index.get(no, {'no': no, 'nameKr': '', 'nameEn': '', 'casNumber': ''})
|
||||
try:
|
||||
rec = parse_substance(pdf, no, entry)
|
||||
if rec:
|
||||
name_kr = rec.get('nameKr', '')
|
||||
if name_kr:
|
||||
key = name_kr
|
||||
if key in results:
|
||||
key = f'{name_kr}_{no}'
|
||||
results[key] = rec
|
||||
else:
|
||||
print(f' [경고] NO={no} nameKr 없음 - 건너뜀')
|
||||
failed.append(no)
|
||||
except Exception as e:
|
||||
print(f' [오류] NO={no}: {e}')
|
||||
failed.append(no)
|
||||
|
||||
pdf.close()
|
||||
|
||||
# 3. 저장
|
||||
out_path = OUT_DIR / 'pdf-data.json'
|
||||
with open(out_path, 'w', encoding='utf-8') as f:
|
||||
json.dump(results, f, ensure_ascii=False, indent=2)
|
||||
|
||||
size_kb = out_path.stat().st_size / 1024
|
||||
print(f'\n[완료] {out_path} ({size_kb:.0f} KB, {len(results)}종)')
|
||||
|
||||
if failed:
|
||||
print(f'[경고] 파싱 실패 {len(failed)}종: {failed}')
|
||||
|
||||
# 4. 통계
|
||||
with_flash = sum(1 for v in results.values() if v.get('flashPoint'))
|
||||
with_nfpa = sum(1 for v in results.values() if v.get('nfpa'))
|
||||
with_cas = sum(1 for v in results.values() if v.get('casNumber'))
|
||||
with_syn = sum(1 for v in results.values() if v.get('synonymsKr'))
|
||||
print(f'[통계] 인화점: {with_flash}종, NFPA: {with_nfpa}종, CAS: {with_cas}종, 유사명: {with_syn}종')
|
||||
|
||||
# 5. 샘플 출력
|
||||
print('\n[샘플] 주요 항목:')
|
||||
sample_keys = ['과산화수소', '나프탈렌', '벤젠', '톨루엔']
|
||||
for k in sample_keys:
|
||||
if k in results:
|
||||
v = results[k]
|
||||
print(f' {k}: fp={v.get("flashPoint","")} nfpa={v.get("nfpa")} cas={v.get("casNumber","")}')
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
main()
|
||||
@ -1,23 +0,0 @@
|
||||
"""배치 JSON을 ocr.json에 병합."""
|
||||
import json
|
||||
import sys
|
||||
from pathlib import Path
|
||||
|
||||
SCRIPT_DIR = Path(__file__).parent.resolve()
|
||||
OUT_DIR = SCRIPT_DIR / 'out'
|
||||
OCR_PATH = OUT_DIR / 'ocr.json'
|
||||
BATCH_PATH = OUT_DIR / 'batch.json'
|
||||
|
||||
with open(OCR_PATH, encoding='utf-8') as f:
|
||||
ocr = json.load(f)
|
||||
with open(BATCH_PATH, encoding='utf-8') as f:
|
||||
batch = json.load(f)
|
||||
|
||||
added = [k for k in batch if k not in ocr]
|
||||
updated = [k for k in batch if k in ocr]
|
||||
ocr.update(batch)
|
||||
|
||||
with open(OCR_PATH, 'w', encoding='utf-8') as f:
|
||||
json.dump(ocr, f, ensure_ascii=False, indent=2)
|
||||
|
||||
print(f'merged: +{len(added)} added, ~{len(updated)} updated, total {len(ocr)}')
|
||||
@ -1,362 +0,0 @@
|
||||
/**
|
||||
* base.json + pdf-data.json + ocr.json → frontend/src/data/hnsSubstanceData.json
|
||||
*
|
||||
* 우선순위: pdf-data (PDF 텍스트 추출, 최고 정확도) > base.json > ocr.json (이미지 OCR, 낮은 정확도)
|
||||
* 매칭 키 순서:
|
||||
* 1. CAS 번호 (가장 신뢰할 수 있는 식별자)
|
||||
* 2. 국문명(nameKr) 정규화 비교
|
||||
* 3. 동의어(synonymsKr) 정규화 비교
|
||||
*/
|
||||
import { readFileSync, writeFileSync, existsSync } from 'node:fs';
|
||||
import { resolve, dirname } from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
const OUT_DIR = resolve(__dirname, 'out');
|
||||
const BASE_PATH = resolve(OUT_DIR, 'base.json');
|
||||
const PDF_PATH = resolve(OUT_DIR, 'pdf-data.json');
|
||||
const OCR_PATH = resolve(OUT_DIR, 'ocr.json');
|
||||
const TARGET_PATH = resolve(__dirname, '../../../frontend/src/data/hnsSubstanceData.json');
|
||||
|
||||
function normalizeName(s: string | undefined): string {
|
||||
if (!s) return '';
|
||||
return s
|
||||
.replace(/\s+/g, '')
|
||||
.replace(/[,.·/\-_()[\]（）]/g, '')
|
||||
.toLowerCase();
|
||||
}
|
||||
|
||||
function normalizeCas(s: string | undefined): string {
|
||||
if (!s) return '';
|
||||
// 앞자리 0 제거 후 정규화
|
||||
return s
|
||||
.replace(/[^0-9\-]/g, '')
|
||||
.replace(/^0+/, '')
|
||||
.trim();
|
||||
}
|
||||
|
||||
interface NfpaBlock {
|
||||
health: number;
|
||||
fire: number;
|
||||
reactivity: number;
|
||||
special: string;
|
||||
}
|
||||
|
||||
interface MsdsBlock {
|
||||
hazard: string;
|
||||
firstAid: string;
|
||||
fireFighting: string;
|
||||
spillResponse: string;
|
||||
exposure: string;
|
||||
regulation: string;
|
||||
}
|
||||
|
||||
interface BaseRecord {
|
||||
id: number;
|
||||
abbreviation: string;
|
||||
nameKr: string;
|
||||
nameEn: string;
|
||||
synonymsEn: string;
|
||||
synonymsKr: string;
|
||||
unNumber: string;
|
||||
casNumber: string;
|
||||
transportMethod: string;
|
||||
sebc: string;
|
||||
usage: string;
|
||||
state: string;
|
||||
color: string;
|
||||
odor: string;
|
||||
flashPoint: string;
|
||||
autoIgnition: string;
|
||||
boilingPoint: string;
|
||||
density: string;
|
||||
solubility: string;
|
||||
vaporPressure: string;
|
||||
vaporDensity: string;
|
||||
explosionRange: string;
|
||||
nfpa: NfpaBlock;
|
||||
hazardClass: string;
|
||||
ergNumber: string;
|
||||
idlh: string;
|
||||
aegl2: string;
|
||||
erpg2: string;
|
||||
responseDistanceFire: string;
|
||||
responseDistanceSpillDay: string;
|
||||
responseDistanceSpillNight: string;
|
||||
marineResponse: string;
|
||||
ppeClose: string;
|
||||
ppeFar: string;
|
||||
msds: MsdsBlock;
|
||||
ibcHazard: string;
|
||||
ibcShipType: string;
|
||||
ibcTankType: string;
|
||||
ibcDetection: string;
|
||||
ibcFireFighting: string;
|
||||
ibcMinRequirement: string;
|
||||
emsCode: string;
|
||||
emsFire: string;
|
||||
emsSpill: string;
|
||||
emsFirstAid: string;
|
||||
cargoCodes: Array<{ code: string; name: string; company: string; source: string }>;
|
||||
portFrequency: Array<{ port: string; portCode: string; lastImport: string; frequency: string }>;
|
||||
}
|
||||
|
||||
interface PdfResult {
|
||||
[key: string]: unknown;
|
||||
casNumber?: string;
|
||||
nameKr?: string;
|
||||
nfpa?: Partial<NfpaBlock>;
|
||||
msds?: Partial<MsdsBlock>;
|
||||
}
|
||||
|
||||
interface OcrResult {
|
||||
[key: string]: unknown;
|
||||
}
|
||||
|
||||
function firstString(...values: Array<unknown>): string {
|
||||
for (const v of values) {
|
||||
if (typeof v === 'string' && v.trim().length > 0) return v.trim();
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
function pickNfpa(source: PdfResult | OcrResult): NfpaBlock | null {
|
||||
const n = source.nfpa as Partial<NfpaBlock> | undefined;
|
||||
if (!n || typeof n !== 'object') return null;
|
||||
const h = Number(n.health);
|
||||
const f = Number(n.fire);
|
||||
const r = Number(n.reactivity);
|
||||
if ([h, f, r].some((x) => !Number.isFinite(x))) return null;
|
||||
return {
|
||||
health: h,
|
||||
fire: f,
|
||||
reactivity: r,
|
||||
special: typeof n.special === 'string' ? n.special : '',
|
||||
};
|
||||
}
|
||||
|
||||
function pickMsds(
|
||||
pdf: PdfResult | undefined,
|
||||
ocr: OcrResult | undefined,
|
||||
base: MsdsBlock,
|
||||
): MsdsBlock {
|
||||
const p = (pdf?.msds ?? {}) as Partial<MsdsBlock>;
|
||||
const o = (ocr?.msds ?? {}) as Partial<MsdsBlock>;
|
||||
return {
|
||||
hazard: firstString(base.hazard, p.hazard, o.hazard),
|
||||
firstAid: firstString(base.firstAid, p.firstAid, o.firstAid),
|
||||
fireFighting: firstString(base.fireFighting, p.fireFighting, o.fireFighting),
|
||||
spillResponse: firstString(base.spillResponse, p.spillResponse, o.spillResponse),
|
||||
exposure: firstString(base.exposure, p.exposure, o.exposure),
|
||||
regulation: firstString(base.regulation, p.regulation, o.regulation),
|
||||
};
|
||||
}
|
||||
|
||||
function merge(
|
||||
base: BaseRecord,
|
||||
pdf: PdfResult | undefined,
|
||||
ocr: OcrResult | undefined,
|
||||
): BaseRecord {
|
||||
const nfpaFromPdf = pdf ? pickNfpa(pdf) : null;
|
||||
const nfpaFromOcr = ocr ? pickNfpa(ocr) : null;
|
||||
// pdf NFPA 우선, 없으면 ocr, 없으면 base
|
||||
const nfpa = nfpaFromPdf ?? nfpaFromOcr ?? base.nfpa;
|
||||
|
||||
return {
|
||||
...base,
|
||||
// pdf > base > ocr 우선순위
|
||||
unNumber: firstString(pdf?.unNumber, base.unNumber, ocr?.unNumber),
|
||||
casNumber: firstString(pdf?.casNumber, base.casNumber, ocr?.casNumber),
|
||||
synonymsKr: firstString(pdf?.synonymsKr, base.synonymsKr, ocr?.synonymsKr),
|
||||
transportMethod: firstString(base.transportMethod, pdf?.transportMethod, ocr?.transportMethod),
|
||||
sebc: firstString(base.sebc, pdf?.sebc, ocr?.sebc),
|
||||
usage: firstString(pdf?.usage, base.usage, ocr?.usage),
|
||||
state: firstString(pdf?.state, base.state, ocr?.state),
|
||||
color: firstString(pdf?.color, base.color, ocr?.color),
|
||||
odor: firstString(pdf?.odor, base.odor, ocr?.odor),
|
||||
flashPoint: firstString(pdf?.flashPoint, base.flashPoint, ocr?.flashPoint),
|
||||
autoIgnition: firstString(pdf?.autoIgnition, base.autoIgnition, ocr?.autoIgnition),
|
||||
boilingPoint: firstString(pdf?.boilingPoint, base.boilingPoint, ocr?.boilingPoint),
|
||||
density: firstString(pdf?.density, base.density, ocr?.density),
|
||||
solubility: firstString(pdf?.solubility, base.solubility, ocr?.solubility),
|
||||
vaporPressure: firstString(pdf?.vaporPressure, base.vaporPressure, ocr?.vaporPressure),
|
||||
vaporDensity: firstString(pdf?.vaporDensity, base.vaporDensity, ocr?.vaporDensity),
|
||||
explosionRange: firstString(pdf?.explosionRange, base.explosionRange, ocr?.explosionRange),
|
||||
nfpa,
|
||||
hazardClass: firstString(pdf?.hazardClass, base.hazardClass, ocr?.hazardClass),
|
||||
ergNumber: firstString(base.ergNumber, pdf?.ergNumber, ocr?.ergNumber),
|
||||
idlh: firstString(pdf?.idlh, base.idlh, ocr?.idlh),
|
||||
aegl2: firstString(base.aegl2, pdf?.aegl2, ocr?.aegl2),
|
||||
erpg2: firstString(base.erpg2, pdf?.erpg2, ocr?.erpg2),
|
||||
responseDistanceFire: firstString(pdf?.responseDistanceFire, base.responseDistanceFire, ocr?.responseDistanceFire),
|
||||
responseDistanceSpillDay: firstString(pdf?.responseDistanceSpillDay, base.responseDistanceSpillDay, ocr?.responseDistanceSpillDay),
|
||||
responseDistanceSpillNight: firstString(pdf?.responseDistanceSpillNight, base.responseDistanceSpillNight, ocr?.responseDistanceSpillNight),
|
||||
marineResponse: firstString(pdf?.marineResponse, base.marineResponse, ocr?.marineResponse),
|
||||
ppeClose: firstString(base.ppeClose, pdf?.ppeClose, ocr?.ppeClose),
|
||||
ppeFar: firstString(base.ppeFar, pdf?.ppeFar, ocr?.ppeFar),
|
||||
msds: pickMsds(pdf, ocr, base.msds),
|
||||
emsCode: firstString(base.emsCode, pdf?.emsCode, ocr?.emsCode),
|
||||
emsFire: firstString(base.emsFire, pdf?.emsFire, ocr?.emsFire),
|
||||
emsSpill: firstString(base.emsSpill, pdf?.emsSpill, ocr?.emsSpill),
|
||||
emsFirstAid: firstString(base.emsFirstAid, pdf?.emsFirstAid, ocr?.emsFirstAid),
|
||||
};
|
||||
}
|
||||
|
||||
function main() {
|
||||
if (!existsSync(BASE_PATH)) {
|
||||
console.error(`base.json 없음: ${BASE_PATH}`);
|
||||
console.error('→ extract-excel.py 를 먼저 실행하세요.');
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const base: BaseRecord[] = JSON.parse(readFileSync(BASE_PATH, 'utf-8'));
|
||||
|
||||
// PDF 데이터 로드
|
||||
const pdfRaw: Record<string, PdfResult> = existsSync(PDF_PATH)
|
||||
? JSON.parse(readFileSync(PDF_PATH, 'utf-8'))
|
||||
: {};
|
||||
|
||||
// OCR 데이터 로드
|
||||
const ocr: Record<string, OcrResult> = existsSync(OCR_PATH)
|
||||
? JSON.parse(readFileSync(OCR_PATH, 'utf-8'))
|
||||
: {};
|
||||
|
||||
console.log(
|
||||
`[입력] base ${base.length}종, pdf ${Object.keys(pdfRaw).length}종, ocr ${Object.keys(ocr).length}종`,
|
||||
);
|
||||
|
||||
// ── PDF 인덱스 구축 ─────────────────────────────────────────────────
|
||||
// 1) nameKr 정규화 인덱스
|
||||
const pdfByName = new Map<string, PdfResult>();
|
||||
// 2) CAS 번호 인덱스
|
||||
const pdfByCas = new Map<string, PdfResult>();
|
||||
|
||||
for (const [key, value] of Object.entries(pdfRaw)) {
|
||||
const normKey = normalizeName(key);
|
||||
if (normKey) pdfByName.set(normKey, value);
|
||||
|
||||
const cas = normalizeCas(value.casNumber);
|
||||
if (cas) {
|
||||
if (!pdfByCas.has(cas)) pdfByCas.set(cas, value);
|
||||
}
|
||||
}
|
||||
|
||||
// ── OCR 인덱스 구축 ─────────────────────────────────────────────────
|
||||
const ocrByName = new Map<string, OcrResult>();
|
||||
const ocrNormToOrig = new Map<string, string>();
|
||||
for (const [key, value] of Object.entries(ocr)) {
|
||||
const normKey = normalizeName(key);
|
||||
if (normKey) {
|
||||
ocrByName.set(normKey, value);
|
||||
ocrNormToOrig.set(normKey, key);
|
||||
}
|
||||
}
|
||||
|
||||
// ── 병합 ──────────────────────────────────────────────────────────
|
||||
let pdfMatchedByName = 0;
|
||||
let pdfMatchedByCas = 0;
|
||||
let pdfMatchedBySynonym = 0;
|
||||
let ocrMatched = 0;
|
||||
const pdfUnmatched = new Set(Object.keys(pdfRaw));
|
||||
const ocrUnmatched = new Set(ocrByName.keys());
|
||||
|
||||
const merged = base.map((record) => {
|
||||
let pdfResult: PdfResult | undefined;
|
||||
let ocrResult: OcrResult | undefined;
|
||||
|
||||
// ── PDF 매칭 ────────────────────────────────────────────────────
|
||||
// 1. CAS 번호 매칭 (가장 정확)
|
||||
const baseCas = normalizeCas(record.casNumber);
|
||||
if (baseCas) {
|
||||
pdfResult = pdfByCas.get(baseCas);
|
||||
if (pdfResult) {
|
||||
pdfMatchedByCas++;
|
||||
const origKey = pdfResult.nameKr as string | undefined;
|
||||
if (origKey) pdfUnmatched.delete(origKey);
|
||||
}
|
||||
}
|
||||
|
||||
// 2. nameKr 정규화 매칭
|
||||
if (!pdfResult) {
|
||||
const normKr = normalizeName(record.nameKr);
|
||||
pdfResult = pdfByName.get(normKr);
|
||||
if (pdfResult) {
|
||||
pdfMatchedByName++;
|
||||
const origKey = pdfResult.nameKr as string | undefined;
|
||||
if (origKey) pdfUnmatched.delete(origKey);
|
||||
}
|
||||
}
|
||||
|
||||
// 3. synonymsKr 동의어 매칭
|
||||
if (!pdfResult && record.synonymsKr) {
|
||||
const synonyms = record.synonymsKr.split(' / ');
|
||||
for (const syn of synonyms) {
|
||||
const normSyn = normalizeName(syn);
|
||||
if (!normSyn) continue;
|
||||
pdfResult = pdfByName.get(normSyn);
|
||||
if (pdfResult) {
|
||||
pdfMatchedBySynonym++;
|
||||
const origKey = pdfResult.nameKr as string | undefined;
|
||||
if (origKey) pdfUnmatched.delete(origKey);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ── OCR 매칭 (PDF 없는 경우 보조) ────────────────────────────────
|
||||
const normKr = normalizeName(record.nameKr);
|
||||
const ocrByNameResult = ocrByName.get(normKr);
|
||||
if (ocrByNameResult) {
|
||||
ocrResult = ocrByNameResult;
|
||||
ocrMatched++;
|
||||
ocrUnmatched.delete(normKr);
|
||||
}
|
||||
|
||||
if (!ocrResult && record.synonymsKr) {
|
||||
const synonyms = record.synonymsKr.split(' / ');
|
||||
for (const syn of synonyms) {
|
||||
const normSyn = normalizeName(syn);
|
||||
if (!normSyn) continue;
|
||||
const synOcrResult = ocrByName.get(normSyn);
|
||||
if (synOcrResult) {
|
||||
ocrResult = synOcrResult;
|
||||
ocrMatched++;
|
||||
ocrUnmatched.delete(normSyn);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return merge(record, pdfResult, ocrResult);
|
||||
});
|
||||
|
||||
// ── 통계 출력 ──────────────────────────────────────────────────────
|
||||
const pdfTotal = pdfMatchedByCas + pdfMatchedByName + pdfMatchedBySynonym;
|
||||
console.log(
|
||||
`[PDF 매칭] 총 ${pdfTotal}종 (CAS: ${pdfMatchedByCas}, 국문명: ${pdfMatchedByName}, 동의어: ${pdfMatchedBySynonym})`,
|
||||
);
|
||||
console.log(`[OCR 매칭] ${ocrMatched}종`);
|
||||
|
||||
if (pdfUnmatched.size > 0) {
|
||||
const unmatchedList = Array.from(pdfUnmatched).sort();
|
||||
const unmatchedPath = resolve(OUT_DIR, 'pdf-unmatched.json');
|
||||
writeFileSync(
|
||||
unmatchedPath,
|
||||
JSON.stringify({ count: unmatchedList.length, keys: unmatchedList }, null, 2),
|
||||
'utf-8',
|
||||
);
|
||||
console.warn(
|
||||
`[경고] PDF 매칭 실패 ${unmatchedList.length}개 → ${unmatchedPath}`,
|
||||
);
|
||||
unmatchedList.slice(0, 10).forEach((k) => console.warn(` - ${k}`));
|
||||
if (unmatchedList.length > 10) console.warn(` ... +${unmatchedList.length - 10}`);
|
||||
}
|
||||
|
||||
writeFileSync(TARGET_PATH, JSON.stringify(merged, null, 2), 'utf-8');
|
||||
const sizeKb = (JSON.stringify(merged).length / 1024).toFixed(0);
|
||||
console.log(`[완료] ${TARGET_PATH} (${sizeKb} KB, ${merged.length}종)`);
|
||||
console.log(` 상세 정보 보유: ${merged.filter((r) => r.flashPoint).length}종`);
|
||||
console.log(` NFPA 있음: ${merged.filter((r) => r.nfpa.health || r.nfpa.fire || r.nfpa.reactivity).length}종`);
|
||||
}
|
||||
|
||||
main();
|
||||
@ -1,300 +0,0 @@
|
||||
/**
|
||||
* Claude Vision API 로 HNS 카드 이미지 → 구조화 JSON 변환.
|
||||
*
|
||||
* 입력: out/images/*.png (222개)
|
||||
* 출력: out/ocr.json { [nameKr]: Partial<HNSSearchSubstance> }
|
||||
*
|
||||
* 환경변수: ANTHROPIC_API_KEY
|
||||
* 모델: claude-sonnet-4-5 (Vision + 비용 효율)
|
||||
* 동시성: 5, 재시도 3회
|
||||
*
|
||||
* 재실행 시 기존 ocr.json 의 결과는 유지하고 누락된 이미지만 처리한다.
|
||||
*/
|
||||
import 'dotenv/config';
|
||||
import Anthropic from '@anthropic-ai/sdk';
|
||||
import { readFileSync, readdirSync, writeFileSync, existsSync } from 'node:fs';
|
||||
import { resolve, dirname, basename, extname } from 'node:path';
|
||||
import { fileURLToPath } from 'node:url';
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
const OUT_DIR = resolve(__dirname, 'out');
|
||||
const IMG_DIR = process.env.HNS_OCR_IMG_DIR
|
||||
? resolve(process.env.HNS_OCR_IMG_DIR)
|
||||
: resolve(OUT_DIR, 'images');
|
||||
const OCR_PATH = process.env.HNS_OCR_OUT
|
||||
? resolve(process.env.HNS_OCR_OUT)
|
||||
: resolve(OUT_DIR, 'ocr.json');
|
||||
const FAIL_PATH = process.env.HNS_OCR_FAIL
|
||||
? resolve(process.env.HNS_OCR_FAIL)
|
||||
: resolve(OUT_DIR, 'ocr-failures.json');
|
||||
const OCR_LIMIT = process.env.HNS_OCR_LIMIT ? parseInt(process.env.HNS_OCR_LIMIT, 10) : undefined;
|
||||
const OCR_ONLY = process.env.HNS_OCR_ONLY
|
||||
? process.env.HNS_OCR_ONLY.split(',').map((s) => s.trim()).filter(Boolean)
|
||||
: undefined;
|
||||
|
||||
const CONCURRENCY = 5;
|
||||
const MAX_RETRIES = 3;
|
||||
const MODEL = process.env.HNS_OCR_MODEL ?? 'claude-sonnet-4-5';
|
||||
|
||||
const SYSTEM_PROMPT = `당신은 한국 해양 방제용 HNS 비상대응 카드 이미지를 구조화 JSON으로 추출하는 전문 파서입니다.
|
||||
|
||||
이미지는 표준 템플릿을 따르며 다음 섹션을 포함합니다:
|
||||
- 상단: 국문명, 영문명
|
||||
- 물질특성: CAS번호, UN번호, 운송방법, 유사명, 특성(독성/부식성/인화성/유해성), 용도, 상태/색상/냄새, 인화점/발화점/끓는점, 용해도/증기압/증기밀도, 비중/폭발범위, NFPA 다이아몬드(건강/인화/반응), GHS 픽토그램, ERG 지침서 번호
|
||||
- 대응방법: 주요 장비(PPE 근거리/원거리), 화재 대응(EmS F-x), 해상 유출(EmS S-x), 초기이격거리, 방호활동거리
|
||||
- 인체유해성: TWA / STEL / AEGL-2 / IDLH, 흡입/피부/안구/경구 증상·응급조치
|
||||
|
||||
아래 JSON 스키마를 **엄격히** 준수하여 응답하세요. 값이 없거나 읽을 수 없는 경우 빈 문자열 "" 또는 null.
|
||||
숫자는 단위 포함 원문 문자열로 유지 (예: "80℃", "2,410 mmHg (25℃)").
|
||||
NFPA 건강/인화/반응은 0~4 정수. special 은 문자열(특수 표시).
|
||||
|
||||
응답은 **순수 JSON 객체만** 반환 (코드블록이나 설명문 없이).
|
||||
|
||||
스키마:
|
||||
{
|
||||
"transportMethod": "",
|
||||
"state": "",
|
||||
"color": "",
|
||||
"odor": "",
|
||||
"flashPoint": "",
|
||||
"autoIgnition": "",
|
||||
"boilingPoint": "",
|
||||
"density": "",
|
||||
"solubility": "",
|
||||
"vaporPressure": "",
|
||||
"vaporDensity": "",
|
||||
"explosionRange": "",
|
||||
"nfpa": { "health": 0, "fire": 0, "reactivity": 0, "special": "" },
|
||||
"hazardClass": "",
|
||||
"ergNumber": "",
|
||||
"idlh": "",
|
||||
"aegl2": "",
|
||||
"erpg2": "",
|
||||
"twa": "",
|
||||
"stel": "",
|
||||
"responseDistanceFire": "",
|
||||
"responseDistanceSpillDay": "",
|
||||
"responseDistanceSpillNight": "",
|
||||
"marineResponse": "",
|
||||
"ppeClose": "",
|
||||
"ppeFar": "",
|
||||
"msds": {
|
||||
"hazard": "",
|
||||
"firstAid": "",
|
||||
"fireFighting": "",
|
||||
"spillResponse": "",
|
||||
"exposure": "",
|
||||
"regulation": ""
|
||||
},
|
||||
"emsCode": "",
|
||||
"emsFire": "",
|
||||
"emsSpill": "",
|
||||
"emsFirstAid": "",
|
||||
"sebc": ""
|
||||
}`;
|
||||
|
||||
interface OcrResult {
|
||||
transportMethod?: string;
|
||||
state?: string;
|
||||
color?: string;
|
||||
odor?: string;
|
||||
flashPoint?: string;
|
||||
autoIgnition?: string;
|
||||
boilingPoint?: string;
|
||||
density?: string;
|
||||
solubility?: string;
|
||||
vaporPressure?: string;
|
||||
vaporDensity?: string;
|
||||
explosionRange?: string;
|
||||
nfpa?: { health: number; fire: number; reactivity: number; special: string };
|
||||
hazardClass?: string;
|
||||
ergNumber?: string;
|
||||
idlh?: string;
|
||||
aegl2?: string;
|
||||
erpg2?: string;
|
||||
twa?: string;
|
||||
stel?: string;
|
||||
responseDistanceFire?: string;
|
||||
responseDistanceSpillDay?: string;
|
||||
responseDistanceSpillNight?: string;
|
||||
marineResponse?: string;
|
||||
ppeClose?: string;
|
||||
ppeFar?: string;
|
||||
msds?: {
|
||||
hazard?: string;
|
||||
firstAid?: string;
|
||||
fireFighting?: string;
|
||||
spillResponse?: string;
|
||||
exposure?: string;
|
||||
regulation?: string;
|
||||
};
|
||||
emsCode?: string;
|
||||
emsFire?: string;
|
||||
emsSpill?: string;
|
||||
emsFirstAid?: string;
|
||||
sebc?: string;
|
||||
}
|
||||
|
||||
function loadExisting<T>(path: string, fallback: T): T {
|
||||
if (!existsSync(path)) return fallback;
|
||||
try {
|
||||
return JSON.parse(readFileSync(path, 'utf-8'));
|
||||
} catch {
|
||||
return fallback;
|
||||
}
|
||||
}
|
||||
|
||||
function extractJson(text: string): OcrResult | null {
|
||||
const cleaned = text.replace(/```json\s*/gi, '').replace(/```\s*$/g, '').trim();
|
||||
const firstBrace = cleaned.indexOf('{');
|
||||
const lastBrace = cleaned.lastIndexOf('}');
|
||||
if (firstBrace < 0 || lastBrace < 0) return null;
|
||||
try {
|
||||
return JSON.parse(cleaned.slice(firstBrace, lastBrace + 1));
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function callVision(client: Anthropic, imagePath: string): Promise<OcrResult> {
|
||||
const imageData = readFileSync(imagePath).toString('base64');
|
||||
const ext = extname(imagePath).slice(1).toLowerCase();
|
||||
const mediaType = (ext === 'jpg' || ext === 'jpeg' ? 'image/jpeg' : 'image/png') as
|
||||
| 'image/png'
|
||||
| 'image/jpeg';
|
||||
|
||||
const response = await client.messages.create({
|
||||
model: MODEL,
|
||||
max_tokens: 4096,
|
||||
system: [
|
||||
{
|
||||
type: 'text',
|
||||
text: SYSTEM_PROMPT,
|
||||
cache_control: { type: 'ephemeral' },
|
||||
},
|
||||
],
|
||||
messages: [
|
||||
{
|
||||
role: 'user',
|
||||
content: [
|
||||
{
|
||||
type: 'image',
|
||||
source: { type: 'base64', media_type: mediaType, data: imageData },
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
text: '이 HNS 비상대응 카드 이미지에서 모든 필드를 추출해 JSON으로 반환하세요.',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const textBlock = response.content.find((b) => b.type === 'text');
|
||||
if (!textBlock || textBlock.type !== 'text') {
|
||||
throw new Error('응답에 텍스트 블록 없음');
|
||||
}
|
||||
const result = extractJson(textBlock.text);
|
||||
if (!result) {
|
||||
throw new Error(`JSON 파싱 실패: ${textBlock.text.slice(0, 200)}`);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
async function processWithRetry(
|
||||
client: Anthropic,
|
||||
imagePath: string,
|
||||
nameKr: string,
|
||||
): Promise<OcrResult> {
|
||||
let lastErr: unknown;
|
||||
for (let attempt = 1; attempt <= MAX_RETRIES; attempt++) {
|
||||
try {
|
||||
return await callVision(client, imagePath);
|
||||
} catch (err) {
|
||||
lastErr = err;
|
||||
const wait = 1000 * Math.pow(2, attempt - 1);
|
||||
console.warn(`[${nameKr}] 시도 ${attempt} 실패, ${wait}ms 후 재시도: ${String(err).slice(0, 120)}`);
|
||||
await new Promise((r) => setTimeout(r, wait));
|
||||
}
|
||||
}
|
||||
throw lastErr;
|
||||
}
|
||||
|
||||
async function runPool<T>(items: T[], worker: (item: T, idx: number) => Promise<void>) {
|
||||
let cursor = 0;
|
||||
const workers = Array.from({ length: CONCURRENCY }, async () => {
|
||||
while (cursor < items.length) {
|
||||
const idx = cursor++;
|
||||
await worker(items[idx], idx);
|
||||
}
|
||||
});
|
||||
await Promise.all(workers);
|
||||
}
|
||||
|
||||
async function main() {
|
||||
if (!process.env.ANTHROPIC_API_KEY) {
|
||||
console.error('ANTHROPIC_API_KEY 환경변수가 없습니다.');
|
||||
process.exit(1);
|
||||
}
|
||||
const client = new Anthropic();
|
||||
|
||||
if (!existsSync(IMG_DIR)) {
|
||||
console.error(`이미지 디렉토리 없음: ${IMG_DIR}`);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
const allImages = readdirSync(IMG_DIR).filter((f) => /\.(png|jpg|jpeg)$/i.test(f));
|
||||
const images = OCR_ONLY
|
||||
? allImages.filter((f) => OCR_ONLY.includes(basename(f, extname(f))))
|
||||
: allImages;
|
||||
const existing: Record<string, OcrResult> = loadExisting(OCR_PATH, {});
|
||||
const failures: Record<string, string> = loadExisting(FAIL_PATH, {});
|
||||
|
||||
let pending = images.filter((f) => {
|
||||
const nameKr = basename(f, extname(f));
|
||||
return !(nameKr in existing);
|
||||
});
|
||||
if (OCR_LIMIT && Number.isFinite(OCR_LIMIT)) {
|
||||
pending = pending.slice(0, OCR_LIMIT);
|
||||
}
|
||||
|
||||
console.log(`[OCR] 전체 ${allImages.length}개 중 대상 ${images.length}개, 이미 처리 ${Object.keys(existing).length}개, 이번 실행 ${pending.length}개`);
|
||||
console.log(`[모델] ${MODEL}, 동시 ${CONCURRENCY}, 재시도 최대 ${MAX_RETRIES}`);
|
||||
console.log(`[출력] ${OCR_PATH}`);
|
||||
|
||||
let done = 0;
|
||||
let failed = 0;
|
||||
|
||||
await runPool(pending, async (file, idx) => {
|
||||
const nameKr = basename(file, extname(file));
|
||||
const path = resolve(IMG_DIR, file);
|
||||
try {
|
||||
const result = await processWithRetry(client, path, nameKr);
|
||||
existing[nameKr] = result;
|
||||
delete failures[nameKr];
|
||||
done++;
|
||||
if (done % 10 === 0 || done === pending.length) {
|
||||
writeFileSync(OCR_PATH, JSON.stringify(existing, null, 2), 'utf-8');
|
||||
console.log(` 진행 ${done}/${pending.length} (실패 ${failed}) - 중간 저장`);
|
||||
}
|
||||
} catch (err) {
|
||||
failed++;
|
||||
failures[nameKr] = String(err).slice(0, 500);
|
||||
console.error(`[실패] ${nameKr}: ${String(err).slice(0, 200)}`);
|
||||
}
|
||||
});
|
||||
|
||||
writeFileSync(OCR_PATH, JSON.stringify(existing, null, 2), 'utf-8');
|
||||
writeFileSync(FAIL_PATH, JSON.stringify(failures, null, 2), 'utf-8');
|
||||
|
||||
console.log(`\n[완료] 성공 ${Object.keys(existing).length} / 실패 ${Object.keys(failures).length}`);
|
||||
console.log(` OCR 결과: ${OCR_PATH}`);
|
||||
if (Object.keys(failures).length > 0) {
|
||||
console.log(` 실패 목록: ${FAIL_PATH} (재실행하면 실패분만 재시도)`);
|
||||
}
|
||||
}
|
||||
|
||||
main().catch((err) => {
|
||||
console.error(err);
|
||||
process.exit(1);
|
||||
});
|
||||
@ -1,324 +0,0 @@
|
||||
"""로컬 EasyOCR 기반 HNS 카드 이미지 파싱.
|
||||
|
||||
전용 venv(.venv)에 설치된 easyocr을 사용한다.
|
||||
|
||||
1. 이미지 → EasyOCR → (bbox, text, conf) 리스트
|
||||
2. y좌표로 행 그룹화 후 각 행 내 x좌표 정렬
|
||||
3. 레이블 키워드 기반 필드 매핑 (정규식)
|
||||
4. 결과를 out/ocr.json 에 누적 저장 (재실행 가능)
|
||||
|
||||
실행:
|
||||
cd backend/scripts/hns-import
|
||||
source .venv/Scripts/activate # Windows Git Bash
|
||||
python ocr-local.py [--limit N] [--only 벤젠,톨루엔,...]
|
||||
"""
|
||||
from __future__ import annotations
|
||||
|
||||
import argparse
|
||||
import io
|
||||
import json
|
||||
import os
|
||||
import re
|
||||
import sys
|
||||
from pathlib import Path
|
||||
from typing import Any
|
||||
|
||||
sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='utf-8')
|
||||
|
||||
SCRIPT_DIR = Path(__file__).parent.resolve()
|
||||
OUT_DIR = SCRIPT_DIR / 'out'
|
||||
IMG_DIR = OUT_DIR / 'images'
|
||||
OCR_PATH_DEFAULT = OUT_DIR / 'ocr.json'
|
||||
FAIL_PATH_DEFAULT = OUT_DIR / 'ocr-failures.json'
|
||||
|
||||
|
||||
# ────────── 필드 레이블 패턴 (EasyOCR 오인식 변형 포함) ──────────
|
||||
# 각 필드의 후보 레이블 문자열(공백 제거 후 비교). 한글 OCR이 종종 비슷한 글자로 오인식되므로
|
||||
# 대표적인 변형도 함께 등록 (예: "인화점" ↔ "인회점", "끓는점" ↔ "꿈는점" ↔ "끝는점").
|
||||
LABEL_CANDIDATES: dict[str, list[str]] = {
|
||||
'casNumber': ['CAS번호', 'CASNO', 'CAS'],
|
||||
'unNumber': ['UN번호', 'UNNO', 'UN'],
|
||||
'transportMethod': ['운송방법', '운승방벌', '운송방벌', '운송방립', '운송'],
|
||||
'usage': ['용도'],
|
||||
'state': ['성상', '상태', '형태'],
|
||||
'color': ['색상', '색'],
|
||||
'odor': ['냄새'],
|
||||
'flashPoint': ['인화점', '인회점', '인하점', '인호점'],
|
||||
'autoIgnition': ['발화점', '발회점', '발하점'],
|
||||
'boilingPoint': ['끓는점', '꿈는점', '끝는점', '끊는점'],
|
||||
'density': ['비중'],
|
||||
'solubility': ['용해도', '용해'],
|
||||
'vaporPressure': ['증기압', '증기압력'],
|
||||
'vaporDensity': ['증기밀도'],
|
||||
'explosionRange': ['폭발범위', '곡발범위', '폭범위', '폭발한계'],
|
||||
'idlh': ['IDLH'],
|
||||
'aegl2': ['AEGL-2', 'AEGL2'],
|
||||
'erpg2': ['ERPG-2', 'ERPG2'],
|
||||
'twa': ['TWA'],
|
||||
'stel': ['STEL'],
|
||||
'ergNumber': ['ERG번호', 'ERG'],
|
||||
'hazardClass': ['위험분류', '위험', '분류'],
|
||||
'synonymsKr': ['유사명'],
|
||||
'responseDistanceFire': ['대피거리', '머피거리'],
|
||||
'ppeClose': ['근거리(레벨A)', '근거리레벨A', '근거리', '레벨A'],
|
||||
'ppeFar': ['원거리(레벨C)', '원거리레벨C', '원거리', '레벨C'],
|
||||
'emsFire': ['화재(F-E)', '화재(F-C)', '화재(F-D)', '화재대응'],
|
||||
'emsSpill': ['유출(S-U)', '유출(S-O)', '유출(S-D)', '해상유출'],
|
||||
'marineResponse': ['해상대응', '해상'],
|
||||
}
|
||||
|
||||
|
||||
def _norm_label(s: str) -> str:
|
||||
"""공백/특수문자 제거 후 비교용 정규화."""
|
||||
return re.sub(r'[\s,.·()\[\]:;\'"-]+', '', s).strip()
|
||||
|
||||
|
||||
LABEL_INDEX: dict[str, str] = {}
|
||||
for _field, _candidates in LABEL_CANDIDATES.items():
|
||||
for _cand in _candidates:
|
||||
LABEL_INDEX[_norm_label(_cand)] = _field
|
||||
|
||||
# NFPA 셀 값(한 자릿수 0~4) 추출용
|
||||
NFPA_VALUE_RE = re.compile(r'^[0-4]$')
|
||||
|
||||
|
||||
def group_rows(items: list[dict], y_tolerance_ratio: float = 0.6) -> list[list[dict]]:
|
||||
"""텍스트 조각들을 y 좌표 기준으로 행 단위로 그룹화 (글자 높이 비례 허용치)."""
|
||||
if not items:
|
||||
return []
|
||||
heights = [it['y1'] - it['y0'] for it in items]
|
||||
median_h = sorted(heights)[len(heights) // 2]
|
||||
y_tol = max(8, median_h * y_tolerance_ratio)
|
||||
|
||||
sorted_items = sorted(items, key=lambda it: it['cy'])
|
||||
rows: list[list[dict]] = []
|
||||
for it in sorted_items:
|
||||
if rows and abs(it['cy'] - rows[-1][-1]['cy']) <= y_tol:
|
||||
rows[-1].append(it)
|
||||
else:
|
||||
rows.append([it])
|
||||
for row in rows:
|
||||
row.sort(key=lambda it: it['cx'])
|
||||
return rows
|
||||
|
||||
|
||||
def _match_label(text: str) -> str | None:
|
||||
key = _norm_label(text)
|
||||
if not key:
|
||||
return None
|
||||
# 정확 일치 우선
|
||||
if key in LABEL_INDEX:
|
||||
return LABEL_INDEX[key]
|
||||
# 접두 일치 (OCR이 뒤에 잡티를 붙이는 경우)
|
||||
for cand_key, field in LABEL_INDEX.items():
|
||||
if len(cand_key) >= 2 and key.startswith(cand_key):
|
||||
return field
|
||||
return None
|
||||
|
||||
|
||||
def parse_card(items: list[dict]) -> dict[str, Any]:
|
||||
"""OCR 결과 목록을 필드 dict로 변환."""
|
||||
rows = group_rows(items)
|
||||
result: dict[str, Any] = {}
|
||||
|
||||
# 1) 행 내 "레이블 → 값" 쌍 추출
|
||||
# 같은 행에서 레이블 바로 뒤의 첫 non-label 텍스트를 값으로 사용.
|
||||
for row in rows:
|
||||
# 여러 레이블이 같은 행에 있을 수 있음 (2컬럼 표 구조)
|
||||
idx = 0
|
||||
while idx < len(row):
|
||||
field = _match_label(row[idx]['text'])
|
||||
if field:
|
||||
# 다음 non-label 조각을 값으로 취함
|
||||
value_parts: list[str] = []
|
||||
j = idx + 1
|
||||
while j < len(row):
|
||||
nxt = row[j]
|
||||
if _match_label(nxt['text']):
|
||||
break
|
||||
value_parts.append(nxt['text'])
|
||||
j += 1
|
||||
if value_parts and field not in result:
|
||||
value = ' '.join(value_parts).strip()
|
||||
if value and value not in ('-', '–', 'N/A'):
|
||||
result[field] = value
|
||||
idx = j
|
||||
else:
|
||||
idx += 1
|
||||
|
||||
# 2) NFPA 추출: "NFPA" 단어 주변의 0~4 숫자 3개
|
||||
nfpa_idx_row: int | None = None
|
||||
for ri, row in enumerate(rows):
|
||||
for cell in row:
|
||||
if re.search(r'NFPA', cell['text']):
|
||||
nfpa_idx_row = ri
|
||||
break
|
||||
if nfpa_idx_row is not None:
|
||||
break
|
||||
if nfpa_idx_row is not None:
|
||||
# 해당 행 + 다음 2개 행에서 0~4 숫자 수집
|
||||
candidates: list[int] = []
|
||||
for ri in range(nfpa_idx_row, min(nfpa_idx_row + 3, len(rows))):
|
||||
for cell in rows[ri]:
|
||||
m = NFPA_VALUE_RE.match(cell['text'].strip())
|
||||
if m:
|
||||
candidates.append(int(cell['text'].strip()))
|
||||
if len(candidates) >= 3:
|
||||
break
|
||||
if len(candidates) >= 3:
|
||||
break
|
||||
if len(candidates) >= 3:
|
||||
result['nfpa'] = {
|
||||
'health': candidates[0],
|
||||
'fire': candidates[1],
|
||||
'reactivity': candidates[2],
|
||||
'special': '',
|
||||
}
|
||||
|
||||
# 3) EmS 코드 (F-x / S-x 패턴)
|
||||
all_text = ' '.join(cell['text'] for row in rows for cell in row)
|
||||
f_match = re.search(r'F\s*-\s*([A-Z])', all_text)
|
||||
s_match = re.search(r'S\s*-\s*([A-Z])', all_text)
|
||||
if f_match or s_match:
|
||||
parts = []
|
||||
if f_match:
|
||||
parts.append(f'F-{f_match.group(1)}')
|
||||
if s_match:
|
||||
parts.append(f'S-{s_match.group(1)}')
|
||||
if parts:
|
||||
result['emsCode'] = ', '.join(parts)
|
||||
|
||||
# 4) ERG 번호 (3자리 숫자, P 접미사 가능, "ERG" 키워드 근처)
|
||||
erg_match = re.search(r'ERG[^\d]{0,10}(\d{3}P?)', all_text)
|
||||
if erg_match:
|
||||
result['ergNumber'] = erg_match.group(1)
|
||||
|
||||
# 5) EmS F-x / S-x 코드 뒤의 본문 (생략 - 이미지 내 텍스트 밀도가 낮아 행 단위로 이미 잡힘)
|
||||
|
||||
return result
|
||||
|
||||
|
||||
def _preprocess_image(pil_img, upscale: float = 2.5):
|
||||
"""한글 OCR 정확도 향상을 위한 업스케일 + 샤프닝 + 대비 향상."""
|
||||
from PIL import Image, ImageEnhance, ImageFilter
|
||||
import numpy as np
|
||||
|
||||
if pil_img.mode != 'RGB':
|
||||
pil_img = pil_img.convert('RGB')
|
||||
|
||||
# 1) 업스케일 (LANCZOS)
|
||||
w, h = pil_img.size
|
||||
pil_img = pil_img.resize((int(w * upscale), int(h * upscale)), Image.LANCZOS)
|
||||
|
||||
# 2) 대비 향상
|
||||
pil_img = ImageEnhance.Contrast(pil_img).enhance(1.3)
|
||||
|
||||
# 3) 샤프닝
|
||||
pil_img = pil_img.filter(ImageFilter.UnsharpMask(radius=1.5, percent=150, threshold=2))
|
||||
|
||||
return np.array(pil_img)
|
||||
|
||||
|
||||
def run_ocr(image_path: Path, reader, upscale: float = 2.5) -> list[dict]:
|
||||
# OpenCV가 Windows에서 한글 경로를 못 읽으므로 PIL로 로드 후 전처리
|
||||
from PIL import Image
|
||||
with Image.open(image_path) as pil:
|
||||
img = _preprocess_image(pil, upscale=upscale)
|
||||
raw = reader.readtext(img, detail=1, paragraph=False)
|
||||
items: list[dict] = []
|
||||
for bbox, text, conf in raw:
|
||||
if not text or not str(text).strip():
|
||||
continue
|
||||
xs = [p[0] for p in bbox]
|
||||
ys = [p[1] for p in bbox]
|
||||
items.append({
|
||||
'text': str(text).strip(),
|
||||
'cx': sum(xs) / 4.0,
|
||||
'cy': sum(ys) / 4.0,
|
||||
'x0': min(xs),
|
||||
'x1': max(xs),
|
||||
'y0': min(ys),
|
||||
'y1': max(ys),
|
||||
'conf': float(conf),
|
||||
})
|
||||
return items
|
||||
|
||||
|
||||
def load_json(path: Path, fallback):
|
||||
if not path.exists():
|
||||
return fallback
|
||||
try:
|
||||
return json.loads(path.read_text(encoding='utf-8'))
|
||||
except Exception:
|
||||
return fallback
|
||||
|
||||
|
||||
def main() -> None:
|
||||
parser = argparse.ArgumentParser()
|
||||
parser.add_argument('--limit', type=int, default=None)
|
||||
parser.add_argument('--only', type=str, default=None,
|
||||
help='파이프(|)로 구분된 물질명 리스트')
|
||||
parser.add_argument('--img-dir', type=Path, default=IMG_DIR)
|
||||
parser.add_argument('--out', type=Path, default=OCR_PATH_DEFAULT)
|
||||
parser.add_argument('--fail', type=Path, default=FAIL_PATH_DEFAULT)
|
||||
parser.add_argument('--debug', action='store_true',
|
||||
help='파싱 중간 결과(row 단위) 함께 출력')
|
||||
args = parser.parse_args()
|
||||
|
||||
import easyocr # noqa: WPS433
|
||||
|
||||
print('[로딩] EasyOCR 모델 (ko + en)... (최초 실행 시 수 분 소요)')
|
||||
reader = easyocr.Reader(['ko', 'en'], gpu=False, verbose=False)
|
||||
print('[로딩] 완료')
|
||||
|
||||
images = sorted([p for p in args.img_dir.iterdir() if p.suffix.lower() in {'.png', '.jpg', '.jpeg'}])
|
||||
if args.only:
|
||||
only_set = {s.strip() for s in args.only.split('|') if s.strip()}
|
||||
images = [p for p in images if p.stem in only_set]
|
||||
|
||||
existing: dict[str, Any] = load_json(args.out, {})
|
||||
failures: dict[str, str] = load_json(args.fail, {})
|
||||
|
||||
pending = [p for p in images if p.stem not in existing]
|
||||
if args.limit:
|
||||
pending = pending[: args.limit]
|
||||
|
||||
print(f'[대상] {len(images)}개 중 대기 {len(pending)}개, 이미 처리 {len(existing)}개')
|
||||
|
||||
ok = 0
|
||||
fail = 0
|
||||
for i, path in enumerate(pending, start=1):
|
||||
name = path.stem
|
||||
try:
|
||||
items = run_ocr(path, reader)
|
||||
parsed = parse_card(items)
|
||||
if args.debug:
|
||||
print(f'\n--- {name} (텍스트 {len(items)}개) ---')
|
||||
for row in group_rows(items):
|
||||
print(' |', ' │ '.join(f'{c["text"]}' for c in row))
|
||||
print(f' → parsed: {parsed}')
|
||||
existing[name] = parsed
|
||||
if name in failures:
|
||||
del failures[name]
|
||||
ok += 1
|
||||
except Exception as e: # noqa: BLE001
|
||||
failures[name] = f'{type(e).__name__}: {e}'[:500]
|
||||
fail += 1
|
||||
print(f'[실패] {name}: {e}')
|
||||
|
||||
if i % 10 == 0 or i == len(pending):
|
||||
args.out.write_text(json.dumps(existing, ensure_ascii=False, indent=2), encoding='utf-8')
|
||||
args.fail.write_text(json.dumps(failures, ensure_ascii=False, indent=2), encoding='utf-8')
|
||||
print(f' 진행 {i}/{len(pending)} (성공 {ok}, 실패 {fail}) - 중간 저장')
|
||||
|
||||
args.out.write_text(json.dumps(existing, ensure_ascii=False, indent=2), encoding='utf-8')
|
||||
args.fail.write_text(json.dumps(failures, ensure_ascii=False, indent=2), encoding='utf-8')
|
||||
|
||||
print(f'\n[완료] 성공 {ok} / 실패 {fail}')
|
||||
print(f' 결과: {args.out}')
|
||||
if failures:
|
||||
print(f' 실패 목록: {args.fail}')
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
main()
|
||||
@ -1,29 +0,0 @@
|
||||
# extract-excel.py 용
|
||||
openpyxl>=3.1.0
|
||||
|
||||
# ocr-local.py 용 (EasyOCR 기반 로컬 OCR, 대안 파이프라인)
|
||||
easyocr==1.7.2
|
||||
filelock==3.19.1
|
||||
fsspec==2025.10.0
|
||||
ImageIO==2.37.2
|
||||
Jinja2==3.1.6
|
||||
lazy-loader==0.5
|
||||
MarkupSafe==3.0.3
|
||||
mpmath==1.3.0
|
||||
networkx==3.2.1
|
||||
ninja==1.13.0
|
||||
numpy==2.0.2
|
||||
opencv-python-headless==4.13.0.92
|
||||
packaging==26.1
|
||||
pillow==11.3.0
|
||||
pyclipper==1.3.0.post6
|
||||
python-bidi==0.6.7
|
||||
PyYAML==6.0.3
|
||||
scikit-image==0.24.0
|
||||
scipy==1.13.1
|
||||
shapely==2.0.7
|
||||
sympy==1.14.0
|
||||
tifffile==2024.8.30
|
||||
torch==2.8.0
|
||||
torchvision==0.23.0
|
||||
typing_extensions==4.15.0
|
||||
@ -1,8 +1,6 @@
|
||||
import express from 'express';
|
||||
import { mkdirSync, existsSync } from 'fs';
|
||||
import multer from 'multer';
|
||||
import path from 'path';
|
||||
import { randomUUID } from 'crypto';
|
||||
import {
|
||||
listMedia,
|
||||
createMedia,
|
||||
@ -27,29 +25,6 @@ import { requireAuth, requirePermission } from '../auth/authMiddleware.js';
|
||||
const router = express.Router();
|
||||
const stitchUpload = multer({ storage: multer.memoryStorage(), limits: { fileSize: 50 * 1024 * 1024 } });
|
||||
|
||||
const mediaUpload = multer({
|
||||
storage: multer.diskStorage({
|
||||
destination: (_req, _file, cb) => {
|
||||
const dir = path.resolve('uploads', 'aerial');
|
||||
mkdirSync(dir, { recursive: true });
|
||||
cb(null, dir);
|
||||
},
|
||||
filename: (_req, file, cb) => {
|
||||
const ext = path.extname(file.originalname);
|
||||
cb(null, `${randomUUID()}${ext}`);
|
||||
},
|
||||
}),
|
||||
limits: { fileSize: 2 * 1024 * 1024 * 1024 }, // 2GB
|
||||
fileFilter: (_req, file, cb) => {
|
||||
const allowed = /\.(jpe?g|png|tiff?|geotiff|mp4|mov)$/i;
|
||||
if (allowed.test(path.extname(file.originalname))) {
|
||||
cb(null, true);
|
||||
} else {
|
||||
cb(new Error('허용되지 않는 파일 형식입니다.'));
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
// ============================================================
|
||||
// AERIAL_MEDIA 라우트
|
||||
// ============================================================
|
||||
@ -98,96 +73,6 @@ router.post('/media', requireAuth, requirePermission('aerial', 'CREATE'), async
|
||||
}
|
||||
});
|
||||
|
||||
// POST /api/aerial/media/upload — 파일 업로드 + 메타 등록
|
||||
router.post('/media/upload', requireAuth, requirePermission('aerial', 'CREATE'), mediaUpload.single('file'), async (req, res) => {
|
||||
try {
|
||||
const file = req.file;
|
||||
if (!file) {
|
||||
res.status(400).json({ error: '파일이 필요합니다.' });
|
||||
return;
|
||||
}
|
||||
const { equipTpCd, equipNm, mediaTpCd, acdntSn, memo } = req.body as {
|
||||
equipTpCd?: string;
|
||||
equipNm?: string;
|
||||
mediaTpCd?: string;
|
||||
acdntSn?: string;
|
||||
memo?: string;
|
||||
};
|
||||
|
||||
const isVideo = file.mimetype.startsWith('video/');
|
||||
const detectedMediaType = mediaTpCd ?? (isVideo ? '영상' : '사진');
|
||||
const fileSzMb = (file.size / (1024 * 1024)).toFixed(2) + ' MB';
|
||||
|
||||
const result = await createMedia({
|
||||
fileNm: file.filename,
|
||||
orgnlNm: file.originalname,
|
||||
filePath: file.path,
|
||||
equipTpCd: equipTpCd ?? 'drone',
|
||||
equipNm: equipNm ?? '기타',
|
||||
mediaTpCd: detectedMediaType,
|
||||
fileSz: fileSzMb,
|
||||
acdntSn: acdntSn ? parseInt(acdntSn, 10) : undefined,
|
||||
locDc: memo ?? undefined,
|
||||
});
|
||||
|
||||
res.status(201).json(result);
|
||||
} catch (err) {
|
||||
console.error('[aerial] 미디어 업로드 오류:', err);
|
||||
res.status(500).json({ error: '미디어 업로드 실패' });
|
||||
}
|
||||
});
|
||||
|
||||
// GET /api/aerial/media/:sn/view — 원본 이미지 뷰어용 (inline 표시)
|
||||
router.get('/media/:sn/view', requireAuth, requirePermission('aerial', 'READ'), async (req, res) => {
|
||||
try {
|
||||
const sn = parseInt(req.params['sn'] as string, 10);
|
||||
if (!isValidNumber(sn, 1, 999999)) {
|
||||
res.status(400).json({ error: '유효하지 않은 미디어 번호' });
|
||||
return;
|
||||
}
|
||||
|
||||
const media = await getMediaBySn(sn);
|
||||
if (!media) {
|
||||
res.status(404).json({ error: '미디어를 찾을 수 없습니다.' });
|
||||
return;
|
||||
}
|
||||
|
||||
// 로컬 업로드 파일이면 직접 서빙
|
||||
if (media.filePath) {
|
||||
const absPath = path.resolve(media.filePath);
|
||||
if (existsSync(absPath)) {
|
||||
const ext = path.extname(absPath).toLowerCase();
|
||||
const mimeMap: Record<string, string> = {
|
||||
'.jpg': 'image/jpeg', '.jpeg': 'image/jpeg', '.png': 'image/png',
|
||||
'.tif': 'image/tiff', '.tiff': 'image/tiff',
|
||||
'.mp4': 'video/mp4', '.mov': 'video/quicktime',
|
||||
};
|
||||
res.setHeader('Content-Type', mimeMap[ext] ?? 'application/octet-stream');
|
||||
res.setHeader('Content-Disposition', 'inline');
|
||||
res.setHeader('Cache-Control', 'private, max-age=300');
|
||||
res.sendFile(absPath);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const fileId = media.fileNm.substring(0, 36);
|
||||
const UUID_PATTERN = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
|
||||
if (!UUID_PATTERN.test(fileId) || !media.equipNm) {
|
||||
res.status(404).json({ error: '표시 가능한 이미지가 없습니다.' });
|
||||
return;
|
||||
}
|
||||
|
||||
const buffer = await fetchOriginalImage(media.equipNm, fileId);
|
||||
res.setHeader('Content-Type', 'image/jpeg');
|
||||
res.setHeader('Content-Disposition', 'inline');
|
||||
res.setHeader('Cache-Control', 'private, max-age=300');
|
||||
res.send(buffer);
|
||||
} catch (err) {
|
||||
console.error('[aerial] 이미지 뷰어 오류:', err);
|
||||
res.status(502).json({ error: '이미지 조회 실패' });
|
||||
}
|
||||
});
|
||||
|
||||
// GET /api/aerial/media/:sn/download — 원본 이미지 다운로드
|
||||
router.get('/media/:sn/download', requireAuth, requirePermission('aerial', 'READ'), async (req, res) => {
|
||||
try {
|
||||
|
||||
@ -368,7 +368,7 @@ export async function updateSatRequestStatus(sn: number, sttsCd: string): Promis
|
||||
// OIL INFERENCE (GPU 서버 프록시)
|
||||
// ============================================================
|
||||
|
||||
const IMAGE_API_URL = process.env.IMAGE_API_URL ?? 'http://211.208.115.83:5001';
|
||||
const IMAGE_API_URL = process.env.IMAGE_API_URL ?? 'http://localhost:5001';
|
||||
const OIL_INFERENCE_URL = process.env.OIL_INFERENCE_URL || 'http://localhost:8090';
|
||||
const INFERENCE_TIMEOUT_MS = 10_000;
|
||||
|
||||
|
||||
@ -24,14 +24,8 @@ async function seedHnsSubstances() {
|
||||
|
||||
let inserted = 0
|
||||
|
||||
// varchar 길이 제한에 맞춰 첫 번째 토큰만 검색 컬럼에 저장 (원본은 DATA JSONB에 보존)
|
||||
const firstToken = (v: unknown, max: number): string | null => {
|
||||
if (v == null) return null
|
||||
const s = String(v).split(/[\n,;/]/)[0].trim()
|
||||
return s ? s.slice(0, max) : null
|
||||
}
|
||||
|
||||
for (const s of HNS_SEARCH_DB) {
|
||||
// 검색용 컬럼 추출, 나머지는 DATA JSONB로 저장
|
||||
const { abbreviation, nameKr, nameEn, unNumber, casNumber, sebc, ...detailData } = s
|
||||
|
||||
await client.query(
|
||||
@ -45,16 +39,7 @@ async function seedHnsSubstances() {
|
||||
CAS_NO = EXCLUDED.CAS_NO,
|
||||
SEBC = EXCLUDED.SEBC,
|
||||
DATA = EXCLUDED.DATA`,
|
||||
[
|
||||
s.id,
|
||||
firstToken(abbreviation, 50),
|
||||
firstToken(nameKr, 200) ?? '',
|
||||
firstToken(nameEn, 200),
|
||||
firstToken(unNumber, 10),
|
||||
firstToken(casNumber, 20),
|
||||
firstToken(sebc, 50),
|
||||
JSON.stringify(detailData),
|
||||
]
|
||||
[s.id, abbreviation, nameKr, nameEn, unNumber, casNumber, sebc, JSON.stringify(detailData)]
|
||||
)
|
||||
|
||||
inserted++
|
||||
|
||||
@ -1,20 +0,0 @@
|
||||
import { Router } from 'express';
|
||||
import { requireAuth } from '../auth/authMiddleware.js';
|
||||
import { listGscAccidents } from './gscAccidentsService.js';
|
||||
|
||||
const router = Router();
|
||||
|
||||
// ============================================================
|
||||
// GET /api/gsc/accidents — 외부 수집 사고 목록 (최신 20건)
|
||||
// ============================================================
|
||||
router.get('/', requireAuth, async (_req, res) => {
|
||||
try {
|
||||
const accidents = await listGscAccidents(20);
|
||||
res.json(accidents);
|
||||
} catch (err) {
|
||||
console.error('[gsc] 사고 목록 조회 오류:', err);
|
||||
res.status(500).json({ error: '사고 목록 조회 중 오류가 발생했습니다.' });
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
@ -1,44 +0,0 @@
|
||||
import { wingPool } from '../db/wingDb.js';
|
||||
|
||||
export interface GscAccidentListItem {
|
||||
acdntSn: number;
|
||||
acdntMngNo: string;
|
||||
pollNm: string;
|
||||
pollDate: string | null;
|
||||
lat: number | null;
|
||||
lon: number | null;
|
||||
}
|
||||
|
||||
export async function listGscAccidents(limit = 20): Promise<GscAccidentListItem[]> {
|
||||
const sql = `
|
||||
SELECT
|
||||
ACDNT_SN AS "acdntSn",
|
||||
ACDNT_CD AS "acdntMngNo",
|
||||
ACDNT_NM AS "pollNm",
|
||||
to_char(OCCRN_DTM, 'YYYY-MM-DD"T"HH24:MI') AS "pollDate",
|
||||
LAT AS "lat",
|
||||
LNG AS "lon"
|
||||
FROM wing.ACDNT
|
||||
WHERE ACDNT_NM IS NOT NULL
|
||||
ORDER BY OCCRN_DTM DESC NULLS LAST
|
||||
LIMIT $1
|
||||
`;
|
||||
|
||||
const result = await wingPool.query<{
|
||||
acdntSn: number;
|
||||
acdntMngNo: string;
|
||||
pollNm: string;
|
||||
pollDate: string | null;
|
||||
lat: string | null;
|
||||
lon: string | null;
|
||||
}>(sql, [limit]);
|
||||
|
||||
return result.rows.map((row) => ({
|
||||
acdntSn: row.acdntSn,
|
||||
acdntMngNo: row.acdntMngNo,
|
||||
pollNm: row.pollNm,
|
||||
pollDate: row.pollDate,
|
||||
lat: row.lat != null ? Number(row.lat) : null,
|
||||
lon: row.lon != null ? Number(row.lon) : null,
|
||||
}));
|
||||
}
|
||||
@ -12,13 +12,11 @@ const router = express.Router()
|
||||
// GET /api/hns/analyses — 분석 목록
|
||||
router.get('/analyses', requireAuth, requirePermission('hns', 'READ'), async (req, res) => {
|
||||
try {
|
||||
const { status, substance, search, acdntSn } = req.query
|
||||
const acdntSnNum = acdntSn ? parseInt(acdntSn as string, 10) : undefined
|
||||
const { status, substance, search } = req.query
|
||||
const items = await listAnalyses({
|
||||
status: status as string | undefined,
|
||||
substance: substance as string | undefined,
|
||||
search: search as string | undefined,
|
||||
acdntSn: acdntSnNum && !Number.isNaN(acdntSnNum) ? acdntSnNum : undefined,
|
||||
})
|
||||
res.json(items)
|
||||
} catch (err) {
|
||||
@ -50,15 +48,13 @@ router.get('/analyses/:sn', requireAuth, requirePermission('hns', 'READ'), async
|
||||
// POST /api/hns/analyses — 분석 생성
|
||||
router.post('/analyses', requireAuth, requirePermission('hns', 'CREATE'), async (req, res) => {
|
||||
try {
|
||||
const { anlysNm, acdntSn, acdntDtm, locNm, lon, lat, sbstNm, spilQty, spilUnitCd, fcstHr, algoCd, critMdlCd, windSpd, windDir, temp, humid, atmStblCd, analystNm } = req.body
|
||||
const { anlysNm, acdntDtm, locNm, lon, lat, sbstNm, spilQty, spilUnitCd, fcstHr, algoCd, critMdlCd, windSpd, windDir, temp, humid, atmStblCd, analystNm } = req.body
|
||||
if (!anlysNm) {
|
||||
res.status(400).json({ error: '분석명은 필수입니다.' })
|
||||
return
|
||||
}
|
||||
const acdntSnNum = acdntSn != null ? parseInt(String(acdntSn), 10) : undefined
|
||||
const result = await createAnalysis({
|
||||
anlysNm, acdntSn: acdntSnNum && !Number.isNaN(acdntSnNum) ? acdntSnNum : undefined,
|
||||
acdntDtm, locNm, lon, lat, sbstNm, spilQty, spilUnitCd, fcstHr, algoCd, critMdlCd, windSpd, windDir, temp, humid, atmStblCd, analystNm,
|
||||
anlysNm, acdntDtm, locNm, lon, lat, sbstNm, spilQty, spilUnitCd, fcstHr, algoCd, critMdlCd, windSpd, windDir, temp, humid, atmStblCd, analystNm,
|
||||
})
|
||||
res.status(201).json(result)
|
||||
} catch (err) {
|
||||
|
||||
@ -94,7 +94,6 @@ export async function searchSubstances(params: HnsSearchParams) {
|
||||
|
||||
interface HnsAnalysisItem {
|
||||
hnsAnlysSn: number
|
||||
acdntSn: number | null
|
||||
anlysNm: string
|
||||
acdntDtm: string | null
|
||||
locNm: string | null
|
||||
@ -119,13 +118,11 @@ interface ListAnalysesInput {
|
||||
status?: string
|
||||
substance?: string
|
||||
search?: string
|
||||
acdntSn?: number
|
||||
}
|
||||
|
||||
function rowToAnalysis(r: Record<string, unknown>): HnsAnalysisItem {
|
||||
return {
|
||||
hnsAnlysSn: r.hns_anlys_sn as number,
|
||||
acdntSn: (r.acdnt_sn as number) ?? null,
|
||||
anlysNm: r.anlys_nm as string,
|
||||
acdntDtm: r.acdnt_dtm as string | null,
|
||||
locNm: r.loc_nm as string | null,
|
||||
@ -149,7 +146,7 @@ function rowToAnalysis(r: Record<string, unknown>): HnsAnalysisItem {
|
||||
|
||||
export async function listAnalyses(input: ListAnalysesInput): Promise<HnsAnalysisItem[]> {
|
||||
const conditions: string[] = ["USE_YN = 'Y'"]
|
||||
const params: (string | number)[] = []
|
||||
const params: string[] = []
|
||||
let idx = 1
|
||||
|
||||
if (input.status) {
|
||||
@ -165,13 +162,9 @@ export async function listAnalyses(input: ListAnalysesInput): Promise<HnsAnalysi
|
||||
params.push(input.search)
|
||||
idx++
|
||||
}
|
||||
if (input.acdntSn != null) {
|
||||
conditions.push(`ACDNT_SN = $${idx++}`)
|
||||
params.push(input.acdntSn)
|
||||
}
|
||||
|
||||
const { rows } = await wingPool.query(
|
||||
`SELECT HNS_ANLYS_SN, ACDNT_SN, ANLYS_NM, ACDNT_DTM, LOC_NM, LON, LAT,
|
||||
`SELECT HNS_ANLYS_SN, ANLYS_NM, ACDNT_DTM, LOC_NM, LON, LAT,
|
||||
SBST_NM, SPIL_QTY, SPIL_UNIT_CD, FCST_HR, ALGO_CD, CRIT_MDL_CD,
|
||||
WIND_SPD, WIND_DIR, EXEC_STTS_CD, RISK_CD, ANALYST_NM,
|
||||
RSLT_DATA, REG_DTM
|
||||
@ -186,7 +179,7 @@ export async function listAnalyses(input: ListAnalysesInput): Promise<HnsAnalysi
|
||||
|
||||
export async function getAnalysis(sn: number): Promise<HnsAnalysisItem | null> {
|
||||
const { rows } = await wingPool.query(
|
||||
`SELECT HNS_ANLYS_SN, ACDNT_SN, ANLYS_NM, ACDNT_DTM, LOC_NM, LON, LAT,
|
||||
`SELECT HNS_ANLYS_SN, ANLYS_NM, ACDNT_DTM, LOC_NM, LON, LAT,
|
||||
SBST_NM, SPIL_QTY, SPIL_UNIT_CD, FCST_HR, ALGO_CD, CRIT_MDL_CD,
|
||||
WIND_SPD, WIND_DIR, TEMP, HUMID, ATM_STBL_CD,
|
||||
EXEC_STTS_CD, RISK_CD, ANALYST_NM,
|
||||
@ -201,7 +194,6 @@ export async function getAnalysis(sn: number): Promise<HnsAnalysisItem | null> {
|
||||
|
||||
export async function createAnalysis(input: {
|
||||
anlysNm: string
|
||||
acdntSn?: number
|
||||
acdntDtm?: string
|
||||
locNm?: string
|
||||
lon?: number
|
||||
@ -221,21 +213,21 @@ export async function createAnalysis(input: {
|
||||
}): Promise<{ hnsAnlysSn: number }> {
|
||||
const { rows } = await wingPool.query(
|
||||
`INSERT INTO HNS_ANALYSIS (
|
||||
ACDNT_SN, ANLYS_NM, ACDNT_DTM, LOC_NM, LON, LAT,
|
||||
ANLYS_NM, ACDNT_DTM, LOC_NM, LON, LAT,
|
||||
GEOM, LOC_DC,
|
||||
SBST_NM, SPIL_QTY, SPIL_UNIT_CD, FCST_HR, ALGO_CD, CRIT_MDL_CD,
|
||||
WIND_SPD, WIND_DIR, TEMP, HUMID, ATM_STBL_CD,
|
||||
ANALYST_NM, EXEC_STTS_CD
|
||||
) VALUES (
|
||||
$1, $2, $3, $4, $5::numeric, $6::numeric,
|
||||
CASE WHEN $5 IS NOT NULL AND $6 IS NOT NULL THEN ST_SetSRID(ST_MakePoint($5::double precision, $6::double precision), 4326) END,
|
||||
CASE WHEN $5 IS NOT NULL AND $6 IS NOT NULL THEN $5::text || ' + ' || $6::text END,
|
||||
$7, $8, $9, $10, $11, $12,
|
||||
$13, $14, $15, $16, $17,
|
||||
$18, 'PENDING'
|
||||
$1, $2, $3, $4::numeric, $5::numeric,
|
||||
CASE WHEN $4 IS NOT NULL AND $5 IS NOT NULL THEN ST_SetSRID(ST_MakePoint($4::double precision, $5::double precision), 4326) END,
|
||||
CASE WHEN $4 IS NOT NULL AND $5 IS NOT NULL THEN $4::text || ' + ' || $5::text END,
|
||||
$6, $7, $8, $9, $10, $11,
|
||||
$12, $13, $14, $15, $16,
|
||||
$17, 'PENDING'
|
||||
) RETURNING HNS_ANLYS_SN`,
|
||||
[
|
||||
input.acdntSn || null, input.anlysNm, input.acdntDtm || null, input.locNm || null, input.lon || null, input.lat || null,
|
||||
input.anlysNm, input.acdntDtm || null, input.locNm || null, input.lon || null, input.lat || null,
|
||||
input.sbstNm || null, input.spilQty || null, input.spilUnitCd || 'KL',
|
||||
input.fcstHr || null, input.algoCd || null, input.critMdlCd || null,
|
||||
input.windSpd || null, input.windDir || null, input.temp || null, input.humid || null, input.atmStblCd || null,
|
||||
|
||||
@ -7,7 +7,6 @@ import {
|
||||
getIncidentWeather,
|
||||
saveIncidentWeather,
|
||||
getIncidentMedia,
|
||||
getIncidentImageAnalysis,
|
||||
} from './incidentsService.js';
|
||||
|
||||
const router = Router();
|
||||
@ -134,26 +133,4 @@ router.get('/:sn/media', requireAuth, async (req, res) => {
|
||||
}
|
||||
});
|
||||
|
||||
// ============================================================
|
||||
// GET /api/incidents/:sn/image-analysis — 이미지 분석 데이터
|
||||
// ============================================================
|
||||
router.get('/:sn/image-analysis', requireAuth, async (req, res) => {
|
||||
try {
|
||||
const sn = parseInt(req.params.sn as string, 10);
|
||||
if (isNaN(sn)) {
|
||||
res.status(400).json({ error: '유효하지 않은 사고 번호입니다.' });
|
||||
return;
|
||||
}
|
||||
const data = await getIncidentImageAnalysis(sn);
|
||||
if (!data) {
|
||||
res.status(404).json({ error: '이미지 분석 데이터가 없습니다.' });
|
||||
return;
|
||||
}
|
||||
res.json(data);
|
||||
} catch (err) {
|
||||
console.error('[incidents] 이미지 분석 데이터 조회 오류:', err);
|
||||
res.status(500).json({ error: '이미지 분석 데이터 조회 중 오류가 발생했습니다.' });
|
||||
}
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
||||
@ -24,11 +24,7 @@ interface IncidentListItem {
|
||||
spilQty: number | null;
|
||||
spilUnitCd: string | null;
|
||||
fcstHr: number | null;
|
||||
hasPredCompleted: boolean;
|
||||
hasHnsCompleted: boolean;
|
||||
hasRescueCompleted: boolean;
|
||||
mediaCnt: number;
|
||||
hasImgAnalysis: boolean;
|
||||
}
|
||||
|
||||
interface PredExecItem {
|
||||
@ -115,29 +111,11 @@ export async function listIncidents(filters: {
|
||||
a.LAT, a.LNG, a.LOC_DC, a.OCCRN_DTM, a.REGION_NM, a.OFFICE_NM,
|
||||
a.SVRT_CD, a.VESSEL_TP, a.PHASE_CD, a.ANALYST_NM,
|
||||
s.OIL_TP_CD, s.SPIL_QTY, s.SPIL_UNIT_CD, s.FCST_HR,
|
||||
COALESCE(s.HAS_IMG_ANALYSIS, FALSE) AS has_img_analysis,
|
||||
EXISTS (
|
||||
SELECT 1 FROM wing.PRED_EXEC pe
|
||||
WHERE pe.ACDNT_SN = a.ACDNT_SN AND pe.EXEC_STTS_CD = 'COMPLETED'
|
||||
) AS has_pred_completed,
|
||||
EXISTS (
|
||||
SELECT 1 FROM wing.HNS_ANALYSIS h
|
||||
WHERE h.ACDNT_SN = a.ACDNT_SN
|
||||
AND h.EXEC_STTS_CD = 'COMPLETED'
|
||||
AND h.USE_YN = 'Y'
|
||||
) AS has_hns_completed,
|
||||
EXISTS (
|
||||
SELECT 1 FROM wing.RESCUE_OPS r
|
||||
WHERE r.ACDNT_SN = a.ACDNT_SN
|
||||
AND r.STTS_CD = 'RESOLVED'
|
||||
AND r.USE_YN = 'Y'
|
||||
) AS has_rescue_completed,
|
||||
COALESCE(m.PHOTO_CNT, 0) + COALESCE(m.VIDEO_CNT, 0)
|
||||
+ COALESCE(m.SAT_CNT, 0) + COALESCE(m.CCTV_CNT, 0) AS media_cnt
|
||||
FROM wing.ACDNT a
|
||||
LEFT JOIN LATERAL (
|
||||
SELECT OIL_TP_CD, SPIL_QTY, SPIL_UNIT_CD, FCST_HR,
|
||||
IMG_RSLT_DATA IS NOT NULL AS HAS_IMG_ANALYSIS
|
||||
SELECT OIL_TP_CD, SPIL_QTY, SPIL_UNIT_CD, FCST_HR
|
||||
FROM wing.SPIL_DATA
|
||||
WHERE ACDNT_SN = a.ACDNT_SN
|
||||
ORDER BY SPIL_DATA_SN
|
||||
@ -170,11 +148,7 @@ export async function listIncidents(filters: {
|
||||
spilQty: r.spil_qty != null ? parseFloat(r.spil_qty as string) : null,
|
||||
spilUnitCd: (r.spil_unit_cd as string) ?? null,
|
||||
fcstHr: (r.fcst_hr as number) ?? null,
|
||||
hasPredCompleted: r.has_pred_completed as boolean,
|
||||
hasHnsCompleted: r.has_hns_completed as boolean,
|
||||
hasRescueCompleted: r.has_rescue_completed as boolean,
|
||||
mediaCnt: Number(r.media_cnt),
|
||||
hasImgAnalysis: (r.has_img_analysis as boolean) ?? false,
|
||||
}));
|
||||
}
|
||||
|
||||
@ -188,29 +162,11 @@ export async function getIncident(acdntSn: number): Promise<IncidentDetail | nul
|
||||
a.LAT, a.LNG, a.LOC_DC, a.OCCRN_DTM, a.REGION_NM, a.OFFICE_NM,
|
||||
a.SVRT_CD, a.VESSEL_TP, a.PHASE_CD, a.ANALYST_NM,
|
||||
s.OIL_TP_CD, s.SPIL_QTY, s.SPIL_UNIT_CD, s.FCST_HR,
|
||||
COALESCE(s.HAS_IMG_ANALYSIS, FALSE) AS has_img_analysis,
|
||||
EXISTS (
|
||||
SELECT 1 FROM wing.PRED_EXEC pe
|
||||
WHERE pe.ACDNT_SN = a.ACDNT_SN AND pe.EXEC_STTS_CD = 'COMPLETED'
|
||||
) AS has_pred_completed,
|
||||
EXISTS (
|
||||
SELECT 1 FROM wing.HNS_ANALYSIS h
|
||||
WHERE h.ACDNT_SN = a.ACDNT_SN
|
||||
AND h.EXEC_STTS_CD = 'COMPLETED'
|
||||
AND h.USE_YN = 'Y'
|
||||
) AS has_hns_completed,
|
||||
EXISTS (
|
||||
SELECT 1 FROM wing.RESCUE_OPS r
|
||||
WHERE r.ACDNT_SN = a.ACDNT_SN
|
||||
AND r.STTS_CD = 'RESOLVED'
|
||||
AND r.USE_YN = 'Y'
|
||||
) AS has_rescue_completed,
|
||||
COALESCE(m.PHOTO_CNT, 0) + COALESCE(m.VIDEO_CNT, 0)
|
||||
+ COALESCE(m.SAT_CNT, 0) + COALESCE(m.CCTV_CNT, 0) AS media_cnt
|
||||
FROM wing.ACDNT a
|
||||
LEFT JOIN LATERAL (
|
||||
SELECT OIL_TP_CD, SPIL_QTY, SPIL_UNIT_CD, FCST_HR,
|
||||
IMG_RSLT_DATA IS NOT NULL AS HAS_IMG_ANALYSIS
|
||||
SELECT OIL_TP_CD, SPIL_QTY, SPIL_UNIT_CD, FCST_HR
|
||||
FROM wing.SPIL_DATA
|
||||
WHERE ACDNT_SN = a.ACDNT_SN
|
||||
ORDER BY SPIL_DATA_SN
|
||||
@ -249,11 +205,7 @@ export async function getIncident(acdntSn: number): Promise<IncidentDetail | nul
|
||||
spilQty: r.spil_qty != null ? parseFloat(r.spil_qty as string) : null,
|
||||
spilUnitCd: (r.spil_unit_cd as string) ?? null,
|
||||
fcstHr: (r.fcst_hr as number) ?? null,
|
||||
hasPredCompleted: r.has_pred_completed as boolean,
|
||||
hasHnsCompleted: r.has_hns_completed as boolean,
|
||||
hasRescueCompleted: r.has_rescue_completed as boolean,
|
||||
mediaCnt: Number(r.media_cnt),
|
||||
hasImgAnalysis: (r.has_img_analysis as boolean) ?? false,
|
||||
predictions,
|
||||
weather,
|
||||
media,
|
||||
@ -467,21 +419,3 @@ export async function getIncidentMedia(acdntSn: number): Promise<MediaInfo | nul
|
||||
cctvMeta: (r.cctv_meta as Record<string, unknown>) ?? null,
|
||||
};
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 이미지 분석 데이터 조회
|
||||
// ============================================================
|
||||
export async function getIncidentImageAnalysis(acdntSn: number): Promise<Record<string, unknown> | null> {
|
||||
const sql = `
|
||||
SELECT IMG_RSLT_DATA
|
||||
FROM wing.SPIL_DATA
|
||||
WHERE ACDNT_SN = $1 AND IMG_RSLT_DATA IS NOT NULL
|
||||
ORDER BY SPIL_DATA_SN
|
||||
LIMIT 1
|
||||
`;
|
||||
|
||||
const { rows } = await wingPool.query(sql, [acdntSn]);
|
||||
if (rows.length === 0) return null;
|
||||
|
||||
return (rows[0] as Record<string, unknown>).img_rslt_data as Record<string, unknown>;
|
||||
}
|
||||
|
||||
@ -74,7 +74,7 @@ function parseMeta(metaStr: string): { lat: number; lon: number; occurredAt: str
|
||||
return { lat, lon, occurredAt };
|
||||
}
|
||||
|
||||
export async function analyzeImageFile(imageBuffer: Buffer, originalName: string, acdntNmOverride?: string): Promise<ImageAnalyzeResult> {
|
||||
export async function analyzeImageFile(imageBuffer: Buffer, originalName: string): Promise<ImageAnalyzeResult> {
|
||||
const fileId = crypto.randomUUID();
|
||||
|
||||
// camTy는 현재 "mx15hdi"로 하드코딩한다.
|
||||
@ -122,7 +122,7 @@ export async function analyzeImageFile(imageBuffer: Buffer, originalName: string
|
||||
const volume = firstOil?.volume ?? 0;
|
||||
|
||||
// ACDNT INSERT
|
||||
const acdntNm = acdntNmOverride?.trim() || `이미지분석_${new Date().toISOString().slice(0, 16).replace('T', ' ')}`;
|
||||
const acdntNm = `이미지분석_${new Date().toISOString().slice(0, 16).replace('T', ' ')}`;
|
||||
const acdntRes = await wingPool.query(
|
||||
`INSERT INTO wing.ACDNT
|
||||
(ACDNT_CD, ACDNT_NM, ACDNT_TP_CD, OCCRN_DTM, LAT, LNG, ACDNT_STTS_CD, USE_YN, REG_DTM)
|
||||
@ -145,7 +145,7 @@ export async function analyzeImageFile(imageBuffer: Buffer, originalName: string
|
||||
await wingPool.query(
|
||||
`INSERT INTO wing.SPIL_DATA
|
||||
(ACDNT_SN, OIL_TP_CD, SPIL_QTY, SPIL_UNIT_CD, SPIL_TP_CD, FCST_HR, IMG_RSLT_DATA, REG_DTM)
|
||||
VALUES ($1, $2, $3, 'KL', 'CONTINUOUS', 6, $4, NOW())`,
|
||||
VALUES ($1, $2, $3, 'KL', 'CONTINUOUS', 48, $4, NOW())`,
|
||||
[
|
||||
acdntSn,
|
||||
OIL_DB_CODE_MAP[oilType] ?? 'BUNKER_C',
|
||||
|
||||
@ -5,7 +5,6 @@ import {
|
||||
createBacktrack, saveBoomLine, listBoomLines, getAnalysisTrajectory,
|
||||
getSensitiveResourcesByAcdntSn, getSensitiveResourcesGeoJsonByAcdntSn,
|
||||
getPredictionParticlesGeojsonByAcdntSn, getSensitivityEvaluationGeojsonByAcdntSn,
|
||||
getOilSpillSummary,
|
||||
} from './predictionService.js';
|
||||
import { analyzeImageFile } from './imageAnalyzeService.js';
|
||||
import { isValidNumber } from '../middleware/security.js';
|
||||
@ -71,27 +70,6 @@ router.get('/analyses/:acdntSn/trajectory', requireAuth, requirePermission('pred
|
||||
}
|
||||
});
|
||||
|
||||
// GET /api/prediction/analyses/:acdntSn/oil-summary — 유출유 확산 요약 (분할 패널용)
|
||||
router.get('/analyses/:acdntSn/oil-summary', requireAuth, requirePermission('prediction', 'READ'), async (req, res) => {
|
||||
try {
|
||||
const acdntSn = parseInt(req.params.acdntSn as string, 10);
|
||||
if (!isValidNumber(acdntSn, 1, 999999)) {
|
||||
res.status(400).json({ error: '유효하지 않은 사고 번호' });
|
||||
return;
|
||||
}
|
||||
const predRunSn = req.query.predRunSn ? parseInt(req.query.predRunSn as string, 10) : undefined;
|
||||
const result = await getOilSpillSummary(acdntSn, predRunSn);
|
||||
if (!result) {
|
||||
res.json({ primary: null, byModel: {} });
|
||||
return;
|
||||
}
|
||||
res.json(result);
|
||||
} catch (err) {
|
||||
console.error('[prediction] oil-summary 조회 오류:', err);
|
||||
res.status(500).json({ error: 'oil-summary 조회 실패' });
|
||||
}
|
||||
});
|
||||
|
||||
// GET /api/prediction/analyses/:acdntSn/sensitive-resources — 예측 영역 내 민감자원 집계
|
||||
router.get('/analyses/:acdntSn/sensitive-resources', requireAuth, requirePermission('prediction', 'READ'), async (req, res) => {
|
||||
try {
|
||||
@ -252,8 +230,7 @@ router.post(
|
||||
res.status(400).json({ error: '이미지 파일이 필요합니다' });
|
||||
return;
|
||||
}
|
||||
const acdntNm = typeof req.body?.acdntNm === 'string' ? req.body.acdntNm : undefined;
|
||||
const result = await analyzeImageFile(req.file.buffer, req.file.originalname, acdntNm);
|
||||
const result = await analyzeImageFile(req.file.buffer, req.file.originalname);
|
||||
res.json(result);
|
||||
} catch (err: unknown) {
|
||||
if (err instanceof Error) {
|
||||
|
||||
@ -1,16 +1,6 @@
|
||||
import { wingPool } from '../db/wingDb.js';
|
||||
import { runBacktrackAnalysis } from './backtrackAnalysisService.js';
|
||||
|
||||
function haversineKm(lat1: number, lon1: number, lat2: number, lon2: number): number {
|
||||
const R = 6371;
|
||||
const dLat = (lat2 - lat1) * Math.PI / 180;
|
||||
const dLon = (lon2 - lon1) * Math.PI / 180;
|
||||
const a = Math.sin(dLat / 2) ** 2 +
|
||||
Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
|
||||
Math.sin(dLon / 2) ** 2;
|
||||
return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
|
||||
}
|
||||
|
||||
interface PredictionAnalysis {
|
||||
acdntSn: number;
|
||||
acdntNm: string;
|
||||
@ -822,116 +812,3 @@ export async function listBoomLines(acdntSn: number): Promise<BoomLineItem[]> {
|
||||
regDtm: String(r['reg_dtm'] ?? ''),
|
||||
}));
|
||||
}
|
||||
|
||||
// ── 유출유 확산 요약 (통합조회 분할 패널용) ──────────────
|
||||
export interface OilSpillSummary {
|
||||
model: string;
|
||||
forecastDurationHr: number | null;
|
||||
maxSpreadDistanceKm: number | null;
|
||||
coastArrivalTimeHr: number | null;
|
||||
affectedCoastlineKm: number | null;
|
||||
weatheringRatePct: number | null;
|
||||
remainingVolumeKl: number | null;
|
||||
}
|
||||
|
||||
export interface OilSpillSummaryResponse {
|
||||
primary: OilSpillSummary;
|
||||
byModel: Record<string, OilSpillSummary>;
|
||||
}
|
||||
|
||||
export async function getOilSpillSummary(acdntSn: number, predRunSn?: number): Promise<OilSpillSummaryResponse | null> {
|
||||
const baseSql = `
|
||||
SELECT pe.ALGO_CD, pe.RSLT_DATA,
|
||||
sd.FCST_HR,
|
||||
ST_Y(a.LOC_GEOM) AS spil_lat,
|
||||
ST_X(a.LOC_GEOM) AS spil_lon
|
||||
FROM wing.PRED_EXEC pe
|
||||
LEFT JOIN wing.SPIL_DATA sd ON sd.ACDNT_SN = pe.ACDNT_SN
|
||||
LEFT JOIN wing.ACDNT a ON a.ACDNT_SN = pe.ACDNT_SN
|
||||
WHERE pe.ACDNT_SN = $1
|
||||
AND pe.ALGO_CD IN ('OPENDRIFT', 'POSEIDON')
|
||||
AND pe.EXEC_STTS_CD = 'COMPLETED'
|
||||
AND pe.RSLT_DATA IS NOT NULL
|
||||
`;
|
||||
const sql = predRunSn != null
|
||||
? baseSql + ' AND pe.PRED_RUN_SN = $2 ORDER BY pe.CMPL_DTM DESC'
|
||||
: baseSql + ' ORDER BY pe.CMPL_DTM DESC';
|
||||
const params = predRunSn != null ? [acdntSn, predRunSn] : [acdntSn];
|
||||
const { rows } = await wingPool.query(sql, params);
|
||||
if (rows.length === 0) return null;
|
||||
|
||||
const byModel: Record<string, OilSpillSummary> = {};
|
||||
|
||||
// OpenDrift 우선, 없으면 POSEIDON
|
||||
const opendriftRow = (rows as Array<Record<string, unknown>>).find((r) => r['algo_cd'] === 'OPENDRIFT');
|
||||
const poseidonRow = (rows as Array<Record<string, unknown>>).find((r) => r['algo_cd'] === 'POSEIDON');
|
||||
const primaryRow = opendriftRow ?? poseidonRow ?? null;
|
||||
|
||||
for (const row of rows as Array<Record<string, unknown>>) {
|
||||
const rsltData = row['rslt_data'] as TrajectoryTimeStep[] | null;
|
||||
if (!rsltData || rsltData.length === 0) continue;
|
||||
|
||||
const algoCd = String(row['algo_cd'] ?? '');
|
||||
const modelName = ALGO_CD_TO_MODEL[algoCd] ?? algoCd;
|
||||
const fcstHr = row['fcst_hr'] != null ? Number(row['fcst_hr']) : null;
|
||||
const spilLat = row['spil_lat'] != null ? Number(row['spil_lat']) : null;
|
||||
const spilLon = row['spil_lon'] != null ? Number(row['spil_lon']) : null;
|
||||
const totalSteps = rsltData.length;
|
||||
const lastStep = rsltData[totalSteps - 1];
|
||||
|
||||
// 최대 확산거리 — 사고 위치 또는 첫 파티클 위치를 원점으로 사용
|
||||
let maxDist: number | null = null;
|
||||
const originLat = spilLat ?? rsltData[0]?.particles[0]?.lat ?? null;
|
||||
const originLon = spilLon ?? rsltData[0]?.particles[0]?.lon ?? null;
|
||||
if (originLat != null && originLon != null) {
|
||||
let maxVal = 0;
|
||||
for (const step of rsltData) {
|
||||
for (const p of step.particles) {
|
||||
const d = haversineKm(originLat, originLon, p.lat, p.lon);
|
||||
if (d > maxVal) maxVal = d;
|
||||
}
|
||||
}
|
||||
maxDist = maxVal;
|
||||
}
|
||||
|
||||
// 해안 도달 시간 (stranded===1 최초 등장 step)
|
||||
let coastArrivalHr: number | null = null;
|
||||
for (let i = 0; i < totalSteps; i++) {
|
||||
if (rsltData[i].particles.some((p) => p.stranded === 1)) {
|
||||
coastArrivalHr = fcstHr != null && totalSteps > 1
|
||||
? parseFloat(((i / (totalSteps - 1)) * fcstHr).toFixed(1))
|
||||
: i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// 풍화율
|
||||
const totalVol = lastStep.remaining_volume_m3 + lastStep.weathered_volume_m3 + lastStep.beached_volume_m3;
|
||||
const weatheringPct = totalVol > 0
|
||||
? parseFloat(((lastStep.weathered_volume_m3 / totalVol) * 100).toFixed(1))
|
||||
: null;
|
||||
|
||||
byModel[modelName] = {
|
||||
model: modelName,
|
||||
forecastDurationHr: fcstHr,
|
||||
maxSpreadDistanceKm: maxDist != null ? parseFloat(maxDist.toFixed(1)) : null,
|
||||
coastArrivalTimeHr: coastArrivalHr,
|
||||
affectedCoastlineKm: lastStep.pollution_coast_length_m != null
|
||||
? parseFloat((lastStep.pollution_coast_length_m / 1000).toFixed(1))
|
||||
: null,
|
||||
weatheringRatePct: weatheringPct,
|
||||
remainingVolumeKl: lastStep.remaining_volume_m3 != null
|
||||
? parseFloat(lastStep.remaining_volume_m3.toFixed(1))
|
||||
: null,
|
||||
};
|
||||
}
|
||||
|
||||
if (!primaryRow) return null;
|
||||
const primaryAlgo = String(primaryRow['algo_cd'] ?? '');
|
||||
const primaryModel = ALGO_CD_TO_MODEL[primaryAlgo] ?? primaryAlgo;
|
||||
|
||||
return {
|
||||
primary: byModel[primaryModel] ?? Object.values(byModel)[0],
|
||||
byModel,
|
||||
};
|
||||
}
|
||||
|
||||
@ -10,13 +10,11 @@ const router = express.Router();
|
||||
// ============================================================
|
||||
router.get('/ops', requireAuth, requirePermission('rescue', 'READ'), async (req, res) => {
|
||||
try {
|
||||
const { sttsCd, acdntTpCd, search, acdntSn } = req.query;
|
||||
const acdntSnNum = acdntSn ? parseInt(acdntSn as string, 10) : undefined;
|
||||
const { sttsCd, acdntTpCd, search } = req.query;
|
||||
const items = await listOps({
|
||||
sttsCd: sttsCd as string | undefined,
|
||||
acdntTpCd: acdntTpCd as string | undefined,
|
||||
search: search as string | undefined,
|
||||
acdntSn: acdntSnNum && !Number.isNaN(acdntSnNum) ? acdntSnNum : undefined,
|
||||
});
|
||||
res.json(items);
|
||||
} catch (err) {
|
||||
|
||||
@ -59,7 +59,6 @@ interface ListOpsInput {
|
||||
sttsCd?: string;
|
||||
acdntTpCd?: string;
|
||||
search?: string;
|
||||
acdntSn?: number;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
@ -83,10 +82,6 @@ export async function listOps(input?: ListOpsInput): Promise<RescueOpsListItem[]
|
||||
conditions.push(`VESSEL_NM ILIKE '%' || $${idx++} || '%'`);
|
||||
params.push(input.search);
|
||||
}
|
||||
if (input?.acdntSn != null) {
|
||||
conditions.push(`ACDNT_SN = $${idx++}`);
|
||||
params.push(input.acdntSn);
|
||||
}
|
||||
|
||||
const where = 'WHERE ' + conditions.join(' AND ');
|
||||
|
||||
|
||||
@ -20,9 +20,9 @@ const POLL_TIMEOUT_MS = 30 * 60 * 1000 // 30분
|
||||
const OIL_TYPE_MAP: Record<string, string> = {
|
||||
'벙커C유': 'GENERIC BUNKER C',
|
||||
'경유': 'GENERIC DIESEL',
|
||||
'원유': 'WEST TEXAS INTERMEDIATE',
|
||||
'원유': 'WEST TEXAS INTERMEDIATE (WTI)',
|
||||
'중유': 'GENERIC HEAVY FUEL OIL',
|
||||
'등유': 'FUEL OIL NO.1 (KEROSENE) ',
|
||||
'등유': 'FUEL OIL NO.1 (KEROSENE)',
|
||||
'휘발유': 'GENERIC GASOLINE',
|
||||
}
|
||||
|
||||
|
||||
@ -19,15 +19,12 @@ import hnsRouter from './hns/hnsRouter.js'
|
||||
import reportsRouter from './reports/reportsRouter.js'
|
||||
import assetsRouter from './assets/assetsRouter.js'
|
||||
import incidentsRouter from './incidents/incidentsRouter.js'
|
||||
import gscAccidentsRouter from './gsc/gscAccidentsRouter.js'
|
||||
import scatRouter from './scat/scatRouter.js'
|
||||
import predictionRouter from './prediction/predictionRouter.js'
|
||||
import aerialRouter from './aerial/aerialRouter.js'
|
||||
import rescueRouter from './rescue/rescueRouter.js'
|
||||
import mapBaseRouter from './map-base/mapBaseRouter.js'
|
||||
import monitorRouter from './monitor/monitorRouter.js'
|
||||
import vesselRouter from './vessels/vesselRouter.js'
|
||||
import { startVesselScheduler } from './vessels/vesselScheduler.js'
|
||||
import {
|
||||
sanitizeBody,
|
||||
sanitizeQuery,
|
||||
@ -171,7 +168,6 @@ app.use('/api/hns', hnsRouter)
|
||||
app.use('/api/reports', reportsRouter)
|
||||
app.use('/api/assets', assetsRouter)
|
||||
app.use('/api/incidents', incidentsRouter)
|
||||
app.use('/api/gsc/accidents', gscAccidentsRouter)
|
||||
app.use('/api/scat', scatRouter)
|
||||
app.use('/api/prediction', predictionRouter)
|
||||
app.use('/api/aerial', aerialRouter)
|
||||
@ -179,7 +175,6 @@ app.use('/api/rescue', rescueRouter)
|
||||
app.use('/api/map-base', mapBaseRouter)
|
||||
app.use('/api/monitor', monitorRouter)
|
||||
app.use('/api/tiles', tilesRouter)
|
||||
app.use('/api/vessels', vesselRouter)
|
||||
|
||||
// 헬스 체크
|
||||
app.get('/health', (_req, res) => {
|
||||
@ -215,9 +210,6 @@ app.use((err: Error, _req: express.Request, res: express.Response, _next: expres
|
||||
app.listen(PORT, async () => {
|
||||
console.log(`서버가 포트 ${PORT}에서 실행 중입니다.`)
|
||||
|
||||
// 선박 신호 스케줄러 시작 (한국 전 해역 1분 폴링)
|
||||
startVesselScheduler()
|
||||
|
||||
// wing DB 연결 확인 (wing + auth 스키마 통합)
|
||||
const connected = await testWingDbConnection()
|
||||
if (connected) {
|
||||
|
||||
@ -1,33 +0,0 @@
|
||||
import { Router } from 'express';
|
||||
import { getVesselsInBounds, getCacheStatus } from './vesselService.js';
|
||||
import type { BoundingBox } from './vesselTypes.js';
|
||||
|
||||
const vesselRouter = Router();
|
||||
|
||||
// POST /api/vessels/in-area
|
||||
// 현재 뷰포트 bbox 안의 선박 목록 반환 (메모리 캐시에서 필터링)
|
||||
vesselRouter.post('/in-area', (req, res) => {
|
||||
const { bounds } = req.body as { bounds?: BoundingBox };
|
||||
|
||||
if (
|
||||
!bounds ||
|
||||
typeof bounds.minLon !== 'number' ||
|
||||
typeof bounds.minLat !== 'number' ||
|
||||
typeof bounds.maxLon !== 'number' ||
|
||||
typeof bounds.maxLat !== 'number'
|
||||
) {
|
||||
res.status(400).json({ error: '유효한 bounds 정보가 필요합니다.' });
|
||||
return;
|
||||
}
|
||||
|
||||
const vessels = getVesselsInBounds(bounds);
|
||||
res.json(vessels);
|
||||
});
|
||||
|
||||
// GET /api/vessels/status — 캐시 상태 확인 (디버그용)
|
||||
vesselRouter.get('/status', (_req, res) => {
|
||||
const status = getCacheStatus();
|
||||
res.json(status);
|
||||
});
|
||||
|
||||
export default vesselRouter;
|
||||
@ -1,96 +0,0 @@
|
||||
import { updateVesselCache } from './vesselService.js';
|
||||
import type { VesselPosition } from './vesselTypes.js';
|
||||
|
||||
const VESSEL_TRACK_API_URL =
|
||||
process.env.VESSEL_TRACK_API_URL ?? 'https://guide.gc-si.dev/signal-batch';
|
||||
const POLL_INTERVAL_MS = 60_000;
|
||||
|
||||
// 개별 쿠키 환경변수를 조합하여 Cookie 헤더 문자열 생성
|
||||
function buildVesselCookie(): string {
|
||||
const entries: [string, string | undefined][] = [
|
||||
['apt.uid', process.env.VESSEL_COOKIE_APT_UID],
|
||||
['g_state', process.env.VESSEL_COOKIE_G_STATE],
|
||||
['gc_proxy_auth', process.env.VESSEL_COOKIE_GC_PROXY_AUTH],
|
||||
['GC_SESSION', process.env.VESSEL_COOKIE_GC_SESSION],
|
||||
// 기존 단일 쿠키 변수 폴백 (레거시 지원)
|
||||
];
|
||||
const parts = entries
|
||||
.filter(([, v]) => v)
|
||||
.map(([k, v]) => `${k}=${v}`);
|
||||
|
||||
// 기존 VESSEL_TRACK_COOKIE 폴백 (단일 문자열로 설정된 경우)
|
||||
if (parts.length === 0 && process.env.VESSEL_TRACK_COOKIE) {
|
||||
return process.env.VESSEL_TRACK_COOKIE;
|
||||
}
|
||||
return parts.join('; ');
|
||||
}
|
||||
|
||||
// 한국 전 해역 고정 폴리곤 (124~132°E, 32~38°N)
|
||||
const KOREA_WATERS_POLYGON = [
|
||||
[120, 31],
|
||||
[132, 31],
|
||||
[132, 41],
|
||||
[120, 41],
|
||||
[120, 31],
|
||||
];
|
||||
|
||||
let intervalId: ReturnType<typeof setInterval> | null = null;
|
||||
|
||||
async function pollVesselSignals(): Promise<void> {
|
||||
const url = `${VESSEL_TRACK_API_URL}/api/v1/vessels/recent-positions-detail`;
|
||||
const body = {
|
||||
minutes: 5,
|
||||
coordinates: KOREA_WATERS_POLYGON,
|
||||
polygonFilter: true,
|
||||
};
|
||||
|
||||
const cookie = buildVesselCookie();
|
||||
const requestHeaders: Record<string, string> = {
|
||||
'Content-Type': 'application/json',
|
||||
...(cookie ? { Cookie: cookie } : {}),
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: requestHeaders,
|
||||
body: JSON.stringify(body),
|
||||
signal: AbortSignal.timeout(30_000),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const text = await res.text().catch(() => '');
|
||||
console.error(`[vesselScheduler] 선박 신호 API 오류: ${res.status}`, text.substring(0, 200));
|
||||
return;
|
||||
}
|
||||
|
||||
const contentType = res.headers.get('content-type') ?? '';
|
||||
if (!contentType.includes('application/json')) {
|
||||
const text = await res.text().catch(() => '');
|
||||
console.error('[vesselScheduler] 선박 신호 API가 JSON이 아닌 응답 반환:', text);
|
||||
return;
|
||||
}
|
||||
|
||||
const data = (await res.json()) as VesselPosition[];
|
||||
updateVesselCache(data);
|
||||
} catch (err) {
|
||||
console.error('[vesselScheduler] 선박 신호 폴링 실패:', err);
|
||||
}
|
||||
}
|
||||
|
||||
export function startVesselScheduler(): void {
|
||||
if (intervalId !== null) return;
|
||||
|
||||
// 서버 시작 시 즉시 1회 실행 후 주기적 폴링
|
||||
pollVesselSignals();
|
||||
intervalId = setInterval(pollVesselSignals, POLL_INTERVAL_MS);
|
||||
console.log('[vesselScheduler] 선박 신호 스케줄러 시작 (1분 간격)');
|
||||
}
|
||||
|
||||
export function stopVesselScheduler(): void {
|
||||
if (intervalId !== null) {
|
||||
clearInterval(intervalId);
|
||||
intervalId = null;
|
||||
console.log('[vesselScheduler] 선박 신호 스케줄러 중지');
|
||||
}
|
||||
}
|
||||
@ -1,55 +0,0 @@
|
||||
import type { VesselPosition, BoundingBox } from './vesselTypes.js';
|
||||
|
||||
const VESSEL_TTL_MS = 10 * 60 * 1000; // 10분
|
||||
|
||||
const cachedVessels = new Map<string, VesselPosition>();
|
||||
let lastUpdated: Date | null = null;
|
||||
|
||||
// lastUpdate가 TTL을 초과한 선박을 캐시에서 제거.
|
||||
// lastUpdate 파싱이 불가능한 경우 보수적으로 유지한다.
|
||||
function evictStale(): void {
|
||||
const now = Date.now();
|
||||
for (const [mmsi, vessel] of cachedVessels) {
|
||||
const ts = Date.parse(vessel.lastUpdate);
|
||||
if (Number.isNaN(ts)) continue;
|
||||
if (now - ts > VESSEL_TTL_MS) {
|
||||
cachedVessels.delete(mmsi);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function updateVesselCache(vessels: VesselPosition[]): void {
|
||||
for (const vessel of vessels) {
|
||||
if (!vessel.mmsi) continue;
|
||||
cachedVessels.set(vessel.mmsi, vessel);
|
||||
}
|
||||
evictStale();
|
||||
lastUpdated = new Date();
|
||||
}
|
||||
|
||||
export function getVesselsInBounds(bounds: BoundingBox): VesselPosition[] {
|
||||
const result: VesselPosition[] = [];
|
||||
for (const v of cachedVessels.values()) {
|
||||
if (
|
||||
v.lon >= bounds.minLon &&
|
||||
v.lon <= bounds.maxLon &&
|
||||
v.lat >= bounds.minLat &&
|
||||
v.lat <= bounds.maxLat
|
||||
) {
|
||||
result.push(v);
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
export function getCacheStatus(): {
|
||||
count: number;
|
||||
bangjeCount: number;
|
||||
lastUpdated: Date | null;
|
||||
} {
|
||||
let bangjeCount = 0;
|
||||
for (const v of cachedVessels.values()) {
|
||||
if (v.shipNm && v.shipNm.toUpperCase().includes('BANGJE')) bangjeCount++;
|
||||
}
|
||||
return { count: cachedVessels.size, bangjeCount, lastUpdated };
|
||||
}
|
||||
@ -1,26 +0,0 @@
|
||||
export interface VesselPosition {
|
||||
mmsi: string;
|
||||
imo?: number;
|
||||
lon: number;
|
||||
lat: number;
|
||||
sog?: number;
|
||||
cog?: number;
|
||||
heading?: number;
|
||||
shipNm?: string;
|
||||
shipTy?: string;
|
||||
shipKindCode?: string;
|
||||
nationalCode?: string;
|
||||
lastUpdate: string;
|
||||
status?: string;
|
||||
destination?: string;
|
||||
length?: number;
|
||||
width?: number;
|
||||
draught?: number;
|
||||
}
|
||||
|
||||
export interface BoundingBox {
|
||||
minLon: number;
|
||||
minLat: number;
|
||||
maxLon: number;
|
||||
maxLat: number;
|
||||
}
|
||||
@ -293,7 +293,7 @@ CREATE TABLE SPIL_DATA (
|
||||
SPIL_DATA_SN SERIAL NOT NULL, -- 유출정보순번
|
||||
ACDNT_SN INTEGER NOT NULL, -- 사고순번
|
||||
OIL_TP_CD VARCHAR(50) NOT NULL, -- 유종코드
|
||||
SPIL_QTY NUMERIC(14,10), -- 유출량
|
||||
SPIL_QTY NUMERIC(12,2), -- 유출량
|
||||
SPIL_UNIT_CD VARCHAR(10) DEFAULT 'KL', -- 유출단위코드
|
||||
SPIL_TP_CD VARCHAR(20), -- 유출유형코드
|
||||
SPIL_LOC_GEOM GEOMETRY(Point, 4326), -- 유출위치지오메트리
|
||||
|
||||
@ -40,7 +40,7 @@ CREATE TABLE IF NOT EXISTS SPIL_DATA (
|
||||
SPIL_DATA_SN SERIAL NOT NULL,
|
||||
ACDNT_SN INTEGER NOT NULL,
|
||||
OIL_TP_CD VARCHAR(50) NOT NULL,
|
||||
SPIL_QTY NUMERIC(14,10),
|
||||
SPIL_QTY NUMERIC(12,2),
|
||||
SPIL_UNIT_CD VARCHAR(10) DEFAULT 'KL',
|
||||
SPIL_TP_CD VARCHAR(20),
|
||||
FCST_HR INTEGER,
|
||||
|
||||
@ -21,7 +21,7 @@ CREATE TABLE IF NOT EXISTS HNS_ANALYSIS (
|
||||
SBST_NM VARCHAR(100),
|
||||
UN_NO VARCHAR(10),
|
||||
CAS_NO VARCHAR(20),
|
||||
SPIL_QTY NUMERIC(14,10),
|
||||
SPIL_QTY NUMERIC(10,2),
|
||||
SPIL_UNIT_CD VARCHAR(10) DEFAULT 'KL',
|
||||
SPIL_TP_CD VARCHAR(20),
|
||||
FCST_HR INTEGER,
|
||||
|
||||
@ -1,7 +0,0 @@
|
||||
-- 031: 유출량(SPIL_QTY) 소수점 정밀도 확대
|
||||
-- 이미지 분석 결과로 1e-7 수준의 매우 작은 유출량을 저장할 수 있도록
|
||||
-- NUMERIC(12,2) / NUMERIC(10,2) → NUMERIC(14,10) 으로 변경
|
||||
-- 정수부 최대 4자리, 소수부 10자리
|
||||
|
||||
ALTER TABLE wing.SPIL_DATA ALTER COLUMN SPIL_QTY TYPE NUMERIC(14,10);
|
||||
ALTER TABLE wing.HNS_ANALY ALTER COLUMN SPIL_QTY TYPE NUMERIC(14,10);
|
||||
@ -1,118 +0,0 @@
|
||||
-- ============================================================
|
||||
-- 032: gsc.tgs_acdnt_info → wing.ACDNT 동기화 (2026-04-10 이후)
|
||||
-- ------------------------------------------------------------
|
||||
-- 목적
|
||||
-- 3개 예측 탭(유출유확산예측 / HNS 대기확산 / 긴급구난)의 사고
|
||||
-- 선택 셀렉트박스에 노출되는 gsc 사고 레코드를 wing.ACDNT에
|
||||
-- 이관하여 wing 운영 로직과 동일한 사고 마스터를 공유한다.
|
||||
--
|
||||
-- 필터 정책 (backend/src/gsc/gscAccidentsService.ts 의 listGscAccidents 와 동일)
|
||||
-- - acdnt_asort_code IN (12개 코드)
|
||||
-- - acdnt_title IS NOT NULL
|
||||
-- - 좌표(tgs_acdnt_lc.la, lo) 존재
|
||||
-- - rcept_dt >= '2026-04-10' (본 이관 추가 조건)
|
||||
--
|
||||
-- ACDNT_CD 생성 규칙
|
||||
-- 'INC-YYYY-NNNN' (YYYY = rcept_dt 의 연도, NNNN = 해당 연도 내 순번 4자리)
|
||||
-- 기존 wing.ACDNT 에 이미 부여된 'INC-YYYY-NNNN' 중 같은 연도의 최대 순번을
|
||||
-- 구해 이어서 증가시킨다.
|
||||
--
|
||||
-- 중복 방지
|
||||
-- (ACDNT_NM = acdnt_title, OCCRN_DTM = rcept_dt) 조합이 이미 존재하면 제외.
|
||||
-- acdnt_mng_no 를 별도 컬럼으로 보관하지 않으므로 이 조합을 자연 키로 사용.
|
||||
--
|
||||
-- ACDNT_TP_CD
|
||||
-- gsc.tcm_code.code_nm 으로 치환 (JOIN: tcm_code.code = acdnt_asort_code)
|
||||
-- 매핑 누락 시 원본 코드값으로 폴백.
|
||||
--
|
||||
-- 사전 확인 쿼리 (실행 전 참고)
|
||||
-- SELECT COUNT(DISTINCT a.acdnt_mng_no)
|
||||
-- FROM gsc.tgs_acdnt_info a JOIN gsc.tgs_acdnt_lc b USING (acdnt_mng_no)
|
||||
-- WHERE a.acdnt_asort_code = ANY(ARRAY[
|
||||
-- '055001001','055001002','055001003','055001004','055001005','055001006',
|
||||
-- '055003001','055003002','055003003','055003004','055003005','055004003'
|
||||
-- ]::varchar[])
|
||||
-- AND a.acdnt_title IS NOT NULL
|
||||
-- AND a.rcept_dt >= '2026-04-10';
|
||||
-- ============================================================
|
||||
|
||||
WITH src AS (
|
||||
SELECT DISTINCT ON (a.acdnt_mng_no)
|
||||
a.acdnt_mng_no,
|
||||
a.acdnt_title,
|
||||
a.acdnt_asort_code,
|
||||
a.rcept_dt,
|
||||
b.la,
|
||||
b.lo
|
||||
FROM gsc.tgs_acdnt_info AS a
|
||||
JOIN gsc.tgs_acdnt_lc AS b ON a.acdnt_mng_no = b.acdnt_mng_no
|
||||
WHERE a.acdnt_asort_code = ANY(ARRAY[
|
||||
'055001001','055001002','055001003','055001004','055001005','055001006',
|
||||
'055003001','055003002','055003003','055003004','055003005','055004003'
|
||||
]::varchar[])
|
||||
AND a.acdnt_title IS NOT NULL
|
||||
AND a.rcept_dt >= '2026-04-10'::timestamptz
|
||||
AND b.la IS NOT NULL AND b.lo IS NOT NULL
|
||||
AND NOT EXISTS (
|
||||
SELECT 1
|
||||
FROM wing.ACDNT w
|
||||
WHERE w.ACDNT_NM = a.acdnt_title
|
||||
AND w.OCCRN_DTM = a.rcept_dt
|
||||
)
|
||||
ORDER BY a.acdnt_mng_no, b.acdnt_lc_sn ASC
|
||||
),
|
||||
numbered AS (
|
||||
SELECT
|
||||
src.*,
|
||||
EXTRACT(YEAR FROM src.rcept_dt)::int AS yr,
|
||||
ROW_NUMBER() OVER (
|
||||
PARTITION BY EXTRACT(YEAR FROM src.rcept_dt)
|
||||
ORDER BY src.rcept_dt ASC, src.acdnt_mng_no ASC
|
||||
) AS rn_in_year
|
||||
FROM src
|
||||
),
|
||||
year_max AS (
|
||||
SELECT
|
||||
(split_part(ACDNT_CD, '-', 2))::int AS yr,
|
||||
MAX((split_part(ACDNT_CD, '-', 3))::int) AS max_seq
|
||||
FROM wing.ACDNT
|
||||
WHERE ACDNT_CD ~ '^INC-[0-9]{4}-[0-9]+$'
|
||||
GROUP BY split_part(ACDNT_CD, '-', 2)
|
||||
)
|
||||
INSERT INTO wing.ACDNT (
|
||||
ACDNT_CD, ACDNT_NM, ACDNT_TP_CD, ACDNT_STTS_CD,
|
||||
LAT, LNG, LOC_GEOM, LOC_DC, OCCRN_DTM, REG_DTM, MDFCN_DTM
|
||||
)
|
||||
SELECT
|
||||
'INC-' || lpad(n.yr::text, 4, '0') || '-' ||
|
||||
lpad((COALESCE(ym.max_seq, 0) + n.rn_in_year)::text, 4, '0') AS ACDNT_CD,
|
||||
n.acdnt_title AS ACDNT_NM,
|
||||
COALESCE(c.code_nm, n.acdnt_asort_code) AS ACDNT_TP_CD,
|
||||
'ACTIVE' AS ACDNT_STTS_CD,
|
||||
n.la::numeric AS LAT,
|
||||
n.lo::numeric AS LNG,
|
||||
ST_SetSRID(ST_MakePoint(n.lo::float8, n.la::float8), 4326) AS LOC_GEOM,
|
||||
NULL AS LOC_DC,
|
||||
n.rcept_dt AS OCCRN_DTM,
|
||||
NOW(), NOW()
|
||||
FROM numbered n
|
||||
LEFT JOIN year_max ym ON ym.yr = n.yr
|
||||
LEFT JOIN gsc.tcm_code c ON c.code = n.acdnt_asort_code
|
||||
ORDER BY n.rcept_dt ASC, n.acdnt_mng_no ASC;
|
||||
|
||||
-- ============================================================
|
||||
-- 사후 검증 (필요 시 주석 해제 실행)
|
||||
-- SELECT COUNT(*) FROM wing.ACDNT WHERE OCCRN_DTM >= '2026-04-10';
|
||||
--
|
||||
-- SELECT ACDNT_CD, ACDNT_NM, ACDNT_TP_CD, ST_AsText(LOC_GEOM), OCCRN_DTM
|
||||
-- FROM wing.ACDNT
|
||||
-- WHERE OCCRN_DTM >= '2026-04-10'
|
||||
-- ORDER BY ACDNT_CD DESC
|
||||
-- LIMIT 20;
|
||||
--
|
||||
-- SELECT ACDNT_TP_CD, COUNT(*)
|
||||
-- FROM wing.ACDNT
|
||||
-- WHERE OCCRN_DTM >= '2026-04-10'
|
||||
-- GROUP BY 1
|
||||
-- ORDER BY 2 DESC;
|
||||
-- ============================================================
|
||||
@ -378,7 +378,7 @@ PUT, DELETE, PATCH 등 기타 메서드는 사용하지 않는다.
|
||||
각 탭은 `tabs/{탭명}/services/{탭명}Api.ts`에 API 함수를 정의한다.
|
||||
|
||||
```typescript
|
||||
// frontend/src/components/board/services/boardApi.ts
|
||||
// frontend/src/tabs/board/services/boardApi.ts
|
||||
import { api } from '@common/services/api';
|
||||
|
||||
// 인터페이스 정의
|
||||
@ -490,7 +490,7 @@ interface MenuConfigItem {
|
||||
|
||||
```typescript
|
||||
// frontend/src/common/store/newStore.ts (공통) 또는
|
||||
// frontend/src/components/{탭}/store/newStore.ts (탭 전용)
|
||||
// frontend/src/tabs/{탭}/store/newStore.ts (탭 전용)
|
||||
import { create } from 'zustand';
|
||||
|
||||
interface MyState {
|
||||
@ -514,7 +514,7 @@ export const useMyStore = create<MyState>((set) => ({
|
||||
|
||||
```typescript
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { fetchBoardPosts, createBoardPost } from '@components/board/services/boardApi';
|
||||
import { fetchBoardPosts, createBoardPost } from '@tabs/board/services/boardApi';
|
||||
|
||||
// 조회 (캐싱 + 자동 리페치)
|
||||
const { data, isLoading, error } = useQuery({
|
||||
@ -1491,13 +1491,13 @@ const result = await authPool.query('SELECT * FROM AUTH_USER WHERE USER_ID = $1'
|
||||
### 파일 위치
|
||||
|
||||
```
|
||||
frontend/src/components/{탭명}/services/{탭명}Api.ts
|
||||
frontend/src/tabs/{탭명}/services/{탭명}Api.ts
|
||||
```
|
||||
|
||||
### 작성 패턴
|
||||
|
||||
```typescript
|
||||
// frontend/src/components/{탭명}/services/{탭명}Api.ts
|
||||
// frontend/src/tabs/{탭명}/services/{탭명}Api.ts
|
||||
import { api } from '@common/services/api';
|
||||
|
||||
// ============================================================
|
||||
|
||||
@ -736,13 +736,13 @@ ON CONFLICT DO NOTHING;
|
||||
### 파일 위치
|
||||
|
||||
```
|
||||
frontend/src/components/{탭명}/services/{tabName}Api.ts
|
||||
frontend/src/tabs/{탭명}/services/{tabName}Api.ts
|
||||
```
|
||||
|
||||
### 기본 구조
|
||||
|
||||
```ts
|
||||
// frontend/src/components/{탭명}/services/{tabName}Api.ts
|
||||
// frontend/src/tabs/{탭명}/services/{tabName}Api.ts
|
||||
|
||||
import { api } from '@common/services/api';
|
||||
|
||||
@ -1376,7 +1376,7 @@ export default router;
|
||||
### 4단계: 프론트엔드 API 서비스
|
||||
|
||||
```ts
|
||||
// frontend/src/components/assets/services/equipmentApi.ts
|
||||
// frontend/src/tabs/assets/services/equipmentApi.ts
|
||||
|
||||
import { api } from '@common/services/api';
|
||||
|
||||
|
||||
@ -163,11 +163,11 @@ Frontend에서 두 가지 경로 별칭을 사용한다:
|
||||
| Alias | 실제 경로 | 용도 |
|
||||
|-------|----------|------|
|
||||
| `@common/*` | `src/common/*` | 공통 모듈 (컴포넌트, 훅, 서비스, 스토어) |
|
||||
| `@components/*` | `src/components/*` | 탭별 패키지 (11개 탭) |
|
||||
| `@tabs/*` | `src/tabs/*` | 탭별 패키지 (11개 탭) |
|
||||
|
||||
```tsx
|
||||
import { useAuth } from '@common/hooks/useAuth';
|
||||
import OilSpillView from '@components/prediction/components/OilSpillView';
|
||||
import OilSpillView from '@tabs/prediction/components/OilSpillView';
|
||||
```
|
||||
|
||||
---
|
||||
@ -495,7 +495,7 @@ pre-commit: [backend] 타입 체크 성공
|
||||
git status
|
||||
|
||||
# 스테이징 (파일 지정)
|
||||
git add frontend/src/components/incidents/components/IncidentDetailView.tsx
|
||||
git add frontend/src/tabs/incidents/components/IncidentDetailView.tsx
|
||||
git add backend/src/incidents/incidentService.ts
|
||||
|
||||
# 커밋 (pre-commit + commit-msg 검증 자동 실행)
|
||||
@ -540,7 +540,7 @@ curl -X POST "https://gitea.gc-si.dev/api/v1/repos/gc/wing-ops/pulls" \
|
||||
- 변경 내용을 1~3줄로 요약
|
||||
|
||||
## 변경 파일
|
||||
- `frontend/src/components/incidents/components/IncidentDetailView.tsx` (신규)
|
||||
- `frontend/src/tabs/incidents/components/IncidentDetailView.tsx` (신규)
|
||||
- `backend/src/incidents/incidentService.ts` (수정)
|
||||
|
||||
## Test plan
|
||||
@ -754,8 +754,8 @@ chmod +x .githooks/pre-commit .githooks/commit-msg
|
||||
| `database/migration/017_incident_detail.sql` | DB 마이그레이션 (필요 시) |
|
||||
| `backend/src/incidents/incidentService.ts` | 상세 조회 함수 추가 |
|
||||
| `backend/src/incidents/incidentRouter.ts` | `GET /api/incidents/:id` 라우트 |
|
||||
| `frontend/src/components/incidents/services/incidentsApi.ts` | API 호출 함수 |
|
||||
| `frontend/src/components/incidents/components/IncidentDetailView.tsx` | 상세 뷰 컴포넌트 |
|
||||
| `frontend/src/tabs/incidents/services/incidentsApi.ts` | API 호출 함수 |
|
||||
| `frontend/src/tabs/incidents/components/IncidentDetailView.tsx` | 상세 뷰 컴포넌트 |
|
||||
|
||||
#### Step 2. 브랜치 생성
|
||||
|
||||
@ -797,7 +797,7 @@ router.get('/:id', requireAuth, async (req, res) => {
|
||||
**Frontend - API:**
|
||||
|
||||
```typescript
|
||||
// frontend/src/components/incidents/services/incidentsApi.ts
|
||||
// frontend/src/tabs/incidents/services/incidentsApi.ts
|
||||
export async function fetchIncidentById(id: number) {
|
||||
const { data } = await api.get(`/incidents/${id}`);
|
||||
return data;
|
||||
@ -807,7 +807,7 @@ export async function fetchIncidentById(id: number) {
|
||||
**Frontend - Component:**
|
||||
|
||||
```tsx
|
||||
// frontend/src/components/incidents/components/IncidentDetailView.tsx
|
||||
// frontend/src/tabs/incidents/components/IncidentDetailView.tsx
|
||||
const IncidentDetailView = ({ incidentId }: IncidentDetailViewProps) => {
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ['incident', incidentId],
|
||||
@ -829,7 +829,7 @@ cd ../backend && npx tsc --noEmit
|
||||
#### Step 5. 커밋 & 푸시
|
||||
|
||||
```bash
|
||||
git add backend/src/incidents/ frontend/src/components/incidents/
|
||||
git add backend/src/incidents/ frontend/src/tabs/incidents/
|
||||
git commit -m "feat(incidents): 사고 상세 조회 페이지 추가"
|
||||
# pre-commit: TypeScript OK, ESLint OK
|
||||
# commit-msg: Conventional Commits OK
|
||||
|
||||
@ -31,9 +31,9 @@ board 탭을 기준 템플릿으로 사용하며, 각 단계별 실제 코드
|
||||
|
||||
| 단계 | 파일 | 작업 |
|
||||
|------|------|------|
|
||||
| **Step 1** | `frontend/src/components/{탭명}/components/{TabName}View.tsx` | 뷰 컴포넌트 생성 |
|
||||
| | `frontend/src/components/{탭명}/services/{tabName}Api.ts` | API 서비스 생성 |
|
||||
| | `frontend/src/components/{탭명}/index.ts` | re-export |
|
||||
| **Step 1** | `frontend/src/tabs/{탭명}/components/{TabName}View.tsx` | 뷰 컴포넌트 생성 |
|
||||
| | `frontend/src/tabs/{탭명}/services/{tabName}Api.ts` | API 서비스 생성 |
|
||||
| | `frontend/src/tabs/{탭명}/index.ts` | re-export |
|
||||
| **Step 2** | `frontend/src/common/types/navigation.ts` | MainTab 타입 추가 |
|
||||
| | `frontend/src/App.tsx` | import + renderView case 추가 |
|
||||
| | `frontend/src/common/hooks/useSubMenu.ts` | 서브메뉴 설정 (서브탭이 있는 경우) |
|
||||
@ -52,7 +52,7 @@ board 탭을 기준 템플릿으로 사용하며, 각 단계별 실제 코드
|
||||
### 1-1. 디렉토리 구조
|
||||
|
||||
```
|
||||
frontend/src/components/{탭명}/
|
||||
frontend/src/tabs/{탭명}/
|
||||
components/
|
||||
{TabName}View.tsx # 메인 뷰 컴포넌트
|
||||
services/
|
||||
@ -65,7 +65,7 @@ frontend/src/components/{탭명}/
|
||||
서브탭이 **없는** 간단한 탭:
|
||||
|
||||
```tsx
|
||||
// frontend/src/components/monitoring/components/MonitoringView.tsx
|
||||
// frontend/src/tabs/monitoring/components/MonitoringView.tsx
|
||||
|
||||
export function MonitoringView() {
|
||||
return (
|
||||
@ -91,7 +91,7 @@ export function MonitoringView() {
|
||||
서브탭이 **있는** 탭 (board 패턴):
|
||||
|
||||
```tsx
|
||||
// frontend/src/components/monitoring/components/MonitoringView.tsx
|
||||
// frontend/src/tabs/monitoring/components/MonitoringView.tsx
|
||||
|
||||
import { useSubMenu } from '@common/hooks/useSubMenu';
|
||||
|
||||
@ -122,7 +122,7 @@ export function MonitoringView() {
|
||||
### 1-3. API 서비스 (보일러플레이트)
|
||||
|
||||
```ts
|
||||
// frontend/src/components/monitoring/services/monitoringApi.ts
|
||||
// frontend/src/tabs/monitoring/services/monitoringApi.ts
|
||||
|
||||
import { api } from '@common/services/api';
|
||||
|
||||
@ -180,7 +180,7 @@ export async function createMonitoring(input: CreateMonitoringInput): Promise<{
|
||||
### 1-4. index.ts (re-export)
|
||||
|
||||
```ts
|
||||
// frontend/src/components/monitoring/index.ts
|
||||
// frontend/src/tabs/monitoring/index.ts
|
||||
|
||||
export { MonitoringView } from './components/MonitoringView';
|
||||
```
|
||||
@ -209,7 +209,7 @@ export type MainTab = 'prediction' | 'hns' | 'rescue' | ... | 'monitoring' | 'ad
|
||||
// frontend/src/App.tsx
|
||||
|
||||
// 1. import 추가
|
||||
import { MonitoringView } from '@components/monitoring';
|
||||
import { MonitoringView } from '@tabs/monitoring';
|
||||
|
||||
// 2. renderView switch에 case 추가
|
||||
const renderView = () => {
|
||||
@ -577,13 +577,13 @@ CREATE INDEX IF NOT EXISTS IDX_MONITORING_REG_DTM ON MONITORING(REG_DTM DESC);
|
||||
### 1단계: 프론트엔드 파일 생성
|
||||
|
||||
```bash
|
||||
mkdir -p frontend/src/components/monitoring/components
|
||||
mkdir -p frontend/src/components/monitoring/services
|
||||
mkdir -p frontend/src/tabs/monitoring/components
|
||||
mkdir -p frontend/src/tabs/monitoring/services
|
||||
```
|
||||
|
||||
- `frontend/src/components/monitoring/components/MonitoringView.tsx` 생성
|
||||
- `frontend/src/components/monitoring/services/monitoringApi.ts` 생성
|
||||
- `frontend/src/components/monitoring/index.ts` 생성
|
||||
- `frontend/src/tabs/monitoring/components/MonitoringView.tsx` 생성
|
||||
- `frontend/src/tabs/monitoring/services/monitoringApi.ts` 생성
|
||||
- `frontend/src/tabs/monitoring/index.ts` 생성
|
||||
|
||||
### 2단계: 프론트엔드 기존 파일 수정
|
||||
|
||||
@ -592,7 +592,7 @@ mkdir -p frontend/src/components/monitoring/services
|
||||
+ export type MainTab = '...' | 'monitoring' | 'admin';
|
||||
|
||||
--- frontend/src/App.tsx
|
||||
+ import { MonitoringView } from '@components/monitoring';
|
||||
+ import { MonitoringView } from '@tabs/monitoring';
|
||||
// renderView switch 내:
|
||||
+ case 'monitoring':
|
||||
+ return <MonitoringView />;
|
||||
@ -644,9 +644,9 @@ cd backend && npx tsc --noEmit # 백엔드 컴파일 검증
|
||||
## 체크리스트
|
||||
|
||||
### 프론트엔드
|
||||
- [ ] `frontend/src/components/{탭명}/components/{TabName}View.tsx` 생성
|
||||
- [ ] `frontend/src/components/{탭명}/services/{tabName}Api.ts` 생성
|
||||
- [ ] `frontend/src/components/{탭명}/index.ts` re-export 생성
|
||||
- [ ] `frontend/src/tabs/{탭명}/components/{TabName}View.tsx` 생성
|
||||
- [ ] `frontend/src/tabs/{탭명}/services/{tabName}Api.ts` 생성
|
||||
- [ ] `frontend/src/tabs/{탭명}/index.ts` re-export 생성
|
||||
- [ ] `navigation.ts` MainTab 타입에 새 ID 추가
|
||||
- [ ] `App.tsx` import + renderView switch case 추가
|
||||
- [ ] `useSubMenu.ts` subMenuConfigs + subMenuState 추가 (서브탭 있는 경우)
|
||||
|
||||
@ -49,7 +49,7 @@ git checkout -b feature/{탭명}-crud
|
||||
```bash
|
||||
# 탭 디렉토리 내 mock 데이터 검색
|
||||
grep -rn "mock\|Mock\|MOCK\|sample\|initial\|hardcod\|localStorage" \
|
||||
frontend/src/components/{탭명}/
|
||||
frontend/src/tabs/{탭명}/
|
||||
|
||||
# 공통 디렉토리에서 해당 탭 관련 데이터 확인 (반드시!)
|
||||
grep -rn "{탭명}\|{Tab}" frontend/src/common/mock/
|
||||
@ -302,7 +302,7 @@ app.use('/api/{탭명}', newtabRouter);
|
||||
|
||||
**1) API 서비스 파일 생성:**
|
||||
|
||||
파일 위치: `frontend/src/components/{탭명}/services/{탭명}Api.ts`
|
||||
파일 위치: `frontend/src/tabs/{탭명}/services/{탭명}Api.ts`
|
||||
|
||||
```typescript
|
||||
import { api } from '@common/services/api';
|
||||
@ -476,7 +476,7 @@ CRUD 전체 흐름(생성 -> 조회 -> 수정 -> 삭제)을 확인하고 테스
|
||||
|
||||
```bash
|
||||
# 해당 탭 디렉토리에서 mock 잔여 검색
|
||||
grep -rn "mock\|Mock\|MOCK\|localStorage" frontend/src/components/{탭명}/
|
||||
grep -rn "mock\|Mock\|MOCK\|localStorage" frontend/src/tabs/{탭명}/
|
||||
|
||||
# 공통 mock/data 디렉토리에서 해당 탭 관련 검색
|
||||
grep -rn "{탭명}" frontend/src/common/mock/
|
||||
@ -497,7 +497,7 @@ git status
|
||||
git add database/migration/017_{탭명}.sql
|
||||
git add backend/src/{탭명}/
|
||||
git add backend/src/server.ts
|
||||
git add frontend/src/components/{탭명}/
|
||||
git add frontend/src/tabs/{탭명}/
|
||||
|
||||
# 커밋 (Conventional Commits, 한국어)
|
||||
git commit -m "feat({탭명}): mock 데이터를 PostgreSQL + REST API로 전환"
|
||||
@ -602,7 +602,7 @@ AUTH_USER 주요 컬럼 참조:
|
||||
|
||||
```bash
|
||||
# 불충분 -- 탭 디렉토리만 검색
|
||||
grep -rn "mock" frontend/src/components/{탭명}/
|
||||
grep -rn "mock" frontend/src/tabs/{탭명}/
|
||||
|
||||
# 반드시 공통 디렉토리도 검색
|
||||
grep -rn "{탭명}\|{Tab}" frontend/src/common/mock/
|
||||
@ -780,8 +780,8 @@ export async function fetchCategories(): Promise<Category[]> {
|
||||
- [ ] 프론트 타입 체크 통과: `cd frontend && npx tsc --noEmit`
|
||||
- [ ] ESLint 통과: `cd frontend && npx eslint .`
|
||||
- [ ] CRUD 테스트: curl로 생성/조회/수정/삭제 정상 동작 확인
|
||||
- [ ] Mock 잔여 0건: `grep -rn "mock\|Mock" frontend/src/components/{탭명}/` (UI 상수 제외)
|
||||
- [ ] PUT/DELETE 사용 0건: `grep -rn "api\.put\|api\.delete" frontend/src/components/{탭명}/`
|
||||
- [ ] Mock 잔여 0건: `grep -rn "mock\|Mock" frontend/src/tabs/{탭명}/` (UI 상수 제외)
|
||||
- [ ] PUT/DELETE 사용 0건: `grep -rn "api\.put\|api\.delete" frontend/src/tabs/{탭명}/`
|
||||
- [ ] 라우터 등록 확인: `server.ts`에 `app.use('/api/{탭명}', ...)` 추가됨
|
||||
- [ ] 마이그레이션 실행 확인: psql로 테이블 생성 및 검증 SELECT 통과
|
||||
- [ ] 커밋 + 푸시 + MR 생성
|
||||
|
||||
@ -66,7 +66,7 @@ wing/
|
||||
│ │ ├── utils/ cn, coordinates, geo, sanitize
|
||||
│ │ ├── styles/ base.css, components.css, wing.css (@layer)
|
||||
│ │ └── constants/ featureIds.ts (FEATURE_ID 상수 체계)
|
||||
│ └── tabs/ @components/ alias (11개 탭)
|
||||
│ └── tabs/ @tabs/ alias (11개 탭)
|
||||
│ ├── prediction/ 유류 확산 예측
|
||||
│ ├── hns/ HNS 분석
|
||||
│ ├── rescue/ 구조 시나리오
|
||||
@ -103,7 +103,7 @@ wing/
|
||||
| Alias | 경로 |
|
||||
|-------|------|
|
||||
| `@common/*` | `src/common/*` |
|
||||
| `@components/*` | `src/components/*` |
|
||||
| `@tabs/*` | `src/tabs/*` |
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -4,66 +4,6 @@
|
||||
|
||||
## [Unreleased]
|
||||
|
||||
## [2026-04-17]
|
||||
|
||||
### 추가
|
||||
- HNS: 물질 DB 데이터 확장 및 데이터 구조 개선 (PDF 추출 스크립트, 병합 스크립트 개선, 물질 상세 패널 업데이트)
|
||||
|
||||
### 변경
|
||||
- 디자인 시스템: color 토큰 Definition 팔레트로 마이그레이션 (bg/stroke/fg 쿨톤 전환, Primary #0099DD 적용)
|
||||
|
||||
### 수정
|
||||
- 빌드 에러 수정 - 타입 import 정리 및 미사용 코드 제거
|
||||
|
||||
## [2026-04-16]
|
||||
|
||||
### 추가
|
||||
- HNS: AEGL 등농도선 표출 및 자동 줌·동적 도메인 기능 추가
|
||||
- 사건사고: 통합 분석 패널 HNS/구난 연동 및 사고 목록을 wing.ACDNT 기반으로 전환
|
||||
- 사건사고: 통합 분석 패널 분할 뷰 및 이전 분석 결과 비교 표출 + 분석 선택 모달 추가
|
||||
- 확산예측: 유출유 확산 요약 API 신규 (`/analyses/:acdntSn/oil-summary`, primary + byModel)
|
||||
- HNS: 분석 생성 시 `acdntSn` 연결 지원
|
||||
- GSC: 사고 목록 응답에 `acdntSn` 노출 및 민감자원 누적 카테고리 관리 + HNS 확산 레이어 유틸 추가
|
||||
|
||||
### 변경
|
||||
- 탭 디렉토리를 MPA 컴포넌트 구조로 재편 (src/tabs → src/components, src/interfaces, src/types)
|
||||
- TimelineControl 분리 및 aerial/hns 컴포넌트 개선
|
||||
|
||||
## [2026-04-15]
|
||||
|
||||
### 추가
|
||||
- 확산예측·HNS 대기확산·긴급구난: GSC 외부 사고 목록 API 연동 및 셀렉트박스 자동 채움 (사고명·발생시각·위경도 자동 입력 + 지도 이동)
|
||||
- 실시간 선박 신호 지도 표출: 한국 해역 1분 주기 폴링 스케줄러, 호버 툴팁·클릭 팝업·상세 모달 제공 (확산예측·HNS·긴급구난·사건사고 탭 연동)
|
||||
|
||||
### 변경
|
||||
- MapView 컴포넌트 분리 및 전체 탭 디자인 시스템 토큰 적용
|
||||
- aerial 이미지 분석 API 기본 URL 변경
|
||||
|
||||
## [2026-04-14]
|
||||
|
||||
### 추가
|
||||
- 디자인 시스템: HNS·사건사고·확산예측·SCAT·기상 탭 디자인 시스템 토큰 전면 적용
|
||||
- 관리자: 비식별화조치 메뉴 및 패널 추가
|
||||
- 긴급구난/예측도 OSM 지도 적용 및 관리자 패널 추가
|
||||
|
||||
### 변경
|
||||
- 디자인 시스템: 폰트 업스케일 토큰 값 변경 및 전체 탭 색상·폰트 통일
|
||||
|
||||
## [2026-04-13]
|
||||
|
||||
### 추가
|
||||
- 사고별 이미지 분석 데이터 조회 API 추가
|
||||
- 사고 리스트에 항공 미디어 연동 및 이미지 분석 뱃지 표시
|
||||
- 사고 마커 클릭 팝업 디자인 리뉴얼
|
||||
- 지도에 필터링된 사고만 표시되도록 개선
|
||||
|
||||
### 변경
|
||||
- 이미지 분석 시 사고명 파라미터 지원
|
||||
- 기본 예측시간 48시간 → 6시간으로 변경
|
||||
- 유출량(SPIL_QTY) 정밀도 NUMERIC(14,10)으로 확대
|
||||
- OpenDrift 유종 매핑 수정 (원유, 등유)
|
||||
- 소량 유출량 과학적 표기법으로 표시
|
||||
|
||||
## [2026-04-09]
|
||||
|
||||
### 추가
|
||||
|
||||
311
frontend/package-lock.json
generated
311
frontend/package-lock.json
generated
@ -1945,9 +1945,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@rollup/rollup-android-arm-eabi": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.60.1.tgz",
|
||||
"integrity": "sha512-d6FinEBLdIiK+1uACUttJKfgZREXrF0Qc2SmLII7W2AD8FfiZ9Wjd+rD/iRuf5s5dWrr1GgwXCvPqOuDquOowA==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.57.1.tgz",
|
||||
"integrity": "sha512-A6ehUVSiSaaliTxai040ZpZ2zTevHYbvu/lDoeAteHI8QnaosIzm4qwtezfRg1jOYaUmnzLX1AOD6Z+UJjtifg==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
@ -1959,9 +1959,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-android-arm64": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.60.1.tgz",
|
||||
"integrity": "sha512-YjG/EwIDvvYI1YvYbHvDz/BYHtkY4ygUIXHnTdLhG+hKIQFBiosfWiACWortsKPKU/+dUwQQCKQM3qrDe8c9BA==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.57.1.tgz",
|
||||
"integrity": "sha512-dQaAddCY9YgkFHZcFNS/606Exo8vcLHwArFZ7vxXq4rigo2bb494/xKMMwRRQW6ug7Js6yXmBZhSBRuBvCCQ3w==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -1973,9 +1973,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-darwin-arm64": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.60.1.tgz",
|
||||
"integrity": "sha512-mjCpF7GmkRtSJwon+Rq1N8+pI+8l7w5g9Z3vWj4T7abguC4Czwi3Yu/pFaLvA3TTeMVjnu3ctigusqWUfjZzvw==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.57.1.tgz",
|
||||
"integrity": "sha512-crNPrwJOrRxagUYeMn/DZwqN88SDmwaJ8Cvi/TN1HnWBU7GwknckyosC2gd0IqYRsHDEnXf328o9/HC6OkPgOg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -1987,9 +1987,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-darwin-x64": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.60.1.tgz",
|
||||
"integrity": "sha512-haZ7hJ1JT4e9hqkoT9R/19XW2QKqjfJVv+i5AGg57S+nLk9lQnJ1F/eZloRO3o9Scy9CM3wQ9l+dkXtcBgN5Ew==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.57.1.tgz",
|
||||
"integrity": "sha512-Ji8g8ChVbKrhFtig5QBV7iMaJrGtpHelkB3lsaKzadFBe58gmjfGXAOfI5FV0lYMH8wiqsxKQ1C9B0YTRXVy4w==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -2001,9 +2001,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-freebsd-arm64": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.60.1.tgz",
|
||||
"integrity": "sha512-czw90wpQq3ZsAVBlinZjAYTKduOjTywlG7fEeWKUA7oCmpA8xdTkxZZlwNJKWqILlq0wehoZcJYfBvOyhPTQ6w==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.57.1.tgz",
|
||||
"integrity": "sha512-R+/WwhsjmwodAcz65guCGFRkMb4gKWTcIeLy60JJQbXrJ97BOXHxnkPFrP+YwFlaS0m+uWJTstrUA9o+UchFug==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -2015,9 +2015,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-freebsd-x64": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.60.1.tgz",
|
||||
"integrity": "sha512-KVB2rqsxTHuBtfOeySEyzEOB7ltlB/ux38iu2rBQzkjbwRVlkhAGIEDiiYnO2kFOkJp+Z7pUXKyrRRFuFUKt+g==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.57.1.tgz",
|
||||
"integrity": "sha512-IEQTCHeiTOnAUC3IDQdzRAGj3jOAYNr9kBguI7MQAAZK3caezRrg0GxAb6Hchg4lxdZEI5Oq3iov/w/hnFWY9Q==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -2029,9 +2029,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.60.1.tgz",
|
||||
"integrity": "sha512-L+34Qqil+v5uC0zEubW7uByo78WOCIrBvci69E7sFASRl0X7b/MB6Cqd1lky/CtcSVTydWa2WZwFuWexjS5o6g==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.57.1.tgz",
|
||||
"integrity": "sha512-F8sWbhZ7tyuEfsmOxwc2giKDQzN3+kuBLPwwZGyVkLlKGdV1nvnNwYD0fKQ8+XS6hp9nY7B+ZeK01EBUE7aHaw==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
@ -2043,9 +2043,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-arm-musleabihf": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.60.1.tgz",
|
||||
"integrity": "sha512-n83O8rt4v34hgFzlkb1ycniJh7IR5RCIqt6mz1VRJD6pmhRi0CXdmfnLu9dIUS6buzh60IvACM842Ffb3xd6Gg==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.57.1.tgz",
|
||||
"integrity": "sha512-rGfNUfn0GIeXtBP1wL5MnzSj98+PZe/AXaGBCRmT0ts80lU5CATYGxXukeTX39XBKsxzFpEeK+Mrp9faXOlmrw==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
@ -2057,9 +2057,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-arm64-gnu": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.60.1.tgz",
|
||||
"integrity": "sha512-Nql7sTeAzhTAja3QXeAI48+/+GjBJ+QmAH13snn0AJSNL50JsDqotyudHyMbO2RbJkskbMbFJfIJKWA6R1LCJQ==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.57.1.tgz",
|
||||
"integrity": "sha512-MMtej3YHWeg/0klK2Qodf3yrNzz6CGjo2UntLvk2RSPlhzgLvYEB3frRvbEF2wRKh1Z2fDIg9KRPe1fawv7C+g==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -2071,9 +2071,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-arm64-musl": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.60.1.tgz",
|
||||
"integrity": "sha512-+pUymDhd0ys9GcKZPPWlFiZ67sTWV5UU6zOJat02M1+PiuSGDziyRuI/pPue3hoUwm2uGfxdL+trT6Z9rxnlMA==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.57.1.tgz",
|
||||
"integrity": "sha512-1a/qhaaOXhqXGpMFMET9VqwZakkljWHLmZOX48R0I/YLbhdxr1m4gtG1Hq7++VhVUmf+L3sTAf9op4JlhQ5u1Q==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -2085,9 +2085,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-loong64-gnu": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.60.1.tgz",
|
||||
"integrity": "sha512-VSvgvQeIcsEvY4bKDHEDWcpW4Yw7BtlKG1GUT4FzBUlEKQK0rWHYBqQt6Fm2taXS+1bXvJT6kICu5ZwqKCnvlQ==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.57.1.tgz",
|
||||
"integrity": "sha512-QWO6RQTZ/cqYtJMtxhkRkidoNGXc7ERPbZN7dVW5SdURuLeVU7lwKMpo18XdcmpWYd0qsP1bwKPf7DNSUinhvA==",
|
||||
"cpu": [
|
||||
"loong64"
|
||||
],
|
||||
@ -2099,9 +2099,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-loong64-musl": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.60.1.tgz",
|
||||
"integrity": "sha512-4LqhUomJqwe641gsPp6xLfhqWMbQV04KtPp7/dIp0nzPxAkNY1AbwL5W0MQpcalLYk07vaW9Kp1PBhdpZYYcEw==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.57.1.tgz",
|
||||
"integrity": "sha512-xpObYIf+8gprgWaPP32xiN5RVTi/s5FCR+XMXSKmhfoJjrpRAjCuuqQXyxUa/eJTdAE6eJ+KDKaoEqjZQxh3Gw==",
|
||||
"cpu": [
|
||||
"loong64"
|
||||
],
|
||||
@ -2113,9 +2113,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-ppc64-gnu": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.60.1.tgz",
|
||||
"integrity": "sha512-tLQQ9aPvkBxOc/EUT6j3pyeMD6Hb8QF2BTBnCQWP/uu1lhc9AIrIjKnLYMEroIz/JvtGYgI9dF3AxHZNaEH0rw==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.57.1.tgz",
|
||||
"integrity": "sha512-4BrCgrpZo4hvzMDKRqEaW1zeecScDCR+2nZ86ATLhAoJ5FQ+lbHVD3ttKe74/c7tNT9c6F2viwB3ufwp01Oh2w==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
@ -2127,9 +2127,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-ppc64-musl": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.60.1.tgz",
|
||||
"integrity": "sha512-RMxFhJwc9fSXP6PqmAz4cbv3kAyvD1etJFjTx4ONqFP9DkTkXsAMU4v3Vyc5BgzC+anz7nS/9tp4obsKfqkDHg==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.57.1.tgz",
|
||||
"integrity": "sha512-NOlUuzesGauESAyEYFSe3QTUguL+lvrN1HtwEEsU2rOwdUDeTMJdO5dUYl/2hKf9jWydJrO9OL/XSSf65R5+Xw==",
|
||||
"cpu": [
|
||||
"ppc64"
|
||||
],
|
||||
@ -2141,9 +2141,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-riscv64-gnu": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.60.1.tgz",
|
||||
"integrity": "sha512-QKgFl+Yc1eEk6MmOBfRHYF6lTxiiiV3/z/BRrbSiW2I7AFTXoBFvdMEyglohPj//2mZS4hDOqeB0H1ACh3sBbg==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.57.1.tgz",
|
||||
"integrity": "sha512-ptA88htVp0AwUUqhVghwDIKlvJMD/fmL/wrQj99PRHFRAG6Z5nbWoWG4o81Nt9FT+IuqUQi+L31ZKAFeJ5Is+A==",
|
||||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
@ -2155,9 +2155,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-riscv64-musl": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.60.1.tgz",
|
||||
"integrity": "sha512-RAjXjP/8c6ZtzatZcA1RaQr6O1TRhzC+adn8YZDnChliZHviqIjmvFwHcxi4JKPSDAt6Uhf/7vqcBzQJy0PDJg==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.57.1.tgz",
|
||||
"integrity": "sha512-S51t7aMMTNdmAMPpBg7OOsTdn4tySRQvklmL3RpDRyknk87+Sp3xaumlatU+ppQ+5raY7sSTcC2beGgvhENfuw==",
|
||||
"cpu": [
|
||||
"riscv64"
|
||||
],
|
||||
@ -2169,9 +2169,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-s390x-gnu": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.60.1.tgz",
|
||||
"integrity": "sha512-wcuocpaOlaL1COBYiA89O6yfjlp3RwKDeTIA0hM7OpmhR1Bjo9j31G1uQVpDlTvwxGn2nQs65fBFL5UFd76FcQ==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.57.1.tgz",
|
||||
"integrity": "sha512-Bl00OFnVFkL82FHbEqy3k5CUCKH6OEJL54KCyx2oqsmZnFTR8IoNqBF+mjQVcRCT5sB6yOvK8A37LNm/kPJiZg==",
|
||||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
@ -2183,9 +2183,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-x64-gnu": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.60.1.tgz",
|
||||
"integrity": "sha512-77PpsFQUCOiZR9+LQEFg9GClyfkNXj1MP6wRnzYs0EeWbPcHs02AXu4xuUbM1zhwn3wqaizle3AEYg5aeoohhg==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.57.1.tgz",
|
||||
"integrity": "sha512-ABca4ceT4N+Tv/GtotnWAeXZUZuM/9AQyCyKYyKnpk4yoA7QIAuBt6Hkgpw8kActYlew2mvckXkvx0FfoInnLg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -2197,9 +2197,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-linux-x64-musl": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.60.1.tgz",
|
||||
"integrity": "sha512-5cIATbk5vynAjqqmyBjlciMJl1+R/CwX9oLk/EyiFXDWd95KpHdrOJT//rnUl4cUcskrd0jCCw3wpZnhIHdD9w==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.57.1.tgz",
|
||||
"integrity": "sha512-HFps0JeGtuOR2convgRRkHCekD7j+gdAuXM+/i6kGzQtFhlCtQkpwtNzkNj6QhCDp7DRJ7+qC/1Vg2jt5iSOFw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -2211,9 +2211,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-openbsd-x64": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.60.1.tgz",
|
||||
"integrity": "sha512-cl0w09WsCi17mcmWqqglez9Gk8isgeWvoUZ3WiJFYSR3zjBQc2J5/ihSjpl+VLjPqjQ/1hJRcqBfLjssREQILw==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.57.1.tgz",
|
||||
"integrity": "sha512-H+hXEv9gdVQuDTgnqD+SQffoWoc0Of59AStSzTEj/feWTBAnSfSD3+Dql1ZruJQxmykT/JVY0dE8Ka7z0DH1hw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -2225,9 +2225,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-openharmony-arm64": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.60.1.tgz",
|
||||
"integrity": "sha512-4Cv23ZrONRbNtbZa37mLSueXUCtN7MXccChtKpUnQNgF010rjrjfHx3QxkS2PI7LqGT5xXyYs1a7LbzAwT0iCA==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.57.1.tgz",
|
||||
"integrity": "sha512-4wYoDpNg6o/oPximyc/NG+mYUejZrCU2q+2w6YZqrAs2UcNUChIZXjtafAiiZSUc7On8v5NyNj34Kzj/Ltk6dQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -2239,9 +2239,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-win32-arm64-msvc": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.60.1.tgz",
|
||||
"integrity": "sha512-i1okWYkA4FJICtr7KpYzFpRTHgy5jdDbZiWfvny21iIKky5YExiDXP+zbXzm3dUcFpkEeYNHgQ5fuG236JPq0g==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.57.1.tgz",
|
||||
"integrity": "sha512-O54mtsV/6LW3P8qdTcamQmuC990HDfR71lo44oZMZlXU4tzLrbvTii87Ni9opq60ds0YzuAlEr/GNwuNluZyMQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -2253,9 +2253,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-win32-ia32-msvc": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.60.1.tgz",
|
||||
"integrity": "sha512-u09m3CuwLzShA0EYKMNiFgcjjzwqtUMLmuCJLeZWjjOYA3IT2Di09KaxGBTP9xVztWyIWjVdsB2E9goMjZvTQg==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.57.1.tgz",
|
||||
"integrity": "sha512-P3dLS+IerxCT/7D2q2FYcRdWRl22dNbrbBEtxdWhXrfIMPP9lQhb5h4Du04mdl5Woq05jVCDPCMF7Ub0NAjIew==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
@ -2267,9 +2267,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-win32-x64-gnu": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.60.1.tgz",
|
||||
"integrity": "sha512-k+600V9Zl1CM7eZxJgMyTUzmrmhB/0XZnF4pRypKAlAgxmedUA+1v9R+XOFv56W4SlHEzfeMtzujLJD22Uz5zg==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.57.1.tgz",
|
||||
"integrity": "sha512-VMBH2eOOaKGtIJYleXsi2B8CPVADrh+TyNxJ4mWPnKfLB/DBUmzW+5m1xUrcwWoMfSLagIRpjUFeW5CO5hyciQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -2281,9 +2281,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/@rollup/rollup-win32-x64-msvc": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.60.1.tgz",
|
||||
"integrity": "sha512-lWMnixq/QzxyhTV6NjQJ4SFo1J6PvOX8vUx5Wb4bBPsEb+8xZ89Bz6kOXpfXj9ak9AHTQVQzlgzBEc1SyM27xQ==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.57.1.tgz",
|
||||
"integrity": "sha512-mxRFDdHIWRxg3UfIIAwCm6NzvxG0jDX/wBN6KsQFTvKFqqg9vTrWUE68qEjHt19A5wwx5X5aUi2zuZT7YR0jrA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -2711,9 +2711,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
|
||||
"integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
|
||||
"version": "2.0.2",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
|
||||
"integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@ -2721,13 +2721,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
|
||||
"version": "9.0.9",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
|
||||
"integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
|
||||
"version": "9.0.5",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
|
||||
"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"brace-expansion": "^2.0.2"
|
||||
"brace-expansion": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=16 || 14 >=14.17"
|
||||
@ -2873,9 +2873,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/ajv": {
|
||||
"version": "6.14.0",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
|
||||
"integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
|
||||
"version": "6.12.6",
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
|
||||
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@ -2927,9 +2927,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/anymatch/node_modules/picomatch": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
|
||||
"integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
||||
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
@ -3015,14 +3015,14 @@
|
||||
}
|
||||
},
|
||||
"node_modules/axios": {
|
||||
"version": "1.15.0",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.15.0.tgz",
|
||||
"integrity": "sha512-wWyJDlAatxk30ZJer+GeCWS209sA42X+N5jU2jy6oHTp7ufw8uzUTVFBX9+wTfAlhiJXGS0Bq7X6efruWjuK9Q==",
|
||||
"version": "1.13.5",
|
||||
"resolved": "https://registry.npmjs.org/axios/-/axios-1.13.5.tgz",
|
||||
"integrity": "sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"follow-redirects": "^1.15.11",
|
||||
"form-data": "^4.0.5",
|
||||
"proxy-from-env": "^2.1.0"
|
||||
"proxy-from-env": "^1.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/balanced-match": {
|
||||
@ -3077,9 +3077,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/brace-expansion": {
|
||||
"version": "1.1.14",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
|
||||
"integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
|
||||
"version": "1.1.12",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
|
||||
"integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@ -3946,9 +3946,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/fast-xml-parser": {
|
||||
"version": "4.5.6",
|
||||
"resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.5.6.tgz",
|
||||
"integrity": "sha512-Yd4vkROfJf8AuJrDIVMVmYfULKmIJszVsMv7Vo71aocsKgFxpdlpSHXSaInvyYfgw2PRuObQSW2GFpVMUjxu9A==",
|
||||
"version": "4.5.4",
|
||||
"resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.5.4.tgz",
|
||||
"integrity": "sha512-jE8ugADnYOBsu1uaoayVl1tVKAMNOXyjwvv2U6udEA2ORBhDooJDWoGxTkhd4Qn4yh59JVVt/pKXtjPwx9OguQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
@ -4055,16 +4055,16 @@
|
||||
}
|
||||
},
|
||||
"node_modules/flatted": {
|
||||
"version": "3.4.2",
|
||||
"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
|
||||
"integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
|
||||
"version": "3.3.3",
|
||||
"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
|
||||
"integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/follow-redirects": {
|
||||
"version": "1.16.0",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.16.0.tgz",
|
||||
"integrity": "sha512-y5rN/uOsadFT/JfYwhxRS5R7Qce+g3zG97+JrtFZlC9klX/W5hD7iiLzScI4nZqUS7DNUdhPgw4xI8W2LuXlUw==",
|
||||
"version": "1.15.11",
|
||||
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
|
||||
"integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "individual",
|
||||
@ -4904,9 +4904,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/micromatch/node_modules/picomatch": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
|
||||
"integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
||||
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
@ -4938,9 +4938,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/minimatch": {
|
||||
"version": "3.1.5",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
|
||||
"integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
|
||||
"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
@ -5169,9 +5169,9 @@
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/picomatch": {
|
||||
"version": "4.0.4",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
|
||||
"integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
|
||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
@ -5409,13 +5409,10 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/proxy-from-env": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-2.1.0.tgz",
|
||||
"integrity": "sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
}
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
|
||||
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/punycode": {
|
||||
"version": "2.3.1",
|
||||
@ -5572,9 +5569,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/readdirp/node_modules/picomatch": {
|
||||
"version": "2.3.2",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
|
||||
"integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
|
||||
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
@ -5636,9 +5633,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.1.tgz",
|
||||
"integrity": "sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w==",
|
||||
"version": "4.57.1",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
|
||||
"integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@ -5652,31 +5649,31 @@
|
||||
"npm": ">=8.0.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@rollup/rollup-android-arm-eabi": "4.60.1",
|
||||
"@rollup/rollup-android-arm64": "4.60.1",
|
||||
"@rollup/rollup-darwin-arm64": "4.60.1",
|
||||
"@rollup/rollup-darwin-x64": "4.60.1",
|
||||
"@rollup/rollup-freebsd-arm64": "4.60.1",
|
||||
"@rollup/rollup-freebsd-x64": "4.60.1",
|
||||
"@rollup/rollup-linux-arm-gnueabihf": "4.60.1",
|
||||
"@rollup/rollup-linux-arm-musleabihf": "4.60.1",
|
||||
"@rollup/rollup-linux-arm64-gnu": "4.60.1",
|
||||
"@rollup/rollup-linux-arm64-musl": "4.60.1",
|
||||
"@rollup/rollup-linux-loong64-gnu": "4.60.1",
|
||||
"@rollup/rollup-linux-loong64-musl": "4.60.1",
|
||||
"@rollup/rollup-linux-ppc64-gnu": "4.60.1",
|
||||
"@rollup/rollup-linux-ppc64-musl": "4.60.1",
|
||||
"@rollup/rollup-linux-riscv64-gnu": "4.60.1",
|
||||
"@rollup/rollup-linux-riscv64-musl": "4.60.1",
|
||||
"@rollup/rollup-linux-s390x-gnu": "4.60.1",
|
||||
"@rollup/rollup-linux-x64-gnu": "4.60.1",
|
||||
"@rollup/rollup-linux-x64-musl": "4.60.1",
|
||||
"@rollup/rollup-openbsd-x64": "4.60.1",
|
||||
"@rollup/rollup-openharmony-arm64": "4.60.1",
|
||||
"@rollup/rollup-win32-arm64-msvc": "4.60.1",
|
||||
"@rollup/rollup-win32-ia32-msvc": "4.60.1",
|
||||
"@rollup/rollup-win32-x64-gnu": "4.60.1",
|
||||
"@rollup/rollup-win32-x64-msvc": "4.60.1",
|
||||
"@rollup/rollup-android-arm-eabi": "4.57.1",
|
||||
"@rollup/rollup-android-arm64": "4.57.1",
|
||||
"@rollup/rollup-darwin-arm64": "4.57.1",
|
||||
"@rollup/rollup-darwin-x64": "4.57.1",
|
||||
"@rollup/rollup-freebsd-arm64": "4.57.1",
|
||||
"@rollup/rollup-freebsd-x64": "4.57.1",
|
||||
"@rollup/rollup-linux-arm-gnueabihf": "4.57.1",
|
||||
"@rollup/rollup-linux-arm-musleabihf": "4.57.1",
|
||||
"@rollup/rollup-linux-arm64-gnu": "4.57.1",
|
||||
"@rollup/rollup-linux-arm64-musl": "4.57.1",
|
||||
"@rollup/rollup-linux-loong64-gnu": "4.57.1",
|
||||
"@rollup/rollup-linux-loong64-musl": "4.57.1",
|
||||
"@rollup/rollup-linux-ppc64-gnu": "4.57.1",
|
||||
"@rollup/rollup-linux-ppc64-musl": "4.57.1",
|
||||
"@rollup/rollup-linux-riscv64-gnu": "4.57.1",
|
||||
"@rollup/rollup-linux-riscv64-musl": "4.57.1",
|
||||
"@rollup/rollup-linux-s390x-gnu": "4.57.1",
|
||||
"@rollup/rollup-linux-x64-gnu": "4.57.1",
|
||||
"@rollup/rollup-linux-x64-musl": "4.57.1",
|
||||
"@rollup/rollup-openbsd-x64": "4.57.1",
|
||||
"@rollup/rollup-openharmony-arm64": "4.57.1",
|
||||
"@rollup/rollup-win32-arm64-msvc": "4.57.1",
|
||||
"@rollup/rollup-win32-ia32-msvc": "4.57.1",
|
||||
"@rollup/rollup-win32-x64-gnu": "4.57.1",
|
||||
"@rollup/rollup-win32-x64-msvc": "4.57.1",
|
||||
"fsevents": "~2.3.2"
|
||||
}
|
||||
},
|
||||
@ -5804,9 +5801,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/socket.io-parser": {
|
||||
"version": "4.2.6",
|
||||
"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.6.tgz",
|
||||
"integrity": "sha512-asJqbVBDsBCJx0pTqw3WfesSY0iRX+2xzWEWzrpcH7L6fLzrhyF8WPI8UaeM4YCuDfpwA/cgsdugMsmtz8EJeg==",
|
||||
"version": "4.2.5",
|
||||
"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.5.tgz",
|
||||
"integrity": "sha512-bPMmpy/5WWKHea5Y/jYAP6k74A+hvmRCQaJuJB6I/ML5JZq/KfNieUVo/3Mh7SAqn7TyFdIo6wqYHInG1MU1bQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@socket.io/component-emitter": "~3.1.0",
|
||||
@ -6288,9 +6285,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "7.3.2",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
|
||||
"integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
|
||||
"version": "7.3.1",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
|
||||
"integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
|
||||
@ -1,25 +1,25 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Routes, Route } from 'react-router-dom';
|
||||
import { GoogleOAuthProvider } from '@react-oauth/google';
|
||||
import type { MainTab } from '@/types/navigation';
|
||||
import { MainLayout } from '@components/common/layout/MainLayout';
|
||||
import { LoginPage } from '@components/common/auth/LoginPage';
|
||||
import type { MainTab } from '@common/types/navigation';
|
||||
import { MainLayout } from '@common/components/layout/MainLayout';
|
||||
import { LoginPage } from '@common/components/auth/LoginPage';
|
||||
import { registerMainTabSwitcher } from '@common/hooks/useSubMenu';
|
||||
import { useAuthStore } from '@common/store/authStore';
|
||||
import { useMenuStore } from '@common/store/menuStore';
|
||||
import { useMapStore } from '@common/store/mapStore';
|
||||
import { API_BASE_URL } from '@common/services/api';
|
||||
import { OilSpillView } from '@components/prediction';
|
||||
import { ReportsView } from '@components/reports';
|
||||
import { HNSView } from '@components/hns';
|
||||
import { AerialView } from '@components/aerial';
|
||||
import { AssetsView } from '@components/assets';
|
||||
import { BoardView } from '@components/board';
|
||||
import { WeatherView } from '@components/weather';
|
||||
import { IncidentsView } from '@components/incidents';
|
||||
import { AdminView } from '@components/admin';
|
||||
import { ScatView } from '@components/scat';
|
||||
import { RescueView } from '@components/rescue';
|
||||
import { OilSpillView } from '@tabs/prediction';
|
||||
import { ReportsView } from '@tabs/reports';
|
||||
import { HNSView } from '@tabs/hns';
|
||||
import { AerialView } from '@tabs/aerial';
|
||||
import { AssetsView } from '@tabs/assets';
|
||||
import { BoardView } from '@tabs/board';
|
||||
import { WeatherView } from '@tabs/weather';
|
||||
import { IncidentsView } from '@tabs/incidents';
|
||||
import { AdminView } from '@tabs/admin';
|
||||
import { ScatView } from '@tabs/scat';
|
||||
import { RescueView } from '@tabs/rescue';
|
||||
import { DesignPage } from '@/pages/design/DesignPage';
|
||||
|
||||
const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID || '';
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { GoogleLogin, type CredentialResponse } from '@react-oauth/google';
|
||||
import { useAuthStore } from '@common/store/authStore';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
|
||||
/* Demo accounts (개발 모드 전용) */
|
||||
const DEMO_ACCOUNTS = [{ id: 'admin', password: 'admin1234', label: '관리자 (경정)' }];
|
||||
@ -120,7 +120,7 @@ export function LoginPage() {
|
||||
</label>
|
||||
<div className="relative">
|
||||
<span
|
||||
className="absolute text-body-2 text-fg-disabled pointer-events-none"
|
||||
className="absolute text-sm text-fg-disabled pointer-events-none"
|
||||
style={{ left: 12, top: '50%', transform: 'translateY(-50%)' }}
|
||||
>
|
||||
<svg
|
||||
@ -174,7 +174,7 @@ export function LoginPage() {
|
||||
</label>
|
||||
<div className="relative">
|
||||
<span
|
||||
className="absolute text-body-2 text-fg-disabled pointer-events-none"
|
||||
className="absolute text-sm text-fg-disabled pointer-events-none"
|
||||
style={{ left: 12, top: '50%', transform: 'translateY(-50%)' }}
|
||||
>
|
||||
<svg
|
||||
@ -249,7 +249,7 @@ export function LoginPage() {
|
||||
color: '#67e8f9',
|
||||
}}
|
||||
>
|
||||
<span className="text-body-2 shrink-0 mt-px">
|
||||
<span className="text-sm shrink-0 mt-px">
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
@ -303,7 +303,7 @@ export function LoginPage() {
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isLoading}
|
||||
className="w-full text-color-accent text-body-2 font-bold rounded-md border"
|
||||
className="w-full text-color-accent text-sm font-bold rounded-md border"
|
||||
style={{
|
||||
padding: '12px',
|
||||
background: isLoading
|
||||
0
frontend/src/components/common/layer/LayerTree.tsx → frontend/src/common/components/layer/LayerTree.tsx
Normal file → Executable file
0
frontend/src/components/common/layer/LayerTree.tsx → frontend/src/common/components/layer/LayerTree.tsx
Normal file → Executable file
2
frontend/src/components/common/layout/MainLayout.tsx → frontend/src/common/components/layout/MainLayout.tsx
Normal file → Executable file
2
frontend/src/components/common/layout/MainLayout.tsx → frontend/src/common/components/layout/MainLayout.tsx
Normal file → Executable file
@ -1,5 +1,5 @@
|
||||
import type { ReactNode } from 'react';
|
||||
import type { MainTab } from '@/types/navigation';
|
||||
import type { MainTab } from '../../types/navigation';
|
||||
import { TopBar } from './TopBar';
|
||||
import { SubMenuBar } from './SubMenuBar';
|
||||
|
||||
6
frontend/src/components/common/layout/SubMenuBar.tsx → frontend/src/common/components/layout/SubMenuBar.tsx
Normal file → Executable file
6
frontend/src/components/common/layout/SubMenuBar.tsx → frontend/src/common/components/layout/SubMenuBar.tsx
Normal file → Executable file
@ -1,5 +1,5 @@
|
||||
import type { MainTab } from '@/types/navigation';
|
||||
import { useSubMenu } from '@common/hooks/useSubMenu';
|
||||
import type { MainTab } from '../../types/navigation';
|
||||
import { useSubMenu } from '../../hooks/useSubMenu';
|
||||
|
||||
interface SubMenuBarProps {
|
||||
activeMainTab: MainTab;
|
||||
@ -21,7 +21,7 @@ export function SubMenuBar({ activeMainTab }: SubMenuBarProps) {
|
||||
key={item.id}
|
||||
onClick={() => setActiveSubTab(item.id)}
|
||||
className={`
|
||||
px-4 py-2.5 text-title-4 font-medium transition-all duration-200
|
||||
px-4 py-2.5 text-title-5 font-medium transition-all duration-200
|
||||
font-korean tracking-navigation
|
||||
${activeSubTab === item.id ? 'text-color-accent' : 'text-fg-sub hover:text-fg'}
|
||||
`}
|
||||
27
frontend/src/components/common/layout/TopBar.tsx → frontend/src/common/components/layout/TopBar.tsx
Normal file → Executable file
27
frontend/src/components/common/layout/TopBar.tsx → frontend/src/common/components/layout/TopBar.tsx
Normal file → Executable file
@ -1,11 +1,10 @@
|
||||
import { useState, useRef, useEffect, useMemo } from 'react';
|
||||
import type { MainTab } from '@/types/navigation';
|
||||
import { useAuthStore } from '@common/store/authStore';
|
||||
import { useMenuStore } from '@common/store/menuStore';
|
||||
import { useMapStore } from '@common/store/mapStore';
|
||||
import { useThemeStore } from '@common/store/themeStore';
|
||||
import type { MainTab } from '../../types/navigation';
|
||||
import { useAuthStore } from '../../store/authStore';
|
||||
import { useMenuStore } from '../../store/menuStore';
|
||||
import { useMapStore } from '../../store/mapStore';
|
||||
import { useThemeStore } from '../../store/themeStore';
|
||||
import UserManualPopup from '../ui/UserManualPopup';
|
||||
/* eslint-disable react-refresh/only-export-components */
|
||||
|
||||
interface TopBarProps {
|
||||
activeTab: MainTab;
|
||||
@ -57,7 +56,11 @@ export function TopBar({ activeTab, onTabChange }: TopBarProps) {
|
||||
className="flex items-center hover:opacity-80 transition-opacity cursor-pointer"
|
||||
title="홈으로 이동"
|
||||
>
|
||||
<img src="/wing_logo_white.svg" alt="WING 해양환경 위기대응" className="h-5 wing-logo" />
|
||||
<img
|
||||
src="/wing_logo_white.svg"
|
||||
alt="WING 해양환경 위기대응"
|
||||
className="h-3.5 wing-logo"
|
||||
/>
|
||||
</button>
|
||||
|
||||
{/* Divider */}
|
||||
@ -84,7 +87,7 @@ export function TopBar({ activeTab, onTabChange }: TopBarProps) {
|
||||
onClick={handleClick}
|
||||
title={tab.label}
|
||||
className={`
|
||||
px-2.5 xl:px-4 py-2 text-title-2 font-bold transition-all duration-200
|
||||
px-2.5 xl:px-4 py-2 text-title-4 font-bold transition-all duration-200
|
||||
font-korean tracking-navigation border-b-2 border-transparent
|
||||
${isIncident ? 'ml-1' : ''}
|
||||
${isMonitor ? 'ml-1 flex items-center gap-1.5' : ''}
|
||||
@ -124,7 +127,7 @@ export function TopBar({ activeTab, onTabChange }: TopBarProps) {
|
||||
{/* Right Section */}
|
||||
<div className="flex items-center gap-3">
|
||||
{/* Status Badge */}
|
||||
{/* <div className="flex items-center gap-2 px-3 py-1.5 bg-[rgba(239,68,68,0.1)] border border-[rgba(239,68,68,0.2)] rounded-sm text-caption font-medium text-color-danger animate-pulse">
|
||||
{/* <div className="flex items-center gap-2 px-3 py-1.5 bg-[rgba(239,68,68,0.1)] border border-[rgba(239,68,68,0.2)] rounded-sm text-xs font-medium text-color-danger animate-pulse">
|
||||
<div className="w-1.5 h-1.5 rounded-full bg-color-danger animate-pulse" />
|
||||
사고 진행중
|
||||
</div> */}
|
||||
@ -247,17 +250,17 @@ export function TopBar({ activeTab, onTabChange }: TopBarProps) {
|
||||
{mapTypes.map((item) => (
|
||||
<button
|
||||
key={item.mapKey}
|
||||
onClick={() => toggleMap(item.mapKey as keyof typeof mapToggles)}
|
||||
onClick={() => toggleMap(item.mapKey)}
|
||||
className="w-full px-3 py-2 flex items-center justify-between text-title-5 text-fg-sub hover:bg-[var(--hover-overlay)] transition-all"
|
||||
>
|
||||
<span className="flex items-center gap-2.5">
|
||||
<span className="text-title-4">🗺</span> {item.mapNm}
|
||||
</span>
|
||||
<div
|
||||
className={`w-[34px] h-[18px] rounded-full transition-all relative ${mapToggles[item.mapKey as keyof typeof mapToggles] ? 'bg-color-accent' : 'bg-bg-card border border-stroke'}`}
|
||||
className={`w-[34px] h-[18px] rounded-full transition-all relative ${mapToggles[item.mapKey] ? 'bg-color-accent' : 'bg-bg-card border border-stroke'}`}
|
||||
>
|
||||
<div
|
||||
className={`absolute top-[2px] w-[14px] h-[14px] rounded-full bg-white shadow transition-all ${mapToggles[item.mapKey as keyof typeof mapToggles] ? 'left-[16px]' : 'left-[2px]'}`}
|
||||
className={`absolute top-[2px] w-[14px] h-[14px] rounded-full bg-white shadow transition-all ${mapToggles[item.mapKey] ? 'left-[16px]' : 'left-[2px]'}`}
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
6
frontend/src/components/common/map/BacktrackReplayBar.tsx → frontend/src/common/components/map/BacktrackReplayBar.tsx
Normal file → Executable file
6
frontend/src/components/common/map/BacktrackReplayBar.tsx → frontend/src/common/components/map/BacktrackReplayBar.tsx
Normal file → Executable file
@ -1,5 +1,5 @@
|
||||
import { useRef, useEffect } from 'react';
|
||||
import type { ReplayShip, CollisionEvent } from '@/types/backtrack';
|
||||
import type { ReplayShip, CollisionEvent } from '@common/types/backtrack';
|
||||
|
||||
interface BacktrackReplayBarProps {
|
||||
isPlaying: boolean;
|
||||
@ -141,7 +141,7 @@ export function BacktrackReplayBar({
|
||||
className="w-2 h-2 rounded-full bg-color-tertiary"
|
||||
style={{ boxShadow: '0 0 8px rgba(168,85,247,0.5)' }}
|
||||
/>
|
||||
<span className="text-caption font-bold">역추적 리플레이</span>
|
||||
<span className="text-xs font-bold">역추적 리플레이</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5">
|
||||
@ -180,7 +180,7 @@ export function BacktrackReplayBar({
|
||||
{/* Play/Pause */}
|
||||
<button
|
||||
onClick={handlePlayClick}
|
||||
className="shrink-0 w-9 h-9 rounded-full flex items-center justify-center text-body-2 cursor-pointer"
|
||||
className="shrink-0 w-9 h-9 rounded-full flex items-center justify-center text-sm cursor-pointer"
|
||||
style={{
|
||||
background: isPlaying ? 'var(--color-tertiary)' : 'rgba(168,85,247,0.15)',
|
||||
border: `2px solid ${isPlaying ? 'var(--color-tertiary)' : 'rgba(168,85,247,0.4)'}`,
|
||||
2
frontend/src/components/common/map/BacktrackReplayOverlay.tsx → frontend/src/common/components/map/BacktrackReplayOverlay.tsx
Normal file → Executable file
2
frontend/src/components/common/map/BacktrackReplayOverlay.tsx → frontend/src/common/components/map/BacktrackReplayOverlay.tsx
Normal file → Executable file
@ -4,7 +4,7 @@ import type {
|
||||
CollisionEvent,
|
||||
ReplayPathPoint,
|
||||
BackwardParticleStep,
|
||||
} from '@/types/backtrack';
|
||||
} from '@common/types/backtrack';
|
||||
import { hexToRgba } from './mapUtils';
|
||||
|
||||
// Andrew's monotone chain — 전체 파티클 경로의 외각 폴리곤 계산
|
||||
@ -1,6 +1,6 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { useMap } from '@vis.gl/react-maplibre';
|
||||
import type { HydrDataStep } from '@interfaces/prediction/PredictionInterface';
|
||||
import type { HydrDataStep } from '@tabs/prediction/services/predictionApi';
|
||||
|
||||
interface HydrParticleOverlayProps {
|
||||
hydrStep: HydrDataStep | null;
|
||||
@ -15,12 +15,11 @@ const PI_4 = Math.PI / 4;
|
||||
const FADE_ALPHA = 0.02; // 프레임당 페이드량 (낮을수록 긴 꼬리)
|
||||
|
||||
export default function HydrParticleOverlay({ hydrStep }: HydrParticleOverlayProps) {
|
||||
const { current: mapRef } = useMap();
|
||||
const animRef = useRef<number | undefined>(undefined);
|
||||
const { current: map } = useMap();
|
||||
const animRef = useRef<number>();
|
||||
|
||||
useEffect(() => {
|
||||
if (!mapRef || !hydrStep) return;
|
||||
const map = mapRef;
|
||||
if (!map || !hydrStep) return;
|
||||
|
||||
const container = map.getContainer();
|
||||
const canvas = document.createElement('canvas');
|
||||
@ -213,7 +212,7 @@ export default function HydrParticleOverlay({ hydrStep }: HydrParticleOverlayPro
|
||||
map.off('move', onMove);
|
||||
canvas.remove();
|
||||
};
|
||||
}, [mapRef, hydrStep]);
|
||||
}, [map, hydrStep]);
|
||||
|
||||
return null;
|
||||
}
|
||||
307
frontend/src/components/common/map/MapView.tsx → frontend/src/common/components/map/MapView.tsx
Normal file → Executable file
307
frontend/src/components/common/map/MapView.tsx → frontend/src/common/components/map/MapView.tsx
Normal file → Executable file
@ -1,5 +1,6 @@
|
||||
import { useState, useMemo, useEffect, useCallback, useRef } from 'react';
|
||||
import { Map, Marker, Popup, Source, Layer, useMap } from '@vis.gl/react-maplibre';
|
||||
import { Map, Marker, Popup, Source, Layer, useControl, useMap } from '@vis.gl/react-maplibre';
|
||||
import { MapboxOverlay } from '@deck.gl/mapbox';
|
||||
import {
|
||||
ScatterplotLayer,
|
||||
PathLayer,
|
||||
@ -12,16 +13,14 @@ import type { PickingInfo, Layer as DeckLayer } from '@deck.gl/core';
|
||||
import type { MapLayerMouseEvent } from 'maplibre-gl';
|
||||
import 'maplibre-gl/dist/maplibre-gl.css';
|
||||
import { layerDatabase } from '@common/services/layerService';
|
||||
import type { PredictionModel } from '@/types/prediction/PredictionType';
|
||||
import type { SensitiveResource } from '@interfaces/prediction/PredictionInterface';
|
||||
import type { PredictionModel, SensitiveResource } from '@tabs/prediction/components/OilSpillView';
|
||||
import type {
|
||||
HydrDataStep,
|
||||
SensitiveResourceFeatureCollection,
|
||||
} from '@interfaces/prediction/PredictionInterface';
|
||||
} from '@tabs/prediction/services/predictionApi';
|
||||
import HydrParticleOverlay from './HydrParticleOverlay';
|
||||
import { TimelineControl } from './TimelineControl';
|
||||
import type { BoomLine, BoomLineCoord } from '@/types/boomLine';
|
||||
import type { ReplayShip, CollisionEvent, BackwardParticleStep } from '@/types/backtrack';
|
||||
import type { BoomLine, BoomLineCoord } from '@common/types/boomLine';
|
||||
import type { ReplayShip, CollisionEvent, BackwardParticleStep } from '@common/types/backtrack';
|
||||
import { createBacktrackLayers } from './BacktrackReplayOverlay';
|
||||
import { buildMeasureLayers } from './measureLayers';
|
||||
import { MeasureOverlay } from './MeasureOverlay';
|
||||
@ -29,20 +28,8 @@ import { useMeasureTool } from '@common/hooks/useMeasureTool';
|
||||
import { hexToRgba } from './mapUtils';
|
||||
import { S57EncOverlay } from './S57EncOverlay';
|
||||
import { SrOverlay } from './SrOverlay';
|
||||
import { DeckGLOverlay } from './DeckGLOverlay';
|
||||
import { FlyToController } from './FlyToController';
|
||||
import { useMapStore } from '@common/store/mapStore';
|
||||
import { useBaseMapStyle } from '@common/hooks/useBaseMapStyle';
|
||||
import { buildVesselLayers } from './VesselLayer';
|
||||
import { MapBoundsTracker } from './MapBoundsTracker';
|
||||
import {
|
||||
VesselHoverTooltip,
|
||||
VesselPopupPanel,
|
||||
VesselDetailModal,
|
||||
type VesselHoverInfo,
|
||||
} from './VesselInteraction';
|
||||
import type { VesselPosition, MapBounds } from '@/types/vessel';
|
||||
/* eslint-disable react-refresh/only-export-components */
|
||||
|
||||
const GEOSERVER_URL = import.meta.env.VITE_GEOSERVER_URL || 'http://localhost:8080';
|
||||
|
||||
@ -112,20 +99,12 @@ interface DispersionZone {
|
||||
angle: number;
|
||||
}
|
||||
|
||||
interface DispersionContour {
|
||||
level: string;
|
||||
threshold: number;
|
||||
color: string;
|
||||
segments: Array<[[number, number], [number, number]]>;
|
||||
}
|
||||
|
||||
interface DispersionResult {
|
||||
zones: DispersionZone[];
|
||||
timestamp: string;
|
||||
windDirection: number;
|
||||
substance: string;
|
||||
concentration: Record<string, string>;
|
||||
contours?: DispersionContour[];
|
||||
}
|
||||
|
||||
interface MapViewProps {
|
||||
@ -147,7 +126,6 @@ interface MapViewProps {
|
||||
dispersionResult?: DispersionResult | null;
|
||||
dispersionHeatmap?: Array<{ lon: number; lat: number; concentration: number }>;
|
||||
boomLines?: BoomLine[];
|
||||
showBoomLines?: boolean;
|
||||
isDrawingBoom?: boolean;
|
||||
drawingPoints?: BoomLineCoord[];
|
||||
layerOpacity?: number;
|
||||
@ -185,15 +163,33 @@ interface MapViewProps {
|
||||
analysisCircleRadiusM?: number;
|
||||
/** false로 설정 시 WeatherInfoPanel, MapLegend, CoordinateDisplay 숨김 (기본: true) */
|
||||
showOverlays?: boolean;
|
||||
/** 선박 신호 목록 (실시간 표출) */
|
||||
vessels?: VesselPosition[];
|
||||
/** 지도 뷰포트 bounds 변경 콜백 (선박 신호 필터링에 사용) */
|
||||
onBoundsChange?: (bounds: MapBounds) => void;
|
||||
}
|
||||
|
||||
// DeckGLOverlay, FlyToController → @components/common/map/DeckGLOverlay, FlyToController 에서 import
|
||||
// deck.gl 오버레이 컴포넌트 (MapLibre 컨트롤로 등록, interleaved)
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
function DeckGLOverlay({ layers }: { layers: any[] }) {
|
||||
const overlay = useControl<MapboxOverlay>(() => new MapboxOverlay({ interleaved: true }));
|
||||
overlay.setProps({ layers });
|
||||
return null;
|
||||
}
|
||||
|
||||
// MapBoundsTracker는 './MapBoundsTracker' 모듈로 추출됨 (IncidentsView 등 BaseMap 직접 사용처에서도 재사용)
|
||||
// flyTo 트리거 컴포넌트 (Map 내부에서 useMap() 사용)
|
||||
function FlyToController({
|
||||
flyToTarget,
|
||||
}: {
|
||||
flyToTarget?: { lng: number; lat: number; zoom?: number } | null;
|
||||
}) {
|
||||
const { current: map } = useMap();
|
||||
useEffect(() => {
|
||||
if (!map || !flyToTarget) return;
|
||||
map.flyTo({
|
||||
center: [flyToTarget.lng, flyToTarget.lat],
|
||||
zoom: flyToTarget.zoom ?? 10,
|
||||
duration: 1200,
|
||||
});
|
||||
}, [flyToTarget, map]);
|
||||
return null;
|
||||
}
|
||||
|
||||
// fitBounds 트리거 컴포넌트 (Map 내부에서 useMap() 사용)
|
||||
function FitBoundsController({
|
||||
@ -345,7 +341,6 @@ export function MapView({
|
||||
dispersionResult = null,
|
||||
dispersionHeatmap = [],
|
||||
boomLines = [],
|
||||
showBoomLines = true,
|
||||
isDrawingBoom = false,
|
||||
drawingPoints = [],
|
||||
layerOpacity = 50,
|
||||
@ -373,8 +368,6 @@ export function MapView({
|
||||
analysisCircleCenter,
|
||||
analysisCircleRadiusM = 0,
|
||||
showOverlays = true,
|
||||
vessels = [],
|
||||
onBoundsChange,
|
||||
}: MapViewProps) {
|
||||
const lightMode = true;
|
||||
const { mapToggles, measureMode, measureInProgress, measurements } = useMapStore();
|
||||
@ -393,10 +386,6 @@ export function MapView({
|
||||
const persistentPopupRef = useRef(false);
|
||||
// 현재 호버 중인 민감자원 feature properties (handleMapClick에서 팝업 생성에 사용)
|
||||
const hoveredSensitiveRef = useRef<Record<string, unknown> | null>(null);
|
||||
// 선박 호버/클릭 상호작용 상태
|
||||
const [vesselHover, setVesselHover] = useState<VesselHoverInfo | null>(null);
|
||||
const [selectedVessel, setSelectedVessel] = useState<VesselPosition | null>(null);
|
||||
const [detailVessel, setDetailVessel] = useState<VesselPosition | null>(null);
|
||||
const currentTime = isControlled ? externalCurrentTime : internalCurrentTime;
|
||||
|
||||
const handleMapCenterChange = useCallback((lat: number, lng: number, zoom: number) => {
|
||||
@ -425,10 +414,7 @@ export function MapView({
|
||||
longitude: lng,
|
||||
latitude: lat,
|
||||
content: (
|
||||
<div
|
||||
className="text-caption font-korean"
|
||||
style={{ minWidth: '180px', maxWidth: '260px' }}
|
||||
>
|
||||
<div className="text-xs font-korean" style={{ minWidth: '180px', maxWidth: '260px' }}>
|
||||
<div className="font-semibold mb-1.5 pb-1 border-b border-[rgba(0,0,0,0.12)]">
|
||||
{String(category ?? '민감자원')}
|
||||
</div>
|
||||
@ -549,7 +535,7 @@ export function MapView({
|
||||
longitude: d.lon,
|
||||
latitude: d.lat,
|
||||
content: (
|
||||
<div className="text-caption">
|
||||
<div className="text-xs">
|
||||
<strong>
|
||||
{modelKey} 입자 #{(d.particle ?? 0) + 1}
|
||||
</strong>
|
||||
@ -598,7 +584,7 @@ export function MapView({
|
||||
}
|
||||
|
||||
// --- 오일펜스 라인 (PathLayer) ---
|
||||
if (showBoomLines && boomLines.length > 0) {
|
||||
if (boomLines.length > 0) {
|
||||
result.push(
|
||||
new PathLayer({
|
||||
id: 'boom-lines',
|
||||
@ -618,7 +604,7 @@ export function MapView({
|
||||
longitude: info.coordinate?.[0] ?? 0,
|
||||
latitude: info.coordinate?.[1] ?? 0,
|
||||
content: (
|
||||
<div className="text-caption" style={{ minWidth: '140px' }}>
|
||||
<div className="text-xs" style={{ minWidth: '140px' }}>
|
||||
<strong style={{ color: PRIORITY_COLORS[d.priority] }}>{d.name}</strong>
|
||||
<br />
|
||||
우선순위: {PRIORITY_LABELS[d.priority] || d.priority}
|
||||
@ -810,9 +796,9 @@ export function MapView({
|
||||
if (dispersionHeatmap && dispersionHeatmap.length > 0) {
|
||||
const maxConc = Math.max(...dispersionHeatmap.map((p) => p.concentration));
|
||||
const minConc = Math.min(
|
||||
...dispersionHeatmap.filter((p) => p.concentration > 0.001).map((p) => p.concentration),
|
||||
...dispersionHeatmap.filter((p) => p.concentration > 0.01).map((p) => p.concentration),
|
||||
);
|
||||
const filtered = dispersionHeatmap.filter((p) => p.concentration > 0.001);
|
||||
const filtered = dispersionHeatmap.filter((p) => p.concentration > 0.01);
|
||||
console.log(
|
||||
'[MapView] HNS 히트맵:',
|
||||
dispersionHeatmap.length,
|
||||
@ -880,7 +866,7 @@ export function MapView({
|
||||
|
||||
ctx.fillStyle = `rgba(${r},${g},${b},${a.toFixed(2)})`;
|
||||
ctx.beginPath();
|
||||
ctx.arc(px, py, 12, 0, Math.PI * 2);
|
||||
ctx.arc(px, py, 6, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
@ -900,15 +886,11 @@ export function MapView({
|
||||
|
||||
// --- HNS 대기확산 구역 (ScatterplotLayer, meters 단위) ---
|
||||
if (dispersionResult && incidentCoord) {
|
||||
// contour가 있으면 동심원 fill은 희미하게(contour가 실제 경계 표시), 없으면 진하게
|
||||
const hasContours = !!(dispersionResult.contours && dispersionResult.contours.length > 0);
|
||||
const zoneFillAlpha = hasContours ? 40 : 100;
|
||||
const zoneLineAlpha = hasContours ? 80 : 180;
|
||||
const zones = dispersionResult.zones.map((zone, idx) => ({
|
||||
position: [incidentCoord.lon, incidentCoord.lat] as [number, number],
|
||||
radius: zone.radius,
|
||||
fillColor: hexToRgba(zone.color, zoneFillAlpha),
|
||||
lineColor: hexToRgba(zone.color, zoneLineAlpha),
|
||||
fillColor: hexToRgba(zone.color, 100),
|
||||
lineColor: hexToRgba(zone.color, 180),
|
||||
level: zone.level,
|
||||
idx,
|
||||
}));
|
||||
@ -937,7 +919,7 @@ export function MapView({
|
||||
longitude: info.coordinate[0],
|
||||
latitude: info.coordinate[1],
|
||||
content: (
|
||||
<div className="text-caption leading-relaxed" style={{ minWidth: 180 }}>
|
||||
<div className="text-xs leading-relaxed" style={{ minWidth: 180 }}>
|
||||
<strong className="text-color-warning">
|
||||
{dispersionResult.substance} 대기확산 면적
|
||||
</strong>
|
||||
@ -988,27 +970,6 @@ export function MapView({
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
// --- HNS AEGL 등농도선 (PathLayer) ---
|
||||
if (dispersionResult.contours) {
|
||||
dispersionResult.contours.forEach((contour, cIdx) => {
|
||||
if (contour.segments.length === 0) return;
|
||||
const color = hexToRgba(contour.color, 230);
|
||||
result.push(
|
||||
new PathLayer({
|
||||
id: `hns-contour-${cIdx}-${contour.level}`,
|
||||
data: contour.segments,
|
||||
getPath: (d: [[number, number], [number, number]]) => d,
|
||||
getColor: color,
|
||||
getWidth: 3,
|
||||
widthUnits: 'pixels' as const,
|
||||
capRounded: true,
|
||||
jointRounded: true,
|
||||
pickable: false,
|
||||
}) as unknown as DeckLayer,
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// --- 역추적 리플레이 ---
|
||||
@ -1048,7 +1009,7 @@ export function MapView({
|
||||
longitude: d.lon,
|
||||
latitude: d.lat,
|
||||
content: (
|
||||
<div className="text-caption" style={{ minWidth: '130px' }}>
|
||||
<div className="text-xs" style={{ minWidth: '130px' }}>
|
||||
<div className="flex items-center gap-1 mb-1">
|
||||
<span>{SENSITIVE_ICONS[d.type]}</span>
|
||||
<strong style={{ color: SENSITIVE_COLORS[d.type] }}>{d.name}</strong>
|
||||
@ -1273,30 +1234,12 @@ export function MapView({
|
||||
// 거리/면적 측정 레이어
|
||||
result.push(...buildMeasureLayers(measureInProgress, measureMode, measurements));
|
||||
|
||||
// 선박 신호 레이어
|
||||
result.push(
|
||||
...buildVesselLayers(
|
||||
vessels,
|
||||
{
|
||||
onClick: (vessel) => {
|
||||
setSelectedVessel(vessel);
|
||||
setDetailVessel(null);
|
||||
},
|
||||
onHover: (vessel, x, y) => {
|
||||
setVesselHover(vessel ? { x, y, vessel } : null);
|
||||
},
|
||||
},
|
||||
mapZoom,
|
||||
),
|
||||
);
|
||||
|
||||
return result.filter(Boolean);
|
||||
}, [
|
||||
oilTrajectory,
|
||||
currentTime,
|
||||
selectedModels,
|
||||
boomLines,
|
||||
showBoomLines,
|
||||
isDrawingBoom,
|
||||
drawingPoints,
|
||||
dispersionResult,
|
||||
@ -1315,8 +1258,6 @@ export function MapView({
|
||||
analysisCircleCenter,
|
||||
analysisCircleRadiusM,
|
||||
lightMode,
|
||||
vessels,
|
||||
mapZoom,
|
||||
]);
|
||||
|
||||
// 3D 모드 / 테마에 따른 지도 스타일 전환
|
||||
@ -1331,9 +1272,8 @@ export function MapView({
|
||||
zoom: zoom,
|
||||
}}
|
||||
mapStyle={currentMapStyle}
|
||||
className="w-full h-full"
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
cursor:
|
||||
isSelectingLocation || drawAnalysisMode !== null || measureMode !== null
|
||||
? 'crosshair'
|
||||
@ -1341,7 +1281,7 @@ export function MapView({
|
||||
}}
|
||||
onClick={handleMapClick}
|
||||
attributionControl={false}
|
||||
{...({ preserveDrawingBuffer: true } as Record<string, unknown>)}
|
||||
preserveDrawingBuffer={true}
|
||||
>
|
||||
{/* 지도 캡처 셋업 */}
|
||||
{mapCaptureRef && <MapCaptureSetup captureRef={mapCaptureRef} />}
|
||||
@ -1352,11 +1292,9 @@ export function MapView({
|
||||
{/* 사고 지점 변경 시 지도 이동 */}
|
||||
<MapFlyToIncident coord={flyToIncident} onFlyEnd={onIncidentFlyEnd} />
|
||||
{/* 외부에서 flyTo 트리거 */}
|
||||
<FlyToController target={flyToTarget} duration={1200} />
|
||||
<FlyToController flyToTarget={flyToTarget} />
|
||||
{/* 예측 완료 시 궤적 전체 범위로 fitBounds */}
|
||||
<FitBoundsController fitBoundsTarget={fitBoundsTarget} />
|
||||
{/* 선박 신호 뷰포트 bounds 추적 */}
|
||||
<MapBoundsTracker onBoundsChange={onBoundsChange} />
|
||||
|
||||
{/* S-57 전자해도 오버레이 (공식 style.json 기반) */}
|
||||
<S57EncOverlay visible={mapToggles['s57'] ?? false} />
|
||||
@ -1496,7 +1434,6 @@ export function MapView({
|
||||
onTimeChange={setInternalCurrentTime}
|
||||
onPlayPause={() => setIsPlaying(!isPlaying)}
|
||||
onSpeedChange={setPlaybackSpeed}
|
||||
simulationStartTime={simulationStartTime}
|
||||
/>
|
||||
)}
|
||||
|
||||
@ -1508,26 +1445,6 @@ export function MapView({
|
||||
ships={backtrackReplay.ships}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 선박 호버 툴팁 */}
|
||||
{vesselHover && !selectedVessel && <VesselHoverTooltip hover={vesselHover} />}
|
||||
|
||||
{/* 선박 클릭 팝업 */}
|
||||
{selectedVessel && !detailVessel && (
|
||||
<VesselPopupPanel
|
||||
vessel={selectedVessel}
|
||||
onClose={() => setSelectedVessel(null)}
|
||||
onDetail={() => {
|
||||
setDetailVessel(selectedVessel);
|
||||
setSelectedVessel(null);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 선박 상세 모달 */}
|
||||
{detailVessel && (
|
||||
<VesselDetailModal vessel={detailVessel} onClose={() => setDetailVessel(null)} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1541,19 +1458,19 @@ function MapControls({ center, zoom }: { center: [number, number]; zoom: number
|
||||
<div className="flex flex-col gap-1">
|
||||
<button
|
||||
onClick={() => map?.zoomIn()}
|
||||
className="w-[28px] h-[28px] bg-[color-mix(in_srgb,var(--bg-elevated)_85%,transparent)] backdrop-blur-sm border border-stroke rounded-sm text-fg-sub flex items-center justify-center hover:bg-bg-surface-hover hover:text-fg transition-all text-caption"
|
||||
className="w-[28px] h-[28px] bg-[rgba(18,25,41,0.65)] backdrop-blur-sm border border-[rgba(30,42,66,0.5)] rounded-sm text-fg-sub flex items-center justify-center hover:bg-bg-surface-hover hover:text-fg transition-all text-xs"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
<button
|
||||
onClick={() => map?.zoomOut()}
|
||||
className="w-[28px] h-[28px] bg-[color-mix(in_srgb,var(--bg-elevated)_85%,transparent)] backdrop-blur-sm border border-stroke rounded-sm text-fg-sub flex items-center justify-center hover:bg-bg-surface-hover hover:text-fg transition-all text-caption"
|
||||
className="w-[28px] h-[28px] bg-[rgba(18,25,41,0.65)] backdrop-blur-sm border border-[rgba(30,42,66,0.5)] rounded-sm text-fg-sub flex items-center justify-center hover:bg-bg-surface-hover hover:text-fg transition-all text-xs"
|
||||
>
|
||||
−
|
||||
</button>
|
||||
<button
|
||||
onClick={() => map?.flyTo({ center: [center[1], center[0]], zoom, duration: 1000 })}
|
||||
className="w-[28px] h-[28px] bg-[color-mix(in_srgb,var(--bg-elevated)_85%,transparent)] backdrop-blur-sm border border-stroke rounded-sm text-fg-sub flex items-center justify-center hover:text-fg transition-all text-caption"
|
||||
className="w-[28px] h-[28px] bg-[rgba(18,25,41,0.65)] backdrop-blur-sm border border-[rgba(30,42,66,0.5)] rounded-sm text-fg-sub flex items-center justify-center hover:text-fg transition-all text-caption"
|
||||
>
|
||||
🎯
|
||||
</button>
|
||||
@ -1658,7 +1575,7 @@ function MapLegend({
|
||||
className="flex items-center gap-1.5 mt-2 rounded"
|
||||
style={{ padding: '6px', background: 'rgba(168,85,247,0.08)' }}
|
||||
>
|
||||
<div className="text-caption">🧭</div>
|
||||
<div className="text-xs">🧭</div>
|
||||
<span className="text-caption text-fg-disabled">풍향 (방사형)</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -1776,6 +1693,130 @@ function CoordinateDisplay({ position, zoom }: { position: [number, number]; zoo
|
||||
);
|
||||
}
|
||||
|
||||
// 타임라인 컨트롤
|
||||
interface TimelineControlProps {
|
||||
currentTime: number;
|
||||
maxTime: number;
|
||||
isPlaying: boolean;
|
||||
playbackSpeed: number;
|
||||
onTimeChange: (time: number) => void;
|
||||
onPlayPause: () => void;
|
||||
onSpeedChange: (speed: number) => void;
|
||||
}
|
||||
|
||||
function TimelineControl({
|
||||
currentTime,
|
||||
maxTime,
|
||||
isPlaying,
|
||||
playbackSpeed,
|
||||
onTimeChange,
|
||||
onPlayPause,
|
||||
onSpeedChange,
|
||||
}: TimelineControlProps) {
|
||||
const progressPercent = (currentTime / maxTime) * 100;
|
||||
|
||||
const handleRewind = () => onTimeChange(Math.max(0, currentTime - 6));
|
||||
const handleForward = () => onTimeChange(Math.min(maxTime, currentTime + 6));
|
||||
const handleStart = () => onTimeChange(0);
|
||||
const handleEnd = () => onTimeChange(maxTime);
|
||||
|
||||
const toggleSpeed = () => {
|
||||
const speeds = [1, 2, 4];
|
||||
const currentIndex = speeds.indexOf(playbackSpeed);
|
||||
onSpeedChange(speeds[(currentIndex + 1) % speeds.length]);
|
||||
};
|
||||
|
||||
const handleTimelineClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
||||
const rect = e.currentTarget.getBoundingClientRect();
|
||||
const percent = (e.clientX - rect.left) / rect.width;
|
||||
onTimeChange(Math.max(0, Math.min(maxTime, Math.round(percent * maxTime))));
|
||||
};
|
||||
|
||||
const timeLabels = [];
|
||||
for (let t = 0; t <= maxTime; t += 6) {
|
||||
timeLabels.push(t);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="tlb">
|
||||
<div className="tlc">
|
||||
<div className="tb" onClick={handleStart}>
|
||||
⏮
|
||||
</div>
|
||||
<div className="tb" onClick={handleRewind}>
|
||||
◀
|
||||
</div>
|
||||
<div className={`tb ${isPlaying ? 'on' : ''}`} onClick={onPlayPause}>
|
||||
{isPlaying ? '⏸' : '▶'}
|
||||
</div>
|
||||
<div className="tb" onClick={handleForward}>
|
||||
▶▶
|
||||
</div>
|
||||
<div className="tb" onClick={handleEnd}>
|
||||
⏭
|
||||
</div>
|
||||
<div className="w-2" />
|
||||
<div className="tb" onClick={toggleSpeed}>
|
||||
{playbackSpeed}×
|
||||
</div>
|
||||
</div>
|
||||
<div className="tlt">
|
||||
<div className="tlls">
|
||||
{timeLabels.map((t) => (
|
||||
<span
|
||||
key={t}
|
||||
className={`tll ${Math.abs(currentTime - t) < 1 ? 'on' : ''}`}
|
||||
style={{ left: `${(t / maxTime) * 100}%` }}
|
||||
>
|
||||
{t}h
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
<div className="tlsw" onClick={handleTimelineClick}>
|
||||
<div className="tlr">
|
||||
<div className="tlp" style={{ width: `${progressPercent}%` }} />
|
||||
{timeLabels.map((t) => (
|
||||
<div
|
||||
key={`marker-${t}`}
|
||||
className={`tlm ${t % 12 === 0 ? 'mj' : ''}`}
|
||||
style={{ left: `${(t / maxTime) * 100}%` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="tlth" style={{ left: `${progressPercent}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="tli">
|
||||
{/* eslint-disable-next-line react-hooks/purity */}
|
||||
<div className="tlct">
|
||||
+{currentTime.toFixed(0)}h —{' '}
|
||||
{(() => {
|
||||
const base = simulationStartTime ? new Date(simulationStartTime) : new Date();
|
||||
const d = new Date(base.getTime() + currentTime * 3600 * 1000);
|
||||
return `${String(d.getMonth() + 1).padStart(2, '0')}/${String(d.getDate()).padStart(2, '0')} ${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')} KST`;
|
||||
})()}
|
||||
</div>
|
||||
<div className="tlss">
|
||||
<div className="tls">
|
||||
<span className="tlsl">진행률</span>
|
||||
<span className="tlsv">{progressPercent.toFixed(0)}%</span>
|
||||
</div>
|
||||
<div className="tls">
|
||||
<span className="tlsl">속도</span>
|
||||
<span className="tlsv">{playbackSpeed}×</span>
|
||||
</div>
|
||||
<div className="tls">
|
||||
<span className="tlsl">시간</span>
|
||||
<span className="tlsv">
|
||||
{currentTime.toFixed(0)}/{maxTime}h
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 기상 데이터 Mock
|
||||
function getWeatherData(position: [number, number]) {
|
||||
const [lat, lng] = position;
|
||||
@ -1847,9 +1888,7 @@ function BacktrackReplayBar({
|
||||
minWidth: '340px',
|
||||
}}
|
||||
>
|
||||
<div className="text-body-2 text-color-tertiary font-mono font-bold">
|
||||
{progress.toFixed(0)}%
|
||||
</div>
|
||||
<div className="text-sm text-color-tertiary font-mono font-bold">{progress.toFixed(0)}%</div>
|
||||
<div className="flex-1 h-1 bg-border relative rounded-[2px]">
|
||||
<div
|
||||
className="h-full rounded-[2px]"
|
||||
@ -1,6 +1,6 @@
|
||||
import { useMemo } from 'react';
|
||||
import { Marker } from '@vis.gl/react-maplibre';
|
||||
import { useMapStore } from '@common/store/mapStore';
|
||||
import { useMapStore } from '../../store/mapStore';
|
||||
import { midpointOf, centroid } from './measureLayers';
|
||||
|
||||
/** 완료된 측정 결과의 지우기 버튼을 Marker로 렌더 */
|
||||
@ -1,7 +1,6 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { useMap } from '@vis.gl/react-maplibre';
|
||||
import { API_BASE_URL } from '@common/services/api';
|
||||
/* eslint-disable react-refresh/only-export-components */
|
||||
import { API_BASE_URL } from '../../services/api';
|
||||
|
||||
const PROXY_PREFIX = `${API_BASE_URL}/tiles/enc`;
|
||||
// MapLibre 내부 요청(sprite, tiles, glyphs)은 절대 URL이 필요
|
||||
@ -1,10 +1,9 @@
|
||||
import { useEffect, useRef, useCallback, useState } from 'react';
|
||||
import { useMap } from '@vis.gl/react-maplibre';
|
||||
import { API_BASE_URL } from '@common/services/api';
|
||||
import { useLayerTree } from '@common/hooks/useLayers';
|
||||
import type { Layer } from '@common/services/layerService';
|
||||
import { API_BASE_URL } from '../../services/api';
|
||||
import { useLayerTree } from '../../hooks/useLayers';
|
||||
import type { Layer } from '../../services/layerService';
|
||||
import { getOpacityProp, getColorProp } from './srStyles';
|
||||
/* eslint-disable react-refresh/only-export-components */
|
||||
|
||||
const SR_SOURCE_ID = 'sr';
|
||||
const PROXY_PREFIX = `${API_BASE_URL}/tiles`;
|
||||
@ -1,7 +1,7 @@
|
||||
import { ScatterplotLayer, PathLayer, TextLayer, PolygonLayer } from '@deck.gl/layers';
|
||||
import type { Layer as DeckLayer } from '@deck.gl/core';
|
||||
import type { MeasurePoint, MeasureResult } from '@common/store/mapStore';
|
||||
import { formatDistance, formatArea } from '@common/utils/geo';
|
||||
import type { MeasurePoint, MeasureResult } from '../../store/mapStore';
|
||||
import { formatDistance, formatArea } from '../../utils/geo';
|
||||
|
||||
const CYAN = [6, 182, 212, 220] as const;
|
||||
const CYAN_FILL = [6, 182, 212, 60] as const;
|
||||
0
frontend/src/components/common/ui/ComboBox.tsx → frontend/src/common/components/ui/ComboBox.tsx
Normal file → Executable file
0
frontend/src/components/common/ui/ComboBox.tsx → frontend/src/common/components/ui/ComboBox.tsx
Normal file → Executable file
1623
frontend/src/common/components/ui/UserManualPopup.tsx
Normal file
1623
frontend/src/common/components/ui/UserManualPopup.tsx
Normal file
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
Load Diff
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
Load Diff
@ -1,30 +0,0 @@
|
||||
import chaptersJson from './chapters.json';
|
||||
|
||||
export interface InputItem {
|
||||
label: string;
|
||||
type: string;
|
||||
required: boolean;
|
||||
desc: string;
|
||||
}
|
||||
|
||||
export interface ScreenItem {
|
||||
id: string;
|
||||
name: string;
|
||||
menuPath: string;
|
||||
imageIndex: number;
|
||||
overview: string;
|
||||
description?: string;
|
||||
procedure?: string[];
|
||||
inputs?: InputItem[];
|
||||
notes?: string[];
|
||||
}
|
||||
|
||||
export interface Chapter {
|
||||
id: string;
|
||||
number: string;
|
||||
title: string;
|
||||
subtitle: string;
|
||||
screens: ScreenItem[];
|
||||
}
|
||||
|
||||
export const CHAPTERS = chaptersJson as Chapter[];
|
||||
@ -1,6 +1,6 @@
|
||||
import type { StyleSpecification } from 'maplibre-gl';
|
||||
import { useMapStore } from '@common/store/mapStore';
|
||||
import { LIGHT_STYLE, SATELLITE_3D_STYLE, ENC_EMPTY_STYLE } from '@components/common/map/mapStyles';
|
||||
import { LIGHT_STYLE, SATELLITE_3D_STYLE, ENC_EMPTY_STYLE } from '@common/components/map/mapStyles';
|
||||
|
||||
export function useBaseMapStyle(): StyleSpecification {
|
||||
const mapToggles = useMapStore((s) => s.mapToggles);
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { useEffect, useSyncExternalStore } from 'react';
|
||||
import type { MainTab } from '@/types/navigation';
|
||||
import type { MainTab } from '../types/navigation';
|
||||
import { useAuthStore } from '@common/store/authStore';
|
||||
import { API_BASE_URL } from '@common/services/api';
|
||||
|
||||
@ -61,7 +61,6 @@ const subMenuConfigs: Record<MainTab, SubMenuItem[] | null> = {
|
||||
{ id: 'manual', label: '해경매뉴얼', icon: '📘' },
|
||||
],
|
||||
weather: null,
|
||||
monitor: null,
|
||||
admin: null, // 관리자 화면은 자체 사이드바 사용 (AdminSidebar.tsx)
|
||||
};
|
||||
|
||||
@ -77,7 +76,6 @@ const subMenuState: Record<MainTab, string> = {
|
||||
incidents: '',
|
||||
board: 'all',
|
||||
weather: '',
|
||||
monitor: '',
|
||||
admin: 'users',
|
||||
};
|
||||
|
||||
|
||||
@ -1,79 +0,0 @@
|
||||
import { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import {
|
||||
createVesselSignalClient,
|
||||
type VesselSignalClient,
|
||||
} from '@common/services/vesselSignalClient';
|
||||
import {
|
||||
getInitialVesselSnapshot,
|
||||
isVesselInitEnabled,
|
||||
} from '@common/services/vesselApi';
|
||||
import type { VesselPosition, MapBounds } from '@/types/vessel';
|
||||
|
||||
/**
|
||||
* 선박 신호 실시간 수신 훅
|
||||
*
|
||||
* 개발환경(VITE_VESSEL_SIGNAL_MODE=polling):
|
||||
* - 60초마다 백엔드 REST API(/api/vessels/in-area)를 현재 뷰포트 bbox로 호출
|
||||
*
|
||||
* 운영환경(VITE_VESSEL_SIGNAL_MODE=websocket):
|
||||
* - 운영 WebSocket 서버(VITE_VESSEL_WS_URL)에 직접 연결하여 실시간 수신
|
||||
* - 수신된 전체 데이터를 현재 뷰포트 bbox로 프론트에서 필터링
|
||||
*
|
||||
* @param mapBounds MapView의 onBoundsChange로 전달받은 현재 뷰포트 bbox
|
||||
* @returns 현재 뷰포트 내 선박 목록
|
||||
*/
|
||||
export function useVesselSignals(mapBounds: MapBounds | null): VesselPosition[] {
|
||||
const [vessels, setVessels] = useState<VesselPosition[]>([]);
|
||||
const boundsRef = useRef<MapBounds | null>(mapBounds);
|
||||
const clientRef = useRef<VesselSignalClient | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
boundsRef.current = mapBounds;
|
||||
}, [mapBounds]);
|
||||
|
||||
const getViewportBounds = useCallback(() => boundsRef.current, []);
|
||||
|
||||
useEffect(() => {
|
||||
const client = createVesselSignalClient();
|
||||
clientRef.current = client;
|
||||
|
||||
// 운영 환경: 로그인/새로고침 직후 최근 10분치 스냅샷을 먼저 1회 로드.
|
||||
// 이후 WebSocket 수신이 시작되면 최신 신호로 갱신된다.
|
||||
// VITE_VESSEL_INIT_ENABLED=true 일 때만 활성화(기본 비활성).
|
||||
if (isVesselInitEnabled()) {
|
||||
getInitialVesselSnapshot()
|
||||
.then((initial) => {
|
||||
const bounds = boundsRef.current;
|
||||
const filtered = bounds
|
||||
? initial.filter(
|
||||
(v) =>
|
||||
v.lon >= bounds.minLon &&
|
||||
v.lon <= bounds.maxLon &&
|
||||
v.lat >= bounds.minLat &&
|
||||
v.lat <= bounds.maxLat,
|
||||
)
|
||||
: initial;
|
||||
// WS 첫 메시지가 먼저 도착해 이미 채워졌다면 덮어쓰지 않음
|
||||
setVessels((prev) => (prev.length === 0 ? filtered : prev));
|
||||
})
|
||||
.catch((e) => console.warn('[useVesselSignals] 초기 스냅샷 실패', e));
|
||||
}
|
||||
|
||||
client.start(setVessels, getViewportBounds);
|
||||
return () => {
|
||||
client.stop();
|
||||
clientRef.current = null;
|
||||
};
|
||||
}, [getViewportBounds]);
|
||||
|
||||
// mapBounds가 바뀔 때마다(최초 채워질 때 + 이후 뷰포트 이동/줌마다) 즉시 1회 새로고침.
|
||||
// MapView의 onBoundsChange는 moveend/zoomend에서만 호출되므로 드래그 중 스팸은 없다.
|
||||
// 이후에도 60초 인터벌 폴링은 백그라운드에서 계속 동작.
|
||||
useEffect(() => {
|
||||
if (mapBounds && clientRef.current) {
|
||||
clientRef.current.refresh();
|
||||
}
|
||||
}, [mapBounds]);
|
||||
|
||||
return vessels;
|
||||
}
|
||||
@ -1,4 +1,613 @@
|
||||
// Deprecated: Mock 선박 데이터는 제거되었습니다.
|
||||
// 실제 선박 신호는 @common/hooks/useVesselSignals + @components/common/map/VesselLayer 를 사용합니다.
|
||||
// 범례는 @components/common/map/VesselLayer 의 VESSEL_LEGEND 를 import 하세요.
|
||||
export {};
|
||||
export interface Vessel {
|
||||
mmsi: number;
|
||||
imo: string;
|
||||
name: string;
|
||||
typS: string;
|
||||
flag: string;
|
||||
status: string;
|
||||
speed: number;
|
||||
heading: number;
|
||||
lat: number;
|
||||
lng: number;
|
||||
draft: number;
|
||||
depart: string;
|
||||
arrive: string;
|
||||
etd: string;
|
||||
eta: string;
|
||||
gt: string;
|
||||
dwt: string;
|
||||
loa: string;
|
||||
beam: string;
|
||||
built: string;
|
||||
yard: string;
|
||||
callSign: string;
|
||||
cls: string;
|
||||
cargo: string;
|
||||
color: string;
|
||||
markerType: string;
|
||||
}
|
||||
|
||||
export const VESSEL_TYPE_COLORS: Record<string, string> = {
|
||||
Tanker: '#ef4444',
|
||||
Chemical: '#ef4444',
|
||||
Cargo: '#22c55e',
|
||||
Bulk: '#22c55e',
|
||||
Container: '#3b82f6',
|
||||
Passenger: '#a855f7',
|
||||
Fishing: '#f97316',
|
||||
Tug: '#06b6d4',
|
||||
Navy: '#6b7280',
|
||||
Sailing: '#fbbf24',
|
||||
};
|
||||
|
||||
export const VESSEL_LEGEND = [
|
||||
{ type: 'Tanker', color: '#ef4444' },
|
||||
{ type: 'Cargo', color: '#22c55e' },
|
||||
{ type: 'Container', color: '#3b82f6' },
|
||||
{ type: 'Fishing', color: '#f97316' },
|
||||
{ type: 'Passenger', color: '#a855f7' },
|
||||
{ type: 'Tug', color: '#06b6d4' },
|
||||
];
|
||||
|
||||
export const mockVessels: Vessel[] = [
|
||||
{
|
||||
mmsi: 440123456,
|
||||
imo: '9812345',
|
||||
name: 'HANKUK CHEMI',
|
||||
typS: 'Tanker',
|
||||
flag: '🇰🇷',
|
||||
status: '항해중',
|
||||
speed: 8.2,
|
||||
heading: 330,
|
||||
lat: 34.6,
|
||||
lng: 127.5,
|
||||
draft: 5.8,
|
||||
depart: '여수항',
|
||||
arrive: '부산항',
|
||||
etd: '2026-02-25 08:00',
|
||||
eta: '2026-02-25 18:30',
|
||||
gt: '29,246',
|
||||
dwt: '49,999',
|
||||
loa: '183.0m',
|
||||
beam: '32.2m',
|
||||
built: '2018',
|
||||
yard: '현대미포조선',
|
||||
callSign: 'HLKC',
|
||||
cls: '한국선급(KR)',
|
||||
cargo: 'BUNKER-C · 1,200kL · IMO Class 3',
|
||||
color: '#ef4444',
|
||||
markerType: 'tanker',
|
||||
},
|
||||
{
|
||||
mmsi: 440234567,
|
||||
imo: '9823456',
|
||||
name: 'DONG-A GLAUCOS',
|
||||
typS: 'Cargo',
|
||||
flag: '🇰🇷',
|
||||
status: '항해중',
|
||||
speed: 11.4,
|
||||
heading: 245,
|
||||
lat: 34.78,
|
||||
lng: 127.8,
|
||||
draft: 7.2,
|
||||
depart: '울산항',
|
||||
arrive: '광양항',
|
||||
etd: '2026-02-25 06:30',
|
||||
eta: '2026-02-25 16:00',
|
||||
gt: '12,450',
|
||||
dwt: '18,800',
|
||||
loa: '144.0m',
|
||||
beam: '22.6m',
|
||||
built: '2015',
|
||||
yard: 'STX조선',
|
||||
callSign: 'HLDG',
|
||||
cls: '한국선급(KR)',
|
||||
cargo: '철강재 · 4,500t',
|
||||
color: '#22c55e',
|
||||
markerType: 'cargo',
|
||||
},
|
||||
{
|
||||
mmsi: 440345678,
|
||||
imo: '9834567',
|
||||
name: 'HMM ALGECIRAS',
|
||||
typS: 'Container',
|
||||
flag: '🇰🇷',
|
||||
status: '항해중',
|
||||
speed: 18.5,
|
||||
heading: 195,
|
||||
lat: 35.0,
|
||||
lng: 128.8,
|
||||
draft: 14.5,
|
||||
depart: '부산항',
|
||||
arrive: '싱가포르',
|
||||
etd: '2026-02-25 04:00',
|
||||
eta: '2026-03-02 08:00',
|
||||
gt: '228,283',
|
||||
dwt: '223,092',
|
||||
loa: '399.9m',
|
||||
beam: '61.0m',
|
||||
built: '2020',
|
||||
yard: '대우조선해양',
|
||||
callSign: 'HLHM',
|
||||
cls: "Lloyd's Register",
|
||||
cargo: '컨테이너 · 16,420 TEU',
|
||||
color: '#3b82f6',
|
||||
markerType: 'container',
|
||||
},
|
||||
{
|
||||
mmsi: 355678901,
|
||||
imo: '9756789',
|
||||
name: 'STELLAR DAISY',
|
||||
typS: 'Tanker',
|
||||
flag: '🇵🇦',
|
||||
status: '⚠ 사고(좌초)',
|
||||
speed: 0.0,
|
||||
heading: 0,
|
||||
lat: 34.72,
|
||||
lng: 127.72,
|
||||
draft: 8.1,
|
||||
depart: '여수항',
|
||||
arrive: '—',
|
||||
etd: '2026-01-18 12:00',
|
||||
eta: '—',
|
||||
gt: '35,120',
|
||||
dwt: '58,000',
|
||||
loa: '190.0m',
|
||||
beam: '34.0m',
|
||||
built: '2012',
|
||||
yard: 'CSBC Taiwan',
|
||||
callSign: '3FZA7',
|
||||
cls: 'NK',
|
||||
cargo: 'BUNKER-C · 150kL 유출 · ⚠ 사고선박',
|
||||
color: '#ef4444',
|
||||
markerType: 'tanker',
|
||||
},
|
||||
{
|
||||
mmsi: 440456789,
|
||||
imo: '—',
|
||||
name: '제72 금양호',
|
||||
typS: 'Fishing',
|
||||
flag: '🇰🇷',
|
||||
status: '조업중',
|
||||
speed: 4.1,
|
||||
heading: 120,
|
||||
lat: 34.55,
|
||||
lng: 127.35,
|
||||
draft: 2.1,
|
||||
depart: '여수 국동항',
|
||||
arrive: '여수 국동항',
|
||||
etd: '2026-02-25 04:30',
|
||||
eta: '2026-02-25 18:00',
|
||||
gt: '78',
|
||||
dwt: '—',
|
||||
loa: '24.5m',
|
||||
beam: '6.2m',
|
||||
built: '2008',
|
||||
yard: '통영조선',
|
||||
callSign: '—',
|
||||
cls: '한국선급',
|
||||
cargo: '어획물',
|
||||
color: '#f97316',
|
||||
markerType: 'fishing',
|
||||
},
|
||||
{
|
||||
mmsi: 440567890,
|
||||
imo: '9867890',
|
||||
name: 'PAN OCEAN GLORY',
|
||||
typS: 'Bulk',
|
||||
flag: '🇰🇷',
|
||||
status: '항해중',
|
||||
speed: 12.8,
|
||||
heading: 170,
|
||||
lat: 35.6,
|
||||
lng: 126.4,
|
||||
draft: 10.3,
|
||||
depart: '군산항',
|
||||
arrive: '포항항',
|
||||
etd: '2026-02-25 07:00',
|
||||
eta: '2026-02-26 04:00',
|
||||
gt: '43,800',
|
||||
dwt: '76,500',
|
||||
loa: '229.0m',
|
||||
beam: '32.3m',
|
||||
built: '2019',
|
||||
yard: '현대삼호중공업',
|
||||
callSign: 'HLPO',
|
||||
cls: '한국선급(KR)',
|
||||
cargo: '석탄 · 65,000t',
|
||||
color: '#22c55e',
|
||||
markerType: 'cargo',
|
||||
},
|
||||
{
|
||||
mmsi: 440678901,
|
||||
imo: '—',
|
||||
name: '여수예인1호',
|
||||
typS: 'Tug',
|
||||
flag: '🇰🇷',
|
||||
status: '방제지원',
|
||||
speed: 6.3,
|
||||
heading: 355,
|
||||
lat: 34.68,
|
||||
lng: 127.6,
|
||||
draft: 3.2,
|
||||
depart: '여수항',
|
||||
arrive: '사고현장',
|
||||
etd: '2026-01-18 16:30',
|
||||
eta: '—',
|
||||
gt: '280',
|
||||
dwt: '—',
|
||||
loa: '32.0m',
|
||||
beam: '9.5m',
|
||||
built: '2016',
|
||||
yard: '삼성중공업',
|
||||
callSign: 'HLYT',
|
||||
cls: '한국선급',
|
||||
cargo: '방제장비 · 오일붐 500m',
|
||||
color: '#06b6d4',
|
||||
markerType: 'tug',
|
||||
},
|
||||
{
|
||||
mmsi: 235012345,
|
||||
imo: '9456789',
|
||||
name: 'QUEEN MARY',
|
||||
typS: 'Passenger',
|
||||
flag: '🇬🇧',
|
||||
status: '항해중',
|
||||
speed: 15.2,
|
||||
heading: 10,
|
||||
lat: 33.8,
|
||||
lng: 127.0,
|
||||
draft: 8.5,
|
||||
depart: '상하이',
|
||||
arrive: '부산항',
|
||||
etd: '2026-02-24 18:00',
|
||||
eta: '2026-02-26 06:00',
|
||||
gt: '148,528',
|
||||
dwt: '18,000',
|
||||
loa: '345.0m',
|
||||
beam: '41.0m',
|
||||
built: '2004',
|
||||
yard: "Chantiers de l'Atlantique",
|
||||
callSign: 'GBQM2',
|
||||
cls: "Lloyd's Register",
|
||||
cargo: '승객 2,620명',
|
||||
color: '#a855f7',
|
||||
markerType: 'passenger',
|
||||
},
|
||||
{
|
||||
mmsi: 353012345,
|
||||
imo: '9811000',
|
||||
name: 'EVER GIVEN',
|
||||
typS: 'Container',
|
||||
flag: '🇹🇼',
|
||||
status: '항해중',
|
||||
speed: 14.7,
|
||||
heading: 220,
|
||||
lat: 35.2,
|
||||
lng: 129.2,
|
||||
draft: 15.7,
|
||||
depart: '부산항',
|
||||
arrive: '카오슝',
|
||||
etd: '2026-02-25 02:00',
|
||||
eta: '2026-02-28 14:00',
|
||||
gt: '220,940',
|
||||
dwt: '199,629',
|
||||
loa: '400.0m',
|
||||
beam: '59.0m',
|
||||
built: '2018',
|
||||
yard: '今治造船',
|
||||
callSign: 'BIXE9',
|
||||
cls: 'ABS',
|
||||
cargo: '컨테이너 · 14,800 TEU',
|
||||
color: '#3b82f6',
|
||||
markerType: 'container',
|
||||
},
|
||||
{
|
||||
mmsi: 440789012,
|
||||
imo: '—',
|
||||
name: '제85 대성호',
|
||||
typS: 'Fishing',
|
||||
flag: '🇰🇷',
|
||||
status: '조업중',
|
||||
speed: 3.8,
|
||||
heading: 85,
|
||||
lat: 34.4,
|
||||
lng: 126.3,
|
||||
draft: 1.8,
|
||||
depart: '목포항',
|
||||
arrive: '목포항',
|
||||
etd: '2026-02-25 03:00',
|
||||
eta: '2026-02-25 17:00',
|
||||
gt: '65',
|
||||
dwt: '—',
|
||||
loa: '22.0m',
|
||||
beam: '5.8m',
|
||||
built: '2010',
|
||||
yard: '목포조선',
|
||||
callSign: '—',
|
||||
cls: '한국선급',
|
||||
cargo: '어획물',
|
||||
color: '#f97316',
|
||||
markerType: 'fishing',
|
||||
},
|
||||
{
|
||||
mmsi: 440890123,
|
||||
imo: '9878901',
|
||||
name: 'SK INNOVATION',
|
||||
typS: 'Chemical',
|
||||
flag: '🇰🇷',
|
||||
status: '항해중',
|
||||
speed: 9.6,
|
||||
heading: 340,
|
||||
lat: 35.8,
|
||||
lng: 126.6,
|
||||
draft: 6.5,
|
||||
depart: '대산항',
|
||||
arrive: '여수항',
|
||||
etd: '2026-02-25 10:00',
|
||||
eta: '2026-02-26 02:00',
|
||||
gt: '11,200',
|
||||
dwt: '16,800',
|
||||
loa: '132.0m',
|
||||
beam: '20.4m',
|
||||
built: '2020',
|
||||
yard: '현대미포조선',
|
||||
callSign: 'HLSK',
|
||||
cls: '한국선급(KR)',
|
||||
cargo: '톨루엔 · 8,500kL · IMO Class 3',
|
||||
color: '#ef4444',
|
||||
markerType: 'tanker',
|
||||
},
|
||||
{
|
||||
mmsi: 440901234,
|
||||
imo: '9889012',
|
||||
name: 'KOREA EXPRESS',
|
||||
typS: 'Cargo',
|
||||
flag: '🇰🇷',
|
||||
status: '항해중',
|
||||
speed: 10.1,
|
||||
heading: 190,
|
||||
lat: 36.2,
|
||||
lng: 128.5,
|
||||
draft: 6.8,
|
||||
depart: '동해항',
|
||||
arrive: '포항항',
|
||||
etd: '2026-02-25 09:00',
|
||||
eta: '2026-02-25 15:00',
|
||||
gt: '8,500',
|
||||
dwt: '12,000',
|
||||
loa: '118.0m',
|
||||
beam: '18.2m',
|
||||
built: '2014',
|
||||
yard: '대한조선',
|
||||
callSign: 'HLKE',
|
||||
cls: '한국선급',
|
||||
cargo: '일반화물',
|
||||
color: '#22c55e',
|
||||
markerType: 'cargo',
|
||||
},
|
||||
{
|
||||
mmsi: 440012345,
|
||||
imo: '—',
|
||||
name: 'ROKS SEJONG',
|
||||
typS: 'Navy',
|
||||
flag: '🇰🇷',
|
||||
status: '작전중',
|
||||
speed: 16.0,
|
||||
heading: 270,
|
||||
lat: 35.3,
|
||||
lng: 129.5,
|
||||
draft: 6.3,
|
||||
depart: '부산 해군기지',
|
||||
arrive: '—',
|
||||
etd: '—',
|
||||
eta: '—',
|
||||
gt: '7,600',
|
||||
dwt: '—',
|
||||
loa: '165.9m',
|
||||
beam: '21.4m',
|
||||
built: '2008',
|
||||
yard: '현대중공업',
|
||||
callSign: 'HLNS',
|
||||
cls: '군용',
|
||||
cargo: '군사작전',
|
||||
color: '#6b7280',
|
||||
markerType: 'military',
|
||||
},
|
||||
{
|
||||
mmsi: 440023456,
|
||||
imo: '—',
|
||||
name: '군산예인3호',
|
||||
typS: 'Tug',
|
||||
flag: '🇰🇷',
|
||||
status: '대기중',
|
||||
speed: 5.5,
|
||||
heading: 140,
|
||||
lat: 35.9,
|
||||
lng: 126.9,
|
||||
draft: 2.8,
|
||||
depart: '군산항',
|
||||
arrive: '군산항',
|
||||
etd: '—',
|
||||
eta: '—',
|
||||
gt: '180',
|
||||
dwt: '—',
|
||||
loa: '28.0m',
|
||||
beam: '8.2m',
|
||||
built: '2019',
|
||||
yard: '통영조선',
|
||||
callSign: 'HLGS',
|
||||
cls: '한국선급',
|
||||
cargo: '—',
|
||||
color: '#06b6d4',
|
||||
markerType: 'tug',
|
||||
},
|
||||
{
|
||||
mmsi: 440034567,
|
||||
imo: '—',
|
||||
name: 'JEJU WIND',
|
||||
typS: 'Sailing',
|
||||
flag: '🇰🇷',
|
||||
status: '항해중',
|
||||
speed: 6.8,
|
||||
heading: 290,
|
||||
lat: 33.35,
|
||||
lng: 126.65,
|
||||
draft: 2.5,
|
||||
depart: '제주항',
|
||||
arrive: '제주항',
|
||||
etd: '2026-02-25 10:00',
|
||||
eta: '2026-02-25 16:00',
|
||||
gt: '45',
|
||||
dwt: '—',
|
||||
loa: '18.0m',
|
||||
beam: '5.0m',
|
||||
built: '2022',
|
||||
yard: '제주요트',
|
||||
callSign: '—',
|
||||
cls: '—',
|
||||
cargo: '—',
|
||||
color: '#fbbf24',
|
||||
markerType: 'sail',
|
||||
},
|
||||
{
|
||||
mmsi: 440045678,
|
||||
imo: '—',
|
||||
name: '제33 삼양호',
|
||||
typS: 'Fishing',
|
||||
flag: '🇰🇷',
|
||||
status: '조업중',
|
||||
speed: 2.4,
|
||||
heading: 55,
|
||||
lat: 35.1,
|
||||
lng: 127.4,
|
||||
draft: 1.6,
|
||||
depart: '통영항',
|
||||
arrive: '통영항',
|
||||
etd: '2026-02-25 05:00',
|
||||
eta: '2026-02-25 19:00',
|
||||
gt: '52',
|
||||
dwt: '—',
|
||||
loa: '20.0m',
|
||||
beam: '5.4m',
|
||||
built: '2006',
|
||||
yard: '거제조선',
|
||||
callSign: '—',
|
||||
cls: '한국선급',
|
||||
cargo: '어획물',
|
||||
color: '#f97316',
|
||||
markerType: 'fishing',
|
||||
},
|
||||
{
|
||||
mmsi: 255012345,
|
||||
imo: '9703291',
|
||||
name: 'MSC OSCAR',
|
||||
typS: 'Container',
|
||||
flag: '🇨🇭',
|
||||
status: '항해중',
|
||||
speed: 17.3,
|
||||
heading: 355,
|
||||
lat: 34.1,
|
||||
lng: 128.1,
|
||||
draft: 14.0,
|
||||
depart: '카오슝',
|
||||
arrive: '부산항',
|
||||
etd: '2026-02-23 08:00',
|
||||
eta: '2026-02-25 22:00',
|
||||
gt: '197,362',
|
||||
dwt: '199,272',
|
||||
loa: '395.4m',
|
||||
beam: '59.0m',
|
||||
built: '2015',
|
||||
yard: '대우조선해양',
|
||||
callSign: '9HA4713',
|
||||
cls: 'DNV',
|
||||
cargo: '컨테이너 · 18,200 TEU',
|
||||
color: '#3b82f6',
|
||||
markerType: 'container',
|
||||
},
|
||||
{
|
||||
mmsi: 440056789,
|
||||
imo: '9890567',
|
||||
name: 'SAEHAN PIONEER',
|
||||
typS: 'Tanker',
|
||||
flag: '🇰🇷',
|
||||
status: '항해중',
|
||||
speed: 7.9,
|
||||
heading: 310,
|
||||
lat: 34.9,
|
||||
lng: 127.1,
|
||||
draft: 5.2,
|
||||
depart: '여수항',
|
||||
arrive: '대산항',
|
||||
etd: '2026-02-25 11:00',
|
||||
eta: '2026-02-26 08:00',
|
||||
gt: '8,900',
|
||||
dwt: '14,200',
|
||||
loa: '120.0m',
|
||||
beam: '18.0m',
|
||||
built: '2017',
|
||||
yard: '현대미포조선',
|
||||
callSign: 'HLSP',
|
||||
cls: '한국선급(KR)',
|
||||
cargo: '경유 · 10,000kL',
|
||||
color: '#ef4444',
|
||||
markerType: 'tanker',
|
||||
},
|
||||
{
|
||||
mmsi: 440067890,
|
||||
imo: '9891678',
|
||||
name: 'DONGHAE STAR',
|
||||
typS: 'Cargo',
|
||||
flag: '🇰🇷',
|
||||
status: '항해중',
|
||||
speed: 11.0,
|
||||
heading: 155,
|
||||
lat: 37.55,
|
||||
lng: 129.3,
|
||||
draft: 6.0,
|
||||
depart: '속초항',
|
||||
arrive: '동해항',
|
||||
etd: '2026-02-25 12:00',
|
||||
eta: '2026-02-25 16:30',
|
||||
gt: '6,200',
|
||||
dwt: '8,500',
|
||||
loa: '105.0m',
|
||||
beam: '16.5m',
|
||||
built: '2013',
|
||||
yard: '대한조선',
|
||||
callSign: 'HLDS',
|
||||
cls: '한국선급',
|
||||
cargo: '일반화물 · 목재',
|
||||
color: '#22c55e',
|
||||
markerType: 'cargo',
|
||||
},
|
||||
{
|
||||
mmsi: 440078901,
|
||||
imo: '—',
|
||||
name: '제18 한라호',
|
||||
typS: 'Fishing',
|
||||
flag: '🇰🇷',
|
||||
status: '귀항중',
|
||||
speed: 3.2,
|
||||
heading: 70,
|
||||
lat: 33.3,
|
||||
lng: 126.3,
|
||||
draft: 1.9,
|
||||
depart: '서귀포항',
|
||||
arrive: '서귀포항',
|
||||
etd: '2026-02-25 04:00',
|
||||
eta: '2026-02-25 15:00',
|
||||
gt: '58',
|
||||
dwt: '—',
|
||||
loa: '21.0m',
|
||||
beam: '5.6m',
|
||||
built: '2011',
|
||||
yard: '제주조선',
|
||||
callSign: '—',
|
||||
cls: '한국선급',
|
||||
cargo: '어획물 · 갈치/고등어',
|
||||
color: '#f97316',
|
||||
markerType: 'fishing',
|
||||
},
|
||||
];
|
||||
|
||||
@ -1,35 +0,0 @@
|
||||
import { api } from './api';
|
||||
import type { VesselPosition, MapBounds } from '@/types/vessel';
|
||||
|
||||
export async function getVesselsInArea(bounds: MapBounds): Promise<VesselPosition[]> {
|
||||
const res = await api.post<VesselPosition[]>('/vessels/in-area', { bounds });
|
||||
return res.data;
|
||||
}
|
||||
|
||||
/**
|
||||
* 로그인/새로고침 직후 1회 호출하는 초기 스냅샷 API.
|
||||
* 운영 환경의 별도 REST 서버가 현재 시각 기준 최근 10분치 선박 신호를 반환한다.
|
||||
* URL은 VITE_VESSEL_INIT_API_URL 로 주입(운영에서 실제 URL로 교체).
|
||||
*/
|
||||
export async function getInitialVesselSnapshot(): Promise<VesselPosition[]> {
|
||||
const url = import.meta.env.VITE_VESSEL_INIT_API_URL as string | undefined;
|
||||
if (!url) return [];
|
||||
const res = await fetch(url, { method: 'GET' });
|
||||
if (!res.ok) throw new Error(`vessel init snapshot ${res.status}`);
|
||||
return (await res.json()) as VesselPosition[];
|
||||
}
|
||||
|
||||
export function isVesselInitEnabled(): boolean {
|
||||
return import.meta.env.VITE_VESSEL_INIT_ENABLED === 'true';
|
||||
}
|
||||
|
||||
export interface VesselCacheStatus {
|
||||
count: number;
|
||||
bangjeCount: number;
|
||||
lastUpdated: string | null;
|
||||
}
|
||||
|
||||
export async function getVesselCacheStatus(): Promise<VesselCacheStatus> {
|
||||
const res = await api.get<VesselCacheStatus>('/vessels/status');
|
||||
return res.data;
|
||||
}
|
||||
@ -1,125 +0,0 @@
|
||||
import type { VesselPosition, MapBounds } from '@/types/vessel';
|
||||
import { getVesselsInArea } from './vesselApi';
|
||||
|
||||
export interface VesselSignalClient {
|
||||
start(
|
||||
onVessels: (vessels: VesselPosition[]) => void,
|
||||
getViewportBounds: () => MapBounds | null,
|
||||
): void;
|
||||
stop(): void;
|
||||
/**
|
||||
* 즉시 1회 새로고침. 폴링 모드에선 현재 bbox로 REST 호출,
|
||||
* WebSocket 모드에선 no-op(서버 push에 의존).
|
||||
*/
|
||||
refresh(): void;
|
||||
}
|
||||
|
||||
// 개발환경: setInterval(60s) → 백엔드 REST API 호출
|
||||
class PollingVesselClient implements VesselSignalClient {
|
||||
private intervalId: ReturnType<typeof setInterval> | null = null;
|
||||
private onVessels: ((vessels: VesselPosition[]) => void) | null = null;
|
||||
private getViewportBounds: (() => MapBounds | null) | null = null;
|
||||
|
||||
private async poll(): Promise<void> {
|
||||
const bounds = this.getViewportBounds?.();
|
||||
if (!bounds || !this.onVessels) return;
|
||||
try {
|
||||
const vessels = await getVesselsInArea(bounds);
|
||||
this.onVessels(vessels);
|
||||
} catch {
|
||||
// 폴링 실패 시 무시 (다음 인터벌에 재시도)
|
||||
}
|
||||
}
|
||||
|
||||
start(
|
||||
onVessels: (vessels: VesselPosition[]) => void,
|
||||
getViewportBounds: () => MapBounds | null,
|
||||
): void {
|
||||
this.onVessels = onVessels;
|
||||
this.getViewportBounds = getViewportBounds;
|
||||
|
||||
// 즉시 1회 실행 후 60초 간격으로 반복
|
||||
this.poll();
|
||||
this.intervalId = setInterval(() => this.poll(), 60_000);
|
||||
}
|
||||
|
||||
stop(): void {
|
||||
if (this.intervalId !== null) {
|
||||
clearInterval(this.intervalId);
|
||||
this.intervalId = null;
|
||||
}
|
||||
this.onVessels = null;
|
||||
this.getViewportBounds = null;
|
||||
}
|
||||
|
||||
refresh(): void {
|
||||
this.poll();
|
||||
}
|
||||
}
|
||||
|
||||
// 운영환경: 실시간 WebSocket 서버에 직접 연결
|
||||
class DirectWebSocketVesselClient implements VesselSignalClient {
|
||||
private ws: WebSocket | null = null;
|
||||
private readonly wsUrl: string;
|
||||
|
||||
constructor(wsUrl: string) {
|
||||
this.wsUrl = wsUrl;
|
||||
}
|
||||
|
||||
start(
|
||||
onVessels: (vessels: VesselPosition[]) => void,
|
||||
getViewportBounds: () => MapBounds | null,
|
||||
): void {
|
||||
this.ws = new WebSocket(this.wsUrl);
|
||||
|
||||
this.ws.onmessage = (event) => {
|
||||
try {
|
||||
const allVessels = JSON.parse(event.data as string) as VesselPosition[];
|
||||
const bounds = getViewportBounds();
|
||||
|
||||
if (!bounds) {
|
||||
onVessels(allVessels);
|
||||
return;
|
||||
}
|
||||
|
||||
const filtered = allVessels.filter(
|
||||
(v) =>
|
||||
v.lon >= bounds.minLon &&
|
||||
v.lon <= bounds.maxLon &&
|
||||
v.lat >= bounds.minLat &&
|
||||
v.lat <= bounds.maxLat,
|
||||
);
|
||||
onVessels(filtered);
|
||||
} catch {
|
||||
// 파싱 실패 무시
|
||||
}
|
||||
};
|
||||
|
||||
this.ws.onerror = () => {
|
||||
console.error('[vesselSignalClient] WebSocket 연결 오류');
|
||||
};
|
||||
|
||||
this.ws.onclose = () => {
|
||||
console.warn('[vesselSignalClient] WebSocket 연결 종료');
|
||||
};
|
||||
}
|
||||
|
||||
stop(): void {
|
||||
if (this.ws) {
|
||||
this.ws.close();
|
||||
this.ws = null;
|
||||
}
|
||||
}
|
||||
|
||||
refresh(): void {
|
||||
// 운영 WS 모드에선 서버 push에 의존하므로 별도 새로고침 동작 없음
|
||||
}
|
||||
}
|
||||
|
||||
export function createVesselSignalClient(): VesselSignalClient {
|
||||
if (import.meta.env.VITE_VESSEL_SIGNAL_MODE === 'websocket') {
|
||||
const wsUrl = import.meta.env.VITE_VESSEL_WS_URL as string;
|
||||
return new DirectWebSocketVesselClient(wsUrl);
|
||||
}
|
||||
return new PollingVesselClient();
|
||||
}
|
||||
@ -1,7 +1,44 @@
|
||||
import { create } from 'zustand';
|
||||
import type { WeatherSnapshot } from '@interfaces/weather/WeatherInterface';
|
||||
|
||||
export type { WeatherSnapshot };
|
||||
export interface WeatherSnapshot {
|
||||
stationName: string;
|
||||
capturedAt: string;
|
||||
wind: {
|
||||
speed: number;
|
||||
direction: number;
|
||||
directionLabel: string;
|
||||
speed_1k: number;
|
||||
speed_3k: number;
|
||||
};
|
||||
wave: {
|
||||
height: number;
|
||||
maxHeight: number;
|
||||
period: number;
|
||||
direction: string;
|
||||
};
|
||||
temperature: {
|
||||
current: number;
|
||||
feelsLike: number;
|
||||
};
|
||||
pressure: number;
|
||||
visibility: number;
|
||||
salinity: number;
|
||||
astronomy?: {
|
||||
sunrise: string;
|
||||
sunset: string;
|
||||
moonrise: string;
|
||||
moonset: string;
|
||||
moonPhase: string;
|
||||
tidalRange: number;
|
||||
};
|
||||
alert?: string;
|
||||
forecast?: Array<{
|
||||
time: string;
|
||||
icon: string;
|
||||
temperature: number;
|
||||
windSpeed: number;
|
||||
}>;
|
||||
}
|
||||
|
||||
interface WeatherSnapshotStore {
|
||||
snapshot: WeatherSnapshot | null;
|
||||
|
||||
@ -31,25 +31,25 @@
|
||||
@layer base {
|
||||
:root {
|
||||
/* bg — Background */
|
||||
--bg-base: #121418;
|
||||
--bg-surface: #1B1E23;
|
||||
--bg-elevated: #24272D;
|
||||
--bg-card: #24272D;
|
||||
--bg-surface-hover: #3A3F49;
|
||||
--bg-base: #0a0e1a;
|
||||
--bg-surface: #0f1524;
|
||||
--bg-elevated: #121929;
|
||||
--bg-card: #1a2236;
|
||||
--bg-surface-hover: #1e2844;
|
||||
/* stroke — Border */
|
||||
--stroke-default: #24272D;
|
||||
--stroke-light: #1B1E23;
|
||||
--stroke-default: #1e2a42;
|
||||
--stroke-light: #2a3a5c;
|
||||
/* fg — Foreground */
|
||||
--fg-default: #F8F9FC;
|
||||
--fg-sub: #B9C1C9;
|
||||
--fg-disabled: #808892;
|
||||
--fg-default: #edf0f7;
|
||||
--fg-sub: #c0c8dc;
|
||||
--fg-disabled: #9ba3b8;
|
||||
/* color — Palette */
|
||||
--color-info: #0099DD;
|
||||
--color-accent: #0099DD;
|
||||
--color-accent-muted: #007AB1;
|
||||
--color-danger: #D61111;
|
||||
--color-info: #3b82f6;
|
||||
--color-accent: #06b6d4;
|
||||
--color-accent-muted: #0e7490;
|
||||
--color-danger: #ef4444;
|
||||
--color-warning: #f97316;
|
||||
--color-caution: #FEDA4A;
|
||||
--color-caution: #eab308;
|
||||
--color-success: #22c55e;
|
||||
--color-tertiary: #a855f7;
|
||||
--color-boom: #f59e0b;
|
||||
@ -79,15 +79,15 @@
|
||||
--font-size-title-1: 1.125rem;
|
||||
--font-size-subtitle: 0.9375rem;
|
||||
--font-size-title-2: 1rem;
|
||||
--font-size-title-3: 1rem;
|
||||
--font-size-title-4: 0.875rem;
|
||||
--font-size-title-5: 0.8125rem;
|
||||
--font-size-title-6: 0.75rem;
|
||||
--font-size-body-1: 1rem;
|
||||
--font-size-body-2: 0.875rem;
|
||||
--font-size-label-1: 0.8125rem;
|
||||
--font-size-label-2: 0.75rem;
|
||||
--font-size-caption: 0.75rem;
|
||||
--font-size-title-3: 0.875rem;
|
||||
--font-size-title-4: 0.8125rem;
|
||||
--font-size-title-5: 0.75rem;
|
||||
--font-size-title-6: 0.6875rem;
|
||||
--font-size-body-1: 0.875rem;
|
||||
--font-size-body-2: 0.8125rem;
|
||||
--font-size-label-1: 0.75rem;
|
||||
--font-size-label-2: 0.6875rem;
|
||||
--font-size-caption: 0.6875rem;
|
||||
/* typography — font-weight */
|
||||
--font-weight-thin: 300;
|
||||
--font-weight-regular: 400;
|
||||
@ -111,34 +111,29 @@
|
||||
--static-black: #131415;
|
||||
--static-white: #ffffff;
|
||||
|
||||
/* Gray (Definition cool-tone, 15 steps) */
|
||||
--gray-0: #FFFFFF;
|
||||
--gray-50: #F8F9FC;
|
||||
--gray-100: #F3F6FB;
|
||||
--gray-200: #EBEFF5;
|
||||
--gray-250: #E1E6EC;
|
||||
--gray-300: #D6DBE1;
|
||||
--gray-400: #B9C1C9;
|
||||
--gray-500: #808892;
|
||||
--gray-550: #6C747E;
|
||||
--gray-600: #565B64;
|
||||
--gray-700: #3A3F49;
|
||||
--gray-800: #24272D;
|
||||
--gray-850: #1B1E23;
|
||||
--gray-900: #121418;
|
||||
--gray-1000: #000000;
|
||||
/* Gray */
|
||||
--gray-100: #f1f5f9;
|
||||
--gray-200: #e2e8f0;
|
||||
--gray-300: #cbd5e1;
|
||||
--gray-400: #94a3b8;
|
||||
--gray-500: #64748b;
|
||||
--gray-600: #475569;
|
||||
--gray-700: #334155;
|
||||
--gray-800: #1e293b;
|
||||
--gray-900: #0f172a;
|
||||
--gray-1000: #020617;
|
||||
|
||||
/* Blue (Primary Blue-Cyan, hue ~200°) */
|
||||
--blue-100: #E6F4FB;
|
||||
--blue-200: #B3E0F5;
|
||||
--blue-300: #80CCEE;
|
||||
--blue-400: #4DB8E8;
|
||||
--blue-500: #0099DD;
|
||||
--blue-600: #007AB1;
|
||||
--blue-700: #005C85;
|
||||
--blue-800: #003D59;
|
||||
--blue-900: #001F2D;
|
||||
--blue-1000: #001520;
|
||||
/* Blue */
|
||||
--blue-100: #dbeafe;
|
||||
--blue-200: #bfdbfe;
|
||||
--blue-300: #93c5fd;
|
||||
--blue-400: #60a5fa;
|
||||
--blue-500: #3b82f6;
|
||||
--blue-600: #2563eb;
|
||||
--blue-700: #1d4ed8;
|
||||
--blue-800: #1e40af;
|
||||
--blue-900: #1e3a8a;
|
||||
--blue-1000: #172554;
|
||||
|
||||
/* Green */
|
||||
--green-100: #dcfce7;
|
||||
@ -157,7 +152,7 @@
|
||||
--yellow-200: #fef08a;
|
||||
--yellow-300: #fde047;
|
||||
--yellow-400: #facc15;
|
||||
--yellow-500: #FEDA4A;
|
||||
--yellow-500: #eab308;
|
||||
--yellow-600: #ca8a04;
|
||||
--yellow-700: #a16207;
|
||||
--yellow-800: #854d0e;
|
||||
@ -165,12 +160,12 @@
|
||||
--yellow-1000: #422006;
|
||||
|
||||
/* Red */
|
||||
--red-100: #7A2D2D;
|
||||
--red-100: #fee2e2;
|
||||
--red-200: #fecaca;
|
||||
--red-300: #fca5a5;
|
||||
--red-400: #f87171;
|
||||
--red-500: #DE4141;
|
||||
--red-600: #D61111;
|
||||
--red-500: #ef4444;
|
||||
--red-600: #dc2626;
|
||||
--red-700: #b91c1c;
|
||||
--red-800: #991b1b;
|
||||
--red-900: #7f1d1d;
|
||||
@ -194,19 +189,19 @@
|
||||
|
||||
/* ── Light theme overrides ── */
|
||||
[data-theme='light'] {
|
||||
--bg-base: #FFFFFF;
|
||||
--bg-surface: #FFFFFF;
|
||||
--bg-elevated: #F3F6FB;
|
||||
--bg-card: #FFFFFF;
|
||||
--bg-surface-hover: #EBEFF5;
|
||||
--stroke-default: #B9C1C9;
|
||||
--stroke-light: #E1E6EC;
|
||||
--fg-default: #121418;
|
||||
--fg-sub: #24272D;
|
||||
--fg-disabled: #808892;
|
||||
--bg-base: #f8fafc;
|
||||
--bg-surface: #ffffff;
|
||||
--bg-elevated: #f1f5f9;
|
||||
--bg-card: #ffffff;
|
||||
--bg-surface-hover: #e2e8f0;
|
||||
--stroke-default: #cbd5e1;
|
||||
--stroke-light: #e2e8f0;
|
||||
--fg-default: #0f172a;
|
||||
--fg-sub: #475569;
|
||||
--fg-disabled: #94a3b8;
|
||||
--hover-overlay: rgba(0, 0, 0, 0.04);
|
||||
--dropdown-bg: rgba(255, 255, 255, 0.97);
|
||||
--color-accent-muted: #007AB1;
|
||||
--color-accent-muted: #0891b2;
|
||||
--color-navy: #1d4ed8;
|
||||
--color-navy-hover: #2563eb;
|
||||
}
|
||||
|
||||
@ -4,21 +4,6 @@
|
||||
z-index: 500;
|
||||
}
|
||||
|
||||
/* 사고 팝업 — @layer 밖에 위치해야 MapLibre 기본 스타일을 덮어씀 */
|
||||
.incident-popup .maplibregl-popup-content {
|
||||
background: transparent;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
.incident-popup .maplibregl-popup-tip {
|
||||
border-top-color: var(--bg-elevated);
|
||||
border-bottom-color: var(--bg-elevated);
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* ═══ CCTV 지도 팝업 (어두운 톤) ═══ */
|
||||
.cctv-dark-popup .maplibregl-popup-content {
|
||||
@ -45,22 +30,6 @@
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ═══ Incidents 사고 팝업 ✕ 버튼 — 라이트 지도 기준 검은색 고정 ═══ */
|
||||
.incident-popup .maplibregl-popup-close-button {
|
||||
color: #1a1d21;
|
||||
background: transparent;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
font-size: 16px;
|
||||
line-height: 16px;
|
||||
top: 6px;
|
||||
right: 6px;
|
||||
}
|
||||
.incident-popup .maplibregl-popup-close-button:hover {
|
||||
color: #000;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ═══ Scrollbar ═══ */
|
||||
.scrollbar-thin {
|
||||
scrollbar-width: thin;
|
||||
@ -94,7 +63,7 @@
|
||||
border-radius: 6px;
|
||||
color: var(--fg-default);
|
||||
font-family: var(--font-korean);
|
||||
font-size: 0.75rem;
|
||||
font-size: 11px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -119,7 +88,7 @@
|
||||
|
||||
.prd-date-input,
|
||||
.prd-time-input {
|
||||
font-size: 0.75rem;
|
||||
font-size: 10px;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@ -127,7 +96,7 @@
|
||||
.prd-time-input::-webkit-datetime-edit {
|
||||
color: var(--fg-sub);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
@ -207,7 +176,7 @@
|
||||
background: #1a1f2e;
|
||||
color: var(--fg-default);
|
||||
padding: 10px;
|
||||
font-size: 0.75rem;
|
||||
font-size: 11px;
|
||||
font-family: var(--font-korean);
|
||||
}
|
||||
|
||||
@ -294,7 +263,7 @@
|
||||
|
||||
.combo-item {
|
||||
padding: 7px 10px;
|
||||
font-size: 0.75rem;
|
||||
font-size: 11px;
|
||||
font-family: var(--font-korean);
|
||||
color: var(--fg-sub);
|
||||
cursor: pointer;
|
||||
@ -325,7 +294,7 @@
|
||||
gap: 4px;
|
||||
padding: 5px 4px;
|
||||
border-radius: 5px;
|
||||
font-size: 0.75rem;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-korean);
|
||||
cursor: pointer;
|
||||
@ -344,7 +313,7 @@
|
||||
|
||||
/* .prd-mc.on::before {
|
||||
content: '✓ ';
|
||||
font-size: 0.6875rem;
|
||||
font-size: 9px;
|
||||
color: var(--color-accent);
|
||||
} */
|
||||
|
||||
@ -360,7 +329,7 @@
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.8125rem;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
@ -386,7 +355,7 @@
|
||||
border: 1px solid rgba(6, 182, 212, 0.2);
|
||||
border-radius: 6px;
|
||||
color: var(--color-accent);
|
||||
font-size: 0.75rem;
|
||||
font-size: 9px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
@ -411,7 +380,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.8125rem;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
transition: all 0.15s;
|
||||
background: rgba(15, 21, 36, 0.75);
|
||||
@ -450,7 +419,7 @@
|
||||
border-radius: 6px;
|
||||
padding: 5px 14px;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.6875rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-weight: 400;
|
||||
z-index: 20;
|
||||
@ -491,7 +460,7 @@
|
||||
}
|
||||
|
||||
.wii-value {
|
||||
font-size: 0.75rem;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 400;
|
||||
color: #ffffff;
|
||||
font-family: var(--font-mono);
|
||||
@ -538,7 +507,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
font-size: 1rem;
|
||||
font-size: 14px;
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
@ -567,7 +536,7 @@
|
||||
}
|
||||
|
||||
.tll {
|
||||
font-size: 0.75rem;
|
||||
font-size: 10px;
|
||||
color: var(--fg-disabled);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
@ -621,7 +590,7 @@
|
||||
position: absolute;
|
||||
top: -18px;
|
||||
transform: translateX(-50%);
|
||||
font-size: 0.8125rem;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.5));
|
||||
}
|
||||
@ -636,7 +605,7 @@
|
||||
border: 1px solid var(--color-boom);
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
font-size: 0.75rem;
|
||||
font-size: 10px;
|
||||
color: var(--color-boom);
|
||||
white-space: nowrap;
|
||||
font-family: var(--font-korean);
|
||||
@ -672,7 +641,7 @@
|
||||
}
|
||||
|
||||
.tlct {
|
||||
font-size: 1rem;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--color-accent);
|
||||
font-family: var(--font-mono);
|
||||
@ -687,7 +656,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-size: 0.75rem;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.tlsl {
|
||||
@ -715,7 +684,7 @@
|
||||
border: 1px solid var(--stroke-default);
|
||||
background: var(--bg-card);
|
||||
color: var(--fg-sub);
|
||||
font-size: 0.75rem;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-korean);
|
||||
@ -766,7 +735,7 @@
|
||||
padding: 6px 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
font-size: 0.75rem;
|
||||
font-size: 11px;
|
||||
color: var(--fg-sub);
|
||||
font-family: var(--font-korean);
|
||||
}
|
||||
@ -841,7 +810,7 @@
|
||||
}
|
||||
|
||||
.layer-icon {
|
||||
font-size: 1rem;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@ -851,7 +820,7 @@
|
||||
}
|
||||
|
||||
.layer-count {
|
||||
font-size: 0.75rem;
|
||||
font-size: 10px;
|
||||
color: var(--fg-disabled);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
@ -872,7 +841,7 @@
|
||||
border: 1px solid rgba(245, 158, 11, 0.4);
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
font-size: 0.75rem;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--color-boom);
|
||||
font-family: var(--font-korean);
|
||||
@ -903,10 +872,10 @@
|
||||
background: var(--bg-base);
|
||||
border: 1px solid var(--stroke-default);
|
||||
border-radius: 4px;
|
||||
color: var(--color-default);
|
||||
color: var(--color-accent);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 400;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
@ -942,7 +911,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 0.75rem;
|
||||
font-size: 11px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
@ -952,7 +921,7 @@
|
||||
border: 1px solid var(--stroke-default);
|
||||
background: var(--bg-card);
|
||||
color: var(--fg-disabled);
|
||||
font-size: 0.75rem;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-mono);
|
||||
@ -1115,7 +1084,7 @@
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background 0.15s;
|
||||
font-size: 0.8125rem;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--fg-default);
|
||||
font-family: var(--font-korean);
|
||||
@ -1139,7 +1108,7 @@
|
||||
|
||||
.lyr-h1-cnt {
|
||||
margin-left: auto;
|
||||
font-size: 0.75rem;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: var(--fg-disabled);
|
||||
font-family: var(--font-mono);
|
||||
@ -1168,7 +1137,7 @@
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
transition: background 0.15s;
|
||||
font-size: 0.75rem;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--fg-sub);
|
||||
font-family: var(--font-korean);
|
||||
@ -1192,7 +1161,7 @@
|
||||
|
||||
.lyr-h2-cnt {
|
||||
margin-left: auto;
|
||||
font-size: 0.75rem;
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: var(--fg-disabled);
|
||||
font-family: var(--font-mono);
|
||||
@ -1215,7 +1184,7 @@
|
||||
gap: 8px;
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
font-size: 0.75rem;
|
||||
font-size: 11px;
|
||||
color: var(--fg-sub);
|
||||
transition:
|
||||
color 0.15s,
|
||||
@ -1231,7 +1200,7 @@
|
||||
|
||||
.lyr-cnt {
|
||||
margin-left: auto;
|
||||
font-size: 0.75rem;
|
||||
font-size: 10px;
|
||||
font-weight: 400;
|
||||
color: var(--fg-disabled);
|
||||
font-family: var(--font-mono);
|
||||
@ -1345,7 +1314,7 @@
|
||||
}
|
||||
|
||||
.lyr-ccustom label {
|
||||
font-size: 0.75rem;
|
||||
font-size: 9px;
|
||||
color: var(--fg-disabled);
|
||||
font-family: var(--font-korean);
|
||||
}
|
||||
@ -1369,7 +1338,7 @@
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.lyr-style-label {
|
||||
font-size: 0.75rem;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
color: var(--fg-disabled);
|
||||
font-family: var(--font-korean);
|
||||
@ -1386,7 +1355,7 @@
|
||||
margin-top: 6px;
|
||||
}
|
||||
.lyr-style-name {
|
||||
font-size: 0.75rem;
|
||||
font-size: 10px;
|
||||
color: var(--fg-disabled);
|
||||
font-family: var(--font-korean);
|
||||
min-width: 32px;
|
||||
@ -1411,7 +1380,7 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
.lyr-style-val {
|
||||
font-size: 0.75rem;
|
||||
font-size: 9px;
|
||||
color: var(--fg-disabled);
|
||||
font-family: var(--font-mono);
|
||||
min-width: 28px;
|
||||
|
||||
@ -181,7 +181,7 @@
|
||||
}
|
||||
|
||||
.wing-tab {
|
||||
@apply flex-1 py-2 px-1 text-caption font-semibold rounded-md text-center cursor-pointer font-korean;
|
||||
@apply flex-1 py-2 px-1 text-xs font-semibold rounded-md text-center cursor-pointer font-korean;
|
||||
transition: all 0.15s;
|
||||
color: var(--fg-disabled);
|
||||
background: transparent;
|
||||
|
||||
0
frontend/src/types/backtrack.ts → frontend/src/common/types/backtrack.ts
Normal file → Executable file
0
frontend/src/types/backtrack.ts → frontend/src/common/types/backtrack.ts
Normal file → Executable file
0
frontend/src/types/boomLine.ts → frontend/src/common/types/boomLine.ts
Normal file → Executable file
0
frontend/src/types/boomLine.ts → frontend/src/common/types/boomLine.ts
Normal file → Executable file
67
frontend/src/common/types/hns.ts
Normal file
67
frontend/src/common/types/hns.ts
Normal file
@ -0,0 +1,67 @@
|
||||
/* HNS 물질 검색 데이터 타입 */
|
||||
|
||||
export interface HNSSearchSubstance {
|
||||
id: number;
|
||||
abbreviation: string; // 약자/제품명 (화물적부도 코드)
|
||||
nameKr: string; // 국문명
|
||||
nameEn: string; // 영문명
|
||||
synonymsEn: string; // 영문 동의어
|
||||
synonymsKr: string; // 국문 동의어/용도
|
||||
unNumber: string; // UN번호
|
||||
casNumber: string; // CAS번호
|
||||
transportMethod: string; // 운송방법
|
||||
sebc: string; // SEBC 거동분류
|
||||
/* 물리·화학적 특성 */
|
||||
usage: string;
|
||||
state: string;
|
||||
color: string;
|
||||
odor: string;
|
||||
flashPoint: string;
|
||||
autoIgnition: string;
|
||||
boilingPoint: string;
|
||||
density: string; // 비중 (물=1)
|
||||
solubility: string;
|
||||
vaporPressure: string;
|
||||
vaporDensity: string; // 증기밀도 (공기=1)
|
||||
explosionRange: string; // 폭발범위
|
||||
/* 위험등급·농도기준 */
|
||||
nfpa: { health: number; fire: number; reactivity: number; special: string };
|
||||
hazardClass: string;
|
||||
ergNumber: string;
|
||||
idlh: string;
|
||||
aegl2: string;
|
||||
erpg2: string;
|
||||
/* 방제거리 */
|
||||
responseDistanceFire: string;
|
||||
responseDistanceSpillDay: string;
|
||||
responseDistanceSpillNight: string;
|
||||
marineResponse: string;
|
||||
/* PPE */
|
||||
ppeClose: string;
|
||||
ppeFar: string;
|
||||
/* MSDS 요약 */
|
||||
msds: {
|
||||
hazard: string;
|
||||
firstAid: string;
|
||||
fireFighting: string;
|
||||
spillResponse: string;
|
||||
exposure: string;
|
||||
regulation: string;
|
||||
};
|
||||
/* IBC CODE */
|
||||
ibcHazard: string;
|
||||
ibcShipType: string;
|
||||
ibcTankType: string;
|
||||
ibcDetection: string;
|
||||
ibcFireFighting: string;
|
||||
ibcMinRequirement: string;
|
||||
/* EmS */
|
||||
emsCode: string;
|
||||
emsFire: string;
|
||||
emsSpill: string;
|
||||
emsFirstAid: string;
|
||||
/* 화물적부도 코드 */
|
||||
cargoCodes: Array<{ code: string; name: string; company: string; source: string }>;
|
||||
/* 항구별 반입 */
|
||||
portFrequency: Array<{ port: string; portCode: string; lastImport: string; frequency: string }>;
|
||||
}
|
||||
@ -3,7 +3,7 @@ import type {
|
||||
BoomLineCoord,
|
||||
AlgorithmSettings,
|
||||
ContainmentResult,
|
||||
} from '@/types/boomLine';
|
||||
} from '../types/boomLine';
|
||||
|
||||
const DEG2RAD = Math.PI / 180;
|
||||
const RAD2DEG = 180 / Math.PI;
|
||||
@ -217,6 +217,8 @@ export function generateAIBoomLines(
|
||||
const totalDist = haversineDistance(incident, centroid);
|
||||
|
||||
// 입자 분산 폭 계산 (최종 시간 기준)
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const perpBearing = (mainBearing + 90) % 360;
|
||||
let maxSpread = 0;
|
||||
for (const p of finalPoints) {
|
||||
const bearing = computeBearing(incident, p);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import type { ImageAnalyzeResult } from '@interfaces/prediction/PredictionInterface';
|
||||
import type { ImageAnalyzeResult } from '@tabs/prediction/services/predictionApi';
|
||||
|
||||
/**
|
||||
* 항공탐색(유출유면적분석) → 유출유 확산예측 탭 간 데이터 전달용 모듈 레벨 시그널.
|
||||
|
||||
@ -31,6 +31,45 @@ export function stripHtmlTags(html: string): string {
|
||||
return html.replace(/<[^>]*>/g, '');
|
||||
}
|
||||
|
||||
/**
|
||||
* 안전한 HTML 살균
|
||||
* 허용된 태그만 남기고 위험한 태그/속성 제거
|
||||
*/
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const ALLOWED_TAGS = new Set([
|
||||
'b',
|
||||
'i',
|
||||
'u',
|
||||
'strong',
|
||||
'em',
|
||||
'br',
|
||||
'p',
|
||||
'span',
|
||||
'div',
|
||||
'h1',
|
||||
'h2',
|
||||
'h3',
|
||||
'h4',
|
||||
'h5',
|
||||
'h6',
|
||||
'ul',
|
||||
'ol',
|
||||
'li',
|
||||
'a',
|
||||
'img',
|
||||
'table',
|
||||
'thead',
|
||||
'tbody',
|
||||
'tr',
|
||||
'th',
|
||||
'td',
|
||||
'sup',
|
||||
'sub',
|
||||
'hr',
|
||||
'blockquote',
|
||||
'pre',
|
||||
'code',
|
||||
]);
|
||||
|
||||
const DANGEROUS_ATTRS = /\s*on\w+\s*=|javascript\s*:|vbscript\s*:|expression\s*\(/gi;
|
||||
|
||||
|
||||
@ -1,567 +0,0 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { TaskTable } from './contents/TaskTable';
|
||||
import { AuditLogModal } from './contents/AuditLogModal';
|
||||
import { WizardModal } from './contents/WizardModal';
|
||||
/* eslint-disable react-refresh/only-export-components */
|
||||
|
||||
// ─── 타입 ──────────────────────────────────────────────────
|
||||
|
||||
export type TaskStatus = '완료' | '진행중' | '대기' | '오류';
|
||||
|
||||
export interface AuditLogEntry {
|
||||
id: string;
|
||||
time: string;
|
||||
operator: string;
|
||||
operatorId: string;
|
||||
action: string;
|
||||
targetData: string;
|
||||
result: string;
|
||||
resultType: '성공' | '실패' | '거부' | '진행중';
|
||||
ip: string;
|
||||
browser: string;
|
||||
detail: {
|
||||
dataCount: number;
|
||||
rulesApplied: string;
|
||||
processedCount: number;
|
||||
errorCount: number;
|
||||
};
|
||||
}
|
||||
|
||||
export interface DeidentifyTask {
|
||||
id: string;
|
||||
name: string;
|
||||
target: string;
|
||||
status: TaskStatus;
|
||||
startTime: string;
|
||||
progress: number;
|
||||
createdBy: string;
|
||||
}
|
||||
|
||||
export type SourceType = 'db' | 'file' | 'api';
|
||||
export type ProcessMode = 'immediate' | 'scheduled' | 'oneshot';
|
||||
export type RepeatType = 'daily' | 'weekly' | 'monthly';
|
||||
export type DeidentifyTechnique = '마스킹' | '삭제' | '범주화' | '암호화' | '샘플링' | '가명처리' | '유지';
|
||||
|
||||
export interface FieldConfig {
|
||||
name: string;
|
||||
dataType: string;
|
||||
technique: DeidentifyTechnique;
|
||||
configValue: string;
|
||||
selected: boolean;
|
||||
}
|
||||
|
||||
export interface DbConfig {
|
||||
host: string;
|
||||
port: string;
|
||||
database: string;
|
||||
tableName: string;
|
||||
}
|
||||
|
||||
export interface ApiConfig {
|
||||
url: string;
|
||||
method: 'GET' | 'POST';
|
||||
}
|
||||
|
||||
export interface ScheduleConfig {
|
||||
hour: string;
|
||||
repeatType: RepeatType;
|
||||
weekday: string;
|
||||
startDate: string;
|
||||
notifyOnComplete: boolean;
|
||||
notifyOnError: boolean;
|
||||
}
|
||||
|
||||
export interface OneshotConfig {
|
||||
date: string;
|
||||
hour: string;
|
||||
}
|
||||
|
||||
export interface WizardState {
|
||||
step: number;
|
||||
taskName: string;
|
||||
sourceType: SourceType;
|
||||
dbConfig: DbConfig;
|
||||
apiConfig: ApiConfig;
|
||||
fields: FieldConfig[];
|
||||
processMode: ProcessMode;
|
||||
scheduleConfig: ScheduleConfig;
|
||||
oneshotConfig: OneshotConfig;
|
||||
saveAsTemplate: boolean;
|
||||
applyTemplate: string;
|
||||
confirmed: boolean;
|
||||
}
|
||||
|
||||
// ─── Mock 데이터 ────────────────────────────────────────────
|
||||
|
||||
export const MOCK_TASKS: DeidentifyTask[] = [
|
||||
{
|
||||
id: '001',
|
||||
name: 'customer_2024',
|
||||
target: '선박/운항 - 선장·선원 성명',
|
||||
status: '완료',
|
||||
startTime: '2026-04-10 14:30',
|
||||
progress: 100,
|
||||
createdBy: '관리자',
|
||||
},
|
||||
{
|
||||
id: '002',
|
||||
name: 'transaction_04',
|
||||
target: '사고 현장 - 현장사진, 영상내 인물',
|
||||
status: '진행중',
|
||||
startTime: '2026-04-10 14:15',
|
||||
progress: 82,
|
||||
createdBy: '김담당',
|
||||
},
|
||||
{
|
||||
id: '003',
|
||||
name: 'employee_info',
|
||||
target: '인사정보 - 계정, 로그인 정보',
|
||||
status: '대기',
|
||||
startTime: '2026-04-10 22:00',
|
||||
progress: 0,
|
||||
createdBy: '이담당',
|
||||
},
|
||||
{
|
||||
id: '004',
|
||||
name: 'vendor_data',
|
||||
target: 'HNS 대응 - 화학물질 취급자, 방제업체 연락처',
|
||||
status: '오류',
|
||||
startTime: '2026-04-09 13:45',
|
||||
progress: 45,
|
||||
createdBy: '관리자',
|
||||
},
|
||||
{
|
||||
id: '005',
|
||||
name: 'partner_contacts',
|
||||
target: '시스템 운영 - 관리자, 운영자 접속로그',
|
||||
status: '완료',
|
||||
startTime: '2026-04-08 09:00',
|
||||
progress: 100,
|
||||
createdBy: '박담당',
|
||||
},
|
||||
];
|
||||
|
||||
export const DEFAULT_FIELDS: FieldConfig[] = [
|
||||
{ name: '고객ID', dataType: '문자열', technique: '삭제', configValue: '-', selected: true },
|
||||
{
|
||||
name: '이름',
|
||||
dataType: '문자열',
|
||||
technique: '마스킹',
|
||||
configValue: '*로 치환',
|
||||
selected: true,
|
||||
},
|
||||
{
|
||||
name: '휴대폰',
|
||||
dataType: '문자열',
|
||||
technique: '마스킹',
|
||||
configValue: '010-****-****',
|
||||
selected: true,
|
||||
},
|
||||
{
|
||||
name: '주소',
|
||||
dataType: '문자열',
|
||||
technique: '범주화',
|
||||
configValue: '시/도만 표시',
|
||||
selected: true,
|
||||
},
|
||||
{
|
||||
name: '이메일',
|
||||
dataType: '문자열',
|
||||
technique: '가명처리',
|
||||
configValue: '키: random_001',
|
||||
selected: true,
|
||||
},
|
||||
{
|
||||
name: '생년월일',
|
||||
dataType: '날짜',
|
||||
technique: '범주화',
|
||||
configValue: '연도만 표시',
|
||||
selected: true,
|
||||
},
|
||||
{ name: '회사', dataType: '문자열', technique: '유지', configValue: '변경 없음', selected: true },
|
||||
];
|
||||
|
||||
export const TECHNIQUES: DeidentifyTechnique[] = [
|
||||
'마스킹',
|
||||
'삭제',
|
||||
'범주화',
|
||||
'암호화',
|
||||
'샘플링',
|
||||
'가명처리',
|
||||
'유지',
|
||||
];
|
||||
|
||||
export const HOURS = Array.from({ length: 24 }, (_, i) => `${String(i).padStart(2, '0')}:00`);
|
||||
|
||||
export const WEEKDAYS = ['월', '화', '수', '목', '금', '토', '일'];
|
||||
|
||||
export const TEMPLATES = ['기본 개인정보', '금융데이터', '의료데이터'];
|
||||
|
||||
export const MOCK_AUDIT_LOGS: Record<string, AuditLogEntry[]> = {
|
||||
'001': [
|
||||
{
|
||||
id: 'LOG_20260410_001',
|
||||
time: '2026-04-10 14:30:45',
|
||||
operator: '김철수',
|
||||
operatorId: 'user_12345',
|
||||
action: '처리완료',
|
||||
targetData: 'customer_2024',
|
||||
result: '성공 (100%)',
|
||||
resultType: '성공',
|
||||
ip: '192.168.1.100',
|
||||
browser: 'Chrome 123.0',
|
||||
detail: {
|
||||
dataCount: 15240,
|
||||
rulesApplied: '마스킹 3, 범주화 2, 삭제 2',
|
||||
processedCount: 15240,
|
||||
errorCount: 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'LOG_20260410_002',
|
||||
time: '2026-04-10 14:15:10',
|
||||
operator: '김철수',
|
||||
operatorId: 'user_12345',
|
||||
action: '처리시작',
|
||||
targetData: 'customer_2024',
|
||||
result: '성공',
|
||||
resultType: '성공',
|
||||
ip: '192.168.1.100',
|
||||
browser: 'Chrome 123.0',
|
||||
detail: {
|
||||
dataCount: 15240,
|
||||
rulesApplied: '마스킹 3, 범주화 2, 삭제 2',
|
||||
processedCount: 0,
|
||||
errorCount: 0,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'LOG_20260410_003',
|
||||
time: '2026-04-10 14:10:30',
|
||||
operator: '김철수',
|
||||
operatorId: 'user_12345',
|
||||
action: '규칙설정',
|
||||
targetData: 'customer_2024',
|
||||
result: '성공',
|
||||
resultType: '성공',
|
||||
ip: '192.168.1.100',
|
||||
browser: 'Chrome 123.0',
|
||||
detail: { dataCount: 15240, rulesApplied: '7개 규칙 적용', processedCount: 0, errorCount: 0 },
|
||||
},
|
||||
],
|
||||
'002': [
|
||||
{
|
||||
id: 'LOG_20260410_004',
|
||||
time: '2026-04-10 14:15:22',
|
||||
operator: '이영희',
|
||||
operatorId: 'user_23456',
|
||||
action: '처리시작',
|
||||
targetData: 'transaction_04',
|
||||
result: '진행중 (82%)',
|
||||
resultType: '진행중',
|
||||
ip: '192.168.1.101',
|
||||
browser: 'Firefox 124.0',
|
||||
detail: {
|
||||
dataCount: 8920,
|
||||
rulesApplied: '마스킹 2, 암호화 1, 삭제 3',
|
||||
processedCount: 7314,
|
||||
errorCount: 0,
|
||||
},
|
||||
},
|
||||
],
|
||||
'003': [
|
||||
{
|
||||
id: 'LOG_20260410_005',
|
||||
time: '2026-04-10 13:45:30',
|
||||
operator: '박민준',
|
||||
operatorId: 'user_34567',
|
||||
action: '규칙수정',
|
||||
targetData: 'employee_info',
|
||||
result: '성공',
|
||||
resultType: '성공',
|
||||
ip: '192.168.1.102',
|
||||
browser: 'Chrome 123.0',
|
||||
detail: {
|
||||
dataCount: 3200,
|
||||
rulesApplied: '마스킹 4, 가명처리 1',
|
||||
processedCount: 0,
|
||||
errorCount: 0,
|
||||
},
|
||||
},
|
||||
],
|
||||
'004': [
|
||||
{
|
||||
id: 'LOG_20260409_001',
|
||||
time: '2026-04-09 13:45:30',
|
||||
operator: '관리자',
|
||||
operatorId: 'user_admin',
|
||||
action: '처리오류',
|
||||
targetData: 'vendor_data',
|
||||
result: '오류 (45%)',
|
||||
resultType: '실패',
|
||||
ip: '192.168.1.100',
|
||||
browser: 'Chrome 123.0',
|
||||
detail: {
|
||||
dataCount: 5100,
|
||||
rulesApplied: '마스킹 2, 범주화 1, 삭제 1',
|
||||
processedCount: 2295,
|
||||
errorCount: 12,
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'LOG_20260409_002',
|
||||
time: '2026-04-09 13:40:15',
|
||||
operator: '김철수',
|
||||
operatorId: 'user_12345',
|
||||
action: '규칙조회',
|
||||
targetData: 'vendor_data',
|
||||
result: '성공',
|
||||
resultType: '성공',
|
||||
ip: '192.168.1.100',
|
||||
browser: 'Chrome 123.0',
|
||||
detail: { dataCount: 5100, rulesApplied: '4개 규칙', processedCount: 0, errorCount: 0 },
|
||||
},
|
||||
{
|
||||
id: 'LOG_20260409_003',
|
||||
time: '2026-04-09 09:25:00',
|
||||
operator: '이영희',
|
||||
operatorId: 'user_23456',
|
||||
action: '삭제시도',
|
||||
targetData: 'vendor_data',
|
||||
result: '거부 (권한부족)',
|
||||
resultType: '거부',
|
||||
ip: '192.168.1.101',
|
||||
browser: 'Firefox 124.0',
|
||||
detail: { dataCount: 5100, rulesApplied: '-', processedCount: 0, errorCount: 0 },
|
||||
},
|
||||
],
|
||||
'005': [
|
||||
{
|
||||
id: 'LOG_20260408_001',
|
||||
time: '2026-04-08 09:15:00',
|
||||
operator: '박담당',
|
||||
operatorId: 'user_45678',
|
||||
action: '처리완료',
|
||||
targetData: 'partner_contacts',
|
||||
result: '성공 (100%)',
|
||||
resultType: '성공',
|
||||
ip: '192.168.1.103',
|
||||
browser: 'Edge 122.0',
|
||||
detail: {
|
||||
dataCount: 1850,
|
||||
rulesApplied: '마스킹 2, 유지 3',
|
||||
processedCount: 1850,
|
||||
errorCount: 0,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
function fetchTasks(): Promise<DeidentifyTask[]> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => resolve(MOCK_TASKS), 300);
|
||||
});
|
||||
}
|
||||
|
||||
// ─── 상태 뱃지 ─────────────────────────────────────────────
|
||||
|
||||
export function getStatusBadgeClass(status: TaskStatus): string {
|
||||
switch (status) {
|
||||
case '완료':
|
||||
return 'text-color-success bg-[rgba(34,197,94,0.1)]';
|
||||
case '진행중':
|
||||
return 'text-color-accent bg-[rgba(6,182,212,0.1)]';
|
||||
case '대기':
|
||||
return 'text-color-caution bg-[rgba(234,179,8,0.1)]';
|
||||
case '오류':
|
||||
return 'text-color-danger bg-[rgba(239,68,68,0.1)]';
|
||||
}
|
||||
}
|
||||
|
||||
// ─── 진행률 바 ─────────────────────────────────────────────
|
||||
|
||||
export const TABLE_HEADERS = ['작업ID', '작업명', '대상', '상태', '시작시간', '진행률', '등록자', '액션'];
|
||||
|
||||
export const STEP_LABELS = ['소스선택', '데이터검증', '비식별화규칙', '처리방식', '최종확인'];
|
||||
|
||||
export const INITIAL_WIZARD: WizardState = {
|
||||
step: 1,
|
||||
taskName: '',
|
||||
sourceType: 'db',
|
||||
dbConfig: { host: '', port: '5432', database: '', tableName: '' },
|
||||
apiConfig: { url: '', method: 'GET' },
|
||||
fields: DEFAULT_FIELDS,
|
||||
processMode: 'immediate',
|
||||
scheduleConfig: {
|
||||
hour: '02:00',
|
||||
repeatType: 'daily',
|
||||
weekday: '월',
|
||||
startDate: '',
|
||||
notifyOnComplete: true,
|
||||
notifyOnError: true,
|
||||
},
|
||||
oneshotConfig: { date: '', hour: '02:00' },
|
||||
saveAsTemplate: false,
|
||||
applyTemplate: '',
|
||||
confirmed: false,
|
||||
};
|
||||
|
||||
// ─── 메인 패널 ──────────────────────────────────────────────
|
||||
|
||||
type FilterStatus = '모두' | TaskStatus;
|
||||
|
||||
export default function DeidentifyPanel() {
|
||||
const [tasks, setTasks] = useState<DeidentifyTask[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [showWizard, setShowWizard] = useState(false);
|
||||
const [auditTask, setAuditTask] = useState<DeidentifyTask | null>(null);
|
||||
const [searchName, setSearchName] = useState('');
|
||||
const [filterStatus, setFilterStatus] = useState<FilterStatus>('모두');
|
||||
const [filterPeriod, setFilterPeriod] = useState<'7' | '30' | '90'>('30');
|
||||
|
||||
const loadTasks = useCallback(async () => {
|
||||
setLoading(true);
|
||||
const data = await fetchTasks();
|
||||
setTasks(data);
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let isMounted = true;
|
||||
if (tasks.length === 0) {
|
||||
void Promise.resolve().then(() => {
|
||||
if (isMounted) void loadTasks();
|
||||
});
|
||||
}
|
||||
return () => {
|
||||
isMounted = false;
|
||||
};
|
||||
}, [tasks.length, loadTasks]);
|
||||
|
||||
const handleAction = useCallback((action: string, task: DeidentifyTask) => {
|
||||
// TODO: 실제 API 연동 시 각 액션에 맞는 API 호출로 교체
|
||||
if (action === 'delete') {
|
||||
setTasks((prev) => prev.filter((t) => t.id !== task.id));
|
||||
} else if (action === 'audit') {
|
||||
setAuditTask(task);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleWizardSubmit = useCallback(
|
||||
(wizard: WizardState) => {
|
||||
const selectedFields = wizard.fields.filter((f) => f.selected).map((f) => f.name);
|
||||
const newTask: DeidentifyTask = {
|
||||
id: String(tasks.length + 1).padStart(3, '0'),
|
||||
name: wizard.taskName,
|
||||
target: selectedFields.join(', ') || '-',
|
||||
status: wizard.processMode === 'immediate' ? '진행중' : '대기',
|
||||
startTime: new Date()
|
||||
.toLocaleString('ko-KR', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
hour12: false,
|
||||
})
|
||||
.replace(/\. /g, '-')
|
||||
.replace('.', ''),
|
||||
progress: 0,
|
||||
createdBy: '관리자',
|
||||
};
|
||||
setTasks((prev) => [newTask, ...prev]);
|
||||
},
|
||||
[tasks.length],
|
||||
);
|
||||
|
||||
const filteredTasks = tasks.filter((t) => {
|
||||
if (searchName && !t.name.includes(searchName)) return false;
|
||||
if (filterStatus !== '모두' && t.status !== filterStatus) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
const completedCount = tasks.filter((t) => t.status === '완료').length;
|
||||
const inProgressCount = tasks.filter((t) => t.status === '진행중').length;
|
||||
const errorCount = tasks.filter((t) => t.status === '오류').length;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full overflow-hidden">
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between px-5 py-3 border-b border-stroke shrink-0">
|
||||
<h2 className="text-body-2 font-semibold text-t1">비식별화조치</h2>
|
||||
<button
|
||||
onClick={() => setShowWizard(true)}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 text-caption rounded bg-color-accent hover:bg-color-accent-muted text-white transition-colors"
|
||||
>
|
||||
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
새 작업
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 상태 요약 */}
|
||||
<div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke bg-bg-base">
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(34,197,94,0.1)] text-color-success">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-color-success" />
|
||||
완료 {completedCount}건
|
||||
</span>
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(6,182,212,0.1)] text-color-accent">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-color-accent" />
|
||||
진행중 {inProgressCount}건
|
||||
</span>
|
||||
{errorCount > 0 && (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(239,68,68,0.1)] text-color-danger">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-color-danger" />
|
||||
오류 {errorCount}건
|
||||
</span>
|
||||
)}
|
||||
<span className="text-caption text-t3">전체 {tasks.length}건</span>
|
||||
</div>
|
||||
|
||||
{/* 검색/필터 */}
|
||||
<div className="flex items-center gap-2 px-5 py-2.5 shrink-0 border-b border-stroke">
|
||||
<input
|
||||
type="text"
|
||||
value={searchName}
|
||||
onChange={(e) => setSearchName(e.target.value)}
|
||||
placeholder="작업명 검색"
|
||||
className="px-2.5 py-1.5 text-caption rounded bg-bg-elevated border border-stroke text-t1 placeholder:text-t3 focus:outline-none focus:border-color-accent w-40"
|
||||
/>
|
||||
<select
|
||||
value={filterStatus}
|
||||
onChange={(e) => setFilterStatus(e.target.value as FilterStatus)}
|
||||
className="px-2.5 py-1.5 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
|
||||
>
|
||||
{(['모두', '완료', '진행중', '대기', '오류'] as FilterStatus[]).map((s) => (
|
||||
<option key={s} value={s}>
|
||||
{s}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<select
|
||||
value={filterPeriod}
|
||||
onChange={(e) => setFilterPeriod(e.target.value as '7' | '30' | '90')}
|
||||
className="px-2.5 py-1.5 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
|
||||
>
|
||||
<option value="7">최근 7일</option>
|
||||
<option value="30">최근 30일</option>
|
||||
<option value="90">최근 90일</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* 테이블 */}
|
||||
<div className="flex-1 overflow-auto p-5">
|
||||
<TaskTable rows={filteredTasks} loading={loading} onAction={handleAction} />
|
||||
</div>
|
||||
|
||||
{/* 감사로그 모달 */}
|
||||
{auditTask && <AuditLogModal task={auditTask} onClose={() => setAuditTask(null)} />}
|
||||
|
||||
{/* 마법사 모달 */}
|
||||
{showWizard && (
|
||||
<WizardModal onClose={() => setShowWizard(false)} onSubmit={handleWizardSubmit} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,422 +0,0 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import {
|
||||
fetchRoles,
|
||||
fetchPermTree,
|
||||
updatePermissionsApi,
|
||||
createRoleApi,
|
||||
deleteRoleApi,
|
||||
updateRoleApi,
|
||||
updateRoleDefaultApi,
|
||||
type RoleWithPermissions,
|
||||
type PermTreeNode,
|
||||
} from '@common/services/authApi';
|
||||
import { RolePermTab } from './contents/RolePermTab';
|
||||
import { UserPermTab } from './contents/UserPermTab';
|
||||
/* eslint-disable react-refresh/only-export-components */
|
||||
|
||||
// ─── 오퍼레이션 코드 ─────────────────────────────────
|
||||
export const OPER_CODES = ['READ', 'CREATE', 'UPDATE', 'DELETE'] as const;
|
||||
export type OperCode = (typeof OPER_CODES)[number];
|
||||
export const OPER_LABELS: Record<OperCode, string> = { READ: 'R', CREATE: 'C', UPDATE: 'U', DELETE: 'D' };
|
||||
export const OPER_FULL_LABELS: Record<OperCode, string> = {
|
||||
READ: '조회',
|
||||
CREATE: '생성',
|
||||
UPDATE: '수정',
|
||||
DELETE: '삭제',
|
||||
};
|
||||
|
||||
// ─── 권한 상태 타입 ─────────────────────────────────────
|
||||
export type PermState = 'explicit-granted' | 'inherited-granted' | 'explicit-denied' | 'forced-denied';
|
||||
|
||||
// ─── 키 유틸 ──────────────────────────────────────────
|
||||
export function makeKey(rsrc: string, oper: string): string {
|
||||
return `${rsrc}::${oper}`;
|
||||
}
|
||||
|
||||
// ─── 유틸: 플랫 노드 목록 추출 (트리 DFS) ─────────────
|
||||
export function flattenTree(nodes: PermTreeNode[]): PermTreeNode[] {
|
||||
const result: PermTreeNode[] = [];
|
||||
function walk(list: PermTreeNode[]) {
|
||||
for (const n of list) {
|
||||
result.push(n);
|
||||
if (n.children.length > 0) walk(n.children);
|
||||
}
|
||||
}
|
||||
walk(nodes);
|
||||
return result;
|
||||
}
|
||||
|
||||
// ─── 유틸: 권한 상태 계산 (오퍼레이션별) ──────────────
|
||||
function resolvePermStateForOper(
|
||||
code: string,
|
||||
parentCode: string | null,
|
||||
operCd: string,
|
||||
explicitPerms: Map<string, boolean>,
|
||||
cache: Map<string, PermState>,
|
||||
): PermState {
|
||||
const key = makeKey(code, operCd);
|
||||
const cached = cache.get(key);
|
||||
if (cached) return cached;
|
||||
|
||||
const explicit = explicitPerms.get(key);
|
||||
|
||||
if (parentCode === null) {
|
||||
const state: PermState =
|
||||
explicit === true
|
||||
? 'explicit-granted'
|
||||
: explicit === false
|
||||
? 'explicit-denied'
|
||||
: 'explicit-denied';
|
||||
cache.set(key, state);
|
||||
return state;
|
||||
}
|
||||
|
||||
// 부모 READ 확인 (접근 게이트)
|
||||
const parentReadKey = makeKey(parentCode, 'READ');
|
||||
const parentReadState = cache.get(parentReadKey);
|
||||
if (parentReadState === 'explicit-denied' || parentReadState === 'forced-denied') {
|
||||
cache.set(key, 'forced-denied');
|
||||
return 'forced-denied';
|
||||
}
|
||||
|
||||
if (explicit === true) {
|
||||
cache.set(key, 'explicit-granted');
|
||||
return 'explicit-granted';
|
||||
}
|
||||
if (explicit === false) {
|
||||
cache.set(key, 'explicit-denied');
|
||||
return 'explicit-denied';
|
||||
}
|
||||
|
||||
// 부모의 같은 오퍼레이션 상속
|
||||
const parentOperKey = makeKey(parentCode, operCd);
|
||||
const parentOperState = cache.get(parentOperKey);
|
||||
if (parentOperState === 'explicit-granted' || parentOperState === 'inherited-granted') {
|
||||
cache.set(key, 'inherited-granted');
|
||||
return 'inherited-granted';
|
||||
}
|
||||
if (parentOperState === 'forced-denied') {
|
||||
cache.set(key, 'forced-denied');
|
||||
return 'forced-denied';
|
||||
}
|
||||
|
||||
cache.set(key, 'explicit-denied');
|
||||
return 'explicit-denied';
|
||||
}
|
||||
|
||||
export function buildEffectiveStates(
|
||||
flatNodes: PermTreeNode[],
|
||||
explicitPerms: Map<string, boolean>,
|
||||
): Map<string, PermState> {
|
||||
const cache = new Map<string, PermState>();
|
||||
for (const node of flatNodes) {
|
||||
// READ 먼저 (CUD는 READ에 의존)
|
||||
resolvePermStateForOper(node.code, node.parentCode, 'READ', explicitPerms, cache);
|
||||
for (const oper of OPER_CODES) {
|
||||
if (oper === 'READ') continue;
|
||||
resolvePermStateForOper(node.code, node.parentCode, oper, explicitPerms, cache);
|
||||
}
|
||||
}
|
||||
return cache;
|
||||
}
|
||||
|
||||
type ActiveTab = 'role' | 'user';
|
||||
|
||||
function PermissionsPanel() {
|
||||
const [activeTab, setActiveTab] = useState<ActiveTab>('role');
|
||||
const [roles, setRoles] = useState<RoleWithPermissions[]>([]);
|
||||
const [permTree, setPermTree] = useState<PermTreeNode[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const [saveError, setSaveError] = useState<string | null>(null);
|
||||
const [dirty, setDirty] = useState(false);
|
||||
const [showCreateForm, setShowCreateForm] = useState(false);
|
||||
const [newRoleCode, setNewRoleCode] = useState('');
|
||||
const [newRoleName, setNewRoleName] = useState('');
|
||||
const [newRoleDesc, setNewRoleDesc] = useState('');
|
||||
const [creating, setCreating] = useState(false);
|
||||
const [createError, setCreateError] = useState('');
|
||||
const [editingRoleSn, setEditingRoleSn] = useState<number | null>(null);
|
||||
const [editRoleName, setEditRoleName] = useState('');
|
||||
const [expanded, setExpanded] = useState<Set<string>>(new Set());
|
||||
const [selectedRoleSn, setSelectedRoleSn] = useState<number | null>(null);
|
||||
|
||||
// 역할별 명시적 권한: Map<roleSn, Map<"rsrc::oper", boolean>>
|
||||
const [rolePerms, setRolePerms] = useState<Map<number, Map<string, boolean>>>(new Map());
|
||||
|
||||
const loadData = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [rolesData, treeData] = await Promise.all([fetchRoles(), fetchPermTree()]);
|
||||
setRoles(rolesData);
|
||||
setPermTree(treeData);
|
||||
|
||||
// 명시적 권한 맵 초기화 (rsrc::oper 키 형식)
|
||||
const permsMap = new Map<number, Map<string, boolean>>();
|
||||
for (const role of rolesData) {
|
||||
const roleMap = new Map<string, boolean>();
|
||||
for (const p of role.permissions) {
|
||||
roleMap.set(makeKey(p.resourceCode, p.operationCode), p.granted);
|
||||
}
|
||||
permsMap.set(role.sn, roleMap);
|
||||
}
|
||||
setRolePerms(permsMap);
|
||||
|
||||
// 최상위 노드 기본 펼침
|
||||
setExpanded(new Set(treeData.map((n) => n.code)));
|
||||
// 첫 번째 역할 선택
|
||||
if (rolesData.length > 0 && !selectedRoleSn) {
|
||||
setSelectedRoleSn(rolesData[0].sn);
|
||||
}
|
||||
setDirty(false);
|
||||
} catch (err) {
|
||||
console.error('권한 데이터 조회 실패:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- 초기 마운트 시 1회만 실행
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, [loadData]);
|
||||
|
||||
// 플랫 노드 목록
|
||||
const flatNodes = flattenTree(permTree);
|
||||
|
||||
const handleToggleExpand = useCallback((code: string) => {
|
||||
setExpanded((prev) => {
|
||||
const next = new Set(prev);
|
||||
if (next.has(code)) next.delete(code);
|
||||
else next.add(code);
|
||||
return next;
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleTogglePerm = useCallback(
|
||||
(code: string, oper: OperCode, currentState: PermState) => {
|
||||
if (!selectedRoleSn) return;
|
||||
|
||||
setRolePerms((prev) => {
|
||||
const next = new Map(prev);
|
||||
const roleMap = new Map(next.get(selectedRoleSn) ?? new Map());
|
||||
|
||||
const key = makeKey(code, oper);
|
||||
const node = flatNodes.find((n) => n.code === code);
|
||||
const isRoot = node ? node.parentCode === null : false;
|
||||
|
||||
switch (currentState) {
|
||||
case 'explicit-granted':
|
||||
roleMap.set(key, false);
|
||||
break;
|
||||
case 'inherited-granted':
|
||||
roleMap.set(key, false);
|
||||
break;
|
||||
case 'explicit-denied':
|
||||
if (isRoot) {
|
||||
roleMap.set(key, true);
|
||||
} else {
|
||||
roleMap.delete(key);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
return prev;
|
||||
}
|
||||
|
||||
next.set(selectedRoleSn, roleMap);
|
||||
return next;
|
||||
});
|
||||
setDirty(true);
|
||||
},
|
||||
[selectedRoleSn, flatNodes],
|
||||
);
|
||||
|
||||
const handleSave = async () => {
|
||||
setSaving(true);
|
||||
setSaveError(null);
|
||||
try {
|
||||
for (const role of roles) {
|
||||
const perms = rolePerms.get(role.sn);
|
||||
if (!perms) continue;
|
||||
|
||||
const permsList: Array<{ resourceCode: string; operationCode: string; granted: boolean }> =
|
||||
[];
|
||||
for (const [key, granted] of perms) {
|
||||
const sepIdx = key.indexOf('::');
|
||||
permsList.push({
|
||||
resourceCode: key.substring(0, sepIdx),
|
||||
operationCode: key.substring(sepIdx + 2),
|
||||
granted,
|
||||
});
|
||||
}
|
||||
await updatePermissionsApi(role.sn, permsList);
|
||||
}
|
||||
setDirty(false);
|
||||
} catch (err) {
|
||||
console.error('권한 저장 실패:', err);
|
||||
setSaveError('권한 저장에 실패했습니다. 다시 시도해주세요.');
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreateRole = async () => {
|
||||
setCreating(true);
|
||||
setCreateError('');
|
||||
try {
|
||||
await createRoleApi({
|
||||
code: newRoleCode,
|
||||
name: newRoleName,
|
||||
description: newRoleDesc || undefined,
|
||||
});
|
||||
await loadData();
|
||||
setShowCreateForm(false);
|
||||
setNewRoleCode('');
|
||||
setNewRoleName('');
|
||||
setNewRoleDesc('');
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : '역할 생성에 실패했습니다.';
|
||||
setCreateError(message);
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeleteRole = async (roleSn: number, roleName: string) => {
|
||||
if (
|
||||
!window.confirm(
|
||||
`"${roleName}" 역할을 삭제하시겠습니까?\n이 역할을 가진 모든 사용자에서 해당 역할이 제거됩니다.`,
|
||||
)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await deleteRoleApi(roleSn);
|
||||
if (selectedRoleSn === roleSn) setSelectedRoleSn(null);
|
||||
await loadData();
|
||||
} catch (err) {
|
||||
console.error('역할 삭제 실패:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleStartEditName = (role: RoleWithPermissions) => {
|
||||
setEditingRoleSn(role.sn);
|
||||
setEditRoleName(role.name);
|
||||
};
|
||||
|
||||
const handleSaveRoleName = async (roleSn: number) => {
|
||||
if (!editRoleName.trim()) return;
|
||||
try {
|
||||
await updateRoleApi(roleSn, { name: editRoleName.trim() });
|
||||
setRoles((prev) =>
|
||||
prev.map((r) => (r.sn === roleSn ? { ...r, name: editRoleName.trim() } : r)),
|
||||
);
|
||||
setEditingRoleSn(null);
|
||||
} catch (err) {
|
||||
console.error('역할 이름 수정 실패:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleDefault = async (roleSn: number) => {
|
||||
const role = roles.find((r) => r.sn === roleSn);
|
||||
if (!role) return;
|
||||
const newValue = !role.isDefault;
|
||||
try {
|
||||
await updateRoleDefaultApi(roleSn, newValue);
|
||||
setRoles((prev) => prev.map((r) => (r.sn === roleSn ? { ...r, isDefault: newValue } : r)));
|
||||
} catch (err) {
|
||||
console.error('기본 역할 변경 실패:', err);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center h-32 text-fg-disabled text-body-2 font-korean">
|
||||
불러오는 중...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* 헤더 */}
|
||||
<div
|
||||
className="flex items-center justify-between px-4 py-2.5 border-b border-stroke"
|
||||
style={{ flexShrink: 0 }}
|
||||
>
|
||||
<div>
|
||||
<h1 className="text-body-2 font-bold text-fg font-korean">권한 관리</h1>
|
||||
<p className="text-caption text-fg-disabled mt-0.5 font-korean">
|
||||
역할별 리소스 × CRUD 권한 설정
|
||||
</p>
|
||||
</div>
|
||||
{/* 탭 전환 */}
|
||||
<div className="flex items-center gap-1 p-1 bg-bg-elevated rounded-lg border border-stroke">
|
||||
<button
|
||||
onClick={() => setActiveTab('role')}
|
||||
className={`px-4 py-1.5 text-caption font-semibold rounded-md transition-all font-korean ${
|
||||
activeTab === 'role'
|
||||
? 'bg-color-accent text-bg-0 shadow-[0_0_8px_rgba(6,182,212,0.25)]'
|
||||
: 'text-fg-disabled hover:text-fg-sub'
|
||||
}`}
|
||||
>
|
||||
그룹별
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveTab('user')}
|
||||
className={`px-4 py-1.5 text-caption font-semibold rounded-md transition-all font-korean ${
|
||||
activeTab === 'user'
|
||||
? 'bg-color-accent text-bg-0 shadow-[0_0_8px_rgba(6,182,212,0.25)]'
|
||||
: 'text-fg-disabled hover:text-fg-sub'
|
||||
}`}
|
||||
>
|
||||
사용자별
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{activeTab === 'role' ? (
|
||||
<RolePermTab
|
||||
roles={roles}
|
||||
permTree={permTree}
|
||||
rolePerms={rolePerms}
|
||||
setRolePerms={setRolePerms}
|
||||
selectedRoleSn={selectedRoleSn}
|
||||
setSelectedRoleSn={setSelectedRoleSn}
|
||||
dirty={dirty}
|
||||
saving={saving}
|
||||
saveError={saveError}
|
||||
handleSave={handleSave}
|
||||
handleToggleExpand={handleToggleExpand}
|
||||
handleTogglePerm={handleTogglePerm}
|
||||
expanded={expanded}
|
||||
flatNodes={flatNodes}
|
||||
editingRoleSn={editingRoleSn}
|
||||
editRoleName={editRoleName}
|
||||
setEditRoleName={setEditRoleName}
|
||||
handleStartEditName={handleStartEditName}
|
||||
handleSaveRoleName={handleSaveRoleName}
|
||||
setEditingRoleSn={setEditingRoleSn}
|
||||
toggleDefault={toggleDefault}
|
||||
handleDeleteRole={handleDeleteRole}
|
||||
showCreateForm={showCreateForm}
|
||||
setShowCreateForm={setShowCreateForm}
|
||||
setCreateError={setCreateError}
|
||||
newRoleCode={newRoleCode}
|
||||
setNewRoleCode={setNewRoleCode}
|
||||
newRoleName={newRoleName}
|
||||
setNewRoleName={setNewRoleName}
|
||||
newRoleDesc={newRoleDesc}
|
||||
setNewRoleDesc={setNewRoleDesc}
|
||||
creating={creating}
|
||||
createError={createError}
|
||||
handleCreateRole={handleCreateRole}
|
||||
/>
|
||||
) : (
|
||||
<UserPermTab roles={roles} permTree={permTree} rolePerms={rolePerms} />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PermissionsPanel;
|
||||
@ -1,57 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import { FrameworkTab } from './contents/FrameworkTab';
|
||||
import { TargetArchTab } from './contents/TargetArchTab';
|
||||
import { InterfaceTab } from './contents/InterfaceTab';
|
||||
import { HeterogeneousTab } from './contents/HeterogeneousTab';
|
||||
import { CommonFeaturesTab } from './contents/CommonFeaturesTab';
|
||||
|
||||
type TabId = 'framework' | 'target' | 'interface' | 'heterogeneous' | 'common-features';
|
||||
|
||||
const TABS: { id: TabId; label: string }[] = [
|
||||
{ id: 'framework', label: '표준 프레임워크' },
|
||||
{ id: 'target', label: '목표시스템 아키텍쳐' },
|
||||
{ id: 'interface', label: '시스템 인터페이스 연계' },
|
||||
{ id: 'heterogeneous', label: '이기종시스템연계' },
|
||||
{ id: 'common-features', label: '공통기능' },
|
||||
];
|
||||
|
||||
// ─── 기술 스택 테이블 데이터 ──────────────────────────────────────────────────────
|
||||
|
||||
export default function SystemArchPanel() {
|
||||
const [activeTab, setActiveTab] = useState<TabId>('framework');
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full overflow-hidden">
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between px-5 py-3 border-b border-stroke shrink-0">
|
||||
<h2 className="text-body-2 font-semibold text-t1">시스템구조</h2>
|
||||
</div>
|
||||
|
||||
{/* 탭 버튼 */}
|
||||
<div className="flex gap-1.5 px-5 py-2.5 border-b border-stroke shrink-0 bg-bg-base">
|
||||
{TABS.map((tab) => (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => setActiveTab(tab.id)}
|
||||
className={`px-3 py-1.5 text-caption font-medium rounded transition-colors ${
|
||||
activeTab === tab.id
|
||||
? 'bg-color-accent text-white'
|
||||
: 'bg-bg-elevated text-t2 hover:bg-bg-card'
|
||||
}`}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 탭 콘텐츠 */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{activeTab === 'framework' && <FrameworkTab />}
|
||||
{activeTab === 'target' && <TargetArchTab />}
|
||||
{activeTab === 'interface' && <InterfaceTab />}
|
||||
{activeTab === 'heterogeneous' && <HeterogeneousTab />}
|
||||
{activeTab === 'common-features' && <CommonFeaturesTab />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,563 +0,0 @@
|
||||
import { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import {
|
||||
fetchUsers,
|
||||
fetchRoles,
|
||||
fetchOrgs,
|
||||
updateUserApi,
|
||||
approveUserApi,
|
||||
rejectUserApi,
|
||||
assignRolesApi,
|
||||
type UserListItem,
|
||||
type RoleWithPermissions,
|
||||
type OrgItem,
|
||||
} from '@common/services/authApi';
|
||||
import { getRoleColor, statusLabels } from './adminConstants';
|
||||
import { RegisterModal } from './contents/RegisterModal';
|
||||
import { UserDetailModal } from './contents/UserDetailModal';
|
||||
/* eslint-disable react-refresh/only-export-components */
|
||||
|
||||
const PAGE_SIZE = 15;
|
||||
|
||||
// ─── 포맷 헬퍼 ─────────────────────────────────────────────────
|
||||
export function formatDate(dateStr: string | null) {
|
||||
if (!dateStr) return '-';
|
||||
return new Date(dateStr).toLocaleString('ko-KR', {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function UsersPanel() {
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [statusFilter, setStatusFilter] = useState<string>('');
|
||||
const [orgFilter, setOrgFilter] = useState<string>('');
|
||||
const [users, setUsers] = useState<UserListItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [allRoles, setAllRoles] = useState<RoleWithPermissions[]>([]);
|
||||
const [allOrgs, setAllOrgs] = useState<OrgItem[]>([]);
|
||||
const [roleEditUserId, setRoleEditUserId] = useState<string | null>(null);
|
||||
const [selectedRoleSns, setSelectedRoleSns] = useState<number[]>([]);
|
||||
const [showRegisterModal, setShowRegisterModal] = useState(false);
|
||||
const [detailUser, setDetailUser] = useState<UserListItem | null>(null);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const roleDropdownRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const loadUsers = useCallback(async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const data = await fetchUsers(searchTerm || undefined, statusFilter || undefined);
|
||||
setUsers(data);
|
||||
setCurrentPage(1);
|
||||
} catch (err) {
|
||||
console.error('사용자 목록 조회 실패:', err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [searchTerm, statusFilter]);
|
||||
|
||||
useEffect(() => {
|
||||
loadUsers();
|
||||
}, [loadUsers]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchRoles().then(setAllRoles).catch(console.error);
|
||||
fetchOrgs().then(setAllOrgs).catch(console.error);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (e: MouseEvent) => {
|
||||
if (roleDropdownRef.current && !roleDropdownRef.current.contains(e.target as Node)) {
|
||||
setRoleEditUserId(null);
|
||||
}
|
||||
};
|
||||
if (roleEditUserId) {
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
}
|
||||
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||
}, [roleEditUserId]);
|
||||
|
||||
// ─── 필터링 (org 클라이언트 사이드) ───────────────────────────
|
||||
const filteredUsers = orgFilter ? users.filter((u) => String(u.orgSn) === orgFilter) : users;
|
||||
|
||||
// ─── 페이지네이션 ──────────────────────────────────────────────
|
||||
const totalCount = filteredUsers.length;
|
||||
const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE));
|
||||
const pagedUsers = filteredUsers.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE);
|
||||
|
||||
// ─── 액션 핸들러 ──────────────────────────────────────────────
|
||||
const handleUnlock = async (userId: string) => {
|
||||
try {
|
||||
await updateUserApi(userId, { status: 'ACTIVE' });
|
||||
await loadUsers();
|
||||
} catch (err) {
|
||||
console.error('계정 잠금 해제 실패:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleApprove = async (userId: string) => {
|
||||
try {
|
||||
await approveUserApi(userId);
|
||||
await loadUsers();
|
||||
} catch (err) {
|
||||
console.error('사용자 승인 실패:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleReject = async (userId: string) => {
|
||||
try {
|
||||
await rejectUserApi(userId);
|
||||
await loadUsers();
|
||||
} catch (err) {
|
||||
console.error('사용자 거절 실패:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDeactivate = async (userId: string) => {
|
||||
try {
|
||||
await updateUserApi(userId, { status: 'INACTIVE' });
|
||||
await loadUsers();
|
||||
} catch (err) {
|
||||
console.error('사용자 비활성화 실패:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleActivate = async (userId: string) => {
|
||||
try {
|
||||
await updateUserApi(userId, { status: 'ACTIVE' });
|
||||
await loadUsers();
|
||||
} catch (err) {
|
||||
console.error('사용자 활성화 실패:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleOpenRoleEdit = (user: UserListItem) => {
|
||||
setRoleEditUserId(user.id);
|
||||
setSelectedRoleSns(user.roleSns || []);
|
||||
};
|
||||
|
||||
const toggleRoleSelection = (roleSn: number) => {
|
||||
setSelectedRoleSns((prev) =>
|
||||
prev.includes(roleSn) ? prev.filter((s) => s !== roleSn) : [...prev, roleSn],
|
||||
);
|
||||
};
|
||||
|
||||
const handleSaveRoles = async (userId: string) => {
|
||||
try {
|
||||
await assignRolesApi(userId, selectedRoleSns);
|
||||
await loadUsers();
|
||||
setRoleEditUserId(null);
|
||||
} catch (err) {
|
||||
console.error('역할 할당 실패:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const pendingCount = users.filter((u) => u.status === 'PENDING').length;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col h-full">
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-stroke">
|
||||
<div className="flex items-center gap-3">
|
||||
<div>
|
||||
<h1 className="text-title-1 font-bold text-fg font-korean">사용자 관리</h1>
|
||||
<p className="text-caption text-fg-disabled mt-1 font-korean">
|
||||
총 {filteredUsers.length}명
|
||||
</p>
|
||||
</div>
|
||||
{pendingCount > 0 && (
|
||||
<span className="px-2.5 py-1 text-caption font-bold rounded-full bg-[rgba(234,179,8,0.15)] text-color-caution border border-[rgba(234,179,8,0.3)] animate-pulse font-korean">
|
||||
승인대기 {pendingCount}명
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
{/* 소속 필터 */}
|
||||
<select
|
||||
value={orgFilter}
|
||||
onChange={(e) => {
|
||||
setOrgFilter(e.target.value);
|
||||
setCurrentPage(1);
|
||||
}}
|
||||
className="px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
|
||||
>
|
||||
<option value="">전체 소속</option>
|
||||
{allOrgs.map((org) => (
|
||||
<option key={org.orgSn} value={String(org.orgSn)}>
|
||||
{org.orgAbbrNm || org.orgNm}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{/* 상태 필터 */}
|
||||
<select
|
||||
value={statusFilter}
|
||||
onChange={(e) => setStatusFilter(e.target.value)}
|
||||
className="px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
|
||||
>
|
||||
<option value="">전체 상태</option>
|
||||
<option value="PENDING">승인대기</option>
|
||||
<option value="ACTIVE">활성</option>
|
||||
<option value="LOCKED">잠김</option>
|
||||
<option value="INACTIVE">비활성</option>
|
||||
<option value="REJECTED">거절됨</option>
|
||||
</select>
|
||||
{/* 텍스트 검색 */}
|
||||
<input
|
||||
type="text"
|
||||
placeholder="이름, 계정 검색..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-56 px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
|
||||
/>
|
||||
<button
|
||||
onClick={() => setShowRegisterModal(true)}
|
||||
className="px-4 py-2 text-caption font-semibold rounded-md bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)] transition-all font-korean"
|
||||
>
|
||||
+ 사용자 등록
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 테이블 */}
|
||||
<div className="flex-1 overflow-auto">
|
||||
{loading ? (
|
||||
<div className="flex items-center justify-center h-32 text-fg-disabled text-body-2 font-korean">
|
||||
불러오는 중...
|
||||
</div>
|
||||
) : (
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b border-stroke bg-bg-surface">
|
||||
<th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-korean w-10">
|
||||
번호
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-mono">
|
||||
ID
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-korean">
|
||||
사용자명
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-korean">
|
||||
직급
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-korean">
|
||||
소속
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-korean">
|
||||
이메일
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-korean">
|
||||
역할
|
||||
</th>
|
||||
<th className="px-4 py-3 text-left text-caption font-semibold text-fg-disabled font-korean">
|
||||
승인상태
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-caption font-semibold text-fg-disabled font-korean">
|
||||
관리
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{pagedUsers.length === 0 ? (
|
||||
<tr>
|
||||
<td
|
||||
colSpan={9}
|
||||
className="px-6 py-10 text-center text-caption text-fg-disabled font-korean"
|
||||
>
|
||||
조회된 사용자가 없습니다.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
pagedUsers.map((user, idx) => {
|
||||
const statusInfo = statusLabels[user.status] || statusLabels.INACTIVE;
|
||||
const rowNum = (currentPage - 1) * PAGE_SIZE + idx + 1;
|
||||
return (
|
||||
<tr
|
||||
key={user.id}
|
||||
className="border-b border-stroke hover:bg-[rgba(6,182,212,0.04)] transition-colors"
|
||||
>
|
||||
{/* 번호 */}
|
||||
<td className="px-4 py-3 text-caption text-fg-disabled font-mono text-center">
|
||||
{rowNum}
|
||||
</td>
|
||||
|
||||
{/* ID(account) */}
|
||||
<td className="px-4 py-3 text-caption text-fg-sub font-mono">
|
||||
{user.account}
|
||||
</td>
|
||||
|
||||
{/* 사용자명 */}
|
||||
<td className="px-4 py-3">
|
||||
<button
|
||||
onClick={() => setDetailUser(user)}
|
||||
className="text-caption text-color-accent font-semibold font-korean hover:underline"
|
||||
>
|
||||
{user.name}
|
||||
</button>
|
||||
</td>
|
||||
|
||||
{/* 직급 */}
|
||||
<td className="px-4 py-3 text-caption text-fg-sub font-korean">
|
||||
{user.rank || '-'}
|
||||
</td>
|
||||
|
||||
{/* 소속 */}
|
||||
<td className="px-4 py-3 text-caption text-fg-sub font-korean">
|
||||
{user.orgAbbr || user.orgName || '-'}
|
||||
</td>
|
||||
|
||||
{/* 이메일 */}
|
||||
<td className="px-4 py-3 text-caption text-fg-disabled font-mono">
|
||||
{user.email || '-'}
|
||||
</td>
|
||||
|
||||
{/* 역할 (인라인 편집) */}
|
||||
<td className="px-4 py-3">
|
||||
<div className="relative">
|
||||
<div
|
||||
className="flex flex-wrap gap-1 cursor-pointer"
|
||||
onClick={() => handleOpenRoleEdit(user)}
|
||||
title="클릭하여 역할 변경"
|
||||
>
|
||||
{user.roles.length > 0 ? (
|
||||
user.roles.map((roleCode) => {
|
||||
const roleName =
|
||||
allRoles.find((r) => r.code === roleCode)?.name || roleCode;
|
||||
return (
|
||||
<span
|
||||
key={roleCode}
|
||||
className="px-2 py-0.5 text-caption font-semibold rounded-md font-korean text-fg-sub bg-bg-elevated border border-stroke-light"
|
||||
>
|
||||
{roleName}
|
||||
</span>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<span className="text-caption text-fg-disabled font-korean">
|
||||
역할 없음
|
||||
</span>
|
||||
)}
|
||||
<span className="text-caption text-fg-disabled ml-0.5">
|
||||
<svg
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.5"
|
||||
>
|
||||
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
|
||||
<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
{roleEditUserId === user.id && (
|
||||
<div
|
||||
ref={roleDropdownRef}
|
||||
className="absolute z-20 top-full left-0 mt-1 p-2 bg-bg-surface border border-stroke rounded-lg shadow-lg min-w-[200px]"
|
||||
>
|
||||
<div className="text-caption text-fg-disabled font-korean font-semibold mb-1.5 px-1">
|
||||
역할 선택
|
||||
</div>
|
||||
{allRoles.map((role, roleIdx) => {
|
||||
const color = getRoleColor(role.code, roleIdx);
|
||||
return (
|
||||
<label
|
||||
key={role.sn}
|
||||
className="flex items-center gap-2 px-2 py-1.5 hover:bg-[rgba(6,182,212,0.08)] rounded cursor-pointer"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedRoleSns.includes(role.sn)}
|
||||
onChange={() => toggleRoleSelection(role.sn)}
|
||||
style={{ accentColor: color }}
|
||||
/>
|
||||
<span className="text-caption font-korean" style={{ color }}>
|
||||
{role.name}
|
||||
</span>
|
||||
<span className="text-caption text-fg-disabled font-mono">
|
||||
{role.code}
|
||||
</span>
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
<div className="flex justify-end gap-2 mt-2 pt-2 border-t border-stroke">
|
||||
<button
|
||||
onClick={() => setRoleEditUserId(null)}
|
||||
className="px-3 py-1 text-caption text-fg-disabled border border-stroke rounded hover:bg-bg-surface-hover font-korean"
|
||||
>
|
||||
취소
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleSaveRoles(user.id)}
|
||||
disabled={selectedRoleSns.length === 0}
|
||||
className="px-3 py-1 text-caption font-semibold rounded bg-color-accent text-bg-0 hover:shadow-[0_0_8px_rgba(6,182,212,0.3)] disabled:opacity-50 font-korean"
|
||||
>
|
||||
저장
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* 승인상태 */}
|
||||
<td className="px-4 py-3">
|
||||
<span
|
||||
className={`inline-flex items-center gap-1.5 text-caption font-semibold font-korean ${statusInfo.color}`}
|
||||
>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${statusInfo.dot}`} />
|
||||
{statusInfo.label}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
{/* 관리 */}
|
||||
<td className="px-4 py-3 text-right">
|
||||
<div className="flex items-center justify-end gap-2">
|
||||
{user.status === 'PENDING' && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => handleApprove(user.id)}
|
||||
className="px-2 py-1 text-caption font-semibold text-color-success border border-color-success rounded hover:bg-[rgba(34,197,94,0.12)] transition-all font-korean"
|
||||
>
|
||||
승인
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleReject(user.id)}
|
||||
className="px-2 py-1 text-caption font-semibold text-color-danger border border-color-danger rounded hover:bg-[rgba(239,68,68,0.12)] transition-all font-korean"
|
||||
>
|
||||
거절
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
{user.status === 'LOCKED' && (
|
||||
<button
|
||||
onClick={() => handleUnlock(user.id)}
|
||||
className="px-2 py-1 text-caption font-semibold text-color-caution border border-color-caution rounded hover:bg-[rgba(234,179,8,0.12)] transition-all font-korean"
|
||||
>
|
||||
잠금해제
|
||||
</button>
|
||||
)}
|
||||
{user.status === 'ACTIVE' && (
|
||||
<button
|
||||
onClick={() => handleDeactivate(user.id)}
|
||||
className="px-2 py-1 text-caption font-semibold text-fg-disabled border border-stroke rounded hover:bg-[rgba(6,182,212,0.08)] transition-all font-korean"
|
||||
>
|
||||
비활성화
|
||||
</button>
|
||||
)}
|
||||
{(user.status === 'INACTIVE' || user.status === 'REJECTED') && (
|
||||
<button
|
||||
onClick={() => handleActivate(user.id)}
|
||||
className="px-2 py-1 text-caption font-semibold text-color-success border border-color-success rounded hover:bg-[rgba(34,197,94,0.12)] transition-all font-korean"
|
||||
>
|
||||
활성화
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 페이지네이션 */}
|
||||
{!loading && totalPages > 1 && (
|
||||
<div className="flex items-center justify-between px-6 py-3 border-t border-stroke bg-bg-surface">
|
||||
<span className="text-label-2 text-fg-disabled font-korean">
|
||||
{(currentPage - 1) * PAGE_SIZE + 1}–{Math.min(currentPage * PAGE_SIZE, totalCount)} /{' '}
|
||||
{totalCount}명
|
||||
</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
|
||||
disabled={currentPage === 1}
|
||||
className="px-2.5 py-1 text-label-2 border border-stroke text-fg-disabled rounded hover:bg-[rgba(6,182,212,0.08)] disabled:opacity-40 transition-all font-korean"
|
||||
>
|
||||
이전
|
||||
</button>
|
||||
{Array.from({ length: totalPages }, (_, i) => i + 1)
|
||||
.filter((p) => p === 1 || p === totalPages || Math.abs(p - currentPage) <= 2)
|
||||
.reduce<(number | '...')[]>((acc, p, i, arr) => {
|
||||
if (
|
||||
i > 0 &&
|
||||
typeof arr[i - 1] === 'number' &&
|
||||
(p as number) - (arr[i - 1] as number) > 1
|
||||
) {
|
||||
acc.push('...');
|
||||
}
|
||||
acc.push(p);
|
||||
return acc;
|
||||
}, [])
|
||||
.map((item, i) =>
|
||||
item === '...' ? (
|
||||
<span key={`ellipsis-${i}`} className="px-2 text-label-2 text-fg-disabled">
|
||||
…
|
||||
</span>
|
||||
) : (
|
||||
<button
|
||||
key={item}
|
||||
onClick={() => setCurrentPage(item as number)}
|
||||
className="px-2.5 py-1 text-label-2 border rounded transition-all font-mono"
|
||||
style={
|
||||
currentPage === item
|
||||
? {
|
||||
borderColor: 'var(--color-accent)',
|
||||
color: 'var(--color-accent)',
|
||||
background: 'rgba(6,182,212,0.1)',
|
||||
}
|
||||
: { borderColor: 'var(--border)', color: 'var(--fg-disabled)' }
|
||||
}
|
||||
>
|
||||
{item}
|
||||
</button>
|
||||
),
|
||||
)}
|
||||
<button
|
||||
onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
|
||||
disabled={currentPage === totalPages}
|
||||
className="px-2.5 py-1 text-label-2 border border-stroke text-fg-disabled rounded hover:bg-[rgba(6,182,212,0.08)] disabled:opacity-40 transition-all font-korean"
|
||||
>
|
||||
다음
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 사용자 등록 모달 */}
|
||||
{showRegisterModal && (
|
||||
<RegisterModal
|
||||
allRoles={allRoles}
|
||||
allOrgs={allOrgs}
|
||||
onClose={() => setShowRegisterModal(false)}
|
||||
onSuccess={loadUsers}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 사용자 상세/수정 모달 */}
|
||||
{detailUser && (
|
||||
<UserDetailModal
|
||||
user={detailUser}
|
||||
allRoles={allRoles}
|
||||
allOrgs={allOrgs}
|
||||
onClose={() => setDetailUser(null)}
|
||||
onUpdated={() => {
|
||||
loadUsers();
|
||||
// 최신 정보로 모달 갱신을 위해 닫지 않음
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default UsersPanel;
|
||||
@ -1,212 +0,0 @@
|
||||
import { useState } from 'react';
|
||||
import type { AuditLogEntry, DeidentifyTask } from '../DeidentifyPanel';
|
||||
import { MOCK_AUDIT_LOGS } from '../DeidentifyPanel';
|
||||
|
||||
function getAuditResultClass(type: AuditLogEntry['resultType']): string {
|
||||
switch (type) {
|
||||
case '성공':
|
||||
return 'text-emerald-400 bg-emerald-500/10';
|
||||
case '진행중':
|
||||
return 'text-cyan-400 bg-cyan-500/10';
|
||||
case '실패':
|
||||
return 'text-red-400 bg-red-500/10';
|
||||
case '거부':
|
||||
return 'text-yellow-400 bg-yellow-500/10';
|
||||
}
|
||||
}
|
||||
|
||||
interface AuditLogModalProps {
|
||||
task: DeidentifyTask;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function AuditLogModal({ task, onClose }: AuditLogModalProps) {
|
||||
const logs = MOCK_AUDIT_LOGS[task.id] ?? [];
|
||||
const [selectedLog, setSelectedLog] = useState<AuditLogEntry | null>(null);
|
||||
const [filterOperator, setFilterOperator] = useState('모두');
|
||||
const [startDate, setStartDate] = useState('2026-04-01');
|
||||
const [endDate, setEndDate] = useState('2026-04-11');
|
||||
|
||||
const operators = ['모두', ...Array.from(new Set(logs.map((l) => l.operator)))];
|
||||
const filteredLogs = logs.filter((l) => {
|
||||
if (filterOperator !== '모두' && l.operator !== filterOperator) return false;
|
||||
return true;
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60">
|
||||
<div className="bg-bg-card border border-stroke rounded-lg shadow-2xl w-full max-w-5xl max-h-[85vh] flex flex-col">
|
||||
{/* 헤더 */}
|
||||
<div className="flex items-center justify-between px-5 py-3 border-b border-stroke shrink-0">
|
||||
<h3 className="text-body-2 font-semibold text-t1">감시 감독 (감사로그) — {task.name}</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-t3 hover:text-t1 transition-colors text-lg leading-none"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 필터 바 */}
|
||||
<div className="flex items-center gap-3 px-5 py-2.5 border-b border-stroke shrink-0 bg-bg-base">
|
||||
<span className="text-caption text-t3">기간:</span>
|
||||
<input
|
||||
type="date"
|
||||
value={startDate}
|
||||
onChange={(e) => setStartDate(e.target.value)}
|
||||
className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
|
||||
/>
|
||||
<span className="text-caption text-t3">~</span>
|
||||
<input
|
||||
type="date"
|
||||
value={endDate}
|
||||
onChange={(e) => setEndDate(e.target.value)}
|
||||
className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
|
||||
/>
|
||||
<span className="text-caption text-t3 ml-2">작업자:</span>
|
||||
<select
|
||||
value={filterOperator}
|
||||
onChange={(e) => setFilterOperator(e.target.value)}
|
||||
className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
|
||||
>
|
||||
{operators.map((op) => (
|
||||
<option key={op} value={op}>
|
||||
{op}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* 로그 테이블 */}
|
||||
<div className="flex-1 overflow-auto px-5 py-3">
|
||||
<table className="w-full text-caption border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
|
||||
{['시간', '작업자', '작업', '대상 데이터', '결과', '상세'].map((h) => (
|
||||
<th
|
||||
key={h}
|
||||
className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
|
||||
>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredLogs.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={6} className="px-3 py-8 text-center text-t3">
|
||||
감사로그가 없습니다.
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
filteredLogs.map((log) => (
|
||||
<tr
|
||||
key={log.id}
|
||||
className={`border-b border-stroke hover:bg-bg-surface/50 cursor-pointer ${selectedLog?.id === log.id ? 'bg-bg-surface/70' : ''}`}
|
||||
onClick={() => setSelectedLog(log)}
|
||||
>
|
||||
<td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">
|
||||
{log.time.split(' ')[1]}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-t1 whitespace-nowrap">{log.operator}</td>
|
||||
<td className="px-3 py-2 text-t2 whitespace-nowrap">{log.action}</td>
|
||||
<td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">
|
||||
{log.targetData}
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<span
|
||||
className={`inline-block px-2 py-0.5 rounded text-label-2 font-medium ${getAuditResultClass(log.resultType)}`}
|
||||
>
|
||||
{log.result}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSelectedLog(log);
|
||||
}}
|
||||
className="px-2 py-0.5 text-label-2 rounded bg-bg-elevated hover:bg-bg-card text-color-accent transition-colors whitespace-nowrap"
|
||||
>
|
||||
보기
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* 로그 상세 정보 */}
|
||||
{selectedLog && (
|
||||
<div className="px-5 py-3 border-t border-stroke shrink-0 bg-bg-base">
|
||||
<h4 className="text-caption font-semibold text-t1 mb-2">로그 상세 정보</h4>
|
||||
<div className="bg-bg-elevated border border-stroke rounded p-3 text-caption grid grid-cols-2 gap-x-6 gap-y-1.5">
|
||||
<div>
|
||||
<span className="text-t3">로그ID:</span>{' '}
|
||||
<span className="text-t1 font-mono">{selectedLog.id}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-t3">타임스탬프:</span>{' '}
|
||||
<span className="text-t1 font-mono">{selectedLog.time}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-t3">작업자:</span>{' '}
|
||||
<span className="text-t1">
|
||||
{selectedLog.operator} ({selectedLog.operatorId})
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-t3">작업 유형:</span>{' '}
|
||||
<span className="text-t1">{selectedLog.action}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-t3">대상:</span>{' '}
|
||||
<span className="text-t1">
|
||||
{selectedLog.targetData} ({selectedLog.detail.dataCount.toLocaleString()}건)
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-t3">적용 규칙:</span>{' '}
|
||||
<span className="text-t1">{selectedLog.detail.rulesApplied}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-t3">결과:</span>{' '}
|
||||
<span className="text-t1">
|
||||
{selectedLog.result} (처리: {selectedLog.detail.processedCount.toLocaleString()},
|
||||
오류: {selectedLog.detail.errorCount})
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-t3">IP 주소:</span>{' '}
|
||||
<span className="text-t1 font-mono">{selectedLog.ip}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-t3">브라우저:</span>{' '}
|
||||
<span className="text-t1">{selectedLog.browser}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 하단 버튼 */}
|
||||
<div className="flex items-center justify-end gap-2 px-5 py-3 border-t border-stroke shrink-0">
|
||||
<button className="px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors">
|
||||
상세내용 다운로드 (암호화됨)
|
||||
</button>
|
||||
<button className="px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors">
|
||||
기간별 보고서 생성
|
||||
</button>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors"
|
||||
>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,765 +0,0 @@
|
||||
interface CommonFeatureItem {
|
||||
title: string;
|
||||
description: string;
|
||||
details: string[];
|
||||
}
|
||||
|
||||
const COMMON_FEATURES: CommonFeatureItem[] = [
|
||||
{
|
||||
title: '인증 시스템',
|
||||
description: 'JWT 기반 세션 인증 + Google OAuth 소셜 로그인',
|
||||
details: [
|
||||
'HttpOnly 쿠키(WING_SESSION) 기반 토큰 관리 — XSS 방어',
|
||||
'Access Token(15분) + Refresh Token(7일) 이중 토큰 구조',
|
||||
'Google OAuth 2.0 소셜 로그인 지원',
|
||||
'Zustand authStore 기반 프론트엔드 인증 상태 통합 관리',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'RBAC 2차원 권한',
|
||||
description: 'AUTH_PERM 기반 기능별·역할별 2차원 권한 엔진',
|
||||
details: [
|
||||
'OPER_CD (R: 조회, C: 생성, U: 수정, D: 삭제) 4단계 조작 권한',
|
||||
'역할(Role) × 기능(Feature) 매트릭스 기반 권한 매핑',
|
||||
'permResolver 엔진으로 백엔드·프론트엔드 동시 권한 검증',
|
||||
'메뉴 접근, 버튼 노출, API 호출 3중 권한 통제',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: 'API 통신 패턴',
|
||||
description: 'Axios 기반 공통 API 클라이언트 + 자동 인증·에러 처리',
|
||||
details: [
|
||||
'GET/POST만 사용 (PUT/DELETE/PATCH 금지 — 보안취약점 점검 가이드 준수)',
|
||||
'요청 인터셉터: 쿠키 자동 첨부 (withCredentials)',
|
||||
'응답 인터셉터: 401 시 자동 토큰 갱신, 실패 시 로그아웃',
|
||||
'TanStack Query 기반 서버 상태 캐싱 및 자동 재검증',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '상태 관리',
|
||||
description: 'Zustand(클라이언트) + TanStack Query(서버) 이중 상태 관리',
|
||||
details: [
|
||||
'Zustand: authStore(인증), menuStore(메뉴) 등 클라이언트 전역 상태',
|
||||
'TanStack Query: API 응답 캐싱, 자동 재요청, 낙관적 업데이트',
|
||||
'컴포넌트 로컬 상태: useState 활용',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '메뉴 시스템',
|
||||
description: 'DB 기반 동적 메뉴 + 권한 연동 자동 필터링',
|
||||
details: [
|
||||
'DB에서 메뉴 트리 구조를 동적으로 로드',
|
||||
'사용자 권한에 따라 메뉴 항목 자동 필터링 (접근 불가 메뉴 미노출)',
|
||||
'관리자 화면에서 메뉴 순서·표시 여부·아이콘 실시간 편집',
|
||||
'menuStore(Zustand)로 현재 활성 메뉴 상태 전역 관리',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '지도 엔진',
|
||||
description: 'MapLibre GL JS 5.x + deck.gl 9.x 기반 GIS 시각화',
|
||||
details: [
|
||||
'MapLibre GL JS: 오픈소스 벡터 타일 기반 지도 렌더링',
|
||||
'deck.gl: 대규모 공간 데이터(파티클, 히트맵, 궤적) 고성능 시각화',
|
||||
'PostGIS 공간 쿼리 → GeoJSON → deck.gl 레이어 파이프라인',
|
||||
'레이어 트리 UI로 사용자별 레이어 표시·숨김 제어',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '스타일링',
|
||||
description: 'Tailwind CSS @layer 아키텍처 + CSS 변수 디자인 시스템',
|
||||
details: [
|
||||
'@layer base → components → wing 3단계 CSS 계층 구조',
|
||||
'CSS 변수 기반 시맨틱 컬러 (bg-bg-base, text-t1, border-stroke 등)',
|
||||
'다크 모드 기본 적용 — CSS 변수 전환으로 테마 일괄 변경',
|
||||
'인라인 스타일 지양, Tailwind 유틸리티 클래스 우선',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '감사 로그',
|
||||
description: '사용자 행위 자동 기록 — 접속·조회·변경 이력 추적',
|
||||
details: [
|
||||
'로그인/로그아웃, 메뉴 접근, 데이터 변경 자동 기록',
|
||||
'App.tsx에서 탭 전환 시 감사 로그 자동 전송',
|
||||
'관리자 화면에서 사용자별·기간별 감사 로그 조회 가능',
|
||||
'IP 주소, User-Agent, 요청 경로 등 부가 정보 기록',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '보안',
|
||||
description: '입력 살균·CORS·CSP·Rate Limiting 다층 보안 정책',
|
||||
details: [
|
||||
'입력 살균(sanitize): XSS·SQL Injection 방어 미들웨어 적용',
|
||||
'Helmet: CSP, X-Frame-Options, HSTS 등 보안 헤더 자동 설정',
|
||||
'CORS: 허용 오리진 화이트리스트 제한',
|
||||
'Rate Limiting: API 요청 빈도 제한으로 DoS 방어',
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// ─── 방제대응 프로세스 데이터 ─────────────────────────────────────────────────────
|
||||
|
||||
interface ProcessStep {
|
||||
phase: string;
|
||||
description: string;
|
||||
modules: string[];
|
||||
}
|
||||
|
||||
const RESPONSE_PROCESS: ProcessStep[] = [
|
||||
{
|
||||
phase: '사고 접수',
|
||||
description: '해양오염 사고 신고 접수 및 초동 상황 등록',
|
||||
modules: ['사건/사고'],
|
||||
},
|
||||
{
|
||||
phase: '상황 파악',
|
||||
description: '사고 현장 기상·해상 조건 확인, 유출원·유출량 파악',
|
||||
modules: ['해양기상', '사건/사고'],
|
||||
},
|
||||
{
|
||||
phase: '확산 예측',
|
||||
description: '유출유/HNS 확산 시뮬레이션 및 역추적 분석 수행',
|
||||
modules: ['확산예측', 'HNS분석'],
|
||||
},
|
||||
{
|
||||
phase: '방제 계획',
|
||||
description: '오일붐 배치, 유처리제 살포 구역, 방제선 투입 계획 수립',
|
||||
modules: ['확산예측', '자산관리'],
|
||||
},
|
||||
{
|
||||
phase: '구조 작전',
|
||||
description: '인명 구조 시나리오 수립, 표류 예측 기반 수색 구역 결정',
|
||||
modules: ['구조시나리오'],
|
||||
},
|
||||
{
|
||||
phase: '항공 감시',
|
||||
description: '위성·드론 영상으로 유막 면적 모니터링 및 방제 효과 확인',
|
||||
modules: ['항공방제'],
|
||||
},
|
||||
{
|
||||
phase: '해안 조사',
|
||||
description: 'Pre-SCAT 해안 오염 조사, 피해 범위 기록',
|
||||
modules: ['SCAT조사'],
|
||||
},
|
||||
{
|
||||
phase: '상황 종료',
|
||||
description: '방제 완료 보고, 감사 이력 정리, 사후 분석',
|
||||
modules: ['사건/사고', '관리자'],
|
||||
},
|
||||
];
|
||||
|
||||
// ─── 시스템별 기능 유무 매트릭스 데이터 ────────────────────────────────────────────
|
||||
|
||||
const SYSTEM_MODULES = [
|
||||
'확산예측',
|
||||
'HNS분석',
|
||||
'구조시나리오',
|
||||
'항공방제',
|
||||
'해양기상',
|
||||
'사건/사고',
|
||||
'자산관리',
|
||||
'SCAT조사',
|
||||
'게시판',
|
||||
'관리자',
|
||||
] as const;
|
||||
|
||||
interface FeatureMatrixRow {
|
||||
feature: string;
|
||||
category: '공통기능' | '기본정보관리' | '업무기능';
|
||||
integrated: boolean;
|
||||
systems: Record<string, boolean>;
|
||||
}
|
||||
|
||||
const FEATURE_MATRIX: FeatureMatrixRow[] = [
|
||||
{
|
||||
feature: '사용자 인증 (JWT)',
|
||||
category: '공통기능',
|
||||
integrated: true,
|
||||
systems: {
|
||||
확산예측: true,
|
||||
HNS분석: true,
|
||||
구조시나리오: true,
|
||||
항공방제: true,
|
||||
해양기상: true,
|
||||
'사건/사고': true,
|
||||
자산관리: true,
|
||||
SCAT조사: true,
|
||||
게시판: true,
|
||||
관리자: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: 'RBAC 권한 제어',
|
||||
category: '공통기능',
|
||||
integrated: true,
|
||||
systems: {
|
||||
확산예측: true,
|
||||
HNS분석: true,
|
||||
구조시나리오: true,
|
||||
항공방제: true,
|
||||
해양기상: true,
|
||||
'사건/사고': true,
|
||||
자산관리: true,
|
||||
SCAT조사: true,
|
||||
게시판: true,
|
||||
관리자: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: '감사 로그',
|
||||
category: '공통기능',
|
||||
integrated: true,
|
||||
systems: {
|
||||
확산예측: true,
|
||||
HNS분석: true,
|
||||
구조시나리오: true,
|
||||
항공방제: true,
|
||||
해양기상: true,
|
||||
'사건/사고': true,
|
||||
자산관리: true,
|
||||
SCAT조사: true,
|
||||
게시판: true,
|
||||
관리자: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: 'API 통신 (Axios)',
|
||||
category: '공통기능',
|
||||
integrated: true,
|
||||
systems: {
|
||||
확산예측: true,
|
||||
HNS분석: true,
|
||||
구조시나리오: true,
|
||||
항공방제: true,
|
||||
해양기상: true,
|
||||
'사건/사고': true,
|
||||
자산관리: true,
|
||||
SCAT조사: true,
|
||||
게시판: true,
|
||||
관리자: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: '입력 살균/보안',
|
||||
category: '공통기능',
|
||||
integrated: true,
|
||||
systems: {
|
||||
확산예측: true,
|
||||
HNS분석: true,
|
||||
구조시나리오: true,
|
||||
항공방제: true,
|
||||
해양기상: true,
|
||||
'사건/사고': true,
|
||||
자산관리: true,
|
||||
SCAT조사: true,
|
||||
게시판: true,
|
||||
관리자: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: '사용자 관리',
|
||||
category: '기본정보관리',
|
||||
integrated: true,
|
||||
systems: {
|
||||
확산예측: false,
|
||||
HNS분석: false,
|
||||
구조시나리오: false,
|
||||
항공방제: false,
|
||||
해양기상: false,
|
||||
'사건/사고': false,
|
||||
자산관리: false,
|
||||
SCAT조사: false,
|
||||
게시판: false,
|
||||
관리자: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: '지도 엔진 (MapLibre)',
|
||||
category: '기본정보관리',
|
||||
integrated: true,
|
||||
systems: {
|
||||
확산예측: true,
|
||||
HNS분석: true,
|
||||
구조시나리오: true,
|
||||
항공방제: true,
|
||||
해양기상: true,
|
||||
'사건/사고': true,
|
||||
자산관리: false,
|
||||
SCAT조사: true,
|
||||
게시판: false,
|
||||
관리자: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: '레이어 관리',
|
||||
category: '기본정보관리',
|
||||
integrated: true,
|
||||
systems: {
|
||||
확산예측: true,
|
||||
HNS분석: true,
|
||||
구조시나리오: true,
|
||||
항공방제: true,
|
||||
해양기상: true,
|
||||
'사건/사고': true,
|
||||
자산관리: false,
|
||||
SCAT조사: true,
|
||||
게시판: false,
|
||||
관리자: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: '메뉴 관리',
|
||||
category: '기본정보관리',
|
||||
integrated: true,
|
||||
systems: {
|
||||
확산예측: false,
|
||||
HNS분석: false,
|
||||
구조시나리오: false,
|
||||
항공방제: false,
|
||||
해양기상: false,
|
||||
'사건/사고': false,
|
||||
자산관리: false,
|
||||
SCAT조사: false,
|
||||
게시판: false,
|
||||
관리자: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: '시스템 설정',
|
||||
category: '기본정보관리',
|
||||
integrated: true,
|
||||
systems: {
|
||||
확산예측: false,
|
||||
HNS분석: false,
|
||||
구조시나리오: false,
|
||||
항공방제: false,
|
||||
해양기상: false,
|
||||
'사건/사고': false,
|
||||
자산관리: false,
|
||||
SCAT조사: false,
|
||||
게시판: false,
|
||||
관리자: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: '확산 시뮬레이션',
|
||||
category: '업무기능',
|
||||
integrated: false,
|
||||
systems: {
|
||||
확산예측: true,
|
||||
HNS분석: false,
|
||||
구조시나리오: false,
|
||||
항공방제: false,
|
||||
해양기상: false,
|
||||
'사건/사고': false,
|
||||
자산관리: false,
|
||||
SCAT조사: false,
|
||||
게시판: false,
|
||||
관리자: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: 'HNS 대기확산',
|
||||
category: '업무기능',
|
||||
integrated: false,
|
||||
systems: {
|
||||
확산예측: false,
|
||||
HNS분석: true,
|
||||
구조시나리오: false,
|
||||
항공방제: false,
|
||||
해양기상: false,
|
||||
'사건/사고': false,
|
||||
자산관리: false,
|
||||
SCAT조사: false,
|
||||
게시판: false,
|
||||
관리자: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: '표류 예측',
|
||||
category: '업무기능',
|
||||
integrated: false,
|
||||
systems: {
|
||||
확산예측: false,
|
||||
HNS분석: false,
|
||||
구조시나리오: true,
|
||||
항공방제: false,
|
||||
해양기상: false,
|
||||
'사건/사고': false,
|
||||
자산관리: false,
|
||||
SCAT조사: false,
|
||||
게시판: false,
|
||||
관리자: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: '위성/드론 영상',
|
||||
category: '업무기능',
|
||||
integrated: false,
|
||||
systems: {
|
||||
확산예측: false,
|
||||
HNS분석: false,
|
||||
구조시나리오: false,
|
||||
항공방제: true,
|
||||
해양기상: false,
|
||||
'사건/사고': false,
|
||||
자산관리: false,
|
||||
SCAT조사: false,
|
||||
게시판: false,
|
||||
관리자: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: '기상/해상 정보',
|
||||
category: '업무기능',
|
||||
integrated: false,
|
||||
systems: {
|
||||
확산예측: true,
|
||||
HNS분석: true,
|
||||
구조시나리오: true,
|
||||
항공방제: false,
|
||||
해양기상: true,
|
||||
'사건/사고': false,
|
||||
자산관리: false,
|
||||
SCAT조사: false,
|
||||
게시판: false,
|
||||
관리자: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: '역추적 분석',
|
||||
category: '업무기능',
|
||||
integrated: false,
|
||||
systems: {
|
||||
확산예측: true,
|
||||
HNS분석: false,
|
||||
구조시나리오: false,
|
||||
항공방제: false,
|
||||
해양기상: false,
|
||||
'사건/사고': false,
|
||||
자산관리: false,
|
||||
SCAT조사: false,
|
||||
게시판: false,
|
||||
관리자: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: '사고 등록/이력',
|
||||
category: '업무기능',
|
||||
integrated: false,
|
||||
systems: {
|
||||
확산예측: false,
|
||||
HNS분석: false,
|
||||
구조시나리오: false,
|
||||
항공방제: false,
|
||||
해양기상: false,
|
||||
'사건/사고': true,
|
||||
자산관리: false,
|
||||
SCAT조사: false,
|
||||
게시판: false,
|
||||
관리자: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: '장비/선박 관리',
|
||||
category: '업무기능',
|
||||
integrated: false,
|
||||
systems: {
|
||||
확산예측: false,
|
||||
HNS분석: false,
|
||||
구조시나리오: false,
|
||||
항공방제: false,
|
||||
해양기상: false,
|
||||
'사건/사고': false,
|
||||
자산관리: true,
|
||||
SCAT조사: false,
|
||||
게시판: false,
|
||||
관리자: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: '해안 조사',
|
||||
category: '업무기능',
|
||||
integrated: false,
|
||||
systems: {
|
||||
확산예측: false,
|
||||
HNS분석: false,
|
||||
구조시나리오: false,
|
||||
항공방제: false,
|
||||
해양기상: false,
|
||||
'사건/사고': false,
|
||||
자산관리: false,
|
||||
SCAT조사: true,
|
||||
게시판: false,
|
||||
관리자: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: '게시판 CRUD',
|
||||
category: '업무기능',
|
||||
integrated: false,
|
||||
systems: {
|
||||
확산예측: false,
|
||||
HNS분석: false,
|
||||
구조시나리오: false,
|
||||
항공방제: false,
|
||||
해양기상: false,
|
||||
'사건/사고': false,
|
||||
자산관리: false,
|
||||
SCAT조사: false,
|
||||
게시판: true,
|
||||
관리자: false,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const CATEGORY_STYLES: Record<string, string> = {
|
||||
공통기능: 'bg-[rgba(6,182,212,0.2)] text-color-accent',
|
||||
기본정보관리: 'bg-[rgba(34,197,94,0.2)] text-color-success',
|
||||
업무기능: 'bg-bg-elevated text-t3',
|
||||
};
|
||||
|
||||
export function CommonFeaturesTab() {
|
||||
return (
|
||||
<div className="flex flex-col gap-6 p-5">
|
||||
{/* 1. 방제대응 프로세스 */}
|
||||
<section>
|
||||
<h3 className="text-body-2 font-semibold text-t1 mb-3">1. 방제대응 프로세스</h3>
|
||||
<p className="text-caption text-t2 leading-relaxed mb-4">
|
||||
해양오염 사고 발생 시 사고 접수부터 상황 종료까지의 단계별 대응 프로세스이며, 각 단계에서
|
||||
활용하는 시스템 모듈을 표시한다.
|
||||
</p>
|
||||
{/* 프로세스 흐름도 */}
|
||||
<div className="flex items-start gap-1 flex-wrap mb-4">
|
||||
{RESPONSE_PROCESS.map((step, idx) => (
|
||||
<div key={step.phase} className="flex items-start gap-1">
|
||||
<div className="bg-bg-elevated border border-stroke rounded px-3 py-2 text-center min-w-20">
|
||||
<p className="text-caption font-semibold text-t1 mb-1">{step.phase}</p>
|
||||
<div className="flex flex-col gap-0.5">
|
||||
{step.modules.map((mod) => (
|
||||
<span key={mod} className="text-[10px] text-color-accent">
|
||||
{mod}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{idx < RESPONSE_PROCESS.length - 1 && (
|
||||
<span className="text-t3 text-lg shrink-0 mt-2.5">→</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* 프로세스 상세 */}
|
||||
<div className="flex flex-col gap-2">
|
||||
{RESPONSE_PROCESS.map((step, idx) => (
|
||||
<div
|
||||
key={step.phase}
|
||||
className="bg-bg-card border border-stroke rounded p-3 flex items-start gap-3"
|
||||
>
|
||||
<span className="inline-flex items-center justify-center w-5 h-5 rounded bg-color-accent text-white text-caption font-semibold shrink-0 mt-0.5">
|
||||
{idx + 1}
|
||||
</span>
|
||||
<div className="flex-1">
|
||||
<p className="text-caption font-semibold text-t1 mb-0.5">{step.phase}</p>
|
||||
<p className="text-caption text-t2 leading-relaxed">{step.description}</p>
|
||||
</div>
|
||||
<div className="flex gap-1 shrink-0">
|
||||
{step.modules.map((mod) => (
|
||||
<span
|
||||
key={mod}
|
||||
className="px-1.5 py-0.5 text-[10px] font-medium rounded bg-[rgba(6,182,212,0.2)] text-color-accent"
|
||||
>
|
||||
{mod}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 2. 시스템별 기능 유무 매트릭스 */}
|
||||
<section>
|
||||
<h3 className="text-body-2 font-semibold text-t1 mb-3">2. 시스템별 기능 유무 매트릭스</h3>
|
||||
<p className="text-caption text-t2 leading-relaxed mb-4">
|
||||
각 시스템(업무 모듈)별 기능의 유무를 파악하여 공통기능, 기본정보 관리(사용자, 지도 등) 등
|
||||
통합할 수 있는 기능을 표시한다.{' '}
|
||||
<span className="text-color-accent font-medium">통합 대상</span> 기능은 공통 모듈로 일원화하여
|
||||
중복 개발을 방지한다.
|
||||
</p>
|
||||
<div className="overflow-auto">
|
||||
<table className="w-full text-caption border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-bg-elevated text-t3 tracking-wide">
|
||||
<th className="px-2 py-2 text-left font-medium border-b border-stroke whitespace-nowrap sticky left-0 bg-bg-elevated z-10">
|
||||
기능
|
||||
</th>
|
||||
<th className="px-2 py-2 text-center font-medium border-b border-stroke whitespace-nowrap">
|
||||
분류
|
||||
</th>
|
||||
<th className="px-2 py-2 text-center font-medium border-b border-stroke whitespace-nowrap">
|
||||
통합
|
||||
</th>
|
||||
{SYSTEM_MODULES.map((mod) => (
|
||||
<th
|
||||
key={mod}
|
||||
className="px-1.5 py-2 text-center font-medium border-b border-stroke whitespace-nowrap"
|
||||
>
|
||||
<span className="writing-mode-vertical text-[10px]">{mod}</span>
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{FEATURE_MATRIX.map((row) => (
|
||||
<tr key={row.feature} className="border-b border-stroke hover:bg-bg-surface/50">
|
||||
<td className="px-2 py-1.5 font-medium text-t1 whitespace-nowrap sticky left-0 bg-bg-base z-10">
|
||||
{row.feature}
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-center">
|
||||
<span
|
||||
className={`px-1.5 py-0.5 rounded text-[10px] font-medium ${CATEGORY_STYLES[row.category]}`}
|
||||
>
|
||||
{row.category}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-2 py-1.5 text-center">
|
||||
{row.integrated ? (
|
||||
<span className="text-color-accent font-semibold">통합</span>
|
||||
) : (
|
||||
<span className="text-t3">개별</span>
|
||||
)}
|
||||
</td>
|
||||
{SYSTEM_MODULES.map((mod) => (
|
||||
<td key={mod} className="px-1.5 py-1.5 text-center">
|
||||
{row.systems[mod] ? (
|
||||
<span className="text-color-success font-bold">O</span>
|
||||
) : (
|
||||
<span className="text-t3/30">-</span>
|
||||
)}
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{/* 범례 */}
|
||||
<div className="flex gap-4 mt-3">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-[rgba(6,182,212,0.2)] text-color-accent">
|
||||
공통기능
|
||||
</span>
|
||||
<span className="text-caption text-t3">전 모듈 공통 적용</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-[rgba(34,197,94,0.2)] text-color-success">
|
||||
기본정보관리
|
||||
</span>
|
||||
<span className="text-caption text-t3">사용자·지도·메뉴·설정 통합 관리</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-bg-elevated text-t3">
|
||||
업무기능
|
||||
</span>
|
||||
<span className="text-caption text-t3">모듈별 고유 기능</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 3. 공통기능 상세 */}
|
||||
<section>
|
||||
<h3 className="text-body-2 font-semibold text-t1 mb-3">3. 공통기능 상세</h3>
|
||||
<div className="flex flex-col gap-3">
|
||||
{COMMON_FEATURES.map((feature, idx) => (
|
||||
<div key={feature.title} className="bg-bg-card border border-stroke rounded p-3">
|
||||
<div className="flex items-center gap-2 mb-1.5">
|
||||
<span className="inline-flex items-center justify-center w-5 h-5 rounded bg-color-accent text-white text-caption font-semibold shrink-0">
|
||||
{idx + 1}
|
||||
</span>
|
||||
<p className="text-caption font-semibold text-t1">{feature.title}</p>
|
||||
</div>
|
||||
<p className="text-caption text-t2 leading-relaxed mb-2 pl-7">{feature.description}</p>
|
||||
<ul className="flex flex-col gap-1 pl-7">
|
||||
{feature.details.map((detail) => (
|
||||
<li key={detail} className="text-caption text-t3 leading-relaxed list-disc">
|
||||
{detail}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 4. 공통 모듈 구조 */}
|
||||
<section>
|
||||
<h3 className="text-body-2 font-semibold text-t1 mb-3">4. 공통 모듈 디렉토리 구조</h3>
|
||||
<div className="overflow-auto">
|
||||
<table className="w-full text-caption border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
|
||||
{['디렉토리', '역할', '주요 파일'].map((h) => (
|
||||
<th
|
||||
key={h}
|
||||
className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
|
||||
>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{[
|
||||
{
|
||||
dir: 'common/components/',
|
||||
role: '공통 UI 컴포넌트',
|
||||
files: 'auth/, layout/, map/, ui/, layer/',
|
||||
},
|
||||
{
|
||||
dir: 'common/hooks/',
|
||||
role: '공통 커스텀 훅',
|
||||
files: 'useLayers, useSubMenu, useFeatureTracking',
|
||||
},
|
||||
{
|
||||
dir: 'common/services/',
|
||||
role: 'API 통신 모듈',
|
||||
files: 'api.ts, authApi.ts, layerService.ts',
|
||||
},
|
||||
{
|
||||
dir: 'common/store/',
|
||||
role: '전역 상태 스토어',
|
||||
files: 'authStore.ts, menuStore.ts',
|
||||
},
|
||||
{
|
||||
dir: 'common/styles/',
|
||||
role: 'CSS @layer 스타일',
|
||||
files: 'base.css, components.css, wing.css',
|
||||
},
|
||||
{
|
||||
dir: 'common/types/',
|
||||
role: '공통 타입 정의',
|
||||
files: 'backtrack, hns, navigation 등',
|
||||
},
|
||||
{
|
||||
dir: 'common/utils/',
|
||||
role: '유틸리티 함수',
|
||||
files: 'coordinates, geo, sanitize, cn.ts',
|
||||
},
|
||||
{ dir: 'common/constants/', role: '상수 정의', files: 'featureIds.ts' },
|
||||
{ dir: 'common/data/', role: 'UI 데이터', files: 'layerData.ts (레이어 트리)' },
|
||||
].map((row) => (
|
||||
<tr key={row.dir} className="border-b border-stroke hover:bg-bg-surface/50">
|
||||
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap font-mono">
|
||||
{row.dir}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-t2">{row.role}</td>
|
||||
<td className="px-3 py-2 text-t3 font-mono">{row.files}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,171 +0,0 @@
|
||||
interface TechStackRow {
|
||||
category: string;
|
||||
tech: string;
|
||||
version: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const TECH_STACK: TechStackRow[] = [
|
||||
{ category: 'Frontend', tech: 'React', version: '19.x', description: '컴포넌트 기반 SPA' },
|
||||
{ category: 'Frontend', tech: 'TypeScript', version: '5.9', description: '정적 타입 시스템' },
|
||||
{ category: 'Frontend', tech: 'Vite', version: '7.x', description: '빌드 도구 (HMR)' },
|
||||
{ category: 'Frontend', tech: 'Tailwind CSS', version: '3.x', description: '유틸리티 기반 CSS' },
|
||||
{ category: 'Frontend', tech: 'MapLibre GL', version: '5.x', description: '오픈소스 GIS 엔진' },
|
||||
{ category: 'Frontend', tech: 'deck.gl', version: '9.x', description: '대규모 데이터 시각화' },
|
||||
{ category: 'Frontend', tech: 'Zustand', version: '-', description: '클라이언트 상태관리' },
|
||||
{ category: 'Frontend', tech: 'TanStack Query', version: '-', description: '서버 상태관리/캐싱' },
|
||||
{ category: 'Backend', tech: 'Express', version: '4.x', description: 'REST API 서버' },
|
||||
{ category: 'Backend', tech: 'Socket.IO', version: '-', description: '실시간 양방향 통신' },
|
||||
{ category: 'DB', tech: 'PostgreSQL', version: '16', description: '관계형 데이터베이스' },
|
||||
{ category: 'DB', tech: 'PostGIS', version: '-', description: '공간정보 확장' },
|
||||
{
|
||||
category: '인증',
|
||||
tech: 'JWT',
|
||||
version: '-',
|
||||
description: '토큰 기반 인증 (HttpOnly Cookie)',
|
||||
},
|
||||
{ category: '인증', tech: 'Google OAuth', version: '2.0', description: 'SSO 연동' },
|
||||
{ category: '보안', tech: 'Helmet', version: '-', description: 'HTTP 헤더 보안' },
|
||||
{ category: '보안', tech: 'Rate Limiting', version: '-', description: 'API 호출 제한' },
|
||||
{ category: 'CI/CD', tech: 'Gitea Actions', version: '-', description: '자동 빌드/배포' },
|
||||
];
|
||||
|
||||
// ─── 탭 모듈 데이터 ───────────────────────────────────────────────────────────────
|
||||
|
||||
export function FrameworkTab() {
|
||||
return (
|
||||
<div className="flex flex-col gap-6 p-5">
|
||||
{/* 1. 개발 프레임워크 구성 */}
|
||||
<section>
|
||||
<h3 className="text-body-2 font-semibold text-t1 mb-3">1. 개발 프레임워크 구성</h3>
|
||||
<div className="border border-stroke rounded overflow-hidden">
|
||||
{/* 프레젠테이션 계층 */}
|
||||
<div className="border-b border-stroke p-4 bg-bg-card">
|
||||
<p className="text-caption font-semibold text-t2 mb-1">프레젠테이션 계층</p>
|
||||
<p className="text-caption text-t3 mb-3">React 19 + TypeScript 5.9 + Tailwind CSS 3</p>
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{[
|
||||
{ name: 'MapLibre', sub: 'GL JS 5' },
|
||||
{ name: 'deck.gl', sub: '9.x' },
|
||||
{ name: 'Zustand', sub: '상태관리' },
|
||||
{ name: 'TanStack', sub: 'Query' },
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.name}
|
||||
className="bg-bg-elevated border border-stroke rounded p-2 text-center"
|
||||
>
|
||||
<p className="text-caption font-medium text-t1">{item.name}</p>
|
||||
<p className="text-caption text-t3 mt-0.5">{item.sub}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* 비즈니스 로직 계층 */}
|
||||
<div className="border-b border-stroke p-4 bg-bg-surface">
|
||||
<p className="text-caption font-semibold text-t2 mb-1">비즈니스 로직 계층</p>
|
||||
<p className="text-caption text-t3 mb-3">Express 4 + TypeScript</p>
|
||||
<div className="grid grid-cols-4 gap-2">
|
||||
{[
|
||||
{ name: 'JWT 인증', sub: 'OAuth2.0' },
|
||||
{ name: 'RBAC', sub: '권한엔진' },
|
||||
{ name: 'Socket.IO', sub: '실시간' },
|
||||
{ name: 'Helmet', sub: '보안' },
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.name}
|
||||
className="bg-bg-elevated border border-stroke rounded p-2 text-center"
|
||||
>
|
||||
<p className="text-caption font-medium text-t1">{item.name}</p>
|
||||
<p className="text-caption text-t3 mt-0.5">{item.sub}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* 데이터 접근 계층 */}
|
||||
<div className="p-4 bg-bg-card">
|
||||
<p className="text-caption font-semibold text-t2 mb-1">데이터 접근 계층</p>
|
||||
<p className="text-caption text-t3 mb-3">PostgreSQL 16 + PostGIS</p>
|
||||
<div className="grid grid-cols-3 gap-2 max-w-xs">
|
||||
{[
|
||||
{ name: 'wing DB', sub: '운영 DB' },
|
||||
{ name: 'wing_auth', sub: '인증 DB' },
|
||||
{ name: 'PostGIS', sub: '공간정보' },
|
||||
].map((item) => (
|
||||
<div
|
||||
key={item.name}
|
||||
className="bg-bg-elevated border border-stroke rounded p-2 text-center"
|
||||
>
|
||||
<p className="text-caption font-medium text-t1">{item.name}</p>
|
||||
<p className="text-caption text-t3 mt-0.5">{item.sub}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 2. 기술 스택 상세 */}
|
||||
<section>
|
||||
<h3 className="text-body-2 font-semibold text-t1 mb-3">2. 기술 스택 상세</h3>
|
||||
<div className="overflow-auto">
|
||||
<table className="w-full text-caption border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
|
||||
{['구분', '기술', '버전', '설명'].map((h) => (
|
||||
<th
|
||||
key={h}
|
||||
className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
|
||||
>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{TECH_STACK.map((row, idx) => (
|
||||
<tr key={idx} className="border-b border-stroke hover:bg-bg-surface/50">
|
||||
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">
|
||||
{row.category}
|
||||
</td>
|
||||
<td className="px-3 py-2 text-t1 whitespace-nowrap">{row.tech}</td>
|
||||
<td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.version}</td>
|
||||
<td className="px-3 py-2 text-t2">{row.description}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 3. 개발 표준 및 규칙 */}
|
||||
<section>
|
||||
<h3 className="text-body-2 font-semibold text-t1 mb-3">3. 개발 표준 및 규칙</h3>
|
||||
<div className="grid grid-cols-1 gap-3">
|
||||
{[
|
||||
{
|
||||
title: 'HTTP 정책',
|
||||
content: 'GET/POST만 사용 (PUT/DELETE/PATCH 금지) — 한국 보안취약점 점검 가이드 준수',
|
||||
},
|
||||
{
|
||||
title: '코드 표준',
|
||||
content: 'ESLint + Prettier 적용, TypeScript strict 모드 필수',
|
||||
},
|
||||
{
|
||||
title: '모듈 구조',
|
||||
content: '@common/ (공통 모듈) + @components/ (업무별 탭) Path Alias 기반 분리',
|
||||
},
|
||||
{
|
||||
title: '보안',
|
||||
content: '입력 살균(sanitize), XSS/SQL Injection 방지, CORS 정책, Rate Limiting',
|
||||
},
|
||||
].map((item) => (
|
||||
<div key={item.title} className="bg-bg-card border border-stroke rounded p-3">
|
||||
<p className="text-caption font-semibold text-t2 mb-1">{item.title}</p>
|
||||
<p className="text-caption text-t2 leading-relaxed">{item.content}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,367 +0,0 @@
|
||||
interface HeterogeneousSystemRow {
|
||||
system: string;
|
||||
lang: string;
|
||||
os: string;
|
||||
location: string;
|
||||
protocol: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const HETEROGENEOUS_SYSTEMS: HeterogeneousSystemRow[] = [
|
||||
{
|
||||
system: 'KOSPS',
|
||||
lang: 'Fortran',
|
||||
os: 'Linux',
|
||||
location: '광주',
|
||||
protocol: 'HTTPS (REST 래퍼)',
|
||||
description: '유출유 확산 예측 — Fortran DLL을 REST API로 래핑하여 연계',
|
||||
},
|
||||
{
|
||||
system: '충북대 HNS',
|
||||
lang: 'Python / C++',
|
||||
os: 'Linux',
|
||||
location: '충북대',
|
||||
protocol: 'HTTPS',
|
||||
description: 'HNS 대기확산 예측 — Python/C++ 모델을 REST API로 호출',
|
||||
},
|
||||
{
|
||||
system: '긴급구난',
|
||||
lang: 'Python',
|
||||
os: 'Linux',
|
||||
location: '해경 내부',
|
||||
protocol: '내부망 API',
|
||||
description: '구난 표류 분석 — Python 모델을 내부망 REST API로 연계',
|
||||
},
|
||||
{
|
||||
system: 'HYCOM',
|
||||
lang: 'Fortran / NetCDF',
|
||||
os: 'Linux HPC',
|
||||
location: '미 해군 공개',
|
||||
protocol: 'HTTPS / FTP',
|
||||
description: '전지구 해류·수온 예측 — NetCDF 파일 수신 후 ETL 전처리',
|
||||
},
|
||||
{
|
||||
system: '기상청',
|
||||
lang: '-',
|
||||
os: '-',
|
||||
location: '기상청 API Hub',
|
||||
protocol: 'HTTPS',
|
||||
description: '풍향·풍속·기온·강수 등 기상 데이터 REST API 수집',
|
||||
},
|
||||
{
|
||||
system: 'KHOA',
|
||||
lang: '-',
|
||||
os: '-',
|
||||
location: '해양조사원',
|
||||
protocol: 'HTTPS',
|
||||
description: '조위·해류·수온 등 해양관측 데이터 REST API 수집',
|
||||
},
|
||||
{
|
||||
system: '해경 KBP',
|
||||
lang: 'Java 전자정부',
|
||||
os: 'Linux',
|
||||
location: '해경 내부망',
|
||||
protocol: '내부망 API',
|
||||
description: '사용자·조직·직위 인사 데이터 배치 수집 (비식별화 적용)',
|
||||
},
|
||||
{
|
||||
system: 'AIS',
|
||||
lang: '-',
|
||||
os: '-',
|
||||
location: '해경 AIS 서버',
|
||||
protocol: 'Socket / API',
|
||||
description: '선박 위치·속도·방향 실시간 수신',
|
||||
},
|
||||
];
|
||||
|
||||
interface HeterogeneousStrategyCard {
|
||||
challenge: string;
|
||||
solution: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
interface IntegrationPlanItem {
|
||||
title: string;
|
||||
description: string;
|
||||
details?: string[];
|
||||
}
|
||||
|
||||
const INTEGRATION_PLANS: IntegrationPlanItem[] = [
|
||||
{
|
||||
title: '사용자 정보 연계',
|
||||
description:
|
||||
'해양경찰청의 인사관리플랫폼과 연계 또는 사용자 정보를 제공받아 구성할 수 있어야 함',
|
||||
},
|
||||
{
|
||||
title: '해양공간 데이터 연계',
|
||||
description:
|
||||
"해경 해양공간 데이터 구축사업(해양공간정보 활용체계 구축 및 빅데이터 관련 사업)의 '데이터통합저장소' 시스템과 연계하여 현장탐색 전자지도 자동표출 기술 등에 영상 및 사진자료를 연계하여 구축",
|
||||
},
|
||||
{
|
||||
title: 'DB 통합설계 기반 맞춤형 인터페이스',
|
||||
description:
|
||||
'플랫폼 변경 및 신규 통합설계 되는 데이터베이스(DB) 구조 설계를 기반으로 사용자 맞춤형 화면 인터페이스를 구현해야 함',
|
||||
details: [
|
||||
'DBMS는 분리되어 있는 시스템들을 통합설계를 통하여 공통, 분야별 등으로 설계하여야 함',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '유출유 확산예측 정확성 향상 (KOSPS 연계)',
|
||||
description:
|
||||
'유출유 확산예측 정확성 향상을 위해, 해양오염방제지원시스템(KOSPS)를 연계·탑재하여야 함',
|
||||
details: [
|
||||
'다양한 유출유 확산 예측 결과를 사용자가 한눈에 확인 가능하여야 함',
|
||||
'확산예측 기반으로 역추적, 최초 유출유 발생지점을 예측할 수 있어야 함',
|
||||
'그 밖에 유출유 확산예측 정확성 향상을 위한 대책을 마련하여야 함',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '기타 시스템 연계',
|
||||
description: '그 밖에 시스템 구축 중 효율적인 사고대응을 위한 타 시스템 연계할 수 있음',
|
||||
},
|
||||
];
|
||||
|
||||
const HETEROGENEOUS_STRATEGIES: HeterogeneousStrategyCard[] = [
|
||||
{
|
||||
challenge: '언어 이질성',
|
||||
solution: 'REST API 래퍼 계층',
|
||||
description:
|
||||
'Fortran, Python, C++, Java 등 각 언어로 작성된 모델을 REST API 래퍼로 감싸 언어·플랫폼 독립적인 표준 인터페이스 제공',
|
||||
},
|
||||
{
|
||||
challenge: '데이터 형식 차이',
|
||||
solution: 'ETL 전처리 파이프라인',
|
||||
description:
|
||||
'NetCDF, CSV, Binary, JSON 등 이기종 포맷을 ETL 파이프라인으로 표준 JSON/GeoJSON 형식으로 변환 후 DB 적재',
|
||||
},
|
||||
{
|
||||
challenge: '네트워크 분리',
|
||||
solution: '이중 네트워크 연계',
|
||||
description:
|
||||
'외부망(인터넷) 연계와 내부망(해경 내부) 연계를 분리 운영하여 보안 정책 준수 및 데이터 안전성 확보',
|
||||
},
|
||||
{
|
||||
challenge: '가용성·장애 대응',
|
||||
solution: '연계 모니터링 + 알림',
|
||||
description:
|
||||
'연계 상태를 실시간 모니터링하고 수신 지연·실패 발생 시 운영자에게 즉시 알림 발송하여 신속 대응',
|
||||
},
|
||||
{
|
||||
challenge: '인증·보안 차이',
|
||||
solution: 'API Gateway 패턴',
|
||||
description:
|
||||
'시스템별 상이한 인증 방식(API Key, JWT, IP 제한 등)을 API Gateway 계층에서 통합 관리하여 단일 보안 정책 적용',
|
||||
},
|
||||
{
|
||||
challenge: '프로토콜 차이',
|
||||
solution: '어댑터 패턴 적용',
|
||||
description:
|
||||
'HTTP REST, FTP, Socket, 배치 파일 등 다양한 프로토콜을 어댑터 패턴으로 추상화하여 표준 인터페이스로 통일',
|
||||
},
|
||||
];
|
||||
|
||||
const HETEROGENEOUS_FLOW_STEPS = [
|
||||
'원본 데이터',
|
||||
'수집 어댑터',
|
||||
'ETL 전처리',
|
||||
'표준 변환',
|
||||
'DB 적재',
|
||||
'API 제공',
|
||||
];
|
||||
|
||||
interface SecurityPolicyCard {
|
||||
title: string;
|
||||
items: string[];
|
||||
}
|
||||
|
||||
const HETEROGENEOUS_SECURITY: SecurityPolicyCard[] = [
|
||||
{
|
||||
title: '외부망 연계',
|
||||
items: [
|
||||
'TLS 1.2+ 암호화 통신',
|
||||
'API Key / OAuth 인증',
|
||||
'IP 화이트리스트 제한',
|
||||
'Rate Limiting 적용',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '내부망 연계',
|
||||
items: [
|
||||
'전용 내부망 구간 분리',
|
||||
'상호 인증서 검증',
|
||||
'비식별화 자동 처리',
|
||||
'접근 이력 감사로그',
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '데이터 보호',
|
||||
items: [
|
||||
'개인정보 수집 최소화',
|
||||
'ETL 단계 비식별화',
|
||||
'전송 구간 암호화',
|
||||
'저장 데이터 접근 제어',
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
// ─── 탭 4: 이기종시스템연계 ───────────────────────────────────────────────────────
|
||||
|
||||
export function HeterogeneousTab() {
|
||||
return (
|
||||
<div className="p-5 space-y-6">
|
||||
{/* 1. 이기종시스템 연계 개요 */}
|
||||
<section>
|
||||
<h3 className="text-body-2 font-semibold text-t1 mb-3">1. 이기종시스템 연계 개요</h3>
|
||||
<p className="text-caption text-t2 leading-relaxed mb-4">
|
||||
통합지원시스템은 Fortran, Python, C++, Java 등 다양한 언어와 플랫폼으로 구현된 이기종
|
||||
시스템과 연계한다. REST API 표준화, ETL 전처리, 어댑터 패턴을 통해 언어·플랫폼 독립적인
|
||||
연계 구조를 구현하며, 외부망·내부망 이중 네트워크 정책을 준수한다.
|
||||
</p>
|
||||
<div className="flex items-stretch gap-2">
|
||||
<div className="flex-1 bg-bg-elevated border border-stroke rounded p-3 text-center">
|
||||
<p className="text-caption font-semibold text-t2 mb-2">이기종 시스템</p>
|
||||
{['Fortran KOSPS', 'Python/C++ 충북대', 'Java 해경KBP', 'NetCDF HYCOM'].map((item) => (
|
||||
<p key={item} className="text-caption text-t3 leading-relaxed">
|
||||
{item}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center shrink-0 gap-0.5">
|
||||
<span className="text-t3 text-lg">→</span>
|
||||
<span className="text-t3 text-lg">←</span>
|
||||
</div>
|
||||
<div className="flex-1 bg-[rgba(6,182,212,0.1)] border border-stroke rounded p-3 text-center">
|
||||
<p className="text-caption font-semibold text-t2 mb-2">연계 어댑터 계층</p>
|
||||
{['REST API 래퍼', 'ETL 전처리', '프로토콜 변환', '인증 통합'].map((item) => (
|
||||
<p key={item} className="text-caption text-t3 leading-relaxed">
|
||||
{item}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex flex-col items-center justify-center shrink-0 gap-0.5">
|
||||
<span className="text-t3 text-lg">→</span>
|
||||
<span className="text-t3 text-lg">←</span>
|
||||
</div>
|
||||
<div className="flex-1 bg-bg-elevated border border-stroke rounded p-3 text-center">
|
||||
<p className="text-caption font-semibold text-t2 mb-2">통합지원시스템</p>
|
||||
{['Express REST API', 'PostgreSQL+PostGIS', 'React SPA', '표준 JSON'].map((item) => (
|
||||
<p key={item} className="text-caption text-t3 leading-relaxed">
|
||||
{item}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 2. 이기종 시스템 간의 연계 방안 */}
|
||||
<section>
|
||||
<h3 className="text-body-2 font-semibold text-t1 mb-3">2. 이기종 시스템 간의 연계 방안</h3>
|
||||
<div className="flex flex-col gap-2">
|
||||
{INTEGRATION_PLANS.map((item, idx) => (
|
||||
<div key={item.title} className="bg-bg-card border border-stroke rounded p-3">
|
||||
<p className="text-caption font-semibold text-t2 mb-1">
|
||||
{idx + 1}. {item.title}
|
||||
</p>
|
||||
<p className="text-caption text-t2 leading-relaxed">{item.description}</p>
|
||||
{item.details && (
|
||||
<ul className="mt-1.5 flex flex-col gap-1 pl-3">
|
||||
{item.details.map((detail) => (
|
||||
<li key={detail} className="text-caption text-t3 leading-relaxed list-disc">
|
||||
{detail}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 3. 연계 대상 이기종 시스템 목록 */}
|
||||
<section>
|
||||
<h3 className="text-body-2 font-semibold text-t1 mb-3">3. 연계 대상 이기종 시스템 목록</h3>
|
||||
<div className="overflow-auto">
|
||||
<table className="w-full text-caption border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
|
||||
{['시스템', '구현 언어', 'OS', '위치', '연계 프로토콜', '연계 설명'].map((h) => (
|
||||
<th
|
||||
key={h}
|
||||
className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
|
||||
>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{HETEROGENEOUS_SYSTEMS.map((row) => (
|
||||
<tr key={row.system} className="border-b border-stroke hover:bg-bg-surface/50">
|
||||
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.system}</td>
|
||||
<td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.lang}</td>
|
||||
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.os}</td>
|
||||
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.location}</td>
|
||||
<td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.protocol}</td>
|
||||
<td className="px-3 py-2 text-t2">{row.description}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 4. 이기종 연계 전략 */}
|
||||
<section>
|
||||
<h3 className="text-body-2 font-semibold text-t1 mb-3">4. 이기종 연계 전략</h3>
|
||||
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{HETEROGENEOUS_STRATEGIES.map((card) => (
|
||||
<div key={card.challenge} className="bg-bg-card border border-stroke rounded p-3">
|
||||
<div className="flex items-center gap-1.5 mb-1.5">
|
||||
<span className="text-caption font-semibold text-color-danger">{card.challenge}</span>
|
||||
<span className="text-t3 text-caption">→</span>
|
||||
<span className="text-caption font-semibold text-color-accent">{card.solution}</span>
|
||||
</div>
|
||||
<p className="text-caption text-t2 leading-relaxed">{card.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 5. 이기종 데이터 변환 흐름 */}
|
||||
<section>
|
||||
<h3 className="text-body-2 font-semibold text-t1 mb-3">5. 이기종 데이터 변환 흐름</h3>
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
{HETEROGENEOUS_FLOW_STEPS.map((step, idx) => (
|
||||
<div key={step} className="flex items-center gap-1">
|
||||
<div className="bg-bg-elevated border border-stroke rounded px-3 py-2 text-center min-w-16">
|
||||
<p className="text-caption font-medium text-t1">{step}</p>
|
||||
</div>
|
||||
{idx < HETEROGENEOUS_FLOW_STEPS.length - 1 && (
|
||||
<span className="text-t3 text-lg shrink-0">→</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 6. 이기종 연계 보안 정책 */}
|
||||
<section>
|
||||
<h3 className="text-body-2 font-semibold text-t1 mb-3">6. 이기종 연계 보안 정책</h3>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{HETEROGENEOUS_SECURITY.map((card) => (
|
||||
<div key={card.title} className="bg-bg-card border border-stroke rounded p-3">
|
||||
<p className="text-caption font-semibold text-t2 mb-2">{card.title}</p>
|
||||
<ul className="flex flex-col gap-1">
|
||||
{card.items.map((item) => (
|
||||
<li key={item} className="text-caption text-t2 leading-relaxed">
|
||||
· {item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,236 +0,0 @@
|
||||
interface InterfaceRow {
|
||||
system: string;
|
||||
method: string;
|
||||
data: string;
|
||||
cycle: string;
|
||||
protocol: string;
|
||||
}
|
||||
|
||||
const INTERFACES: InterfaceRow[] = [
|
||||
{
|
||||
system: 'KHOA (해양조사원)',
|
||||
method: 'REST API',
|
||||
data: '조위, 해류, 수온',
|
||||
cycle: '실시간/1시간',
|
||||
protocol: 'HTTPS',
|
||||
},
|
||||
{
|
||||
system: '기상청',
|
||||
method: 'REST API',
|
||||
data: '풍향/풍속, 기압, 기온, 강수',
|
||||
cycle: '3시간',
|
||||
protocol: 'HTTPS',
|
||||
},
|
||||
{
|
||||
system: 'HYCOM',
|
||||
method: '파일 수신',
|
||||
data: 'SST, 해류(U/V), SSH',
|
||||
cycle: '6시간',
|
||||
protocol: 'HTTPS/FTP',
|
||||
},
|
||||
{
|
||||
system: '해경 KBP (인사)',
|
||||
method: '배치 수집',
|
||||
data: '사용자, 부서, 직위, 조직',
|
||||
cycle: '1일 1회',
|
||||
protocol: '내부망 API',
|
||||
},
|
||||
{
|
||||
system: 'AIS 선박위치',
|
||||
method: '실시간 수집',
|
||||
data: '선박 위치, 속도, 방향',
|
||||
cycle: '실시간',
|
||||
protocol: 'Socket/API',
|
||||
},
|
||||
{
|
||||
system: '포세이돈 R&D',
|
||||
method: 'API 연계',
|
||||
data: '유출유 확산 예측 결과',
|
||||
cycle: '요청 시',
|
||||
protocol: 'HTTPS',
|
||||
},
|
||||
{
|
||||
system: 'KOSPS (광주)',
|
||||
method: 'DLL 호출',
|
||||
data: '유출유 확산 예측 결과',
|
||||
cycle: '요청 시',
|
||||
protocol: 'HTTPS (Fortran DLL)',
|
||||
},
|
||||
{
|
||||
system: '충북대 HNS',
|
||||
method: 'API 호출',
|
||||
data: 'HNS 대기확산 결과',
|
||||
cycle: '요청 시',
|
||||
protocol: 'HTTPS',
|
||||
},
|
||||
{
|
||||
system: '긴급구난 R&D',
|
||||
method: '내부 연계',
|
||||
data: '구난 분석 결과',
|
||||
cycle: '요청 시',
|
||||
protocol: '내부망 API',
|
||||
},
|
||||
];
|
||||
|
||||
// ─── 탭 1: 표준 프레임워크 ────────────────────────────────────────────────────────
|
||||
|
||||
export function InterfaceTab() {
|
||||
const dataFlowSteps = ['수집', '전처리', '저장', '분석/예측', '시각화', '의사결정지원'];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 p-5">
|
||||
{/* 1. 외부 시스템 연계 구성도 */}
|
||||
<section>
|
||||
<h3 className="text-body-2 font-semibold text-t1 mb-3">1. 외부 시스템 연계 구성도</h3>
|
||||
<div className="flex items-stretch gap-2">
|
||||
{/* 외부 시스템 */}
|
||||
<div className="flex-1 bg-bg-card border border-stroke rounded p-3 flex flex-col gap-1.5">
|
||||
<p className="text-caption font-semibold text-t2 mb-1 text-center">외부 시스템</p>
|
||||
{['KHOA API', '기상청 API', '해경 KBP', 'AIS 선박'].map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
className="bg-bg-elevated border border-stroke rounded px-2 py-1 text-center"
|
||||
>
|
||||
<p className="text-caption text-t2">{item}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{/* 화살표 */}
|
||||
<div className="flex flex-col items-center justify-center gap-1 shrink-0">
|
||||
<span className="text-t3 text-lg">→</span>
|
||||
<span className="text-t3 text-lg">←</span>
|
||||
</div>
|
||||
{/* 통합지원시스템 */}
|
||||
<div className="flex-[2] bg-bg-surface border-2 border-stroke rounded p-3 flex flex-col gap-2">
|
||||
<p className="text-caption font-semibold text-t1 text-center">
|
||||
해양환경 위기대응
|
||||
<br />
|
||||
통합지원시스템
|
||||
</p>
|
||||
<div className="border border-stroke rounded p-2 bg-bg-elevated">
|
||||
<p className="text-caption font-medium text-t2 mb-1 text-center">연계관리 모듈</p>
|
||||
<div className="flex flex-col gap-1">
|
||||
{['수집자료 관리', '연계 모니터링', '비식별화 조치'].map((item) => (
|
||||
<p key={item} className="text-caption text-t3 text-center">
|
||||
- {item}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* 화살표 */}
|
||||
<div className="flex flex-col items-center justify-center gap-1 shrink-0">
|
||||
<span className="text-t3 text-lg">←</span>
|
||||
<span className="text-t3 text-lg">→</span>
|
||||
</div>
|
||||
{/* R&D 시스템 */}
|
||||
<div className="flex-1 bg-bg-card border border-stroke rounded p-3 flex flex-col gap-1.5">
|
||||
<p className="text-caption font-semibold text-t2 mb-1 text-center">R&D 시스템</p>
|
||||
{['포세이돈', 'KOSPS', '충북대 HNS', '긴급구난'].map((item) => (
|
||||
<div
|
||||
key={item}
|
||||
className="bg-bg-elevated border border-stroke rounded px-2 py-1 text-center"
|
||||
>
|
||||
<p className="text-caption text-t2">{item}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 2. 연계 인터페이스 목록 */}
|
||||
<section>
|
||||
<h3 className="text-body-2 font-semibold text-t1 mb-3">2. 연계 인터페이스 목록</h3>
|
||||
<div className="overflow-auto">
|
||||
<table className="w-full text-caption border-collapse">
|
||||
<thead>
|
||||
<tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
|
||||
{['연계 시스템', '연계 방식', '데이터', '주기', '프로토콜'].map((h) => (
|
||||
<th
|
||||
key={h}
|
||||
className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
|
||||
>
|
||||
{h}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{INTERFACES.map((row) => (
|
||||
<tr key={row.system} className="border-b border-stroke hover:bg-bg-surface/50">
|
||||
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.system}</td>
|
||||
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.method}</td>
|
||||
<td className="px-3 py-2 text-t2">{row.data}</td>
|
||||
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.cycle}</td>
|
||||
<td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.protocol}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 3. 데이터 흐름도 */}
|
||||
<section>
|
||||
<h3 className="text-body-2 font-semibold text-t1 mb-3">3. 데이터 흐름도</h3>
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
{dataFlowSteps.map((step, idx) => (
|
||||
<div key={step} className="flex items-center gap-1">
|
||||
<div className="bg-bg-elevated border border-stroke rounded px-3 py-2 text-center min-w-16">
|
||||
<p className="text-caption font-medium text-t1">{step}</p>
|
||||
</div>
|
||||
{idx < dataFlowSteps.length - 1 && (
|
||||
<span className="text-t3 text-lg shrink-0">→</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{[
|
||||
{ step: '수집', desc: 'KHOA, 기상청, HYCOM, AIS 등 외부 원천 데이터 수신' },
|
||||
{ step: '전처리', desc: '포맷 변환, 좌표계 통일, 비식별화, 품질 검사' },
|
||||
{ step: '저장', desc: 'PostgreSQL 16 + PostGIS 공간정보 DB 적재' },
|
||||
{ step: '분석/예측', desc: 'R&D 모델 연계 (포세이돈, KOSPS, 충북대, 긴급구난)' },
|
||||
{ step: '시각화', desc: 'MapLibre GL + deck.gl 기반 지도 레이어 렌더링' },
|
||||
{ step: '의사결정지원', desc: '방제작전 시나리오, 구조분석, 경보 발령 지원' },
|
||||
].map((item) => (
|
||||
<div key={item.step} className="bg-bg-card border border-stroke rounded p-2.5">
|
||||
<p className="text-caption font-semibold text-t2 mb-1">{item.step}</p>
|
||||
<p className="text-caption text-t2 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 4. 연계 장애 대응 */}
|
||||
<section>
|
||||
<h3 className="text-body-2 font-semibold text-t1 mb-3">4. 연계 장애 대응</h3>
|
||||
<div className="flex flex-col gap-2">
|
||||
{[
|
||||
{
|
||||
title: '연계 모니터링',
|
||||
content: '관리자 > 연계관리 > 연계모니터링에서 실시간 연계 상태 확인',
|
||||
},
|
||||
{
|
||||
title: 'R&D 파이프라인 모니터링',
|
||||
content: '관리자 > 연계관리 > R&D과제에서 과제별 데이터 수신 이력 및 처리 현황 확인',
|
||||
},
|
||||
{
|
||||
title: '장애 알림',
|
||||
content: '데이터 수신 지연/실패 발생 시 알림 발생 — 운영자 즉시 인지 가능',
|
||||
},
|
||||
{
|
||||
title: '비식별화 조치',
|
||||
content: '개인정보 포함 데이터(해경 KBP 인사 등) 수집 시 자동 비식별화 처리 적용',
|
||||
},
|
||||
].map((item) => (
|
||||
<div key={item.title} className="bg-bg-card border border-stroke rounded p-3">
|
||||
<p className="text-caption font-semibold text-t2 mb-1">{item.title}</p>
|
||||
<p className="text-caption text-t2 leading-relaxed">{item.content}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,70 +0,0 @@
|
||||
import type { PermState } from '../PermissionsPanel';
|
||||
|
||||
interface PermCellProps {
|
||||
state: PermState;
|
||||
onToggle: () => void;
|
||||
label?: string;
|
||||
readOnly?: boolean;
|
||||
}
|
||||
|
||||
export function PermCell({ state, onToggle, label, readOnly = false }: PermCellProps) {
|
||||
const isDisabled = state === 'forced-denied' || readOnly;
|
||||
|
||||
const baseClasses =
|
||||
'w-5 h-5 rounded border text-caption font-bold transition-all flex items-center justify-center';
|
||||
|
||||
let classes: string;
|
||||
let icon: string;
|
||||
|
||||
switch (state) {
|
||||
case 'explicit-granted':
|
||||
classes = readOnly
|
||||
? `${baseClasses} bg-[rgba(6,182,212,0.2)] border-color-accent text-color-accent cursor-default`
|
||||
: `${baseClasses} bg-[rgba(6,182,212,0.2)] border-color-accent text-color-accent cursor-pointer hover:bg-[rgba(6,182,212,0.3)]`;
|
||||
icon = '✓';
|
||||
break;
|
||||
case 'inherited-granted':
|
||||
classes = readOnly
|
||||
? `${baseClasses} bg-[rgba(6,182,212,0.08)] border-[rgba(6,182,212,0.3)] text-[rgba(6,182,212,0.5)] cursor-default`
|
||||
: `${baseClasses} bg-[rgba(6,182,212,0.08)] border-[rgba(6,182,212,0.3)] text-[rgba(6,182,212,0.5)] cursor-pointer hover:border-color-accent`;
|
||||
icon = '✓';
|
||||
break;
|
||||
case 'explicit-denied':
|
||||
classes = readOnly
|
||||
? `${baseClasses} bg-[rgba(239,68,68,0.08)] border-[rgba(239,68,68,0.3)] text-color-danger cursor-default`
|
||||
: `${baseClasses} bg-[rgba(239,68,68,0.08)] border-[rgba(239,68,68,0.3)] text-color-danger cursor-pointer hover:border-color-danger`;
|
||||
icon = '—';
|
||||
break;
|
||||
case 'forced-denied':
|
||||
classes = `${baseClasses} bg-bg-elevated border-stroke text-fg-disabled opacity-40 cursor-not-allowed`;
|
||||
icon = '—';
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={isDisabled ? undefined : onToggle}
|
||||
disabled={isDisabled}
|
||||
className={classes}
|
||||
title={
|
||||
readOnly
|
||||
? state === 'explicit-granted'
|
||||
? `${label ?? ''} 허용`
|
||||
: state === 'inherited-granted'
|
||||
? `${label ?? ''} 상속 허용`
|
||||
: state === 'explicit-denied'
|
||||
? `${label ?? ''} 거부`
|
||||
: `${label ?? ''} 비활성`
|
||||
: state === 'explicit-granted'
|
||||
? `${label ?? ''} 명시적 허용 (클릭: 거부로 전환)`
|
||||
: state === 'inherited-granted'
|
||||
? `${label ?? ''} 부모 상속 허용 (클릭: 명시적 거부)`
|
||||
: state === 'explicit-denied'
|
||||
? `${label ?? ''} 명시적 거부 (클릭: 허용으로 전환)`
|
||||
: `${label ?? ''} 부모 거부로 비활성`
|
||||
}
|
||||
>
|
||||
{icon}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
불러오는 중...
Reference in New Issue
Block a user