스마트 팩토리 모니터링 및 이상감지 시스템의 프론트엔드 애플리케이션입니다.
| 분류 | 기술 |
|---|---|
| 프레임워크 | React 19 |
| 언어 | TypeScript |
| 빌드 도구 | Vite |
| 스타일 | Tailwind CSS 4 |
| 라우팅 | React Router DOM 7 |
| 서버 상태 | TanStack React Query 5 |
| 전역 상태 | Zustand 5 |
| HTTP 클라이언트 | Axios |
| 패키지 매니저 | pnpm |
# 패키지 설치
pnpm install
# 개발 서버 실행
pnpm dev
# 빌드
pnpm build
# 빌드 결과 미리보기
pnpm preview환경변수 설정이 필요한 경우 .env 파일을 루트에 생성합니다.
VITE_API_BASE_URL=http://localhost:8080
| URL | 페이지 | 연동 서비스 |
|---|---|---|
/dashboard |
대시보드 | monitoring-service |
/monitoring/process |
공정현황 | monitoring-service |
/monitoring/device |
설비현황 | monitoring-service |
/anomaly |
이상로그 목록 | anomaly-service |
/anomaly/:id |
이상로그 상세 | anomaly-service |
/notifications |
알림 목록 | notification-service |
/chatbot |
AI 채팅 | chatbot-service |
/ 접근 시 /dashboard로 리다이렉트됩니다.
src/
├── apis/ # axios 인스턴스, API 기본 설정
├── assets/ # 이미지, 폰트 등 정적 파일
├── components/
│ └── ui/ # 전역 공통 UI 컴포넌트 (Button, Input 등)
├── features/ # 기능 단위 모듈
│ ├── anomaly/ # 이상로그
│ ├── chatbot/ # AI 채팅
│ ├── dashboard/ # 대시보드
│ ├── monitoring/ # 공정현황 · 설비현황
│ └── notification/ # 알림
├── hooks/ # 전역 공통 커스텀 훅
├── layouts/ # 공통 레이아웃 (사이드바, 헤더)
├── pages/ # 라우트 1:1 페이지 컴포넌트
├── store/ # Zustand 전역 상태
├── types/ # 전역 TypeScript 타입
└── utils/ # 순수 유틸 함수
빈 폴더 유지를 위해 .gitkeep 파일이 들어있습니다. 해당 폴더에 실제 파일을 추가할 때 .gitkeep은 삭제하면 됩니다.
각 features/ 모듈 내부 구조:
features/{name}/
├── components/ # 해당 기능 전용 컴포넌트
├── hooks/ # 해당 기능 전용 커스텀 훅
├── api.ts # API 호출 함수
└── types.ts # 해당 기능 타입 정의
- 파일명과 컴포넌트명은 PascalCase 사용
- 페이지 컴포넌트는
Page접미사 필수 (예:DashboardPage) pages/는 레이아웃·feature 컴포넌트 조합만 — 비즈니스 로직 작성 금지
features/내부 코드는 같은 feature 안에서만 import- 두 feature에서 공통으로 쓰이면
components/또는hooks/로 올림 - 다른 feature를 직접 참조하지 않음
- 서버 데이터: React Query 사용
- 클라이언트 전역 상태: Zustand 사용
- 컴포넌트 로컬 상태:
useState사용
- 모든 API 호출은 각
features/{name}/api.ts에서 관리 - axios 인스턴스는
apis/client.ts하나만 사용 (api-gateway 단일 진입점) - API 호출 함수는 React Query와 함께 커스텀 훅으로 래핑
- Tailwind CSS 클래스 사용
- 인라인 스타일 사용 금지
- 공통 스타일은
components/ui/에 컴포넌트로 추출