[MBTI 테스트 사이트 만들기 #4] 테스트 로직 만들기 (feat. 울집 고양이)

 

이전 글 보러 가기 👉 [MBTI 테스트 사이트 만들기 #3] 테스트 질문지 만들기

[MBTI 테스트 사이트 만들기 #4] 테스트 로직 만들기

이전 포스팅에 이어서 미리 질문과 답, 그리고 16가지 결과 페이지? 이미지를 만들었다. 처음 만든 mbti이어서 그런지 질문과 답을 구상하는 부분에서 가장 시간이 오래 걸렸다. ㅠㅠ

간단한 css를 추가한 결과물은 아래와 같다.

질문페이지 / 결과이미지

필요한 페이지는 모두 만들었으니, 이제 답을 선택했을 때 다음 질문으로 넘어가는 로직과, 결괏값을 통해 각 결과 페이지로 들어갈 수 있게 로직을 짜야한다.

Quiz 화면

Quiz 컴포넌트에서 현재 해당하는 테스트의 정보(지금은 고양이 MBTI테스트)를 props로 받는다. props정보는 아래와 같다.

export const datas = [
  //catBTI - 고양이 성격 테스트
  {
    info: {
      mainTitle: "고양이 성격 테스트",
      subTitle: "주인님 행동을 통해 성격을 알아보자!",
      mainUrl: "catBTI",
      scoreType: "typeMBTI",
      mainImage: catBTI_banner,
      fullImage: catBTI_full,
      resultImage: "../../assets/img/catBTI/catBTI_result.jpg",
    },
    questions: [
      {
        question: "집에 손님이 찾아왔다! 고양이의 반응은?",
        answers: [
          {
            type: "E",
            content: "관심을 보이며 다가가거나 근처에서 쳐다본다",
          },
          {
            type: "I",
            content: "경계 태세! 보이지 않는 곳에 숨어버린다",
          },
        ],
      },
      ...생략
      
       results: [
      {
        type: "ESTJ",
        query: "estj",
        img_src: estj,
      },
      
      ...생략
    ],
  },
];

• info: 테스트의 정보가 담긴 데이터
• scoreType: 테스트를 어떤 로직으로 스코어 계산할건지를 구분하기 위한 데이터
• mainImage: 테스트 메인 페이지(여러 테스트가 모여있는 포털사이트?)에서 테스트 썸네일 이미지
• fullImage: 테스트 메인 이미지

메인 이미지를 눌러 테스트를 시작하면 위에 보였던 문제와 함께 테스트가 시작된다. 하나의 답을 선택하면 해당 답이 어떤 type인지 계산하여 다음 문제로 넘어가는 로직을 아래에 설명하였다.

동적으로 생성한 결과 페이지

 {testResultQueryUrl.map((item) => (
    <Route
      path={"/" + item.mainUrl + "/result/" + item.query}
      element={<Result />}
      key={item.mainUrl + "_" + item.query}
      exact
    />
 ))}

• testResultQueryUrl: datas에 있는 query가 들어있는 배열

state 정의

  const [testInfo, setTestInfo] = useState({
    mode: "intro", //intro: 시작하기전 메인, quiz: 진행 중, result: 테스트 끝남
    currentTest,
    answerTypeScore, //type별 스코어
    questionCount: 0,
    loading: false,
  });

• currentTest: 받아온 테스트 정보
• answerTypeScore: 각 mbti요소에 카운팅을 할 수 있게 객체화함
  • {E: 0, I: 0, S: 0, N: 0, T: 0, …}
• questionCount: 질문이 넘어갈 때마다 카운팅하기위함 -> 결과 페이지로 갈 때의 조건으로 쓰임

답을 선택하면 questionCount가 1씩 증가하면서 각 mbti 요소가 1씩 증가한다. 

클릭 이벤트 함수

 const clickAnswer = (answer) => {
    if (testInfo.questionCount >= currentTest.questions.length - 1) {
      const resultType = determinePersonalityType(testInfo.answerTypeScore);

      navigate(`/${currentTest.info.mainUrl}/result/${resultType}`, {
        state: {
          data: currentTest.results.filter(
            (result) => result.type === resultType
          ),
        },
      });
    } else {
      let newScore = (testInfo.answerTypeScore[answer.type] || 0) + 1;
      setTestInfo({
        ...testInfo,
        questionCount: testInfo.questionCount + 1,
        answerTypeScore: {
          ...testInfo.answerTypeScore,
          [answer.type]: newScore,
        },
      });
    }
  };

 

questionCount가 datas의 questions 길이가 되었을 때 결과 페이지로 가는데, resultType을 받아오기 위한 로직함수는 아래와 같다.

 const determinePersonalityType = (data) => {
    // 각 요소의 점수를 비교하여 가장 높은 값을 선택
    const E = data.E > data.I ? "E" : "I";
    const S = data.S > data.N ? "S" : "N";
    const F = data.F > data.T ? "F" : "T";
    const J = data.J > data.P ? "J" : "P";

    // 선택된 값을 조합하여 성격 유형 문자열 생성
    const personalityType = `${E}${S}${F}${J}`;

    return personalityType;
  };

 

 

작업 결과