Merge pull request #170 from YAPP-Github/feature-main-merge/DEV-104

Feature main merge/dev 104 -> main

package.json

@@ -20,6 +20,7 @@
     "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-toast": "^1.1.5",
     "@tanstack/react-query": "^5.40.0",

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

@@ -11,6 +11,7 @@ import { SIGNUP_COMPLETED } from "@auth/constants/auth";
 import lottieJson from "public/assets/Problem_Complete.json";
 import FewLogo from "public/enterlogo.svg";
 import { Mixpanel } from "@shared/utils/mixpanel";
+
 export default function ValidationCompletePage() {
   const searchParams = useSearchParams();
   const router = useRouter();
@@ -35,7 +36,6 @@ export default function ValidationCompletePage() {
             Mixpanel.identify({ id: memberEmail });
             Mixpanel.people.set({ peoples: { $email: memberEmail } });
           }
-
           router.push("/");
         }}
       >

src/app/page.tsx

@@ -1,12 +1,14 @@
-import TopButton from "@common/components/TopButton";
+import { Separator } from "@shared/components/ui/separator";
+
 import ArticleCardsWrapper from "@main/components/ArticleCardsWrapper";
 import MainHeader from "@main/components/MainHeader";
 import WorkbookCardsWrapper from "@main/components/WorkbookCardsWrapper";
-import { Separator } from "@shared/components/ui/separator";
+
+import TopButton from "@common/components/TopButton";
 
 export default function MainPage() {
   return (
-    <main className="flex h-auto w-full flex-col">
+    <main className="relative flex h-auto w-full flex-col overflow-y-auto">
       <MainHeader />
       <WorkbookCardsWrapper />
       <Separator className="h-[20px] bg-background1" />

src/article/components/ArticleTitle/index.tsx

@@ -34,15 +34,15 @@ export default function ArticleTitle() {
       {
         ...getArticleQueryOptions({ articleId }),
         enabled: !workbookId,
-        // staleTime: 1000,
+
       },
       {
         ...getArticleWithWorkbookQueryOptions({
           workbookId,
           articleId,
         }),
         enabled: Boolean(workbookId),
-        // staleTime: 1000,
+
       },
     ],
   });

src/auth/hooks/useLogout.tsx

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

src/common/components/TopButton/index.tsx

@@ -29,21 +29,23 @@ export default function TopButton() {
   }, []);
 
   return (
-    showButton && (
-      <div className="z-1 sticky bottom-[20px] left-[85%] w-fit">
-        <Button
-          id="top"
-          onClick={scrollToTop}
-          type="button"
-          className={cn(
-            "h-[36px] w-[36px] p-0",
-            "rounded-full border-[0.5px] border-text-gray2 bg-white",
-            "hover:bg-white",
-          )}
-        >
-          <UpIcon width={22} height={26} />
-        </Button>
-      </div>
-    )
+    <>
+      {showButton && (
+        <div className="fixed bottom-[10px] left-[80%] z-10 w-fit">
+          <Button
+            id="top"
+            onClick={scrollToTop}
+            type="button"
+            className={cn(
+              "h-[36px] w-[36px] p-0",
+              "rounded-full border-[0.5px] border-text-gray2 bg-white",
+              "hover:bg-white",
+            )}
+          >
+            <UpIcon width={22} height={26} />
+          </Button>
+        </div>
+      )}
+    </>
   );
 }

src/common/hooks/useSusbscribeWorkbook.tsx

@@ -1,10 +1,12 @@
 import { toast } from "@shared/components/ui/use-toast";
 import { SUBSCRIBE_USER_ACTIONS } from "@subscription/constants/subscribe";
