목차

1. 상태 관리 전략

역량 구체적 구현
폼 상태 관리 React Hook Form으로 비제어 컴포넌트 기반 폼 성능 최적화
전역 상태 관리 Context API로 Dialog, Auth 상태 전역 관리
인증 상태 관리 accessToken 기반 로그인 상태 유지 및 만료 처리
필터 상태 관리 요청 목록 필터링 상태 관리 및 Pagination 연동

2. API 계층 설계

역량 구체적 구현
도메인별 모듈화 면장/농부/부관리자/요청/지역/섹션/나무 등 도메인별 API 분리
인터셉터 활용 Axios 인터셉터로 토큰 주입 및 401 에러 시 자동 로그아웃 처리
Proxy 설정 Vercel rewrite 설정으로 CORS 문제 해결
에러 처리 react-toastify로 API 실패 시 사용자 알림 통합

3. 컴포넌트 설계

역량 구체적 구현
폼 컴포넌트 Input, Textarea, Select 등 React Hook Form 연동 공통 컴포넌트
테이블 컴포넌트 loading, pagination, style override 지원하는 Table 컴포넌트
Provider 패턴 Modal Context로 전역 다이얼로그 시스템 구현
레이아웃 컴포넌트 GNB + LNB + Outlet 조합으로 일관된 페이지 구조

4. 외부 서비스 연동

역량 구체적 구현
Google Maps 연동 미얀마 지역 지도 표시 및 좌표 선택 기능 구현
다국어 시스템 한국어/라오스어 다국어 지원 기능 구현
파일 업로드 이미지/PDF 파일 업로드 및 미리보기 컴포넌트 구현
알림 시스템 react-toastify로 성공/실패 알림 UI 통합

5. 인증/보안 구현

역량 구체적 구현
토큰 관리 accessToken 기반 JWT 인증 처리
자동 토큰 주입 Axios 인터셉터로 모든 요청에 Authorization 헤더 추가
세션 만료 처리 토큰 만료 시 자동 로그아웃 + 로그인 페이지 리다이렉트
역할 기반 UI ADMIN/부관리자 권한에 따른 LNB 메뉴 및 버튼 분기 처리

6. 프로젝트 구조 설계

역량 구체적 구현
폴더 구조 pages/components/api/types 등 관심사별 폴더 분리
라우터 설계 React Router DOM 기반 중첩 라우팅 구조 설계
타입 시스템 TypeScript interface/type으로 API 응답 및 Props 타입 정의
코드 품질 ESLint + Prettier + Husky로 commit 시 자동 코드 검사

7. 배포/인프라

역량 구체적 구현
Vercel 배포 vercel.json 설정 및 환경변수 관리
Proxy 설정 백엔드 API 요청을 위한 rewrite 규칙 설정
CI/CD 자동화 GitHub Actions로 fork된 레포 자동 push 워크플로우 구현
빌드 최적화 빌드 조건 및 환경변수 분기 처리