목차
1. 프로젝트 개요
| 항목 |
내용 |
| 프로젝트명 |
Coffee Admin Dashboard |
| 유형 |
커피 공급망 관리 어드민 시스템 |
| 역할 |
풀스택 개발 (프론트엔드 중심) |
| 기간 |
2025.01 ~ 2025.06 |
| 팀 구성 |
BE:1, FE:2 |
| 맡은 포지션 |
Frontend |
프로젝트 소개
미얀마/라오스 지역 커피 농장 공급망을 관리하는 어드민 대시보드입니다. 면장(Village Head) 관리, 농부(Farmer) 관리, 커피 나무 거래, 구매 승인 워크플로우 등의 기능을 제공합니다.
2. 기술 스택
Frontend Core
| 기술 |
버전 |
선택 이유 |
| React |
19.0.0 |
최신 기능 활용, 대규모 커뮤니티 지원 |
| TypeScript |
5.7.2 |
컴파일 타임 에러 방지, 코드 안정성 확보 |
| Vite |
6.2.0 |
빠른 HMR, 최적화된 빌드 속도 |
상태 관리
| 기술 |
용도 |
| React Query (TanStack) 5.69.0 |
서버 상태 관리 (캐싱, 동기화, 자동 재검증) |
| React Hook Form 7.54.2 |
폼 상태 관리 (비제어 컴포넌트 패턴) |
| React Context |
UI 전역 상태 관리 (Dialog 등) |
UI Framework
| 기술 |
용도 |
| Material-UI (MUI) 6.4.8 |
컴포넌트 라이브러리, 테마 시스템 |
| Emotion |
CSS-in-JS 스타일링 |
| MUI X Date Pickers 7.28.3 |
날짜 선택 컴포넌트 |
기타 주요 라이브러리
| 기술 |
용도 |
| Axios 1.8.3 |
HTTP 클라이언트 + 인터셉터 |
| React Router 7.6.2 |
클라이언트 사이드 라우팅 |
| i18next 15.5.3 |
다국어 지원 (한국어/라오어) |
| @react-google-maps/api |
Google Maps 연동 |
| react-toastify |
토스트 알림 |
| dayjs |
날짜 처리 |
3. 폴더 구조
src/
├── apis/ # API 호출 모듈 (11개 도메인)
│ ├── Axios.ts # 인터셉터 설정된 axios 인스턴스
│ ├── QUERY_KEYS.ts # React Query 키 중앙 관리
│ ├── AppUser/ # 사용자 인증/관리 API (10개 훅)
│ ├── Approval/ # 승인 워크플로우 API (15개 훅)
│ ├── Area/ # 지역 관리 API (6개 훅)
│ ├── Farmer/ # 농부 관리 API
│ ├── Purchase/ # 구매 관리 API
│ └── TreeTransaction/ # 나무 거래 API
│
├── components/ # 재사용 컴포넌트 (16개)
│ ├── AddPhoto.tsx # 사진 업로드 + 미리보기
│ ├── Table.tsx # 데이터 테이블
│ ├── CustomDatePicker.tsx # MUI 날짜 선택기 래퍼
│ ├── LabelAndInput.tsx # 라벨 + 입력 필드
│ ├── LabelAndSelect.tsx # 라벨 + 셀렉트 드롭다운
│ ├── DialogProvider.tsx # Context 기반 다이얼로그 시스템
│ └── ...
│
├── hooks/ # 커스텀 훅
│
├── locales/ # 다국어 번역 파일
│ ├── ko/translation.json # 한국어
│ └── lo/translation.json # 라오어
│
├── pages/ # 페이지 컴포넌트 (11개 모듈)
│ ├── accounts/ # 계정 관리
│ ├── approval/ # 승인 요청 관리
│ ├── farmer/ # 농부 관리
│ ├── locations/ # 지역/섹션 관리
│ ├── purchases/ # 구매 관리
│ ├── treeTransactions/ # 나무 거래 관리
│ ├── viceAdmin/ # 부관리자 관리
│ └── villageHead/ # 면장 관리
│
├── routers/ # 라우팅 설정
│ ├── Router.tsx # 라우트 정의
│ └── Layout.tsx # Gnb + Lnb + Outlet 레이아웃
│
├── themes/ # MUI 테마 설정
│ └── index.ts # 색상 팔레트, 타이포그래피
│
├── typings/ # TypeScript 타입 정의
│
└── utils/ # 유틸리티 함수
4. 주요 기능