ryong9rrr / mini-quiz-app Goto Github PK

현재 상태로직 구현이 안되있어서 퀴즈 결과 페이지와 오답노트 페이지에 진입하면 퀴즈 풀기 페이지로 유도하고 있다.
상태로직 구현을 완료하고 테스트 코드를 작성한다.

렌더링에 필요한 값만 받아서 렌더링할 수 있는 형태로 구현한다. 버튼을 클릭해서 일어나는 동작 등 사용자 액션에 관한 부분은 상위 컴포넌트(퀴즈 페이지)에서 처리한다.
이렇게하면 렌더링에 대한 테스트를 따로 작성하는데 용이할것이다.

UX와 테스팅에 용이하도록 페이지마다 page title을 보여주는 기능을 추가한다.

• react-helmet

퀴즈를 풀다가 새로고침 등을 하는 경우, 상태를 유지하기 위한 storage 외부 의존성을 주입한다. 상태 변경이 있다면 외부 스토리지를 업데이트한다.

• 외부에서 유지되고 있는 상태가 있다면 그 상태를 그대로 가져다 쓴다.
• 상태를 변경시킬 때마다 외부 상태도 같이 업데이트 한다.
• 구현체(implement)를 어떻게 정의할지 생각해보자.

1. 퀴즈를 모두 풀지 않았는데 이 페이지에 접근한 것은 사용자의 의도적인 접근이다.
2. 퀴즈를 모두 풀지 않았다면 "퀴즈 풀기 페이지"로 이동을 유도한다.
3. 이후 퀴즈 풀기 페이지에 접근하게 되면 풀던 문제가 있다면 풀던 문제를 이어서, 그렇지 않다면 새 퀴즈가 시작될 것이다.
4. 아직 퀴즈 상태를 구현하지 않았으므로 접근을 불가능하게 해놓고 이후 기능을 추가하면서 고친다.

• 라우팅 테스트
• 퀴즈를 다 풀면 오답노트페이지, 퀴즈 결과페이지를 볼 수 있다.
• 퀴즈페이지에서 퀴즈를 선택해야 버튼이 보이는 것
• 퀴즈페이지에서 퀴즈를 선택하면 정답을 맞췄는지 아닌지 피드백이 보이는 것
• 퀴즈페이지에서 퀴즈를 선택하고 다음 버튼을 누르면 다음 퀴즈가 보이는 것
• 마지막 퀴즈라면 결과보기 버튼이 보이는 것

생각나면 추가하기

• redux를 사용해서 퀴즈 상태와 주요 비즈니스 로직을 구현한다.
• 상태에 직접 접근하지 않는 메서드들은 어떻게 구현할까? -> hook으로 구현

퀴즈 목록 10개를 랜덤 생성하는 API 모듈을 구현한다.

상태를 변경하는 로직인 리듀서에 대한 단위 테스트를 작성한다.

router와 기본 페이지 정보를 렌더링하는 로직을 구현한다.

• react-router-dom 설치

퀴즈 도메인에 대한 모든 기능을 제공하는 useQuiz의 기능들을 테스트 한다.

• Button 컴포넌트(이 컴포넌트는 다른 페이지에서도 사용될 가능성이 매우 크다. - atom)
• 퀴즈 스타트를 누르면 상태를 초기화시킨다.

1. 각 페이지에 올바르게 접근하는지 확인한다.
2. 아직 퀴즈 결과 페이지, 오답 노트 페이지에는 접근이 되지 않기 때문에 접근이 되지 않는 것으로 테스트 한다.

• 메인페이지 스타일링
• 퀴즈페이지 스타일링
• 퀴즈 결과 페이지 스타일링
• 오답 노트 페이지 스타일링
• (시간되면) 404 페이지 스타일링