# 다비오 변화 탐지 시스템 - Web Application

React Router 7 기반 SPA 웹 애플리케이션

## 기술 스택

| 분류 | 기술 |
|------|------|
| Framework | React 19 + React Router 7 (SPA) |
| Language | TypeScript 5.9 (strict) |
| Styling | Tailwind CSS 4.2 |
| Build Tool | Vite 8 |
| Package Manager | pnpm (corepack) |
| Code Quality | ESLint 10 + Prettier |
| Container | Docker + Docker Compose |
| Map | OpenLayers 10.8 |
| UI Components | React Aria Components 1.16 |
| Form | React Hook Form 7.72 + Zod 4.3 |
| Date | Day.js 1.11 |

## 사전 요구사항

- **Node.js** 24+
- **corepack** 활성화 (`corepack enable` 실행 시 pnpm 자동 설치)
- **Docker & Docker Compose** (선택, 컨테이너 환경 사용 시)

## 시작하기

### 로컬 개발

```bash
corepack enable
pnpm install
pnpm dev
```

개발 서버가 `http://localhost:5173`에서 실행됩니다.

### Docker 개발

```bash
docker compose up
```

소스 코드가 볼륨 마운트되어 HMR이 동작합니다. `http://localhost:5173`에서 접근 가능합니다.

## 프로젝트 구조

```
web-app/
├── app/
│   ├── root.tsx              # Root layout, ErrorBoundary
│   ├── app.css               # Tailwind 글로벌 스타일
│   ├── routes.ts             # 라우트 정의
│   ├── routes/
│   │   ├── catch-all.tsx     # 404 처리
│   │   ├── code/
│   │   │   └── page.tsx      # 공통코드 관리
│   │   ├── hyper-parameter/
│   │   │   └── page.tsx      # 하이퍼파라미터 설정
│   │   ├── imagery/
│   │   │   ├── aerial/
│   │   │   │   ├── page.tsx      # 항공영상 목록
│   │   │   │   └── [id]/
│   │   │   │       └── page.tsx  # 항공영상 상세
│   │   │   ├── satellite/
│   │   │   │   ├── page.tsx      # 위성영상 목록
│   │   │   │   └── [id]/
│   │   │   │       └── page.tsx  # 위성영상 상세
│   │   │   └── drone/
│   │   │       ├── page.tsx      # 드론영상 목록
│   │   │       └── [id]/
│   │   │           └── page.tsx  # 드론영상 상세
│   │   ├── inference/
│   │   │   ├── page.tsx      # 추론 목록
│   │   │   └── [id]/
│   │   │       └── page.tsx  # 추론 상세
│   │   ├── labeling/
│   │   │   ├── label/
│   │   │   │   └── page.tsx  # 라벨링 작업
│   │   │   └── review/
│   │   │       └── page.tsx  # 라벨링 검수
│   │   ├── model/
│   │   │   ├── page.tsx      # 모델 목록
│   │   │   └── [id]/
│   │   │       └── page.tsx  # 모델 상세
│   │   ├── log/
│   │   │   ├── audit/
│   │   │   │   └── page.tsx  # 감사 로그
│   │   │   └── system/
│   │   │       └── page.tsx  # 시스템 로그
│   │   ├── login/
│   │   │   └── page.tsx      # 로그인
│   │   ├── schedule/
│   │   │   └── page.tsx      # 스케줄 관리
│   │   └── user/
│   │       └── page.tsx      # 사용자 관리
├── public/                   # 정적 파일
├── Dockerfile                # 프로덕션 빌드 (multi-stage)
├── docker-compose.yml        # 개발 환경
├── vite.config.ts            # Vite 설정
├── react-router.config.ts    # React Router 설정
├── tsconfig.json             # TypeScript 설정
└── eslint.config.js          # ESLint 설정
```

> **경로 별칭**: `~/`는 `./app/`을 가리킵니다. (`tsconfig.json`에서 설정)

## 스크립트

| 명령어 | 설명 |
|--------|------|
| `pnpm dev` | 개발 서버 실행 (Vite HMR) |
| `pnpm build` | 프로덕션 빌드 |
| `pnpm start` | 프로덕션 서버 실행 |
| `pnpm typecheck` | TypeScript 타입 검사 |
| `pnpm lint` | ESLint 검사 |
| `pnpm lint:fix` | ESLint 자동 수정 |

## Docker

### 개발 환경 (Docker Compose)

```bash
docker compose up
```

- 소스 코드를 컨테이너에 볼륨 마운트하여 실시간 반영
- `node_modules`는 별도 named volume으로 관리
- 포트: `5173`

### 프로덕션 빌드 (Dockerfile)

```bash
docker build -t dabeeo-web .
docker run -p 3000:3000 dabeeo-web
```

Multi-stage 빌드로 최적화된 이미지를 생성합니다:

1. **development-dependencies-env** - 전체 의존성 설치 (빌드 도구 포함)
2. **production-dependencies-env** - 프로덕션 의존성만 설치
3. **build-env** - 애플리케이션 빌드
4. **final** - 프로덕션 의존성 + 빌드 결과물만 포함하여 실행
