프리랜스
농부 나무 관리 어드민 시스템
미얀마/라오스 지역 커피 농장 공급망을 관리하는 어드민 대시보드입니다.
기간
2024.08 ~ 2024.11
역할
풀스택 개발 (프론트엔드 중심)
팀 규모
3
기술 스택
React 19TypeScriptViteMUIReact QueryReact Hook Formi18next@react-google-maps/apiVercel
프로젝트 상세 소개
미얀마/라오스 지역 커피 농장 공급망을 관리하는 어드민 대시보드입니다. 면장(Village Head) 관리, 농부(Farmer) 관리, 커피 나무 거래, 구매 승인 워크플로우 등의 기능을 제공합니다.
주요 기능
- 승인 워크플로우 시스템 (면장/농부/구매/섹션 등록/수정/삭제)
- 면장(Village Head) 관리
- Google Maps 연동 지역 관리
- 다국어 지원 (한국어/라오어)
- 역할 기반 라우팅
담당 업무
프로젝트 초기 세팅
- •React + TypeScript + Vite 기반 프로젝트 환경 구성
- •Prettier, ESLint, Husky 설정 (commit 시 코드 품질 검사)
- •React Router DOM 기반 라우팅 구조 설계
- •MUI 기반 테마 및 팔레트 설정
공통 컴포넌트 시스템
- •Input, Textarea, Select, Button 등 폼 관련 공통 컴포넌트 구현
- •React Hook Form 적용 (모든 input 컴포넌트 통합)
- •Table 공통 컴포넌트 구현 (loading, pagination 지원)
- •Modal 공통 컴포넌트 및 Context 기반 상태 관리
- •Title, Label 등 레이아웃 공통 컴포넌트 구현
레이아웃 구조
- •GNB(Global Navigation Bar) 컴포넌트 구현
- •LNB(Left Navigation Bar/Sidebar) 컴포넌트 구현
- •권한별 LNB 메뉴 분기 처리 (ADMIN/부관리자)
- •전체 레이아웃 Outlet 스크롤 및 스타일 적용
페이지 UI 구현
- •로그인/계정 생성/내 정보 수정 페이지 레이아웃
- •면장 목록/상세/등록/수정 페이지 레이아웃
- •농부 목록/상세/등록 페이지 레이아웃
- •부관리자 목록/상세/수정 페이지 레이아웃
- •요청 목록/상세 페이지 (승인/거절/삭제 기능 포함)
- •지역/섹션 관리 페이지 레이아웃
- •나무 수령/수매 내역 목록 페이지
API 연동
- •로그인/로그아웃 API 연동
- •계정 생성 API 연동 (지역 정보 Select 연동)
- •면장 CRUD API 연동 (목록/상세/등록/수정)
- •농부 CRUD API 연동 (목록/상세/등록)
- •부관리자 API 연동 (목록/상세/수정)
- •요청 관리 API 연동 (목록/상세/승인/거절/삭제, 필터링, Pagination)
- •지역/섹션 API 연동 (목록/등록/삭제)
- •나무 구매 내역/수매 내역 등록 API 연동
인증 시스템
- •accessToken 기반 인증 처리
- •토큰 만료 시 자동 로그아웃 처리
- •미인증 사용자 로그인 페이지 리다이렉트
- •권한별 UI 분기 처리 (ADMIN/부관리자-농림부)
외부 서비스 연동
- •Google Maps API 연동 (미얀마 지역 선택 지원)
- •Toast 알림 시스템 적용 (react-toastify)
다국어 지원
- •다국어 지원 기능 구현 (라오스어 포함)
배포/인프라
- •Vercel 배포 설정 (vercel.json, rewrite 설정)
- •백엔드 API Proxy 설정 (CORS 해결)
- •GitHub Actions 워크플로우 작성 (fork된 레포로 자동 push)
프로젝트 구조
src/