diff --git a/web-app/README.md b/web-app/README.md index 936ac44..c476cee 100644 --- a/web-app/README.md +++ b/web-app/README.md @@ -1,3 +1,102 @@ -### 다비오 변화 탐지 시스템 +# 다비오 변화 탐지 시스템 - Web Application -## API application \ No newline at end of file +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** - 프로덕션 의존성 + 빌드 결과물만 포함하여 실행