gc/wing-ops
8
0
포크 0
코드 이슈 풀 리퀘스트 Actions 위키 활동

Merge remote-tracking branch 'origin/develop' into feature/hns-substance-db-expansion

소스 검색 
# Conflicts:
#	frontend/src/common/types/hns.ts
#	frontend/src/components/hns/components/HNSSubstanceView.tsx
This commit is contained in:
jeonghyo.k 2026-04-17 09:49:04 +09:00
커밋 9f4a578af3
341개의 변경된 파일과 37319개의 추가작업 그리고 37390개의 파일을 삭제
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.claude/settings.json
파일 보기

@ -84,5 +84,8 @@
]
}
]
},
"enabledPlugins": {
"frontend-design@claude-plugins-official": true
}
}
}

4
.claude/workflow-version.json
파일 보기

@ -1,7 +1,7 @@
{
"applied_global_version": "1.6.1",
"applied_date": "2026-04-14",
"applied_date": "2026-04-16",
"project_type": "react-ts",
"gitea_url": "https://gitea.gc-si.dev",
"custom_pre_commit": true
}
}

5
.gitignore vendored
파일 보기

@ -105,4 +105,7 @@ backend/scripts/hns-import/out/
# mcp
.mcp.json
.mcp.json
# python
.venv

31
CLAUDE.md
파일 보기

@ -2,6 +2,31 @@
해양 오염 사고 대응 방제 운영 지원 시스템. 유류/HNS 확산 예측, 역추적 분석, 구조 시나리오, 항공 방제, 자산 관리, SCAT 조사, 기상/해상 정보를 통합 제공한다.
## 🚨 절대 지침 (Absolute Rules)
### 1. 신규 기능 설계/구현 전 develop 최신화 필수
신규 기능 설계나 구현을 시작하기 전, **반드시** 다음 절차를 사용자에게 권유하고 확인을 받을 것:
1. `git fetch origin` 으로 원격 `develop` 최신 상태 확인
2. `origin/develop`이 로컬 `develop`보다 앞서 있으면 → 로컬 `develop`을 최신화 (`git pull --ff-only` 또는 `git checkout -B develop origin/develop`)
3. 최신화된 `develop`에서 신규 브랜치 생성 (`git checkout -b <type>/<name>`)
4. 해당 브랜치에서 설계·구현 진행
> **이유**: 구 버전 develop 기반으로 작업 시 머지 충돌·중복 구현·사라진 코드 복원 등 위험. 최신 base에서 시작해야 MR 리뷰·릴리즈 흐름이 안전.
### 2. 프론트엔드 구성 시 디자인 시스템 준수 필수
모든 프론트엔드 UI 구현은 **반드시** [docs/DESIGN-SYSTEM.md](docs/DESIGN-SYSTEM.md) 규칙을 준수할 것:
- 시맨틱 토큰(`--bg-base`, `--fg-default`, `--color-accent` 등) 사용 — 축약형/하드코딩 금지
- 폰트: `PretendardGOV` 단일 폰트 (4웨이트). `var(--font-korean)`, `var(--font-mono)` 경유
- 다크/라이트 테마 전환 지원 (`data-theme` 속성 기반)
- Tailwind 컬러 키는 CSS 변수 참조 (`bg.base`, `fg.DEFAULT`, `color.accent`)
- 폰트 크기 토큰: `text-caption/body-2/body-1/title-4...` — 인라인 `fontSize` 금지
> **이유**: 디자인 일관성·테마 전환·접근성(대비) 확보. 토큰 외 값은 리팩토링 비용을 증가시킴.
- **타입**: react-ts 모노레포 (frontend + backend)
- **Frontend**: React 19 + Vite 7 + TypeScript 5.9 + Tailwind CSS 3
- **Backend**: Express 4 + PostgreSQL (pg) + TypeScript
@ -54,7 +79,7 @@ wing/
│ │ ├── types/ backtrack, boomLine, hns, navigation
│ │ ├── utils/ coordinates, geo, sanitize, cn.ts
│ │ └── data/ layerData.ts (UI 레이어 트리)
│ └── tabs/ 탭 단위 패키지 (@tabs/ alias)
│ └── components/ 탭 단위 패키지 (@components/ alias)
│ ├── prediction/ 확산 예측 (OilSpillView, 역추적, 오일붐)
│ ├── hns/ HNS 분석 (시나리오, 물질 DB, 재계산)
│ ├── rescue/ 구조 시나리오
@ -96,7 +121,7 @@ wing/
### Path Alias
- `@common/*` -> `src/common/*` (공통 모듈)
- `@tabs/*` -> `src/tabs/*` (탭 패키지)
- `@components/*` -> `src/components/*` (탭 패키지)
## 팀 컨벤션
@ -107,6 +132,8 @@ wing/
- `naming.md` -- 네이밍 규칙
- `testing.md` -- 테스트 규칙
- `subagent-policy.md` -- 서브에이전트 활용 정책
- `design-system.md` -- AI 에이전트 UI 디자인 시스템 규칙 (영문, 실사용)
- `design-system-ko.md` -- 디자인 시스템 규칙 (한국어 참고용)
## 개발 문서 (docs/)

4
README.md
파일 보기

