[feat] 소셜로그인 로직 수정 (api 대기중)

Author: ahk0413

src/app/login/SocialLogin.tsx

@@ -4,13 +4,10 @@ import Naver from '@/shared/assets/icons/naver.svg';
 import Kakao from '@/shared/assets/icons/kakao.svg';
 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 { loginWithProvider } = useAuthStore();
 
   const socialButtons = [
     {
@@ -35,10 +32,7 @@ function SocialLogin() {
 
   // TODO: 백엔드 연동 로직 구현 필요
   const handleLogin = (id: string) => {
-    const preLoginPath = sessionStorage.getItem('preLoginPath');
-    console.log('경로, id', preLoginPath, id);
-
-    // useAuthStore.getState().loginWithProvider(id as 'naver' | 'kakao' | 'google');
+    loginWithProvider(id as 'naver' | 'kakao' | 'google');
   };
 
   return (
@@ -56,13 +50,6 @@ function SocialLogin() {
           </button>
         ))}
       </div>
-
-      {/* 웰컴 모달 (임시) */}
-      <Welcome
-        open={isModalOpen}
-        onClose={() => setIsModalOpen(false)}
-        nickname={user?.nickname || '게스트'}
-      />
     </>
   );
 }

src/app/login/page.tsx

@@ -15,7 +15,13 @@ function Page() {
         className="absolute bottom-0 left-1/2 -translate-x-1/2 w-full max-w-[75rem] h-full -z-10"
         aria-hidden
       >
-        <Image src={loginBg} alt="" fill className="object-cover md:object-contain object-bottom" />
+        <Image
+          src={loginBg}
+          alt=""
+          fill
+          priority
+          className="object-cover md:object-contain object-bottom"
+        />
       </div>
 
       <div className="flex flex-col gap-3 text-center">

src/app/oauth/success/page.tsx

@@ -3,23 +3,48 @@
 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { useAuthStore } from '@/shared/@store/auth';
+import { useModalStore } from '@/shared/@store/modal';
 import Spinner from '@/shared/components/spinner/Spinner';
 
 function Page() {
   const router = useRouter();
-  const { user } = useAuthStore();
+  const { setUser, updateUser } = useAuthStore();
+  const { openWelcomeModal } = useModalStore();
 
   useEffect(() => {
-    if (user) {
-      const prevPath = sessionStorage.getItem('preLoginPath') || '/';
-      router.push(prevPath);
-      sessionStorage.removeItem('preLoginPath');
-    }
-  }, [user, router]);
+    const fetchUser = async () => {
+      try {
+        const data = await updateUser();
+
+        console.log(data);
+        // if (data && data.user && data.accessToken) {
+        //   setUser(data.user, data.accessToken); // ✅ Zustand 상태 업데이트 + toast
+
+        //   // 첫 로그인 시 웰컴 모달
+        //   if (data.user.is_first_login) {
+        //     openWelcomeModal(data.user.nickname);
+        //   }
+
+        //   const prevPath = sessionStorage.getItem('preLoginPath') || '/';
+        //   router.push(prevPath);
+        //   sessionStorage.removeItem('preLoginPath');
+        // } else {
+        //   router.push('/login');
+        // }
+      } catch (err) {
+        console.error(err);
+        router.push('/login');
+      }
+    };
+
+    fetchUser();
+  }, [updateUser, setUser, openWelcomeModal, router]);
+
   return (
     <div className="page-layout max-w-824 flex-center">
       <Spinner />
     </div>
   );
 }
+
 export default Page;

src/shared/@store/auth.ts

@@ -5,6 +5,7 @@ interface User {
   id: string;
   email: string;
   nickname: string;
+  is_first_login: boolean;
   abv_degree?: number;
   provider?: 'naver' | 'kakao' | 'google';
 }
@@ -15,8 +16,9 @@ interface AuthState {
   isLoggedIn: boolean;
   setUser: (user: User, token: string) => void;
   logout: () => Promise<void>;
-  refreshToken: () => Promise<void>;
   loginWithProvider: (provider: User['provider']) => void;
+
+  updateUser: () => Promise<User | null>;
 }
 
 export const useAuthStore = create<AuthState>((set) => ({
@@ -28,7 +30,12 @@ export const useAuthStore = create<AuthState>((set) => ({
     window.location.href = `http://localhost:8080/oauth2/authorization/${provider}`;
   },
 
-  setUser: (user, token) => set({ user, accessToken: token, isLoggedIn: true }),
+  setUser: (user, token) => {
+    const updatedUser = { ...user, abv_degree: 5.0 };
+    set({ user: updatedUser, accessToken: token, isLoggedIn: true });
+
+    customToast.success(`${updatedUser.nickname}님, 로그인 성공 🎉`);
+  },
 
   logout: async () => {
     try {
@@ -45,24 +52,29 @@ export const useAuthStore = create<AuthState>((set) => ({
     }
   },
 
-  refreshToken: async () => {
+  updateUser: async () => {
     try {
       const res = await fetch('http://localhost:8080/api/user/auth/refresh', {
         method: 'POST',
         credentials: 'include',
+        headers: { 'Content-Type': 'application/json' },
       });
+
       if (!res.ok) throw new Error('토큰 갱신 실패');
+      const data = await res.json();
+
+      console.log(data);
+      // if (data.accessToken && data.user) {
+      //   set({ accessToken: data.accessToken, user: data.user, isLoggedIn: true });
+      //   console.log('토큰 및 유저 정보 갱신 완료:', data.user);
+      //   return data.user;
+      // }
 
-      const result = await res.json();
-      if (result.code === 0) {
-        set({ isLoggedIn: true, user: result.data.user });
-        customToast.success(`환영합니다😊 \n ${result.data.user.nickname}님`);
-      } else {
-        throw new Error(result.message || '토큰 갱신 실패');
-      }
+      return null;
     } catch (err) {
-      console.error(err);
-      set({ user: null, accessToken: null, isLoggedIn: false });
+      console.error('updateUser 실패', err);
+      set({ accessToken: null, user: null, isLoggedIn: false });
+      return null;
     }
   },
 }));

src/shared/@store/modal.ts

@@ -1,14 +1,21 @@
 import { create } from 'zustand';
 
-interface ModalState {
-  welcomeOpen: boolean;
-  openModal: (modal: keyof ModalState) => void;
-  closeModal: (modal: keyof ModalState) => void;
+interface WelcomeModalData {
+  open: boolean;
+  nickname: string;
 }
 
-export const useModalStore = create<ModalState>((set) => ({
-  welcomeOpen: false,
+interface ModalStore {
+  welcomeModal: WelcomeModalData;
 
-  openModal: (modal) => set({ [modal]: true }),
-  closeModal: (modal) => set({ [modal]: false }),
+  openWelcomeModal: (nickname: string) => void;
+  closeWelcomeModal: () => void;
+}
+
+export const useModalStore = create<ModalStore>((set) => ({
+  welcomeModal: { open: false, nickname: '' },
+
+  openWelcomeModal: (nickname: string) => set({ welcomeModal: { open: true, nickname } }),
+
+  closeWelcomeModal: () => set({ welcomeModal: { open: false, nickname: '' } }),
 }));