-import { subscribeWorkbookOptions } from "@subscription/remotes/postSubscriptionQueryOptions";
+import { subscribeWorkbookQueryOptions } from "@subscription/remotes/postSubscriptionQueryOptions";
 import { useMutation } from "@tanstack/react-query";
 
 export default function useSusbscribeWorkbook() {
-  const { mutate: subscribeWorkbook } = useMutation(subscribeWorkbookOptions());
+  const { mutate: subscribeWorkbook } = useMutation(
+    subscribeWorkbookQueryOptions(),
+  );
   const postSubscribeWorkbook = ({
     workbookId,
     handleSucess,

src/main/components/DropDownMenuItemList/index.tsx

@@ -19,15 +19,16 @@ export function DropDownMenuItemList() {
 
   const MENU_ITEM_LIST = isLogin ? AUTH_LINK : UNAUTH_LINK;
   const lastIdx = MENU_ITEM_LIST.length - 1;
-
   return (
-    <ul className="absolute left-0 top-[66px] z-20 h-screen w-full bg-white">
+    <ul className="fixed left-0 top-[66px] z-10 h-screen w-full overflow-y-auto bg-white">
       {MENU_ITEM_LIST.map(({ title, component }, idx) => (
         <li
           key={`link-to-${idx}`}
           className={cn(
             "flex flex-col justify-center",
             "sub2-bold min-h-[66px] w-full px-[20px] py-[10px]",
+            title === "구독 토글 리스트" && "p-0",
+            title === "구독 관리 제목" && "p-0",
             lastIdx !== idx && "border-b-[0.5px] border-text-gray3",
           )}
         >

src/main/components/DropdownMenuWrapper/index.tsx

@@ -1,6 +1,7 @@
 import { XIcon } from "lucide-react";
-import HamburgerMenu from "public/assets/icon/hamburgerMenu.svg";
+
 import { DropDownMenuItemList } from "../DropDownMenuItemList";
+import HamburgerMenu from "public/assets/icon/hamburgerMenu.svg";
 interface DropdownMenuWrapperProps {
   toggleMenu: boolean;
   handleToggleMenu: () => void;

src/main/components/EmailDayManagementDialog/index.tsx

@@ -0,0 +1,85 @@
+import React, { useState } from "react";
+
+import { useMutation } from "@tanstack/react-query";
+
+import { Button } from "@shared/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@shared/components/ui/dialog";
+import useModalWidthControl from "@shared/hooks/useModalWidthControl";
+import { cn } from "@shared/utils/cn";
+
+import { SUBSCRIPTION_EMAIL_CLIENT_INFO } from "@main/constants/emailInfo";
+import { SubscriptionManagementModel } from "@main/models/SubscriptionManagementModel";
+import { patchWorkbookEmailDayMutationOptions } from "@main/remotes/patchWorkbookEmailDayMutationOptions";
+import { SubscriptionEmailClientInfo } from "@main/types/emailInfo";
+
+export default function EmailDayManagementDialog({
+  day,
+}: Pick<SubscriptionEmailClientInfo, "day">) {
+  const [currentDay, setCurrentDay] = useState(day);
+  useModalWidthControl();
+
+  const { mutate: patchWorkbookEmailDay } = useMutation({
+    ...patchWorkbookEmailDayMutationOptions(),
+  });
+
+  const onClickUpdateWorkbookEmailDay = () => {
+    patchWorkbookEmailDay({
+      date: SubscriptionManagementModel.getDayPostInfo({ day: currentDay }),
+    });
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger className="sub2-medium rounded-lg bg-text-gray3 px-2 py-1">
+        {SUBSCRIPTION_EMAIL_CLIENT_INFO.DAY[currentDay]}
+      </DialogTrigger>
+      <DialogContent className="z-50 w-full max-w-[380px] rounded bg-white">
+        <DialogHeader>
+          <DialogTitle className="h3-bold mb-[35px]">
+            이메일을 받고 싶은 요일을
+            <br /> 선택해주세요.
+          </DialogTitle>
+          <DialogDescription className="flex justify-between">
+            {Object.keys(SUBSCRIPTION_EMAIL_CLIENT_INFO.DAY).map((key) => {
+              const currentKey =
+                key as keyof typeof SUBSCRIPTION_EMAIL_CLIENT_INFO.DAY;
+              const value = SUBSCRIPTION_EMAIL_CLIENT_INFO.DAY[currentKey];
+              return (
+                <Button
+                  className={cn(
+                    "body3-medium bg-white text-text-gray2",
+                    "min-w-[150px] p-[12px]",
+                    "rounded-[10px] border-[1px] border-text-gray2",
+                    "hover:bg-main hover:text-white",
+                    key === currentDay && "bg-main text-white",
+                  )}
+                  key={`email-day-${key}`}
+                  onClick={() => setCurrentDay(currentKey)}
+                >
+                  {value}
+                </Button>
+              );
+            })}
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <DialogClose
+            className="body3-medium mt-[34px] bg-black py-[12px] text-white"
+            onClick={onClickUpdateWorkbookEmailDay}
+          >
+            완료
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}