| 역량 | 구체적 구현 |
|---|---|
| Redux-Saga 설계 | 5개 Saga 모듈로 검사 시작/완료, 결과 조회 등 비동기 흐름 관리 |
| Generator 활용 | call, put, takeLatest 등 Effect로 직관적인 비동기 코드 작성 |
| 에러 핸들링 | try-catch 패턴으로 API 실패 시 명확한 상태 업데이트 |
| 액션 상수 관리 | REQUEST/SUCCESS/FAILURE 패턴으로 상태 추적 용이 |
| 역량 | 구체적 구현 |
|---|---|
| 다중 차트 라이브러리 | Chart.js + Recharts 병행 사용으로 각 차트 유형에 최적화 |
| 커스텀 렌더링 | SVG 기반 헥사곤 아이콘을 레이더 차트 축 라벨로 적용 |
| 애니메이션 설정 | easing, duration 설정으로 부드러운 차트 전환 |
| 반응형 차트 | responsive, maintainAspectRatio 설정으로 다양한 화면 대응 |
| 역량 | 구체적 구현 |
|---|---|
| 복합 폼 구현 | 이름, 생년월일, 학교(자동완성), 학년/반/번호, 성별 등 다양한 입력 타입 |
| 유효성 검사 | 필수 입력, 숫자 검증, 개인정보 동의 체크 등 |
| 학교 자동완성 | MUI Autocomplete로 학교 목록 검색 |
| 검사 자동 스크롤 | 답변 선택 시 다음 문항으로 smooth 스크롤 |
| 역량 | 구체적 구현 |
|---|---|
| localStorage 활용 | 검사 진행 상태 브라우저 저장으로 이어하기 지원 |
| 상태 동기화 | Redux 상태 변경 시 localStorage 자동 업데이트 |
| 초기 로드 복원 | 페이지 로드 시 localStorage에서 상태 복원 |
| 역량 | 구체적 구현 |
|---|---|
| 재사용 컴포넌트 | CustomExamGroup, ModalAlert, Loading 등 15개+ 공용 컴포넌트 |
| 컨테이너-프레젠테이션 | ResultContainer(로직) - LotteResult(UI) 분리 |
| 조건부 렌더링 | 검사 유형, 답변 타입(단일/다중)별 컴포넌트 분기 |
| 코드 스플리팅 | React.lazy + Suspense로 페이지별 동적 로딩 |