Merge pull request #137 from YAPP-Github/bugfix/DEV-78

[ Bugfix/DEV-78 ] 로그인 상태에 따른 이벤트 분기 처리 및 테스트 코드 수정

src/api/fewFetch.ts

@@ -93,9 +93,6 @@ const fetInterceptor: Interceptor = {
   onRequest: (config) => {
     const accessToken = getTokenCookie();
 
-    console.log('access Token ', accessToken);
-
-
     if (accessToken) {
       config.headers = {
         ...config.headers,

src/main/components/WorkbookCardList/index.tsx

@@ -1,21 +1,26 @@
 import { CategoryClientInfo } from "@common/types/category";
+import { ENTIRE_CATEGORY } from "@main/constants";
 import { WorkbookCardModel } from "@main/models/WorkbookCardModel";
 import { getSubscriptionWorkbooksQueryOptions } from "@main/remotes/getSubscriptionWorkbooksQueryOptions";
 import { getWorkbooksWithCategoryQueryOptions } from "@main/remotes/getWorkbooksWithCategoryQueryOptions";
+import useIsLogin from "@shared/hooks/useIsLogin";
 import { useQueries } from "@tanstack/react-query";
 import WorkbookCard from "../WorkbookCard";
 import WorkbookCardListSkeleton from "../WorkbookCardListSkeleton";
-import { ENTIRE_CATEGORY } from "@main/constants";
 
 export default function WorkbookCardList({
   code,
 }: Partial<CategoryClientInfo>) {
+  const isLogin = useIsLogin();
   const workbookCardList = useQueries({
     queries: [
       getWorkbooksWithCategoryQueryOptions({
         code: code !== undefined ? code : ENTIRE_CATEGORY,
       }),
-      getSubscriptionWorkbooksQueryOptions(),
+      {
+        ...getSubscriptionWorkbooksQueryOptions(),
+        enabled: isLogin,
+      },
     ],
     combine: (result) => {
       const [workbookServerList, workbookSubscriptionInfoList] = result;
@@ -35,10 +40,9 @@ export default function WorkbookCardList({
 
   return (
     <section className="mr-[18px] flex gap-[8px] overflow-x-auto">
-      {workbookCardList &&
-        workbookCardList.map((data, idx) => (
-          <WorkbookCard key={`work-book-card-${idx}`} {...data} />
-        ))}
+      {workbookCardList.map((data, idx) => (
+        <WorkbookCard key={`work-book-card-${idx}`} {...data} />
+      ))}
     </section>
   );
 }

src/main/components/WorkbookCardsWrapper/workbookcardsWrapper.test.tsx

@@ -1,7 +1,10 @@
+import { ENTIRE_CATEGORY } from "@main/constants";
+import { getSubscriptionWorkbooksQueryOptions } from "@main/remotes/getSubscriptionWorkbooksQueryOptions";
 import { getWorkbookCategoryQueryOptions } from "@main/remotes/getWorkbookCategoryQueryOptions";
+import { getWorkbooksWithCategoryQueryOptions } from "@main/remotes/getWorkbooksWithCategoryQueryOptions";
 import QueryClientProviders from "@shared/components/queryClientProvider";
 import { createQueryProviderWrapper } from "@shared/constants/createQueryProvider";
-import { useQuery } from "@tanstack/react-query";
+import { useQueries, useQuery } from "@tanstack/react-query";
 import { render, renderHook, screen, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { beforeEach, describe, expect, it, vi } from "vitest";
@@ -19,7 +22,6 @@ describe("메인페이지 내 카테고리별 워크북 카드 리스트 테스
   beforeEach(async () => {
     vi.useFakeTimers({ shouldAdvanceTime: true });
 
-    renderWithQuery();
     vi.mock("next/navigation", async () => {
       const actual =
         await vi.importActual<typeof import("next/navigation")>(
@@ -38,39 +40,70 @@ describe("메인페이지 내 카테고리별 워크북 카드 리스트 테스
       >("@main/hooks/useCategory");
       return {
         ...actual,
+        category: { code: -1, name: "전체" },
       };
     });
-    const { result } = renderHook(
-      () => useQuery({ ...getWorkbookCategoryQueryOptions() }),
-      { wrapper: createQueryProviderWrapper() },
-    );
 
-    await waitFor(() => expect(result.current.isSuccess).toBe(true));
-  });
-  it("처음 진입시 전체 카테고리 선택되어있고, 전체 워크북 리스트 불러와서 각 버튼 이벤트 테스트", async () => {
+    renderWithQuery();
+
     const { result } = renderHook(
       () => useQuery({ ...getWorkbookCategoryQueryOptions() }),
       { wrapper: createQueryProviderWrapper() },
     );
 
     await waitFor(() => expect(result.current.isSuccess).toBe(true));
   });
+
   it("카테로리 바꾸기 테스트", async () => {
-    const allTab = screen.getByRole("tab", { name: "전체" });
-    expect(allTab.childNodes.length).toBe(2);
+    await waitFor(async () => {
+      const allTab = screen.getByRole("tab", { name: "전체" });
+      expect(allTab.childNodes.length).toBe(2);
 
-    const economyTab = screen.getByRole("tab", { name: "경제" });
-    await userEvent.click(economyTab);
+      const economyTab = screen.getByRole("tab", { name: "경제" });
+      await userEvent.click(economyTab);
 
-    expect(allTab.childNodes.length).toBe(1);
-    expect(economyTab.childNodes.length).toBe(2);
+      expect(allTab.childNodes.length).toBe(1);
+      expect(economyTab.childNodes.length).toBe(2);
+    });
   });
 
-  it("cardtype LEARN 일때, 바텀 버튼 클릭 테스트", async () => {
-    screen.debug();
-    const day1LearnButton = screen.getByText("Day 1 학습하기");
-    await userEvent.click(day1LearnButton);
+  it("로그인 상태이고, cardtype LEARN 일때, 바텀 버튼 클릭 테스트", async () => {
+    vi.mock("@shared/hooks/useIsLogin", async () => {
+      const actual = await vi.importActual<
+        typeof import("@shared/hooks/useIsLogin")
+      >("@shared/hooks/useIsLogin");
+      return {
+        ...actual,
+        isLogin: true,
+      };
+    });
+    const { result: workbookListResult } = renderHook(
+      () =>
+        useQueries({
+          queries: [
+            getWorkbooksWithCategoryQueryOptions({
+              code: ENTIRE_CATEGORY,
+            }),
+            {
+              ...getSubscriptionWorkbooksQueryOptions(),
+              enabled: true,
+            },
+          ],
+        }),
+      { wrapper: createQueryProviderWrapper() },
+    );
+
+    await waitFor(() => {
+      workbookListResult.current.forEach((value) => {
+        expect(value.isSuccess).toBeTruthy();
+      });
+    });
 
-    expect(push).toHaveBeenNthCalledWith(1, "/article/undefined");
+    await waitFor(async () => {
+      const day1LearnButton = screen.getByText("Day 1 학습하기");
+      await userEvent.click(day1LearnButton);
+
+      expect(push).toHaveBeenNthCalledWith(1, "/article/undefined");
+    });
   });
 });

src/main/hooks/useWorkbookCardBottomButtonEvent.tsx

@@ -3,6 +3,7 @@ import queryClient from "@api/queryClient";
 import useSusbscribeWorkbook from "@common/hooks/useSusbscribeWorkbook";
 import { QUERY_KEY } from "@main/remotes";
 import { WorkbookClientInfo } from "@main/types/workbook";
+import useIsLogin from "@shared/hooks/useIsLogin";
 import { onClickLinkCopy } from "@shared/utils/onClickLinkCopy";
 import { useRouter } from "next/navigation";
 
@@ -14,6 +15,7 @@ export default function useWorkbookCardBottomButtonEvent({
   let handleButtonClick;
   const { push } = useRouter();
   const { postSubscribeWorkbook } = useSusbscribeWorkbook();
+  const isLogin = useIsLogin();
 
   const clickShareButton = () => {
     onClickLinkCopy({
@@ -22,17 +24,21 @@ export default function useWorkbookCardBottomButtonEvent({
   };
 
   const clickSubscribeButton = () => {
-    postSubscribeWorkbook({
-      workbookId: workbookId.toString(),
-      handleSucess: () => {
-        queryClient.refetchQueries({
-          queryKey: [QUERY_KEY.GET_SUBSCRIBE_WORKBOOKS],
-        });
-        queryClient.refetchQueries({
-          queryKey: [QUERY_KEY.GET_WORKBOOKS_WITH_CATEGORY],
-        });
-      },
-    });
+    if (isLogin)
+      postSubscribeWorkbook({
+        workbookId: workbookId.toString(),
+        handleSucess: () => {
+          queryClient.refetchQueries({
+            queryKey: [QUERY_KEY.GET_SUBSCRIBE_WORKBOOKS],
+          });
+          queryClient.refetchQueries({
+            queryKey: [QUERY_KEY.GET_WORKBOOKS_WITH_CATEGORY],
+          });
+        },
+      });
+    else {
+      push("/auth");
+    }
   };
 
   const clickLearnButton = () => {