jhyooooon / quiz_game

Quiz

홈에서 선택한 옵션을 바탕으로 퀴즈를 풀고, 그에 대한 결과를 받아볼 수 있는 프로젝트

기술스택

• React, Typescript
• React-Query, Jotai
• Styled-components
• chart.js
• Jest, React Testing Library

스크린샷

1. 메인

   

2. 퀴즈

   

3. 결과

   

실행방법

git clone https://github.com/JHYOOOOON/quiz_game.git
npm install
npm start

// 전체 테스트
npm test
// components만 테스트
npm run test:components
// pages만 테스트
npm run test:pages

그 외

• 웹접근성을 고려한 Tab키 조작
  • selectbox 커스텀
  • 화살표 위, 아래키로 옵션 내 포커스 이동 및 enter 키로 옵션 선택 가능
  • esc 키 입력, selectbox 외부 클릭으로 닫힘 처리
• 기능 요구사항 및 컴포넌트 동작 확인을 위한 단위테스트 진행
  • Jest, React-Testing-Library를 이용
  • 렌더링 및 각 컴포넌트 내 중요 기능 위주로 테스트 진행
• useSuspenseQuery와 Suspense를 이용한 loading 처리