diff --git a/src/app/page.tsx b/src/app/page.tsx index b046bf6c..59530664 100644 --- 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(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 index d4862e43..d74abbd2 100644 --- 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 new file mode 100644 index 00000000..95115a52 --- /dev/null +++ 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 ( +
+
+
🧐 μŠ€ν…Œλ””μ— μ°Έμ—¬ν•˜κ³  싢은 μ‚¬λžŒ
+ + +
+
+
πŸ€— μŠ€ν…Œλ””λ₯Ό μš΄μ˜ν•˜κ³  싢은 μ‚¬λžŒ
+ + +
+
+ ); +}; + +export default WelcomeModalContainer; diff --git a/src/components/_common/Modal/WelcomeModal/index.tsx b/src/components/_common/Modal/WelcomeModal/index.tsx new file mode 100644 index 00000000..3142acac --- /dev/null +++ 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 ( + + +
+ setIsOpen(false)}> +
+ +
+
+ +
+
+
+ ); +}; + +export default WelcomeModal; diff --git a/src/stores/welcomeModalOpen.ts b/src/stores/welcomeModalOpen.ts new file mode 100644 index 00000000..bc388b29 --- /dev/null +++ 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( + (set) => ({ + isOpen: false, + setIsOpen: (isOpen) => set({ isOpen }), + }), + { + name: "welcomeModalKey", + }, + ), +); + +export default useWelcomeModalOpenStore;