<aside> 📖 간단한 질문에 답하면 내 성격과 닮은 포켓몬과 MBTI 결과를 알려주는 테스트입니다. 상태관리 라이브러리(Zustand)를 사용해보고 싶어서 시작한 프로젝트이며, 사용자가 선택한 답변을 전역에서 기억해야 하는 흐름에 적합하다고 판단해 기획하게 되었습니다.

</aside>

⭐ 사용 기술 및 라이브러리

• React
• TypeScript
• Sass (SCSS)
• Zustand (상태관리)
• React Router Dom

⭐ 주요기능

1. store로 사용자 답변 저장

  const { currentIndex, selectAnswer } = useQuizStore();

• 상태 전역 관리 (currentIndex, answers 배열)
• 사용자가 선택한 답변을 전역에 저장하고, 다음 질문으로 넘어가는 흐름 구현

2. 저장된 답변으로 MBTI 계산

export function calculateMBTI(answers: string[]): string {
  const counts = {
    E: 0,
    I: 0,
    S: 0,
    N: 0,
    T: 0,
    F: 0,
    J: 0,
    P: 0,
  };

  answers.forEach((type) => {
    counts[type as keyof typeof counts]++;
  });

  return [
    counts.E >= counts.I ? "E" : "I",
    counts.S >= counts.N ? "S" : "N",
    counts.T >= counts.F ? "T" : "F",
    counts.J >= counts.P ? "J" : "P",
  ].join("");
}