# 다비오 변화 탐지 시스템 - 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 |

## 사전 요구사항

- **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/
│   │   ├── home.tsx          # 메인 페이지 (/)
│   │   ├── users.tsx         # 유저 목록 (/users)
│   │   └── catch-all.tsx     # 404 처리
│   └── welcome/              # Welcome 컴포넌트
├── 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** - 프로덕션 의존성 + 빌드 결과물만 포함하여 실행