biyamn/quiz

💻 컴퓨터 상식 문제를 풀 수 있는 퀴즈앱

컴퓨터 상식 퀴즈앱

배포 링크: https://quiz.biyamn.dev

프로젝트 실행 방법

$ npm install
$ npm run dev

퀴즈앱 소개

컴퓨터 상식 퀴즈를 풀 수 있는 퀴즈앱입니다. 결과 페이지에서 본인의 점수와 푸는데 걸린 시간을 확인할 수 있습니다.

기능 소개

퀴즈 시작하기

• 닉네임을 입력하여 퀴즈를 시작할 수 있습니다. 빈 문자열 혹은 공백 입력시 퀴즈를 시작할 수 없습니다.
• 퀴즈 페이지가 로딩될 때 로딩 페이지가 표시됩니다.

닉네임 입력	로딩 화면

문항 선택하기

• 4개 중 1개의 문항을 선택할 수 있으며, 한번 선택하면 수정할 수 없습니다.
• 문항이 선택되면 바로 정답/오답 결과를 알 수 있으며, 다음 문제로 넘어갈 수 있습니다.
• 문항을 선택하지 않고 다음 문제로 넘어가기 버튼을 클릭하면 문항을 선택해달라는 알림창이 나타납니다.

문항 선택후 다음 문제로 이동	문항 미선택시 알림

결과 확인하기

• 결과 페이지에서 닉네임, 점수, 정답 개수, 오답 개수, 문제 푸는데 걸린 시간을 확인할 수 있습니다.
• 다시 풀기 버튼을 클릭하면 닉네임 입력 페이지로 이동합니다.

결과 페이지로 이동	결과 페이지

반응형 레이아웃

데스크탑	모바일

기술 스택

• Frontend
  • HTML5, CSS3
  • TypeScript(JavaScript로 배포 이후 TypeScript로 마이그레이션하였습니다.)
  • React.js
  • Chakra UI
• Backend API
  • https://opentdb.com/api.php?amount=4&category=18&type=multiple

폴더 구조

📦src
 ┣ 📂assets
 ┃ ┗ 📜check.svg
 ┣ 📂pages
 ┃ ┣ 📜Home.tsx
 ┃ ┣ 📜index.ts
 ┃ ┣ 📜Quiz.tsx
 ┃ ┗ 📜Result.tsx
 ┣ 📜App.tsx
 ┗ 📜main.tsx

구현 기능 목록

구현 기능 목록

• 사용자는 닉네임을 입력하고 '퀴즈 풀기' 버튼을 클릭하여 문제 페이지로 넘어간다.
  • 닉네임을 상태로 저장하여 이후 결과 페이지에서 사용한다.
  • '퀴즈 풀기' 버튼을 초기에는 비활성화한다.
  • 입력받은 닉네임이 빈칸 혹은 공백이 아닐 때 '퀴즈 풀기' 버튼을 활성화한다.
• 사용자는 문제를 풀 때 문항을 선택할 수 있다.
  • 4개 중 하나만 선택 가능하게 한다.
• 사용자는 답안 선택 후 다음 문항으로 넘어갈 수 있다.
  • 다음 문항으로 넘어가는 버튼은 답안을 선택했을 때에만 기능한다.
  • 답안을 선택하지 않고 버튼을 누르면 답안을 선택하라는 메시지를 띄운다.
  • 마지막 문항에서는 다음 문항 버튼을 렌더링하지 않는다.
• 답안이 맞았는지 틀렸는지는 문항 선택 후 바로 알 수 있다.
  • 답안 선택 후 별도의 제출 과정 없이 바로 결과를 렌더링한다.
  • 한번 클릭하면 다시 선택할 수 없다.
• 모든 문항을 다 풀면 사용자는 결과 페이지에서 아래의 정보를 알 수 있다.
  • 입력한 닉네임
  • 점수
  • 정답 개수
  • 오답 수
  • 소요 시간
• 반응형 레이아웃을 구현한다
  • 데스크탑
  • 모바일
• TypeScript로 마이그레이션