[ Fix/dev 94 ] 유저 구독 시 워크북 상세페이지 하단 ‘학습하기’ 로 변경

src/app/auth/validation/complete/page.tsx

@@ -4,17 +4,30 @@ import { useRouter, useSearchParams } from "next/navigation";
 
 import LottieClient from "@shared/components/Lottie";
 import { Button } from "@shared/components/ui/button";
+
 import useIsLogin from "@shared/hooks/useIsLogin";
+
 import { Mixpanel } from "@shared/utils/mixpanel";
 
 import { SIGNUP_COMPLETED } from "@auth/constants/auth";
 import lottieJson from "public/assets/Problem_Complete.json";
 import FewLogo from "public/enterlogo.svg";
+
 export default function ValidationCompletePage() {
   const searchParams = useSearchParams();
   const router = useRouter();
   const memberEmail = searchParams.get("member_email");
+
   const isLogin = useIsLogin();
+
+  // useAuth(auth_token ? auth_token : "");
+
+  // useEffect(function setMixpanel() {
+  //   if (memberEmail) {
+  //     console.log(memberEmail);
+  //   }
+  // }, []);
+
   return (
     <div className="flex h-auto flex-col items-center">
       <LottieClient animationData={lottieJson} />
@@ -32,7 +45,6 @@ export default function ValidationCompletePage() {
             Mixpanel.identify({ id: memberEmail });
             Mixpanel.people.set({ peoples: { $email: memberEmail } });
           }
-
           router.push("/");
         }}
       >

src/app/workbook/[id]/page.tsx

