Feat/101/login signup api

next.config.mjs

@@ -30,5 +30,13 @@ const nextConfig = {
       },
     ];
   },
+  async rewrites() {
+    return [
+      {
+        source: '/:path*',
+        destination: `${process.env.NEXT_PUBLIC_API_BASE_URL}/:path*`,
+      },
+    ];
+  },
 };
 export default nextConfig;

src/_apis/auth/auth-apis.tsx

@@ -2,27 +2,33 @@ import { fetchApi } from '@/src/utils/api';
 import { LoginRequest, LoginResponse, SignupRequest, SignupResponse, User } from '@/src/types/auth';
 
 export function signupUser(data: SignupRequest): Promise<{ data: SignupResponse }> {
-  return fetchApi<{ data: SignupResponse }>('/signup', {
+  return fetchApi<{ data: SignupResponse; headers: Headers }>('/auths/signup', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     body: JSON.stringify(data),
+  }).then((response) => {
+    const token = response.headers.get('Authorization');
+    return { data: { token } };
   });
 }
 
 export function loginUser(data: LoginRequest): Promise<{ data: LoginResponse }> {
-  return fetchApi<{ data: LoginResponse }>('/login', {
+  return fetchApi<{ data: LoginResponse; headers: Headers }>('/auths/login', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     body: JSON.stringify(data),
+  }).then((response) => {
+    const token = response.headers.get('Authorization');
+    return { data: { token } };
   });
 }
 
 export function getUser(): Promise<{ data: User }> {
-  return fetchApi<{ data: User }>('/user/1', {
+  return fetchApi<{ data: User }>('/auths/user', {
     method: 'GET',
     headers: {
       'Content-Type': 'application/json',

src/_queries/auth/auth-queries.tsx

@@ -1,36 +1,38 @@
-import { ApiError } from 'next/dist/server/api-utils';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { getUser, loginUser, signupUser } from '@/src/_apis/auth/auth-apis';
 import { useAuthStore } from '@/src/store/use-auth-store';
+import { ApiError } from '@/src/utils/api';
 import { transformKeysToCamel } from '@/src/utils/transform-keys';
 import { LoginRequest, LoginResponse, SignupRequest, SignupResponse, User } from '@/src/types/auth';
 
 export function usePostSignupQuery() {
   const queryClient = useQueryClient();
-  const { login } = useAuthStore();
+  const { login, setUser } = useAuthStore();
 
   return useMutation<{ data: SignupResponse }, ApiError, SignupRequest>({
     mutationFn: signupUser,
     onSuccess: async (response) => {
-      // TODO: token값으로 수정, const { token } = response.data;
-      const token = 'dummyToken123';
+      const token = response.data.token?.replace(/^Bearer\s/, '');
+      if (token) await login(token);
+
       const user: User = await queryClient.fetchQuery(getUserQuery());
-      login(user, token);
+      setUser(user);
     },
   });
 }
 
 export function usePostLoginQuery() {
   const queryClient = useQueryClient();
-  const { login } = useAuthStore();
+  const { login, setUser } = useAuthStore();
 
   return useMutation<{ data: LoginResponse }, ApiError, LoginRequest>({
     mutationFn: loginUser,
     onSuccess: async (response) => {
-      // TODO: token값으로 수정, const { token } = response.data;
-      const token = 'dummyToken123';
+      const token = response.data.token?.replace(/^Bearer\s/, '');
+      if (token) await login(token);
+
       const user: User = await queryClient.fetchQuery(getUserQuery());
-      login(user, token);
+      setUser(user);
     },
   });
 }

src/app/(auth)/login/page.tsx

@@ -19,15 +19,13 @@ export default function LoginPage() {
         router.push('/');
       },
       onError: (error) => {
-        if (error.statusCode === 404) {
-          setError('email', {
-            type: 'manual',
-            message: '이메일 계정이 존재하지 않습니다',
-          });
-        } else if (error.statusCode === 401) {
-          setError('password', {
-            type: 'manual',
-            message: '잘못된 비밀번호입니다',
+        if (error.status === 401) {
+          const { validationErrors } = error.detail;
+          Object.keys(validationErrors).forEach((key) => {
+            setError(key as 'email' | 'password', {
+              type: 'manual',
+              message: validationErrors[key],
+            });
           });
         }
       },

src/app/(auth)/signup/page.tsx

@@ -14,18 +14,21 @@ export default function LoginPage() {
   const { mutate: postSignup } = usePostSignupQuery();
 
   const handleSubmit = async (data: SignupFormValues) => {
-    postSignup(data, {
+    const { confirmPassword, ...requestData } = data;
+
+    postSignup(requestData, {
       onSuccess: () => {
         router.push('/');
       },
       onError: (error) => {
-        if (error.statusCode === 400) {
-          // TODO: parameter 처리 후 message 처리 확인
-          //   const { parameter } = error.parameter;
-          //   setError(parameter, {
-          //     type: 'manual',
-          //     message: error.message,
-          //   });
+        if (error.status === 400) {
+          const { validationErrors } = error.detail;
+          Object.keys(validationErrors).forEach((key) => {
+            setError(key as 'email', {
+              type: 'manual',
+              message: validationErrors[key],
+            });
+          });
         }
       },
     });

src/store/use-auth-store.tsx

@@ -6,8 +6,9 @@ interface AuthState {
   isAuth: boolean;
   user: User | null;
   token: string | null;
-  login: (userData: User, token: string) => void;
+  login: (token: string) => void;
   logout: () => void;
+  setUser: (user: User) => void;
 }
 
 export const useAuthStore = create<AuthState>()(
@@ -16,10 +17,9 @@ export const useAuthStore = create<AuthState>()(
       isAuth: false,
       user: null,
       token: null,
-      login: (userData, token) =>
+      login: (token) =>
         set({
           isAuth: true,
-          user: userData,
           token,
         }),
       logout: () =>
@@ -28,6 +28,7 @@ export const useAuthStore = create<AuthState>()(
           user: null,
           token: null,
         }),
+      setUser: (user: User) => set((state) => ({ ...state, user })),
     }),
     {
       name: 'auth-storage',

src/types/auth.ts

@@ -1,5 +1,5 @@
 export interface SignupResponse {
-  token: string;
+  token: string | null;
 }
 
 export interface SignupRequest {
@@ -9,7 +9,7 @@ export interface SignupRequest {
 }
 
 export interface LoginResponse {
-  token: string;
+  token: string | null;
 }
 
 export interface LoginRequest {

src/utils/api.ts

@@ -1,15 +1,16 @@
 import { useAuthStore } from '@/src/store/use-auth-store';
 
-// TODO: 추후 API URL 수정
-const API_BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL || 'http://localhost:3009';
-
 export class ApiError extends Error {
+  detail: { validationErrors: Record<string, string> } = { validationErrors: {} };
+
   constructor(
     public status: number,
     message: string,
+    detail?: { validationErrors: Record<string, string> }, // 타입을 맞춤
   ) {
     super(message);
     this.name = 'ApiError';
+    if (detail) this.detail = detail;
   }
 }
 
@@ -23,7 +24,6 @@ export async function fetchApi<T>(
   const { signal } = controller;
   const id = setTimeout(() => controller.abort(), timeout);
   const { token } = useAuthStore.getState();
-
   const fetchOptions: RequestInit = {
     ...options,
     signal,
@@ -35,21 +35,23 @@ export async function fetchApi<T>(
   };
 
   try {
-    const response = await fetch(`${API_BASE_URL}${url}`, fetchOptions); // API 요청 실행
+    const response = await fetch(`${url}`, fetchOptions); // API 요청 실행
     if (!response.ok) {
+      let errorDetail;
       let errorMessage;
       try {
-        const errorData = await response.json();
-        errorMessage = errorData.message || `HTTP error! status: ${response.status}`;
+        const { status, message, ...detail } = await response.json();
+        errorMessage = message || `HTTP error! status: ${response.status}`;
+        errorDetail = detail;
       } catch {
         errorMessage = `HTTP error! status: ${response.status}`;
       }
 
-      throw new ApiError(response.status, errorMessage);
+      throw new ApiError(response.status, errorMessage, errorDetail);
     }
 
-    // 응답 데이터를 JSON 형태로 반환
-    return (await response.json()) as T;
+    const data = await response.json();
+    return { ...data, headers: response.headers } as T;
   } catch (error) {
     if (error instanceof Error) {
       if (error.name === 'AbortError') throw new ApiError(408, 'Request timeout');