웹 서비스 설치 및 실행

• 서비스가 배포된 주소는 다음과 같습니다.

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 기획 개발 트랙 프로젝트