4.0 KiB
4.0 KiB
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
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
cd backend
npm install
npm run dev # 개발 서버 (tsx watch, localhost:3001)
npm run build # TypeScript 컴파일 (tsc)
npm start # 프로덕션 실행
npm run db:seed # DB 초기 데이터
Docker
docker-compose up -d # PostgreSQL 16 + PostGIS + pgAdmin
테스트
테스트 프레임워크 미구성. 향후 Vitest + React Testing Library 도입 예정.
Lint/Format
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 설정됨)