| 역량 | 구체적 구현 |
|---|---|
| next-redux-wrapper 통합 | Next.js SSR 환경에서 Redux + Saga 상태 관리 설정 |
| 환경별 빌드 설정 | env-cmd로 dev/prod 환경 분리, 환경변수 관리 |
| 파일 기반 라우팅 | pages 디렉토리 구조로 8개 페이지 라우팅 설계 |
| 커스텀 미들웨어 | 개발 환경 전용 로거 미들웨어 구현 |
| 역량 | 구체적 구현 |
|---|---|
| Redux-Saga 설계 | 7개 Saga 모듈로 예약/조회/관리자 비동기 처리 |
| Immer 불변성 관리 | produce 함수로 중첩 객체 상태 안전하게 업데이트 |
| 로딩/에러 상태 | Loading/Done/Failure 패턴으로 UI 상태 세분화 |
| 액션 상수 분리 | constants 디렉토리로 액션 타입 중앙 관리 |
| 역량 | 구체적 구현 |
|---|---|
| MUI sx prop 반응형 | 데스크톱(StaticDatePicker) / 모바일(DatePicker) 분기 렌더링 |
| classnames 조건부 스타일 | 선택 상태, 비활성화 상태에 따른 동적 클래스 적용 |
| Grid 시스템 | MUI Grid로 반응형 레이아웃 구성 |
| 역량 | 구체적 구현 |
|---|---|
| 다중 필터 조합 | 상태 필터(완료/미완료) + 검색 필터(예약자/피검자/검사명/날짜) |
| MUI Table 정렬 | stableSort, getComparator 함수로 컬럼별 정렬 |
| 커스텀 페이지네이션 | pageSize, curPage 상태 관리 + API 연동 |
| Collapse 상세보기 | 행 클릭 시 상세 정보 펼치기 애니메이션 |
| 역량 | 구체적 구현 |
|---|---|
| 날짜 제한 로직 | 주말/공휴일 비활성화, 30일 이내 예약만 허용 |
| 시간 실시간 필터링 | 이미 예약된 시간 비활성화 표시 |
| 예약 플로우 | 접속번호 → 날짜 → 시간 → 검사 선택 → 완료 단계별 진행 |