readme 수정

web-app/README.md

@@ -1,3 +1,102 @@
-### 다비오 변화 탐지 시스템
+# 다비오 변화 탐지 시스템 - Web Application
 
-## API 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** - 프로덕션 의존성 + 빌드 결과물만 포함하여 실행