[feat] 로그인 시 전페이지로 이동하도록 로직 추가 / 모달 store 추가

Author: ahk0413

src/app/login/SocialLogin.tsx

@@ -6,9 +6,11 @@ import Google from '@/shared/assets/icons/google.svg';
 import tw from '@/shared/utills/tw';
 import Welcome from './Welcome';
 import { useState } from 'react';
+import { useAuthStore } from '@/shared/@store/auth';
 
 function SocialLogin() {
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const { user } = useAuthStore();
 
   const socialButtons = [
     {
@@ -33,8 +35,10 @@ function SocialLogin() {
 
   // TODO: 백엔드 연동 로직 구현 필요
   const handleLogin = (id: string) => {
-    console.log(id);
-    setIsModalOpen(true);
+    const preLoginPath = sessionStorage.getItem('preLoginPath');
+    console.log('경로, id', preLoginPath, id);
+
+    // useAuthStore.getState().loginWithProvider(id as 'naver' | 'kakao' | 'google');
   };
 
   return (
@@ -54,7 +58,11 @@ function SocialLogin() {
       </div>
 
       {/* 웰컴 모달 (임시) */}
-      <Welcome open={isModalOpen} onClose={() => setIsModalOpen(false)} />
+      <Welcome
+        open={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        nickname={user?.nickname || '게스트'}
+      />
     </>
   );
 }

src/app/login/Welcome.tsx

@@ -10,16 +10,17 @@ import { useRouter } from 'next/navigation';
 interface Props {
   open: boolean;
   onClose: () => void;
+  nickname: string;
 }
 
-function Welcome({ open, onClose }: Props) {
+function Welcome({ open, onClose, nickname }: Props) {
   const router = useRouter();
 
   return (
     <ModalLayout
       open={open}
       onClose={onClose}
-      title="환영합니다!"
+      title={`환영합니다, ${nickname}님!`}
       description="바텐더 쑤리가 안내해드릴게요"
       buttons={
         <>

src/app/oauth/success/page.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuthStore } from '@/shared/@store/auth';
+import Spinner from '@/shared/components/spinner/Spinner';
+
+function Page() {
+  const router = useRouter();
+  const { user } = useAuthStore();
+
+  useEffect(() => {
+    if (user) {
+      const prevPath = sessionStorage.getItem('preLoginPath') || '/';
+      router.push(prevPath);
+      sessionStorage.removeItem('preLoginPath');
+    }
+  }, [user, router]);
+  return (
+    <div className="page-layout max-w-824 flex-center">
+      <Spinner />
+    </div>
+  );
+}
+export default Page;

src/shared/@store/modal.ts

@@ -0,0 +1,14 @@
+import { create } from 'zustand';
+
+interface ModalState {
+  welcomeOpen: boolean;
+  openModal: (modal: keyof ModalState) => void;
+  closeModal: (modal: keyof ModalState) => void;
+}
+
+export const useModalStore = create<ModalState>((set) => ({
+  welcomeOpen: false,
+
+  openModal: (modal) => set({ [modal]: true }),
+  closeModal: (modal) => set({ [modal]: false }),
+}));

src/shared/components/header/HamburgerMenu.tsx

@@ -14,7 +14,7 @@ function HamburgerMenu() {
     <>
       <button
         type="button"
-        className="sm:hidden block stroke-white hover:stroke-white/80 w-[63px]"
+        className="sm:hidden block stroke-white hover:stroke-white/80"
         onClick={(e) => handleClick(e)}
         aria-label="메뉴 열기"
         aria-expanded={isClicked}