@ -77,7 +77,7 @@ cd backend && npm run db:seed # DB 초기 데이터
## 프로젝트 구조
Path Alias: `@common/*` -> `src/common/*`, `@tabs/*` -> `src/tabs/*`
Path Alias: `@common/*` -> `src/common/*`, `@components/*` -> `src/components/*`
```
wing/
@ -95,7 +95,7 @@ wing/
│ │ ├── types/ backtrack, boomLine, hns, navigation
│ │ ├── utils/ coordinates, geo, sanitize, cn.ts
│ │ └── data/ layerData.ts (UI 레이어 트리)
│ └── tabs/ 탭 단위 패키지 (@tabs/ alias)
│ └── tabs/ 탭 단위 패키지 (@components/ alias)
│ ├── prediction/ 확산 예측 (OilSpillView, 역추적, 오일붐)
│ ├── hns/ HNS 분석 (시나리오, 물질 DB, 재계산)
│ ├── rescue/ 구조 시나리오

115
backend/src/aerial/aerialRouter.ts
파일 보기

@ -1,6 +1,8 @@
import express from 'express';
import { mkdirSync, existsSync } from 'fs';
import multer from 'multer';
import path from 'path';
import { randomUUID } from 'crypto';
import {
listMedia,
createMedia,
@ -25,6 +27,29 @@ 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 라우트
// ============================================================
@ -73,6 +98,96 @@ 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 {

14
docs/COMMON-GUIDE.md
파일 보기

@ -375,10 +375,10 @@ PUT, DELETE, PATCH 등 기타 메서드는 사용하지 않는다.
### 탭별 API 서비스 패턴
각 탭은 `tabs/{탭명}/services/{탭명}Api.ts`에 API 함수를 정의한다.
각 탭은 `components/{탭명}/services/{탭명}Api.ts`에 API 함수를 정의한다.
```typescript
// frontend/src/tabs/board/services/boardApi.ts
// frontend/src/components/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/tabs/{탭}/store/newStore.ts (탭 전용)
// frontend/src/components/{탭}/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 '@tabs/board/services/boardApi';
import { fetchBoardPosts, createBoardPost } from '@components/board/services/boardApi';
// 조회 (캐싱 + 자동 리페치)
const { data, isLoading, error } = useQuery({
@ -1406,7 +1406,7 @@ frontend/src/
| +-- cn.ts className 조합 유틸리티
| +-- sanitize.ts XSS 방지/입력 살균
| +-- coordinates.ts 좌표 변환 유틸리티
+-- tabs/ 탭별 패키지 (11개)
+-- components/ 탭별 패키지 (11개, MPA 컴포넌트 구조)
| +-- {탭명}/
| +-- components/ 탭 뷰 컴포넌트
| +-- services/{탭명}Api.ts 탭별 API 서비스
@ -1491,13 +1491,13 @@ const result = await authPool.query('SELECT * FROM AUTH_USER WHERE USER_ID = $1'
### 파일 위치
```
frontend/src/tabs/{탭명}/services/{탭명}Api.ts
frontend/src/components/{탭명}/services/{탭명}Api.ts
```
### 작성 패턴
```typescript
// frontend/src/tabs/{탭명}/services/{탭명}Api.ts
// frontend/src/components/{탭명}/services/{탭명}Api.ts
import { api } from '@common/services/api';
// ============================================================

8
docs/CRUD-API-GUIDE.md
파일 보기

@ -21,7 +21,7 @@ DB 설계부터 백엔드 구현, 프론트엔드 연동까지 End-to-End 패턴
```
[Frontend] [Backend] [Database]
tabs/{탭}/services/{tab}Api.ts src/{domain}/{domain}Router.ts PostgreSQL 16
components/{탭}/services/{tab}Api.ts src/{domain}/{domain}Router.ts PostgreSQL 16
Axios (withCredentials: true) requireAuth -> requirePermission
--HTTP--> src/{domain}/{domain}Service.ts wingPool / authPool
wingPool.query(SQL, params) --SQL-->
@ -736,13 +736,13 @@ ON CONFLICT DO NOTHING;
### 파일 위치
```
frontend/src/tabs/{탭명}/services/{tabName}Api.ts
frontend/src/components/{탭명}/services/{tabName}Api.ts
```
### 기본 구조
```ts
// frontend/src/tabs/{탭명}/services/{tabName}Api.ts
// frontend/src/components/{탭명}/services/{tabName}Api.ts
import { api } from '@common/services/api';
@ -1376,7 +1376,7 @@ export default router;
### 4단계: 프론트엔드 API 서비스
```ts
// frontend/src/tabs/assets/services/equipmentApi.ts
// frontend/src/components/assets/services/equipmentApi.ts
import { api } from '@common/services/api';

22
docs/DEVELOPMENT-GUIDE.md
파일 보기

@ -163,11 +163,11 @@ Frontend에서 두 가지 경로 별칭을 사용한다:
| Alias | 실제 경로 | 용도 |
|-------|----------|------|
| `@common/*` | `src/common/*` | 공통 모듈 (컴포넌트, 훅, 서비스, 스토어) |
| `@tabs/*` | `src/tabs/*` | 탭별 패키지 (11개 탭) |
| `@components/*` | `src/components/*` | 탭별 패키지 (11개 탭) |
```tsx
import { useAuth } from '@common/hooks/useAuth';
import OilSpillView from '@tabs/prediction/components/OilSpillView';
import OilSpillView from '@components/prediction/components/OilSpillView';
```
---
@ -242,7 +242,7 @@ frontend/src/
│ ├── store/ authStore (Zustand), menuStore
│ ├── types/ backtrack, boomLine, hns, navigation
│ └── utils/ coordinates, geo, sanitize
└── tabs/ 탭 단위 패키지 (11개)
└── components/ 탭 단위 패키지 (11개, MPA 컴포넌트 구조)
├── prediction/ 확산 예측
├── hns/ HNS 분석
├── rescue/ 구조 시나리오
@ -259,7 +259,7 @@ frontend/src/
**각 탭 내부 구조 패턴:**
```
tabs/{탭명}/
components/{탭명}/
├── components/ UI 컴포넌트
│ ├── {Tab}View.tsx 메인 뷰 (App.tsx에서 라우팅)
│ ├── {Tab}LeftPanel.tsx
@ -495,7 +495,7 @@ pre-commit: [backend] 타입 체크 성공
git status
# 스테이징 (파일 지정)
git add frontend/src/tabs/incidents/components/IncidentDetailView.tsx
git add frontend/src/components/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/tabs/incidents/components/IncidentDetailView.tsx` (신규)
- `frontend/src/components/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/tabs/incidents/services/incidentsApi.ts` | API 호출 함수 |
| `frontend/src/tabs/incidents/components/IncidentDetailView.tsx` | 상세 뷰 컴포넌트 |
| `frontend/src/components/incidents/services/incidentsApi.ts` | API 호출 함수 |
| `frontend/src/components/incidents/components/IncidentDetailView.tsx` | 상세 뷰 컴포넌트 |
#### Step 2. 브랜치 생성
@ -797,7 +797,7 @@ router.get('/:id', requireAuth, async (req, res) => {
**Frontend - API:**
```typescript
// frontend/src/tabs/incidents/services/incidentsApi.ts
// frontend/src/components/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/tabs/incidents/components/IncidentDetailView.tsx
// frontend/src/components/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/tabs/incidents/
git add backend/src/incidents/ frontend/src/components/incidents/
git commit -m "feat(incidents): 사고 상세 조회 페이지 추가"
# pre-commit: TypeScript OK, ESLint OK
# commit-msg: Conventional Commits OK

2
docs/INSTALL_GUIDE.md
파일 보기

@ -75,7 +75,7 @@ wing/
│ │ │ ├── store/ authStore, menuStore (Zustand)
│ │ │ ├── types/ backtrack, boomLine, hns, navigation
│ │ │ └── utils/ coordinates, geo, sanitize
│ │ └── tabs/ 탭 단위 패키지 (11개)
│ │ └── components/ 탭 단위 패키지 (11개, MPA 구조)
│ │ ├── prediction/ 확산 예측
│ │ ├── hns/ HNS 분석
│ │ ├── rescue/ 구조 시나리오

36
docs/MENU-TAB-GUIDE.md
파일 보기

@ -31,9 +31,9 @@ board 탭을 기준 템플릿으로 사용하며, 각 단계별 실제 코드
| 단계 | 파일 | 작업 |
|------|------|------|
| **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 1** | `frontend/src/components/{탭명}/components/{TabName}View.tsx` | 뷰 컴포넌트 생성 |
| | `frontend/src/components/{탭명}/services/{tabName}Api.ts` | API 서비스 생성 |
| | `frontend/src/components/{탭명}/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/tabs/{탭명}/
frontend/src/components/{탭명}/
components/
{TabName}View.tsx # 메인 뷰 컴포넌트
services/
@ -65,7 +65,7 @@ frontend/src/tabs/{탭명}/
서브탭이 **없는** 간단한 탭:
```tsx
// frontend/src/tabs/monitoring/components/MonitoringView.tsx
// frontend/src/components/monitoring/components/MonitoringView.tsx
export function MonitoringView() {
return (
@ -91,7 +91,7 @@ export function MonitoringView() {
서브탭이 **있는** 탭 (board 패턴):
```tsx
// frontend/src/tabs/monitoring/components/MonitoringView.tsx
// frontend/src/components/monitoring/components/MonitoringView.tsx
import { useSubMenu } from '@common/hooks/useSubMenu';
@ -122,7 +122,7 @@ export function MonitoringView() {
### 1-3. API 서비스 (보일러플레이트)
```ts
// frontend/src/tabs/monitoring/services/monitoringApi.ts
// frontend/src/components/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/tabs/monitoring/index.ts
// frontend/src/components/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 '@tabs/monitoring';
import { MonitoringView } from '@components/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/tabs/monitoring/components
mkdir -p frontend/src/tabs/monitoring/services
mkdir -p frontend/src/components/monitoring/components
mkdir -p frontend/src/components/monitoring/services
```
- `frontend/src/tabs/monitoring/components/MonitoringView.tsx` 생성
- `frontend/src/tabs/monitoring/services/monitoringApi.ts` 생성
- `frontend/src/tabs/monitoring/index.ts` 생성
- `frontend/src/components/monitoring/components/MonitoringView.tsx` 생성
- `frontend/src/components/monitoring/services/monitoringApi.ts` 생성
- `frontend/src/components/monitoring/index.ts` 생성
### 2단계: 프론트엔드 기존 파일 수정
@ -592,7 +592,7 @@ mkdir -p frontend/src/tabs/monitoring/services
+ export type MainTab = '...' | 'monitoring' | 'admin';
--- frontend/src/App.tsx
+ import { MonitoringView } from '@tabs/monitoring';
+ import { MonitoringView } from '@components/monitoring';
// renderView switch 내:
+ case 'monitoring':
+ return <MonitoringView />;
@ -644,9 +644,9 @@ cd backend && npx tsc --noEmit # 백엔드 컴파일 검증
## 체크리스트
### 프론트엔드
- [ ] `frontend/src/tabs/{탭명}/components/{TabName}View.tsx` 생성
- [ ] `frontend/src/tabs/{탭명}/services/{tabName}Api.ts` 생성
- [ ] `frontend/src/tabs/{탭명}/index.ts` re-export 생성
- [ ] `frontend/src/components/{탭명}/components/{TabName}View.tsx` 생성
- [ ] `frontend/src/components/{탭명}/services/{tabName}Api.ts` 생성
- [ ] `frontend/src/components/{탭명}/index.ts` re-export 생성
- [ ] `navigation.ts` MainTab 타입에 새 ID 추가
- [ ] `App.tsx` import + renderView switch case 추가
- [ ] `useSubMenu.ts` subMenuConfigs + subMenuState 추가 (서브탭 있는 경우)

14
docs/MOCK-TO-API-GUIDE.md
파일 보기

@ -49,7 +49,7 @@ git checkout -b feature/{탭명}-crud
```bash
# 탭 디렉토리 내 mock 데이터 검색
grep -rn "mock\|Mock\|MOCK\|sample\|initial\|hardcod\|localStorage" \
frontend/src/tabs/{탭명}/
frontend/src/components/{탭명}/
# 공통 디렉토리에서 해당 탭 관련 데이터 확인 (반드시!)
grep -rn "{탭명}\|{Tab}" frontend/src/common/mock/
@ -302,7 +302,7 @@ app.use('/api/{탭명}', newtabRouter);
**1) API 서비스 파일 생성:**
파일 위치: `frontend/src/tabs/{탭명}/services/{탭명}Api.ts`
파일 위치: `frontend/src/components/{탭명}/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/tabs/{탭명}/
grep -rn "mock\|Mock\|MOCK\|localStorage" frontend/src/components/{탭명}/
# 공통 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/tabs/{탭명}/
git add frontend/src/components/{탭명}/
# 커밋 (Conventional Commits, 한국어)
git commit -m "feat({탭명}): mock 데이터를 PostgreSQL + REST API로 전환"
@ -602,7 +602,7 @@ AUTH_USER 주요 컬럼 참조:
```bash
# 불충분 -- 탭 디렉토리만 검색
grep -rn "mock" frontend/src/tabs/{탭명}/
grep -rn "mock" frontend/src/components/{탭명}/
# 반드시 공통 디렉토리도 검색
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/tabs/{탭명}/` (UI 상수 제외)
- [ ] PUT/DELETE 사용 0건: `grep -rn "api\.put\|api\.delete" frontend/src/tabs/{탭명}/`
- [ ] Mock 잔여 0건: `grep -rn "mock\|Mock" frontend/src/components/{탭명}/` (UI 상수 제외)
- [ ] PUT/DELETE 사용 0건: `grep -rn "api\.put\|api\.delete" frontend/src/components/{탭명}/`
- [ ] 라우터 등록 확인: `server.ts`에 `app.use('/api/{탭명}', ...)` 추가됨
- [ ] 마이그레이션 실행 확인: psql로 테이블 생성 및 검증 SELECT 통과
- [ ] 커밋 + 푸시 + MR 생성

4
docs/README.md
파일 보기

@ -66,7 +66,7 @@ wing/
│ │ ├── utils/ cn, coordinates, geo, sanitize
│ │ ├── styles/ base.css, components.css, wing.css (@layer)
│ │ └── constants/ featureIds.ts (FEATURE_ID 상수 체계)
│ └── tabs/ @tabs/ alias (11개 탭)
│ └── components/ @components/ alias (11개 탭, MPA 구조)
│ ├── prediction/ 유류 확산 예측
│ ├── hns/ HNS 분석
│ ├── rescue/ 구조 시나리오
@ -103,7 +103,7 @@ wing/
| Alias | 경로 |
|-------|------|
| `@common/*` | `src/common/*` |
| `@tabs/*` | `src/tabs/*` |
| `@components/*` | `src/components/*` |
---

18
docs/RELEASE-NOTES.md
파일 보기

@ -4,13 +4,31 @@
## [Unreleased]
### 수정
- 사건사고: MPA 리팩토링 누락 imports 정리 — IncidentsView `SplitPanelContent` 중복 import 제거, `fetchOilSpillSummary`를 `predictionApi`로 이관(이전 위치는 `api` 미임포트로 런타임 동작 불가), `AnalysisSelectModal`·`hnsDispersionLayers`의 `@tabs/`·`@common/components/` 구 경로를 신 경로로 정정
### 문서
- MPA 컴포넌트 구조 반영: 개발 가이드·공통 가이드·CRUD 가이드·설치 가이드·docs/README의 `tabs/` 경로 예시를 `components/`로 정정
## [2026-04-17]
### 문서
- CLAUDE.md 절대 지침 추가 (develop 최신화, 디자인 시스템 준수)
## [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]
### 추가

311
frontend/package-lock.json generated
파일 보기

@ -1945,9 +1945,9 @@
"license": "MIT"
},
"node_modules/@rollup/rollup-android-arm-eabi": {
"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==",
"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==",
"cpu": [
"arm"
],
@ -1959,9 +1959,9 @@
]
},
"node_modules/@rollup/rollup-android-arm64": {
"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==",
"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==",
"cpu": [
"arm64"
],
@ -1973,9 +1973,9 @@
]
},
"node_modules/@rollup/rollup-darwin-arm64": {
"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==",
"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==",
"cpu": [
"arm64"
],
@ -1987,9 +1987,9 @@
]
},
"node_modules/@rollup/rollup-darwin-x64": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.57.1.tgz",
"integrity": "sha512-Ji8g8ChVbKrhFtig5QBV7iMaJrGtpHelkB3lsaKzadFBe58gmjfGXAOfI5FV0lYMH8wiqsxKQ1C9B0YTRXVy4w==",
"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==",
"cpu": [
"x64"
],
@ -2001,9 +2001,9 @@
]
},
"node_modules/@rollup/rollup-freebsd-arm64": {
"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==",
"version": "4.60.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.60.1.tgz",
"integrity": "sha512-czw90wpQq3ZsAVBlinZjAYTKduOjTywlG7fEeWKUA7oCmpA8xdTkxZZlwNJKWqILlq0wehoZcJYfBvOyhPTQ6w==",
"cpu": [
"arm64"
],
@ -2015,9 +2015,9 @@
]
},
"node_modules/@rollup/rollup-freebsd-x64": {
"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==",
"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==",
"cpu": [
"x64"
],
@ -2029,9 +2029,9 @@
]
},
"node_modules/@rollup/rollup-linux-arm-gnueabihf": {
"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==",
"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==",
"cpu": [
"arm"
],
@ -2043,9 +2043,9 @@
]
},
"node_modules/@rollup/rollup-linux-arm-musleabihf": {
"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==",
"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==",
"cpu": [
"arm"
],
@ -2057,9 +2057,9 @@
]
},
"node_modules/@rollup/rollup-linux-arm64-gnu": {
"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==",
"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==",
"cpu": [
"arm64"
],
@ -2071,9 +2071,9 @@
]
},
"node_modules/@rollup/rollup-linux-arm64-musl": {
"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==",
"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==",
"cpu": [
"arm64"
],
@ -2085,9 +2085,9 @@
]
},
"node_modules/@rollup/rollup-linux-loong64-gnu": {
"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==",
"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==",
"cpu": [
"loong64"
],
@ -2099,9 +2099,9 @@
]
},
"node_modules/@rollup/rollup-linux-loong64-musl": {
"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==",
"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==",
"cpu": [
"loong64"
],
@ -2113,9 +2113,9 @@
]
},
"node_modules/@rollup/rollup-linux-ppc64-gnu": {
"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==",
"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==",
"cpu": [
"ppc64"
],
@ -2127,9 +2127,9 @@
]
},
"node_modules/@rollup/rollup-linux-ppc64-musl": {
"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==",
"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==",
"cpu": [
"ppc64"
],
@ -2141,9 +2141,9 @@
]
},
"node_modules/@rollup/rollup-linux-riscv64-gnu": {
"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==",
"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==",
"cpu": [
"riscv64"
],
@ -2155,9 +2155,9 @@
]
},
"node_modules/@rollup/rollup-linux-riscv64-musl": {
"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==",
"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==",
"cpu": [
"riscv64"
],
@ -2169,9 +2169,9 @@
]
},
"node_modules/@rollup/rollup-linux-s390x-gnu": {
"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==",
"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==",
"cpu": [
"s390x"
],
@ -2183,9 +2183,9 @@
]
},
"node_modules/@rollup/rollup-linux-x64-gnu": {
"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==",
"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==",
"cpu": [
"x64"
],
@ -2197,9 +2197,9 @@
]
},
"node_modules/@rollup/rollup-linux-x64-musl": {
"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==",
"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==",
"cpu": [
"x64"
],
@ -2211,9 +2211,9 @@
]
},
"node_modules/@rollup/rollup-openbsd-x64": {
"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==",
"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==",
"cpu": [
"x64"
],
@ -2225,9 +2225,9 @@
]
},
"node_modules/@rollup/rollup-openharmony-arm64": {
"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==",
"version": "4.60.1",
"resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.60.1.tgz",
"integrity": "sha512-4Cv23ZrONRbNtbZa37mLSueXUCtN7MXccChtKpUnQNgF010rjrjfHx3QxkS2PI7LqGT5xXyYs1a7LbzAwT0iCA==",
"cpu": [
"arm64"
],
@ -2239,9 +2239,9 @@
]
},
"node_modules/@rollup/rollup-win32-arm64-msvc": {
"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==",
"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==",
"cpu": [
"arm64"
],
@ -2253,9 +2253,9 @@
]
},
"node_modules/@rollup/rollup-win32-ia32-msvc": {
"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==",
"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==",
"cpu": [
"ia32"
],
@ -2267,9 +2267,9 @@
]
},
"node_modules/@rollup/rollup-win32-x64-gnu": {
"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==",
"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==",
"cpu": [
"x64"
],
@ -2281,9 +2281,9 @@
]
},
"node_modules/@rollup/rollup-win32-x64-msvc": {
"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==",
"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==",
"cpu": [
"x64"
],
@ -2711,9 +2711,9 @@
}
},
"node_modules/@typescript-eslint/typescript-estree/node_modules/brace-expansion": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
"integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.0.tgz",
"integrity": "sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==",
"dev": true,
"license": "MIT",
"dependencies": {
@ -2721,13 +2721,13 @@
}
},
"node_modules/@typescript-eslint/typescript-estree/node_modules/minimatch": {
"version": "9.0.5",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
"integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
"version": "9.0.9",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.9.tgz",
"integrity": "sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==",
"dev": true,
"license": "ISC",
"dependencies": {
"brace-expansion": "^2.0.1"
"brace-expansion": "^2.0.2"
},
"engines": {
"node": ">=16 || 14 >=14.17"
@ -2873,9 +2873,9 @@
}
},
"node_modules/ajv": {
"version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
"version": "6.14.0",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
"integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
"dev": true,
"license": "MIT",
"dependencies": {
@ -2927,9 +2927,9 @@
}
},
"node_modules/anymatch/node_modules/picomatch": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
"integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
"dev": true,
"license": "MIT",
"engines": {
@ -3015,14 +3015,14 @@
}
},
"node_modules/axios": {
"version": "1.13.5",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.13.5.tgz",
"integrity": "sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==",
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.15.0.tgz",
"integrity": "sha512-wWyJDlAatxk30ZJer+GeCWS209sA42X+N5jU2jy6oHTp7ufw8uzUTVFBX9+wTfAlhiJXGS0Bq7X6efruWjuK9Q==",
"license": "MIT",
"dependencies": {
"follow-redirects": "^1.15.11",
"form-data": "^4.0.5",
"proxy-from-env": "^1.1.0"
"proxy-from-env": "^2.1.0"
}
},
"node_modules/balanced-match": {
@ -3077,9 +3077,9 @@
}
},
"node_modules/brace-expansion": {
"version": "1.1.12",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
"integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
"version": "1.1.14",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.14.tgz",
"integrity": "sha512-MWPGfDxnyzKU7rNOW9SP/c50vi3xrmrua/+6hfPbCS2ABNWfx24vPidzvC7krjU/RTo235sV776ymlsMtGKj8g==",
"dev": true,
"license": "MIT",
"dependencies": {
@ -3946,9 +3946,9 @@
"license": "MIT"
},
"node_modules/fast-xml-parser": {
"version": "4.5.4",
"resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.5.4.tgz",
"integrity": "sha512-jE8ugADnYOBsu1uaoayVl1tVKAMNOXyjwvv2U6udEA2ORBhDooJDWoGxTkhd4Qn4yh59JVVt/pKXtjPwx9OguQ==",
"version": "4.5.6",
"resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.5.6.tgz",
"integrity": "sha512-Yd4vkROfJf8AuJrDIVMVmYfULKmIJszVsMv7Vo71aocsKgFxpdlpSHXSaInvyYfgw2PRuObQSW2GFpVMUjxu9A==",
"funding": [
{
"type": "github",
@ -4055,16 +4055,16 @@
}
},
"node_modules/flatted": {
"version": "3.3.3",
"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
"integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
"version": "3.4.2",
"resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
"integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
"dev": true,
"license": "ISC"
},
"node_modules/follow-redirects": {
"version": "1.15.11",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
"integrity": "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ==",
"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==",
"funding": [
{
"type": "individual",
@ -4904,9 +4904,9 @@
}
},
"node_modules/micromatch/node_modules/picomatch": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
"integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
"dev": true,
"license": "MIT",
"engines": {
@ -4938,9 +4938,9 @@
}
},
"node_modules/minimatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
"integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
"version": "3.1.5",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
"integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
"dev": true,
"license": "ISC",
"dependencies": {
@ -5169,9 +5169,9 @@
"license": "ISC"
},
"node_modules/picomatch": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
"integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
"dev": true,
"license": "MIT",
"engines": {
@ -5409,10 +5409,13 @@
"license": "MIT"
},
"node_modules/proxy-from-env": {
"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"
"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"
}
},
"node_modules/punycode": {
"version": "2.3.1",
@ -5569,9 +5572,9 @@
}
},
"node_modules/readdirp/node_modules/picomatch": {
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
"integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
"integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
"dev": true,
"license": "MIT",
"engines": {
@ -5633,9 +5636,9 @@
}
},
"node_modules/rollup": {
"version": "4.57.1",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.57.1.tgz",
"integrity": "sha512-oQL6lgK3e2QZeQ7gcgIkS2YZPg5slw37hYufJ3edKlfQSGGm8ICoxswK15ntSzF/a8+h7ekRy7k7oWc3BQ7y8A==",
"version": "4.60.1",
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.1.tgz",
"integrity": "sha512-VmtB2rFU/GroZ4oL8+ZqXgSA38O6GR8KSIvWmEFv63pQ0G6KaBH9s07PO8XTXP4vI+3UJUEypOfjkGfmSBBR0w==",
"dev": true,
"license": "MIT",
"dependencies": {
@ -5649,31 +5652,31 @@
"npm": ">=8.0.0"
},
"optionalDependencies": {
"@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",
"@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",
"fsevents": "~2.3.2"
}
},
@ -5801,9 +5804,9 @@
}
},
"node_modules/socket.io-parser": {
"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==",
"version": "4.2.6",
"resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.6.tgz",
"integrity": "sha512-asJqbVBDsBCJx0pTqw3WfesSY0iRX+2xzWEWzrpcH7L6fLzrhyF8WPI8UaeM4YCuDfpwA/cgsdugMsmtz8EJeg==",
"license": "MIT",
"dependencies": {
"@socket.io/component-emitter": "~3.1.0",
@ -6285,9 +6288,9 @@
"license": "MIT"
},
"node_modules/vite": {
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
"integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
"version": "7.3.2",
"resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
"integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
"dev": true,
"license": "MIT",
"dependencies": {

28
frontend/src/App.tsx
파일 보기

@ -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 '@common/types/navigation';
import { MainLayout } from '@common/components/layout/MainLayout';
import { LoginPage } from '@common/components/auth/LoginPage';
import type { MainTab } from '@/types/navigation';
import { MainLayout } from '@components/common/layout/MainLayout';
import { LoginPage } from '@components/common/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 '@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 { 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 { DesignPage } from '@/pages/design/DesignPage';
const GOOGLE_CLIENT_ID = import.meta.env.VITE_GOOGLE_CLIENT_ID || '';

1623
frontend/src/common/components/ui/UserManualPopup.tsx
파일 보기

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다. Load Diff

1187
frontend/src/common/data/chapters.json Normal file
파일 보기

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다. Load Diff

30
frontend/src/common/data/manualChapters.ts Normal file
파일 보기

@ -0,0 +1,30 @@
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[];

2
frontend/src/common/hooks/useBaseMapStyle.ts
파일 보기

@ -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 '@common/components/map/mapStyles';
import { LIGHT_STYLE, SATELLITE_3D_STYLE, ENC_EMPTY_STYLE } from '@components/common/map/mapStyles';
export function useBaseMapStyle(): StyleSpecification {
const mapToggles = useMapStore((s) => s.mapToggles);

4
frontend/src/common/hooks/useSubMenu.ts
파일 보기

@ -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,6 +61,7 @@ const subMenuConfigs: Record<MainTab, SubMenuItem[] | null> = {
{ id: 'manual', label: '해경매뉴얼', icon: '📘' },
],
weather: null,
monitor: null,
admin: null, // 관리자 화면은 자체 사이드바 사용 (AdminSidebar.tsx)
};
@ -76,6 +77,7 @@ const subMenuState: Record<MainTab, string> = {
incidents: '',
board: 'all',
weather: '',
monitor: '',
admin: 'users',
};

2
frontend/src/common/hooks/useVesselSignals.ts
파일 보기

@ -7,7 +7,7 @@ import {
getInitialVesselSnapshot,
isVesselInitEnabled,
} from '@common/services/vesselApi';
import type { VesselPosition, MapBounds } from '@common/types/vessel';
import type { VesselPosition, MapBounds } from '@/types/vessel';
/**
* 선박 신호 실시간 수신 훅

4
frontend/src/common/mock/vesselMockData.ts
파일 보기

@ -1,4 +1,4 @@
// Deprecated: Mock 선박 데이터는 제거되었습니다.
// 실제 선박 신호는 @common/hooks/useVesselSignals + @common/components/map/VesselLayer 를 사용합니다.
// 범례는 @common/components/map/VesselLayer 의 VESSEL_LEGEND 를 import 하세요.
// 실제 선박 신호는 @common/hooks/useVesselSignals + @components/common/map/VesselLayer 를 사용합니다.
// 범례는 @components/common/map/VesselLayer 의 VESSEL_LEGEND 를 import 하세요.
export {};

2
frontend/src/common/services/vesselApi.ts
파일 보기

@ -1,5 +1,5 @@
import { api } from './api';
import type { VesselPosition, MapBounds } from '@common/types/vessel';
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 });

2
frontend/src/common/services/vesselSignalClient.ts
파일 보기

@ -1,4 +1,4 @@
import type { VesselPosition, MapBounds } from '@common/types/vessel';
import type { VesselPosition, MapBounds } from '@/types/vessel';
import { getVesselsInArea } from './vesselApi';
export interface VesselSignalClient {

41
frontend/src/common/store/weatherSnapshotStore.ts
파일 보기

@ -1,44 +1,7 @@
import { create } from 'zustand';
import type { WeatherSnapshot } from '@interfaces/weather/WeatherInterface';
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;
}>;
}
export type { WeatherSnapshot };
interface WeatherSnapshotStore {
snapshot: WeatherSnapshot | null;

28
frontend/src/common/styles/components.css
파일 보기

@ -325,7 +325,7 @@
gap: 4px;
padding: 5px 4px;
border-radius: 5px;
font-size: 0.6875rem;
font-size: 0.75rem;
font-weight: 600;
font-family: var(--font-korean);
cursor: pointer;
@ -360,7 +360,7 @@
width: 100%;
padding: 10px;
border-radius: 6px;
font-size: 12px;
font-size: 0.8125rem;
font-weight: 700;
cursor: pointer;
border: none;
@ -386,7 +386,7 @@
border: 1px solid rgba(6, 182, 212, 0.2);
border-radius: 6px;
color: var(--color-accent);
font-size: 0.6875rem;
font-size: 0.75rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
@ -411,7 +411,7 @@
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
font-size: 12px;
font-size: 0.8125rem;
font-weight: 600;
transition: all 0.15s;
background: rgba(15, 21, 36, 0.75);
@ -450,7 +450,7 @@
border-radius: 6px;
padding: 5px 14px;
font-family: var(--font-mono);
font-size: 0.6875rem;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.7);
font-weight: 400;
z-index: 20;
@ -491,7 +491,7 @@
}
.wii-value {
font-size: 0.6875rem;
font-size: 0.75rem;
font-weight: 400;
color: #ffffff;
font-family: var(--font-mono);
@ -538,7 +538,7 @@
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 14px;
font-size: 1rem;
transition: 0.2s;
}
@ -621,7 +621,7 @@
position: absolute;
top: -18px;
transform: translateX(-50%);
font-size: 12px;
font-size: 0.8125rem;
cursor: pointer;
filter: drop-shadow(0 0 4px rgba(245, 158, 11, 0.5));
}
@ -672,7 +672,7 @@
}
.tlct {
font-size: 14px;
font-size: 1rem;
font-weight: 600;
color: var(--color-accent);
font-family: var(--font-mono);
@ -841,7 +841,7 @@
}
.layer-icon {
font-size: 14px;
font-size: 1rem;
flex-shrink: 0;
}
@ -1115,7 +1115,7 @@
cursor: pointer;
border-radius: var(--radius-sm);
transition: background 0.15s;
font-size: 12px;
font-size: 0.8125rem;
font-weight: 700;
color: var(--fg-default);
font-family: var(--font-korean);
@ -1345,7 +1345,7 @@
}
.lyr-ccustom label {
font-size: 0.6875rem;
font-size: 0.75rem;
color: var(--fg-disabled);
font-family: var(--font-korean);
}
@ -1369,7 +1369,7 @@
border-radius: var(--radius-sm);
}
.lyr-style-label {
font-size: 0.6875rem;
font-size: 0.75rem;
font-weight: 700;
color: var(--fg-disabled);
font-family: var(--font-korean);
@ -1411,7 +1411,7 @@
cursor: pointer;
}
.lyr-style-val {
font-size: 0.6875rem;
font-size: 0.75rem;
color: var(--fg-disabled);
font-family: var(--font-mono);
min-width: 28px;

69
frontend/src/common/types/hns.ts
파일 보기

@ -1,69 +0,0 @@
/* 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;
twa: string;
stel: 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 }>;
}

2
frontend/src/common/utils/geo.ts
파일 보기

@ -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;

2
frontend/src/common/utils/imageAnalysisSignal.ts
파일 보기

@ -1,4 +1,4 @@
import type { ImageAnalyzeResult } from '@tabs/prediction/services/predictionApi';
import type { ImageAnalyzeResult } from '@interfaces/prediction/PredictionInterface';
/**
* 항공탐색(유출유면적분석) → 유출유 확산예측 탭 간 데이터 전달용 모듈 레벨 시그널.

0
frontend/src/tabs/admin/components/AdminPlaceholder.tsx → frontend/src/components/admin/components/AdminPlaceholder.tsx
파일 보기

0
frontend/src/tabs/admin/components/AdminSidebar.tsx → frontend/src/components/admin/components/AdminSidebar.tsx
파일 보기

4
frontend/src/tabs/admin/components/AdminView.tsx → frontend/src/components/admin/components/AdminView.tsx Executable file → Normal file
파일 보기

@ -69,7 +69,9 @@ export function AdminView() {
return (
<div className="flex flex-1 overflow-hidden bg-bg-base">
<AdminSidebar activeMenu={activeMenu} onSelect={setActiveMenu} />
<div className="flex-1 flex flex-col overflow-hidden">{renderContent()}</div>
<div className="flex-1 flex flex-col overflow-hidden" key={activeMenu}>
{renderContent()}
</div>
</div>
);
}

20
frontend/src/tabs/admin/components/AssetUploadPanel.tsx → frontend/src/components/admin/components/AssetUploadPanel.tsx
파일 보기

@ -1,6 +1,6 @@
import { useState, useEffect, useRef } from 'react';
import { fetchUploadLogs } from '@tabs/assets/services/assetsApi';
import type { UploadLogItem } from '@tabs/assets/services/assetsApi';
import { fetchUploadLogs } from '@components/assets/services/assetsApi';
import type { UploadLogItem } from '@interfaces/assets/AssetsInterface';
const ASSET_CATEGORIES = [
'전체',
@ -20,29 +20,29 @@ const PERM_ITEMS = [
icon: '👑',
role: '시스템관리자',
desc: '전체 자산 업로드/삭제 가능',
bg: 'rgba(245,158,11,0.15)',
color: 'text-yellow-400',
bg: 'rgba(6,182,212,0.12)',
color: 'text-color-accent',
},
{
icon: '🔧',
role: '운영관리자',
desc: '관할청 내 자산 업로드 가능',
bg: 'rgba(6,182,212,0.15)',
bg: 'rgba(6,182,212,0.08)',
color: 'text-color-accent',
},
{
icon: '👁',
role: '조회자',
desc: '현황 조회만 가능',
bg: 'rgba(148,163,184,0.15)',
bg: 'rgba(6,182,212,0.08)',
color: 'text-fg-sub',
},
{
icon: '🚫',
role: '게스트',
desc: '접근 불가',
bg: 'rgba(239,68,68,0.1)',
color: 'text-red-400',
bg: 'rgba(6,182,212,0.08)',
color: 'text-fg-sub',
},
];
@ -102,7 +102,7 @@ function AssetUploadPanel() {
<div className="flex flex-col h-full">
{/* 헤더 */}
<div className="px-6 py-4 border-b border-stroke flex-shrink-0">
<h1 className="text-lg font-bold text-fg font-korean">자산 현행화</h1>
<h1 className="text-title-1 font-bold text-fg font-korean">자산 현행화</h1>
<p className="text-caption text-fg-disabled mt-1 font-korean">
자산 데이터를 업로드하여 현행화합니다
</p>
@ -130,7 +130,7 @@ function AssetUploadPanel() {
className={`rounded-lg border-2 border-dashed py-8 text-center cursor-pointer transition-colors ${
dragging
? 'border-color-accent bg-[rgba(6,182,212,0.05)]'
: 'border-stroke hover:border-[rgba(6,182,212,0.5)] bg-bg-elevated'
: 'border-stroke hover:border-[rgba(6,182,212,0.3)] bg-bg-elevated'
}`}
>
<div className="text-3xl mb-2 opacity-40">📁</div>

38
frontend/src/tabs/admin/components/BoardMgmtPanel.tsx → frontend/src/components/admin/components/BoardMgmtPanel.tsx
파일 보기

@ -1,10 +1,6 @@
import { useState, useEffect, useCallback } from 'react';
import {
fetchBoardPosts,
adminDeleteBoardPost,
type BoardPostItem,
type BoardListResponse,
} from '@tabs/board/services/boardApi';
import { fetchBoardPosts, adminDeleteBoardPost } from '@components/board/services/boardApi';
import type { BoardPostItem, BoardListResponse } from '@interfaces/board/BoardInterface';
// ─── 상수 ──────────────────────────────────────────────────
const PAGE_SIZE = 20;
@ -118,13 +114,13 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP
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-1">
<div className="flex items-center justify-between px-5 py-3 border-b border-stroke">
<h2 className="text-body-2 font-semibold text-fg">게시판 관리</h2>
<span className="text-caption text-fg-disabled">총 {data?.totalCount ?? 0}건</span>
</div>
{/* 카테고리 탭 + 검색 */}
<div className="flex items-center gap-3 px-5 py-2 border-b border-stroke-1">
<div className="flex items-center gap-3 px-5 py-2 border-b border-stroke">
<div className="flex gap-1">
{CATEGORY_TABS.map((tab) => (
<button
@ -132,7 +128,7 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP
onClick={() => handleCategoryChange(tab.code)}
className={`px-3 py-1 text-caption rounded-full transition-colors ${
activeCategory === tab.code
? 'bg-blue-500/20 text-blue-400 font-medium'
? 'bg-[rgba(6,182,212,0.15)] text-color-accent font-medium'
: 'text-fg-disabled hover:text-fg-sub hover:bg-bg-elevated'
}`}
>
@ -146,11 +142,11 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP
value={searchInput}
onChange={(e) => setSearchInput(e.target.value)}
placeholder="제목/작성자 검색"
className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke-1 text-fg placeholder:text-text-4 w-48"
className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-fg placeholder:text-text-4 w-48"
/>
<button
type="submit"
className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke-1 text-fg-sub hover:bg-bg-card"
className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-fg-sub hover:bg-bg-card"
>
검색
</button>
@ -158,11 +154,11 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP
</div>
{/* 액션 바 */}
<div className="flex items-center gap-2 px-5 py-2 border-b border-stroke-1">
<div className="flex items-center gap-2 px-5 py-2 border-b border-stroke">
<button
onClick={handleDelete}
disabled={selected.size === 0 || deleting}
className="px-3 py-1 text-caption rounded bg-red-500/20 text-red-400 hover:bg-red-500/30 disabled:opacity-40 disabled:cursor-not-allowed"
className="px-3 py-1 text-caption rounded bg-[rgba(239,68,68,0.15)] text-color-danger hover:bg-[rgba(239,68,68,0.25)] disabled:opacity-40 disabled:cursor-not-allowed"
>
{deleting ? '삭제 중...' : `선택 삭제 (${selected.size})`}
</button>
@ -172,7 +168,7 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP
<div className="flex-1 overflow-auto">
<table className="w-full text-caption">
<thead className="sticky top-0 bg-bg-surface z-10">
<tr className="border-b border-stroke-1 text-fg-disabled">
<tr className="border-b border-stroke text-fg-disabled">
<th className="w-8 py-2 text-center">
<input
type="checkbox"
@ -218,7 +214,7 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP
{/* 페이지네이션 */}
{totalPages > 1 && (
<div className="flex items-center justify-center gap-1 py-2 border-t border-stroke-1">
<div className="flex items-center justify-center gap-1 py-2 border-t border-stroke">
<button
onClick={() => setPage((p) => Math.max(1, p - 1))}
disabled={page <= 1}
@ -236,7 +232,7 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP
onClick={() => setPage(p)}
className={`w-7 h-7 text-caption rounded ${
p === page
? 'bg-blue-500/20 text-blue-400 font-medium'
? 'bg-[rgba(6,182,212,0.15)] text-color-accent font-medium'
: 'text-fg-disabled hover:bg-bg-elevated'
}`}
>
@ -266,7 +262,7 @@ interface PostRowProps {
function PostRow({ post, checked, onToggle }: PostRowProps) {
return (
<tr className="border-b border-stroke-1 hover:bg-bg-surface/50 transition-colors">
<tr className="border-b border-stroke hover:bg-bg-surface/50 transition-colors">
<td className="py-2 text-center">
<input type="checkbox" checked={checked} onChange={onToggle} className="accent-blue-500" />
</td>
@ -275,17 +271,17 @@ function PostRow({ post, checked, onToggle }: PostRowProps) {
<span
className={`inline-block px-2 py-0.5 rounded-full text-caption font-medium ${
post.categoryCd === 'NOTICE'
? 'bg-red-500/15 text-red-400'
? 'bg-[rgba(6,182,212,0.08)] text-fg-sub'
: post.categoryCd === 'QNA'
? 'bg-purple-500/15 text-purple-400'
: 'bg-blue-500/15 text-blue-400'
? 'bg-[rgba(6,182,212,0.08)] text-fg-sub'
: 'bg-[rgba(6,182,212,0.08)] text-fg-sub'
}`}
>
{CATEGORY_LABELS[post.categoryCd] ?? post.categoryCd}
</span>
</td>
<td className="py-2 pl-3 text-fg truncate max-w-[300px]">
{post.pinnedYn === 'Y' && <span className="text-caption text-orange-400 mr-1">[고정]</span>}
{post.pinnedYn === 'Y' && <span className="text-caption text-color-accent mr-1">[고정]</span>}
{post.title}
</td>
<td className="py-2 text-center text-fg-sub">{post.authorName}</td>

22
frontend/src/tabs/admin/components/CleanupEquipPanel.tsx → frontend/src/components/admin/components/CleanupEquipPanel.tsx
파일 보기

@ -1,7 +1,8 @@
import { useState, useEffect, useMemo } from 'react';
import { fetchOrganizations } from '@tabs/assets/services/assetsApi';
import type { AssetOrgCompat } from '@tabs/assets/services/assetsApi';
import { typeTagCls } from '@tabs/assets/components/assetTypes';
import { fetchOrganizations } from '@components/assets/services/assetsApi';
import type { AssetOrgCompat } from '@interfaces/assets/AssetsInterface';
import { typeTagCls } from '@components/assets/components/assetTypes';
/* eslint-disable react-refresh/only-export-components */
const PAGE_SIZE = 20;
@ -98,7 +99,7 @@ function CleanupEquipPanel() {
{/* 헤더 */}
<div className="flex items-center justify-between px-6 py-4 border-b border-stroke">
<div>
<h1 className="text-lg font-bold text-fg font-korean">방제장비 현황</h1>
<h1 className="text-title-1 font-bold text-fg font-korean">방제장비 현황</h1>
<p className="text-caption text-fg-disabled mt-1 font-korean">
총 {filtered.length}개 기관
</p>
@ -341,16 +342,11 @@ function CleanupEquipPanel() {
<button
key={p}
onClick={() => setCurrentPage(p)}
className="px-2.5 py-1 text-label-2 border rounded transition-colors"
style={
className={`px-2.5 py-1 text-label-2 border rounded transition-colors ${
p === safePage
? {
borderColor: 'var(--color-accent)',
color: 'var(--color-accent)',
background: 'rgba(6,182,212,0.1)',
}
: { borderColor: 'var(--border)', color: 'var(--text-2)' }
}
? 'border-color-accent text-color-accent bg-[rgba(6,182,212,0.08)]'
: 'border-stroke text-fg-sub'
}`}
>
{p}
</button>

20
frontend/src/tabs/admin/components/CollectHrPanel.tsx → frontend/src/components/admin/components/CollectHrPanel.tsx
파일 보기

@ -176,9 +176,9 @@ function getCollectStatus(item: HrCollectItem): { label: string; color: string }
return { label: '비활성', color: 'text-t3 bg-bg-elevated' };
}
if (item.etaClctList.length > 0) {
return { label: '완료', color: 'text-emerald-400 bg-emerald-500/10' };
return { label: '완료', color: 'text-color-success bg-[rgba(34,197,94,0.08)]' };
}
return { label: '대기', color: 'text-yellow-400 bg-yellow-500/10' };
return { label: '대기', color: 'text-color-caution bg-[rgba(234,179,8,0.08)]' };
}
// ─── cron 표현식 → 읽기 쉬운 형태 ─────────────────────────
@ -217,7 +217,7 @@ function HrTable({ rows, loading }: { rows: HrCollectItem[]; loading: boolean })
{HEADERS.map((h) => (
<th
key={h}
className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
>
{h}
</th>
@ -227,7 +227,7 @@ function HrTable({ rows, loading }: { rows: HrCollectItem[]; loading: boolean })
<tbody>
{loading && rows.length === 0
? Array.from({ length: 5 }).map((_, i) => (
<tr key={i} className="border-b border-stroke-1 animate-pulse">
<tr key={i} className="border-b border-stroke animate-pulse">
{HEADERS.map((_, j) => (
<td key={j} className="px-3 py-2">
<div className="h-3 bg-bg-elevated rounded w-14" />
@ -240,7 +240,7 @@ function HrTable({ rows, loading }: { rows: HrCollectItem[]; loading: boolean })
return (
<tr
key={`${row.seq}`}
className="border-b border-stroke-1 hover:bg-bg-surface/50"
className="border-b border-stroke hover:bg-bg-surface/50"
>
<td className="px-3 py-2 text-t2 text-center">{idx + 1}</td>
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">
@ -258,7 +258,7 @@ function HrTable({ rows, loading }: { rows: HrCollectItem[]; loading: boolean })
<span
className={`inline-block px-1.5 py-0.5 rounded text-label-2 font-medium ${
row.activeYn === 'Y'
? 'text-emerald-400 bg-emerald-500/10'
? 'text-color-success bg-[rgba(34,197,94,0.08)]'
: 'text-t3 bg-bg-elevated'
}`}
>
@ -316,7 +316,7 @@ export default function CollectHrPanel() {
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-1 shrink-0">
<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 className="flex items-center gap-3">
{lastUpdate && (
@ -353,9 +353,9 @@ export default function CollectHrPanel() {
</div>
{/* 상태 표시줄 */}
<div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke-1 bg-bg-base">
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-emerald-500/10 text-emerald-400">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
<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.08)] text-color-success">
<span className="w-1.5 h-1.5 rounded-full bg-color-success" />
수집 완료 {completedCount}건
</span>
<span className="text-caption text-t3">

567
frontend/src/components/admin/components/DeidentifyPanel.tsx Normal file
파일 보기

@ -0,0 +1,567 @@
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>
);
}

8
frontend/src/tabs/admin/components/DispersingZonePanel.tsx → frontend/src/components/admin/components/DispersingZonePanel.tsx
파일 보기

@ -5,7 +5,7 @@ import { GeoJsonLayer } from '@deck.gl/layers';
import type { Layer } from '@deck.gl/core';
import 'maplibre-gl/dist/maplibre-gl.css';
import { useBaseMapStyle } from '@common/hooks/useBaseMapStyle';
import { S57EncOverlay } from '@common/components/map/S57EncOverlay';
import { S57EncOverlay } from '@components/common/map/S57EncOverlay';
import { useMapStore } from '@common/store/mapStore';
const MAP_CENTER: [number, number] = [127.5, 36.0];
@ -119,7 +119,7 @@ const DispersingZonePanel = () => {
const isConsider = zone === 'consider';
const showLayer = isConsider ? showConsider : showRestrict;
const setShowLayer = isConsider ? setShowConsider : setShowRestrict;
const swatchColor = isConsider ? 'bg-blue-500' : 'bg-red-500';
const swatchColor = isConsider ? 'bg-color-info' : 'bg-color-danger';
const isExpanded = expandedZone === zone;
return (
@ -197,11 +197,11 @@ const DispersingZonePanel = () => {
{/* 범례 */}
<div className="absolute bottom-4 left-4 bg-bg-surface border border-stroke rounded-lg px-3 py-2 flex flex-col gap-1.5">
<div className="flex items-center gap-2">
<span className="w-3 h-3 rounded-sm bg-blue-500 opacity-80" />
<span className="w-3 h-3 rounded-sm bg-color-info opacity-80" />
<span className="text-label-2 text-fg-sub font-korean">사용고려해역</span>
</div>
<div className="flex items-center gap-2">
<span className="w-3 h-3 rounded-sm bg-red-500 opacity-80" />
<span className="w-3 h-3 rounded-sm bg-color-danger opacity-80" />
<span className="text-label-2 text-fg-sub font-korean">사용제한해역</span>
</div>
</div>

16
frontend/src/tabs/admin/components/LayerPanel.tsx → frontend/src/components/admin/components/LayerPanel.tsx
파일 보기

@ -229,7 +229,7 @@ const LayerFormModal = ({ mode, initialData, onClose, onSaved }: LayerFormModalP
{/* 레이어코드 */}
<div>
<label className={labelCls}>
레이어코드 <span className="text-red-400">*</span>
레이어코드 <span className="text-color-danger">*</span>
</label>
<input
type="text"
@ -243,7 +243,7 @@ const LayerFormModal = ({ mode, initialData, onClose, onSaved }: LayerFormModalP
{/* 레이어명 */}
<div>
<label className={labelCls}>
레이어명 <span className="text-red-400">*</span>
레이어명 <span className="text-color-danger">*</span>
</label>
<input
type="text"
@ -261,7 +261,7 @@ const LayerFormModal = ({ mode, initialData, onClose, onSaved }: LayerFormModalP
{/* 레이어전체명 */}
<div>
<label className={labelCls}>
레이어전체명 <span className="text-red-400">*</span>
레이어전체명 <span className="text-color-danger">*</span>
</label>
<input
type="text"
@ -321,7 +321,7 @@ const LayerFormModal = ({ mode, initialData, onClose, onSaved }: LayerFormModalP
{/* 에러 */}
{formError && (
<div className="px-6 pb-2">
<p className="text-label-2 text-red-400 font-korean">{formError}</p>
<p className="text-label-2 text-color-danger font-korean">{formError}</p>
</div>
)}
{/* 버튼 */}
@ -448,7 +448,7 @@ const LayerPanel = () => {
<div className="px-6 py-4 border-b border-stroke shrink-0">
<div className="flex items-center justify-between mb-3">
<div>
<h1 className="text-lg font-bold text-fg font-korean">레이어 관리</h1>
<h1 className="text-title-1 font-bold text-fg font-korean">레이어 관리</h1>
<p className="text-caption text-fg-disabled mt-1 font-korean">총 {total}개</p>
</div>
<button
@ -487,7 +487,7 @@ const LayerPanel = () => {
{/* 오류 메시지 */}
{error && (
<div className="px-6 py-2 text-caption text-red-400 bg-[rgba(239,68,68,0.05)] border-b border-stroke shrink-0 font-korean">
<div className="px-6 py-2 text-caption text-color-danger bg-[rgba(239,68,68,0.08)] border-b border-stroke shrink-0 font-korean">
{error}
</div>
)}
@ -598,7 +598,7 @@ const LayerPanel = () => {
item.useYn === 'Y' && item.parentUseYn !== 'N'
? 'bg-color-accent'
: item.useYn === 'Y' && item.parentUseYn === 'N'
? 'bg-[rgba(6,182,212,0.4)]'
? 'bg-[rgba(6,182,212,0.3)]'
: 'bg-[rgba(255,255,255,0.08)] border border-stroke'
}`}
>
@ -620,7 +620,7 @@ const LayerPanel = () => {
</button>
<button
onClick={() => handleDelete(item.layerCd)}
className="px-3 py-1 text-caption rounded bg-red-500/20 text-red-400 hover:bg-red-500/30 font-korean whitespace-nowrap"
className="px-3 py-1 text-caption rounded bg-[rgba(239,68,68,0.15)] text-color-danger hover:bg-[rgba(239,68,68,0.25)] font-korean whitespace-nowrap"
>
삭제
</button>

21
frontend/src/tabs/admin/components/MapBasePanel.tsx → frontend/src/components/admin/components/MapBasePanel.tsx
파일 보기

@ -1,6 +1,7 @@
import { useState, useEffect } from 'react';
import { api } from '@common/services/api';
import { useMapStore } from '@common/store/mapStore';
/* eslint-disable react-refresh/only-export-components */
// ─── 타입 ─────────────────────────────────────────────────
interface MapBaseItem {
@ -101,7 +102,7 @@ function MapBaseModal({
{/* 지도 이름 */}
<div>
<label className="block text-label-2 font-semibold text-fg-sub font-korean mb-1.5">
지도 이름 <span className="text-red-400">*</span>
지도 이름 <span className="text-color-danger">*</span>
</label>
<input
type="text"
@ -115,7 +116,7 @@ function MapBaseModal({
{/* 지도 키 */}
<div>
<label className="block text-label-2 font-semibold text-fg-sub font-korean mb-1.5">
지도 키 <span className="text-red-400">*</span>
지도 키 <span className="text-color-danger">*</span>
</label>
<input
type="text"
@ -184,7 +185,7 @@ function MapBaseModal({
type="button"
onClick={() => setField('useYn', form.useYn === 'Y' ? 'N' : 'Y')}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
form.useYn === 'Y' ? 'bg-color-accent' : 'bg-border'
form.useYn === 'Y' ? 'bg-color-accent' : 'bg-bg-elevated'
}`}
>
<span
@ -200,7 +201,7 @@ function MapBaseModal({
</div>
{/* 에러 */}
{modalError && <p className="text-label-2 text-red-400 font-korean">{modalError}</p>}
{modalError && <p className="text-label-2 text-color-danger font-korean">{modalError}</p>}
</div>
{/* 모달 푸터 */}
@ -349,7 +350,7 @@ function MapBasePanel() {
{/* 헤더 */}
<div className="flex items-center justify-between px-6 py-4 border-b border-stroke">
<div>
<h1 className="text-lg font-bold text-fg font-korean">지도 관리</h1>
<h1 className="text-title-1 font-bold text-fg font-korean">지도 관리</h1>
<p className="text-caption text-fg-disabled mt-1 font-korean">총 {total}건</p>
</div>
<button
@ -365,8 +366,8 @@ function MapBasePanel() {
<div
className={`mx-6 mt-2 px-3 py-2 text-label-2 rounded-md font-korean ${
message.type === 'success'
? 'text-green-400 bg-[rgba(74,222,128,0.08)] border border-[rgba(74,222,128,0.2)]'
: 'text-red-400 bg-[rgba(239,68,68,0.08)] border border-[rgba(239,68,68,0.2)]'
? 'text-color-success bg-[rgba(34,197,94,0.08)] border border-[rgba(34,197,94,0.2)]'
: 'text-color-danger bg-[rgba(239,68,68,0.08)] border border-[rgba(239,68,68,0.2)]'
}`}
>
{message.text}
@ -419,7 +420,7 @@ function MapBasePanel() {
<button
type="button"
className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
item.useYn === 'Y' ? 'bg-color-accent' : 'bg-border'
item.useYn === 'Y' ? 'bg-color-accent' : 'bg-bg-elevated'
}`}
>
<span
@ -441,7 +442,7 @@ function MapBasePanel() {
<td className="py-3 text-center">
<button
onClick={() => handleDelete(item)}
className="px-3 py-1 text-caption rounded bg-red-500/20 text-red-400 hover:bg-red-500/30"
className="px-3 py-1 text-caption rounded bg-[rgba(239,68,68,0.15)] text-color-danger hover:bg-[rgba(239,68,68,0.25)]"
>
삭제
</button>
@ -478,7 +479,7 @@ function MapBasePanel() {
onClick={() => setPage(p)}
className={`w-7 h-7 text-caption rounded ${
p === page
? 'bg-blue-500/20 text-blue-400 font-medium'
? 'bg-[rgba(6,182,212,0.15)] text-color-accent font-medium'
: 'text-fg-disabled hover:bg-bg-elevated'
}`}
>

2
frontend/src/tabs/admin/components/MenusPanel.tsx → frontend/src/components/admin/components/MenusPanel.tsx
파일 보기

@ -135,7 +135,7 @@ function MenusPanel() {
<div className="flex flex-col h-full">
<div className="flex items-center justify-between px-6 py-4 border-b border-stroke">
<div>
<h1 className="text-lg font-bold text-fg font-korean">메뉴 관리</h1>
<h1 className="text-title-1 font-bold text-fg font-korean">메뉴 관리</h1>
<p className="text-caption text-fg-disabled mt-1 font-korean">
메뉴 표시 여부, 순서, 라벨, 아이콘을 관리합니다
</p>

36
frontend/src/tabs/admin/components/MonitorForecastPanel.tsx → frontend/src/components/admin/components/MonitorForecastPanel.tsx
파일 보기

@ -45,19 +45,19 @@ function formatTime(iso: string | null): string {
function StatusCell({ row }: { row: NumericalDataStatus }) {
if (row.lastStatus === 'COMPLETED') {
return <span className="text-emerald-400 text-caption">정상</span>;
return <span className="text-color-success text-caption">정상</span>;
}
if (row.lastStatus === 'FAILED') {
return (
<span className="text-red-400 text-caption">
<span className="text-color-danger text-caption">
오류{row.consecutiveFailures > 0 ? ` (${row.consecutiveFailures}회 연속)` : ''}
</span>
);
}
if (row.lastStatus === 'STARTED') {
return (
<span className="inline-flex items-center gap-1 text-cyan-400 text-caption">
<span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
<span className="inline-flex items-center gap-1 text-color-accent text-caption">
<span className="w-1.5 h-1.5 rounded-full bg-color-accent animate-pulse" />
실행 중
</span>
);
@ -77,30 +77,30 @@ function StatusBadge({
if (loading) {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-bg-elevated text-t2">
<span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
<span className="w-1.5 h-1.5 rounded-full bg-color-accent animate-pulse" />
조회 중...
</span>
);
}
if (errorCount === total && total > 0) {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-red-500/10 text-red-400">
<span className="w-1.5 h-1.5 rounded-full bg-red-400" />
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(239,68,68,0.08)] text-color-danger">
<span className="w-1.5 h-1.5 rounded-full bg-color-danger" />
연계 오류
</span>
);
}
if (errorCount > 0) {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-yellow-500/10 text-yellow-400">
<span className="w-1.5 h-1.5 rounded-full bg-yellow-400" />
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(234,179,8,0.08)] text-color-caution">
<span className="w-1.5 h-1.5 rounded-full bg-color-caution" />
일부 오류 ({errorCount}/{total})
</span>
);
}
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-emerald-500/10 text-emerald-400">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(34,197,94,0.08)] text-color-success">
<span className="w-1.5 h-1.5 rounded-full bg-color-success" />
정상
</span>
);
@ -124,7 +124,7 @@ function ForecastTable({ rows, loading }: { rows: NumericalDataStatus[]; loading
{TABLE_HEADERS.map((h) => (
<th
key={h}
className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
>
{h}
</th>
@ -134,7 +134,7 @@ function ForecastTable({ rows, loading }: { rows: NumericalDataStatus[]; loading
<tbody>
{loading && rows.length === 0
? Array.from({ length: 6 }).map((_, i) => (
<tr key={i} className="border-b border-stroke-1 animate-pulse">
<tr key={i} className="border-b border-stroke animate-pulse">
{TABLE_HEADERS.map((_, j) => (
<td key={j} className="px-3 py-2">
<div className="h-3 bg-bg-elevated rounded w-16" />
@ -143,7 +143,7 @@ function ForecastTable({ rows, loading }: { rows: NumericalDataStatus[]; loading
</tr>
))
: rows.map((row) => (
<tr key={row.jobName} className="border-b border-stroke-1 hover:bg-bg-surface/50">
<tr key={row.jobName} className="border-b border-stroke hover:bg-bg-surface/50">
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">
{row.modelName}
</td>
@ -192,7 +192,7 @@ export default function MonitorForecastPanel() {
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-1 shrink-0">
<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 className="flex items-center gap-3">
{lastUpdate && (
@ -229,14 +229,14 @@ export default function MonitorForecastPanel() {
</div>
{/* 탭 */}
<div className="flex gap-0 border-b border-stroke-1 shrink-0 px-5">
<div className="flex gap-0 border-b border-stroke shrink-0 px-5">
{TABS.map((tab) => (
<button
key={tab.id}
onClick={() => setActiveTab(tab.id)}
className={`px-4 py-2.5 text-caption font-medium border-b-2 transition-colors ${
activeTab === tab.id
? 'border-cyan-400 text-cyan-400'
? 'border-color-accent text-color-accent'
: 'border-transparent text-t3 hover:text-t2'
}`}
>
@ -246,7 +246,7 @@ export default function MonitorForecastPanel() {
</div>
{/* 상태 표시줄 */}
<div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke-1 bg-bg-base">
<div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke bg-bg-base">
<StatusBadge loading={loading} errorCount={errorCount} total={totalCount} />
{!loading && totalCount > 0 && (
<span className="text-caption text-t3">모델 {totalCount}개</span>

67
frontend/src/tabs/admin/components/MonitorRealtimePanel.tsx → frontend/src/components/admin/components/MonitorRealtimePanel.tsx
파일 보기

@ -1,18 +1,17 @@
import { useState, useEffect, useCallback } from 'react';
import {
getRecentObservation,
OBS_STATION_CODES,
type RecentObservation,
} from '@tabs/weather/services/khoaApi';
import { getRecentObservation, OBS_STATION_CODES } from '@components/weather/services/khoaApi';
import {
getUltraShortForecast,
getMarineForecast,
convertToGridCoords,
getCurrentBaseDateTime,
MARINE_REGIONS,
type WeatherForecastData,
type MarineWeatherData,
} from '@tabs/weather/services/weatherApi';
} from '@components/weather/services/weatherApi';
import type {
RecentObservation,
WeatherForecastData,
MarineWeatherData,
} from '@interfaces/weather/WeatherInterface';
const KEY_TO_NAME: Record<string, string> = {
incheon: '인천',
@ -85,30 +84,30 @@ function StatusBadge({
if (loading) {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-bg-elevated text-t2">
<span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
<span className="w-1.5 h-1.5 rounded-full bg-color-accent animate-pulse" />
조회 중...
</span>
);
}
if (errorCount === total) {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-red-500/10 text-red-400">
<span className="w-1.5 h-1.5 rounded-full bg-red-400" />
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(239,68,68,0.08)] text-color-danger">
<span className="w-1.5 h-1.5 rounded-full bg-color-danger" />
연계 오류
</span>
);
}
if (errorCount > 0) {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-yellow-500/10 text-yellow-400">
<span className="w-1.5 h-1.5 rounded-full bg-yellow-400" />
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(234,179,8,0.08)] text-color-caution">
<span className="w-1.5 h-1.5 rounded-full bg-color-caution" />
일부 오류 ({errorCount}/{total})
</span>
);
}
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-emerald-500/10 text-emerald-400">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(34,197,94,0.08)] text-color-success">
<span className="w-1.5 h-1.5 rounded-full bg-color-success" />
정상
</span>
);
@ -136,7 +135,7 @@ function KhoaTable({ rows, loading }: { rows: KhoaRow[]; loading: boolean }) {
{headers.map((h) => (
<th
key={h}
className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
>
{h}
</th>
@ -146,7 +145,7 @@ function KhoaTable({ rows, loading }: { rows: KhoaRow[]; loading: boolean }) {
<tbody>
{loading && rows.length === 0
? Array.from({ length: 5 }).map((_, i) => (
<tr key={i} className="border-b border-stroke-1 animate-pulse">
<tr key={i} className="border-b border-stroke animate-pulse">
{headers.map((_, j) => (
<td key={j} className="px-3 py-2">
<div className="h-3 bg-bg-elevated rounded w-12" />
@ -157,7 +156,7 @@ function KhoaTable({ rows, loading }: { rows: KhoaRow[]; loading: boolean }) {
: rows.map((row) => (
<tr
key={row.stationName}
className="border-b border-stroke-1 hover:bg-bg-surface/50"
className="border-b border-stroke hover:bg-bg-surface/50"
>
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">
{row.stationName}
@ -172,9 +171,9 @@ function KhoaTable({ rows, loading }: { rows: KhoaRow[]; loading: boolean }) {
<td className="px-3 py-2 text-t2">{fmt(row.data?.tide_level, 0)}</td>
<td className="px-3 py-2">
{row.error ? (
<span className="text-red-400 text-caption">오류</span>
<span className="text-color-danger text-caption">오류</span>
) : row.data ? (
<span className="text-emerald-400 text-caption">정상</span>
<span className="text-color-success text-caption">정상</span>
) : (
<span className="text-t3 text-caption">-</span>
)}
@ -207,7 +206,7 @@ function KmaUltraTable({ rows, loading }: { rows: KmaUltraRow[]; loading: boolea
{headers.map((h) => (
<th
key={h}
className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
>
{h}
</th>
@ -217,7 +216,7 @@ function KmaUltraTable({ rows, loading }: { rows: KmaUltraRow[]; loading: boolea
<tbody>
{loading && rows.length === 0
? Array.from({ length: 3 }).map((_, i) => (
<tr key={i} className="border-b border-stroke-1 animate-pulse">
<tr key={i} className="border-b border-stroke animate-pulse">
{headers.map((_, j) => (
<td key={j} className="px-3 py-2">
<div className="h-3 bg-bg-elevated rounded w-12" />
@ -228,7 +227,7 @@ function KmaUltraTable({ rows, loading }: { rows: KmaUltraRow[]; loading: boolea
: rows.map((row) => (
<tr
key={row.stationName}
className="border-b border-stroke-1 hover:bg-bg-surface/50"
className="border-b border-stroke hover:bg-bg-surface/50"
>
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">
{row.stationName}
@ -241,9 +240,9 @@ function KmaUltraTable({ rows, loading }: { rows: KmaUltraRow[]; loading: boolea
<td className="px-3 py-2 text-t2">{fmt(row.data?.humidity, 0)}</td>
<td className="px-3 py-2">
{row.error ? (
<span className="text-red-400 text-caption">오류</span>
<span className="text-color-danger text-caption">오류</span>
) : row.data ? (
<span className="text-emerald-400 text-caption">정상</span>
<span className="text-color-success text-caption">정상</span>
) : (
<span className="text-t3 text-caption">-</span>
)}
@ -267,7 +266,7 @@ function MarineTable({ rows, loading }: { rows: MarineRow[]; loading: boolean })
{headers.map((h) => (
<th
key={h}
className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
>
{h}
</th>
@ -277,7 +276,7 @@ function MarineTable({ rows, loading }: { rows: MarineRow[]; loading: boolean })
<tbody>
{loading && rows.length === 0
? Array.from({ length: 4 }).map((_, i) => (
<tr key={i} className="border-b border-stroke-1 animate-pulse">
<tr key={i} className="border-b border-stroke animate-pulse">
{headers.map((_, j) => (
<td key={j} className="px-3 py-2">
<div className="h-3 bg-bg-elevated rounded w-14" />
@ -286,7 +285,7 @@ function MarineTable({ rows, loading }: { rows: MarineRow[]; loading: boolean })
</tr>
))
: rows.map((row) => (
<tr key={row.regId} className="border-b border-stroke-1 hover:bg-bg-surface/50">
<tr key={row.regId} className="border-b border-stroke hover:bg-bg-surface/50">
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.name}</td>
<td className="px-3 py-2 text-t2">{fmt(row.data?.waveHeight)}</td>
<td className="px-3 py-2 text-t2">{fmt(row.data?.windSpeed)}</td>
@ -294,9 +293,9 @@ function MarineTable({ rows, loading }: { rows: MarineRow[]; loading: boolean })
<td className="px-3 py-2 text-t2">{fmt(row.data?.temperature)}</td>
<td className="px-3 py-2">
{row.error ? (
<span className="text-red-400 text-caption">오류</span>
<span className="text-color-danger text-caption">오류</span>
) : row.data ? (
<span className="text-emerald-400 text-caption">정상</span>
<span className="text-color-success text-caption">정상</span>
) : (
<span className="text-t3 text-caption">-</span>
)}
@ -440,7 +439,7 @@ export default function MonitorRealtimePanel() {
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-1 shrink-0">
<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 className="flex items-center gap-3">
{lastUpdate && (
@ -477,14 +476,14 @@ export default function MonitorRealtimePanel() {
</div>
{/* 탭 */}
<div className="flex gap-0 border-b border-stroke-1 shrink-0 px-5">
<div className="flex gap-0 border-b border-stroke shrink-0 px-5">
{TABS.map((tab) => (
<button
key={tab.id}
onClick={() => setActiveTab(tab.id)}
className={`px-4 py-2.5 text-caption font-medium border-b-2 transition-colors ${
activeTab === tab.id
? 'border-cyan-400 text-cyan-400'
? 'border-color-accent text-color-accent'
: 'border-transparent text-t3 hover:text-t2'
}`}
>
@ -494,7 +493,7 @@ export default function MonitorRealtimePanel() {
</div>
{/* 상태 표시줄 */}
<div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke-1 bg-bg-base">
<div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke bg-bg-base">
<StatusBadge loading={isLoading} errorCount={errorCount} total={totalCount} />
<span className="text-caption text-t3">
{activeTab === 'khoa' && `관측소 ${totalCount}개`}

28
frontend/src/tabs/admin/components/MonitorVesselPanel.tsx → frontend/src/components/admin/components/MonitorVesselPanel.tsx
파일 보기

@ -301,7 +301,7 @@ function StatusBadge({
if (loading) {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-bg-elevated text-t2">
<span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
<span className="w-1.5 h-1.5 rounded-full bg-color-accent animate-pulse" />
조회 중...
</span>
);
@ -309,23 +309,23 @@ function StatusBadge({
const offCount = total - onCount;
if (offCount === total) {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-red-500/10 text-red-400">
<span className="w-1.5 h-1.5 rounded-full bg-red-400" />
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(239,68,68,0.08)] text-color-danger">
<span className="w-1.5 h-1.5 rounded-full bg-color-danger" />
전체 OFF
</span>
);
}
if (offCount > 0) {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-yellow-500/10 text-yellow-400">
<span className="w-1.5 h-1.5 rounded-full bg-yellow-400" />
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(234,179,8,0.08)] text-color-caution">
<span className="w-1.5 h-1.5 rounded-full bg-color-caution" />
일부 OFF ({offCount}/{total})
</span>
);
}
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-emerald-500/10 text-emerald-400">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-caption bg-[rgba(34,197,94,0.08)] text-color-success">
<span className="w-1.5 h-1.5 rounded-full bg-color-success" />
전체 정상
</span>
);
@ -342,7 +342,7 @@ function ConnectionBadge({
if (isNormal) {
return (
<div className="flex flex-col items-start gap-0.5">
<span className="inline-flex items-center px-2 py-0.5 rounded text-label-2 font-semibold bg-blue-600 text-white">
<span className="inline-flex items-center px-2 py-0.5 rounded text-label-2 font-semibold bg-color-accent text-white">
ON
</span>
{lastMessageTime && <span className="text-caption text-t3">{lastMessageTime}</span>}
@ -351,7 +351,7 @@ function ConnectionBadge({
}
return (
<div className="flex flex-col items-start gap-0.5">
<span className="inline-flex items-center px-2 py-0.5 rounded text-label-2 font-semibold bg-orange-500 text-white">
<span className="inline-flex items-center px-2 py-0.5 rounded text-label-2 font-semibold bg-color-warning text-white">
OFF
</span>
{lastMessageTime && <span className="text-caption text-t3">{lastMessageTime}</span>}
@ -382,7 +382,7 @@ function VesselTable({ rows, loading }: { rows: VesselMonitorRow[]; loading: boo
{HEADERS.map((h) => (
<th
key={h}
className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
>
{h}
</th>
@ -392,7 +392,7 @@ function VesselTable({ rows, loading }: { rows: VesselMonitorRow[]; loading: boo
<tbody>
{loading && rows.length === 0
? Array.from({ length: 8 }).map((_, i) => (
<tr key={i} className="border-b border-stroke-1 animate-pulse">
<tr key={i} className="border-b border-stroke animate-pulse">
{HEADERS.map((_, j) => (
<td key={j} className="px-3 py-2">
<div className="h-3 bg-bg-elevated rounded w-14" />
@ -403,7 +403,7 @@ function VesselTable({ rows, loading }: { rows: VesselMonitorRow[]; loading: boo
: rows.map((row, idx) => (
<tr
key={`${row.institutionCode}-${row.systemName}`}
className="border-b border-stroke-1 hover:bg-bg-surface/50"
className="border-b border-stroke hover:bg-bg-surface/50"
>
<td className="px-3 py-2 text-t2 text-center">{idx + 1}</td>
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">
@ -461,7 +461,7 @@ export default function MonitorVesselPanel() {
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-1 shrink-0">
<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 className="flex items-center gap-3">
{lastUpdate && (
@ -498,7 +498,7 @@ export default function MonitorVesselPanel() {
</div>
{/* 상태 표시줄 */}
<div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke-1 bg-bg-base">
<div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-stroke bg-bg-base">
<StatusBadge loading={loading} onCount={onCount} total={rows.length} />
<span className="text-caption text-t3">
연계 채널 {rows.length}개 (ON: {onCount} / OFF: {rows.length - onCount})

417
frontend/src/components/admin/components/PermissionsPanel.tsx Normal file
파일 보기

@ -0,0 +1,417 @@
import { useState, useEffect, useCallback } from 'react';
import {
fetchRoles,
fetchPermTree,
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;

88
frontend/src/tabs/admin/components/RndHnsAtmosPanel.tsx → frontend/src/components/admin/components/RndHnsAtmosPanel.tsx
파일 보기

@ -257,34 +257,34 @@ function fetchHnsAtmosData(): Promise<HnsAtmosData> {
// ─── 유틸 ───────────────────────────────────────────────────────────────────────
function getPipelineStatusStyle(status: PipelineStatus): string {
if (status === '정상') return 'text-emerald-400 bg-emerald-500/10';
if (status === '지연') return 'text-yellow-400 bg-yellow-500/10';
return 'text-red-400 bg-red-500/10';
if (status === '정상') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
if (status === '지연') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
}
function getPipelineBorderStyle(status: PipelineStatus): string {
if (status === '정상') return 'border-l-emerald-500';
if (status === '지연') return 'border-l-yellow-500';
return 'border-l-red-500';
if (status === '정상') return 'border-l-color-success';
if (status === '지연') return 'border-l-color-caution';
return 'border-l-color-danger';
}
function getReceiveStatusStyle(status: ReceiveStatus): string {
if (status === '수신완료') return 'text-emerald-400 bg-emerald-500/10';
if (status === '수신대기') return 'text-yellow-400 bg-yellow-500/10';
return 'text-red-400 bg-red-500/10';
if (status === '수신완료') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
if (status === '수신대기') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
}
function getProcessStatusStyle(status: ProcessStatus): string {
if (status === '처리완료') return 'text-emerald-400 bg-emerald-500/10';
if (status === '처리중') return 'text-cyan-400 bg-cyan-500/10';
if (status === '대기') return 'text-yellow-400 bg-yellow-500/10';
return 'text-red-400 bg-red-500/10';
if (status === '처리완료') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
if (status === '처리중') return 'text-color-accent bg-[rgba(6,182,212,0.08)]';
if (status === '대기') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
}
function getAlertStyle(level: AlertLevel): string {
if (level === '경고') return 'text-red-400 bg-red-500/10 border-red-500/30';
if (level === '주의') return 'text-yellow-400 bg-yellow-500/10 border-yellow-500/30';
return 'text-cyan-400 bg-cyan-500/10 border-cyan-500/30';
if (level === '경고') return 'text-color-danger bg-[rgba(239,68,68,0.08)] border-[rgba(239,68,68,0.3)]';
if (level === '주의') return 'text-color-caution bg-[rgba(234,179,8,0.08)] border-[rgba(234,179,8,0.3)]';
return 'text-color-accent bg-[rgba(6,182,212,0.08)] border-[rgba(6,182,212,0.3)]';
}
// ─── 파이프라인 카드 ─────────────────────────────────────────────────────────────
@ -295,9 +295,9 @@ function PipelineCard({ node }: { node: PipelineNode }) {
return (
<div
className={`flex-1 min-w-0 bg-bg-card rounded border border-stroke-1 border-l-2 ${borderStyle} p-3 flex flex-col gap-1.5`}
className={`flex-1 min-w-0 bg-bg-card rounded border border-stroke border-l-2 ${borderStyle} p-3 flex flex-col gap-1.5`}
>
<div className="text-xs font-medium text-t1 leading-snug">{node.name}</div>
<div className="text-caption font-medium text-t1 leading-snug">{node.name}</div>
<span
className={`self-start inline-block px-1.5 py-0.5 rounded text-label-2 font-medium ${badgeStyle}`}
>
@ -316,7 +316,7 @@ function PipelineFlow({ nodes, loading }: { nodes: PipelineNode[]; loading: bool
{Array.from({ length: 5 }).map((_, i) => (
<div key={i} className="flex items-center gap-1">
<div className="flex-1 h-16 bg-bg-elevated rounded w-28" />
{i < 4 && <span className="text-t3 text-sm px-0.5">→</span>}
{i < 4 && <span className="text-t3 text-body-2 px-0.5">→</span>}
</div>
))}
</div>
@ -328,7 +328,7 @@ function PipelineFlow({ nodes, loading }: { nodes: PipelineNode[]; loading: bool
{nodes.map((node, idx) => (
<div key={node.id} className="flex items-center gap-1 flex-1 min-w-0">
<PipelineCard node={node} />
{idx < nodes.length - 1 && <span className="text-t3 text-sm shrink-0 px-0.5">→</span>}
{idx < nodes.length - 1 && <span className="text-t3 text-body-2 shrink-0 px-0.5">→</span>}
</div>
))}
</div>
@ -367,13 +367,13 @@ const LOG_HEADERS = ['시간', '데이터소스', '데이터종류', '크기', '
function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean }) {
return (
<div className="overflow-auto">
<table className="w-full text-xs border-collapse">
<table className="w-full text-caption border-collapse">
<thead>
<tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
{LOG_HEADERS.map((h) => (
<th
key={h}
className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
>
{h}
</th>
@ -383,7 +383,7 @@ function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean
<tbody>
{loading && rows.length === 0
? Array.from({ length: 8 }).map((_, i) => (
<tr key={i} className="border-b border-stroke-1 animate-pulse">
<tr key={i} className="border-b border-stroke animate-pulse">
{LOG_HEADERS.map((_, j) => (
<td key={j} className="px-3 py-2">
<div className="h-3 bg-bg-elevated rounded w-16" />
@ -392,7 +392,7 @@ function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean
</tr>
))
: rows.map((row) => (
<tr key={row.id} className="border-b border-stroke-1 hover:bg-bg-surface/50">
<tr key={row.id} className="border-b border-stroke hover:bg-bg-surface/50">
<td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.timestamp}</td>
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.source}</td>
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.dataType}</td>
@ -440,7 +440,7 @@ function AlertList({ alerts, loading }: { alerts: AlertItem[]; loading: boolean
}
if (alerts.length === 0) {
return <p className="text-xs text-t3 py-2">활성 알림이 없습니다.</p>;
return <p className="text-caption text-t3 py-2">활성 알림이 없습니다.</p>;
}
return (
@ -448,7 +448,7 @@ function AlertList({ alerts, loading }: { alerts: AlertItem[]; loading: boolean
{alerts.map((alert) => (
<div
key={alert.id}
className={`flex items-start gap-2 px-3 py-2 rounded border text-xs ${getAlertStyle(alert.level)}`}
className={`flex items-start gap-2 px-3 py-2 rounded border text-caption ${getAlertStyle(alert.level)}`}
>
<span className="font-semibold shrink-0">[{alert.level}]</span>
<span className="flex-1">{alert.message}</span>
@ -507,12 +507,12 @@ export default function RndHnsAtmosPanel() {
return (
<div className="flex flex-col h-full overflow-hidden">
{/* ── 헤더 ── */}
<div className="shrink-0 border-b border-stroke-1">
<div className="shrink-0 border-b border-stroke">
<div className="flex items-center justify-between px-5 py-3">
<h2 className="text-sm font-semibold text-t1">HNS 대기확산 (충북대) 연계 모니터링</h2>
<h2 className="text-body-2 font-semibold text-t1">HNS 대기확산 (충북대) 연계 모니터링</h2>
<div className="flex items-center gap-3">
{lastUpdate && (
<span className="text-xs text-t3">
<span className="text-caption text-t3">
갱신:{' '}
{lastUpdate.toLocaleTimeString('ko-KR', {
hour: '2-digit',
@ -524,7 +524,7 @@ export default function RndHnsAtmosPanel() {
<button
onClick={() => void fetchData()}
disabled={loading}
className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
className="flex items-center gap-1.5 px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
<svg
className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
@ -544,21 +544,21 @@ export default function RndHnsAtmosPanel() {
</div>
</div>
{/* 요약 통계 바 */}
<div className="flex items-center gap-4 px-5 py-2 bg-bg-base text-xs text-t3 border-t border-stroke-1">
<div className="flex items-center gap-4 px-5 py-2 bg-bg-base text-caption text-t3 border-t border-stroke">
<span>
정상 수신: <span className="text-emerald-400 font-medium">{totalReceived}건</span>
정상 수신: <span className="text-color-success font-medium">{totalReceived}건</span>
</span>
<span className="text-stroke-1">|</span>
<span>
지연: <span className="text-yellow-400 font-medium">{totalDelayed}건</span>
지연: <span className="text-color-caution font-medium">{totalDelayed}건</span>
</span>
<span className="text-stroke-1">|</span>
<span>
실패: <span className="text-red-400 font-medium">{totalFailed}건</span>
실패: <span className="text-color-danger font-medium">{totalFailed}건</span>
</span>
<span className="text-stroke-1">|</span>
<span>
금일 예측 완료: <span className="text-cyan-400 font-medium">2 / 4회</span>
금일 예측 완료: <span className="text-color-accent font-medium">2 / 4회</span>
</span>
</div>
</div>
@ -566,17 +566,17 @@ export default function RndHnsAtmosPanel() {
{/* ── 스크롤 영역 ── */}
<div className="flex-1 overflow-auto">
{/* 파이프라인 현황 */}
<section className="px-5 pt-4 pb-3 border-b border-stroke-1">
<h3 className="text-xs font-semibold text-t2 mb-3 uppercase tracking-wide">
<section className="px-5 pt-4 pb-3 border-b border-stroke">
<h3 className="text-caption font-semibold text-t2 mb-3 uppercase tracking-wide">
데이터 파이프라인 현황
</h3>
<PipelineFlow nodes={pipeline} loading={loading} />
</section>
{/* 필터 바 + 수신 이력 테이블 */}
<section className="px-5 pt-4 pb-3 border-b border-stroke-1">
<section className="px-5 pt-4 pb-3 border-b border-stroke">
<div className="flex items-center justify-between mb-3 gap-3 flex-wrap">
<h3 className="text-xs font-semibold text-t2 uppercase tracking-wide shrink-0">
<h3 className="text-caption font-semibold text-t2 uppercase tracking-wide shrink-0">
데이터 수신 이력
</h3>
<div className="flex items-center gap-2 flex-wrap">
@ -584,7 +584,7 @@ export default function RndHnsAtmosPanel() {
<select
value={filterSource}
onChange={(e) => setFilterSource(e.target.value as FilterSource)}
className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
>
<option value="all">모두 (소스)</option>
<option value="HYCOM">HYCOM</option>
@ -595,7 +595,7 @@ export default function RndHnsAtmosPanel() {
<select
value={filterReceive}
onChange={(e) => setFilterReceive(e.target.value as FilterReceive)}
className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
>
<option value="all">모두 (상태)</option>
<option value="수신완료">수신완료</option>
@ -607,13 +607,13 @@ export default function RndHnsAtmosPanel() {
<select
value={filterPeriod}
onChange={(e) => setFilterPeriod(e.target.value as FilterPeriod)}
className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
>
<option value="6h">최근 6시간</option>
<option value="12h">최근 12시간</option>
<option value="24h">최근 24시간</option>
</select>
<span className="text-xs text-t3">{filteredLogs.length}건</span>
<span className="text-caption text-t3">{filteredLogs.length}건</span>
</div>
</div>
<DataLogTable rows={filteredLogs} loading={loading} />
@ -621,7 +621,7 @@ export default function RndHnsAtmosPanel() {
{/* 알림 현황 */}
<section className="px-5 pt-4 pb-5">
<h3 className="text-xs font-semibold text-t2 uppercase tracking-wide mb-3">알림 현황</h3>
<h3 className="text-caption font-semibold text-t2 uppercase tracking-wide mb-3">알림 현황</h3>
<AlertList alerts={alerts} loading={loading} />
</section>
</div>

88
frontend/src/tabs/admin/components/RndKospsPanel.tsx → frontend/src/components/admin/components/RndKospsPanel.tsx
파일 보기

@ -257,34 +257,34 @@ function fetchKospsData(): Promise<KospsData> {
// ─── 유틸 ───────────────────────────────────────────────────────────────────────
function getPipelineStatusStyle(status: PipelineStatus): string {
if (status === '정상') return 'text-emerald-400 bg-emerald-500/10';
if (status === '지연') return 'text-yellow-400 bg-yellow-500/10';
return 'text-red-400 bg-red-500/10';
if (status === '정상') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
if (status === '지연') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
}
function getPipelineBorderStyle(status: PipelineStatus): string {
if (status === '정상') return 'border-l-emerald-500';
if (status === '지연') return 'border-l-yellow-500';
return 'border-l-red-500';
if (status === '정상') return 'border-l-color-success';
if (status === '지연') return 'border-l-color-caution';
return 'border-l-color-danger';
}
function getReceiveStatusStyle(status: ReceiveStatus): string {
if (status === '수신완료') return 'text-emerald-400 bg-emerald-500/10';
if (status === '수신대기') return 'text-yellow-400 bg-yellow-500/10';
return 'text-red-400 bg-red-500/10';
if (status === '수신완료') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
if (status === '수신대기') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
}
function getProcessStatusStyle(status: ProcessStatus): string {
if (status === '처리완료') return 'text-emerald-400 bg-emerald-500/10';
if (status === '처리중') return 'text-cyan-400 bg-cyan-500/10';
if (status === '대기') return 'text-yellow-400 bg-yellow-500/10';
return 'text-red-400 bg-red-500/10';
if (status === '처리완료') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
if (status === '처리중') return 'text-color-accent bg-[rgba(6,182,212,0.08)]';
if (status === '대기') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
}
function getAlertStyle(level: AlertLevel): string {
if (level === '경고') return 'text-red-400 bg-red-500/10 border-red-500/30';
if (level === '주의') return 'text-yellow-400 bg-yellow-500/10 border-yellow-500/30';
return 'text-cyan-400 bg-cyan-500/10 border-cyan-500/30';
if (level === '경고') return 'text-color-danger bg-[rgba(239,68,68,0.08)] border-[rgba(239,68,68,0.3)]';
if (level === '주의') return 'text-color-caution bg-[rgba(234,179,8,0.08)] border-[rgba(234,179,8,0.3)]';
return 'text-color-accent bg-[rgba(6,182,212,0.08)] border-[rgba(6,182,212,0.3)]';
}
// ─── 파이프라인 카드 ─────────────────────────────────────────────────────────────
@ -295,9 +295,9 @@ function PipelineCard({ node }: { node: PipelineNode }) {
return (
<div
className={`flex-1 min-w-0 bg-bg-card rounded border border-stroke-1 border-l-2 ${borderStyle} p-3 flex flex-col gap-1.5`}
className={`flex-1 min-w-0 bg-bg-card rounded border border-stroke border-l-2 ${borderStyle} p-3 flex flex-col gap-1.5`}
>
<div className="text-xs font-medium text-t1 leading-snug">{node.name}</div>
<div className="text-caption font-medium text-t1 leading-snug">{node.name}</div>
<span
className={`self-start inline-block px-1.5 py-0.5 rounded text-label-2 font-medium ${badgeStyle}`}
>
@ -316,7 +316,7 @@ function PipelineFlow({ nodes, loading }: { nodes: PipelineNode[]; loading: bool
{Array.from({ length: 5 }).map((_, i) => (
<div key={i} className="flex items-center gap-1">
<div className="flex-1 h-16 bg-bg-elevated rounded w-28" />
{i < 4 && <span className="text-t3 text-sm px-0.5">→</span>}
{i < 4 && <span className="text-t3 text-body-2 px-0.5">→</span>}
</div>
))}
</div>
@ -328,7 +328,7 @@ function PipelineFlow({ nodes, loading }: { nodes: PipelineNode[]; loading: bool
{nodes.map((node, idx) => (
<div key={node.id} className="flex items-center gap-1 flex-1 min-w-0">
<PipelineCard node={node} />
{idx < nodes.length - 1 && <span className="text-t3 text-sm shrink-0 px-0.5">→</span>}
{idx < nodes.length - 1 && <span className="text-t3 text-body-2 shrink-0 px-0.5">→</span>}
</div>
))}
</div>
@ -367,13 +367,13 @@ const LOG_HEADERS = ['시간', '데이터소스', '데이터종류', '크기', '
function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean }) {
return (
<div className="overflow-auto">
<table className="w-full text-xs border-collapse">
<table className="w-full text-caption border-collapse">
<thead>
<tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
{LOG_HEADERS.map((h) => (
<th
key={h}
className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
>
{h}
</th>
@ -383,7 +383,7 @@ function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean
<tbody>
{loading && rows.length === 0
? Array.from({ length: 8 }).map((_, i) => (
<tr key={i} className="border-b border-stroke-1 animate-pulse">
<tr key={i} className="border-b border-stroke animate-pulse">
{LOG_HEADERS.map((_, j) => (
<td key={j} className="px-3 py-2">
<div className="h-3 bg-bg-elevated rounded w-16" />
@ -392,7 +392,7 @@ function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean
</tr>
))
: rows.map((row) => (
<tr key={row.id} className="border-b border-stroke-1 hover:bg-bg-surface/50">
<tr key={row.id} className="border-b border-stroke hover:bg-bg-surface/50">
<td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.timestamp}</td>
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.source}</td>
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.dataType}</td>
@ -440,7 +440,7 @@ function AlertList({ alerts, loading }: { alerts: AlertItem[]; loading: boolean
}
if (alerts.length === 0) {
return <p className="text-xs text-t3 py-2">활성 알림이 없습니다.</p>;
return <p className="text-caption text-t3 py-2">활성 알림이 없습니다.</p>;
}
return (
@ -448,7 +448,7 @@ function AlertList({ alerts, loading }: { alerts: AlertItem[]; loading: boolean
{alerts.map((alert) => (
<div
key={alert.id}
className={`flex items-start gap-2 px-3 py-2 rounded border text-xs ${getAlertStyle(alert.level)}`}
className={`flex items-start gap-2 px-3 py-2 rounded border text-caption ${getAlertStyle(alert.level)}`}
>
<span className="font-semibold shrink-0">[{alert.level}]</span>
<span className="flex-1">{alert.message}</span>
@ -507,12 +507,12 @@ export default function RndKospsPanel() {
return (
<div className="flex flex-col h-full overflow-hidden">
{/* ── 헤더 ── */}
<div className="shrink-0 border-b border-stroke-1">
<div className="shrink-0 border-b border-stroke">
<div className="flex items-center justify-between px-5 py-3">
<h2 className="text-sm font-semibold text-t1">유출유확산예측 (KOSPS) 연계 모니터링</h2>
<h2 className="text-body-2 font-semibold text-t1">유출유확산예측 (KOSPS) 연계 모니터링</h2>
<div className="flex items-center gap-3">
{lastUpdate && (
<span className="text-xs text-t3">
<span className="text-caption text-t3">
갱신:{' '}
{lastUpdate.toLocaleTimeString('ko-KR', {
hour: '2-digit',
@ -524,7 +524,7 @@ export default function RndKospsPanel() {
<button
onClick={() => void fetchData()}
disabled={loading}
className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
className="flex items-center gap-1.5 px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
<svg
className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
@ -544,21 +544,21 @@ export default function RndKospsPanel() {
</div>
</div>
{/* 요약 통계 바 */}
<div className="flex items-center gap-4 px-5 py-2 bg-bg-base text-xs text-t3 border-t border-stroke-1">
<div className="flex items-center gap-4 px-5 py-2 bg-bg-base text-caption text-t3 border-t border-stroke">
<span>
정상 수신: <span className="text-emerald-400 font-medium">{totalReceived}건</span>
정상 수신: <span className="text-color-success font-medium">{totalReceived}건</span>
</span>
<span className="text-stroke-1">|</span>
<span>
지연: <span className="text-yellow-400 font-medium">{totalDelayed}건</span>
지연: <span className="text-color-caution font-medium">{totalDelayed}건</span>
</span>
<span className="text-stroke-1">|</span>
<span>
실패: <span className="text-red-400 font-medium">{totalFailed}건</span>
실패: <span className="text-color-danger font-medium">{totalFailed}건</span>
</span>
<span className="text-stroke-1">|</span>
<span>
금일 예측 완료: <span className="text-cyan-400 font-medium">3 / 6회</span>
금일 예측 완료: <span className="text-color-accent font-medium">3 / 6회</span>
</span>
</div>
</div>
@ -566,17 +566,17 @@ export default function RndKospsPanel() {
{/* ── 스크롤 영역 ── */}
<div className="flex-1 overflow-auto">
{/* 파이프라인 현황 */}
<section className="px-5 pt-4 pb-3 border-b border-stroke-1">
<h3 className="text-xs font-semibold text-t2 mb-3 uppercase tracking-wide">
<section className="px-5 pt-4 pb-3 border-b border-stroke">
<h3 className="text-caption font-semibold text-t2 mb-3 uppercase tracking-wide">
데이터 파이프라인 현황
</h3>
<PipelineFlow nodes={pipeline} loading={loading} />
</section>
{/* 필터 바 + 수신 이력 테이블 */}
<section className="px-5 pt-4 pb-3 border-b border-stroke-1">
<section className="px-5 pt-4 pb-3 border-b border-stroke">
<div className="flex items-center justify-between mb-3 gap-3 flex-wrap">
<h3 className="text-xs font-semibold text-t2 uppercase tracking-wide shrink-0">
<h3 className="text-caption font-semibold text-t2 uppercase tracking-wide shrink-0">
데이터 수신 이력
</h3>
<div className="flex items-center gap-2 flex-wrap">
@ -584,7 +584,7 @@ export default function RndKospsPanel() {
<select
value={filterSource}
onChange={(e) => setFilterSource(e.target.value as FilterSource)}
className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
>
<option value="all">모두 (소스)</option>
<option value="HYCOM">HYCOM</option>
@ -595,7 +595,7 @@ export default function RndKospsPanel() {
<select
value={filterReceive}
onChange={(e) => setFilterReceive(e.target.value as FilterReceive)}
className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
>
<option value="all">모두 (상태)</option>
<option value="수신완료">수신완료</option>
@ -607,13 +607,13 @@ export default function RndKospsPanel() {
<select
value={filterPeriod}
onChange={(e) => setFilterPeriod(e.target.value as FilterPeriod)}
className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
>
<option value="6h">최근 6시간</option>
<option value="12h">최근 12시간</option>
<option value="24h">최근 24시간</option>
</select>
<span className="text-xs text-t3">{filteredLogs.length}건</span>
<span className="text-caption text-t3">{filteredLogs.length}건</span>
</div>
</div>
<DataLogTable rows={filteredLogs} loading={loading} />
@ -621,7 +621,7 @@ export default function RndKospsPanel() {
{/* 알림 현황 */}
<section className="px-5 pt-4 pb-5">
<h3 className="text-xs font-semibold text-t2 uppercase tracking-wide mb-3">알림 현황</h3>
<h3 className="text-caption font-semibold text-t2 uppercase tracking-wide mb-3">알림 현황</h3>
<AlertList alerts={alerts} loading={loading} />
</section>
</div>

88
frontend/src/tabs/admin/components/RndPoseidonPanel.tsx → frontend/src/components/admin/components/RndPoseidonPanel.tsx
파일 보기

@ -284,34 +284,34 @@ function fetchPoseidonData(): Promise<PoseidonData> {
// ─── 유틸 ───────────────────────────────────────────────────────────────────────
function getPipelineStatusStyle(status: PipelineStatus): string {
if (status === '정상') return 'text-emerald-400 bg-emerald-500/10';
if (status === '지연') return 'text-yellow-400 bg-yellow-500/10';
return 'text-red-400 bg-red-500/10';
if (status === '정상') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
if (status === '지연') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
}
function getPipelineBorderStyle(status: PipelineStatus): string {
if (status === '정상') return 'border-l-emerald-500';
if (status === '지연') return 'border-l-yellow-500';
return 'border-l-red-500';
if (status === '정상') return 'border-l-color-success';
if (status === '지연') return 'border-l-color-caution';
return 'border-l-color-danger';
}
function getReceiveStatusStyle(status: ReceiveStatus): string {
if (status === '수신완료') return 'text-emerald-400 bg-emerald-500/10';
if (status === '수신대기') return 'text-yellow-400 bg-yellow-500/10';
return 'text-red-400 bg-red-500/10';
if (status === '수신완료') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
if (status === '수신대기') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
}
function getProcessStatusStyle(status: ProcessStatus): string {
if (status === '처리완료') return 'text-emerald-400 bg-emerald-500/10';
if (status === '처리중') return 'text-cyan-400 bg-cyan-500/10';
if (status === '대기') return 'text-yellow-400 bg-yellow-500/10';
return 'text-red-400 bg-red-500/10';
if (status === '처리완료') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
if (status === '처리중') return 'text-color-accent bg-[rgba(6,182,212,0.08)]';
if (status === '대기') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
}
function getAlertStyle(level: AlertLevel): string {
if (level === '경고') return 'text-red-400 bg-red-500/10 border-red-500/30';
if (level === '주의') return 'text-yellow-400 bg-yellow-500/10 border-yellow-500/30';
return 'text-cyan-400 bg-cyan-500/10 border-cyan-500/30';
if (level === '경고') return 'text-color-danger bg-[rgba(239,68,68,0.08)] border-[rgba(239,68,68,0.3)]';
if (level === '주의') return 'text-color-caution bg-[rgba(234,179,8,0.08)] border-[rgba(234,179,8,0.3)]';
return 'text-color-accent bg-[rgba(6,182,212,0.08)] border-[rgba(6,182,212,0.3)]';
}
// ─── 파이프라인 카드 ─────────────────────────────────────────────────────────────
@ -322,9 +322,9 @@ function PipelineCard({ node }: { node: PipelineNode }) {
return (
<div
className={`flex-1 min-w-0 bg-bg-card rounded border border-stroke-1 border-l-2 ${borderStyle} p-3 flex flex-col gap-1.5`}
className={`flex-1 min-w-0 bg-bg-card rounded border border-stroke border-l-2 ${borderStyle} p-3 flex flex-col gap-1.5`}
>
<div className="text-xs font-medium text-t1 leading-snug">{node.name}</div>
<div className="text-caption font-medium text-t1 leading-snug">{node.name}</div>
<span
className={`self-start inline-block px-1.5 py-0.5 rounded text-label-2 font-medium ${badgeStyle}`}
>
@ -343,7 +343,7 @@ function PipelineFlow({ nodes, loading }: { nodes: PipelineNode[]; loading: bool
{Array.from({ length: 5 }).map((_, i) => (
<div key={i} className="flex items-center gap-1">
<div className="flex-1 h-16 bg-bg-elevated rounded w-28" />
{i < 4 && <span className="text-t3 text-sm px-0.5">→</span>}
{i < 4 && <span className="text-t3 text-body-2 px-0.5">→</span>}
</div>
))}
</div>
@ -355,7 +355,7 @@ function PipelineFlow({ nodes, loading }: { nodes: PipelineNode[]; loading: bool
{nodes.map((node, idx) => (
<div key={node.id} className="flex items-center gap-1 flex-1 min-w-0">
<PipelineCard node={node} />
{idx < nodes.length - 1 && <span className="text-t3 text-sm shrink-0 px-0.5">→</span>}
{idx < nodes.length - 1 && <span className="text-t3 text-body-2 shrink-0 px-0.5">→</span>}
</div>
))}
</div>
@ -394,13 +394,13 @@ const LOG_HEADERS = ['시간', '데이터소스', '데이터종류', '크기', '
function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean }) {
return (
<div className="overflow-auto">
<table className="w-full text-xs border-collapse">
<table className="w-full text-caption border-collapse">
<thead>
<tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
{LOG_HEADERS.map((h) => (
<th
key={h}
className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
>
{h}
</th>
@ -410,7 +410,7 @@ function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean
<tbody>
{loading && rows.length === 0
? Array.from({ length: 8 }).map((_, i) => (
<tr key={i} className="border-b border-stroke-1 animate-pulse">
<tr key={i} className="border-b border-stroke animate-pulse">
{LOG_HEADERS.map((_, j) => (
<td key={j} className="px-3 py-2">
<div className="h-3 bg-bg-elevated rounded w-16" />
@ -419,7 +419,7 @@ function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean
</tr>
))
: rows.map((row) => (
<tr key={row.id} className="border-b border-stroke-1 hover:bg-bg-surface/50">
<tr key={row.id} className="border-b border-stroke hover:bg-bg-surface/50">
<td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.timestamp}</td>
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.source}</td>
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.dataType}</td>
@ -467,7 +467,7 @@ function AlertList({ alerts, loading }: { alerts: AlertItem[]; loading: boolean
}
if (alerts.length === 0) {
return <p className="text-xs text-t3 py-2">활성 알림이 없습니다.</p>;
return <p className="text-caption text-t3 py-2">활성 알림이 없습니다.</p>;
}
return (
@ -475,7 +475,7 @@ function AlertList({ alerts, loading }: { alerts: AlertItem[]; loading: boolean
{alerts.map((alert) => (
<div
key={alert.id}
className={`flex items-start gap-2 px-3 py-2 rounded border text-xs ${getAlertStyle(alert.level)}`}
className={`flex items-start gap-2 px-3 py-2 rounded border text-caption ${getAlertStyle(alert.level)}`}
>
<span className="font-semibold shrink-0">[{alert.level}]</span>
<span className="flex-1">{alert.message}</span>
@ -534,12 +534,12 @@ export default function RndPoseidonPanel() {
return (
<div className="flex flex-col h-full overflow-hidden">
{/* ── 헤더 ── */}
<div className="shrink-0 border-b border-stroke-1">
<div className="shrink-0 border-b border-stroke">
<div className="flex items-center justify-between px-5 py-3">
<h2 className="text-sm font-semibold text-t1">유출유확산예측 (포세이돈) 연계 모니터링</h2>
<h2 className="text-body-2 font-semibold text-t1">유출유확산예측 (포세이돈) 연계 모니터링</h2>
<div className="flex items-center gap-3">
{lastUpdate && (
<span className="text-xs text-t3">
<span className="text-caption text-t3">
갱신:{' '}
{lastUpdate.toLocaleTimeString('ko-KR', {
hour: '2-digit',
@ -551,7 +551,7 @@ export default function RndPoseidonPanel() {
<button
onClick={() => void fetchData()}
disabled={loading}
className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
className="flex items-center gap-1.5 px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
<svg
className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
@ -571,21 +571,21 @@ export default function RndPoseidonPanel() {
</div>
</div>
{/* 요약 통계 바 */}
<div className="flex items-center gap-4 px-5 py-2 bg-bg-base text-xs text-t3 border-t border-stroke-1">
<div className="flex items-center gap-4 px-5 py-2 bg-bg-base text-caption text-t3 border-t border-stroke">
<span>
정상 수신: <span className="text-emerald-400 font-medium">{totalReceived}건</span>
정상 수신: <span className="text-color-success font-medium">{totalReceived}건</span>
</span>
<span className="text-stroke-1">|</span>
<span>
지연: <span className="text-yellow-400 font-medium">{totalDelayed}건</span>
지연: <span className="text-color-caution font-medium">{totalDelayed}건</span>
</span>
<span className="text-stroke-1">|</span>
<span>
실패: <span className="text-red-400 font-medium">{totalFailed}건</span>
실패: <span className="text-color-danger font-medium">{totalFailed}건</span>
</span>
<span className="text-stroke-1">|</span>
<span>
금일 예측 완료: <span className="text-cyan-400 font-medium">4 / 8회</span>
금일 예측 완료: <span className="text-color-accent font-medium">4 / 8회</span>
</span>
</div>
</div>
@ -593,17 +593,17 @@ export default function RndPoseidonPanel() {
{/* ── 스크롤 영역 ── */}
<div className="flex-1 overflow-auto">
{/* 파이프라인 현황 */}
<section className="px-5 pt-4 pb-3 border-b border-stroke-1">
<h3 className="text-xs font-semibold text-t2 mb-3 uppercase tracking-wide">
<section className="px-5 pt-4 pb-3 border-b border-stroke">
<h3 className="text-caption font-semibold text-t2 mb-3 uppercase tracking-wide">
데이터 파이프라인 현황
</h3>
<PipelineFlow nodes={pipeline} loading={loading} />
</section>
{/* 필터 바 + 수신 이력 테이블 */}
<section className="px-5 pt-4 pb-3 border-b border-stroke-1">
<section className="px-5 pt-4 pb-3 border-b border-stroke">
<div className="flex items-center justify-between mb-3 gap-3 flex-wrap">
<h3 className="text-xs font-semibold text-t2 uppercase tracking-wide shrink-0">
<h3 className="text-caption font-semibold text-t2 uppercase tracking-wide shrink-0">
데이터 수신 이력
</h3>
<div className="flex items-center gap-2 flex-wrap">
@ -611,7 +611,7 @@ export default function RndPoseidonPanel() {
<select
value={filterSource}
onChange={(e) => setFilterSource(e.target.value as FilterSource)}
className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
>
<option value="all">모두 (소스)</option>
<option value="HYCOM">HYCOM</option>
@ -622,7 +622,7 @@ export default function RndPoseidonPanel() {
<select
value={filterReceive}
onChange={(e) => setFilterReceive(e.target.value as FilterReceive)}
className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
>
<option value="all">모두 (상태)</option>
<option value="수신완료">수신완료</option>
@ -634,13 +634,13 @@ export default function RndPoseidonPanel() {
<select
value={filterPeriod}
onChange={(e) => setFilterPeriod(e.target.value as FilterPeriod)}
className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
>
<option value="6h">최근 6시간</option>
<option value="12h">최근 12시간</option>
<option value="24h">최근 24시간</option>
</select>
<span className="text-xs text-t3">{filteredLogs.length}건</span>
<span className="text-caption text-t3">{filteredLogs.length}건</span>
</div>
</div>
<DataLogTable rows={filteredLogs} loading={loading} />
@ -648,7 +648,7 @@ export default function RndPoseidonPanel() {
{/* 알림 현황 */}
<section className="px-5 pt-4 pb-5">
<h3 className="text-xs font-semibold text-t2 uppercase tracking-wide mb-3">알림 현황</h3>
<h3 className="text-caption font-semibold text-t2 uppercase tracking-wide mb-3">알림 현황</h3>
<AlertList alerts={alerts} loading={loading} />
</section>
</div>

88
frontend/src/tabs/admin/components/RndRescuePanel.tsx → frontend/src/components/admin/components/RndRescuePanel.tsx
파일 보기

@ -257,34 +257,34 @@ function fetchRescueData(): Promise<RescueData> {
// ─── 유틸 ───────────────────────────────────────────────────────────────────────
function getPipelineStatusStyle(status: PipelineStatus): string {
if (status === '정상') return 'text-emerald-400 bg-emerald-500/10';
if (status === '지연') return 'text-yellow-400 bg-yellow-500/10';
return 'text-red-400 bg-red-500/10';
if (status === '정상') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
if (status === '지연') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
}
function getPipelineBorderStyle(status: PipelineStatus): string {
if (status === '정상') return 'border-l-emerald-500';
if (status === '지연') return 'border-l-yellow-500';
return 'border-l-red-500';
if (status === '정상') return 'border-l-color-success';
if (status === '지연') return 'border-l-color-caution';
return 'border-l-color-danger';
}
function getReceiveStatusStyle(status: ReceiveStatus): string {
if (status === '수신완료') return 'text-emerald-400 bg-emerald-500/10';
if (status === '수신대기') return 'text-yellow-400 bg-yellow-500/10';
return 'text-red-400 bg-red-500/10';
if (status === '수신완료') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
if (status === '수신대기') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
}
function getProcessStatusStyle(status: ProcessStatus): string {
if (status === '처리완료') return 'text-emerald-400 bg-emerald-500/10';
if (status === '처리중') return 'text-cyan-400 bg-cyan-500/10';
if (status === '대기') return 'text-yellow-400 bg-yellow-500/10';
return 'text-red-400 bg-red-500/10';
if (status === '처리완료') return 'text-color-success bg-[rgba(34,197,94,0.08)]';
if (status === '처리중') return 'text-color-accent bg-[rgba(6,182,212,0.08)]';
if (status === '대기') return 'text-color-caution bg-[rgba(234,179,8,0.08)]';
return 'text-color-danger bg-[rgba(239,68,68,0.08)]';
}
function getAlertStyle(level: AlertLevel): string {
if (level === '경고') return 'text-red-400 bg-red-500/10 border-red-500/30';
if (level === '주의') return 'text-yellow-400 bg-yellow-500/10 border-yellow-500/30';
return 'text-cyan-400 bg-cyan-500/10 border-cyan-500/30';
if (level === '경고') return 'text-color-danger bg-[rgba(239,68,68,0.08)] border-[rgba(239,68,68,0.3)]';
if (level === '주의') return 'text-color-caution bg-[rgba(234,179,8,0.08)] border-[rgba(234,179,8,0.3)]';
return 'text-color-accent bg-[rgba(6,182,212,0.08)] border-[rgba(6,182,212,0.3)]';
}
// ─── 파이프라인 카드 ─────────────────────────────────────────────────────────────
@ -295,9 +295,9 @@ function PipelineCard({ node }: { node: PipelineNode }) {
return (
<div
className={`flex-1 min-w-0 bg-bg-card rounded border border-stroke-1 border-l-2 ${borderStyle} p-3 flex flex-col gap-1.5`}
className={`flex-1 min-w-0 bg-bg-card rounded border border-stroke border-l-2 ${borderStyle} p-3 flex flex-col gap-1.5`}
>
<div className="text-xs font-medium text-t1 leading-snug">{node.name}</div>
<div className="text-caption font-medium text-t1 leading-snug">{node.name}</div>
<span
className={`self-start inline-block px-1.5 py-0.5 rounded text-label-2 font-medium ${badgeStyle}`}
>
@ -316,7 +316,7 @@ function PipelineFlow({ nodes, loading }: { nodes: PipelineNode[]; loading: bool
{Array.from({ length: 5 }).map((_, i) => (
<div key={i} className="flex items-center gap-1">
<div className="flex-1 h-16 bg-bg-elevated rounded w-28" />
{i < 4 && <span className="text-t3 text-sm px-0.5">→</span>}
{i < 4 && <span className="text-t3 text-body-2 px-0.5">→</span>}
</div>
))}
</div>
@ -328,7 +328,7 @@ function PipelineFlow({ nodes, loading }: { nodes: PipelineNode[]; loading: bool
{nodes.map((node, idx) => (
<div key={node.id} className="flex items-center gap-1 flex-1 min-w-0">
<PipelineCard node={node} />
{idx < nodes.length - 1 && <span className="text-t3 text-sm shrink-0 px-0.5">→</span>}
{idx < nodes.length - 1 && <span className="text-t3 text-body-2 shrink-0 px-0.5">→</span>}
</div>
))}
</div>
@ -367,13 +367,13 @@ const LOG_HEADERS = ['시간', '데이터소스', '데이터종류', '크기', '
function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean }) {
return (
<div className="overflow-auto">
<table className="w-full text-xs border-collapse">
<table className="w-full text-caption border-collapse">
<thead>
<tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
{LOG_HEADERS.map((h) => (
<th
key={h}
className="px-3 py-2 text-left font-medium border-b border-stroke-1 whitespace-nowrap"
className="px-3 py-2 text-left font-medium border-b border-stroke whitespace-nowrap"
>
{h}
</th>
@ -383,7 +383,7 @@ function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean
<tbody>
{loading && rows.length === 0
? Array.from({ length: 8 }).map((_, i) => (
<tr key={i} className="border-b border-stroke-1 animate-pulse">
<tr key={i} className="border-b border-stroke animate-pulse">
{LOG_HEADERS.map((_, j) => (
<td key={j} className="px-3 py-2">
<div className="h-3 bg-bg-elevated rounded w-16" />
@ -392,7 +392,7 @@ function DataLogTable({ rows, loading }: { rows: DataLogRow[]; loading: boolean
</tr>
))
: rows.map((row) => (
<tr key={row.id} className="border-b border-stroke-1 hover:bg-bg-surface/50">
<tr key={row.id} className="border-b border-stroke hover:bg-bg-surface/50">
<td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.timestamp}</td>
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.source}</td>
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.dataType}</td>
@ -440,7 +440,7 @@ function AlertList({ alerts, loading }: { alerts: AlertItem[]; loading: boolean
}
if (alerts.length === 0) {
return <p className="text-xs text-t3 py-2">활성 알림이 없습니다.</p>;
return <p className="text-caption text-t3 py-2">활성 알림이 없습니다.</p>;
}
return (
@ -448,7 +448,7 @@ function AlertList({ alerts, loading }: { alerts: AlertItem[]; loading: boolean
{alerts.map((alert) => (
<div
key={alert.id}
className={`flex items-start gap-2 px-3 py-2 rounded border text-xs ${getAlertStyle(alert.level)}`}
className={`flex items-start gap-2 px-3 py-2 rounded border text-caption ${getAlertStyle(alert.level)}`}
>
<span className="font-semibold shrink-0">[{alert.level}]</span>
<span className="flex-1">{alert.message}</span>
@ -507,12 +507,12 @@ export default function RndRescuePanel() {
return (
<div className="flex flex-col h-full overflow-hidden">
{/* ── 헤더 ── */}
<div className="shrink-0 border-b border-stroke-1">
<div className="shrink-0 border-b border-stroke">
<div className="flex items-center justify-between px-5 py-3">
<h2 className="text-sm font-semibold text-t1">긴급구난과제 연계 모니터링</h2>
<h2 className="text-body-2 font-semibold text-t1">긴급구난과제 연계 모니터링</h2>
<div className="flex items-center gap-3">
{lastUpdate && (
<span className="text-xs text-t3">
<span className="text-caption text-t3">
갱신:{' '}
{lastUpdate.toLocaleTimeString('ko-KR', {
hour: '2-digit',
@ -524,7 +524,7 @@ export default function RndRescuePanel() {
<button
onClick={() => void fetchData()}
disabled={loading}
className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
className="flex items-center gap-1.5 px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
<svg
className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
@ -544,21 +544,21 @@ export default function RndRescuePanel() {
</div>
</div>
{/* 요약 통계 바 */}
<div className="flex items-center gap-4 px-5 py-2 bg-bg-base text-xs text-t3 border-t border-stroke-1">
<div className="flex items-center gap-4 px-5 py-2 bg-bg-base text-caption text-t3 border-t border-stroke">
<span>
정상 수신: <span className="text-emerald-400 font-medium">{totalReceived}건</span>
정상 수신: <span className="text-color-success font-medium">{totalReceived}건</span>
</span>
<span className="text-stroke-1">|</span>
<span>
지연: <span className="text-yellow-400 font-medium">{totalDelayed}건</span>
지연: <span className="text-color-caution font-medium">{totalDelayed}건</span>
</span>
<span className="text-stroke-1">|</span>
<span>
실패: <span className="text-red-400 font-medium">{totalFailed}건</span>
실패: <span className="text-color-danger font-medium">{totalFailed}건</span>
</span>
<span className="text-stroke-1">|</span>
<span>
금일 분석 완료: <span className="text-cyan-400 font-medium">5 / 6회</span>
금일 분석 완료: <span className="text-color-accent font-medium">5 / 6회</span>
</span>
</div>
</div>
@ -566,17 +566,17 @@ export default function RndRescuePanel() {
{/* ── 스크롤 영역 ── */}
<div className="flex-1 overflow-auto">
{/* 파이프라인 현황 */}
<section className="px-5 pt-4 pb-3 border-b border-stroke-1">
<h3 className="text-xs font-semibold text-t2 mb-3 uppercase tracking-wide">
<section className="px-5 pt-4 pb-3 border-b border-stroke">
<h3 className="text-caption font-semibold text-t2 mb-3 uppercase tracking-wide">
데이터 파이프라인 현황
</h3>
<PipelineFlow nodes={pipeline} loading={loading} />
</section>
{/* 필터 바 + 수신 이력 테이블 */}
<section className="px-5 pt-4 pb-3 border-b border-stroke-1">
<section className="px-5 pt-4 pb-3 border-b border-stroke">
<div className="flex items-center justify-between mb-3 gap-3 flex-wrap">
<h3 className="text-xs font-semibold text-t2 uppercase tracking-wide shrink-0">
<h3 className="text-caption font-semibold text-t2 uppercase tracking-wide shrink-0">
데이터 수신 이력
</h3>
<div className="flex items-center gap-2 flex-wrap">
@ -584,7 +584,7 @@ export default function RndRescuePanel() {
<select
value={filterSource}
onChange={(e) => setFilterSource(e.target.value as FilterSource)}
className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
>
<option value="all">모두 (소스)</option>
<option value="HYCOM">HYCOM</option>
@ -595,7 +595,7 @@ export default function RndRescuePanel() {
<select
value={filterReceive}
onChange={(e) => setFilterReceive(e.target.value as FilterReceive)}
className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
>
<option value="all">모두 (상태)</option>
<option value="수신완료">수신완료</option>
@ -607,13 +607,13 @@ export default function RndRescuePanel() {
<select
value={filterPeriod}
onChange={(e) => setFilterPeriod(e.target.value as FilterPeriod)}
className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-t2 focus:outline-none focus:border-cyan-500 transition-colors"
className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t2 focus:outline-none focus:border-color-accent transition-colors"
>
<option value="6h">최근 6시간</option>
<option value="12h">최근 12시간</option>
<option value="24h">최근 24시간</option>
</select>
<span className="text-xs text-t3">{filteredLogs.length}건</span>
<span className="text-caption text-t3">{filteredLogs.length}건</span>
</div>
</div>
<DataLogTable rows={filteredLogs} loading={loading} />
@ -621,7 +621,7 @@ export default function RndRescuePanel() {
{/* 알림 현황 */}
<section className="px-5 pt-4 pb-5">
<h3 className="text-xs font-semibold text-t2 uppercase tracking-wide mb-3">알림 현황</h3>
<h3 className="text-caption font-semibold text-t2 uppercase tracking-wide mb-3">알림 현황</h3>
<AlertList alerts={alerts} loading={loading} />
</section>
</div>

4
frontend/src/tabs/admin/components/SensitiveLayerPanel.tsx → frontend/src/components/admin/components/SensitiveLayerPanel.tsx
파일 보기

@ -135,7 +135,7 @@ const SensitiveLayerPanel = ({ categoryCode, title }: SensitiveLayerPanelProps)
<div className="px-6 py-4 border-b border-stroke shrink-0">
<div className="flex items-center justify-between mb-3">
<div>
<h1 className="text-lg font-bold text-fg font-korean">{title}</h1>
<h1 className="text-title-1 font-bold text-fg font-korean">{title}</h1>
<p className="text-caption text-fg-disabled mt-1 font-korean">총 {total}개</p>
</div>
</div>
@ -168,7 +168,7 @@ const SensitiveLayerPanel = ({ categoryCode, title }: SensitiveLayerPanelProps)
{/* 오류 메시지 */}
{error && (
<div className="px-6 py-2 text-caption text-red-400 bg-[rgba(239,68,68,0.05)] border-b border-stroke shrink-0 font-korean">
<div className="px-6 py-2 text-caption text-color-danger bg-[rgba(239,68,68,0.08)] border-b border-stroke shrink-0 font-korean">
{error}
</div>
)}

24
frontend/src/tabs/admin/components/SettingsPanel.tsx → frontend/src/components/admin/components/SettingsPanel.tsx
파일 보기

@ -63,7 +63,7 @@ function SettingsPanel() {
return (
<div className="flex flex-col h-full">
<div className="px-6 py-4 border-b border-stroke">
<h1 className="text-lg font-bold text-fg font-korean">시스템 설정</h1>
<h1 className="text-title-1 font-bold text-fg font-korean">시스템 설정</h1>
<p className="text-caption text-fg-disabled mt-1 font-korean">
사용자 등록 및 권한 관련 시스템 설정을 관리합니다
</p>
@ -87,9 +87,9 @@ function SettingsPanel() {
<div className="text-title-4 font-semibold text-fg font-korean">자동 승인</div>
<p className="text-label-2 text-fg-disabled mt-1 font-korean leading-relaxed">
활성화하면 신규 사용자가 등록 즉시{' '}
<span className="text-green-400 font-semibold">ACTIVE</span> 상태가 됩니다.
<span className="text-color-success font-semibold">ACTIVE</span> 상태가 됩니다.
비활성화하면 관리자 승인 전까지{' '}
<span className="text-yellow-400 font-semibold">PENDING</span> 상태로
<span className="text-color-caution font-semibold">PENDING</span> 상태로
대기합니다.
</p>
</div>
@ -152,8 +152,8 @@ function SettingsPanel() {
</div>
<p className="text-label-2 text-fg-disabled font-korean leading-relaxed mb-3">
지정된 도메인의 Google 계정은 가입 즉시{' '}
<span className="text-green-400 font-semibold">ACTIVE</span> 상태가 됩니다. 미지정
도메인은 <span className="text-yellow-400 font-semibold">PENDING</span> 상태로
<span className="text-color-success font-semibold">ACTIVE</span> 상태가 됩니다. 미지정
도메인은 <span className="text-color-caution font-semibold">PENDING</span> 상태로
관리자 승인이 필요합니다. 여러 도메인은 쉼표(,)로 구분합니다.
</p>
<div className="flex gap-2">
@ -226,25 +226,25 @@ function SettingsPanel() {
<div className="flex flex-col gap-3 text-label-1 font-korean">
<div className="flex items-center gap-2">
<span
className={`w-2 h-2 rounded-full ${settings?.autoApprove ? 'bg-green-400' : 'bg-yellow-400'}`}
className={`w-2 h-2 rounded-full ${settings?.autoApprove ? 'bg-color-success' : 'bg-color-caution'}`}
/>
<span className="text-fg-sub">
신규 사용자 등록 시{' '}
{settings?.autoApprove ? (
<span className="text-green-400 font-semibold">즉시 활성화</span>
<span className="text-color-success font-semibold">즉시 활성화</span>
) : (
<span className="text-yellow-400 font-semibold">관리자 승인 필요</span>
<span className="text-color-caution font-semibold">관리자 승인 필요</span>
)}
</span>
</div>
<div className="flex items-center gap-2">
<span
className={`w-2 h-2 rounded-full ${settings?.defaultRole ? 'bg-green-400' : 'bg-fg-disabled'}`}
className={`w-2 h-2 rounded-full ${settings?.defaultRole ? 'bg-color-success' : 'bg-fg-disabled'}`}
/>
<span className="text-fg-sub">
기본 역할 자동 할당{' '}
{settings?.defaultRole ? (
<span className="text-green-400 font-semibold">활성</span>
<span className="text-color-success font-semibold">활성</span>
) : (
<span className="text-fg-disabled font-semibold">비활성</span>
)}
@ -252,12 +252,12 @@ function SettingsPanel() {
</div>
<div className="flex items-center gap-2">
<span
className={`w-2 h-2 rounded-full ${oauthSettings?.autoApproveDomains ? 'bg-blue-400' : 'bg-fg-disabled'}`}
className={`w-2 h-2 rounded-full ${oauthSettings?.autoApproveDomains ? 'bg-color-info' : 'bg-fg-disabled'}`}
/>
<span className="text-fg-sub">
Google OAuth 자동 승인 도메인{' '}
{oauthSettings?.autoApproveDomains ? (
<span className="text-blue-400 font-semibold font-mono">
<span className="text-color-info font-semibold font-mono">
{oauthSettings.autoApproveDomains}
</span>
) : (

0
frontend/src/tabs/admin/components/SortableMenuItem.tsx → frontend/src/components/admin/components/SortableMenuItem.tsx
파일 보기

57
frontend/src/components/admin/components/SystemArchPanel.tsx Normal file
파일 보기

@ -0,0 +1,57 @@
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>
);
}

563
frontend/src/components/admin/components/UsersPanel.tsx Normal file
파일 보기

@ -0,0 +1,563 @@
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;

21
frontend/src/tabs/admin/components/VesselMaterialsPanel.tsx → frontend/src/components/admin/components/VesselMaterialsPanel.tsx
파일 보기

@ -1,7 +1,7 @@
import { useState, useEffect, useMemo } from 'react';
import { fetchOrganizations } from '@tabs/assets/services/assetsApi';
import type { AssetOrgCompat } from '@tabs/assets/services/assetsApi';
import { typeTagCls } from '@tabs/assets/components/assetTypes';
import { fetchOrganizations } from '@components/assets/services/assetsApi';
import type { AssetOrgCompat } from '@interfaces/assets/AssetsInterface';
import { typeTagCls } from '@components/assets/components/assetTypes';
const PAGE_SIZE = 20;
@ -89,7 +89,7 @@ function VesselMaterialsPanel() {
{/* 헤더 */}
<div className="flex items-center justify-between px-6 py-4 border-b border-stroke">
<div>
<h1 className="text-lg font-bold text-fg font-korean">방제선 보유자재 현황</h1>
<h1 className="text-title-1 font-bold text-fg font-korean">방제선 보유자재 현황</h1>
<p className="text-caption text-fg-disabled mt-1 font-korean">
총 {filtered.length}개 기관 (방제선 보유)
</p>
@ -327,16 +327,11 @@ function VesselMaterialsPanel() {
<button
key={p}
onClick={() => setCurrentPage(p)}
className="px-2.5 py-1 text-label-2 border rounded transition-colors"
style={
className={`px-2.5 py-1 text-label-2 border rounded transition-colors ${
p === safePage
? {
borderColor: 'var(--color-accent)',
color: 'var(--color-accent)',
background: 'rgba(6,182,212,0.1)',
}
: { borderColor: 'var(--border)', color: 'var(--text-2)' }
}
? 'border-color-accent text-color-accent bg-[rgba(6,182,212,0.08)]'
: 'border-stroke text-fg-sub'
}`}
>
{p}
</button>

25
frontend/src/tabs/admin/components/VesselSignalPanel.tsx → frontend/src/components/admin/components/VesselSignalPanel.tsx
파일 보기

@ -10,18 +10,10 @@ interface SignalSlot {
}
// ─── 상수 ──────────────────────────────────────────────────
const SOURCE_COLORS: Record<SignalSource, string> = {
VTS: '#3b82f6',
'VTS-AIS': '#a855f7',
'V-PASS': '#22c55e',
'E-NAVI': '#f97316',
'S&P AIS': '#ec4899',
};
const STATUS_COLOR: Record<string, string> = {
ok: '#22c55e',
warn: '#eab308',
error: '#ef4444',
ok: 'var(--color-success)',
warn: 'var(--color-caution)',
error: 'var(--color-danger)',
none: 'rgba(255,255,255,0.06)',
};
@ -141,18 +133,18 @@ export default function VesselSignalPanel() {
return (
<div className="flex flex-col h-full overflow-hidden">
{/* 헤더 */}
<div className="flex items-center justify-between px-6 py-3 border-b border-stroke-1">
<div className="flex items-center justify-between px-6 py-3 border-b border-stroke">
<h2 className="text-body-2 font-semibold text-fg">선박신호 수신 현황</h2>
<div className="flex items-center gap-3">
<input
type="date"
value={date}
onChange={(e) => setDate(e.target.value)}
className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke-1 text-fg"
className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-fg"
/>
<button
onClick={load}
className="px-3 py-1 text-caption rounded bg-bg-elevated border border-stroke-1 text-fg-sub hover:bg-bg-card"
className="px-3 py-1 text-caption rounded bg-bg-elevated border border-stroke text-fg-sub hover:bg-bg-card"
>
새로고침
</button>
@ -172,7 +164,6 @@ export default function VesselSignalPanel() {
{/* 시간축 높이 맞춤 빈칸 */}
<div className="h-5 mb-3" />
{SIGNAL_SOURCES.map((src) => {
const c = SOURCE_COLORS[src];
const st = stats.find((s) => s.src === src)!;
return (
<div
@ -180,10 +171,10 @@ export default function VesselSignalPanel() {
className="flex flex-col justify-center mb-4"
style={{ height: 20 }}
>
<span className="text-label-1 font-semibold leading-tight" style={{ color: c }}>
<span className="text-label-1 font-semibold leading-tight text-fg">
{src}
</span>
<span className="text-caption font-mono text-text-4 mt-0.5">{st.rate}%</span>
<span className="text-caption font-mono text-fg-sub mt-0.5">{st.rate}%</span>
</div>
);
})}

0
frontend/src/tabs/admin/components/adminConstants.ts → frontend/src/components/admin/components/adminConstants.ts
파일 보기

0
frontend/src/tabs/admin/components/adminMenuConfig.ts → frontend/src/components/admin/components/adminMenuConfig.ts
파일 보기

212
frontend/src/components/admin/components/contents/AuditLogModal.tsx Normal file
파일 보기

@ -0,0 +1,212 @@
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>
);
}

765
frontend/src/components/admin/components/contents/CommonFeaturesTab.tsx Normal file
파일 보기

@ -0,0 +1,765 @@
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>
);
}

171
frontend/src/components/admin/components/contents/FrameworkTab.tsx Normal file
파일 보기

@ -0,0 +1,171 @@
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>
);
}

367
frontend/src/components/admin/components/contents/HeterogeneousTab.tsx Normal file
파일 보기

@ -0,0 +1,367 @@
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>
);
}

236
frontend/src/components/admin/components/contents/InterfaceTab.tsx Normal file
파일 보기

@ -0,0 +1,236 @@
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>
);
}

70
frontend/src/components/admin/components/contents/PermCell.tsx Normal file
파일 보기

@ -0,0 +1,70 @@
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>
);
}

36
frontend/src/components/admin/components/contents/PermLegend.tsx Normal file
파일 보기

@ -0,0 +1,36 @@
export function PermLegend() {
return (
<div
className="flex items-center gap-3 px-4 py-1.5 border-b border-stroke bg-bg-surface text-caption text-fg-disabled font-korean"
style={{ flexShrink: 0 }}
>
<span className="flex items-center gap-1">
<span className="inline-block w-3 h-3 rounded border bg-[rgba(6,182,212,0.2)] border-color-accent text-color-accent text-center text-caption leading-3">
✓
</span>
허용
</span>
<span className="flex items-center gap-1">
<span className="inline-block w-3 h-3 rounded border bg-[rgba(6,182,212,0.08)] border-[rgba(6,182,212,0.3)] text-[rgba(6,182,212,0.5)] text-center text-caption leading-3">
✓
</span>
상속
</span>
<span className="flex items-center gap-1">
<span className="inline-block w-3 h-3 rounded border bg-[rgba(239,68,68,0.08)] border-[rgba(239,68,68,0.3)] text-color-danger text-center text-caption leading-3">
—
</span>
거부
</span>
<span className="flex items-center gap-1">
<span className="inline-block w-3 h-3 rounded border bg-bg-elevated border-stroke text-fg-disabled opacity-40 text-center text-caption leading-3">
—
</span>
비활성
</span>
<span className="ml-2 border-l border-stroke pl-2 text-fg-disabled">
R=조회 C=생성 U=수정 D=삭제
</span>
</div>
);
}

15
frontend/src/components/admin/components/contents/ProgressBar.tsx Normal file
파일 보기

@ -0,0 +1,15 @@
export function ProgressBar({ value }: { value: number }) {
const colorClass =
value === 100 ? 'bg-color-success' : value > 0 ? 'bg-color-accent' : 'bg-bg-elevated';
return (
<div className="flex items-center gap-2">
<div className="flex-1 h-1.5 bg-bg-elevated rounded-full overflow-hidden">
<div
className={`h-full rounded-full transition-all ${colorClass}`}
style={{ width: `${value}%` }}
/>
</div>
<span className="text-t3 w-8 text-right">{value}%</span>
</div>
);
}

228
frontend/src/components/admin/components/contents/RegisterModal.tsx Normal file
파일 보기

@ -0,0 +1,228 @@
import { useState } from 'react';
import { createUserApi, type RoleWithPermissions, type OrgItem } from '@common/services/authApi';
import { getRoleColor } from '../adminConstants';
interface RegisterModalProps {
allRoles: RoleWithPermissions[];
allOrgs: OrgItem[];
onClose: () => void;
onSuccess: () => void;
}
export function RegisterModal({ allRoles, allOrgs, onClose, onSuccess }: RegisterModalProps) {
const [account, setAccount] = useState('');
const [password, setPassword] = useState('');
const [name, setName] = useState('');
const [rank, setRank] = useState('');
const [orgSn, setOrgSn] = useState<number | ''>(() => {
const defaultOrg = allOrgs.find((o) => o.orgNm === '기동방제과');
return defaultOrg ? defaultOrg.orgSn : '';
});
const [email, setEmail] = useState('');
const [roleSns, setRoleSns] = useState<number[]>([]);
const [submitting, setSubmitting] = useState(false);
const [error, setError] = useState<string | null>(null);
const toggleRole = (sn: number) => {
setRoleSns((prev) => (prev.includes(sn) ? prev.filter((s) => s !== sn) : [...prev, sn]));
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!account.trim() || !password.trim() || !name.trim()) {
setError('계정, 비밀번호, 사용자명은 필수 항목입니다.');
return;
}
setSubmitting(true);
setError(null);
try {
await createUserApi({
account: account.trim(),
password,
name: name.trim(),
rank: rank.trim() || undefined,
orgSn: orgSn !== '' ? orgSn : undefined,
roleSns: roleSns.length > 0 ? roleSns : undefined,
});
onSuccess();
onClose();
} catch (err) {
setError('사용자 등록에 실패했습니다.');
console.error('사용자 등록 실패:', err);
} finally {
setSubmitting(false);
}
};
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
<div className="bg-bg-surface border border-stroke rounded-lg shadow-lg w-[480px] max-h-[90vh] flex flex-col">
{/* 헤더 */}
<div className="flex items-center justify-between px-6 py-4 border-b border-stroke">
<h2 className="text-body-2 font-bold text-fg font-korean">사용자 등록</h2>
<button onClick={onClose} className="text-fg-disabled hover:text-fg transition-colors">
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
>
<path d="M18 6L6 18M6 6l12 12" />
</svg>
</button>
</div>
{/* 폼 */}
<form onSubmit={handleSubmit} className="flex-1 overflow-y-auto">
<div className="px-6 py-4 space-y-4">
{/* 계정 */}
<div>
<label className="block text-label-2 font-semibold text-fg-sub font-korean mb-1.5">
계정 <span className="text-color-danger">*</span>
</label>
<input
type="text"
value={account}
onChange={(e) => setAccount(e.target.value)}
placeholder="로그인 계정 ID"
className="w-full 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-mono"
/>
</div>
{/* 비밀번호 */}
<div>
<label className="block text-label-2 font-semibold text-fg-sub font-korean mb-1.5">
비밀번호 <span className="text-color-danger">*</span>
</label>
<input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="초기 비밀번호"
className="w-full 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-mono"
/>
</div>
{/* 사용자명 */}
<div>
<label className="block text-label-2 font-semibold text-fg-sub font-korean mb-1.5">
사용자명 <span className="text-color-danger">*</span>
</label>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="실명"
className="w-full 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"
/>
</div>
{/* 직급 */}
<div>
<label className="block text-label-2 font-semibold text-fg-sub font-korean mb-1.5">
직급
</label>
<input
type="text"
value={rank}
onChange={(e) => setRank(e.target.value)}
placeholder="예: 팀장, 주임 등"
className="w-full 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"
/>
</div>
{/* 소속 */}
<div>
<label className="block text-label-2 font-semibold text-fg-sub font-korean mb-1.5">
소속
</label>
<select
value={orgSn}
onChange={(e) => setOrgSn(e.target.value !== '' ? Number(e.target.value) : '')}
className="w-full 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={org.orgSn}>
{org.orgNm}
{org.orgAbbrNm ? ` (${org.orgAbbrNm})` : ''}
</option>
))}
</select>
</div>
{/* 이메일 */}
<div>
<label className="block text-label-2 font-semibold text-fg-sub font-korean mb-1.5">
이메일
</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="이메일 주소"
className="w-full 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-mono"
/>
</div>
{/* 역할 */}
<div>
<label className="block text-label-2 font-semibold text-fg-sub font-korean mb-1.5">
역할
</label>
<div className="bg-bg-elevated border border-stroke rounded-md p-2 space-y-1 max-h-[120px] overflow-y-auto">
{allRoles.length === 0 ? (
<p className="text-caption text-fg-disabled font-korean px-1 py-1">역할 없음</p>
) : (
allRoles.map((role, idx) => {
const color = getRoleColor(role.code, idx);
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={roleSns.includes(role.sn)}
onChange={() => toggleRole(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>
</div>
{/* 에러 메시지 */}
{error && <p className="text-label-2 text-color-danger font-korean">{error}</p>}
</div>
{/* 푸터 */}
<div className="flex items-center justify-end gap-2 px-6 py-4 border-t border-stroke">
<button
type="button"
onClick={onClose}
className="px-4 py-2 text-caption border border-stroke text-fg-sub rounded-md hover:bg-[rgba(6,182,212,0.08)] transition-all font-korean"
>
취소
</button>
<button
type="submit"
disabled={submitting}
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 disabled:opacity-50 font-korean"
>
{submitting ? '등록 중...' : '등록'}
</button>
</div>
</form>
</div>
</div>
);
}

312
frontend/src/components/admin/components/contents/RolePermTab.tsx Normal file
파일 보기

@ -0,0 +1,312 @@
import type { PermTreeNode, RoleWithPermissions } from '@common/services/authApi';
import type { PermState, OperCode } from '../PermissionsPanel';
import { OPER_CODES, OPER_FULL_LABELS, OPER_LABELS, buildEffectiveStates } from '../PermissionsPanel';
import { TreeRow } from './TreeRow';
import { PermLegend } from './PermLegend';
interface RolePermTabProps {
roles: RoleWithPermissions[];
permTree: PermTreeNode[];
rolePerms: Map<number, Map<string, boolean>>;
setRolePerms: React.Dispatch<React.SetStateAction<Map<number, Map<string, boolean>>>>;
selectedRoleSn: number | null;
setSelectedRoleSn: (sn: number | null) => void;
dirty: boolean;
saving: boolean;
saveError: string | null;
handleSave: () => Promise<void>;
handleToggleExpand: (code: string) => void;
handleTogglePerm: (code: string, oper: OperCode, currentState: PermState) => void;
expanded: Set<string>;
flatNodes: PermTreeNode[];
editingRoleSn: number | null;
editRoleName: string;
setEditRoleName: (name: string) => void;
handleStartEditName: (role: RoleWithPermissions) => void;
handleSaveRoleName: (roleSn: number) => Promise<void>;
setEditingRoleSn: (sn: number | null) => void;
toggleDefault: (roleSn: number) => Promise<void>;
handleDeleteRole: (roleSn: number, roleName: string) => Promise<void>;
showCreateForm: boolean;
setShowCreateForm: (show: boolean) => void;
setCreateError: (err: string) => void;
newRoleCode: string;
setNewRoleCode: (code: string) => void;
newRoleName: string;
setNewRoleName: (name: string) => void;
newRoleDesc: string;
setNewRoleDesc: (desc: string) => void;
creating: boolean;
createError: string;
handleCreateRole: () => Promise<void>;
}
export function RolePermTab({
roles,
permTree,
selectedRoleSn,
setSelectedRoleSn,
dirty,
saving,
saveError,
handleSave,
handleToggleExpand,
handleTogglePerm,
expanded,
flatNodes,
rolePerms,
editingRoleSn,
editRoleName,
setEditRoleName,
handleStartEditName,
handleSaveRoleName,
setEditingRoleSn,
toggleDefault,
handleDeleteRole,
showCreateForm,
setShowCreateForm,
setCreateError,
newRoleCode,
setNewRoleCode,
newRoleName,
setNewRoleName,
newRoleDesc,
setNewRoleDesc,
creating,
createError,
handleCreateRole,
}: RolePermTabProps) {
const currentStateMap = selectedRoleSn
? buildEffectiveStates(flatNodes, rolePerms.get(selectedRoleSn) ?? new Map())
: new Map<string, PermState>();
return (
<>
{/* 헤더 액션 버튼 */}
<div
className="flex items-center gap-2 px-4 py-2 border-b border-stroke"
style={{ flexShrink: 0 }}
>
<button
onClick={() => {
setShowCreateForm(true);
setCreateError('');
}}
className="px-3 py-1.5 text-label-2 font-semibold rounded-md border border-color-accent text-color-accent hover:bg-[rgba(6,182,212,0.08)] transition-all font-korean"
>
+ 역할 추가
</button>
<button
onClick={handleSave}
disabled={!dirty || saving}
className={`px-3 py-1.5 text-label-2 font-semibold rounded-md transition-all font-korean ${
dirty
? 'bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)]'
: 'bg-bg-card text-fg-disabled cursor-not-allowed'
}`}
>
{saving ? '저장 중...' : '변경사항 저장'}
</button>
{saveError && (
<span className="text-label-2 text-color-danger font-korean">{saveError}</span>
)}
</div>
{/* 역할 탭 바 */}
<div
className="flex items-center gap-1.5 px-4 py-2 border-b border-stroke bg-bg-surface overflow-x-auto"
style={{ flexShrink: 0 }}
>
{roles.map((role) => {
const isSelected = selectedRoleSn === role.sn;
return (
<div key={role.sn} className="flex items-center gap-0.5 flex-shrink-0">
<button
onClick={() => setSelectedRoleSn(role.sn)}
className={`px-2.5 py-1 text-label-2 font-semibold rounded-md transition-all font-korean ${
isSelected
? 'border-2 border-color-accent text-color-accent shadow-[0_0_8px_rgba(6,182,212,0.2)]'
: 'border border-stroke text-fg-disabled hover:border-stroke-light hover:text-fg-sub'
}`}
>
{editingRoleSn === role.sn ? (
<input
type="text"
value={editRoleName}
onChange={(e) => setEditRoleName(e.target.value)}
onKeyDown={(e) => {
if (e.key === 'Enter') handleSaveRoleName(role.sn);
if (e.key === 'Escape') setEditingRoleSn(null);
}}
onBlur={() => handleSaveRoleName(role.sn)}
onClick={(e) => e.stopPropagation()}
autoFocus
className="w-20 px-1 py-0 text-label-2 font-semibold bg-bg-elevated border border-color-accent rounded text-center text-fg focus:outline-none font-korean"
/>
) : (
<span onDoubleClick={() => handleStartEditName(role)}>{role.name}</span>
)}
<span className="ml-1 text-caption font-mono opacity-50">{role.code}</span>
{role.isDefault && (
<span className="ml-1 text-caption text-color-accent">기본</span>
)}
</button>
{isSelected && (
<div className="flex items-center gap-0.5">
<button
onClick={() => toggleDefault(role.sn)}
className={`px-1.5 py-0.5 text-caption rounded transition-all font-korean ${
role.isDefault
? 'bg-[rgba(6,182,212,0.15)] text-color-accent'
: 'text-fg-disabled hover:text-fg-sub'
}`}
title="신규 사용자 기본 역할 설정"
>
{role.isDefault ? '기본역할' : '기본설정'}
</button>
{role.code !== 'ADMIN' && (
<button
onClick={() => handleDeleteRole(role.sn, role.name)}
className="w-5 h-5 flex items-center justify-center text-fg-disabled hover:text-color-danger transition-colors"
title="역할 삭제"
>
<svg
width="10"
height="10"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</button>
)}
</div>
)}
</div>
);
})}
</div>
{/* 범례 */}
<PermLegend />
{/* CRUD 매트릭스 테이블 */}
{selectedRoleSn ? (
<div className="flex-1 overflow-auto">
<table className="w-full">
<thead>
<tr className="border-b border-stroke bg-bg-surface sticky top-0 z-10">
<th className="px-3 py-1.5 text-left text-caption font-semibold text-fg-disabled font-korean min-w-[200px]">
기능
</th>
{OPER_CODES.map((oper) => (
<th key={oper} className="px-1 py-1.5 text-center w-12">
<div className="text-caption font-semibold text-fg-sub">
{OPER_LABELS[oper]}
</div>
<div className="text-caption text-fg-disabled font-korean">
{OPER_FULL_LABELS[oper]}
</div>
</th>
))}
</tr>
</thead>
<tbody>
{permTree.map((rootNode) => (
<TreeRow
key={rootNode.code}
node={rootNode}
stateMap={currentStateMap}
expanded={expanded}
onToggleExpand={handleToggleExpand}
onTogglePerm={handleTogglePerm}
/>
))}
</tbody>
</table>
</div>
) : (
<div className="flex-1 flex items-center justify-center text-fg-disabled text-body-2 font-korean">
역할을 선택하세요
</div>
)}
{/* 역할 생성 모달 */}
{showCreateForm && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
<div className="w-[400px] bg-bg-surface rounded-lg border border-stroke shadow-2xl">
<div className="px-5 py-4 border-b border-stroke">
<h3 className="text-body-2 font-bold text-fg font-korean">새 역할 추가</h3>
</div>
<div className="px-5 py-4 flex flex-col gap-3">
<div>
<label className="text-label-2 text-fg-disabled font-korean block mb-1">
역할 코드
</label>
<input
type="text"
value={newRoleCode}
onChange={(e) =>
setNewRoleCode(e.target.value.toUpperCase().replace(/[^A-Z0-9_]/g, ''))
}
placeholder="CUSTOM_ROLE"
className="w-full 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-mono"
/>
<p className="text-caption text-fg-disabled mt-1 font-korean">
영문 대문자, 숫자, 언더스코어만 허용 (생성 후 변경 불가)
</p>
</div>
<div>
<label className="text-label-2 text-fg-disabled font-korean block mb-1">
역할 이름
</label>
<input
type="text"
value={newRoleName}
onChange={(e) => setNewRoleName(e.target.value)}
placeholder="사용자 정의 역할"
className="w-full 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"
/>
</div>
<div>
<label className="text-label-2 text-fg-disabled font-korean block mb-1">
설명 (선택)
</label>
<input
type="text"
value={newRoleDesc}
onChange={(e) => setNewRoleDesc(e.target.value)}
placeholder="역할에 대한 설명"
className="w-full 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"
/>
</div>
{createError && (
<div className="px-3 py-2 text-label-2 text-color-danger bg-[rgba(239,68,68,0.08)] border border-[rgba(239,68,68,0.2)] rounded-md font-korean">
{createError}
</div>
)}
</div>
<div className="px-5 py-3 border-t border-stroke flex justify-end gap-2">
<button
onClick={() => setShowCreateForm(false)}
className="px-4 py-2 text-caption text-fg-disabled border border-stroke rounded-md hover:bg-bg-surface-hover font-korean"
>
취소
</button>
<button
onClick={handleCreateRole}
disabled={!newRoleCode || !newRoleName || creating}
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 disabled:opacity-50"
>
{creating ? '생성 중...' : '생성'}
</button>
</div>
</div>
</div>
)}
</>
);
}

120
frontend/src/components/admin/components/contents/Step1.tsx Normal file
파일 보기

@ -0,0 +1,120 @@
import type { ApiConfig, DbConfig, SourceType, WizardState } from '../DeidentifyPanel';
interface Step1Props {
wizard: WizardState;
onChange: (patch: Partial<WizardState>) => void;
}
export function Step1({ wizard, onChange }: Step1Props) {
const handleDbChange = (key: keyof DbConfig, value: string) => {
onChange({ dbConfig: { ...wizard.dbConfig, [key]: value } });
};
const handleApiChange = (key: keyof ApiConfig, value: string) => {
onChange({ apiConfig: { ...wizard.apiConfig, [key]: value } });
};
return (
<div className="space-y-5">
<div>
<label className="block text-caption font-medium text-t2 mb-1">작업명 *</label>
<input
type="text"
value={wizard.taskName}
onChange={(e) => onChange({ taskName: e.target.value })}
placeholder="작업 이름을 입력하세요"
className="w-full px-3 py-2 text-caption rounded bg-bg-elevated border border-stroke text-t1 placeholder:text-t3 focus:outline-none focus:border-color-accent"
/>
</div>
<div>
<label className="block text-caption font-medium text-t2 mb-2">소스 유형 *</label>
<div className="flex flex-col gap-2">
{(
[
['db', '데이터베이스 연결'],
['file', '파일 업로드'],
['api', 'API 호출'],
] as [SourceType, string][]
).map(([val, label]) => (
<label key={val} className="flex items-center gap-2 cursor-pointer">
<input
type="radio"
name="sourceType"
value={val}
checked={wizard.sourceType === val}
onChange={() => onChange({ sourceType: val })}
className="accent-cyan-500"
/>
<span className="text-caption text-t1">{label}</span>
</label>
))}
</div>
</div>
{wizard.sourceType === 'db' && (
<div className="grid grid-cols-2 gap-3 p-4 rounded bg-bg-surface border border-stroke">
{(
[
['host', '호스트', 'localhost'],
['port', '포트', '5432'],
['database', '데이터베이스', 'wing'],
['tableName', '테이블명', 'public.customers'],
] as [keyof DbConfig, string, string][]
).map(([key, labelText, placeholder]) => (
<div key={key}>
<label className="block text-label-2 text-t3 mb-1">{labelText}</label>
<input
type="text"
value={wizard.dbConfig[key]}
onChange={(e) => handleDbChange(key, e.target.value)}
placeholder={placeholder}
className="w-full 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"
/>
</div>
))}
</div>
)}
{wizard.sourceType === 'file' && (
<div className="p-8 rounded border-2 border-dashed border-stroke bg-bg-surface flex flex-col items-center gap-2 text-center">
<svg className="w-8 h-8 text-t3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
/>
</svg>
<p className="text-caption text-t2">파일을 드래그하거나 클릭하여 업로드</p>
<p className="text-label-2 text-t3">CSV, XLSX, JSON 지원 (최대 500MB)</p>
</div>
)}
{wizard.sourceType === 'api' && (
<div className="p-4 rounded bg-bg-surface border border-stroke space-y-3">
<div>
<label className="block text-label-2 text-t3 mb-1">API URL</label>
<input
type="text"
value={wizard.apiConfig.url}
onChange={(e) => handleApiChange('url', e.target.value)}
placeholder="https://api.example.com/data"
className="w-full 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"
/>
</div>
<div>
<label className="block text-label-2 text-t3 mb-1">메서드</label>
<select
value={wizard.apiConfig.method}
onChange={(e) => handleApiChange('method', e.target.value)}
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="GET">GET</option>
<option value="POST">POST</option>
</select>
</div>
</div>
)}
</div>
);
}

77
frontend/src/components/admin/components/contents/Step2.tsx Normal file
파일 보기

@ -0,0 +1,77 @@
import type { WizardState } from '../DeidentifyPanel';
interface Step2Props {
wizard: WizardState;
onChange: (patch: Partial<WizardState>) => void;
}
export function Step2({ wizard, onChange }: Step2Props) {
const toggleField = (idx: number) => {
const updated = wizard.fields.map((f, i) => (i === idx ? { ...f, selected: !f.selected } : f));
onChange({ fields: updated });
};
return (
<div className="space-y-4">
<div className="grid grid-cols-3 gap-3">
{[
{ label: '총 데이터 건수', value: '15,240건', color: 'text-t1' },
{ label: '중복', value: '0건', color: 'text-color-success' },
{ label: '누락값', value: '23건', color: 'text-color-caution' },
].map((stat) => (
<div key={stat.label} className="p-3 rounded bg-bg-surface border border-stroke">
<p className="text-label-2 text-t3 mb-1">{stat.label}</p>
<p className={`text-body-2 font-semibold ${stat.color}`}>{stat.value}</p>
</div>
))}
</div>
<div>
<h4 className="text-caption font-medium text-t2 mb-2">스키마 분석 결과 — 포함 필드 선택</h4>
<div className="rounded border border-stroke overflow-hidden">
<table className="w-full text-caption border-collapse">
<thead>
<tr className="bg-bg-elevated text-t3">
<th className="px-3 py-2 text-left font-medium border-b border-stroke w-8">
<input
type="checkbox"
checked={wizard.fields.every((f) => f.selected)}
onChange={(e) =>
onChange({
fields: wizard.fields.map((f) => ({ ...f, selected: e.target.checked })),
})
}
className="accent-cyan-500"
/>
</th>
<th className="px-3 py-2 text-left font-medium border-b border-stroke">필드명</th>
<th className="px-3 py-2 text-left font-medium border-b border-stroke">
데이터 타입
</th>
</tr>
</thead>
<tbody>
{wizard.fields.map((field, idx) => (
<tr key={field.name} className="border-b border-stroke hover:bg-bg-surface/50">
<td className="px-3 py-2">
<input
type="checkbox"
checked={field.selected}
onChange={() => toggleField(idx)}
className="accent-cyan-500"
/>
</td>
<td className="px-3 py-2 font-medium text-t1">{field.name}</td>
<td className="px-3 py-2 text-t3">{field.dataType}</td>
</tr>
))}
</tbody>
</table>
</div>
<p className="mt-1.5 text-label-2 text-t3">
{wizard.fields.filter((f) => f.selected).length}개 선택됨 (전체 {wizard.fields.length}개)
</p>
</div>
</div>
);
}

97
frontend/src/components/admin/components/contents/Step3.tsx Normal file
파일 보기

@ -0,0 +1,97 @@
import type { FieldConfig, WizardState } from '../DeidentifyPanel';
import { TECHNIQUES, TEMPLATES } from '../DeidentifyPanel';
interface Step3Props {
wizard: WizardState;
onChange: (patch: Partial<WizardState>) => void;
}
export function Step3({ wizard, onChange }: Step3Props) {
const updateField = (idx: number, key: keyof FieldConfig, value: string | boolean) => {
const updated = wizard.fields.map((f, i) => (i === idx ? { ...f, [key]: value } : f));
onChange({ fields: updated });
};
const selectedFields = wizard.fields.filter((f) => f.selected);
return (
<div className="space-y-4">
<div className="rounded border border-stroke overflow-hidden">
<table className="w-full text-caption border-collapse">
<thead>
<tr className="bg-bg-elevated text-t3">
<th className="px-3 py-2 text-left font-medium border-b border-stroke">필드명</th>
<th className="px-3 py-2 text-left font-medium border-b border-stroke">
데이터타입
</th>
<th className="px-3 py-2 text-left font-medium border-b border-stroke">
선택된 기법
</th>
<th className="px-3 py-2 text-left font-medium border-b border-stroke">설정값</th>
</tr>
</thead>
<tbody>
{selectedFields.map((field) => {
const globalIdx = wizard.fields.findIndex((f) => f.name === field.name);
return (
<tr key={field.name} className="border-b border-stroke hover:bg-bg-surface/50">
<td className="px-3 py-2 font-medium text-t1">{field.name}</td>
<td className="px-3 py-2 text-t3">{field.dataType}</td>
<td className="px-3 py-2">
<select
value={field.technique}
onChange={(e) => updateField(globalIdx, 'technique', 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"
>
{TECHNIQUES.map((t) => (
<option key={t} value={t}>
{t}
</option>
))}
</select>
</td>
<td className="px-3 py-2">
<input
type="text"
value={field.configValue}
onChange={(e) => updateField(globalIdx, 'configValue', e.target.value)}
className="w-full px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
/>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
<div className="flex flex-wrap items-center gap-4 pt-1">
<label className="flex items-center gap-2 cursor-pointer">
<input
type="checkbox"
checked={wizard.saveAsTemplate}
onChange={(e) => onChange({ saveAsTemplate: e.target.checked })}
className="accent-cyan-500"
/>
<span className="text-caption text-t2">템플릿으로 저장</span>
</label>
<div className="flex items-center gap-2">
<span className="text-caption text-t3">이전 템플릿 적용:</span>
<select
value={wizard.applyTemplate}
onChange={(e) => onChange({ applyTemplate: e.target.value })}
className="px-2.5 py-1 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
>
<option value="">선택 안 함</option>
{TEMPLATES.map((t) => (
<option key={t} value={t}>
{t}
</option>
))}
</select>
</div>
</div>
</div>
);
}

160
frontend/src/components/admin/components/contents/Step4.tsx Normal file
파일 보기

@ -0,0 +1,160 @@
import type { OneshotConfig, ProcessMode, RepeatType, ScheduleConfig, WizardState } from '../DeidentifyPanel';
import { HOURS, WEEKDAYS } from '../DeidentifyPanel';
interface Step4Props {
wizard: WizardState;
onChange: (patch: Partial<WizardState>) => void;
}
export function Step4({ wizard, onChange }: Step4Props) {
const handleScheduleChange = (key: keyof ScheduleConfig, value: string | boolean) => {
onChange({ scheduleConfig: { ...wizard.scheduleConfig, [key]: value } });
};
const handleOneshotChange = (key: keyof OneshotConfig, value: string) => {
onChange({ oneshotConfig: { ...wizard.oneshotConfig, [key]: value } });
};
return (
<div className="space-y-4">
<div className="space-y-3">
{(
[
['immediate', '즉시 처리', '지금 바로 데이터를 비식별화합니다.'],
['scheduled', '배치 처리 - 정기 스케줄링', '반복 일정에 따라 자동으로 처리합니다.'],
['oneshot', '배치 처리 - 일회성', '지정한 날짜/시간에 한 번 처리합니다.'],
] as [ProcessMode, string, string][]
).map(([val, label, desc]) => (
<div key={val}>
<label className="flex items-start gap-2.5 cursor-pointer">
<input
type="radio"
name="processMode"
value={val}
checked={wizard.processMode === val}
onChange={() => onChange({ processMode: val })}
className="mt-0.5 accent-cyan-500"
/>
<div>
<span className="text-caption font-medium text-t1">{label}</span>
<p className="text-label-2 text-t3 mt-0.5">{desc}</p>
</div>
</label>
{val === 'scheduled' && wizard.processMode === 'scheduled' && (
<div className="mt-3 ml-5 p-4 rounded bg-bg-surface border border-stroke space-y-3">
<div className="flex items-center gap-3">
<label className="text-caption text-t3 w-16 shrink-0">실행 시간</label>
<select
value={wizard.scheduleConfig.hour}
onChange={(e) => handleScheduleChange('hour', e.target.value)}
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"
>
{HOURS.map((h) => (
<option key={h} value={h}>
{h}
</option>
))}
</select>
</div>
<div className="flex items-start gap-3">
<label className="text-caption text-t3 w-16 shrink-0 mt-1">반복</label>
<div className="flex flex-col gap-2">
{(
[
['daily', '매일'],
['weekly', '주 1회'],
['monthly', '월 1회'],
] as [RepeatType, string][]
).map(([rt, rl]) => (
<div key={rt} className="flex items-center gap-2">
<input
type="radio"
name="repeatType"
value={rt}
checked={wizard.scheduleConfig.repeatType === rt}
onChange={() => handleScheduleChange('repeatType', rt)}
className="accent-cyan-500"
/>
<span className="text-caption text-t1">{rl}</span>
{rt === 'weekly' && wizard.scheduleConfig.repeatType === 'weekly' && (
<select
value={wizard.scheduleConfig.weekday}
onChange={(e) => handleScheduleChange('weekday', e.target.value)}
className="ml-1 px-2 py-0.5 text-caption rounded bg-bg-elevated border border-stroke text-t1 focus:outline-none focus:border-color-accent"
>
{WEEKDAYS.map((d) => (
<option key={d} value={d}>
{d}요일
</option>
))}
</select>
)}
</div>
))}
</div>
</div>
<div className="flex items-center gap-3">
<label className="text-caption text-t3 w-16 shrink-0">시작일</label>
<input
type="date"
value={wizard.scheduleConfig.startDate}
onChange={(e) => handleScheduleChange('startDate', e.target.value)}
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"
/>
</div>
<div className="flex flex-col gap-1.5 mt-1">
<label className="flex items-center gap-2 cursor-pointer">
<input
type="checkbox"
checked={wizard.scheduleConfig.notifyOnComplete}
onChange={(e) => handleScheduleChange('notifyOnComplete', e.target.checked)}
className="accent-cyan-500"
/>
<span className="text-caption text-t2">처리 완료 시 이메일 알림</span>
</label>
<label className="flex items-center gap-2 cursor-pointer">
<input
type="checkbox"
checked={wizard.scheduleConfig.notifyOnError}
onChange={(e) => handleScheduleChange('notifyOnError', e.target.checked)}
className="accent-cyan-500"
/>
<span className="text-caption text-t2">오류 발생 시 즉시 알림</span>
</label>
</div>
</div>
)}
{val === 'oneshot' && wizard.processMode === 'oneshot' && (
<div className="mt-3 ml-5 p-4 rounded bg-bg-surface border border-stroke space-y-3">
<div className="flex items-center gap-3">
<label className="text-caption text-t3 w-16 shrink-0">실행 날짜</label>
<input
type="date"
value={wizard.oneshotConfig.date}
onChange={(e) => handleOneshotChange('date', e.target.value)}
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"
/>
</div>
<div className="flex items-center gap-3">
<label className="text-caption text-t3 w-16 shrink-0">실행 시간</label>
<select
value={wizard.oneshotConfig.hour}
onChange={(e) => handleOneshotChange('hour', e.target.value)}
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"
>
{HOURS.map((h) => (
<option key={h} value={h}>
{h}
</option>
))}
</select>
</div>
</div>
)}
</div>
))}
</div>
</div>
);
}

62
frontend/src/components/admin/components/contents/Step5.tsx Normal file
파일 보기

@ -0,0 +1,62 @@
import type { ProcessMode, WizardState } from '../DeidentifyPanel';
interface Step5Props {
wizard: WizardState;
onChange: (patch: Partial<WizardState>) => void;
}
export function Step5({ wizard, onChange }: Step5Props) {
const selectedCount = wizard.fields.filter((f) => f.selected).length;
const ruleCount = wizard.fields.filter((f) => f.selected && f.technique !== '유지').length;
const processModeLabel: Record<ProcessMode, string> = {
immediate: '즉시 처리',
scheduled: `배치 - 정기 (${wizard.scheduleConfig.hour} / ${wizard.scheduleConfig.repeatType === 'daily' ? '매일' : wizard.scheduleConfig.repeatType === 'weekly' ? `주1회 ${wizard.scheduleConfig.weekday}요일` : '월1회'})`,
oneshot: `배치 - 일회성 (${wizard.oneshotConfig.date} ${wizard.oneshotConfig.hour})`,
};
const summaryRows = [
{ label: '작업명', value: wizard.taskName || '(미입력)' },
{
label: '소스',
value:
wizard.sourceType === 'db'
? `DB: ${wizard.dbConfig.database}.${wizard.dbConfig.tableName}`
: wizard.sourceType === 'file'
? '파일 업로드'
: `API: ${wizard.apiConfig.url}`,
},
{ label: '데이터 건수', value: '15,240건' },
{ label: '선택 필드 수', value: `${selectedCount}개` },
{ label: '비식별화 규칙 수', value: `${ruleCount}개` },
{ label: '처리 방식', value: processModeLabel[wizard.processMode] },
{ label: '예상 처리시간', value: '약 3~5분' },
];
return (
<div className="space-y-4">
<div className="rounded border border-stroke overflow-hidden">
<table className="w-full text-caption border-collapse">
<tbody>
{summaryRows.map(({ label, value }) => (
<tr key={label} className="border-b border-stroke last:border-b-0">
<td className="px-4 py-2.5 text-t3 bg-bg-elevated w-36 font-medium">{label}</td>
<td className="px-4 py-2.5 text-t1">{value}</td>
</tr>
))}
</tbody>
</table>
</div>
<label className="flex items-center gap-2 cursor-pointer p-3 rounded border border-stroke bg-bg-surface">
<input
type="checkbox"
checked={wizard.confirmed}
onChange={(e) => onChange({ confirmed: e.target.checked })}
className="accent-cyan-500"
/>
<span className="text-caption text-t1 font-medium">위 정보를 확인했습니다.</span>
</label>
</div>
);
}

53
frontend/src/components/admin/components/contents/StepIndicator.tsx Normal file
파일 보기

@ -0,0 +1,53 @@
import { STEP_LABELS } from '../DeidentifyPanel';
export function StepIndicator({ current }: { current: number }) {
return (
<div className="flex items-center justify-center gap-0 px-6 py-4 border-b border-stroke">
{STEP_LABELS.map((label, i) => {
const stepNum = i + 1;
const isDone = stepNum < current;
const isActive = stepNum === current;
return (
<div key={label} className="flex items-center">
<div className="flex flex-col items-center">
<div
className={`w-7 h-7 rounded-full flex items-center justify-center text-caption font-semibold transition-colors ${
isDone
? 'bg-color-success text-white'
: isActive
? 'bg-color-accent text-white'
: 'bg-bg-elevated text-t3'
}`}
>
{isDone ? (
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2.5}
d="M5 13l4 4L19 7"
/>
</svg>
) : (
stepNum
)}
</div>
<span
className={`mt-1 text-label-2 whitespace-nowrap ${
isActive ? 'text-color-accent' : isDone ? 'text-color-success' : 'text-t3'
}`}
>
{stepNum}.{label}
</span>
</div>
{i < STEP_LABELS.length - 1 && (
<div
className={`w-10 h-px mx-1 mb-4 ${i + 1 < current ? 'bg-color-success' : 'bg-stroke-1'}`}
/>
)}
</div>
);
})}
</div>
);
}

196
frontend/src/components/admin/components/contents/TargetArchTab.tsx Normal file
파일 보기

@ -0,0 +1,196 @@
interface TabModuleRow {
module: string;
name: string;
feature: string;
integration: string;
}
const TAB_MODULES: TabModuleRow[] = [
{
module: '확산예측',
name: 'prediction',
feature: '유출유 확산 시뮬레이션, 역추적 분석, 오일붐 배치',
integration: 'KOSPS, 포세이돈 R&D',
},
{
module: 'HNS 분석',
name: 'hns',
feature: '화학물질 확산 예측, 물질 DB, 위험도 평가',
integration: '충북대 R&D, 물질 DB',
},
{
module: '구조 시나리오',
name: 'rescue',
feature: '긴급구난 분석, 표류 예측',
integration: '긴급구난 R&D',
},
{
module: '항공 방제',
name: 'aerial',
feature: '위성영상 분석, 드론 영상, 유막 면적 분석',
integration: '위성/드론 데이터',
},
{
module: '해양 기상',
name: 'weather',
feature: '기상·해상 정보, 조위·해류 관측',
integration: 'KHOA API, 기상청 API',
},
{
module: '사건/사고',
name: 'incidents',
feature: '해양오염 사고 등록·관리·이력',
integration: '해경 사고 DB',
},
{
module: '자산 관리',
name: 'assets',
feature: '기관·장비·선박 보험 관리',
integration: '해경 자산 DB',
},
{
module: 'SCAT 조사',
name: 'scat',
feature: 'Pre-SCAT 해안 조사 기록',
integration: '현장 조사 데이터',
},
{
module: '관리자',
name: 'admin',
feature: '사용자/권한/메뉴/설정/연계 관리',
integration: '전체 시스템',
},
];
// ─── 연계 인터페이스 데이터 ───────────────────────────────────────────────────────
export function TargetArchTab() {
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 flex-col items-stretch gap-0 border border-stroke rounded overflow-hidden">
{/* 사용자 접근 계층 */}
<div className="p-4 bg-bg-card">
<p className="text-caption font-semibold text-t2 mb-1">사용자 접근 계층</p>
<p className="text-caption text-t1 font-medium mb-1">웹 브라우저 (React SPA)</p>
<p className="text-caption text-t3 leading-relaxed">
확산예측 | HNS분석 | 구조시나리오 | 항공방제 | 기상정보 | 사고관리 | SCAT조사 |
자산관리 | 관리자
</p>
</div>
{/* 화살표 + 프로토콜 */}
<div className="flex flex-col items-center py-2 bg-bg-base border-y border-stroke">
<span className="text-t3 text-lg">↕</span>
<span className="text-caption text-t3">HTTPS (TLS 1.2+)</span>
</div>
{/* API 서버 계층 */}
<div className="p-4 bg-bg-surface border-b border-stroke">
<p className="text-caption font-semibold text-t2 mb-1">API 서버 계층</p>
<p className="text-caption text-t1 font-medium mb-2">Express 4 REST API (Port 3001)</p>
<div className="grid grid-cols-2 gap-1.5 sm:grid-cols-4">
{[
'JWT 인증 미들웨어',
'RBAC 권한 엔진 (permResolver)',
'감사로그 자동 기록',
'입력 살균 / Rate Limiting / Helmet',
].map((item) => (
<div
key={item}
className="bg-bg-elevated border border-stroke rounded px-2 py-1.5 text-center"
>
<p className="text-caption text-t2 leading-snug">{item}</p>
</div>
))}
</div>
</div>
{/* 화살표 + 프로토콜 */}
<div className="flex flex-col items-center py-2 bg-bg-base border-b border-stroke">
<span className="text-t3 text-lg">↕</span>
<span className="text-caption text-t3">pg connection pool</span>
</div>
{/* 데이터 계층 */}
<div className="p-4 bg-bg-card">
<p className="text-caption font-semibold text-t2 mb-1">데이터 계층</p>
<p className="text-caption text-t1 font-medium mb-2">PostgreSQL 16 + PostGIS</p>
<div className="flex gap-2">
{[
{ name: 'wing DB', sub: '운영' },
{ name: 'wing_auth', sub: '인증' },
].map((item) => (
<div
key={item.name}
className="bg-bg-elevated border border-stroke rounded p-2 text-center min-w-24"
>
<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>
{TAB_MODULES.map((row) => (
<tr key={row.name} className="border-b border-stroke hover:bg-bg-surface/50">
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.module}</td>
<td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{row.name}</td>
<td className="px-3 py-2 text-t2">{row.feature}</td>
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.integration}</td>
</tr>
))}
</tbody>
</table>
</div>
</section>
{/* 3. RBAC 권한 체계 */}
<section>
<h3 className="text-body-2 font-semibold text-t1 mb-3">3. RBAC 권한 체계</h3>
<div className="flex flex-col gap-3">
{[
{
title: '2차원 권한 엔진',
content:
'AUTH_PERM OPER_CD 기반: R(조회), C(생성), U(수정), D(삭제) — 역할별 메뉴·기능 접근 제어',
},
{
title: 'permResolver',
content:
'역할(Role)과 권한(Permission)의 2차원 매핑으로 메뉴 표시 여부 및 기능 사용 가능 여부를 동적으로 판단',
},
{
title: '감사로그 자동 기록',
content:
'누가(사용자) / 언제(타임스탬프) / 무엇을(기능) / 어디서(IP, 메뉴) — 모든 주요 작업 자동 기록',
},
].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>
);
}

100
frontend/src/components/admin/components/contents/TaskTable.tsx Normal file
파일 보기

@ -0,0 +1,100 @@
import type { DeidentifyTask } from '../DeidentifyPanel';
import { TABLE_HEADERS, getStatusBadgeClass } from '../DeidentifyPanel';
import { ProgressBar } from './ProgressBar';
interface TaskTableProps {
rows: DeidentifyTask[];
loading: boolean;
onAction: (action: string, task: DeidentifyTask) => void;
}
export function TaskTable({ rows, loading, onAction }: TaskTableProps) {
return (
<div className="overflow-auto">
<table className="w-full text-caption border-collapse">
<thead>
<tr className="bg-bg-elevated text-t3 uppercase tracking-wide">
{TABLE_HEADERS.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>
{loading && rows.length === 0
? Array.from({ length: 5 }).map((_, i) => (
<tr key={i} className="border-b border-stroke animate-pulse">
{TABLE_HEADERS.map((_, j) => (
<td key={j} className="px-3 py-2">
<div className="h-3 bg-bg-elevated rounded w-14" />
</td>
))}
</tr>
))
: rows.map((row) => (
<tr key={row.id} className="border-b border-stroke hover:bg-bg-surface/50">
<td className="px-3 py-2 text-t3 font-mono">{row.id}</td>
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.name}</td>
<td
className="px-3 py-2 text-t2 whitespace-nowrap max-w-[240px] truncate"
title={row.target}
>
{row.target}
</td>
<td className="px-3 py-2">
<span
className={`inline-block px-2 py-0.5 rounded text-label-2 font-medium ${getStatusBadgeClass(row.status)}`}
>
{row.status}
</span>
</td>
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.startTime}</td>
<td className="px-3 py-2 min-w-[120px]">
<ProgressBar value={row.progress} />
</td>
<td className="px-3 py-2 text-t2">{row.createdBy}</td>
<td className="px-3 py-2">
<div className="flex items-center gap-1 flex-wrap">
<button
onClick={() => onAction('detail', row)}
className="px-2 py-0.5 text-label-2 rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors whitespace-nowrap"
>
상세보기
</button>
<button
onClick={() => onAction('download', row)}
className="px-2 py-0.5 text-label-2 rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors whitespace-nowrap"
>
결과다운로드
</button>
<button
onClick={() => onAction('retry', row)}
className="px-2 py-0.5 text-label-2 rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors whitespace-nowrap"
>
재실행
</button>
<button
onClick={() => onAction('delete', row)}
className="px-2 py-0.5 text-label-2 rounded bg-bg-elevated hover:bg-bg-card text-color-danger transition-colors whitespace-nowrap"
>
삭제
</button>
<button
onClick={() => onAction('audit', row)}
className="px-2 py-0.5 text-label-2 rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors whitespace-nowrap"
>
감사로그
</button>
</div>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}

103
frontend/src/components/admin/components/contents/TreeRow.tsx Normal file
파일 보기

@ -0,0 +1,103 @@
import type { PermTreeNode } from '@common/services/authApi';
import type { PermState, OperCode } from '../PermissionsPanel';
import { OPER_CODES, OPER_FULL_LABELS, makeKey } from '../PermissionsPanel';
import { PermCell } from './PermCell';
interface TreeRowProps {
node: PermTreeNode;
stateMap: Map<string, PermState>;
expanded: Set<string>;
onToggleExpand: (code: string) => void;
onTogglePerm: (code: string, oper: OperCode, currentState: PermState) => void;
readOnly?: boolean;
}
export function TreeRow({
node,
stateMap,
expanded,
onToggleExpand,
onTogglePerm,
readOnly = false,
}: TreeRowProps) {
const hasChildren = node.children.length > 0;
const isExpanded = expanded.has(node.code);
const indent = node.level * 16;
// 이 노드의 READ 상태 (CUD 비활성 판단용)
const readState = stateMap.get(makeKey(node.code, 'READ')) ?? 'forced-denied';
const readDenied = readState === 'explicit-denied' || readState === 'forced-denied';
return (
<>
<tr className="border-b border-stroke hover:bg-[rgba(6,182,212,0.04)] transition-colors">
<td className="px-3 py-1">
<div className="flex items-center" style={{ paddingLeft: indent }}>
{hasChildren ? (
<button
onClick={() => onToggleExpand(node.code)}
className="w-4 h-4 flex items-center justify-center text-fg-disabled hover:text-fg transition-colors mr-1 flex-shrink-0"
>
<svg
width="10"
height="10"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
className={`transition-transform ${isExpanded ? 'rotate-90' : ''}`}
>
<polyline points="9 18 15 12 9 6" />
</svg>
</button>
) : (
<span className="w-4 mr-1 flex-shrink-0 text-center text-fg-disabled text-caption">
{node.level > 0 ? '├' : ''}
</span>
)}
{node.icon && <span className="mr-1 flex-shrink-0 text-label-2">{node.icon}</span>}
<div className="min-w-0">
<div
className={`text-label-2 font-korean truncate ${node.level === 0 ? 'font-bold text-fg' : 'font-medium text-fg-sub'}`}
>
{node.name}
</div>
</div>
</div>
</td>
{OPER_CODES.map((oper) => {
const key = makeKey(node.code, oper);
const state = stateMap.get(key) ?? 'forced-denied';
// READ 거부 시 CUD도 강제 거부
const effectiveState =
oper !== 'READ' && readDenied ? ('forced-denied' as PermState) : state;
return (
<td key={oper} className="px-1 py-1 text-center">
<div className="flex justify-center">
<PermCell
state={effectiveState}
label={OPER_FULL_LABELS[oper]}
onToggle={() => onTogglePerm(node.code, oper, effectiveState)}
readOnly={readOnly}
/>
</div>
</td>
);
})}
</tr>
{hasChildren &&
isExpanded &&
node.children.map((child: PermTreeNode) => (
<TreeRow
key={child.code}
node={child}
stateMap={stateMap}
expanded={expanded}
onToggleExpand={onToggleExpand}
onTogglePerm={onTogglePerm}
readOnly={readOnly}
/>
))}
</>
);
}

293
frontend/src/components/admin/components/contents/UserDetailModal.tsx Normal file
파일 보기

@ -0,0 +1,293 @@
import { useState } from 'react';
import { changePasswordApi, updateUserApi, type UserListItem, type OrgItem, type RoleWithPermissions } from '@common/services/authApi';
import { statusLabels } from '../adminConstants';
import { formatDate } from '../UsersPanel';
interface UserDetailModalProps {
user: UserListItem;
allRoles: RoleWithPermissions[];
allOrgs: OrgItem[];
onClose: () => void;
onUpdated: () => void;
}
export function UserDetailModal({ user, allOrgs, onClose, onUpdated }: UserDetailModalProps) {
const [name, setName] = useState(user.name);
const [rank, setRank] = useState(user.rank || '');
const [orgSn, setOrgSn] = useState<number | ''>(user.orgSn ?? '');
const [saving, setSaving] = useState(false);
const [newPassword, setNewPassword] = useState('');
const [resetPwLoading, setResetPwLoading] = useState(false);
const [resetPwDone, setResetPwDone] = useState(false);
const [unlockLoading, setUnlockLoading] = useState(false);
const [message, setMessage] = useState<{ text: string; type: 'success' | 'error' } | null>(null);
const handleSaveInfo = async () => {
setSaving(true);
setMessage(null);
try {
await updateUserApi(user.id, {
name: name.trim(),
rank: rank.trim() || undefined,
orgSn: orgSn !== '' ? orgSn : null,
});
setMessage({ text: '사용자 정보가 수정되었습니다.', type: 'success' });
onUpdated();
} catch {
setMessage({ text: '사용자 정보 수정에 실패했습니다.', type: 'error' });
} finally {
setSaving(false);
}
};
const handleResetPassword = async () => {
if (!newPassword.trim()) {
setMessage({ text: '새 비밀번호를 입력하세요.', type: 'error' });
return;
}
setResetPwLoading(true);
setMessage(null);
try {
await changePasswordApi(user.id, newPassword);
setMessage({ text: '비밀번호가 초기화되었습니다.', type: 'success' });
setResetPwDone(true);
setNewPassword('');
} catch {
setMessage({ text: '비밀번호 초기화에 실패했습니다.', type: 'error' });
} finally {
setResetPwLoading(false);
}
};
const handleUnlock = async () => {
setUnlockLoading(true);
setMessage(null);
try {
await updateUserApi(user.id, { status: 'ACTIVE' });
setMessage({ text: '계정 잠금이 해제되었습니다.', type: 'success' });
onUpdated();
} catch {
setMessage({ text: '잠금 해제에 실패했습니다.', type: 'error' });
} finally {
setUnlockLoading(false);
}
};
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
<div className="bg-bg-surface border border-stroke rounded-lg shadow-lg w-[480px] max-h-[90vh] flex flex-col">
{/* 헤더 */}
<div className="flex items-center justify-between px-6 py-4 border-b border-stroke">
<div>
<h2 className="text-body-2 font-bold text-fg font-korean">사용자 정보</h2>
<p className="text-caption text-fg-disabled font-mono mt-0.5">{user.account}</p>
</div>
<button onClick={onClose} className="text-fg-disabled hover:text-fg transition-colors">
<svg
width="16"
height="16"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2.5"
>
<path d="M18 6L6 18M6 6l12 12" />
</svg>
</button>
</div>
<div className="flex-1 overflow-y-auto px-6 py-4 space-y-5">
{/* 기본 정보 수정 */}
<div>
<h3 className="text-label-2 font-semibold text-fg-sub font-korean mb-3">
기본 정보 수정
</h3>
<div className="space-y-3">
<div>
<label className="block text-caption text-fg-disabled font-korean mb-1">
사용자명
</label>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
className="w-full px-3 py-1.5 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean"
/>
</div>
<div className="grid grid-cols-2 gap-3">
<div>
<label className="block text-caption text-fg-disabled font-korean mb-1">
직급
</label>
<input
type="text"
value={rank}
onChange={(e) => setRank(e.target.value)}
placeholder="예: 팀장"
className="w-full px-3 py-1.5 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean"
/>
</div>
<div>
<label className="block text-caption text-fg-disabled font-korean mb-1">
소속
</label>
<select
value={orgSn}
onChange={(e) => setOrgSn(e.target.value !== '' ? Number(e.target.value) : '')}
className="w-full px-3 py-1.5 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={org.orgSn}>
{org.orgNm}
{org.orgAbbrNm ? ` (${org.orgAbbrNm})` : ''}
</option>
))}
</select>
</div>
</div>
<button
onClick={handleSaveInfo}
disabled={saving || !name.trim()}
className="px-4 py-1.5 text-label-2 font-semibold rounded-md bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)] transition-all disabled:opacity-50 font-korean"
>
{saving ? '저장 중...' : '정보 저장'}
</button>
</div>
</div>
{/* 구분선 */}
<div className="border-t border-stroke" />
{/* 비밀번호 초기화 */}
<div>
<h3 className="text-label-2 font-semibold text-fg-sub font-korean mb-3">
비밀번호 초기화
</h3>
<div className="flex items-end gap-2">
<div className="flex-1">
<label className="block text-caption text-fg-disabled font-korean mb-1">
새 비밀번호
</label>
<input
type="password"
value={newPassword}
onChange={(e) => setNewPassword(e.target.value)}
placeholder="새 비밀번호 입력"
className="w-full px-3 py-1.5 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono"
/>
</div>
<button
onClick={handleResetPassword}
disabled={resetPwLoading || !newPassword.trim()}
className="px-4 py-1.5 text-label-2 font-semibold rounded-md border border-color-caution text-color-caution hover:bg-[rgba(234,179,8,0.12)] transition-all disabled:opacity-50 font-korean flex-shrink-0"
>
{resetPwLoading ? '초기화 중...' : resetPwDone ? '초기화 완료' : '비밀번호 초기화'}
</button>
<button
onClick={handleUnlock}
disabled={unlockLoading || user.status !== 'LOCKED'}
className="px-4 py-1.5 text-label-2 font-semibold rounded-md border border-color-success text-color-success hover:bg-[rgba(34,197,94,0.12)] transition-all disabled:opacity-50 font-korean flex-shrink-0"
title={user.status !== 'LOCKED' ? '잠금 상태가 아닙니다' : ''}
>
{unlockLoading ? '해제 중...' : '패스워드잠금해제'}
</button>
</div>
<p className="text-caption text-fg-disabled font-korean mt-1.5">
초기화 후 사용자에게 새 비밀번호를 전달하세요.
</p>
</div>
{/* 구분선 */}
<div className="border-t border-stroke" />
{/* 계정 잠금 해제 */}
<div>
<h3 className="text-label-2 font-semibold text-fg-sub font-korean mb-2">계정 상태</h3>
<div className="flex items-center justify-between bg-bg-elevated border border-stroke rounded-md px-4 py-3">
<div>
<div className="flex items-center gap-2">
<span
className={`inline-flex items-center gap-1.5 text-label-2 font-semibold font-korean ${(statusLabels[user.status] || statusLabels.INACTIVE).color}`}
>
<span
className={`w-1.5 h-1.5 rounded-full ${(statusLabels[user.status] || statusLabels.INACTIVE).dot}`}
/>
{(statusLabels[user.status] || statusLabels.INACTIVE).label}
</span>
{user.failCount > 0 && (
<span className="text-caption text-color-danger font-korean">
(로그인 실패 {user.failCount}회)
</span>
)}
</div>
{user.status === 'LOCKED' && (
<p className="text-caption text-fg-disabled font-korean mt-1">
비밀번호 5회 이상 오류로 잠금 처리됨
</p>
)}
</div>
{user.status === 'LOCKED' && (
<button
onClick={handleUnlock}
disabled={unlockLoading}
className="px-4 py-1.5 text-label-2 font-semibold rounded-md border border-color-success text-color-success hover:bg-[rgba(34,197,94,0.12)] transition-all disabled:opacity-50 font-korean flex-shrink-0"
>
{unlockLoading ? '해제 중...' : '잠금 해제'}
</button>
)}
</div>
</div>
{/* 기타 정보 (읽기 전용) */}
<div>
<h3 className="text-label-2 font-semibold text-fg-sub font-korean mb-2">기타 정보</h3>
<div className="grid grid-cols-2 gap-2 text-caption font-korean">
<div className="bg-bg-elevated border border-stroke rounded px-3 py-2">
<span className="text-fg-disabled">이메일: </span>
<span className="text-fg-sub font-mono">{user.email || '-'}</span>
</div>
<div className="bg-bg-elevated border border-stroke rounded px-3 py-2">
<span className="text-fg-disabled">OAuth: </span>
<span className="text-fg-sub">{user.oauthProvider || '-'}</span>
</div>
<div className="bg-bg-elevated border border-stroke rounded px-3 py-2">
<span className="text-fg-disabled">최종 로그인: </span>
<span className="text-fg-sub">
{user.lastLogin ? formatDate(user.lastLogin) : '-'}
</span>
</div>
<div className="bg-bg-elevated border border-stroke rounded px-3 py-2">
<span className="text-fg-disabled">등록일: </span>
<span className="text-fg-sub">{formatDate(user.regDtm)}</span>
</div>
</div>
</div>
{/* 메시지 */}
{message && (
<div
className={`px-3 py-2 text-label-2 rounded-md font-korean ${
message.type === 'success'
? 'text-color-success bg-[rgba(34,197,94,0.08)] border border-[rgba(34,197,94,0.3)]'
: 'text-color-danger bg-[rgba(239,68,68,0.08)] border border-[rgba(239,68,68,0.2)]'
}`}
>
{message.text}
</div>
)}
</div>
{/* 푸터 */}
<div className="flex items-center justify-end px-6 py-3 border-t border-stroke">
<button
onClick={onClose}
className="px-4 py-2 text-caption border border-stroke text-fg-sub rounded-md hover:bg-[rgba(6,182,212,0.08)] transition-all font-korean"
>
닫기
</button>
</div>
</div>
</div>
);
}

336
frontend/src/components/admin/components/contents/UserPermTab.tsx Normal file
파일 보기

@ -0,0 +1,336 @@
import { useState, useEffect, useCallback, useRef } from 'react';
import type { UserListItem, PermTreeNode, RoleWithPermissions } from '@common/services/authApi';
import { fetchUsers, assignRolesApi } from '@common/services/authApi';
import { getRoleColor } from '../adminConstants';
import type { OperCode, PermState } from '../PermissionsPanel';
import { OPER_CODES, OPER_FULL_LABELS, OPER_LABELS, flattenTree, buildEffectiveStates } from '../PermissionsPanel';
import { TreeRow } from './TreeRow';
import { PermLegend } from './PermLegend';
interface UserPermTabProps {
roles: RoleWithPermissions[];
permTree: PermTreeNode[];
rolePerms: Map<number, Map<string, boolean>>;
}
export function UserPermTab({ roles, permTree, rolePerms }: UserPermTabProps) {
const [users, setUsers] = useState<UserListItem[]>([]);
const [loadingUsers, setLoadingUsers] = useState(true);
const [searchQuery, setSearchQuery] = useState('');
const [showDropdown, setShowDropdown] = useState(false);
const [selectedUser, setSelectedUser] = useState<UserListItem | null>(null);
const [assignedRoleSns, setAssignedRoleSns] = useState<number[]>([]);
const [savingRoles, setSavingRoles] = useState(false);
const [rolesDirty, setRolesDirty] = useState(false);
const [expanded, setExpanded] = useState<Set<string>>(new Set());
const dropdownRef = useRef<HTMLDivElement>(null);
const flatNodes = flattenTree(permTree);
useEffect(() => {
const loadUsers = async () => {
setLoadingUsers(true);
try {
const data = await fetchUsers();
setUsers(data);
} catch (err) {
console.error('사용자 목록 조회 실패:', err);
} finally {
setLoadingUsers(false);
}
};
loadUsers();
}, []);
// 최상위 노드 기본 펼침
useEffect(() => {
if (permTree.length > 0) {
setExpanded(new Set(permTree.map((n) => n.code)));
}
}, [permTree]);
// 드롭다운 외부 클릭 시 닫기
useEffect(() => {
const handleClickOutside = (e: MouseEvent) => {
if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
setShowDropdown(false);
}
};
document.addEventListener('mousedown', handleClickOutside);
return () => document.removeEventListener('mousedown', handleClickOutside);
}, []);
const filteredUsers = users.filter((u) => {
if (!searchQuery) return true;
const q = searchQuery.toLowerCase();
return (
u.name.toLowerCase().includes(q) ||
u.account.toLowerCase().includes(q) ||
(u.orgName?.toLowerCase().includes(q) ?? false)
);
});
const handleSelectUser = (user: UserListItem) => {
setSelectedUser(user);
setSearchQuery(user.name);
setShowDropdown(false);
setAssignedRoleSns(user.roleSns ?? []);
setRolesDirty(false);
};
const handleToggleRole = (roleSn: number) => {
setAssignedRoleSns((prev) => {
const next = prev.includes(roleSn) ? prev.filter((sn) => sn !== roleSn) : [...prev, roleSn];
return next;
});
setRolesDirty(true);
};
const handleSaveRoles = async () => {
if (!selectedUser) return;
setSavingRoles(true);
try {
await assignRolesApi(selectedUser.id, assignedRoleSns);
setRolesDirty(false);
// 로컬 users 상태 갱신
setUsers((prev) =>
prev.map((u) =>
u.id === selectedUser.id
? {
...u,
roleSns: assignedRoleSns,
roles: roles.filter((r) => assignedRoleSns.includes(r.sn)).map((r) => r.name),
}
: u,
),
);
setSelectedUser((prev) =>
prev
? {
...prev,
roleSns: assignedRoleSns,
roles: roles.filter((r) => assignedRoleSns.includes(r.sn)).map((r) => r.name),
}
: null,
);
} catch (err) {
console.error('역할 저장 실패:', err);
} finally {
setSavingRoles(false);
}
};
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;
});
}, []);
// 사용자의 유효 권한: 할당된 역할들의 권한 병합 (OR 결합)
const effectiveStateMap = (() => {
if (!selectedUser || assignedRoleSns.length === 0) {
return new Map<string, PermState>();
}
// 각 역할의 명시적 권한 병합: 어느 역할이든 granted=true면 허용
const mergedPerms = new Map<string, boolean>();
for (const roleSn of assignedRoleSns) {
const perms = rolePerms.get(roleSn);
if (!perms) continue;
for (const [key, granted] of perms) {
if (granted) {
mergedPerms.set(key, true);
} else if (!mergedPerms.has(key)) {
mergedPerms.set(key, false);
}
}
}
return buildEffectiveStates(flatNodes, mergedPerms);
})();
const noOpToggle = useCallback((_code: string, _oper: OperCode, _state: PermState): void => {
void _code;
void _oper;
void _state;
// 읽기 전용 — 토글 없음
}, []);
return (
<div className="flex flex-col flex-1 min-h-0">
{/* 사용자 검색/선택 */}
<div className="px-4 py-2.5 border-b border-stroke" style={{ flexShrink: 0 }}>
<label className="text-caption text-fg-disabled font-korean block mb-1.5">
사용자 선택
</label>
<div className="relative" ref={dropdownRef}>
<input
type="text"
value={searchQuery}
onChange={(e) => {
setSearchQuery(e.target.value);
setShowDropdown(true);
if (selectedUser && e.target.value !== selectedUser.name) {
setSelectedUser(null);
setAssignedRoleSns([]);
setRolesDirty(false);
}
}}
onFocus={() => setShowDropdown(true)}
placeholder={loadingUsers ? '불러오는 중...' : '이름, 계정, 조직으로 검색...'}
disabled={loadingUsers}
className="w-full max-w-sm 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 disabled:opacity-50"
/>
{showDropdown && filteredUsers.length > 0 && (
<div className="absolute left-0 top-full mt-1 w-full max-w-sm bg-bg-surface border border-stroke rounded-md shadow-xl z-20 overflow-auto max-h-52">
{filteredUsers.map((user) => (
<button
key={user.id}
onClick={() => handleSelectUser(user)}
className="w-full px-3 py-2 text-left hover:bg-bg-surface-hover transition-colors flex items-center gap-2"
>
<div className="min-w-0 flex-1">
<div className="text-caption font-semibold text-fg font-korean truncate">
{user.name}
{user.rank && (
<span className="ml-1 text-caption text-fg-disabled font-korean">
{user.rank}
</span>
)}
</div>
<div className="text-caption text-fg-disabled font-mono truncate">
{user.account}
</div>
</div>
{user.orgName && (
<span className="text-caption text-fg-disabled font-korean flex-shrink-0 truncate max-w-[100px]">
{user.orgName}
</span>
)}
</button>
))}
</div>
)}
{showDropdown && !loadingUsers && filteredUsers.length === 0 && searchQuery && (
<div className="absolute left-0 top-full mt-1 w-full max-w-sm bg-bg-surface border border-stroke rounded-md shadow-xl z-20 px-3 py-2 text-caption text-fg-disabled font-korean">
검색 결과 없음
</div>
)}
</div>
</div>
{selectedUser ? (
<>
{/* 역할 할당 섹션 */}
<div
className="px-4 py-2.5 border-b border-stroke bg-bg-surface"
style={{ flexShrink: 0 }}
>
<div className="flex items-center justify-between mb-2">
<span className="text-caption font-semibold text-fg-sub font-korean">역할 할당</span>
<button
onClick={handleSaveRoles}
disabled={!rolesDirty || savingRoles}
className={`px-3 py-1.5 text-label-2 font-semibold rounded-md transition-all font-korean ${
rolesDirty
? 'bg-color-accent text-bg-0 hover:shadow-[0_0_12px_rgba(6,182,212,0.3)]'
: 'bg-bg-card text-fg-disabled cursor-not-allowed'
}`}
>
{savingRoles ? '저장 중...' : '역할 저장'}
</button>
</div>
<div className="flex flex-wrap gap-1.5">
{roles.map((role, idx) => {
const color = getRoleColor(role.code, idx);
const isChecked = assignedRoleSns.includes(role.sn);
return (
<label
key={role.sn}
className={[
'flex items-center gap-1 px-2 py-1 rounded-md border cursor-pointer transition-all font-korean text-label-2 select-none',
isChecked ? '' : 'border-stroke text-fg-disabled hover:border-text-2',
].join(' ')}
style={
isChecked
? { borderColor: color, color, backgroundColor: `${color}18` }
: undefined
}
>
<input
type="checkbox"
checked={isChecked}
onChange={() => handleToggleRole(role.sn)}
className="w-3 h-3 accent-primary-cyan"
/>
<span>{role.name}</span>
<span className="text-caption font-mono opacity-60">{role.code}</span>
</label>
);
})}
</div>
</div>
{/* 유효 권한 매트릭스 (읽기 전용) */}
<div
className="px-4 py-1.5 border-b border-stroke bg-bg-surface text-caption text-fg-disabled font-korean"
style={{ flexShrink: 0 }}
>
<span className="font-semibold text-fg-sub">유효 권한 (읽기 전용)</span>
<span className="ml-2">— 할당된 역할의 권한 합산 결과</span>
</div>
<PermLegend />
{assignedRoleSns.length > 0 ? (
<div className="flex-1 overflow-auto">
<table className="w-full">
<thead>
<tr className="border-b border-stroke bg-bg-surface sticky top-0 z-10">
<th className="px-4 py-3 text-left text-label-2 font-semibold text-fg-disabled font-korean min-w-[240px]">
기능
</th>
{OPER_CODES.map((oper) => (
<th key={oper} className="px-2 py-3 text-center w-16">
<div className="text-label-2 font-semibold text-fg-sub">
{OPER_LABELS[oper]}
</div>
<div className="text-caption text-fg-disabled font-korean">
{OPER_FULL_LABELS[oper]}
</div>
</th>
))}
</tr>
</thead>
<tbody>
{permTree.map((rootNode) => (
<TreeRow
key={rootNode.code}
node={rootNode}
stateMap={effectiveStateMap}
expanded={expanded}
onToggleExpand={handleToggleExpand}
onTogglePerm={noOpToggle}
readOnly={true}
/>
))}
</tbody>
</table>
</div>
) : (
<div className="flex-1 flex items-center justify-center text-fg-disabled text-body-2 font-korean">
역할을 하나 이상 할당하면 유효 권한이 표시됩니다
</div>
)}
</>
) : (
<div className="flex-1 flex items-center justify-center text-fg-disabled text-body-2 font-korean">
사용자를 선택하세요
</div>
)}
</div>
);
}

112
frontend/src/components/admin/components/contents/WizardModal.tsx Normal file
파일 보기

@ -0,0 +1,112 @@
import { useState, useCallback } from 'react';
import type { WizardState } from '../DeidentifyPanel';
import { INITIAL_WIZARD } from '../DeidentifyPanel';
import { StepIndicator } from './StepIndicator';
import { Step1 } from './Step1';
import { Step2 } from './Step2';
import { Step3 } from './Step3';
import { Step4 } from './Step4';
import { Step5 } from './Step5';
interface WizardModalProps {
onClose: () => void;
onSubmit: (wizard: WizardState) => void;
}
export function WizardModal({ onClose, onSubmit }: WizardModalProps) {
const [wizard, setWizard] = useState<WizardState>(INITIAL_WIZARD);
const patch = useCallback((update: Partial<WizardState>) => {
setWizard((prev) => ({ ...prev, ...update }));
}, []);
const handleNext = () => {
if (wizard.step < 5) patch({ step: wizard.step + 1 });
};
const handlePrev = () => {
if (wizard.step > 1) patch({ step: wizard.step - 1 });
};
const handleSubmit = () => {
onSubmit(wizard);
onClose();
};
const canProceed = () => {
if (wizard.step === 1) return wizard.taskName.trim().length > 0;
if (wizard.step === 2) return wizard.fields.some((f) => f.selected);
if (wizard.step === 5) return wizard.confirmed;
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-4xl mx-4 flex flex-col max-h-[90vh]">
{/* 모달 헤더 */}
<div className="flex items-center justify-between px-6 py-4 border-b border-stroke shrink-0">
<h3 className="text-body-2 font-semibold text-t1">새 비식별화 작업</h3>
<button
onClick={onClose}
className="p-1 rounded text-t3 hover:text-t1 hover:bg-bg-elevated transition-colors"
>
<svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
{/* 단계 표시기 */}
<StepIndicator current={wizard.step} />
{/* 단계 내용 */}
<div className="flex-1 overflow-auto px-6 py-5">
{wizard.step === 1 && <Step1 wizard={wizard} onChange={patch} />}
{wizard.step === 2 && <Step2 wizard={wizard} onChange={patch} />}
{wizard.step === 3 && <Step3 wizard={wizard} onChange={patch} />}
{wizard.step === 4 && <Step4 wizard={wizard} onChange={patch} />}
{wizard.step === 5 && <Step5 wizard={wizard} onChange={patch} />}
</div>
{/* 푸터 버튼 */}
<div className="flex items-center justify-between px-6 py-4 border-t border-stroke shrink-0">
<button
onClick={handlePrev}
disabled={wizard.step === 1}
className="px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
>
이전
</button>
<div className="flex items-center gap-2">
<button
onClick={onClose}
className="px-3 py-1.5 text-caption rounded bg-bg-elevated hover:bg-bg-card text-t2 transition-colors"
>
취소
</button>
{wizard.step < 5 ? (
<button
onClick={handleNext}
disabled={!canProceed()}
className="px-3 py-1.5 text-caption rounded bg-color-accent hover:bg-color-accent-muted text-white disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
>
다음
</button>
) : (
<button
onClick={handleSubmit}
disabled={!canProceed()}
className="px-3 py-1.5 text-caption rounded bg-color-accent hover:bg-color-accent-muted text-white disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
>
처리 시작
</button>
)}
</div>
</div>
</div>
</div>
);
}

0
frontend/src/tabs/admin/index.ts → frontend/src/components/admin/index.ts
파일 보기

0
frontend/src/tabs/admin/services/monitorApi.ts → frontend/src/components/admin/services/monitorApi.ts
파일 보기

73
frontend/src/components/aerial/components/AerialTheoryView.tsx Normal file
파일 보기

@ -0,0 +1,73 @@
import { useState } from 'react';
import { PanelOverview } from './contents/PanelOverview';
import { PanelDetection } from './contents/PanelDetection';
import { PanelRemoteSensing } from './contents/PanelRemoteSensing';
import { PanelESIMap } from './contents/PanelESIMap';
import { PanelAreaCalc } from './contents/PanelAreaCalc';
import { PanelSpreadModel } from './contents/PanelSpreadModel';
import { PanelReferences } from './contents/PanelReferences';
const panels = [
{ id: 0, icon: '🌐', label: '개요' },
{ id: 1, icon: '🛸', label: '탐지 장비' },
{ id: 2, icon: '🛰', label: '원격탐사' },
{ id: 3, icon: '🗺️', label: 'ESI 방제지도' },
{ id: 4, icon: '📏', label: '면적 산정' },
{ id: 5, icon: '🔗', label: '확산예측 연계' },
{ id: 6, icon: '📚', label: '논문·특허' },
];
export function AerialTheoryView() {
const [activePanel, setActivePanel] = useState(0);
return (
<div className="flex flex-col h-full w-full flex-1 overflow-hidden bg-bg-base">
<div
className="flex-1 overflow-y-auto scrollbar-thin px-6 py-5"
style={{ scrollbarGutter: 'stable' }}
>
{/* 헤더 */}
<div className="flex items-center justify-between mb-5">
<div className="flex items-center gap-3">
<div className="w-[42px] h-[42px] rounded-[10px] bg-bg-elevated border border-stroke flex items-center justify-center text-heading-3">
📐
</div>
<div>
<div className="text-title-2 font-bold text-fg">해양 항공탐색 · 원격탐사 이론</div>
<div className="text-label-2 text-fg-disabled mt-0.5">
유출유 원격탐지 · 항공감시 기법 · ESI 방제정보지도 · 등록특허 10-1567431 기반
</div>
</div>
</div>
</div>
{/* 내부 네비게이션 */}
<div className="flex gap-[3px] bg-bg-card rounded-lg p-1 mb-5 border border-stroke">
{panels.map((p) => (
<button
key={p.id}
onClick={() => setActivePanel(p.id)}
className={`flex-1 py-2 px-1 text-label-1 font-medium rounded-md transition-all duration-150 cursor-pointer border ${
activePanel === p.id
? 'border-stroke-light bg-bg-elevated text-fg'
: 'border-transparent bg-bg-card text-fg-disabled hover:text-fg-sub'
}`}
>
{p.icon} {p.label}
</button>
))}
</div>
{/* 패널 */}
{activePanel === 0 && <PanelOverview />}
{activePanel === 1 && <PanelDetection />}
{activePanel === 2 && <PanelRemoteSensing />}
{activePanel === 3 && <PanelESIMap />}
{activePanel === 4 && <PanelAreaCalc />}
{activePanel === 5 && <PanelSpreadModel />}
{activePanel === 6 && <PanelReferences />}
</div>
</div>
);
}

0
frontend/src/tabs/aerial/components/AerialView.tsx → frontend/src/components/aerial/components/AerialView.tsx Executable file → Normal file
파일 보기

0
frontend/src/tabs/aerial/components/CCTVPlayer.tsx → frontend/src/components/aerial/components/CCTVPlayer.tsx
파일 보기

6
frontend/src/tabs/aerial/components/CctvView.tsx → frontend/src/components/aerial/components/CctvView.tsx
파일 보기

@ -3,10 +3,10 @@ import { Map, Marker, Popup } from '@vis.gl/react-maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
import { fetchCctvCameras } from '../services/aerialApi';
import { useBaseMapStyle } from '@common/hooks/useBaseMapStyle';
import { S57EncOverlay } from '@common/components/map/S57EncOverlay';
import { S57EncOverlay } from '@components/common/map/S57EncOverlay';
import { useMapStore } from '@common/store/mapStore';
import { BaseMap } from '@common/components/map/BaseMap';
import type { CctvCameraItem } from '../services/aerialApi';
import { BaseMap } from '@components/common/map/BaseMap';
import type { CctvCameraItem } from '@interfaces/aerial/AerialInterface';
import { CCTVPlayer } from './CCTVPlayer';
import type { CCTVPlayerHandle } from './CCTVPlayer';

336
frontend/src/tabs/aerial/components/MediaManagement.tsx → frontend/src/components/aerial/components/MediaManagement.tsx
파일 보기

@ -1,6 +1,11 @@
import { useState, useCallback, useRef, useEffect } from 'react';
import { fetchAerialMedia, downloadAerialMedia } from '../services/aerialApi';
import type { AerialMediaItem } from '../services/aerialApi';
import {
fetchAerialMedia,
downloadAerialMedia,
getAerialMediaViewUrl,
uploadAerialMedia,
} from '../services/aerialApi';
import type { AerialMediaItem } from '@interfaces/aerial/AerialInterface';
import { navigateToTab } from '@common/hooks/useSubMenu';
// ── Helpers ──
@ -54,7 +59,16 @@ export function MediaManagement() {
const [downloadResult, setDownloadResult] = useState<{ total: number; success: number } | null>(
null,
);
const [previewItem, setPreviewItem] = useState<AerialMediaItem | null>(null);
const modalRef = useRef<HTMLDivElement>(null);
const previewRef = useRef<HTMLDivElement>(null);
const fileInputRef = useRef<HTMLInputElement>(null);
const [uploadFile, setUploadFile] = useState<File | null>(null);
const [uploading, setUploading] = useState(false);
const [dragOver, setDragOver] = useState(false);
// const [uploadEquip, setUploadEquip] = useState('drone');
// const [uploadEquipNm, setUploadEquipNm] = useState('드론 (DJI M300 RTK)');
// const [uploadMemo, setUploadMemo] = useState('');
const loadData = useCallback(async () => {
setLoading(true);
@ -82,6 +96,15 @@ export function MediaManagement() {
return () => document.removeEventListener('mousedown', handler);
}, [showUpload]);
useEffect(() => {
if (!previewItem) return;
const onKey = (e: KeyboardEvent) => {
if (e.key === 'Escape') setPreviewItem(null);
};
document.addEventListener('keydown', onKey);
return () => document.removeEventListener('keydown', onKey);
}, [previewItem]);
const filtered = mediaItems.filter((f) => {
if (equipFilter !== 'all' && f.equipTpCd !== equipFilter) return false;
if (typeFilter.size > 0) {
@ -164,6 +187,38 @@ export function MediaManagement() {
}
};
const handleUploadSubmit = async () => {
if (!uploadFile || uploading) return;
setUploading(true);
try {
await uploadAerialMedia(uploadFile, {
// equipTpCd: uploadEquip,
// equipNm: uploadEquipNm,
// memo: uploadMemo,
});
setShowUpload(false);
setUploadFile(null);
// setUploadMemo('');
await loadData();
} catch {
alert('업로드 실패: 다시 시도해주세요.');
} finally {
setUploading(false);
}
};
const handleFileDrop = (e: React.DragEvent) => {
e.preventDefault();
setDragOver(false);
const file = e.dataTransfer.files[0];
if (file) setUploadFile(file);
};
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
const file = e.target.files?.[0];
if (file) setUploadFile(file);
};
const droneCount = mediaItems.filter((f) => f.equipTpCd === 'drone').length;
const planeCount = mediaItems.filter((f) => f.equipTpCd === 'plane').length;
const satCount = mediaItems.filter((f) => f.equipTpCd === 'satellite').length;
@ -224,6 +279,12 @@ export function MediaManagement() {
<option value="name">이름순</option>
<option value="size">크기순</option>
</select>
<button
onClick={() => setShowUpload(true)}
className="px-3 py-1.5 text-label-2 font-semibold rounded bg-[rgba(6,182,212,0.08)] text-color-accent border border-[rgba(6,182,212,0.3)] hover:bg-[rgba(6,182,212,0.15)] transition-colors font-korean"
>
+ 이미지 등록
</button>
</div>
</div>
@ -266,7 +327,7 @@ export function MediaManagement() {
{/* File Table */}
<div className="flex-1 border border-stroke rounded-md overflow-hidden flex flex-col">
<div className="overflow-auto flex-1">
<div className="overflow-auto flex-1 scrollbar-thin">
<table className="w-full text-left" style={{ tableLayout: 'fixed' }}>
<colgroup>
<col style={{ width: 36 }} />
@ -332,56 +393,74 @@ export function MediaManagement() {
</td>
</tr>
) : (
sorted.map((f) => (
<tr
key={f.aerialMediaSn}
onClick={() => toggleId(f.aerialMediaSn)}
className={`border-b border-stroke cursor-pointer transition-colors hover:bg-[rgba(255,255,255,0.02)] ${
selectedIds.has(f.aerialMediaSn) ? 'bg-[rgba(6,182,212,0.06)]' : ''
}`}
>
<td className="px-2 py-2 text-center" onClick={(e) => e.stopPropagation()}>
<input
type="checkbox"
checked={selectedIds.has(f.aerialMediaSn)}
onChange={() => toggleId(f.aerialMediaSn)}
className="accent-primary-blue"
/>
</td>
<td className="px-1 py-2 text-base">{equipIcon(f.equipTpCd)}</td>
<td className="px-2 py-2 text-caption font-semibold text-fg font-korean truncate">
{f.acdntSn != null ? String(f.acdntSn) : '—'}
</td>
<td className="px-2 py-2 text-caption text-color-accent font-mono truncate">
{f.locDc ?? '—'}
</td>
<td className="px-2 py-2 text-label-2 font-semibold text-fg font-korean truncate">
{f.fileNm}
</td>
<td className="px-2 py-2">
<span className={`text-caption font-semibold font-korean ${equipTagCls()}`}>
{f.equipNm}
</span>
</td>
<td className="px-2 py-2">
<span className={`text-caption font-semibold font-korean ${mediaTagCls()}`}>
{f.mediaTpCd === '영상' ? '🎬' : '📷'} {f.mediaTpCd}
</span>
</td>
<td className="px-2 py-2 text-label-2 font-mono">{formatDtm(f.takngDtm)}</td>
<td className="px-2 py-2 text-label-2 font-mono">{f.fileSz ?? '—'}</td>
<td className="px-2 py-2 text-label-2 font-mono">{f.resolution ?? '—'}</td>
<td className="px-2 py-2 text-center" onClick={(e) => e.stopPropagation()}>
<button
onClick={(e) => handleDownload(e, f)}
disabled={downloadingId === f.aerialMediaSn}
className="px-2 py-1 text-caption rounded bg-[rgba(6,182,212,0.08)] text-color-accent border border-[rgba(6,182,212,0.3)] hover:bg-[rgba(6,182,212,0.15)] transition-colors disabled:opacity-50"
sorted.map((f) => {
const isPhoto = f.mediaTpCd !== '영상';
return (
<tr
key={f.aerialMediaSn}
className={`border-b border-stroke transition-colors hover:bg-[rgba(255,255,255,0.02)] ${
selectedIds.has(f.aerialMediaSn) ? 'bg-[rgba(6,182,212,0.06)]' : ''
}`}
>
<td
className="px-2 py-2 text-center cursor-pointer"
onClick={() => toggleId(f.aerialMediaSn)}
>
{downloadingId === f.aerialMediaSn ? '⏳' : '📥'}
</button>
</td>
</tr>
))
<input
type="checkbox"
checked={selectedIds.has(f.aerialMediaSn)}
onChange={() => toggleId(f.aerialMediaSn)}
onClick={(e) => e.stopPropagation()}
className="accent-primary-blue"
/>
</td>
<td className="px-1 py-2 text-base">{equipIcon(f.equipTpCd)}</td>
<td className="px-2 py-2 text-caption font-semibold text-fg font-korean truncate">
{f.acdntSn != null ? String(f.acdntSn) : '—'}
</td>
<td className="px-2 py-2 text-caption text-fg font-mono truncate">
{f.locDc ?? '—'}
</td>
<td className="px-2 py-2 text-label-2 text-fg font-korean truncate">
{f.fileNm}
</td>
<td className="px-2 py-2">
<span className={`text-caption font-korean ${equipTagCls()}`}>
{f.equipNm}
</span>
</td>
<td className="px-2 py-2">
{isPhoto ? (
<button
type="button"
onClick={() => setPreviewItem(f)}
className={`text-caption font-semibold font-korean hover:underline cursor-pointer ${mediaTagCls()}`}
>
📷 {f.mediaTpCd}
</button>
) : (
<span
className={`text-caption font-semibold font-korean ${mediaTagCls()}`}
>
🎬 {f.mediaTpCd}
</span>
)}
</td>
<td className="px-2 py-2 text-label-2 font-mono">{formatDtm(f.takngDtm)}</td>
<td className="px-2 py-2 text-label-2 font-mono">{f.fileSz ?? '—'}</td>
<td className="px-2 py-2 text-label-2 font-mono">{f.resolution ?? '—'}</td>
<td className="px-2 py-2 text-center">
<button
onClick={(e) => handleDownload(e, f)}
disabled={downloadingId === f.aerialMediaSn}
className="px-2 py-1 text-caption disabled:opacity-50"
>
{downloadingId === f.aerialMediaSn ? '⏳' : '📥'}
</button>
</td>
</tr>
);
})
)}
</tbody>
</table>
@ -398,20 +477,20 @@ export function MediaManagement() {
onClick={toggleAll}
className="px-3 py-1.5 text-label-2 font-semibold rounded bg-bg-card border border-stroke text-fg-sub hover:bg-bg-surface-hover transition-colors font-korean"
>
☑ 전체선택
전체선택
</button>
<button
onClick={handleBulkDownload}
disabled={bulkDownloading || selectedIds.size === 0}
className="px-3 py-1.5 text-label-2 font-semibold rounded bg-[rgba(6,182,212,0.08)] text-color-accent border border-[rgba(6,182,212,0.3)] hover:bg-[rgba(6,182,212,0.15)] transition-colors font-korean disabled:opacity-50"
>
{bulkDownloading ? '⏳ 다운로드 중...' : '📥 선택 다운로드'}
{bulkDownloading ? '⏳ 다운로드 중...' : '선택 다운로드'}
</button>
<button
onClick={() => navigateToTab('prediction', 'analysis')}
className="px-3 py-1.5 text-label-2 font-semibold rounded bg-[rgba(6,182,212,0.08)] text-color-accent border border-[rgba(6,182,212,0.3)] hover:bg-[rgba(6,182,212,0.15)] transition-colors font-korean"
>
🔬 유출유확산예측으로 →
유출유확산예측으로 →
</button>
</div>
</div>
@ -457,28 +536,78 @@ export function MediaManagement() {
className="bg-bg-surface border border-stroke rounded-md w-[480px] max-h-[80vh] overflow-y-auto p-6"
>
<div className="flex justify-between items-center mb-4">
<span className="text-base font-bold font-korean">📤 영상·사진 업로드</span>
<span className="text-base font-bold font-korean">영상·사진 업로드</span>
<button
onClick={() => setShowUpload(false)}
onClick={() => {
setShowUpload(false);
setUploadFile(null);
}}
className="text-fg-disabled text-lg hover:text-fg"
>
✕
</button>
</div>
<div className="border-2 border-dashed border-stroke-light rounded-md py-8 px-4 text-center mb-4 cursor-pointer hover:border-[rgba(6,182,212,0.4)] transition-colors">
<div className="text-3xl mb-2 opacity-50">📁</div>
<div className="text-title-4 font-semibold mb-1 font-korean">
파일을 드래그하거나 클릭하여 업로드
</div>
<div className="text-label-2 text-fg-disabled font-korean">
JPG, TIFF, GeoTIFF, MP4, MOV 지원 · 최대 2GB
</div>
<div
onDragOver={(e) => {
e.preventDefault();
setDragOver(true);
}}
onDragLeave={() => setDragOver(false)}
onDrop={handleFileDrop}
onClick={() => fileInputRef.current?.click()}
className={`border-2 border-dashed rounded-md py-8 px-4 text-center mb-4 cursor-pointer transition-colors ${
dragOver
? 'border-color-accent bg-[rgba(6,182,212,0.06)]'
: uploadFile
? 'border-[rgba(6,182,212,0.3)] bg-[rgba(6,182,212,0.04)]'
: 'border-stroke-light hover:border-[rgba(6,182,212,0.4)]'
}`}
>
<input
ref={fileInputRef}
type="file"
accept=".jpg,.jpeg,.png,.tif,.tiff,.mp4,.mov"
onChange={handleFileSelect}
className="hidden"
/>
{uploadFile ? (
<>
<div className="text-3xl mb-2">✅</div>
<div className="text-title-4 font-semibold mb-1 font-korean truncate px-4">
{uploadFile.name}
</div>
<div className="text-label-2 text-fg-disabled font-korean">
{(uploadFile.size / (1024 * 1024)).toFixed(2)} MB · 클릭하여 변경
</div>
</>
) : (
<>
<div className="text-3xl mb-2 opacity-50">📁</div>
<div className="text-title-4 font-semibold mb-1 font-korean">
파일을 드래그하거나 클릭하여 업로드
</div>
<div className="text-label-2 text-fg-disabled font-korean">
JPG, TIFF, GeoTIFF, MP4, MOV 지원 · 최대 2GB
</div>
</>
)}
</div>
<div className="mb-3">
{/* <div className="mb-3">
<label className="block text-caption font-semibold mb-1.5 text-fg-sub font-korean">
촬영 장비
</label>
<select className="prd-i w-full">
<select
className="prd-i w-full"
value={uploadEquipNm}
onChange={(e) => {
setUploadEquipNm(e.target.value);
const v = e.target.value;
if (v.startsWith('드론')) setUploadEquip('drone');
else if (v.startsWith('유인')) setUploadEquip('plane');
else if (v.startsWith('위성')) setUploadEquip('satellite');
else setUploadEquip('drone');
}}
>
<option>드론 (DJI M300 RTK)</option>
<option>드론 (DJI Mavic 3E)</option>
<option>유인항공기 (CN-235)</option>
@ -505,21 +634,88 @@ export function MediaManagement() {
<textarea
className="prd-i w-full h-[60px] resize-y"
placeholder="촬영 조건, 비고 등..."
value={uploadMemo}
onChange={(e) => setUploadMemo(e.target.value)}
/>
</div>
</div> */}
<button
className="w-full py-3 rounded-sm text-body-2 font-bold font-korean cursor-pointer hover:brightness-125 transition-all"
onClick={handleUploadSubmit}
disabled={!uploadFile || uploading}
className="w-full py-3 rounded-sm text-body-2 font-bold font-korean cursor-pointer hover:brightness-125 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
style={{
background: 'rgba(6,182,212,0.15)',
border: '1px solid rgba(6,182,212,0.3)',
color: 'var(--color-accent)',
}}
>
📤 업로드 실행
{uploading ? '업로드 중...' : '업로드 실행'}
</button>
</div>
</div>
)}
{/* Image Preview Modal */}
{previewItem && (
<div
className="fixed inset-0 z-[250] bg-black/70 backdrop-blur-sm flex items-center justify-center"
onClick={() => setPreviewItem(null)}
>
<div
ref={previewRef}
onClick={(e) => e.stopPropagation()}
className="bg-bg-surface border border-stroke rounded-md w-[720px] max-w-[90vw] max-h-[85vh] flex flex-col overflow-hidden"
>
<div className="flex justify-between items-center px-4 py-2.5 border-b border-stroke">
<div className="flex flex-col min-w-0">
<span className="text-label-1 font-bold font-korean text-fg truncate">
{previewItem.fileNm}
</span>
<span className="text-caption text-fg-disabled font-mono">
{formatDtm(previewItem.takngDtm)} · {previewItem.equipNm}
</span>
</div>
<button
onClick={() => setPreviewItem(null)}
className="text-fg-disabled text-lg hover:text-fg ml-3"
>
✕
</button>
</div>
<div className="flex-1 flex items-center justify-center overflow-hidden bg-black/30 relative min-h-[320px]">
<img
src={getAerialMediaViewUrl(previewItem.aerialMediaSn)}
alt={previewItem.orgnlNm ?? previewItem.fileNm}
style={{ width: '100%', height: '100%', objectFit: 'contain' }}
onError={(e) => {
(e.target as HTMLImageElement).style.display = 'none';
(e.target as HTMLImageElement).nextElementSibling?.classList.remove('hidden');
}}
/>
<div className="hidden flex-col items-center gap-2">
<div className="text-[48px] text-fg-disabled">📷</div>
<div className="text-label-1 text-fg-disabled font-korean">
이미지를 불러올 수 없습니다
</div>
</div>
</div>
<div className="flex justify-end gap-2 px-4 py-2.5 border-t border-stroke">
<button
onClick={(e) => handleDownload(e, previewItem)}
disabled={downloadingId === previewItem.aerialMediaSn}
className="px-3 py-1.5 text-label-2 font-semibold rounded bg-[rgba(6,182,212,0.08)] text-color-accent border border-[rgba(6,182,212,0.3)] hover:bg-[rgba(6,182,212,0.15)] transition-colors font-korean disabled:opacity-50"
>
{downloadingId === previewItem.aerialMediaSn ? '⏳ 다운로드 중...' : '📥 다운로드'}
</button>
<button
onClick={() => setPreviewItem(null)}
className="px-3 py-1.5 text-label-2 font-semibold rounded bg-bg-card border border-stroke text-fg-sub hover:bg-bg-surface-hover transition-colors font-korean"
>
닫기
</button>
</div>
</div>
</div>
)}
</div>
);
}

12
frontend/src/tabs/aerial/components/OilAreaAnalysis.tsx → frontend/src/components/aerial/components/OilAreaAnalysis.tsx
파일 보기

@ -1,7 +1,7 @@
import { useState, useRef, useEffect, useCallback } from 'react';
import * as exifr from 'exifr';
import { stitchImages } from '../services/aerialApi';
import { analyzeImage } from '@tabs/prediction/services/predictionApi';
import { analyzeImage } from '@components/prediction/services/predictionApi';
import { setPendingImageAnalysis } from '@common/utils/imageAnalysisSignal';
import { navigateToTab } from '@common/hooks/useSubMenu';
import { decimalToDMS } from '@common/utils/coordinates';
@ -239,7 +239,7 @@ export function OilAreaAnalysis() {
<div className="flex gap-5 h-full overflow-hidden">
{/* ── Left Panel ── */}
<div className="w-[280px] min-w-[280px] flex flex-col overflow-y-auto scrollbar-thin">
<div className="text-body-2 font-bold mb-1 font-korean">🧩 영상사진합성</div>
<div className="text-body-2 font-bold mb-1 font-korean">영상사진합성</div>
<div className="text-label-2 text-fg-disabled mb-4 font-korean">
드론 사진을 합성하여 유출유 확산 면적과 기름 양을 산정합니다.
</div>
@ -396,12 +396,12 @@ export function OilAreaAnalysis() {
: { background: 'var(--bg-3)' }
}
>
{isAnalyzing ? '⏳ 분석 중...' : '🧩 분석 시작'}
{isAnalyzing ? '⏳ 분석 중...' : '분석 시작'}
</button>
</div>
{/* ── Right Panel ── */}
<div className="flex-1 flex flex-col overflow-hidden">
<div className="flex-1 flex flex-col overflow-y-auto scrollbar-thin min-w-0">
{/* 3×2 이미지 그리드 */}
<div className="text-label-2 font-bold mb-2 font-korean">선택된 이미지 미리보기</div>
<div className="grid grid-cols-3 gap-1.5 mb-3">
@ -458,8 +458,8 @@ export function OilAreaAnalysis() {
{/* 합성 결과 */}
<div className="text-label-2 font-bold mb-2 font-korean">합성 결과</div>
<div
className="relative bg-bg-base border border-stroke rounded-sm overflow-hidden flex items-center justify-center"
style={{ minHeight: '160px', flex: '1 1 0' }}
className="relative bg-bg-base border border-stroke rounded-sm overflow-hidden flex items-center justify-center shrink-0"
style={{ minHeight: '400px' }}
>
{stitchedPreviewUrl ? (
<img

2
frontend/src/tabs/aerial/components/OilDetectionOverlay.tsx → frontend/src/components/aerial/components/OilDetectionOverlay.tsx
파일 보기

@ -1,5 +1,5 @@
import { useRef, useEffect, memo } from 'react';
import type { OilDetectionResult } from '../utils/oilDetection';
import type { OilDetectionResult } from '@interfaces/aerial/AerialInterface';
import { OIL_CLASSES, OIL_CLASS_NAMES } from '../utils/oilDetection';
export interface OilDetectionOverlayProps {

4
frontend/src/tabs/aerial/components/RealtimeDrone.tsx → frontend/src/components/aerial/components/RealtimeDrone.tsx
파일 보기

@ -2,11 +2,11 @@ import { useState, useEffect, useCallback, useRef } from 'react';
import { Map, Marker, Popup } from '@vis.gl/react-maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
import { fetchDroneStreams, startDroneStreamApi, stopDroneStreamApi } from '../services/aerialApi';
import type { DroneStreamItem } from '../services/aerialApi';
import type { DroneStreamItem } from '@interfaces/aerial/AerialInterface';
import { CCTVPlayer } from './CCTVPlayer';
import type { CCTVPlayerHandle } from './CCTVPlayer';
import { useBaseMapStyle } from '@common/hooks/useBaseMapStyle';
import { S57EncOverlay } from '@common/components/map/S57EncOverlay';
import { S57EncOverlay } from '@components/common/map/S57EncOverlay';
import { useMapStore } from '@common/store/mapStore';
/** 함정 위치 + 드론 비행 위치 */

4
frontend/src/tabs/aerial/components/SatelliteRequest.tsx → frontend/src/components/aerial/components/SatelliteRequest.tsx
파일 보기

@ -3,12 +3,12 @@ import { Map, Source, Layer } from '@vis.gl/react-maplibre';
import 'maplibre-gl/dist/maplibre-gl.css';
import { Marker } from '@vis.gl/react-maplibre';
import { useBaseMapStyle } from '@common/hooks/useBaseMapStyle';
import { S57EncOverlay } from '@common/components/map/S57EncOverlay';
import { S57EncOverlay } from '@components/common/map/S57EncOverlay';
import { useMapStore } from '@common/store/mapStore';
import { fetchSatellitePasses } from '../services/aerialApi';
const VWORLD_API_KEY = import.meta.env.VITE_VWORLD_API_KEY || '';
import type { SatellitePass } from '../services/aerialApi';
import type { SatellitePass } from '@interfaces/aerial/AerialInterface';
interface SatRequest {
id: string;

0
frontend/src/tabs/aerial/components/SensorAnalysis.tsx → frontend/src/components/aerial/components/SensorAnalysis.tsx
파일 보기

101
frontend/src/components/aerial/components/WingAI.tsx Normal file
파일 보기

@ -0,0 +1,101 @@
import { useState } from 'react';
import { useControl } from '@vis.gl/react-maplibre';
import { MapboxOverlay } from '@deck.gl/mapbox';
import 'maplibre-gl/dist/maplibre-gl.css';
import { DetectPanel } from './contents/DetectPanel';
import { ChangeDetectPanel } from './contents/ChangeDetectPanel';
import { AoiPanel } from './contents/AoiPanel';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function DeckGLOverlay({ layers }: { layers: any[] }) {
const overlay = useControl<MapboxOverlay>(() => new MapboxOverlay({ interleaved: true }));
overlay.setProps({ layers });
return null;
}
type WingAITab = 'detect' | 'change' | 'aoi';
const tabItems: { id: WingAITab; label: string; icon: string; desc: string }[] = [
{
id: 'detect',
label: '객체 탐지',
icon: '🎯',
desc: '위성/드론 영상에서 선박·차량·시설물 자동 탐지 및 분류',
},
{
id: 'change',
label: '변화 감지',
icon: '🔄',
desc: '동일 지역 다시점 영상 비교 분석 (Before/After)',
},
{
id: 'aoi',
label: '연안자동감지',
icon: '📍',
desc: '연안 관심지역 등록 → 변화 자동 감지 및 알림',
},
];
export function WingAI() {
const [activeTab, setActiveTab] = useState<WingAITab>('detect');
return (
<div className="overflow-y-auto px-6 pt-1 pb-2">
{/* 헤더 */}
<div className="flex items-center gap-3 mb-4 h-9">
<div className="flex items-center gap-2 shrink-0">
<div
className="w-7 h-7 rounded-md flex items-center justify-center text-body-2"
style={{
background: 'rgba(6,182,212,0.15)',
border: '1px solid rgba(6,182,212,0.3)',
}}
>
🤖
</div>
<div className="text-label-1 font-bold font-korean text-fg">AI 탐지/분석</div>
{/* <span
className="text-caption px-1.5 py-0.5 rounded font-bold"
style={{
background: 'color-mix(in srgb, var(--color-tertiary) 12%, transparent)',
color: 'var(--color-tertiary)',
border: '1px solid rgba(168,85,247,.25)',
}}
>
WingAI
</span> */}
</div>
<div className="flex gap-1 h-7">
{tabItems.map((t) => (
<button
key={t.id}
onClick={() => setActiveTab(t.id)}
className="px-2.5 h-full rounded text-caption font-bold font-korean cursor-pointer border transition-colors"
style={
activeTab === t.id
? {
background: 'rgba(6,182,212,.08)',
borderColor: 'rgba(6,182,212,.3)',
color: 'var(--color-accent)',
}
: {
background: 'var(--bg-card)',
borderColor: 'var(--stroke-default)',
color: 'var(--fg-disabled)',
}
}
>
{/* {t.icon} */}
{t.label}
</button>
))}
</div>
</div>
{/* 탭 콘텐츠 */}
{activeTab === 'detect' && <DetectPanel />}
{activeTab === 'change' && <ChangeDetectPanel />}
{activeTab === 'aoi' && <AoiPanel />}
</div>
);
}

800
frontend/src/components/aerial/components/contents/AoiPanel.tsx Normal file
파일 보기

@ -0,0 +1,800 @@
import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
import { Map } from '@vis.gl/react-maplibre';
import { PolygonLayer, ScatterplotLayer } from '@deck.gl/layers';
import type { MapMouseEvent } from 'maplibre-gl';
import { useBaseMapStyle } from '@common/hooks/useBaseMapStyle';
import { useMapStore } from '@common/store/mapStore';
import { S57EncOverlay } from '@components/common/map/S57EncOverlay';
import { DeckGLOverlay } from '../WingAI';
type ZoneStatus = '정상' | '경보' | '주의';
type MonitorSource = 'satellite' | 'cctv' | 'drone' | 'ais';
interface MonitorSourceConfig {
id: MonitorSource;
label: string;
icon: string;
color: string;
desc: string;
}
const MONITOR_SOURCES: MonitorSourceConfig[] = [
{
id: 'satellite',
label: '위성영상',
icon: '🛰',
color: 'var(--color-accent)',
desc: 'KOMPSAT/Sentinel 주기 촬영',
},
{
id: 'cctv',
label: 'CCTV',
icon: '📹',
color: 'var(--color-info)',
desc: 'KHOA/KBS 해안 CCTV 실시간',
},
{
id: 'drone',
label: '드론',
icon: '🛸',
color: 'var(--color-success)',
desc: '드론 정밀 촬영 / 열화상',
},
{
id: 'ais',
label: 'AIS',
icon: '🚢',
color: 'var(--color-warning)',
desc: '선박 위치·항적 실시간 수신',
},
];
interface MonitorZone {
id: string;
name: string;
interval: string;
lastCheck: string;
status: ZoneStatus;
alerts: number;
polygon: [number, number][];
color: string;
monitoring: boolean;
/** 활성 모니터링 소스 */
sources: MonitorSource[];
}
const INTERVAL_OPTIONS = ['1h', '3h', '6h', '12h', '24h'];
const ZONE_COLORS = [
'var(--color-accent)',
'var(--color-info)',
'var(--color-success)',
'var(--color-warning)',
'var(--color-danger)',
'var(--color-danger)',
'var(--color-accent)',
];
const INITIAL_ZONES: MonitorZone[] = [
{
id: 'AOI-001',
name: '여수항 반경',
interval: '6h',
lastCheck: '03-16 14:00',
status: '정상',
alerts: 0,
monitoring: true,
color: 'var(--color-info)',
polygon: [
[127.68, 34.78],
[127.78, 34.78],
[127.78, 34.7],
[127.68, 34.7],
],
sources: ['satellite', 'cctv', 'ais'],
},
{
id: 'AOI-002',
name: '제주 서귀포 해상',
interval: '3h',
lastCheck: '03-16 13:30',
status: '경보',
alerts: 2,
monitoring: true,
color: 'var(--color-danger)',
polygon: [
[126.45, 33.28],
[126.58, 33.28],
[126.58, 33.2],
[126.45, 33.2],
],
sources: ['satellite', 'drone', 'cctv', 'ais'],
},
{
id: 'AOI-003',
name: '부산항 외항',
interval: '12h',
lastCheck: '03-16 08:00',
status: '정상',
alerts: 0,
monitoring: true,
color: 'var(--color-success)',
polygon: [
[129.05, 35.12],
[129.2, 35.12],
[129.2, 35.05],
[129.05, 35.05],
],
sources: ['cctv', 'ais'],
},
{
id: 'AOI-004',
name: '통영 ~ 거제 해역',
interval: '24h',
lastCheck: '03-15 20:00',
status: '주의',
alerts: 1,
monitoring: true,
color: 'var(--color-warning)',
polygon: [
[128.3, 34.9],
[128.65, 34.9],
[128.65, 34.8],
[128.3, 34.8],
],
sources: ['satellite', 'drone'],
},
];
export function AoiPanel() {
const [zones, setZones] = useState<MonitorZone[]>(INITIAL_ZONES);
const [selectedZone, setSelectedZone] = useState<string | null>(null);
const currentMapStyle = useBaseMapStyle();
const mapToggles = useMapStore((s) => s.mapToggles);
// 드로잉 상태
const [isDrawing, setIsDrawing] = useState(false);
const [drawingPoints, setDrawingPoints] = useState<[number, number][]>([]);
// 등록 폼
const [showForm, setShowForm] = useState(false);
const [formName, setFormName] = useState('');
// 실시간 시뮬
const [now, setNow] = useState(() => new Date());
// 시계 갱신 (1분마다)
useEffect(() => {
const t = setInterval(() => setNow(new Date()), 60_000);
return () => clearInterval(t);
}, []);
const nextId = useRef(zones.length + 1);
// 지도 클릭 → 폴리곤 포인트 수집
const handleMapClick = useCallback(
(e: MapMouseEvent) => {
if (!isDrawing) return;
setDrawingPoints((prev) => [...prev, [e.lngLat.lng, e.lngLat.lat]]);
},
[isDrawing],
);
// 드로잉 시작
const startDrawing = () => {
setDrawingPoints([]);
setIsDrawing(true);
setShowForm(false);
setSelectedZone(null);
};
// 드로잉 완료 → 폼 표시
const finishDrawing = () => {
if (drawingPoints.length < 3) return;
setIsDrawing(false);
setShowForm(true);
setFormName('');
};
// 드로잉 취소
const cancelDrawing = () => {
setIsDrawing(false);
setDrawingPoints([]);
setShowForm(false);
};
// 구역 등록 (이름만 → 등록 후 설정)
const registerZone = () => {
if (!formName.trim() || drawingPoints.length < 3) return;
const newId = `AOI-${String(nextId.current++).padStart(3, '0')}`;
const newZone: MonitorZone = {
id: newId,
name: formName.trim(),
interval: '6h',
lastCheck: `${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')} ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`,
status: '정상',
alerts: 0,
polygon: [...drawingPoints],
color: ZONE_COLORS[zones.length % ZONE_COLORS.length],
monitoring: true,
sources: ['satellite', 'cctv'],
};
setZones((prev) => [...prev, newZone]);
setDrawingPoints([]);
setShowForm(false);
setSelectedZone(newId);
};
// 구역 설정 변경
const updateZone = (id: string, patch: Partial<MonitorZone>) => {
setZones((prev) => prev.map((z) => (z.id === id ? { ...z, ...patch } : z)));
};
// 모니터링 소스 토글
const toggleSource = (id: string, src: MonitorSource) => {
setZones((prev) =>
prev.map((z) => {
if (z.id !== id) return z;
const has = z.sources.includes(src);
return { ...z, sources: has ? z.sources.filter((s) => s !== src) : [...z.sources, src] };
}),
);
};
// 모니터링 토글
const toggleMonitoring = (id: string) => {
setZones((prev) => prev.map((z) => (z.id === id ? { ...z, monitoring: !z.monitoring } : z)));
};
// 구역 삭제
const removeZone = (id: string) => {
setZones((prev) => prev.filter((z) => z.id !== id));
if (selectedZone === id) setSelectedZone(null);
};
const statusStyle = (s: ZoneStatus) => {
if (s === '경보')
return {
background: 'color-mix(in srgb, var(--color-danger) 12%, transparent)',
color: 'var(--color-danger)',
border: '1px solid color-mix(in srgb, var(--color-danger) 25%, transparent)',
};
if (s === '주의')
return {
background: 'color-mix(in srgb, var(--color-caution) 12%, transparent)',
color: 'var(--color-caution)',
border: '1px solid color-mix(in srgb, var(--color-caution) 25%, transparent)',
};
return {
background: 'color-mix(in srgb, var(--color-success) 12%, transparent)',
color: 'var(--color-success)',
border: '1px solid color-mix(in srgb, var(--color-success) 25%, transparent)',
};
};
// deck.gl 레이어: 등록된 폴리곤 + 드로잉 중 포인트
const deckLayers = useMemo(() => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const result: any[] = [];
// 등록된 구역 폴리곤
const visibleZones = zones.filter((z) => z.monitoring);
if (visibleZones.length > 0) {
result.push(
new PolygonLayer({
id: 'aoi-zones',
data: visibleZones,
getPolygon: (d: MonitorZone) => [...d.polygon, d.polygon[0]],
getFillColor: (d: MonitorZone) => {
const hex = d.color;
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
const alpha = selectedZone === d.id ? 60 : 30;
return [r, g, b, alpha];
},
getLineColor: (d: MonitorZone) => {
const hex = d.color;
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return [r, g, b, selectedZone === d.id ? 220 : 140];
},
getLineWidth: (d: MonitorZone) => (selectedZone === d.id ? 3 : 1.5),
lineWidthUnits: 'pixels',
pickable: true,
onClick: ({ object }: { object: MonitorZone }) => {
if (object && !isDrawing)
setSelectedZone(object.id === selectedZone ? null : object.id);
},
updateTriggers: {
getFillColor: [selectedZone],
getLineColor: [selectedZone],
getLineWidth: [selectedZone],
},
}),
);
// 경보/주의 구역 중심점 펄스
const alertZones = visibleZones.filter((z) => z.status !== '정상');
if (alertZones.length > 0) {
result.push(
new ScatterplotLayer({
id: 'aoi-alert-pulse',
data: alertZones,
getPosition: (d: MonitorZone) => {
const lngs = d.polygon.map((p) => p[0]);
const lats = d.polygon.map((p) => p[1]);
return [
(Math.min(...lngs) + Math.max(...lngs)) / 2,
(Math.min(...lats) + Math.max(...lats)) / 2,
];
},
getRadius: 8000,
radiusUnits: 'meters' as const,
getFillColor: (d: MonitorZone) =>
d.status === '경보' ? [239, 68, 68, 80] : [234, 179, 8, 60],
getLineColor: (d: MonitorZone) =>
d.status === '경보' ? [239, 68, 68, 180] : [234, 179, 8, 150],
lineWidthMinPixels: 2,
stroked: true,
}),
);
}
}
// 드로잉 중 포인트
if (drawingPoints.length > 0) {
result.push(
new ScatterplotLayer({
id: 'drawing-points',
data: drawingPoints,
getPosition: (d: [number, number]) => d,
getRadius: 5,
radiusUnits: 'pixels' as const,
getFillColor: [6, 182, 212, 220],
getLineColor: [255, 255, 255, 255],
lineWidthMinPixels: 2,
stroked: true,
}),
);
// 드로잉 폴리곤 미리보기
if (drawingPoints.length >= 3) {
result.push(
new PolygonLayer({
id: 'drawing-preview',
data: [{ polygon: [...drawingPoints, drawingPoints[0]] }],
getPolygon: (d: { polygon: [number, number][] }) => d.polygon,
getFillColor: [6, 182, 212, 25],
getLineColor: [6, 182, 212, 200],
getLineWidth: 2,
lineWidthUnits: 'pixels',
getDashArray: [4, 4],
}),
);
}
}
return result;
}, [zones, drawingPoints, selectedZone, isDrawing]);
const activeMonitoring = zones.filter((z) => z.monitoring).length;
const alertCount = zones.filter((z) => z.status === '경보').length;
const warningCount = zones.filter((z) => z.status === '주의').length;
const totalAlerts = zones.reduce((s, a) => s + a.alerts, 0);
const inputCls = 'w-full px-2.5 py-1.5 rounded text-caption font-korean outline-none border';
const inputStyle = {
background: 'var(--bg-elevated)',
borderColor: 'var(--stroke-default)',
color: 'var(--fg-default)',
};
return (
<div>
{/* 통계 */}
<div className="grid grid-cols-4 gap-3 mb-4">
{[
{ value: String(activeMonitoring), label: '감시 구역', color: 'var(--color-info)' },
{ value: String(alertCount), label: '경보', color: 'var(--color-danger)' },
{ value: String(warningCount), label: '주의', color: 'var(--color-caution)' },
{ value: String(totalAlerts), label: '미확인 알림', color: 'var(--color-tertiary)' },
].map((s, i) => (
<div key={i} className="bg-bg-elevated border border-stroke rounded-md p-3 text-center">
<div className="text-[20px] font-bold font-mono text-fg">{s.value}</div>
<div className="text-caption text-fg-disabled mt-0.5 font-korean">{s.label}</div>
</div>
))}
</div>
<div className="grid grid-cols-[1fr_360px] gap-4">
{/* 지도 영역 */}
<div
className="bg-bg-elevated border border-stroke rounded-md overflow-hidden"
style={{ minHeight: 520 }}
>
{/* 지도 헤더 */}
<div className="flex items-center justify-between px-4 py-2.5 border-b border-stroke">
<div className="flex items-center gap-2">
<div className="text-label-2 font-bold font-korean text-fg">📍 연안 감시 구역</div>
{isDrawing && (
<span
className="text-caption px-1.5 py-0.5 rounded font-bold animate-pulse"
style={{
background: 'rgba(6,182,212,.12)',
color: 'var(--color-accent)',
border: '1px solid rgba(6,182,212,.3)',
}}
>
드로잉 모드 · 지도를 클릭하여 꼭짓점 추가 ({drawingPoints.length}점)
</span>
)}
</div>
<div className="flex gap-1.5">
{isDrawing ? (
<>
<button
onClick={finishDrawing}
disabled={drawingPoints.length < 3}
className="px-2.5 h-6 text-color-accent rounded-sm text-caption font-semibold cursor-pointer font-korean disabled:opacity-40 disabled:cursor-not-allowed"
style={{
background: drawingPoints.length >= 3 ? 'rgba(6,182,212,0.08)' : '#333',
}}
>
완료 ({drawingPoints.length >= 3 ? `${drawingPoints.length}점` : '3점 이상'})
</button>
<button
onClick={() => setDrawingPoints((p) => p.slice(0, -1))}
disabled={drawingPoints.length === 0}
className="px-2 h-6 rounded-sm text-caption font-semibold cursor-pointer font-korean border disabled:opacity-40"
style={{
background: 'var(--bg-card)',
borderColor: 'var(--stroke-default)',
color: 'var(--fg-sub)',
}}
>
되돌리기
</button>
<button
onClick={cancelDrawing}
className="px-2 h-6 rounded-sm text-caption font-semibold cursor-pointer font-korean border"
style={{
background: 'var(--bg-card)',
borderColor: 'var(--stroke-default)',
color: 'var(--color-danger)',
}}
>
취소
</button>
</>
) : (
<button
onClick={startDrawing}
className="px-2.5 h-6 text-color-accent rounded-sm text-caption font-semibold cursor-pointer font-korean flex items-center gap-1"
style={{ background: 'rgba(6,182,212,0.08)' }}
>
+ 감시 구역 등록
</button>
)}
</div>
</div>
{/* MapLibre 지도 */}
<div style={{ height: 480, cursor: isDrawing ? 'crosshair' : undefined }}>
<Map
initialViewState={{ longitude: 127.8, latitude: 34.5, zoom: 6.5 }}
style={{ width: '100%', height: '100%' }}
mapStyle={currentMapStyle}
attributionControl={false}
onClick={handleMapClick}
>
<S57EncOverlay visible={mapToggles['s57'] ?? false} />
<DeckGLOverlay layers={deckLayers} />
</Map>
</div>
</div>
{/* 우측 패널 */}
<div
className="flex flex-col gap-3"
style={{
maxHeight: 520,
overflowY: 'scroll',
scrollbarWidth: 'thin',
scrollbarColor: 'var(--stroke-default) transparent',
}}
>
{/* 등록 폼: 이름만 입력 → 바로 등록 */}
{showForm && drawingPoints.length >= 3 && (
<div
className="bg-bg-elevated border rounded-md overflow-hidden"
style={{ borderColor: 'rgba(6,182,212,.3)' }}
>
<div
className="px-4 py-2.5 border-b font-korean"
style={{ borderColor: 'rgba(6,182,212,.15)', background: 'rgba(6,182,212,.05)' }}
>
<div className="text-label-2 font-bold" style={{ color: 'var(--color-accent)' }}>
새 감시 구역 등록
</div>
<div className="text-caption text-fg-disabled mt-0.5">
폴리곤 {drawingPoints.length}점 설정 완료
</div>
</div>
<div className="px-4 py-3">
<label className="text-caption font-bold text-fg-disabled font-korean block mb-1.5">
구역 이름
</label>
<input
value={formName}
onChange={(e) => setFormName(e.target.value)}
placeholder="예: 여수항 북측 해안"
className={inputCls}
style={inputStyle}
onKeyDown={(e) => {
if (e.key === 'Enter') registerZone();
}}
autoFocus
/>
<div className="flex gap-2 mt-3">
<button
onClick={registerZone}
disabled={!formName.trim()}
className="flex-1 py-2 text-color-accent rounded text-caption font-bold cursor-pointer font-korean disabled:opacity-40 disabled:cursor-not-allowed"
style={{
background: formName.trim() ? 'rgba(6,182,212,0.08)' : '#333',
}}
>
등록
</button>
<button
onClick={cancelDrawing}
className="px-4 py-2 rounded text-caption font-bold cursor-pointer font-korean border"
style={{
background: 'var(--bg-card)',
borderColor: 'var(--stroke-default)',
color: 'var(--fg-sub)',
}}
>
취소
</button>
</div>
</div>
</div>
)}
{/* 감시 구역 목록 */}
<div className="bg-bg-elevated border border-stroke rounded-md flex-1">
<div className="flex items-center justify-between px-4 py-2.5 border-b border-stroke">
<div className="text-label-2 font-bold font-korean text-fg">📋 등록된 감시 구역</div>
<div className="text-caption text-fg-disabled font-mono">{zones.length}건</div>
</div>
<div className="divide-y divide-stroke">
{zones.map((z) => {
const isOpen = selectedZone === z.id;
return (
<div key={z.id} className="border-b border-stroke last:border-b-0">
{/* 목록 행 */}
<div
onClick={() => setSelectedZone(isOpen ? null : z.id)}
className="px-4 py-2.5 hover:bg-bg-surface-hover/30 transition-colors cursor-pointer"
style={{ background: isOpen ? 'rgba(6,182,212,.04)' : undefined }}
>
<div className="flex items-center justify-between mb-1">
<div className="flex items-center gap-2">
<span className="text-caption font-mono text-fg-disabled">{z.id}</span>
<span className="text-label-2 font-semibold text-fg font-korean">
{z.name}
</span>
</div>
<div className="flex items-center gap-1.5">
<span
className="px-1.5 py-0.5 rounded text-caption font-bold font-korean"
style={statusStyle(z.status)}
>
{z.status}
</span>
<span className="text-caption text-fg-disabled">
{isOpen ? '▲' : '▼'}
</span>
</div>
</div>
{/* 활성 소스 배지 + 주기 */}
<div className="flex items-center gap-1.5 mt-1">
{z.sources.map((sid) => {
const cfg = MONITOR_SOURCES.find((s) => s.id === sid)!;
return (
<span
key={sid}
className="px-1.5 py-0.5 rounded text-caption font-bold"
style={{
background: 'transparent',
color: cfg.color,
border: `1px solid color-mix(in srgb, ${cfg.color} 40%, transparent)`,
}}
>
{cfg.label}
</span>
);
})}
<span className="text-caption text-fg-disabled font-mono ml-auto">
{z.interval} · {z.lastCheck}
</span>
</div>
{z.alerts > 0 && (
<div
className="mt-1.5 px-2 py-1 rounded text-caption font-bold font-korean"
style={{
background: 'color-mix(in srgb, var(--color-danger) 8%, transparent)',
color: 'var(--color-danger)',
}}
>
미확인 알림 {z.alerts}건
</div>
)}
</div>
{/* 인라인 설정 패널 (아코디언) */}
{isOpen && (
<div
className="px-4 py-3 space-y-3 border-t"
style={{
borderColor: `color-mix(in srgb, ${z.color} 12%, transparent)`,
background: `color-mix(in srgb, ${z.color} 3%, transparent)`,
}}
>
{/* 감시 주기 */}
<div>
<label className="text-caption font-bold text-fg-disabled font-korean block mb-1.5">
감시 주기
</label>
<div className="flex gap-1">
{INTERVAL_OPTIONS.map((iv) => (
<button
key={iv}
onClick={(e) => {
e.stopPropagation();
updateZone(z.id, { interval: iv });
}}
className="px-2.5 py-1 rounded text-caption font-bold font-mono cursor-pointer border transition-colors"
style={
z.interval === iv
? {
background: 'rgba(6,182,212,.08)',
borderColor: 'rgba(6,182,212,.3)',
color: 'var(--color-accent)',
}
: {
background: 'var(--bg-card)',
borderColor: 'var(--stroke-default)',
color: 'var(--fg-disabled)',
}
}
>
{iv}
</button>
))}
</div>
</div>
{/* 모니터링 방법 */}
<div>
<label className="text-caption font-bold text-fg-disabled font-korean block mb-1.5">
모니터링 방법
</label>
<div className="space-y-1.5">
{MONITOR_SOURCES.map((src) => {
const active = z.sources.includes(src.id);
return (
<button
key={src.id}
onClick={(e) => {
e.stopPropagation();
toggleSource(z.id, src.id);
}}
className="w-full flex items-center gap-2.5 px-3 py-2 rounded border cursor-pointer transition-all text-left"
style={
active
? {
background: 'transparent',
borderColor: `color-mix(in srgb, ${src.color} 40%, transparent)`,
color: 'var(--fg-default)',
}
: {
background: 'var(--bg-card)',
borderColor: 'var(--stroke-default)',
color: 'var(--fg-disabled)',
opacity: 0.6,
}
}
>
<span className="text-body-2 shrink-0">{active ? '◉' : '○'}</span>
<span className="text-body-2 shrink-0">{src.icon}</span>
<div className="flex-1 min-w-0">
<div className="text-caption font-bold font-korean">
{src.label}
</div>
<div className="text-caption font-korean text-fg-disabled">
{src.desc}
</div>
</div>
</button>
);
})}
</div>
{z.sources.length === 0 && (
<div className="text-caption text-fg-disabled font-korean mt-1.5">
최소 1개 이상의 모니터링 방법을 선택하세요
</div>
)}
</div>
{/* 하단 컨트롤 */}
<div
className="flex items-center gap-2 pt-1 border-t"
style={{ borderColor: 'var(--stroke-default)' }}
>
<button
onClick={(e) => {
e.stopPropagation();
toggleMonitoring(z.id);
}}
className="px-3 py-1.5 rounded text-caption font-bold font-korean cursor-pointer border transition-colors"
style={
z.monitoring
? {
background:
'color-mix(in srgb, var(--color-success) 12%, transparent)',
borderColor:
'color-mix(in srgb, var(--color-success) 25%, transparent)',
color: 'var(--color-success)',
}
: {
background: 'var(--bg-card)',
borderColor: 'var(--stroke-default)',
color: 'var(--fg-disabled)',
}
}
>
{z.monitoring ? '◉ 감시 중' : '○ 일시정지'}
</button>
<span className="text-caption text-fg-disabled font-mono">
{z.polygon.length}점 · {z.sources.length}소스 · {z.interval}
</span>
<button
onClick={(e) => {
e.stopPropagation();
removeZone(z.id);
}}
className="ml-auto px-2 py-1.5 rounded text-caption font-bold font-korean cursor-pointer border"
style={{
background: 'color-mix(in srgb, var(--color-danger) 8%, transparent)',
borderColor:
'color-mix(in srgb, var(--color-danger) 20%, transparent)',
color: 'var(--color-danger)',
}}
>
삭제
</button>
</div>
</div>
)}
</div>
);
})}
{zones.length === 0 && (
<div className="px-4 py-8 text-center">
<div className="text-2xl opacity-30 mb-2">📍</div>
<div className="text-caption text-fg-disabled font-korean">
등록된 감시 구역이 없습니다
</div>
<div className="text-caption text-fg-disabled font-korean mt-1">
"+ 감시 구역 등록" 버튼으로 시작하세요
</div>
</div>
)}
</div>
</div>
</div>
</div>
</div>
);
}

601
frontend/src/components/aerial/components/contents/ChangeDetectPanel.tsx Normal file
파일 보기

@ -0,0 +1,601 @@
import { useState } from 'react';
type SourceType = 'satellite' | 'cctv' | 'drone' | 'ais';
interface SourceConfig {
id: SourceType;
label: string;
icon: string;
color: string;
desc: string;
}
const SOURCES: SourceConfig[] = [
{
id: 'satellite',
label: '위성영상',
icon: '🛰',
color: 'var(--color-accent)',
desc: 'KOMPSAT-3A / Sentinel SAR 수신 영상',
},
{
id: 'cctv',
label: 'CCTV',
icon: '📹',
color: 'var(--color-info)',
desc: 'KHOA / KBS 해안 CCTV 스냅샷',
},
{
id: 'drone',
label: '드론',
icon: '🛸',
color: 'var(--color-success)',
desc: '정밀 촬영 / 열화상 이미지',
},
{
id: 'ais',
label: 'AIS',
icon: '🚢',
color: 'var(--color-warning)',
desc: '선박 위치·항적·MMSI 궤적',
},
];
interface ChangeRecord {
id: string;
area: string;
type: string;
date1: string;
time1: string;
date2: string;
time2: string;
severity: '심각' | '보통' | '낮음';
detail: string;
sources: SourceType[];
crossRef?: string;
/** 각 정보원별 AS-IS 시점 요약 */
asIsDetail: Partial<Record<SourceType, string>>;
/** 각 정보원별 현재 시점 요약 */
nowDetail: Partial<Record<SourceType, string>>;
}
export function ChangeDetectPanel() {
const [layers, setLayers] = useState<Record<SourceType, boolean>>({
satellite: true,
cctv: true,
drone: true,
ais: true,
});
const [sourceFilter, setSourceFilter] = useState<SourceType | 'all'>('all');
const [selectedChange, setSelectedChange] = useState<string | null>(null);
const toggleLayer = (id: SourceType) => setLayers((prev) => ({ ...prev, [id]: !prev[id] }));
const activeCount = Object.values(layers).filter(Boolean).length;
const changes: ChangeRecord[] = [
{
id: 'CHG-001',
area: '여수항 북측 해안',
type: '선박 이동',
date1: '03-14',
time1: '14:00',
date2: '03-16',
time2: '14:23',
severity: '보통',
detail: '정박 선박 3척 → 7척 (증가)',
sources: ['satellite', 'ais', 'cctv'],
crossRef: 'AIS MMSI 440123456 외 3척 신규 입항 — 위성+CCTV 동시 확인',
asIsDetail: {
satellite: '정박 선박 3척 식별',
ais: 'MMSI 3건 정박 상태',
cctv: '여수 오동도 CCTV 정상',
},
nowDetail: {
satellite: '선박 7척 식별 (4척 증가)',
ais: 'MMSI 7건 (신규 4건 입항)',
cctv: '여수 오동도 CCTV 선박 증가 확인',
},
},
{
id: 'CHG-002',
area: '제주 서귀포 해상',
type: '유막 확산',
date1: '03-15',
time1: '10:30',
date2: '03-16',
time2: '14:23',
severity: '심각',
detail: '유막 면적 2.1km² → 4.8km² (확산)',
sources: ['satellite', 'drone', 'cctv', 'ais'],
crossRef: '4개 정보원 교차확인 — 유막 남동 방향 확산 일치',
asIsDetail: {
satellite: 'SAR 유막 2.1km² 탐지',
drone: '열화상 유막 경계 포착',
cctv: '서귀포 카메라 해면 이상 없음',
ais: '인근 유조선 1척 정박',
},
nowDetail: {
satellite: 'SAR 유막 4.8km² 확산',
drone: '열화상 유막 남동 2.7km 확대',
cctv: '서귀포 카메라 해면 변색 감지',
ais: '유조선 이탈, 방제선 2척 진입',
},
},
{
id: 'CHG-003',
area: '부산항 외항',
type: '방제장비 배치',
date1: '03-10',
time1: '09:00',
date2: '03-16',
time2: '14:23',
severity: '낮음',
detail: '부유식 오일펜스 신규 배치 확인',
sources: ['drone', 'cctv'],
crossRef: 'CCTV 부산항 #204 + 드론 정밀 촬영 일치',
asIsDetail: { drone: '오일펜스 미배치', cctv: '부산 민락항 CCTV 해상 장비 없음' },
nowDetail: { drone: '오일펜스 300m 배치 확인', cctv: '부산 민락항 CCTV 오일펜스 포착' },
},
{
id: 'CHG-004',
area: '통영 해역 남측',
type: '미식별 선박',
date1: '03-13',
time1: '22:00',
date2: '03-16',
time2: '14:23',
severity: '보통',
detail: 'AIS 미송출 선박 2척 위성 포착',
sources: ['satellite', 'ais'],
crossRef: 'AIS 미등록 — 위성 SAR 반사 신호로 탐지, 불법 조업 의심',
asIsDetail: { satellite: '해역 내 선박 신호 없음', ais: '등록 선박 0척' },
nowDetail: { satellite: 'SAR 반사 2건 포착 (선박 추정)', ais: 'MMSI 미수신 — 미식별 선박' },
},
{
id: 'CHG-005',
area: '인천 연안부두',
type: '야간 이상징후',
date1: '03-15',
time1: '03:42',
date2: '03-16',
time2: '03:45',
severity: '심각',
detail: 'CCTV 야간 유출 의심 + AIS 정박선 이탈',
sources: ['cctv', 'ais'],
crossRef: 'KBS CCTV #9981 03:42 해면 반사 이상 → AIS 03:45 정박선 이탈 연계',
asIsDetail: { cctv: '인천 연안부두 CCTV 야간 정상', ais: '정박선 5척 정상 정박' },
nowDetail: {
cctv: '03:42 해면 반사광 이상 감지',
ais: '03:45 정박선 1척 이탈 (MMSI 441987654)',
},
},
{
id: 'CHG-006',
area: '마라도 주변 해역',
type: '해안선 변화',
date1: '03-12',
time1: '11:00',
date2: '03-16',
time2: '11:15',
severity: '낮음',
detail: '해안 퇴적물 분포 변경 감지',
sources: ['satellite', 'drone'],
crossRef: '위성 다분광 + 드론 정밀 촬영 퇴적 방향 확인',
asIsDetail: { satellite: '해안선 퇴적 분포 기준점', drone: '미촬영' },
nowDetail: { satellite: '퇴적 남서 방향 이동 감지', drone: '정밀 촬영으로 퇴적 경계 확인' },
},
];
const severityStyle = (s: '심각' | '보통' | '낮음') => {
if (s === '심각')
return {
background: 'color-mix(in srgb, var(--color-danger) 12%, transparent)',
color: 'var(--color-danger)',
border: '1px solid color-mix(in srgb, var(--color-danger) 25%, transparent)',
};
if (s === '보통')
return {
background: 'color-mix(in srgb, var(--color-caution) 12%, transparent)',
color: 'var(--color-caution)',
border: '1px solid color-mix(in srgb, var(--color-caution) 25%, transparent)',
};
return {
background: 'color-mix(in srgb, var(--color-success) 12%, transparent)',
color: 'var(--color-success)',
border: '1px solid color-mix(in srgb, var(--color-success) 25%, transparent)',
};
};
const sourceStyle = (src: SourceConfig, active = true) =>
active
? { background: `${src.color}18`, color: src.color, border: `1px solid ${src.color}40` }
: {
background: 'var(--bg-card)',
color: 'var(--fg-disabled)',
border: '1px solid var(--stroke-default)',
opacity: 0.5,
};
const filteredChanges =
sourceFilter === 'all' ? changes : changes.filter((c) => c.sources.includes(sourceFilter));
return (
<div>
{/* 레이어 토글 바 */}
<div className="flex items-center gap-3 mb-4">
<div className="text-caption font-bold font-korean text-fg-disabled shrink-0">
오버레이 레이어
</div>
<div className="flex gap-1.5">
{SOURCES.map((s) => (
<button
key={s.id}
onClick={() => toggleLayer(s.id)}
className="px-2.5 py-1.5 rounded text-caption font-bold font-korean cursor-pointer border transition-all"
style={sourceStyle(s, layers[s.id])}
>
<span className="mr-1">{layers[s.id] ? '◉' : '○'}</span>
{/* {s.icon} */}
{s.label}
</button>
))}
</div>
<div className="text-caption text-fg-disabled font-mono ml-auto">
{activeCount}/4 레이어 활성
</div>
</div>
{/* AS-IS / 현재 시점 비교 뷰 */}
<div className="grid grid-cols-2 gap-4 mb-4" style={{ minHeight: 400 }}>
{/* AS-IS 시점 */}
<div className="bg-bg-elevated border border-stroke rounded-md overflow-hidden">
<div
className="flex items-center justify-between px-4 py-2.5 border-b border-stroke"
style={{ background: 'rgba(6,182,212,.05)' }}
>
<div className="flex items-center gap-2">
<span
className="text-label-2 font-bold font-korean"
style={{ color: 'var(--color-accent)' }}
>
AS-IS
</span>
<span
className="text-caption px-1.5 py-0.5 rounded font-bold"
style={{
background: 'rgba(6,182,212,.12)',
color: 'var(--color-accent)',
border: '1px solid rgba(6,182,212,.25)',
}}
>
과거 시점
</span>
</div>
<div className="flex items-center gap-2">
<input
type="date"
defaultValue="2026-03-14"
className="text-caption font-mono px-2 py-1 rounded border outline-none"
style={{
background: 'var(--bg-card)',
borderColor: 'var(--stroke-default)',
color: 'var(--fg-sub)',
}}
/>
<input
type="time"
defaultValue="14:00"
className="text-caption font-mono px-2 py-1 rounded border outline-none"
style={{
background: 'var(--bg-card)',
borderColor: 'var(--stroke-default)',
color: 'var(--fg-sub)',
}}
/>
</div>
</div>
{/* 활성 레이어 표시 */}
{/* <div
className="flex gap-1 px-3 py-2 border-b"
style={{ borderColor: 'rgba(255,255,255,.04)' }}
>
{SOURCES.filter((s) => layers[s.id]).map((s) => (
<span
key={s.id}
className="px-1.5 py-0.5 rounded text-caption font-bold"
style={sourceStyle(s)}
>
{s.icon} {s.label}
</span>
))}
{activeCount === 0 && (
<span className="text-caption text-fg-disabled font-korean">레이어를 선택하세요</span>
)}
</div> */}
{/* 지도 플레이스홀더 */}
<div
className="flex items-center justify-center text-fg-disabled"
style={{ height: 320 }}
>
<div className="text-center">
<div className="flex justify-center gap-2 text-2xl mb-3 opacity-30">
{SOURCES.filter((s) => layers[s.id]).map((s) => (
<span key={s.id}>{s.icon}</span>
))}
</div>
<div className="text-label-2 font-korean text-fg-disabled">
과거 시점 복합 오버레이
</div>
<div className="text-caption text-fg-disabled mt-1">
{SOURCES.filter((s) => layers[s.id])
.map((s) => s.label)
.join(' + ')}{' '}
통합 표시
</div>
</div>
</div>
</div>
{/* 현재 시점 */}
<div className="bg-bg-elevated border border-stroke rounded-md overflow-hidden">
<div
className="flex items-center justify-between px-4 py-2.5 border-b border-stroke"
style={{ background: 'rgba(6,182,212,.05)' }}
>
<div className="flex items-center gap-2">
<span
className="text-label-2 font-bold font-korean"
style={{ color: 'var(--color-accent)' }}
>
현재
</span>
<span
className="text-caption px-1.5 py-0.5 rounded font-bold"
style={{
background: 'rgba(6,182,212,.12)',
color: 'var(--color-accent)',
border: '1px solid rgba(6,182,212,.25)',
}}
>
NOW
</span>
</div>
<span className="text-caption text-fg-disabled font-mono">2026-03-16 14:23</span>
</div>
{/* 활성 레이어 표시 */}
{/* <div
className="flex gap-1 px-3 py-2 border-b"
style={{ borderColor: 'rgba(255,255,255,.04)' }}
>
{SOURCES.filter((s) => layers[s.id]).map((s) => (
<span
key={s.id}
className="px-1.5 py-0.5 rounded text-caption font-bold"
style={sourceStyle(s)}
>
{s.icon} {s.label}
</span>
))}
{activeCount === 0 && (
<span className="text-caption text-fg-disabled font-korean">레이어를 선택하세요</span>
)}
</div> */}
{/* 지도 플레이스홀더 */}
<div
className="flex items-center justify-center text-fg-disabled"
style={{ height: 320 }}
>
<div className="text-center">
<div className="flex justify-center gap-2 text-2xl mb-3 opacity-30">
{SOURCES.filter((s) => layers[s.id]).map((s) => (
<span key={s.id}>{s.icon}</span>
))}
</div>
<div className="text-label-2 font-korean text-fg-disabled">
현재 시점 복합 오버레이
</div>
<div className="text-caption text-fg-disabled mt-1">
{SOURCES.filter((s) => layers[s.id])
.map((s) => s.label)
.join(' + ')}{' '}
실시간 통합
</div>
</div>
</div>
</div>
</div>
{/* 복합 변화 감지 목록 */}
<div className="bg-bg-elevated border border-stroke rounded-md overflow-hidden">
<div className="flex items-center justify-between px-4 py-3 border-b border-stroke">
<div className="text-label-2 font-bold font-korean text-fg">
🔄 복합 변화 감지 타임라인
</div>
<div className="flex items-center gap-2">
<div className="flex gap-1">
<button
onClick={() => setSourceFilter('all')}
className="px-2 py-0.5 rounded text-caption font-bold font-korean cursor-pointer border transition-colors"
style={
sourceFilter === 'all'
? {
background: 'rgba(6,182,212,.08)',
borderColor: 'rgba(6,182,212,.3)',
color: 'var(--color-accent)',
}
: {
background: 'var(--bg-card)',
borderColor: 'var(--stroke-default)',
color: 'var(--fg-disabled)',
}
}
>
전체
</button>
{SOURCES.map((s) => (
<button
key={s.id}
onClick={() => setSourceFilter(s.id)}
className="px-2 py-0.5 rounded text-caption font-bold font-korean cursor-pointer border transition-colors"
style={
sourceFilter === s.id
? {
background: 'rgba(6,182,212,.08)',
borderColor: 'rgba(6,182,212,.3)',
color: 'var(--color-accent)',
}
: {
background: 'var(--bg-card)',
borderColor: 'var(--stroke-default)',
color: 'var(--fg-disabled)',
}
}
>
{s.label}
</button>
))}
</div>
<div className="text-caption text-fg-disabled font-mono">
{filteredChanges.length}건
</div>
</div>
</div>
{/* 데이터 행 */}
{filteredChanges.map((c) => {
const isOpen = selectedChange === c.id;
return (
<div key={c.id} className="border-b" style={{ borderColor: 'rgba(255,255,255,.04)' }}>
{/* 요약 행 */}
<div
onClick={() => setSelectedChange(isOpen ? null : c.id)}
className="grid gap-0 px-4 py-3 items-center hover:bg-bg-surface-hover/30 transition-colors cursor-pointer"
style={{
gridTemplateColumns: '52px 1fr 200px 150px 52px',
background: isOpen ? 'rgba(6,182,212,.04)' : undefined,
}}
>
<div className="text-caption font-mono text-fg-disabled">{c.id}</div>
<div>
<div className="flex items-center gap-2">
<span className="text-label-2 font-semibold text-fg font-korean">{c.area}</span>
<span
className="text-caption font-korean"
style={{ color: 'var(--fg-disabled)' }}
>
{c.type}
</span>
</div>
<div className="text-caption text-fg-disabled font-korean mt-0.5">{c.detail}</div>
</div>
<div className="flex flex-wrap gap-1">
{c.sources.map((sid) => {
const cfg = SOURCES.find((s) => s.id === sid)!;
return (
<span
key={sid}
className="px-1.5 py-0.5 rounded text-caption text-fg"
style={{
background: 'transparent',
border: `1px solid color-mix(in srgb, ${cfg.color} 40%, transparent)`,
color: `${cfg.color}`,
}}
>
{cfg.label}
</span>
);
})}
</div>
<div className="text-caption font-mono">
<span className="text-fg">
{c.date1} {c.time1}
</span>
<span className="text-fg-disabled mx-1">→</span>
<span className="text-fg">
{c.date2} {c.time2}
</span>
</div>
<div>
<span
className="px-1.5 py-0.5 rounded text-caption font-bold font-korean"
style={severityStyle(c.severity)}
>
{c.severity}
</span>
</div>
</div>
{/* 펼침: 정보원별 AS-IS → 현재 상세 */}
{isOpen && (
<div className="px-4 pb-3 pt-1" style={{ background: 'rgba(6,182,212,.02)' }}>
{/* 교차검증 */}
{c.crossRef && (
<div
className="mb-3 px-3 py-2 rounded text-caption font-korean"
style={{
background: 'rgba(6,182,212,.06)',
border: '1px solid rgba(6,182,212,.15)',
color: 'var(--fg-sub)',
}}
>
<span className="font-bold" style={{ color: 'var(--color-accent)' }}>
교차검증
</span>{' '}
{c.crossRef}
</div>
)}
{/* 정보원별 비교 그리드 */}
<div className="grid gap-2">
<div
className="grid gap-0 px-3 py-1.5"
style={{ gridTemplateColumns: '90px 1fr 1fr' }}
>
<div className="text-caption font-bold text-fg-disabled font-korean">
정보원
</div>
<div className="text-caption font-bold font-korean text-fg">
AS-IS ({c.date1} {c.time1})
</div>
<div className="text-caption font-bold font-korean text-fg">
현재 ({c.date2} {c.time2})
</div>
</div>
{c.sources.map((sid) => {
const cfg = SOURCES.find((s) => s.id === sid)!;
return (
<div
key={sid}
className="grid gap-0 px-3 py-2 rounded"
style={{
gridTemplateColumns: '90px 1fr 1fr',
background: `${cfg.color}06`,
border: `1px solid ${cfg.color}15`,
}}
>
<div className="flex items-center gap-1.5">
<span
className="text-caption font-bold px-1.5 py-0.5 rounded"
style={sourceStyle(cfg)}
>
{cfg.icon} {cfg.label}
</span>
</div>
<div className="text-caption font-korean text-fg-disabled">
{c.asIsDetail[sid] || '-'}
</div>
<div className="text-caption font-korean text-fg">
{c.nowDetail[sid] || '-'}
</div>
</div>
);
})}
</div>
</div>
)}
</div>
);
})}
</div>
</div>
);
}

360
frontend/src/components/aerial/components/contents/DetectPanel.tsx Normal file
파일 보기

@ -0,0 +1,360 @@
import { useState } from 'react';
import { Map } from '@vis.gl/react-maplibre';
import { ScatterplotLayer } from '@deck.gl/layers';
import { useBaseMapStyle } from '@common/hooks/useBaseMapStyle';
import { useMapStore } from '@common/store/mapStore';
import { S57EncOverlay } from '@components/common/map/S57EncOverlay';
import { DeckGLOverlay } from '../WingAI';
type MismatchStatus = '불일치' | '의심' | '정상' | '확인중';
interface VesselDetection {
id: string;
mmsi: string;
vesselName: string;
/** AIS 등록 선종 */
aisType: string;
/** AI 영상 분석 선종 */
detectedType: string;
/** 불일치 여부 */
mismatch: boolean;
status: MismatchStatus;
confidence: string;
coord: string;
lon: number;
lat: number;
time: string;
detail: string;
}
export function DetectPanel() {
const [selectedId, setSelectedId] = useState<string | null>(null);
const [filterStatus, setFilterStatus] = useState<MismatchStatus | '전체'>('전체');
const currentMapStyle = useBaseMapStyle();
const mapToggles = useMapStore((s) => s.mapToggles);
const detections: VesselDetection[] = [
{
id: 'VD-001',
mmsi: '440123456',
vesselName: 'OCEAN GLORY',
aisType: '화물선',
detectedType: '유조선',
mismatch: true,
status: '불일치',
confidence: '94.2%',
coord: '33.24°N 126.50°E',
lon: 126.5,
lat: 33.24,
time: '14:23',
detail: 'AIS 화물선 등록 → 영상 분석 결과 유조선 선형 + 탱크 구조 탐지',
},
{
id: 'VD-002',
mmsi: '441987654',
vesselName: 'SEA PHOENIX',
aisType: '유조선',
detectedType: '화물선',
mismatch: true,
status: '불일치',
confidence: '91.7%',
coord: '34.73°N 127.68°E',
lon: 127.68,
lat: 34.73,
time: '14:18',
detail: 'AIS 유조선 등록 → 영상 분석 결과 컨테이너 적재 확인, 화물선 판정',
},
{
id: 'VD-003',
mmsi: '440555123',
vesselName: 'DONGBANG 7',
aisType: '어선',
detectedType: '화물선',
mismatch: true,
status: '의심',
confidence: '78.3%',
coord: '35.15°N 129.13°E',
lon: 129.13,
lat: 35.15,
time: '14:10',
detail: 'AIS 어선 등록 → 선체 규모 및 구조가 어선 대비 과대, 화물선 의심',
},
{
id: 'VD-004',
mmsi: '440678901',
vesselName: 'KOREA STAR',
aisType: '화물선',
detectedType: '화물선',
mismatch: false,
status: '정상',
confidence: '97.8%',
coord: '34.80°N 126.37°E',
lon: 126.37,
lat: 34.8,
time: '14:05',
detail: 'AIS 등록 선종과 영상 분석 결과 일치',
},
{
id: 'VD-005',
mmsi: 'N/A',
vesselName: '미식별',
aisType: 'AIS 미수신',
detectedType: '유조선',
mismatch: true,
status: '확인중',
confidence: '85.6%',
coord: '33.11°N 126.27°E',
lon: 126.27,
lat: 33.11,
time: '14:01',
detail: 'AIS 신호 없음 → 위성 SAR로 유조선급 선형 탐지, 불법 운항 의심',
},
{
id: 'VD-006',
mmsi: '440234567',
vesselName: 'BUSAN EXPRESS',
aisType: '컨테이너선',
detectedType: '유조선',
mismatch: true,
status: '불일치',
confidence: '89.1%',
coord: '35.05°N 129.10°E',
lon: 129.1,
lat: 35.05,
time: '13:55',
detail: 'AIS 컨테이너선 → 갑판 컨테이너 미확인, 탱크 구조 감지',
},
{
id: 'VD-007',
mmsi: '440345678',
vesselName: 'JEJU BREEZE',
aisType: '여객선',
detectedType: '여객선',
mismatch: false,
status: '정상',
confidence: '98.1%',
coord: '33.49°N 126.52°E',
lon: 126.52,
lat: 33.49,
time: '13:50',
detail: 'AIS 등록 선종과 영상 분석 결과 일치',
},
];
const mismatchCount = detections.filter((d) => d.mismatch).length;
const confirmingCount = detections.filter((d) => d.status === '확인중').length;
const stats = [
{ value: String(detections.length), label: '분석 선박', color: 'var(--fg-default)' },
{ value: String(mismatchCount), label: '선종 불일치', color: 'var(--fg-default)' },
{ value: String(confirmingCount), label: '확인 중', color: 'var(--fg-default)' },
{
value: String(detections.filter((d) => !d.mismatch).length),
label: '정상',
color: 'var(--fg-default)',
},
];
const filtered =
filterStatus === '전체' ? detections : detections.filter((d) => d.status === filterStatus);
const statusStyle = (s: MismatchStatus) => {
if (s === '불일치')
return {
background: 'color-mix(in srgb, var(--color-danger) 12%, transparent)',
color: 'var(--color-danger)',
border: '1px solid color-mix(in srgb, var(--color-danger) 25%, transparent)',
};
if (s === '의심')
return {
background: 'color-mix(in srgb, var(--color-caution) 12%, transparent)',
color: 'var(--color-caution)',
border: '1px solid color-mix(in srgb, var(--color-caution) 25%, transparent)',
};
if (s === '확인중')
return {
background: 'rgba(6,182,212,.08)',
color: 'var(--color-accent)',
border: '1px solid rgba(6,182,212,.25)',
};
return {
background: 'color-mix(in srgb, var(--color-success) 12%, transparent)',
color: 'var(--color-success)',
border: '1px solid color-mix(in srgb, var(--color-success) 25%, transparent)',
};
};
const filters: (MismatchStatus | '전체')[] = ['전체', '불일치', '의심', '확인중', '정상'];
return (
<div>
{/* 통계 카드 */}
<div className="grid grid-cols-4 gap-3 mb-5">
{stats.map((s, i) => (
<div key={i} className="bg-bg-elevated border border-stroke rounded-md p-3.5 text-center">
<div className="text-[22px] font-bold font-mono" style={{ color: s.color }}>
{s.value}
</div>
<div className="text-caption text-fg-disabled mt-1 font-korean">{s.label}</div>
</div>
))}
</div>
<div className="grid grid-cols-[1fr_380px] gap-4">
{/* 탐지 결과 지도 */}
<div
className="bg-bg-elevated border border-stroke rounded-md overflow-hidden"
style={{ minHeight: 480 }}
>
<div className="flex items-center justify-between px-4 py-3 border-b border-stroke">
<div className="text-label-2 font-bold font-korean text-fg">
🎯 선종 불일치 탐지 지도
</div>
<div className="text-caption text-fg-disabled font-mono">{filtered.length}척 표시</div>
</div>
<div className="relative" style={{ height: 440 }}>
<Map
initialViewState={{ longitude: 127.5, latitude: 34.0, zoom: 6.5 }}
style={{ width: '100%', height: '100%' }}
mapStyle={currentMapStyle}
attributionControl={false}
>
<S57EncOverlay visible={mapToggles['s57'] ?? false} />
<DeckGLOverlay
layers={[
new ScatterplotLayer({
id: 'vessel-detect-markers',
data: filtered,
getPosition: (d: VesselDetection) => [d.lon, d.lat],
getRadius: (d: VesselDetection) => (selectedId === d.id ? 10 : 7),
radiusUnits: 'pixels' as const,
getFillColor: (d: VesselDetection) => {
if (d.status === '불일치') return [239, 68, 68, 200];
if (d.status === '의심') return [234, 179, 8, 200];
if (d.status === '확인중') return [6, 182, 212, 200];
return [34, 197, 94, 160];
},
getLineColor: [255, 255, 255, 255],
lineWidthMinPixels: 2,
stroked: true,
pickable: true,
onClick: ({ object }: { object: VesselDetection }) => {
if (object) setSelectedId(object.id === selectedId ? null : object.id);
},
updateTriggers: { getRadius: [selectedId] },
}),
]}
/>
</Map>
{/* 범례 */}
<div className="absolute bottom-3 left-3 bg-bg-elevated/90 border border-stroke rounded px-3 py-2 backdrop-blur-sm">
<div className="flex items-center gap-3">
{[
{ color: 'var(--color-danger)', label: '불일치' },
{ color: 'var(--color-caution)', label: '의심' },
{ color: 'var(--color-accent)', label: '확인중' },
{ color: 'var(--color-success)', label: '정상' },
].map((l) => (
<div key={l.label} className="flex items-center gap-1">
<div className="w-2.5 h-2.5 rounded-full" style={{ background: l.color }} />
<span className="text-caption font-korean text-fg-disabled">{l.label}</span>
</div>
))}
</div>
</div>
</div>
</div>
{/* 탐지 목록 */}
<div
className="bg-bg-elevated border border-stroke rounded-md overflow-hidden flex flex-col"
style={{ maxHeight: 520 }}
>
<div className="px-4 py-3 border-b border-stroke shrink-0">
<div className="flex items-center justify-between mb-2">
<div className="text-label-2 font-bold font-korean text-fg">
📋 MMSI 선종 검증 목록
</div>
<div className="text-caption text-fg-disabled font-mono">{filtered.length}건</div>
</div>
<div className="flex gap-1">
{filters.map((f) => (
<button
key={f}
onClick={() => setFilterStatus(f)}
className="px-2 py-0.5 rounded text-caption font-bold font-korean cursor-pointer border transition-colors"
style={
filterStatus === f
? {
background: 'rgba(6,182,212,.08)',
borderColor: 'rgba(6,182,212,.3)',
color: 'var(--color-accent)',
}
: {
background: 'var(--bg-card)',
borderColor: 'var(--stroke-default)',
color: 'var(--fg-disabled)',
}
}
>
{f}
</button>
))}
</div>
</div>
<div className="divide-y divide-stroke overflow-y-auto flex-1">
{filtered.map((d) => (
<div
key={d.id}
onClick={() => setSelectedId(selectedId === d.id ? null : d.id)}
className="px-4 py-3 hover:bg-bg-surface-hover/30 transition-colors cursor-pointer"
style={{ background: selectedId === d.id ? 'rgba(6,182,212,.04)' : undefined }}
>
<div className="flex items-center justify-between mb-1">
<div className="flex items-center gap-2">
<span className="text-caption font-mono text-fg-disabled">{d.id}</span>
<span className="text-caption font-bold font-korean text-fg">
{d.vesselName}
</span>
</div>
<span
className="px-1.5 py-0.5 rounded text-caption font-bold font-korean"
style={statusStyle(d.status)}
>
{d.status}
</span>
</div>
{/* 선종 비교 */}
<div className="flex items-center gap-1.5 mt-1.5">
<span className="text-caption font-korean text-fg">AIS: {d.aisType}</span>
{d.mismatch && <span className="text-caption text-fg-disabled">≠</span>}
{!d.mismatch && <span className="text-caption text-fg-disabled">=</span>}
<span className="text-caption font-korean text-fg">AI: {d.detectedType}</span>
</div>
<div className="flex items-center gap-3 mt-1.5 text-caption text-fg-disabled font-mono">
<span>MMSI {d.mmsi}</span>
<span>{d.coord}</span>
<span>{d.time}</span>
<span>신뢰도 {d.confidence}</span>
</div>
{/* 펼침: 상세 */}
{selectedId === d.id && (
<div
className="mt-2 px-3 py-2 rounded text-caption font-korean"
style={{
background: 'rgba(6,182,212,.04)',
border: '1px solid rgba(6,182,212,.12)',
color: 'var(--fg-sub)',
}}
>
{d.detail}
</div>
)}
</div>
))}
</div>
</div>
</div>
</div>
);
}

130
frontend/src/components/aerial/components/contents/PanelAreaCalc.tsx Normal file
파일 보기

@ -0,0 +1,130 @@
export function PanelAreaCalc() {
return (
<div>
{/* 면적 산정 방법론 */}
<div className="bg-bg-card border border-stroke rounded-[10px] p-4 mb-[14px]">
<div className="text-label-2 font-bold text-fg font-korean mb-3">
📏 항공 영상 기반 유출유 면적 산정 방법론
</div>
<div className="grid grid-cols-2 gap-3 mb-3">
<div className="bg-bg-base rounded-lg p-3 border border-stroke">
<div className="text-label-2 font-bold text-fg font-korean mb-2">
픽셀 분류법 (Pixel Classification)
</div>
<div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
광학 영상의 각 픽셀을 <b style={{ color: 'var(--color-accent)' }}>반사도·색상·질감</b>
에 따라 기름/해수로 분류. 분류된 픽셀 수 × GSD² = 면적.
</div>
<div className="bg-white/[0.03] rounded-[5px] p-2 font-mono text-caption text-fg leading-[1.8]">
A = N<sub>oil</sub> × (GSD)<sup>2</sup>
<br />
<span className="text-fg-disabled">N: 기름 픽셀수, GSD: 지상 표본거리</span>
</div>
</div>
<div className="bg-bg-base rounded-lg p-3 border border-stroke">
<div className="text-label-2 font-bold text-fg font-korean mb-2">
다중분광 지수법 (Spectral Index)
</div>
<div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
다중분광 센서로 촬영한 밴드 조합으로{' '}
<b style={{ color: 'var(--color-accent)' }}>유막 특유의 분광 반응</b>을 지수화하여
자동 분류.
</div>
<div className="bg-white/[0.03] rounded-[5px] p-2 font-mono text-caption text-fg leading-[1.8]">
OSDI = (B<sub>NIR</sub>−B<sub>Red</sub>) / (B<sub>NIR</sub>+B<sub>Red</sub>)
<br />
<span className="text-fg-disabled">Oil Spill Detection Index</span>
</div>
</div>
</div>
<div className="grid grid-cols-2 gap-3">
<div className="bg-bg-base rounded-lg p-3 border border-stroke">
<div className="text-label-2 font-bold text-fg font-korean mb-2">SAR 임계값 분리법</div>
<div className="text-caption text-fg-sub font-korean leading-[1.7]">
SAR 영상에서 후방산란계수(σ°)의 임계값 이하를 유막으로 판정합니다. 단, 풍속 3m/s
이하나 생물막, 강우 영역이 <b style={{ color: 'var(--color-accent)' }}>False Alarm</b>{' '}
오탐 발생 원인이 됩니다.
</div>
<div className="mt-[6px] bg-white/[0.03] rounded-[5px] p-[7px] font-mono text-caption text-fg">
{'Oil = {(x,y) | σ°(x,y) < T'}
<sub>th</sub>
{'}'}
<br />
<span className="text-fg-disabled">
T<sub>th</sub>: 최적 임계값 (국소 적응형)
</span>
</div>
</div>
<div className="bg-bg-base rounded-lg p-3 border border-stroke">
<div className="text-label-2 font-bold text-fg font-korean mb-2">유량 역산 추정</div>
<div className="text-caption text-fg-sub font-korean leading-[1.7]">
면적(A)과 평균 유막 두께(d) 및 풍화 경과 시간(t)으로부터 원래 유출유량(V₀)을
역산합니다.
</div>
<div className="mt-[6px] bg-white/[0.03] rounded-[5px] p-[7px] font-mono text-caption text-fg leading-[1.8]">
V₀ = A × d / (1 − f<sub>e</sub>(t))
<br />
<span className="text-fg-disabled">
f<sub>e</sub>: 누적 증발비 (Stiver & Mackay 1984)
</span>
</div>
</div>
</div>
</div>
{/* Bonn Agreement 색상 코드 */}
<div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
<div className="text-label-2 font-bold font-korean mb-[10px]">
🎨 유막 두께 시각적 추정 기준 (Bonn Agreement Color Code)
</div>
<div className="grid grid-cols-5 gap-[6px] text-caption font-korean">
<div className="px-2 py-2 bg-white/[0.04] border border-white/[0.1] rounded-[6px] text-center">
<div
className="w-5 h-5 rounded-[3px] mx-auto mb-1"
style={{ background: 'rgba(200,200,255,.3)' }}
/>
<div className="font-bold text-fg">은회색</div>
<div className="text-fg-disabled">&lt; 0.1μm</div>
<div className="text-fg-disabled">광택층</div>
</div>
<div className="px-2 py-2 bg-white/[0.04] border border-white/[0.1] rounded-[6px] text-center">
<div
className="w-5 h-5 rounded-[3px] mx-auto mb-1"
style={{ background: 'rgba(180,220,180,.4)' }}
/>
<div className="font-bold text-fg">무지개색</div>
<div className="text-fg-disabled">0.1~0.3μm</div>
<div className="text-fg-disabled">박막층</div>
</div>
<div className="px-2 py-2 bg-white/[0.04] border border-white/[0.1] rounded-[6px] text-center">
<div
className="w-5 h-5 rounded-[3px] mx-auto mb-1"
style={{ background: 'rgba(200,160,80,.5)' }}
/>
<div className="font-bold text-fg">메탈릭</div>
<div className="text-fg-disabled">0.3~5μm</div>
<div className="text-fg-disabled">광택층</div>
</div>
<div className="px-2 py-2 bg-white/[0.04] border border-white/[0.1] rounded-[6px] text-center">
<div
className="w-5 h-5 rounded-[3px] mx-auto mb-1"
style={{ background: 'rgba(120,90,40,.7)' }}
/>
<div className="font-bold text-fg">갈색</div>
<div className="text-fg-disabled">5~200μm</div>
<div className="text-fg-disabled">두꺼운층</div>
</div>
<div className="px-2 py-2 bg-white/[0.04] border border-white/[0.1] rounded-[6px] text-center">
<div
className="w-5 h-5 rounded-[3px] mx-auto mb-1"
style={{ background: 'rgba(40,40,40,.9)' }}
/>
<div className="font-bold text-fg">흑색</div>
<div className="text-fg-disabled">&gt;200μm</div>
<div className="text-fg-disabled">농축층</div>
</div>
</div>
</div>
</div>
);
}

256
frontend/src/components/aerial/components/contents/PanelDetection.tsx Normal file
파일 보기

@ -0,0 +1,256 @@
export function PanelDetection() {
return (
<div>
{/* 센서 비교표 */}
<div className="bg-bg-card border border-stroke rounded-[10px] p-4 mb-[14px]">
<div className="text-label-2 font-bold text-fg font-korean mb-3">
🔬 유출유 탐지 센서 종류 및 특성 비교
</div>
<div className="overflow-x-auto">
<table className="w-full border-collapse font-korean text-caption">
<thead>
<tr className="bg-white/[0.03] border-b border-stroke-light">
<th className="px-[10px] py-[7px] text-left text-fg-disabled font-semibold">
센서
</th>
<th className="px-[10px] py-[7px] text-center text-fg-disabled font-semibold">
파장대
</th>
<th className="px-[10px] py-[7px] text-center text-fg-disabled font-semibold">
탐지 원리
</th>
<th className="px-[10px] py-[7px] text-center text-fg-disabled font-semibold">
강점
</th>
<th className="px-[10px] py-[7px] text-center text-fg-disabled font-semibold">
한계
</th>
<th className="px-[10px] py-[7px] text-center text-fg-disabled font-semibold">
탑재 플랫폼
</th>
</tr>
</thead>
<tbody>
<tr className="border-b border-white/[0.04]">
<td className="px-[10px] py-[7px] font-bold text-fg-sub">광학(EO)</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">0.4~0.7μm</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">
반사 휘도 차이
<br />
유막 광택·색조
</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">
고해상도
<br />
직관적 식별
</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">야간·구름 불가</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">드론·항공기·위성</td>
</tr>
<tr className="border-b border-white/[0.04] bg-white/[0.01]">
<td className="px-[10px] py-[7px] font-bold text-fg-sub">열적외선(IR)</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">8~14μm</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">
유막 열방사 차이
<br />
해수면 온도 대비
</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">
야간 탐지
<br />
두께 추정 가능
</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">
구름 투과 불가
<br />
얇은 유막 한계
</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">
드론·항공기
<br />
NOAA AVHRR
</td>
</tr>
<tr className="border-b border-white/[0.04]">
<td className="px-[10px] py-[7px] font-bold text-fg-sub">SAR</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">
1~10cm
<br />
(마이크로파)
</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">
유막 표면장력 증가
<br />→ 브래그 후방산란 감소
</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">
구름·야간 무관
<br />
광역 탐지
</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">
유사 픽처 오탐
<br />
고해상도 한계
</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">
위성(Sentinel-1
<br />
KOMPSAT-5)
</td>
</tr>
<tr className="border-b border-white/[0.04] bg-white/[0.01]">
<td className="px-[10px] py-[7px] font-bold text-fg-sub">SLAR/RAR</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">마이크로파</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">
측방향 레이더
<br />
유막 감쇠대 탐지
</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">
야간·구름 무관
<br />
광역 감시선
</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">
항공기 탑재 전용
<br />
저해상도
</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">해경 감시 항공기</td>
</tr>
<tr className="border-b border-white/[0.04]">
<td className="px-[10px] py-[7px] font-bold text-fg-sub">UV 형광</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">0.3~0.4μm</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">
자외선 조사 → 기름
<br />
형광 방출
</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">
박막 유막(μm급)
<br />
탐지 가능
</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">
야간 전용
<br />
주간 오탐 많음
</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">항공기</td>
</tr>
<tr className="bg-white/[0.01]">
<td className="px-[10px] py-[7px] font-bold text-fg-sub">마이크로파 복사계</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">
수cm
<br />
(수동형)
</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">
유막 방사율 변화
<br />
밝기온도 차이
</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">
구름 완전 투과
<br />
야간 가능
</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">
저해상도(50km)
<br />
NGSST 혼합 사용
</td>
<td className="px-[10px] py-[7px] text-center text-fg-sub">
AMSR-E 위성
<br />
(NGSST 융합)
</td>
</tr>
</tbody>
</table>
</div>
</div>
{/* NGSST 카드 */}
<div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
<div className="text-label-2 font-bold font-korean mb-[10px]">
🌡️ NGSST (New Generation SST) 위성 수온자료 — 특허 10-1567431 적용
</div>
<div className="grid grid-cols-2 gap-3">
<div className="text-caption text-fg-sub font-korean leading-[1.8]">
일본 토호쿠대학 Kawamura 교수팀이 제공하는 북서태평양 광역 수온자료입니다.{' '}
<b>열적외선(AVHRR·MODIS)</b>과 <b>마이크로파(AMSR-E)</b>를 융합하여 구름 유무와 관계없이
일별 수온을 제공합니다.
<div className="mt-2 bg-bg-base rounded-[6px] p-[10px] font-mono text-caption text-fg leading-[2]">
SST(℃) = <span>0.15</span> × DN − <span>3.0</span>
<br />
<span className="text-fg-disabled">DN: 바이너리 파일 1byte 디지털 수치</span>
</div>
</div>
<div className="flex flex-col gap-[5px] text-caption font-korean">
<div
className="px-[9px] py-[6px] rounded-[5px]"
style={{
background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)',
border: '1px solid color-mix(in srgb, var(--color-accent) 12%, transparent)',
}}
>
<span className="font-bold" style={{ color: 'var(--color-accent)' }}>
영역
</span>{' '}
: 116~166°E, 13~63°N (북서태평양 50×50°)
</div>
<div
className="px-[9px] py-[6px] rounded-[5px]"
style={{
background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)',
border: '1px solid color-mix(in srgb, var(--color-accent) 12%, transparent)',
}}
>
<span className="font-bold" style={{ color: 'var(--color-accent)' }}>
해상도
</span>{' '}
: 3분(약 5km) · 격자 1000×1000
</div>
<div
className="px-[9px] py-[6px] rounded-[5px]"
style={{
background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)',
border: '1px solid color-mix(in srgb, var(--color-accent) 12%, transparent)',
}}
>
<span className="font-bold" style={{ color: 'var(--color-accent)' }}>
갱신
</span>{' '}
: 매일 12시 FTP 자동수신 · 최근 5일 합성
</div>
<div
className="px-[9px] py-[6px] rounded-[5px]"
style={{
background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)',
border: '1px solid color-mix(in srgb, var(--color-accent) 12%, transparent)',
}}
>
<span className="font-bold" style={{ color: 'var(--color-accent)' }}>
보간
</span>{' '}
: Akima(1978) 2차원 5차다항식 → 500m 격자 변환
</div>
<div
className="px-[9px] py-[6px] rounded-[5px]"
style={{
background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)',
border: '1px solid color-mix(in srgb, var(--color-accent) 12%, transparent)',
}}
>
<span className="font-bold" style={{ color: 'var(--color-accent)' }}>
WING 활용
</span>{' '}
: 유출유 증발·유상화·점도변화 모델 수온 입력
</div>
</div>
</div>
</div>
</div>
);
}

128
frontend/src/components/aerial/components/contents/PanelESIMap.tsx Normal file
파일 보기

@ -0,0 +1,128 @@
export function PanelESIMap() {
return (
<div>
{/* 헤더 카드 */}
<div className="rounded-xl p-4 mb-[14px] bg-bg-card border border-stroke">
<div className="text-label-1 font-bold text-fg font-korean mb-2">
🗺️ ESI 방제정보지도 (Environmental Sensitivity Index Map)
</div>
<div className="text-caption text-fg-sub font-korean leading-[1.8]">
ESI 지도는 이문진 박사 특허(등록특허 10-1567431)의 핵심 기반 데이터입니다. 해안선
유형·생태민감도·사회경제적 자원 분포를 통합 등급화하여{' '}
<b style={{ color: 'var(--color-accent)' }}>방제 우선순위 결정</b>의 근거가 됩니다.
1999~2002년 구축, 해경 인천·태안·군산·목포·완도·제주·여수 관할해역 대상.
</div>
<div
className="mt-2 px-[10px] py-[7px] rounded-[5px] text-caption text-fg-disabled font-korean"
style={{
// background: 'color-mix(in srgb, var(--color-base) 6%, transparent)',
border: '1px solid color-mix(in srgb, var(--color-accent) 15%, transparent)',
}}
>
원전: NOAA ESI Mapping Program · 국내 적용: 해양수산부·한국해양과학기술원
</div>
</div>
{/* ESI 3종 카드 */}
<div className="grid grid-cols-3 gap-3 mb-[14px]">
<div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
<div className="text-label-2 font-bold text-fg font-korean mb-2">
해안선 분류 (Shoreline)
</div>
<div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
해안선 유형을 1~10 등급으로 분류. 등급이 높을수록 오염 취약·방제 난이도 높음.
</div>
<div className="flex flex-col gap-[3px] text-caption font-korean">
<div
className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
>
ESI 1~2: 노출 암반·절벽 (낮은 민감도)
</div>
<div
className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
>
ESI 5~7: 자갈·모래 해변 (중간)
</div>
<div
className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
>
ESI 8~10: 조간대·갯벌·맹그로브 (최고)
</div>
</div>
</div>
<div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
<div className="text-label-2 font-bold text-fg font-korean mb-2">
생물자원 (Biological Resources)
</div>
<div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
오염 취약 생물 서식지·번식지·이동경로를 위치 기반으로 등록.
</div>
<div className="flex flex-col gap-[3px] text-caption font-korean">
<div
className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
>
해조류·어류 산란장·양식장
</div>
<div
className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
>
철새 도래지·해조류 번식지
</div>
<div
className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
>
보호 해양생물 서식구역
</div>
</div>
</div>
<div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
<div className="text-label-2 font-bold text-fg font-korean mb-2">
인문·사회자원 (Human-Use)
</div>
<div className="text-caption text-fg-sub font-korean leading-[1.7] mb-2">
경제·사회적 피해 가능 지역을 방제 우선순위 결정에 활용.
</div>
<div className="flex flex-col gap-[3px] text-caption font-korean">
<div
className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
>
취수원·정수장·발전소 냉각수
</div>
<div
className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
>
항구·어항·수산물 위판장
</div>
<div
className="px-[7px] py-[3px] rounded-[3px] text-fg-sub"
style={{ background: 'color-mix(in srgb, var(--color-accent) 5%, transparent)' }}
>
해수욕장·관광지·문화재
</div>
</div>
</div>
</div>
{/* ESI 구축 현황 */}
<div className="bg-bg-card border border-stroke rounded-[10px] p-[14px]">
<div className="text-label-2 font-bold text-fg font-korean mb-2">
📏 ESI 해안선 자료 구축 현황 (등록특허 10-1567431)
</div>
<div className="text-caption text-fg-sub font-korean leading-[1.8]">
본 특허의 ESI 기반 데이터는 1999~2002년(약 3년) 구축된 방제정보지도{' '}
<b className="text-fg">25,000:1 해안선자료</b>를 기반으로 합니다. 매립·준설공사로 변형된
부분은 국립해양조사원 전자해도(ENC) 해안선으로 보완하였습니다. 항공탐색에서 획득한 최신
영상 데이터는 이 ESI DB와 실시간 중첩되어 방제 우선구역을 즉시 산출합니다.
</div>
</div>
</div>
);
}

Some files were not shown because too many files have changed in this diff Show More