✨ Feat(#324): 로그인 온보딩 웰컴 모달 구현

Team-Blitz-Steady · Dec 4, 2023 · e808265 · e808265
1 parent 08dd0f0
commit e808265
Show file tree

Hide file tree

Showing 5 changed files with 116 additions and 10 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -16,8 +16,8 @@ import Walrus from "@/images/walrus.png";
 import { cn } from "@/lib/utils";
 import useAuthStore from "@/stores/isAuth";
 import useIsSearchBarFocusStore from "@/stores/isSearchBarFocus";
-import useLoginModalOpenStore from "@/stores/loginModalOpen";
 import usePageStore from "@/stores/page";
+import useWelcomeModalOpenStore from "@/stores/welcomeModalOpen";
 import * as ChannelIO from "@channel.io/channel-web-sdk-loader";
 import { useSuspenseQuery } from "@tanstack/react-query";
 import steadyFilter from "@/services/steady/filterSteadies";
@@ -72,7 +72,7 @@ const Home = () => {
     },
   ];
   const { isFocus, setIsFocus } = useIsSearchBarFocusStore();
-  const { isOpen } = useLoginModalOpenStore();
+  const { isOpen } = useWelcomeModalOpenStore();
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [isModalOpen, setModalOpen] = useState(false);
 
@@ -129,7 +129,6 @@ const Home = () => {
     console.log(positionsError);
   }
 
-  console.log(isOpen);
   const [totalPost, setTotalPost] = useState(data?.totalElements);
 
   const handleGetSteadies = async (

diff --git a/src/components/_common/Modal/LoginModal/index.tsx b/src/components/_common/Modal/LoginModal/index.tsx
@@ -1,12 +1,13 @@
 "use client";
 
 import { type PropsWithChildren, type ReactNode, useEffect } from "react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { useToast } from "@/components/ui/use-toast";
 import useAuthStore from "@/stores/isAuth";
 import useLoginModalOpenStore from "@/stores/loginModalOpen";
 import useLoginStepsStore from "@/stores/loginSteps";
 import useNewUserInfoStore from "@/stores/newUserInfo";
+import useWelcomeModalOpenStore from "@/stores/welcomeModalOpen";
 import { AlertDialog } from "@radix-ui/themes";
 import { setCookie } from "cookies-next";
 import getKakaoToken from "@/services/oauth/kakao/getKakaoToken";
@@ -20,8 +21,9 @@ const LoginModal = ({ trigger }: PropsWithChildren<{ trigger: ReactNode }>) => {
   const { accountId, nickname, positionId, stacksId, setAccountId } =
     useNewUserInfoStore();
   const { isOpen, setIsOpen } = useLoginModalOpenStore();
+  const { setIsOpen: setIsWelcomeModalOpen } = useWelcomeModalOpenStore();
   const searchParams = useSearchParams();
-  const pathname = usePathname();
+  // const pathname = usePathname();
   const router = useRouter();
   const { setIsAuth } = useAuthStore();
   const { toast } = useToast();
@@ -58,14 +60,15 @@ const LoginModal = ({ trigger }: PropsWithChildren<{ trigger: ReactNode }>) => {
             });
             setIsAuth(true);
             router.replace("/");
-            if (pathname === "/" && steps === 6) {
-              setIsOpen(true);
-            }
+            setIsWelcomeModalOpen(true);
+            // if (pathname === "/" && steps === 6) {
+            //   setIsOpen(true);
+            // }
           }
         }
       });
     }
-  }, [setSteps, searchParams]);
+  }, [setSteps, searchParams, setIsWelcomeModalOpen]);
 
   const handleCreateProfile = async () => {
     try {
@@ -81,7 +84,6 @@ const LoginModal = ({ trigger }: PropsWithChildren<{ trigger: ReactNode }>) => {
           variant: "green",
         });
         useNewUserInfoStore.persist.clearStorage();
-        setSteps(6);
         //useLoginStepsStore.persist.clearStorage();
         router.push(`${userProfileCreated.headers.location}`);
       }

