Jinseok (심진석)
32edd13cb3
Reviewed-on: #3 Co-authored-by: Jinseok (심진석) <jinseok.sim@tf.dabeeo.com> Co-committed-by: Jinseok (심진석) <jinseok.sim@tf.dabeeo.com>
136 lines
4.2 KiB
Markdown
136 lines
4.2 KiB
Markdown
# 다비오 변화 탐지 시스템 - 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/
|
|
│ │ │ ├── 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** - 프로덕션 의존성 + 빌드 결과물만 포함하여 실행
|