로그인, 회원가입 구현을 완료하고 이제 퀴즈 API를 하나씩 연결 해야 합니다.

해당 swagger를 참고하여 get /api/topic 으로 데이터를 받고 로그를 확인했습니다.

기존에 로그인 이후의 api 에 대해서는 항상 bearer {jwt} 를 포함하게 설정해 두었고, 배열로 데이터를 받아올 수 있었습니다.

interface Topic {
  topicId: number;
  topicName: string;
  totalQuizCount: number;
  solvedQuizCount: number;
}

interface TopicResponse {
  topics: Topic[];
}

const { data: quizListData, error } = useQueryApi<TopicResponse>(['topic'], '/topic');

  if (error) {
    return (
      <Container>
        <Header hasPrevPage={true} title="" />
        <QuizListContainer>
          <QuizListTitle>에러가 발생했습니다</QuizListTitle>
        </QuizListContainer>
      </Container>
    );
  }

  return (
    <Container>
      <Header hasPrevPage={true} title="" />
      <QuizListContainer>
        <QuizListImage src={QuizListImg} />
        <QuizListTitle>분야를 선택 해주세요</QuizListTitle>
        <QuizListDescription>
          "경제 기초"를 제외한 분야는 새싹 단계 이상에서 잠금 해제 됩니다!
        </QuizListDescription>
        <QuizListButtonSection>
          {quizListData?.topics?.map((topic) => (
            <TopicButton
              key={topic.topicId}
              title={topic.topicName}
              solvedQuizCount={topic.solvedQuizCount}
              totalQuizCount={topic.totalQuizCount}
              isAble={true}
              onClick={() => handleTopicButtonClick(topic.topicId)}
            />
          ))}
        </QuizListButtonSection>
      </QuizListContainer>
    </Container>
  );
};

인터페이스를 로그에 맞게 설정하고, 다음과 같이 각 토픽 버튼에 연결할 수 있었습니다.

다음과 같이 잘 연결된 모습입니다.

---

이후 작업을 이어가고자 했으나(토픽 선택시 해당 토픽에 대한 문제 리스트 화면)

토픽에 대한 리스트 화면 아이디어가 나중에 생긴 것이고, 처음에는 디자인 파일에도 포함이 안되어있었어서 현재까지 이 페이지에 대해 아예 망각하고 있었음을 알았습니다.

현재 변경된 ui를 반영하는 작업을 진행하고 있던 소현님이 퀴즈 토픽 이후 문제 데이터 리스트 화면을 바로 구현하기로 얘기하고 바로 진행하기 시작하였습니다.