# Signal Batch Static Resources v2.0

폐쇄망 환경에서 운용되는 Signal Batch 프로젝트의 개선된 정적 리소스 구조입니다.

## 구조 개요

```
v2/
├── css/                    # 스타일시트
│   ├── common.css         # 공통 스타일
│   └── abnormal-tracks.css # 비정상 궤적 전용 스타일
├── js/                    # JavaScript 모듈
│   ├── api/              # API 통신 모듈
│   │   └── abnormal-tracks-api.js
│   ├── components/       # 재사용 가능한 컴포넌트
│   │   ├── map-controller.js
│   │   ├── vessel-list.js
│   │   └── statistics-panel.js
│   ├── pages/           # 페이지별 애플리케이션
│   │   └── abnormal-tracks-app.js
│   └── utils/           # 유틸리티 함수
│       ├── constants.js
│       └── helpers.js
├── pages/               # HTML 페이지
│   └── abnormal-tracks.html
└── README.md
```

## 주요 개선사항

### 1. 모듈화된 구조
- 인라인 CSS/JavaScript를 별도 파일로 분리
- 기능별로 모듈 분할하여 유지보수성 향상
- ES6 모듈 시스템 사용

### 2. 컴포넌트 기반 설계
- **MapController**: 지도 렌더링 및 상호작용 관리
- **VesselList**: 선박 목록 표시 및 필터링
- **StatisticsPanel**: 통계 정보 표시 및 범례 관리

### 3. API 모듈 분리
- API 호출 로직을 별도 모듈로 분리
- 에러 처리 및 로딩 상태 관리 개선

### 4. 폐쇄망 환경 최적화
- 모든 라이브러리는 `/libs` 경로의 로컬 파일 사용 유지
- 지도 타일도 로컬 API 엔드포인트 사용
- CDN 의존성 없음

## 사용 방법

### 기본 사용법
1. 웹 서버에서 `/v2/pages/abnormal-tracks.html` 접근
2. 기존 기능과 동일하게 작동하되, 개선된 코드 구조

### 개발 시 주의사항
1. **모듈 임포트**: ES6 모듈 문법 사용
2. **이벤트 처리**: 컴포넌트 간 이벤트 핸들러 패턴 활용
3. **상태 관리**: 각 컴포넌트가 자체 상태를 관리

## API 엔드포인트

기존과 동일한 엔드포인트 사용:
- `GET /api/v1/abnormal-tracks/recent` - 최근 비정상 궤적 조회
- `POST /api/v1/abnormal-tracks/detect` - 사용자 정의 검출
- `POST /api/v1/abnormal-tracks/move-to-abnormal` - 비정상 테이블 이동
- `GET /api/tiles/world/{z}/{x}/{y}.webp` - 지도 타일

## 컴포넌트 상세

### MapController
- MapLibre GL JS와 Deck.gl 통합 관리
- 트랙 시각화 및 상호작용 처리
- GeoJSON 캐싱으로 성능 최적화

### VesselList
- 선박별 궤적 그룹화 및 정렬
- 필터링 및 검색 기능
- 사용자 정의 검출 모드 지원

### StatisticsPanel
- 실시간 통계 업데이트
- 비정상 유형별 범례 생성
- 조회 기간 표시

## 설정 및 상수

### constants.js
```javascript
// API 엔드포인트
export const API_ENDPOINTS = { ... };

// 비정상 유형 및 색상 정의
export const ABNORMAL_TYPES = { ... };
export const ABNORMAL_TYPE_COLORS = { ... };

// 지도 설정
export const MAP_CONFIG = { ... };
```

### helpers.js
```javascript
// 날짜 처리, 포맷팅, 유틸리티 함수들
export function formatDistance(distance) { ... }
export function getDateRange(days) { ... }
```

## 성능 최적화

1. **GeoJSON 캐싱**: 파싱된 GeoJSON 데이터 메모리 캐시
2. **디바운스**: 빈번한 API 호출 방지
3. **이벤트 위임**: 동적 요소 이벤트 처리 최적화
4. **레이어 관리**: Deck.gl 레이어 효율적 업데이트

## 브라우저 호환성

- ES6 모듈을 지원하는 모던 브라우저 필요
- Chrome 61+, Firefox 60+, Safari 10.1+, Edge 79+

## 마이그레이션 가이드

기존 abnormal-tracks.html에서 v2로 이전 시:
1. 기능적으로는 100% 동일
2. URL만 `/v2/pages/abnormal-tracks.html`로 변경
3. 개발자 도구에서 모듈 구조 확인 가능

## 향후 확장 계획

1. **TypeScript 도입**: 타입 안전성 확보
2. **테스트 코드**: 단위 테스트 및 통합 테스트
3. **번들링**: Webpack/Vite를 통한 최적화
4. **PWA 기능**: 오프라인 지원 및 캐싱