Feature/9 로그인 회원가입 구현

.gitignore

@@ -12,6 +12,9 @@ dist
 dist-ssr
 *.local
 
+# Environment variables
+.env  
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

package.json

@@ -13,12 +13,15 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@heroicons/react": "^2.2.0",
     "@reduxjs/toolkit": "^2.4.0",
     "@tanstack/react-query": "^5.62.2",
     "@types/react-redux": "^7.1.34",
     "axios": "^1.7.9",
+    "jwt-decode": "^4.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.54.1",
     "react-redux": "^9.1.2",
     "react-router": "^7.0.2",
     "styled-components": "^6.1.13"
@@ -33,6 +36,7 @@
     "@storybook/react": "^8.4.7",
     "@storybook/react-vite": "^8.4.7",
     "@storybook/test": "^8.4.7",
+    "@types/jwt-decode": "^3.1.0",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",

src/App.tsx

@@ -1,7 +1,8 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import Button from '@/components/atoms/Button';
 import { RouterProvider, createBrowserRouter } from 'react-router';
 import router from '@/routes/router';
+import { Provider } from 'react-redux'; // Redux Provider 임포트
+import { store } from '@/store/store'; // 설정된 Redux 스토어 임포트
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -16,10 +17,11 @@ const queryClient = new QueryClient({
 const App = () => {
   const appRouter = createBrowserRouter(router);
   return (
-    <QueryClientProvider client={queryClient}>
-      <RouterProvider router={appRouter} />
-      <Button variant='primary'>테스트 버튼</Button>
-    </QueryClientProvider>
+    <Provider store={store}>
+      <QueryClientProvider client={queryClient}>
+        <RouterProvider router={appRouter} />
+      </QueryClientProvider>
+    </Provider>
   );
 };
 

src/apis/auth.api.ts

@@ -0,0 +1,70 @@
+import httpClient from './http.api'; // Axios 인스턴스 가져오기
+import { JoinProps } from '@/pages/JoinPage';
+import { LoginProps } from '@/pages/LoginPage';
+
+// 회원가입 요청
+export const join = async (userData: JoinProps) => {
+  try {
+    const { data, status } = await httpClient.post('/api/users/join', userData);
+
+    if (status === 200) {
+      console.log('회원가입 성공:', data);
+      return data;
+    } else if (status === 400 && data.message.includes('입력해주세요')) {
+      console.error('필수 입력값 없음:', data.message);
+      throw new Error(data.message);
+    } else if (status === 400 && data.message.includes('중복된')) {
+      console.error('중복 오류:', data.message);
+      throw new Error(data.message);
+    } else {
+      throw new Error('알 수 없는 회원가입 에러가 발생했습니다.');
+    }
+  } catch (error) {
+    console.error('회원가입 요청 중 에러 발생:', error);
+    throw new Error('회원가입 요청에 실패했습니다. 관리자에게 문의하세요.');
+  }
+};
+
+interface LoginResponse {
+  message: any;
+  success: boolean;
+  token?: string;
+}
+
+// 로그인 요청
+export const login = async (data: LoginProps): Promise<LoginResponse> => {
+  try {
+    const { data: responseData, status } = await httpClient.post<LoginResponse>(
+      '/api/users/login',
+      data
+    );
+
+    if (status === 200 && responseData.success) {
+      console.log('로그인 성공:', responseData);
+      return responseData;
+    } else if (
+      status === 400 &&
+      responseData.message.includes('입력해주세요')
+    ) {
+      console.error('필수 입력값 없음:', responseData.message);
+      throw new Error(responseData.message);
+    } else if (
+      status === 404 &&
+      responseData.message.includes('등록되지 않은 이메일')
+    ) {
+      console.error('등록되지 않은 이메일:', responseData.message);
+      throw new Error(responseData.message);
+    } else if (
+      status === 401 &&
+      responseData.message.includes('비밀번호가 틀렸습니다')
+    ) {
+      console.error('비밀번호 오류:', responseData.message);
+      throw new Error(responseData.message);
+    } else {
+      throw new Error('알 수 없는 로그인 에러가 발생했습니다.');
+    }
+  } catch (error) {
+    console.error('로그인 요청 중 에러 발생:', error);
+    throw new Error('로그인 요청에 실패했습니다. 관리자에게 문의하세요.');
+  }
+};

src/apis/http.api.ts

@@ -0,0 +1,105 @@
+import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
+import { getToken, removeToken } from '@/store/slices/authSlice'; // 토큰 유틸리티 함수 import
+import { logout } from '@/store/slices/authSlice';
+import { store } from '@/store/store';
+
+const BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3333';
+const DEFAULT_TIMEOUT = 30000; // 요청 제한 시간
+
+// Axios 인스턴스 생성 함수
+export const createClient = (config?: AxiosRequestConfig): AxiosInstance => {
+  const axiosInstance = axios.create({
+    baseURL: BASE_URL,
+    timeout: DEFAULT_TIMEOUT,
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    withCredentials: true,
+    ...config,
+  });
+
+  // 요청 인터셉터: Authorization 헤더 동적 설정
+  axiosInstance.interceptors.request.use(
+    (config) => {
+      const accessToken = getToken();
+      if (accessToken) {
+        if (config.headers && typeof config.headers.set === 'function') {
+          // AxiosHeaders 객체 처리
+          config.headers.set('Authorization', `Bearer ${accessToken}`);
+        } else {
+          // 일반 객체 초기화
+          config.headers = {
+            ...config.headers, // 기존 헤더 유지
+            Authorization: `Bearer ${accessToken}`,
+          } as any;
+        }
+      }
+      console.log('Request Headers:', config.headers); // 디버깅용 로그
+      return config;
+    },
+    (error) => {
+      console.error('Request Error:', error);
+      return Promise.reject(error);
+    }
+  );
+
+  // 응답 인터셉터: 401 상태 처리
+  axiosInstance.interceptors.response.use(
+    (response) => response,
+    (error) => {
+      if (error.response?.status === 401) {
+        console.warn('401 Unauthorized: Logging out user...');
+        removeToken(); // 토큰 삭제
+        store.dispatch(logout()); // Redux 상태 초기화
+        window.location.href = '/login'; // 로그인 페이지로 리다이렉트
+        return;
+      }
+      return Promise.reject(error);
+    }
+  );
+
+  return axiosInstance;
+};
+
+// 기본 Axios 인스턴스 생성
+export const httpClient = createClient();
+
+// API 요청 함수
+export const authApi = {
+  join: async (data: { email: string; password: string; nickname: string }) => {
+    try {
+      const response = await httpClient.post('/api/signup', data);
+      return response.data;
+    } catch (error) {
+      console.error('Signup API Error:', error);
+      throw error;
+    }
+  },
+  login: async (data: { email: string; password: string }) => {
+    try {
+      const response = await httpClient.post('/api/login', data);
+      const { token } = response.data;
+
+      // 토큰 저장
+      localStorage.setItem('accessToken', token); // 필요 시 유틸리티 함수 사용 가능
+      return response.data;
+    } catch (error) {
+      console.error('Login API Error:', error);
+      throw error;
+    }
+  },
+  logout: async () => {
+    try {
+      await httpClient.post('/api/logout');
+      removeToken(); // 토큰 삭제
+      store.dispatch(logout()); // Redux 상태 초기화
+      window.location.href = '/login'; // 로그인 페이지로 리다이렉트
+    } catch (error) {
+      console.error('Logout API Error:', error);
+      throw error;
+    }
+  },
+};
+
+// 기본 Axios 인스턴스 내보내기
+export default httpClient;