diff --git a/src/components/_common/Modal/WelcomeModal/WelcomeModalContainer.tsx b/src/components/_common/Modal/WelcomeModal/WelcomeModalContainer.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import useIsSearchBarFocusStore from "@/stores/isSearchBarFocus";
+import useWelcomeModalOpenStore from "@/stores/welcomeModalOpen";
+
+const WelcomeModalContainer = () => {
+  const router = useRouter();
+  const { setIsFocus } = useIsSearchBarFocusStore();
+  const { setIsOpen } = useWelcomeModalOpenStore();
+
+  const handleClickSearchAction = () => {
+    router.push("/");
+    setIsFocus(true);
+    setIsOpen(false);
+  };
+
+  const handleClickCreateAction = () => {
+    router.push("/steady/create");
+    setIsOpen(false);
+  };
+
+  return (
+    <div className="flex h-full w-full flex-col items-center justify-evenly">
+      <div className="flex w-full flex-col items-center justify-center gap-10">
+        <div className="text-25 font-bold">🧐 스테디에 참여하고 싶은 사람</div>
+
+        <button
+          onClick={handleClickSearchAction}
+          className="text-black h-200 w-full rounded-10 text-30 font-bold hover:bg-st-skyblue-50"
+        >
+          🔎 스테디 검색
+        </button>
+      </div>
+      <div className="flex w-full flex-col items-center justify-center gap-10">
+        <div className="text-25 font-bold">🤗 스테디를 운영하고 싶은 사람</div>
+
+        <button
+          className="text-black h-200 w-full rounded-10 text-30 font-bold hover:bg-st-skyblue-50"
+          onClick={handleClickCreateAction}
+        >
+          ✍️ 스테디 생성
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default WelcomeModalContainer;
diff --git a/src/components/_common/Modal/WelcomeModal/index.tsx b/src/components/_common/Modal/WelcomeModal/index.tsx
@@ -0,0 +1,34 @@
+"use client";
+
+import useWelcomeModalOpenStore from "@/stores/welcomeModalOpen";
+import { AlertDialog } from "@radix-ui/themes";
+import Icon from "../../Icon";
+import WelcomeModalContainer from "./WelcomeModalContainer";
+
+const WelcomeModal = () => {
+  const { isOpen, setIsOpen } = useWelcomeModalOpenStore();
+
+  return (
+    <AlertDialog.Root
+      open={isOpen}
+      onOpenChange={setIsOpen}
+    >
+      <AlertDialog.Content className="max-mobile:h-3/4 max-mobile:w-screen max-mobile:p-10 flex h-700 w-650 items-center justify-center overflow-y-hidden rounded-20 bg-st-primary">
+        <div className="flex h-full w-full flex-col items-center justify-center rounded-20 bg-st-white p-20">
+          <AlertDialog.Cancel onClick={() => setIsOpen(false)}>
+            <div className="flex w-full cursor-pointer justify-end">
+              <Icon
+                name="cross"
+                size={20}
+                color="text-black"
+              />
+            </div>
+          </AlertDialog.Cancel>
+          <WelcomeModalContainer />
+        </div>
+      </AlertDialog.Content>
+    </AlertDialog.Root>
+  );
+};
+
+export default WelcomeModal;
diff --git a/src/stores/welcomeModalOpen.ts b/src/stores/welcomeModalOpen.ts
@@ -0,0 +1,22 @@
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+
+interface isOpenStateType {
+  isOpen: boolean;
+  // eslint-disable-next-line no-unused-vars
+  setIsOpen: (isOpen: boolean) => void;
+}
+
+const useWelcomeModalOpenStore = create(
+  persist<isOpenStateType>(
+    (set) => ({
+      isOpen: false,
+      setIsOpen: (isOpen) => set({ isOpen }),
+    }),
+    {
+      name: "welcomeModalKey",
+    },
+  ),
+);
+
+export default useWelcomeModalOpenStore;