feat: 로그인&회원가입 api 구현

.gitignore

@@ -29,6 +29,8 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+**/.env
+**/.env.*
 
 # turbo
 .turbo

apps/electron/layers/main/src/mainWindow.ts

@@ -43,11 +43,11 @@ async function createWindow() {
         responseHeaders: {
           ...details.responseHeaders,
           'Content-Security-Policy': [
-            "default-src 'self' 'unsafe-inline' data: https://www.bugi.co.kr;",
-            "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.bugi.co.kr;",
+            "default-src 'self' 'unsafe-inline' data: https://www.bugi.co.kr https://api.bugi.co.kr;",
+            "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.bugi.co.kr https://api.bugi.co.kr;",
             "style-src 'self' 'unsafe-inline' https://www.bugi.co.kr;",
-            "img-src 'self' data: https://www.bugi.co.kr;",
-            "connect-src 'self' https://www.bugi.co.kr;",
+            "img-src 'self' data: https://www.bugi.co.kr https://api.bugi.co.kr;",
+            "connect-src 'self' https://www.bugi.co.kr https://api.bugi.co.kr;",
             "font-src 'self' data: https://www.bugi.co.kr;",
             "object-src 'none';",
           ],

apps/web/package.json

@@ -19,7 +19,8 @@
     "axios": "^1.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^7.9.4"
+    "react-router-dom": "^7.9.4",
+    "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",

apps/web/src/App.tsx

@@ -3,8 +3,11 @@ import { useState } from 'react';
 import { Alert, Button } from 'ui';
 import { router } from './routers';
 import { RouterProvider } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 function App() {
+  const queryClient = new QueryClient();
+
   const [inputData, setInputData] = useState<string>('0.1');
 
   // React Query hooks
@@ -26,9 +29,9 @@ function App() {
   };
 
   return (
-    <>
+    <QueryClientProvider client={queryClient}>
       <RouterProvider router={router} />
-    </>
+    </QueryClientProvider>
   );
 }
 

apps/web/src/api/api.ts

@@ -0,0 +1,67 @@
+import axios, { AxiosError, AxiosInstance, AxiosRequestConfig } from 'axios';
+
+const api: AxiosInstance = axios.create({
+  baseURL: import.meta.env.VITE_BASE_URL as string,
+  withCredentials: true,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
+
+api.interceptors.request.use(
+  (config) => {
+    const accessToken = localStorage.getItem('accessToken');
+    if (accessToken) {
+      config.headers.Authorization = `Bearer ${accessToken}`;
+    }
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  },
+);
+
+api.interceptors.response.use(
+  (response) => response,
+  async (error: AxiosError) => {
+    const originalRequest = error.config as AxiosRequestConfig & {
+      _retry?: boolean;
+    }; // 무한 요청 방지
+
+    if (error.response?.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
+      try {
+        const refreshToken = localStorage.getItem('refreshToken');
+
+        const { data: newToken } = await axios.post<{
+          accessToken: string;
+          refreshToken: string;
+        }>(
+          `${import.meta.env.VITE_BASE_URL}/auth/refresh`,
+          { refreshToken },
+          { withCredentials: true },
+        );
+
+        localStorage.setItem('accessToken', newToken.accessToken);
+        localStorage.setItem('refreshToken', newToken.refreshToken);
+
+        api.defaults.headers.common['Authorization'] =
+          `Bearer ${newToken.accessToken}`;
+        if (originalRequest.headers) {
+          originalRequest.headers['Authorization'] =
+            `Bearer ${newToken.accessToken}`;
+        }
+
+        return api(originalRequest);
+      } catch (_err) {
+        localStorage.clear();
+        window.location.href = '/auth/login';
+        return Promise.reject(_err);
+      }
+    }
+
+    return Promise.reject(error);
+  },
+);
+
+export default api;

apps/web/src/api/login/useLoginMutation.ts

@@ -0,0 +1,37 @@
+import { useMutation } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+import api from '../api';
+import { LoginInput, LoginResponse } from '../../types/login/mutation';
+
+/*로그인 api */
+const login = async (data: LoginInput): Promise<LoginResponse> => {
+  const response = await api.post<LoginResponse>('/auth/login', data);
+  const result = response.data;
+
+  if (!result.success) {
+    throw new Error(result.message || '로그인 실패');
+  }
+
+  return result;
+};
+
+export const useLoginMutation = () => {
+  const navigate = useNavigate();
+
+  return useMutation({
+    mutationFn: login,
+    onSuccess: async (res) => {
+      console.log('로그인 성공', res);
+
+      /*access Token, refresh Token 저장 */
+      localStorage.setItem('accessToken', res.data.accessToken);
+      localStorage.setItem('refreshToken', res.data.refreshToken);
+
+      navigate('/onboarding');
+    },
+    onError: (error) => {
+      console.error('로그인 오류:', error);
+      alert('로그인 실패');
+    },
+  });
+};

apps/web/src/api/signup/signup.ts

@@ -0,0 +1,56 @@
+import { useMutation } from '@tanstack/react-query';
+import api from '../api';
+import { useNavigate } from 'react-router-dom';
+
+export interface SignupRequest {
+  email: string;
+  password: string;
+  name: string;
+  callbackUrl: string;
+  avatar?: string;
+}
+
+/* 이메일 중복 확인 api */
+const duplicatedEmail = async (email: string) => {
+  const response = await api.post('/auth/check-email', { email });
+  return response.data;
+};
+
+/* 회원가입 api */
+const signupUser = async (data: SignupRequest) => {
+  const response = await api.post(`/auth/sign-up`, {
+    ...data,
+    callbackUrl: `${window.location.origin}/auth/verify`,
+  });
+  const result = response.data;
+
+  /* 회원가입 실패 시 예외 처리 */
+  if (!result.success) {
+    throw new Error(result || '회원가입 실패');
+  }
+
+  return response.data;
+};
+
+export const useDuplicatedEmailMutation = () => {
+  return useMutation({
+    mutationFn: duplicatedEmail,
+  });
+};
+
+export const useSignupMutation = () => {
+  const navigate = useNavigate();
+
+  return useMutation({
+    mutationFn: signupUser,
+    onSuccess: (data) => {
+      // 회원가입 성공 시, 인증 안내 페이지로 이동
+      navigate('/auth/verify');
+      console.log('회원가입 성공:', data);
+    },
+    onError: (error: unknown) => {
+      console.error('회원가입 실패:', error);
+      alert('회원가입에 실패했습니다. 잠시 후 다시 시도해주세요.');
+    },
+  });
+};

apps/web/src/api/signup/verifyEmail.ts

@@ -0,0 +1,69 @@
+import { useMutation } from '@tanstack/react-query';
+import api from '../api';
+import { useNavigate } from 'react-router-dom';
+
+export interface ResendVerifyEmailRequest {
+  email: string;
+  callbackUrl: string;
+}
+
+/*이메일 인증 api*/
+const verifyEmail = async (token: string) => {
+  const response = await api.post('/auth/verify-email', { token });
+  const result = response.data;
+
+  if (!result.success) {
+    throw new Error(result || '인증 실패');
+  }
+
+  return response.data;
+};
+
+/*이메일 인증 다시 보내기 api*/
+const resendVerifyEmail = async (data: ResendVerifyEmailRequest) => {
+  const response = await api.post('/auth/resend-verification-email', {
+    ...data,
+    callbackUrl: `${window.location.origin}/auth/resend`,
+  });
+
+  const result = response.data;
+
+  if (!result.success) {
+    console.log(result);
+    throw new Error(result || '다시 보내기 실패');
+  }
+
+  return response.data;
+};
+
+export const useVerifyEmailMutation = () => {
+  return useMutation({
+    mutationFn: verifyEmail,
+
+    onSuccess: (data) => {
+      console.log('이메일 인증 성공:', data);
+      alert('인증 성공!');
+      localStorage.clear();
+    },
+    onError: (error: unknown) => {
+      console.error('인증 실패:', error);
+      alert('인증 실패! 다시 시도해주세요');
+    },
+  });
+};
+
+export const useResendVerifyEmailMuation = () => {
+  const navigate = useNavigate();
+
+  return useMutation({
+    mutationFn: resendVerifyEmail,
+
+    onSuccess: (data) => {
+      navigate('/auth/resend');
+      console.log('인증 다시 보내기 성공:', data);
+    },
+    onError: (error: unknown) => {
+      console.error('인증 다시 보내기 실패:', error);
+    },
+  });
+};

apps/web/src/main.tsx

@@ -16,9 +16,7 @@ const queryClient = new QueryClient({
 });
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <App />
-    </QueryClientProvider>
-  </React.StrictMode>,
+  <QueryClientProvider client={queryClient}>
+    <App />
+  </QueryClientProvider>,
 );