93jm / e-quiz

간단한 영어 퀴즈 앱

오픈 API를 활용한 간단한 영어 퀴즈 사이트입니다. https://e-quiz-lake.vercel.app/

Stack

React 18, Next 14v, CSS module, Recoil(persist), echarts-for-react, jest, classnames, react-loading-skeleton

Feature

• 사용자는 ‘퀴즈 풀기’ 버튼을 클릭하여 퀴즈 풀기를 선택할 수 있다.
• 사용자는 문항에 대한 답안을 4개 보기 중에 선택할 수 있다.
• 사용자는 답안을 선택하면 다음 문항을 볼 수 있다.
• 답안 선택 후 다음 문항 버튼을 볼 수 있다.
• 답안이 맞았는지 틀렸는지 바로 알 수 있다.
• 다음 문항 버튼을 클릭하여 다음 문항으로 이동할 수 있다.
• 모든 문항을 다 풀면 사용자는 다음과 같은 결과 정보를 얻을 수 있다.
• 퀴즈를 마칠 때까지 소요된 시간
• 정답 개수
• 오답 수
• 정 오답에 대한 비율을 차트로 표기
• 오답 노트 기능

Test

단위 테스트는 퀴즈를 푸는 곳과 결과를 출력하는 곳의 view가 정상적으로 노출이 되는가, 링크를 이동시에 정상적인 경로로 이동되는가를 중점적으로 테스트 범위로 결정 Jest를 사용했으며, mocking 관련 라이브러리들을 함께 사용함

QuizContent Component

• 렌더링시에 콘텐츠 영역이 뜨는가 ?
• 퀴즈 리스트가 있을 경우 퀴즈 질문이 정상적으로 렌더링이 되는가 ?
• 퀴즈 정답을 클릭할때에 문구 스타일 정상적으로 변경이 되는가 ?
• 퀴즈 오답을 클릭할때에 문구 스타일 정상적으로 변경이 되는가 ?
• 퀴즈 마지막 문제를 답했을때에 액티브 버튼의 문구가 Check Score로 변경이 되는가 ?

ResultContent Component

• 렌더링시에 결과 콘텐츠 영역이 정상적으로 뜨는가 ?

ActiveButton Component

• Start 버튼을 클릭 시에 초기화 및 페이지 이동이 정상적으로 이루어지는가 ?