- 서비스가 배포된 주소는 다음과 같습니다.
http://elice-kdt-ai-track-vm-racer-19.koreacentral.cloudapp.azure.com/
- 혹은 로컬에서 git clone [주소]을 한 다음 주소로 이동,
yarn
yarn install을 한 후
yarn start를 통해 웹서비스를 실행할 수 있습니다.
웹 서비스에서 보여지는 순서대로 기능을 안내합니다.
검사 소개 페이지
맨 처음 페이지에서는 다양한 검사 소개를 볼 수 있습니다.
- 커리어넷에서 제공하는 검사들 + 직업 가치관 검사에 대한 간략한 소개 페이지
- 소개를 누르면 해당 검사로 이동 가능
- 실제로 구현한 검사는 '직업가치관검사'
유저 설정
- 이름과 성별을 입력하는 폼
- 이름 혹은 성별을 입력하지 않았을 경우 에러 출력
- 이름은 영어, 혹은 올바른 한글 이름만 허용. 아닐 시 에러 출력
- 정보를 제대로 입력하지 않으면 검사 시작 비활성화
검사 예시 페이지
- 검사를 시작하기 전 앞으로의 진행 방식에 대해서 설명하는 페이지를 구현
- 검사 시작 버튼 구현 및 문항 미입력시 비활성화 기능
- 진행 표시줄(예시이므로 진행상황은 기록되지 않음)
검사 진행 페이지
- 페이지당 5개 문항
- 문항 미입력시 다음 버튼 비활성화
- 이전 페이지에서 선택된 값 유지
- Pagination 기능
- 문항 진행 정도에 따른 진행 표시줄 변화
- 검사의 문항 위에 커서를 올리면 상세설명을 표시
검사 완료 페이지
- 검사 완료 안내 페이지
검사 결과 페이지
- 유저의 기본 정보 표시
- 직업 가치관 결과에 대하여 항목 별로 수치를 표기
- 가치관과 관련이 높은 직업을 결과에 따라 분류하여 표기
- 테이블의 제목 부분을 클릭하면 직업별 연봉에 따라 생성된 word cloud를 modal의 형태로 렌더링
- 직업 이름을 선택하면 해당 직업에 대한 관련학과, 유사직업, 핵심 요구 능력 등을 표시
- 정보가 로딩되는 동안 loading shimmer을 렌더링
- 관련학과의 이름을 클릭하면 해당 학과에 대한 세부정보로 이동 가능
- 이외의 세부사항에 대해서 볼 수 있는 링크
- 채용공고 버튼을 누르면 관련 채용공고가 있는 페이지로 이동 가능
- 카카오톡 로고 모양의 버튼을 누르면 해당 검사결과 페이지를 카카오톡으로 공유 가능
- 다시 검사하기를 누르면 모든 정보가 초기화되고, 맨 처음 페이지로 이동합니다.
앨리스(https://kdt.lms.elice.io/) AI 기획 개발 트랙 프로젝트