# WING-OPS (해양 방제 운영 지원 시스템)

## 프로젝트 개요
해양 오염 사고 대응을 위한 방제 운영 지원 시스템.
유류/HNS 확산 예측, 역추적 분석, 구조 시나리오, 항공 방제, 자산 관리, SCAT 조사, 기상/해상 정보를 통합 제공한다.

- **프로젝트 타입**: react-ts (모노레포)
- **Frontend**: React 19 + Vite 7 + TypeScript 5.9 + Tailwind CSS 3
- **Backend**: Express 4 + better-sqlite3 + TypeScript
- **상태관리**: Zustand (클라이언트), TanStack Query (서버)
- **지도**: Leaflet, OpenLayers
- **실시간**: Socket.IO

## 빌드/실행

### Frontend
```bash
cd frontend
npm install
npm run dev       # 개발 서버 (Vite, localhost:5173)
npm run build     # 프로덕션 빌드 (tsc -b && vite build)
npm run lint      # ESLint 검증
npm run preview   # 빌드 미리보기
```

### Backend
```bash
cd backend
npm install
npm run dev       # 개발 서버 (tsx watch, localhost:3001)
npm run build     # TypeScript 컴파일 (tsc)
npm start         # 프로덕션 실행
npm run db:seed   # DB 초기 데이터
```

### Docker
```bash
docker-compose up -d   # PostgreSQL 16 + PostGIS + pgAdmin
```

## 테스트
테스트 프레임워크 미구성. 향후 Vitest + React Testing Library 도입 예정.

## Lint/Format
```bash
cd frontend && npx eslint .          # ESLint (flat config)
npx prettier --check .               # Prettier 검증
npx prettier --write .               # Prettier 자동 수정
```

## 프로젝트 구조
```
wing/
├── frontend/               React 19 + Vite + TypeScript + Tailwind
│   └── src/
│       ├── App.tsx          메인 (MainTab 라우팅, 11개 탭)
│       ├── components/      UI 컴포넌트 (13개 서브디렉토리)
│       │   ├── analysis/    HNS/Oil/Rescue 분석 시나리오
│       │   ├── board/       게시판
│       │   ├── incidents/   사건/사고 관리
│       │   ├── layer/       레이어 트리
│       │   ├── layout/      MainLayout, TopBar, LeftPanel, RightPanel
│       │   ├── map/         MapView, BacktrackReplay
│       │   ├── reports/     보고서
│       │   ├── views/       각 탭별 페이지 뷰
│       │   └── weather/     해양/기상 시각화
│       ├── hooks/           커스텀 훅 (useLayers, useOceanForecast 등)
│       ├── services/        API 서비스 (api, khoaApi, weatherApi 등)
│       ├── store/           Zustand 상태관리
│       ├── types/           타입 정의
│       └── utils/           유틸리티 (coordinates, geo, sanitize)
├── backend/                Express + better-sqlite3
│   └── src/
│       ├── server.ts        Express 진입점
│       ├── routes/          layers, simulation
│       ├── middleware/      security (입력 살균, rate-limit)
│       └── db/              database, seed
├── database/               SQL 초기화 스크립트
├── docs/                   문서
├── .claude/                팀 워크플로우 (rules, skills, scripts)
├── .githooks/              Git hooks (pre-commit, commit-msg, post-checkout)
└── docker-compose.yml      PostgreSQL + PostGIS + pgAdmin
```

## 팀 컨벤션
`.claude/rules/` 디렉토리 참조:
- `team-policy.md` — 보안/품질 정책
- `git-workflow.md` — 브랜치/커밋/MR 규칙
- `code-style.md` — TypeScript/React 코드 스타일
- `naming.md` — 네이밍 규칙
- `testing.md` — 테스트 규칙

## 공통 기능 문서
- `docs/COMMON-GUIDE.md` — 공통 로직 개발 가이드 (인증, 감사로그, 메뉴, API 등)
- 공통 기능(인증, 감사로그, 메뉴 시스템, API 통신 등)을 추가/변경할 때 반드시 `docs/COMMON-GUIDE.md`를 최신화할 것
- 개별 탭 개발자는 이 문서를 참조하여 공통 영역과의 연동을 구현

## 환경 설정
- Node.js 20 (`.node-version`, fnm 사용)
- npm registry: Nexus proxy (`.npmrc`)
- Git hooks: `.githooks/` (core.hooksPath 설정됨)