| 역량 | 구체적 구현 |
|---|---|
| 서버/클라이언트 상태 분리 | React Query(서버 상태) + MobX(클라이언트 전역 상태) + React Hook Form(폼 상태) 3계층 분리 |
| 무한 쿼리 설계 | useInfiniteQuery + getNextPageParam으로 칸반보드 페이지네이션 구현 |
| Suspense 쿼리 활용 | useSuspenseQuery로 필터 데이터 로딩 시 Suspense 경계 처리 |
| 캐시 무효화 전략 | QUERY_KEYS 중앙 관리, JSON.stringify 기반 파라미터 직렬화로 정확한 캐시 키 생성 |
| MobX + Context 패턴 | VOC 유형 관리에서 편집 모드 상태 + 변경 감지 로직 캡슐화 |
| 역량 | 구체적 구현 |
|---|---|
| 칸반보드 뷰 | VOC 상태코드별 그룹화 + 카드 컴포넌트 + 무한 스크롤 통합 |
| 드래그 앤 드롭 | react-dnd로 VOC 유형 순서 변경, DOM Rect 기반 1/4 임계값 판정으로 정밀한 위치 계산 |
| 다중 정렬 테이블 | 접수일/마감일 독립 정렬, 3단계 상태 전환(미정렬→ASC→DESC) 로직 구현 |
| 복합 필터 시스템 | FilterDrawer + React Hook Form 연동, 기간/부서/유형/채널 등 다중 조건 조합 |
| 트리 구조 UI | MUI TreeView로 VOC 카테고리 계층 구조 표현, 선택 상태 + 원본 값 동시 관리 |
| 역량 | 구체적 구현 |
|---|---|
| 통계 차트 구현 | recharts 기반 14개 통계 지표 시각화 (처리 현황, 유형별, 부서별, 월별 분석) |
| 엑셀 다운로드 (조회 데이터) | XLSX table_to_book으로 현재 테이블 HTML 직접 변환 |
| 엑셀 다운로드 (전체 데이터) | React 18 createRoot로 JSX 동적 렌더링 후 XLSX 변환, 페이지네이션 우회 |
| 복합 헤더 테이블 | StatisticsTable Compound Component로 2~3행 복합 헤더 + Tooltip 지원 |
| 역량 | 구체적 구현 |
|---|---|
| Compound Component 패턴 | StatisticsTable, RoundTable, Modal 등 조합 가능한 컴포넌트 구조 설계 |
| 커스텀 훅 추상화 | useFilterDrawer(필터 상태), useIntersection(무한 스크롤), useModal(모달 제어) |
| 에디터 공통화 | react-quill 기반 EditorViewer 분리, FAQ 이미지 업로드 조건부 비활성화 |
| 타입 안정성 | TypeScript 타입 정의, 도메인별 Request/Response 타입 체계화 |
| 역량 | 구체적 구현 |
|---|---|
| 무한 스크롤 | Intersection Observer API로 대용량 VOC 리스트 점진적 로딩 |
| 조건부 쿼리 실행 | enabled 옵션으로 필터 준비 전 불필요한 API 호출 방지 |
| 변경 감지 최적화 | MobX @observable + @action으로 필요한 컴포넌트만 리렌더링 |
| 에러 바운더리 처리 | React Query select에서 CustomError throw, Fallback UI 표시 |
| 역량 | 구체적 구현 |
|---|---|
| React Hook Form 연동 | 통계 필터, VOC 등록/수정 폼에 적용 |
| 날짜 포맷 변환 | Date 객체 → YYYY-MM-DD ``HH:mm:ss 서버 형식 자동 변환 |
| AutoComplete 검색 | 부서/배정자별 다른 검색 로직, 디바운싱 처리 |
| 권한 기반 UI 제어 | hasAddManagerAuth 등 권한 플래그로 버튼/기능 조건부 렌더링 |