kcg-ai-monitoring/CLAUDE.md

KCG AI Monitoring

해양경찰청 AI 기반 불법어선 탐지 및 단속 지원 플랫폼

기술 스택

• 프레임워크: React 19 + TypeScript 5.9
• 빌드: Vite 8
• 스타일: Tailwind CSS 4 + CVA (class-variance-authority)
• 지도: MapLibre GL 5 + deck.gl 9
• 차트: ECharts 6
• 상태관리: Zustand 5
• 다국어: i18next (ko/en, 10개 네임스페이스)
• 라우팅: React Router 7
• 린트: ESLint 10 (flat config)

명령어

npm run dev        # 개발 서버 (Vite)
npm run build      # 프로덕션 빌드
npm run lint       # ESLint 검사
npm run lint:fix   # ESLint 자동 수정
npm run format     # Prettier 포맷팅
npm run format:check  # 포맷팅 검사

디렉토리 구조

src/
├── app/           # 라우터, 인증, 레이아웃
├── features/      # 13개 도메인 모듈 (31+ 페이지)
│   ├── admin/          # 관리자
│   ├── ai-operations/  # AI 작전
│   ├── auth/           # 인증
│   ├── dashboard/      # 대시보드
│   ├── detection/      # 탐지
│   ├── enforcement/    # 단속
│   ├── field-ops/      # 현장작전
│   ├── monitoring/     # 모니터링
│   ├── patrol/         # 순찰
│   ├── risk-assessment/# 위험평가
│   ├── statistics/     # 통계
│   ├── surveillance/   # 감시
│   └── vessel/         # 선박
├── lib/           # 공유 라이브러리
│   ├── charts/    # ECharts 래퍼 + 프리셋
│   ├── i18n/      # i18next 설정 + 로케일
│   ├── map/       # MapLibre + deck.gl 통합
│   └── theme/     # 디자인 토큰 + CVA 변형
├── data/mock/     # 7개 목 데이터 모듈
├── stores/        # Zustand 스토어 (8개)
├── services/      # API 서비스 샘플
├── shared/        # 공유 UI 컴포넌트
└── styles/        # CSS (Dark/Light 테마)

Path Alias

Alias	경로
@/	src/
@lib/	src/lib/
@shared/	src/shared/
@features/	src/features/
@data/	src/data/
@stores/	src/stores/

팀 컨벤션

• 팀 규칙은 .claude/rules/ 참조
• 커밋: Conventional Commits (한국어), .githooks/commit-msg로 검증
• Git Hooks: .githooks/ (core.hooksPath 설정됨)