DABEEO-DETECTION-APPLICATION/web-app

다비오 변화 탐지 시스템 - 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 (선택, 컨테이너 환경 사용 시)

시작하기

로컬 개발

corepack enable
pnpm install
pnpm dev

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

Docker 개발

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)

docker compose up

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

프로덕션 빌드 (Dockerfile)

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 - 프로덕션 의존성 + 빌드 결과물만 포함하여 실행