@@ -47,11 +47,11 @@ export default function WorkbookPage() {
   // usePathname 로 workbook id 받기
   const pathname = usePathname();
   const workbookId = getWorkbookId(pathname);
-  useTrackMixpanel({
-    eventKey: EVENT_NAME.WORKBOOK_APPEAR,
-    property: { id: workbookId },
-    dep: pathname,
-  });
+  // useTrackMixpanel({
+  //   eventKey: EVENT_NAME.WORKBOOK_APPEAR,
+  //   property: { id: workbookId },
+  //   dep: pathname,
+  // });
 
   const { data: workbookInfo, isLoading } = useQuery({
     ...getWorkbookQueryOptions(workbookId),

src/article/components/ArticleBottomButton/indext.tsx

@@ -5,9 +5,7 @@ import { useParams, useRouter } from "next/navigation";
 import { HTMLAttributes } from "react";
 
 import { Button } from "@shared/components/ui/button";
-import { EVENT_NAME } from "@shared/constants/mixpanel";
 import { useProblemIdsViewModel } from "@shared/models/useProblemIdsViewModel";
-import { Mixpanel } from "@shared/utils/mixpanel";
 
 interface ArticleBottomButtonProps extends HTMLAttributes<HTMLButtonElement> {}
 export default function ArticleBottomButton({
@@ -18,10 +16,10 @@ export default function ArticleBottomButton({
   const { getCurrentProblemId } = useProblemIdsViewModel();
   const onClickGoProblem = () => {
     push(`/problem/${getCurrentProblemId()}`);
-    Mixpanel.track({
-      name: EVENT_NAME.ARTICLE_PROBLEMBUTTON_TAPPED,
-      property: { id: articleId },
-    });
+    // Mixpanel.track({
+    //   name: EVENT_NAME.ARTICLE_PROBLEMBUTTON_TAPPED,
+    //   property: { id: articleId },
+    // });
   };
   return (
     <Button

src/article/components/ArticleTitle/index.tsx

@@ -9,9 +9,7 @@ import { setCookie } from "cookies-next";
 
 import TitleSection from "@shared/components/TitleSection";
 import { IS_EXIST_PROBLEMS } from "@shared/constants/middlewareConstant";
-import { EVENT_NAME } from "@shared/constants/mixpanel";
 import { useProblemIdsViewModel } from "@shared/models/useProblemIdsViewModel";
-import { Mixpanel } from "@shared/utils/mixpanel";
 
 import { ARTICLE_INFO_TYPE } from "@article/constants/articleCase";
 import { getArticleQueryOptions } from "@article/remotes/getArticleQueryOptions";
@@ -66,18 +64,18 @@ export default function ArticleTitle() {
     [articleInfo],
   );
 
-  useEffect(
-    function trackMixpanel() {
-      if (!isFirstRender.current) {
-        isFirstRender.current = true;
-        Mixpanel.track({
-          name: EVENT_NAME.ARTICLE_APPREAR,
-          property: { id: articleId },
-        });
-      }
-    },
-    [articleInfo],
-  );
+  // useEffect(
+  //   function trackMixpanel() {
+  //     if (!isFirstRender.current) {
+  //       isFirstRender.current = true;
+  //       Mixpanel.track({
+  //         name: EVENT_NAME.ARTICLE_APPREAR,
+  //         property: { id: articleId },
+  //       });
+  //     }
+  //   },
+  //   [articleInfo],
+  // );
 
   if (isLoading || isError || !articleInfo)
     return <ArticleSkeleton.TitleSkeleton />;

src/auth/hooks/useLogout.tsx

@@ -9,7 +9,6 @@ import { deleteCookie } from "cookies-next";
 import { ApiResponse } from "@api/fewFetch";
 
 import { COOKIES } from "@shared/constants/token";
-import { Mixpanel } from "@shared/utils/mixpanel";
 
 import { logOutMutaionOption } from "@auth/remotes/logoutMembersQueryOption";
 
@@ -23,7 +22,7 @@ export const useLogout = () => {
         // 쿠키 삭제 및 로그인 페이지로 이동
         deleteCookie(COOKIES.REFRESH_TOKEN);
         deleteCookie(COOKIES.ACCESS_TOKEN);
-        Mixpanel.reset();
+        // Mixpanel.reset();
         router.push("/");
         window.location.reload();
       }

src/main/components/MainHeader/index.tsx

@@ -8,7 +8,7 @@ import { cn } from "@shared/utils/cn";
 import DropDownMenuWrapper from "../DropdownMenuWrapper";
 import FewLogo from "public/assets/icon/fewlogo.svg";
 export default function MainHeader() {
-  useTrackMixpanel({ eventKey: EVENT_NAME.MAIN_APPEAR });
+  // useTrackMixpanel({ eventKey: EVENT_NAME.MAIN_APPEAR });
   const [toggleMenu, setToggleMenu] = useState(false);
 
   const handleToggleMenu = () => {

src/problem/components/ProblemTitle/index.tsx

@@ -6,9 +6,6 @@ import { useMutationState, useQuery } from "@tanstack/react-query";
 
 import { ApiResponse } from "@api/fewFetch";
 
-import { EVENT_NAME } from "@shared/constants/mixpanel";
-import useTrackMixpanel from "@shared/hooks/useTrackMixpanel";
-
 import ProblemSkeleton from "../ProblemSkeleton";
 import { PROBLEM_TITLE_INFO } from "@problem/constants/problemInfo";
 import { QUERY_KEY } from "@problem/remotes/api";
@@ -30,11 +27,11 @@ export default function ProblemTitle() {
     },
     select: (mutation) => mutation.state.data as ApiResponse<AnswerCheckInfo>,
   });
-  useTrackMixpanel({
-    eventKey: EVENT_NAME.PROBLEM_APPEAR,
-    property: { id: problemId },
-    dep: problemId,
-  });
+  // useTrackMixpanel({
+  //   eventKey: EVENT_NAME.PROBLEM_APPEAR,
+  //   property: { id: problemId },
+  //   dep: problemId,
+  // });
   if (isLoading || isError || !problemInfo)
     return <ProblemSkeleton.TitleSkeleton />;
 

src/shared/middlewares/auth.ts

@@ -15,44 +15,37 @@ type authMiddlewareProps = {
 };
 
 export const AuthMiddleware = async ({ req, nextUrl }: authMiddlewareProps) => {
-  try {
-    const { searchParams } = nextUrl;
-    const auth_token = searchParams.get(AUTH_TOKEN);
-    if (auth_token) {
-      const response: ApiResponse<tokenResponse> = await fewFetch().post(
-        API_ROUTE.TOKEN(auth_token),
-      );
-
-      const authData = response.data;
-
-      if (authData?.message === "알 수 없는 오류가 발생했어요.") {
-        nextUrl.searchParams.delete(AUTH_TOKEN);
-        const response = NextResponse.redirect(nextUrl);
-
-        // response.cookies.set(COOKIES.ACCESS_TOKEN, "false");
-        response.cookies.set(ISLOGIN, "false");
-
-        return NextResponse.redirect(nextUrl);
-      }
-      if (authData?.data?.accessToken) {
-        const accessToken = authData.data.accessToken;
-        const memberEmail = tokenParse(accessToken).memberEmail;
-
-        nextUrl.searchParams.delete(AUTH_TOKEN);
-        nextUrl.searchParams.set("member_email", memberEmail);
-
-        const response = NextResponse.redirect(nextUrl);
-
-        response.cookies.set(COOKIES.ACCESS_TOKEN, authData?.data?.accessToken);
-        response.cookies.set(
-          COOKIES.REFRESH_TOKEN,
-          authData?.data?.refreshToken,
-        );
-
-        return response;
-      }
+  const { searchParams } = nextUrl;
+  const auth_token = searchParams.get(AUTH_TOKEN);
+  if (auth_token) {
+    const response: ApiResponse<tokenResponse> = await fewFetch().post(
+      API_ROUTE.TOKEN(auth_token),
+    );
+
+    const authData = response.data;
+
+    if (authData?.message === "알 수 없는 오류가 발생했어요.") {
+      nextUrl.searchParams.delete(AUTH_TOKEN);
+      const response = NextResponse.redirect(nextUrl);
+
+      // response.cookies.set(COOKIES.ACCESS_TOKEN, "false");
+      response.cookies.set(ISLOGIN, "false");
+
+      return NextResponse.redirect(nextUrl);
+    }
+    if (authData?.data?.accessToken) {
+      const accessToken = authData.data.accessToken;
+      const memberEmail = tokenParse(accessToken).memberEmail;
+
+      nextUrl.searchParams.delete(AUTH_TOKEN);
+      nextUrl.searchParams.set("member_email", memberEmail);
+
+      const response = NextResponse.redirect(nextUrl);
+
+      response.cookies.set(COOKIES.ACCESS_TOKEN, authData?.data?.accessToken);
+      response.cookies.set(COOKIES.REFRESH_TOKEN, authData?.data?.refreshToken);
+
+      return response;
     }
-  } catch {
-    return undefined;
   }
 };

src/workbook/components/WorkbookButton/index.tsx

@@ -1,13 +1,19 @@
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 
+import { useQueries } from "@tanstack/react-query";
+
 import queryClient from "@api/queryClient";
 
 import useIsLogin from "@shared/hooks/useIsLogin";
 
 import { WORKBOOK_BTNS } from "@workbook/constants/buttons";
 import { getWorkbookId } from "@workbook/utils";
 
+import { ENTIRE_CATEGORY } from "@main/constants";
+import { WorkbookCardModel } from "@main/models/WorkbookCardModel";
 import { QUERY_KEY } from "@main/remotes";
+import { getSubscriptionWorkbooksQueryOptions } from "@main/remotes/getSubscriptionWorkbooksQueryOptions";
+import { getWorkbooksWithCategoryQueryOptions } from "@main/remotes/getWorkbooksWithCategoryQueryOptions";
 
 import WorkbookButtonItem from "../\bWorkbookButtonItem";
 import useSusbscribeWorkbook from "@common/hooks/useSusbscribeWorkbook";
@@ -20,7 +26,40 @@ export default function WorkbookButton() {
   const pathname = usePathname();
   const workbookId = getWorkbookId(pathname);
 
-  const handleLoginClick = () => {
+  const workbookInfo = useQueries({
+    queries: [
+      getWorkbooksWithCategoryQueryOptions({
+        code: ENTIRE_CATEGORY,
+      }),
+      {
+        ...getSubscriptionWorkbooksQueryOptions(),
+        enabled: isLogin === true,
+      },
+    ],
+    combine: (result) => {
+      const [workbookServerList, workbookSubscriptionInfoList] = result;
+
+      if (workbookServerList.data) {
+        const workbookCardModel = new WorkbookCardModel({
+          initWorkbookSeverList: workbookServerList.data,
+          initWorkbookSubscriptionInfoList: workbookSubscriptionInfoList.data,
+        });
+
+        // 특정 워크북 ID에 따른 필터링 적용
+        const targetWorkbookId = Number(workbookId);
+        const filteredWorkbookCombineList =
+          workbookCardModel.workbookCombineListData.filter(
+            (workbook) => workbook.id === targetWorkbookId,
+          );
+
+        return workbookCardModel.workbookCardList({
+          workbookCombineList: filteredWorkbookCombineList,
+        });
+      }
+    },
+  });
+
+  const handleLoginSubClick = () => {
     postSubscribeWorkbook({
       workbookId: workbookId.toString(),
       handleSucess: () => {
@@ -38,13 +77,30 @@ export default function WorkbookButton() {
     router.push("/auth");
   };
 
+  const handleStudy = () => {
+    if (workbookInfo) {
+      router.push(`/article/${workbookInfo[0].articleId}?workbookId=${workbookId}`)
+    }
+  }
+
+  console.log("workbookInfo ", workbookInfo);
+
   return (
     <section className="px-[20px] pb-[44px]">
-      {isLogin ? (
-        <WorkbookButtonItem
-          title={WORKBOOK_BTNS.SUB}
-          handleClick={handleLoginClick}
-        />
+      {isLogin && workbookInfo ? (
+        <>
+          {workbookInfo[0].cardType === "SUBSCRIBE" ? (
+            <WorkbookButtonItem
+              title={WORKBOOK_BTNS.SUB}
+              handleClick={handleLoginSubClick}
+            />
+          ) : (
+            <WorkbookButtonItem
+              title={WORKBOOK_BTNS.STUDY}
+              handleClick={handleStudy}
+            />
+          )}
+        </>
       ) : (
         <WorkbookButtonItem
           title={WORKBOOK_BTNS.LOGIN_AND_SUB}

src/workbook/constants/buttons.ts

@@ -1,4 +1,5 @@
 export const WORKBOOK_BTNS = {
     LOGIN_AND_SUB: "로그인하고 학습 시작하기",
-    SUB: "구독하기"
+    SUB: "구독하기",
+    STUDY: "학습하기",
 }