회사Tmax A&C
한국농어촌공사 민원관리 시스템
한국농어촌공사의 민원을 효율적으로 관리하고 시각적으로 파악할 수 있는 통합 플랫폼을 제공합니다.
기간
2023.10 ~ 2024.09
역할
프론트엔드 개발
팀 규모
18
기술 스택
ReactTypeScriptReact QueryMobXReact Hook FormReact DnDStorybookViteHusky
프로젝트 상세 소개
한국농어촌공사의 민원(VOC)을 체계적으로 관리하기 위한 시스템입니다. 칸반보드 형태의 직관적인 UI와 다양한 필터링, 통계 기능을 제공하여 민원 처리 현황을 실시간으로 파악할 수 있습니다.
주요 기능
- VOC 조회 칸반보드 및 테이블 형식 FE 구현
- VOC 설정 화면 FE 구현
- 통계 화면 FE 구현
- Drag&Drop 보드 성능/접근성 고려
- 무한 스크롤 구현
담당 업무
VOC 조회 시스템
- •칸반보드 뷰 구현: VOC 상태코드별 그룹화 + Intersection Observer 기반 무한 스크롤
- •테이블 뷰 구현: 다중 필드 정렬 로직 (접수일/마감일 독립 정렬, 3단계 상태 전환)
- •React Query 무한 쿼리: useInfiniteQuery + getNextPageParam으로 페이지네이션 최적화
- •MobX 연동: vocProcessingStore와 observer 패턴으로 필터 조건 실시간 동기화
VOC 설정 화면
- •VOC 유형 관리: CRUD + 드래그 앤 드롭 순서 변경 (react-dnd)
- •DnD 최적화: DOM Rect 기반 마우스 위치 판정, 1/4 임계값 이상 드래그 시에만 위치 변경
- •부서별 배정자 관리: AutoComplete 검색 + 권한 기반 접근 제어
- •MobX + Context 패턴: 편집 모드 상태 관리, 변경된 항목만 추출하여 API 요청 최적화
통계 화면
- •VOC 통계 대시보드: 처리 현황, 유형별/부서별/월별 분석 등 14개 통계 지표 UI 구현
- •recharts 기반 데이터 시각화: 차트 컴포넌트 연동 및 반응형 처리
- •엑셀 내보내기 기능: XLSX 라이브러리 + React 18 createRoot 동적 렌더링
- •복합 필터 시스템: FilterDrawer + React Hook Form 연동 (기간/부서/유형/채널 등 다중 조건)
공통 컴포넌트
- •FilterDrawer 컴포넌트: useFilterDrawer 훅으로 필터 상태 추상화
- •StatisticsTable: Compound Component 패턴, 복합 헤더 지원
- •useIntersection 훅: Intersection Observer API 래핑, 무한 스크롤 재사용
- •EditorViewer 공통화: react-quill 기반 에디터/뷰어 분리
프로젝트 구조
src/