이 프로젝트는 퀴즈 오픈 API를 활용하여 개발한 애플리케이션입니다. 사용자는 랜딩 페이지에서 언어 선택, 카테고리 설정, 난이도 선택 및 문제 수 설정을 통해 퀴즈를 진행할 수 있습니다.
-
사용자는 랜딩 페이지에서 상단의
en또는ko버튼을 클릭하여 언어를 선택할 수 있다 -
사용자는 카테고리, 난이도 및 문제 수를 설정한 후 "퀴즈 풀기" 버튼을 클릭하여 퀴즈 페이지로 이동할 수 있다.
-
퀴즈 페이지에서 사용자는 문항에 대한 답안을 4개의 보기 중에서 선택할 수 있다.
-
"정답 확인" 버튼을 누르면 정답 여부를 확인할 수 있다.
-
정답 여부를 확인한 후, 사용자는 "다시 풀기" 버튼을 통해 같은 문제를 다시 풀거나, "다음 문제" 버튼을 클릭하여 다음 문항으로 이동할 수 있다.
-
모든 문제를 풀면 "결과 보기" 버튼을 클릭하여 결과 페이지로 이동할 수 있다.
-
결과 페이지에서는 다음 정보를 확인할 수 있다.
-
퀴즈를 완료하는 데 걸린 시간
-
정답 개수
-
오답 개수
-
파이 차트를 통한 정오답 비율 표시
-
-
이슈: next js에서 i18n 라이브러리를 사용하려고 시도했는데 "Text content does not match server-rendered HTML" 오류가 발생했습니다.
-
내용: 이 문제에 대한 해결 방법을 찾기 위해 Next.js Discussion에 댓글을 남겼습니다. 동일한 문제를 겪고 있는 다른 개발자들에게 도움을 제공하고 해결 방법을 공유하였습니다.
-
내용: nivo 라이브러리에서 Pie Chart의 gradients 속성을 적용하기 위해 오픈소스를 분석하던 중, 해당 라이브러리에 test 코드가 작성되지 않은 것을 발견하였습니다. 이를 개선하기 위해 nivo 라이브러리 GitHub에 pull request를 제출하여 test 코드를 작성하고 라이브러리에 기여하였습니다.
- Next.Js
- Stitches CSS
- Zustand
- nivo
- i18n