🐐 HAEZO - RAG AI 챗봇 관리 시스템 (Frontend)
HAEZO는 RAG(Retrieval-Augmented Generation) 기반 AI 챗봇 서비스를 운영·관리하기 위한 통합 관리자 대시보드입니다. 기업 내 문서, FAQ, 조직 구조를 관리하고 챗봇의 사용 통계 및 이력을 모니터링할 수 있습니다.
🛠️ 기술 스택 (Tech Stack)
Core
- React 18 + Vite
- TypeScript
- React Router DOM v6
State Management / Data Fetching
- Zustand (persist 사용)
- React Query (TanStack Query)
- Axios
UI / Styling
- Tailwind CSS
- Lucide React (아이콘)
- Framer Motion (애니메이션)
- Recharts (차트)
- react-organizational-chart (조직도)
- React Three Fiber (3D 로고)
- next-themes (다크/라이트 모드)
File Handling
- Excel: xlsx
- Word: docx-preview
- PDF: 브라우저 기본 뷰어
🚀 주요 기능 (Key Features)
- 인증 및 사용자 관리
- RBAC 권한 구조: Master / Admin / User
- 회원가입 흐름 분리 (조직 생성 / 초대 기반 가입)
- Access/Refresh Token + Axios Interceptor 자동 처리
- 서버 연결 실패 시 오프라인 게임(Flappy Bird) 제공
- 대시보드
- KPI 지표 시각화 (일간/월간 질의량, 응답 성공률, 응답 시간 등)
- Line / Bar / Pie 차트 제공
- 인기 문서·FAQ Top10
- 문서 관리
- 3단계 업로드: URL 발급 → S3 업로드 → 완료 처리
- PDF/Word/Excel 미리보기 지원
- Master 승인 기반 결재 시스템
- 문서 히스토리 및 버전 관리
- 조직 관리
- 반응형 조직도 UI (줌/스크롤)
- 부서 CRUD, 구성원 검색/수정/초대
- 드래그 앤 드롭 레이아웃 구성
- FAQ 및 로그
- 추천 FAQ → 정식 등록 워크플로우
- 시스템 이력 및 관리자 활동 로그 조회
📂 폴더 구조 (Folder Structure)
src/
├── api/ # API & Axios
├── assets/ # 이미지/리소스
├── components/ # UI 컴포넌트
│ ├── charts/
│ ├── common/
│ ├── layout/
│ └── three/
├── data/ # Mock Data
├── hooks/ # Custom Hooks
├── pages/ # 라우터 페이지
├── store/ # Zustand Store
├── styles/
├── types/ # 타입 정의
├── utils/ # 유틸 함수
├── App.tsx
└── main.tsx
🔧 설치 및 실행 (Installation)
-
레포지토리 클론
git clone [Repository URL] cd FE
-
패키지 설치
npm install
-
환경 변수 설정
루트에 .env 생성:
VITE_API_URL=https://api.haezocorp.space/api
-
개발 서버 실행
npm run dev
-
빌드
npm run build
🧪 Mock API Hybrid Mode
- API 호출 실패 시 자동으로 Mock Data로 fallback
- 서버 장애 상황에서도 UI 정상 작동
테스트 계정 (Mock Mode)
Role ID PW
Master [email protected] 1234 Admin [email protected] 1234 User [email protected] 1234
🤝 기여 (Contribution)
-
저장소 Fork
-
Feature 브랜치 생성
git checkout -b feature/AmazingFeature
-
변경사항 Commit
-
원격 저장소 Push
git push origin feature/AmazingFeature
-
Pull Request 생성
📌 License
해당 프로젝트는 비공개 프로젝트이며 별도의 라이선스 정책을 따릅니다.
시연 시진
로그인
마스터 회원가입
어드민 회원가입
대시보드
문서관리
FAQ
조직관리
통계 및 추이
이력관리
마이페이지
