diff --git a/AGENTS.md b/AGENTS.md new file mode 100644 index 0000000..c7e6ad5 --- /dev/null +++ b/AGENTS.md @@ -0,0 +1,248 @@ +# KCG AI Monitoring (모노레포) + +해양경찰청 AI 기반 불법어선 탐지 및 단속 지원 플랫폼 + +## 모노레포 구조 + +``` +kcg-ai-monitoring/ +├── frontend/ # React 19 + TypeScript + Vite (UI) +├── backend/ # Spring Boot 3.x + Java 21 (인증/권한/감사 + 분석 API) +├── prediction/ # Python 3.11+ + FastAPI (AIS 분석 엔진, 5분 주기) +├── database/ # PostgreSQL 마이그레이션 참조용 README (실제 Flyway 파일은 backend/src/main/resources/db/migration/ V001~V030, 51 테이블) +│ └── migration/ +├── deploy/ # 배포 가이드 + 서버 설정 문서 +├── docs/ # 프로젝트 문서 (SFR, 아키텍처) +├── .gitea/ # Gitea Actions CI/CD (프론트 자동배포) +├── .Codex/ # Codex 워크플로우 +├── .githooks/ # Git hooks +└── Makefile # 통합 dev/build 명령 +``` + +## 시스템 구성 + +``` +[Frontend Vite :5173] ──→ [Backend Spring :8080] ──→ [PostgreSQL kcgaidb] + ↑ write + [Prediction FastAPI :18092] ─────┘ (5분 주기 분석 결과 저장) + ↑ read + [SNPDB PostgreSQL] (AIS 원본) +``` + +- **자체 백엔드**: 인증/권한/감사로그/관리자 + 운영자 의사결정 (확정/제외/학습) + prediction 분석 결과 조회 API (`/api/analysis/*`) +- **Prediction**: AIS → 분석 결과를 kcgaidb 에 직접 write (백엔드 호출 없음) +- **DB 공유 아키텍처**: 백엔드와 prediction 은 HTTP 호출 없이 kcgaidb 를 통해서만 연동 + +## 명령어 + +```bash +make install # 전체 의존성 설치 +make dev # 프론트 + 백엔드 동시 실행 +make dev-all # 프론트 + 백엔드 + prediction 동시 실행 +make dev-frontend # 프론트만 +make dev-backend # 백엔드만 +make dev-prediction # prediction 분석 엔진만 (FastAPI :8001) +make build # 전체 빌드 +make lint # 프론트 lint +make format # 프론트 prettier +``` + +## 기술 스택 + +### Frontend (`frontend/`) +- React 19, TypeScript 5.9, Vite 8 +- Tailwind CSS 4 + CVA +- MapLibre GL 5 + deck.gl 9 (지도) +- ECharts 6 (차트) +- Zustand 5 (상태관리) +- i18next (ko/en) +- React Router 7 +- ESLint 10 + Prettier + +### Prediction (`prediction/`) — 분석 엔진 +- Python 3.11+, FastAPI, APScheduler +- 17개 알고리즘 모듈 (다크베셀, 스푸핑, 환적, 어구 상관·부모·정체성 충돌, 쌍끌이, 위험도, 어선 분류 등) +- 7단계 분류 파이프라인 (전처리→행동→리샘플→특징→분류→클러스터→계절) +- AIS 원본: SNPDB (5분 증분), 결과: kcgaidb (직접 write) +- prediction과 backend는 DB만 공유 (HTTP 호출 X, 단 실시간 상태 조회용 FastAPI 프록시 `/api/prediction/*` 예외) + +### Backend (`backend/`) +- Spring Boot 3.x + Java 21 +- Spring Security + JWT +- PostgreSQL + Flyway +- Caffeine (권한 캐싱) +- 트리 기반 RBAC (wing 패턴) + +### Database (`kcgaidb`) +- PostgreSQL +- 사용자: `kcg-app` +- 스키마: `kcg` + +## 배포 환경 + +| 서비스 | 서버 (SSH) | 포트 | 관리 | +|---|---|---|---| +| 프론트엔드 | rocky-211 | nginx 443 | Gitea Actions 자동배포 | +| 백엔드 | rocky-211 | 18080 | `systemctl restart kcg-ai-backend` | +| prediction | redis-211 | 18092 | `systemctl restart kcg-ai-prediction` | + +- **URL**: https://kcg-ai-monitoring.gc-si.dev +- **배포 상세**: `deploy/README.md` 참조 +- **CI/CD**: `.gitea/workflows/deploy.yml` (프론트만 자동, 백엔드/prediction 수동) + +## 권한 체계 + +좌측 탭(메뉴) = 권한 그룹, 내부 패널/액션 = 자식 자원, CRUD 단위 개별 제어. +상세는 `.Codex/plans/vast-tinkering-knuth.md` 참조. + +## 팀 컨벤션 + +- 팀 규칙: `.Codex/rules/` +- 커밋: Conventional Commits (한국어), `.githooks/commit-msg` 검증 +- pre-commit: `frontend/` 디렉토리 기준 TypeScript + ESLint 검증 + +## 디자인 시스템 (필수 준수) + +프론트엔드 UI는 **`/design-system.html` 쇼케이스를 단일 진실 공급원(SSOT)** 으로 한다. +모든 페이지/컴포넌트는 쇼케이스에 정의된 컴포넌트와 토큰만 사용한다. + +### 쇼케이스 진입 +- **URL**: https://kcg-ai-monitoring.gc-si.dev/design-system.html (메인 SPA와 별개) +- **소스**: `frontend/design-system.html` + `frontend/src/designSystemMain.tsx` + `frontend/src/design-system/` +- **추적 ID 체계**: `TRK-<카테고리>-<슬러그>` (예: `TRK-BADGE-critical-sm`) + - 호버 시 툴팁, "ID 복사 모드"에서 클릭 시 클립보드 복사 + - URL 해시 딥링크: `#trk=TRK-BUTTON-primary-md` +- **단축키 `A`**: 다크/라이트 테마 토글 + +### 공통 컴포넌트 (반드시 사용) + +| 컴포넌트 | 위치 | 용도 | +|---|---|---| +| `Badge` | `@shared/components/ui/badge` | 8 intent × 4 size, **className으로 색상 override 금지** | +| `Button` | `@shared/components/ui/button` | 5 variant × 3 size (primary/secondary/ghost/outline/destructive) | +| `Input` / `Select` / `Textarea` / `Checkbox` / `Radio` | `@shared/components/ui/` | 폼 요소 (Select는 aria-label 타입 강제) | +| `TabBar` / `TabButton` | `@shared/components/ui/tabs` | underline / pill / segmented 3 variant | +| `Card` / `CardHeader` / `CardTitle` / `CardContent` | `@shared/components/ui/card` | 4 variant | +| `PageContainer` | `@shared/components/layout` | 페이지 루트 (size sm/md/lg + fullBleed) | +| `PageHeader` | `@shared/components/layout` | 페이지 헤더 (icon + title + description + demo + actions) | +| `Section` | `@shared/components/layout` | Card + CardHeader + CardTitle + CardContent 단축 | + +### 카탈로그 기반 라벨/색상 + +분류 데이터는 `frontend/src/shared/constants/`의 19+ 카탈로그를 참조한다. +중앙 레지스트리는 `catalogRegistry.ts`이며, 쇼케이스가 자동 열거한다. + +```tsx +import { Badge } from '@shared/components/ui/badge'; +import { getAlertLevelIntent, getAlertLevelLabel } from '@shared/constants/alertLevels'; + + + {getAlertLevelLabel(event.level, t, lang)} + +``` + +ad-hoc 한글/영문 상태 문자열은 `getStatusIntent()` (statusIntent.ts) 사용. +숫자 위험도는 `getRiskIntent(0~100)` 사용. + +### CSS 작성 규칙 + +1. **인라인 색상 금지** — `style={{ backgroundColor: '#ef4444' }}` 같은 정적 색상은 작성 금지 + - 예외: 동적 데이터 기반 (`backgroundColor: meta.hex`, progress width `${value}%`) +2. **하드코딩 Tailwind 색상 금지** — `bg-red-500/20 text-red-400` 같은 직접 작성 금지 + - 반드시 Badge intent 또는 카탈로그 API 호출 +3. **className override 정책** + - ✅ 레이아웃/위치 보정: `` + - ❌ 색상/글자 크기 override: `` +4. **시맨틱 토큰 우선** — `theme.css @layer utilities`의 토큰 사용 + - `text-heading` / `text-label` / `text-hint` / `text-on-vivid` / `text-on-bright` + - `bg-surface-raised` / `bg-surface-overlay` / `bg-card` / `bg-background` +5. **!important 절대 금지** — `cn()` + `tailwind-merge`로 충돌 해결 +6. **`-webkit-` 벤더 prefix** — 수동 작성 CSS는 `backdrop-filter` 등 prefix 직접 추가 (Tailwind는 자동) + +### 페이지 작성 표준 템플릿 + +```tsx +import { PageContainer, PageHeader, Section } from '@shared/components/layout'; +import { Button } from '@shared/components/ui/button'; +import { Badge } from '@shared/components/ui/badge'; +import { getAlertLevelIntent, getAlertLevelLabel } from '@shared/constants/alertLevels'; +import { Shield, Plus } from 'lucide-react'; +import { useTranslation } from 'react-i18next'; + +export function MyPage() { + const { t, i18n } = useTranslation('common'); + const lang = i18n.language as 'ko' | 'en'; + + return ( + + }> + 추가 + + } + /> +
+ + {getAlertLevelLabel('HIGH', t, lang)} + +
+
+ ); +} +``` + +### 접근성 (a11y) 필수 + +- **`