회사DH Wide
방송통신고등학교 심리검사 3종
학생들의 심리 상태를 진단하기 위한 심리 검사 시스템으로, 검사 완료 후 결과를 즉시 확인할 수 있습니다.
기간
2022.04 ~ 2022.05
역할
기획, 디자인, 프론트엔드 개발
팀 규모
2
기술 스택
ReactReduxRedux-SagaChart.jsRechartsMUISCSS
프로젝트 상세 소개
방송통신고등학교 학생들을 위한 인성·진로 온라인검사 시스템입니다. 학생들이 개인정보를 입력하고, 심리검사를 진행하며, 검사 결과(진로 유형, 진로발달 프로파일 등)를 시각화된 형태로 확인할 수 있습니다.
주요 기능
- 심리검사 문항 페이지네이션 (10문항씩)
- 단일 선택 / 다중 선택 문항 지원
- 검사 진행 상태 localStorage 저장 (이어하기)
- Holland 유형 레이더 차트, 바 차트 시각화
- 검사 결과 PDF 다운로드
담당 업무
전체
- •전체 프론트엔드 설계 및 구현 (100%)
- •서비스 기획 및 사용자 플로우 설계 (100%)
- •UI/UX 디자인 (100%)
- •Redux + Redux-Saga 상태 관리 아키텍처 설계
심리검사 시스템
- •검사 문항 페이지네이션 (10문항씩 / 파트별 진행)
- •단일 선택 / 다중 선택 답변 유형 컴포넌트 구현
- •자동 스크롤 UX (답변 선택 시 다음 문항으로 이동)
- •검사 진행 상태 localStorage 저장 (이어하기 기능)
- •Redux-Saga 기반 검사 시작/완료 API 비동기 처리
검사 결과 시각화
- •Chart.js + Recharts 이중 차트 라이브러리 활용
- •Holland 유형(R/I/A/S/E/C) 레이더 차트 구현
- •세부 유형별 바 차트 (흥미/역량/직업선호)
- •진로발달 프로파일 수평 바 차트
- •SVG 커스텀 헥사곤 아이콘 축 라벨 렌더링
- •Intersection Observer 기반 스크롤 애니메이션
개인정보 입력 시스템
- •MUI 기반 입력 폼 UI 구현 (이름, 생년월일, 학교, 학년/반/번호, 성별)
- •학교명 Autocomplete 자동완성 기능
- •개인정보 수집 동의 UI 및 Yup 기반 유효성 검사
관리자 시스템
- •관리자 로그인 인증
- •검사 발급 현황 조회 페이지
- •PDF 결과지 조회 기능
재사용 컴포넌트 설계
- •15개+ 공용 컴포넌트 개발 (CustomExamGroup, ModalAlert, Loading 등)
- •컨테이너-프레젠테이션 패턴 적용
- •React.lazy + Suspense 코드 스플리팅
프로젝트 구조
src/