OBJECTIVITY TEST APP #3

전체적으로 크게 레이아웃과 기능구현을 마치고 세부적으로 들어가기 전에 일단 TODO를 적어 정리를 하고 진행하였다. 확실히 글로 정리해서 리스트업하니까 무엇을 먼저 하고 다음에는 무엇을 해야하는지를 명확히 볼 수 있었다. 이번 개발에서는 아래와 같이 작성을 하고 완료되면 옆에 ok를 입력해주었다. 입력할 때 어찌나 기분이 좋던지👍

모든 TODO를 완료하고 테스트를 진행하니 버그들이 보이기 시작했다.
이 버그 또한 TODO로 작성하였다.

---

✅ 이전, 다음 페이지 이동

  const [step, setStep] = useState(0); // 페이지의 상태를 만들어줌

* 엄밀히 말하자면 페이지는 아니고 다음 화면이 나타나는 것인데, 편의상 페이지라고 서술하였다.

첫 화면에서는 테스트 시작 버튼을 눌러주면 다음 페이지로 넘어가야 하고, 테스트 시작부터는 테스트 문항을 다 체크하지 않는다면 다 체크하고 넘어가야 한다는 경고창을 띄어줘야만 했다. 모든 문항 체크가 끝나면 점수를 계산하여 결과 페이지로 이동하도록 구현하였다.(점수는 결과페이지 url의 파라미터로 들어가도록 하였다)

 const handleStart = () => { // 테스트 시작 버튼을 클릭하면 다음 페이지 보여주기
    setStep(step + 1);
  };

const handleStepPlus = (page) => {
    // 1페이지 기준(2페이지)
    // 한 페이지의 문항은 3문항
    // checkArr의 index가 0, 1, 2(3, 4, 5)만 빼와서 배열을 만들고
    // slice(0,3) slice(3,6) slice(6,9) slice(9, 12)
    // 그 배열에 filter 해서 각 요소가 1인 것들만 골라서 배열을 만들고
    // 그 배열의 length가 3이면 다음으로 넘기고
    const tempArr = checkArr.slice(page * 3 - 3, page * 3);
    const result = tempArr.filter((e) => 1 === e).length;

    if (result === tempArr.length) { // 문항이 다 체크되야지만 다음 페이지 이동
      setStep(step + 1);
    } else { // 아니면 경고 메세지 출력
      handleOpen();
      setModalTitle('알림');
      setModalContent('모든 문항을 체크해 주세요.');
    }
  };
  const handleStepMinus = () => { // 이전 페이지 이동
    setStep(step - 1);
  };
  const handleSubmit = (page) => { // 결과 출력 버튼
    const tempArr = checkArr.slice(page * 3 - 3, page * 3);
    const result = tempArr.filter((e) => 1 === e).length;
    // 0-20 : 0번 페이지
    // 21-40 : 1번 페이지
    // 41-60 : 2번 페이지
    // 61-80 : 3번 페이지
    // 81-100 : 4번 페이지
    // (맞춘갯수 / 11) * 100 => 총점
    let resultScore = Math.round((correctAmount / 11) * 100);

    if (result === tempArr.length) { // 모든 문항이 체크되었다면
      navigate(`/result/${resultScore}`); // 결과 페이지로 이동(파라미터는 점수가 됨)
    } else { // 아니라면 경고 메세지 출력
      handleOpen();
      setModalTitle('알림');
      setModalContent('모든 문항을 체크해 주세요.');
    }
  };