[Next.js] 시네필 테스트 - 페이지 타입 설정

시네필 테스트에는 크게 4가지 타입의 페이지가 있다. 먼저 인덱스 페이지에서는 사용자의 닉네임을 입력받을 수 있고, 하단 버튼을 누르면 테스트 페이지로 이동한다. 테스트 페이지에는 테스트를 위한 문제들을 순서대로 보여준다. 마지막 문제인 25번째 문제에서 하단 버튼을 누르면 결과 페이지로 이동한다. 결과 페이지의 하단에는 참가자의 테스트 결과를 포함해 트위터/카카오톡 공유, 재도전, 해설지 버튼이 있다. 해설지 페이지에는 모든 문제의 정답과 해설을 제공한다.

모든 페이지는 비슷한 레이아웃을 공유하고 있으면서도 페이지 타입에 따라 서로 다른 콘텐츠와 기능을 가지고 있다. 이를 효율적으로 반영하기 위해 상태 변수를 활용하는 방식을 선택했다. pageType이라는 상태 변수는 하단 버튼(handleButton)을 누를 때마다 조건문에 의해 유지되거나 변경되며, 현재 pageType(index, test, result, answer)에 맞는 화면을 표시해준다.

export default function Page() {
  const [pageType, setPageType] = useState<"index" | "test" | "result" | "answer">("index");
  const [testPage, setTestPage] = useState<number>(1);
  const testPageMax = data.length;
  // ...

  const handleButton = () => {
    switch (pageType) {
      case "index": // 테스트 시작
        setPageType("test");
        break;
      case "test": // 다음 문제
        setTestPage(page => page + 1);
        setAnswer("");
        break;
      default: // 다시 도전하기
        setTestPage(1);
        setScore(0);
        setPageType("index");
    }

    // 결과 확인하기
    if (testPage === testPageMax) {
      // ...
      setPageType("result");
    }
  };

  // ...

  return (
    <div className={styles["container"]}>
      <div className={styles["content-container"]}>
        <div className={styles["title"]}>시네필 테스트</div>
        {pageType === "test" ? (
          <div className={styles["progress-container"]}>
            // ...
          </div>
        ) : (
          ""
        )}
        <div className={styles["content"]}>
          {pageType === "index" ? (
            <div className={styles["index-container"]}>
              <div className={styles["index-title"]}>닉네임을 알려주세요. 🥰 </div>
              // ...
            </div>
          ) : pageType === "test" ? (
            <Question page={testPage} answer={answer} setAnswer={setAnswer} />
          ) : pageType === "result" ? (
            <div className={styles["result-container"]}>
              <div className={styles["result-text"]}>
                {userName} 님은 {totalCount}명 중 {rank}등!
              </div>
              // ...
            </div>
          ) : (
            <div className={styles["answer-container"]}>
              <div className={styles["index-title"]}>채점 결과 🧐</div>
              <Answer answerArray={answerArray} />
            </div>
          )}
        </div>
        {/* 버튼 */}
        <div style={{ paddingBottom: "30px" }}>
          {pageType === "answer" ? (
            // ...
          ) : pageType === "result" ? (
            // ...
          ) : (
            ""
          )}
          <div className={styles["button"]} onClick={handleButton}>
            {pageType === "index"
              ? "테스트 시작"
              : pageType === "test" && testPage === testPageMax
              ? "결과 확인하기"
              : pageType === "test"
              ? "다음 문제"
              : "다시 도전하기"}
          </div>
        </div>
      </div>
      {/* ... */}
    </div>
  );
}