feat: 소셜로그인 및 회원가입 연결

- 소셜 로그인, 회원가입 시 리디렉션 페이지 연동 완료
- 유저정보 저장 진행 중

Author: nirii00

package.json

@@ -19,6 +19,7 @@
     "@tanstack/react-query": "^5.66.0",
     "axios": "^1.7.9",
     "gsap": "^3.12.7",
+    "immer": "^10.1.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router": "^7.1.5",

pnpm-lock.yaml

@@ -0,0 +1,11 @@
+// import useAuthStore from '@/stores/authStore';
+
+// import client from './client';
+
+type LoginType = 'kakao' | 'naver' | 'google';
+export const socialLogin = (loginType: LoginType) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  // const { setUserId, setZipCode, login } = useAuthStore.getState();
+    window.location.href = `http://13.209.132.150:8081/oauth2/authorization/${loginType}`;
+};
+

src/apis/auth.ts

@@ -4,18 +4,18 @@ const client = axios.create({
   baseURL: import.meta.env.VITE_API_URL,
 });
 
-// client.interceptors.request.use(
-//   (config) => {
-//     const token = localStorage.getItem('authToken');
-//     if (token) {
-//       config.headers['Authorization'] = `Bearer ${token}`;
-//     }
-//     return config;
-//   },
-//   (error) => {
-//     //TODO: 에러처리
-//     return Promise.reject(error);
-//   },
-// );
+client.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem('authToken');
+    if (token) {
+      config.headers['Authorization'] = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    //TODO: 에러처리
+    return Promise.reject(error);
+  },
+);
 
 export default client;

src/apis/client.ts

@@ -1,8 +1,14 @@
+import { socialLogin } from '@/apis/auth';
 import { GoogleIcon, KakaoIcon, NaverIcon, StampIcon } from '@/assets/icons';
 
 import Background from './components/Background';
 
 const LoginPage = () => {
+  type LoginType = 'kakao' | 'naver' | 'google';
+
+  const handleLogin = (loginType: LoginType) => {
+    socialLogin(loginType);
+  };
   return (
     <>
       <main className="mt-10 flex grow flex-col items-center justify-between">
@@ -22,20 +28,23 @@ const LoginPage = () => {
             type="button"
             className="rounded-full bg-[#03C75A] p-3.5"
             aria-label="네이버 로그인"
+            onClick={() => handleLogin('naver')}
           >
             <NaverIcon />
           </button>
           <button
             type="button"
             className="rounded-full bg-[#FEE500] p-3.5"
             aria-label="카카오 로그인"
+            onClick={() => handleLogin('kakao')}
           >
             <KakaoIcon />
           </button>
           <button
             type="button"
             className="border-gray-5 rounded-full border bg-white p-3.5"
             aria-label="구글 로그인"
+            onClick={() => handleLogin('google')}
           >
             <GoogleIcon />
           </button>

src/pages/Login/index.tsx

@@ -0,0 +1,31 @@
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+
+interface AuthStore {
+  isLoggedIn: boolean;
+  userId: number | null;
+  zipCode: string;
+  login: () => void;
+  logout: () => void;
+  setUserId: (userId: number) => void;
+  setZipCode: (zipCode: string) => void;
+}
+const useAuthStore = create(
+  persist<AuthStore>(
+    (set) => ({
+      isLoggedIn: false,
+      userId: null,
+      zipCode: '',
+      login: () => set({ isLoggedIn: true }),
+      logout: () => set({ isLoggedIn: false, userId: null, zipCode: '' }),
+      setUserId: (userId) => set({ userId: userId }),
+      setZipCode: (zipCode) => set({ zipCode: zipCode }),
+    }),
+    {
+      name: 'userInfo',
+      storage: createJSONStorage(() => sessionStorage),
+    },
+  ),
+);
+
+export default useAuthStore;