목차
1. 프로젝트 개요
| 항목 |
내용 |
| 프로젝트명 |
한국농어촌공사 - VOC 관리 시스템) |
| 유형 |
VOC(Voice of Customer) 관리 시스템 |
| 역할 |
프론트엔드 개발 |
| 기간 |
2023.10 ~ 2024.09 |
| 팀 구성 |
기획 & 디자인 : 5명, FE : 7명, BE: 6명 |
프로젝트 소개
기업용 고객의 소리(VOC) 통합 관리 시스템으로, VOC 접수/처리/통계, FAQ 관리, 공지사항, 워크플로우 기반 승인 프로세스 등의 기능을 제공합니다.
2. 기술 스택
Frontend Core
| 기술 |
버전 |
선택 이유 |
| React |
18.2.0 |
안정적인 버전 + Concurrent Features 지원 |
| TypeScript |
5.2.2 |
대규모 코드베이스 타입 안정성 |
| Vite |
5.2.0 |
빠른 개발 서버 + HMR |
상태 관리
| 기술 |
용도 |
| React Query (TanStack) v5 |
서버 상태 관리 (캐싱, 동기화) |
| MobX |
클라이언트 전역 상태 관리 |
| React Hook Form |
폼 상태 관리 |
UI/스타일링
| 기술 |
용도 |
| MUI (Material UI) v5 |
UI 컴포넌트 라이브러리 |
| Emotion |
CSS-in-JS 스타일링 |
기타 주요 라이브러리
| 기술 |
용도 |
| React Router v6 |
클라이언트 사이드 라우팅 |
| recharts |
차트/데이터 시각화 (통계 페이지) |
| react-quill |
리치 텍스트 에디터 (VOC 작성) |
| react-dnd |
드래그 앤 드롭 (워크플로우) |
| xlsx |
엑셀 내보내기/가져오기 |
| dayjs, date-fns |
날짜 처리 |
| i18next |
다국어 지원 |
| jwt-decode |
JWT 토큰 디코딩 |
테스트 & 품질
| 기술 |
용도 |
| Vitest |
단위 테스트 |
| Cypress |
E2E 테스트 |
| Storybook |
컴포넌트 문서화 |
| ESLint + Prettier |
코드 품질 |
| Husky + lint-staged |
Git 훅 자동화 |