[NDD-270] 문제집 세부 정보페이지 개발하기 (4h/5h)

[Yoon-Hae-Min]

Why

api가 많아지다보니 슬슬 햇갈리기 시작하네요 ㅠㅠ querykey중복 이슈떄문에 30분동안 헤매고 있었습니다. 생각보다 얽힌게 많은것 같아요 주말에 풀어보도록 하죠

How

문제집 세부정보 페이지를 완성하였습니다. 아직 연결하지 못한 부분 => 문제집에 추가가 되고 난 이후에 유저를 어디로 보내줘야할지에 대한 내용은 성인님 페이지가 완성되고 연결하는것이 좋을것 같아요 아직 PATH가 없어서 못하더라고요

포인트1

const { workbookId } = useLoaderData() as { workbookId: number };
코드 중에 다음과 같은 코드가 있는데 이는 path의 workbookId를 추출해 내는 코드입니다. 제가 지금 사용하는 페이지의 경로는 다음과 같은데
interview/workbook/:workbookId 이중에서 loader단에서 workbookId를 검증하고 맞는 타입이라면 위의 코드처럼 사용해 페이지 내부에서 workbookId를 사용할 수 있습니다.

포인트2

  const createNewWorkbook = async () => {
    const result = await newWorkbookMutate({
      title: `${workbookData.title} 복사본`,
      content: workbookData.content,
      categoryId: workbookData.categoryId,
    });

    await newQuestionCopyMutate({
      workbookId: result.workbookId,
      questionIds: selectedQuestionIds,
    });
  };

기존의 mutate 방법으로 사용하니 onSuccess 옵션을 계속 사용해야 하고 그러다 보니 callback hell과 같은 상황이 펼쳐 졌습니다. 그래서 이전 PR에서 사용했던 mutateAsync 방법을 사용해서 직접 async/awiat으로 변경하였습니다

Result

[milk717]

수고하셨습니다~ 새 기획에서 해민님 부분이 90%정도 마무리되었군요!!

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	c7d569f
Status:	✅  Deploy successful!
Preview URL:	https://003d01bb.gomterview.pages.dev
Branch Preview URL:	https://feature-ndd-270.gomterview.pages.dev

View logs

[adultlee]

[p-5] 여기까지 들어온 이상 이 값이 없을리는 없겠죠? 로더를 거치니...

[Yoon-Hae-Min]

넵넵 타입때문에 작성했네요 ㅎㅎ