[ Feature/dev 53 ] 워크북 card list 불러오기 mock api 연결 및 테스트

[Happhee]

🔥 Related Issues

https://linear.app/fewletter/issue/DEV-53/메인-페이지-워크북-조회-api-연동

💜 작업 내용

• 워크북 내부 카드 누락 컴포넌트 추가
• 버튼 이벤트 핸들러 커스텀 훅 생성
• 테스트 코드 작성
• 카테고리 필드 -> model 구현

✅ PR Point

useQueries로 구독 상태 +워크북 리스트 조회

• combine 메소드를 사용해서 client 정보로 모델링한뒤, 컴포넌트에 주입하였습니다.

  const workbookCardList = useQueries({
    queries: [
      getWorkbooksWithCategoryQueryOptions({ code }),
      getSubscriptionWorkbooksQueryOptions(),
    ],
    combine: (result) => {
      const [workbookServerList, workbookSubscriptionInfoList] = result;
      if (workbookServerList.data) {
        const workbookCardModel = new WorkbookCardModel({
          initWorkbookSeverList: workbookServerList.data,
          initWorkbookSubscriptionInfoList: workbookSubscriptionInfoList.data,
        });
        return workbookCardModel.workbookCardList({
          workbookCombineList: workbookCardModel.workbookCombineListData,
        });
      }
    },
  });

구독하기 통신 커스텀 훅

• 메인페이지 , 워크북 페이지 총 2군데서 사용하므로 커스텀 훅으로 분리하였습니다.

export default function useSusbscribeWorkbook() {
  const { mutate: subscribeWorkbook } = useMutation(subscribeWorkbookOptions());
  const postSubscribeWorkbook = ({
    workbookId,
    handleSucess,
  }: {
    workbookId: string;
    handleSucess?: () => void;
  }) => {
    try {
      subscribeWorkbook(
        { workbookId },
        {
          onSuccess: () => {
            toast({
              title: SUBSCRIBE_USER_ACTIONS.SUBSCRIBE_SUCCESS,
            });
            if (handleSucess) handleSucess();
          },
          onError: (error) => {
            let errorMessage = SUBSCRIBE_USER_ACTIONS.SUBSCRIBE_FAIL;
            if (error && error.data && error.data.message) {
              errorMessage = error.data.message || errorMessage;
            }
            toast({
              title: errorMessage,
            });
          },
        },
      );
    } catch (error) {
      console.error("catch error", error);

      toast({
        title: SUBSCRIBE_USER_ACTIONS.SUBSCRIBE_FAIL,
      });
    }
  };
  return { postSubscribeWorkbook };
}

category model

• 데이터를 불러오는 곳에서 model를 정의하는게 유연할것같아 category도 제작하였습니다.

import { CategoryClientInfo, CategoryServerInfo } from "@common/types/category";

export class CategoryModel {
  constructor({
    initCategoryServerInfoList,
  }: {
    initCategoryServerInfoList: CategoryServerInfo[];
  }) {
    this.categoryServerInfoList = initCategoryServerInfoList;
  }

  get CategoryClientInfoList(): CategoryClientInfo[] {
    return this.categoryServerInfoList.map(({ code, name }) => ({
      name,
      code,
    }));
  }

  private categoryServerInfoList: CategoryServerInfo[];
}

👀 스크린샷 / GIF / 링크

2024-08-02.7.50.PM.video.speed.mov

[soomin9106]

아직 client info 하고 server info 하고 똑같은 상태인가용?? (둘 다 code, name 이길래용!!)

[Happhee]

넵ㅂ! 추후에 변경될수있어서 모델 만든겁니다!

[Happhee]

일단 서버랑 클라가 같더라도 만드는게 좋다고 생각해요

[soomin9106]

엇 여기 테스트 에러 있네용!!

[Happhee]

테스트 버그수정 했습니다!