diff --git a/src/api/index.ts b/src/api/index.ts deleted file mode 100644 index 344a3d3..0000000 --- a/src/api/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -// 서버에서 불러오는 것 - -// 공통불러오는 것 -// 페이지 불러오는 것 diff --git a/src/app/api/login/set-pre-login-path/route.ts b/src/app/api/login/set-pre-login-path/route.ts new file mode 100644 index 0000000..248d5eb --- /dev/null +++ b/src/app/api/login/set-pre-login-path/route.ts @@ -0,0 +1,18 @@ +import { NextRequest, NextResponse } from 'next/server'; + +export async function POST(req: NextRequest) { + const { path } = await req.json(); // 클라이언트가 보내는 페이지 경로 + const res = NextResponse.json({ ok: true }); + + res.cookies.set({ + name: 'preLoginPath', + value: path, + path: '/', + maxAge: 60 * 30, // 30분 + httpOnly: false, // JS에서 읽을 수 있게 + secure: process.env.NODE_ENV === 'production', + sameSite: 'lax', + }); + + return res; +} diff --git a/src/shared/@store/modal.ts b/src/shared/@store/modal.ts deleted file mode 100644 index 748ba24..0000000 --- a/src/shared/@store/modal.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { create } from 'zustand'; - -interface WelcomeModalData { - open: boolean; - nickname: string; -} - -interface LogoutConfirmModalData { - open: boolean; -} - -interface ModalStore { - welcomeModal: WelcomeModalData; - logoutConfirmModal: LogoutConfirmModalData; - - openWelcomeModal: (nickname: string) => void; - closeWelcomeModal: () => void; - - openLogoutConfirmModal: () => void; - closeLogoutConfirmModal: () => void; -} - -export const useModalStore = create((set) => ({ - welcomeModal: { open: false, nickname: '' }, - logoutConfirmModal: { open: false }, - - openWelcomeModal: (nickname: string) => set({ welcomeModal: { open: true, nickname } }), - - closeWelcomeModal: () => set({ welcomeModal: { open: false, nickname: '' } }), - - openLogoutConfirmModal: () => set({ logoutConfirmModal: { open: true } }), - closeLogoutConfirmModal: () => set({ logoutConfirmModal: { open: false } }), -})); diff --git a/src/shared/components/auth/LoginRedirectHandler.tsx b/src/shared/components/auth/LoginRedirectHandler.tsx index 4077b54..08e9aae 100644 --- a/src/shared/components/auth/LoginRedirectHandler.tsx +++ b/src/shared/components/auth/LoginRedirectHandler.tsx @@ -3,16 +3,17 @@ import { useEffect, useState } from 'react'; import { usePathname, useRouter } from 'next/navigation'; import { useAuthStore } from '@/shared/@store/auth'; -import { useModalStore } from '@/shared/@store/modal'; import { customToast } from '@/shared/components/toast/CustomToastUtils'; import Spinner from '../spinner/Spinner'; +import WelcomeModal from './WelcomeModal'; +import { getCookie, removeCookie } from './utils/cookie'; function LoginRedirectHandler() { const pathname = usePathname(); const router = useRouter(); const { user, updateUser } = useAuthStore(); - const { openWelcomeModal } = useModalStore(); const [loading, setLoading] = useState(true); + const [welcomeModalOpen, setWelcomeModalOpen] = useState(false); useEffect(() => { if (!user && loading) { @@ -32,15 +33,28 @@ function LoginRedirectHandler() { useEffect(() => { if (!user || loading) return; - const preLoginPath = sessionStorage.getItem('preLoginPath') || '/'; + const preLoginPath = getCookie('preLoginPath') || '/'; + console.log(preLoginPath); + // 첫 유저일 경우 모달 오픈 if (pathname.startsWith('/login/first-user')) { - openWelcomeModal(user.nickname); - } else if (pathname.startsWith('/login/success')) { + setWelcomeModalOpen(true); + } + // 기존 유저일 경우 + else if (pathname.startsWith('/login/success')) { customToast.success(`${user.nickname}님 \n 로그인 성공 🎉`); router.replace(preLoginPath); + removeCookie('preLoginPath'); } - }, [pathname, user, router, openWelcomeModal, loading]); + }, [pathname, user, loading, router]); + + // 환영 모달 닫힐 때 이동 + const handleCloseWelcomeModal = () => { + setWelcomeModalOpen(false); + const preLoginPath = getCookie('preLoginPath') || '/'; + removeCookie('preLoginPath'); + router.replace(preLoginPath); + }; if (loading) { return ( @@ -50,6 +64,17 @@ function LoginRedirectHandler() { ); } - return null; + return ( + <> + {/* 첫 유저 모달 */} + {user && ( + + )} + + ); } export default LoginRedirectHandler; diff --git a/src/shared/components/auth/Welcome.tsx b/src/shared/components/auth/WelcomeModal.tsx similarity index 71% rename from src/shared/components/auth/Welcome.tsx rename to src/shared/components/auth/WelcomeModal.tsx index b479480..f4cd3b1 100644 --- a/src/shared/components/auth/Welcome.tsx +++ b/src/shared/components/auth/WelcomeModal.tsx @@ -6,21 +6,21 @@ import Button from '@/shared/components/button/Button'; import ModalLayout from '@/shared/components/modalPop/ModalLayout'; import Ssury from '@/shared/assets/ssury/ssury_jump.webp'; import { useRouter } from 'next/navigation'; -import { useModalStore } from '@/shared/@store/modal'; -import { useAuthStore } from '@/shared/@store/auth'; -function Welcome() { - const router = useRouter(); - const { user } = useAuthStore(); - const { welcomeModal, closeWelcomeModal } = useModalStore(); +interface Props { + userNickname: string; + open: boolean; + onClose: () => void; +} - if (!welcomeModal.open || !user) return null; +function Welcome({ userNickname, open, onClose }: Props) { + const router = useRouter(); return ( @@ -28,7 +28,7 @@ function Welcome() { type="button" color="purple" onClick={() => { - closeWelcomeModal(); + onClose(); router.push('/recipe'); }} > @@ -37,7 +37,7 @@ function Welcome() {