로그인/회원가입 API

src/_apis/auth/login-apis.ts

@@ -0,0 +1,20 @@
+import { fetchApi } from '@/src/utils/api';
+import { LoginRequest, LoginResponse } from '@/src/types/auth';
+
+export function login(data: LoginRequest): Promise<{ data: LoginResponse }> {
+  return fetchApi<{ data: LoginResponse; headers: Headers }>(
+    '/auths/login',
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    },
+    5000,
+    true,
+  ).then((response) => {
+    const token = response.headers.get('Authorization');
+    return { data: { token } };
+  });
+}

src/_apis/auth/signup-apis.ts

@@ -0,0 +1,20 @@
+import { fetchApi } from '@/src/utils/api';
+import { SignupRequest, SignupResponse } from '@/src/types/auth';
+
+export function signup(data: SignupRequest): Promise<{ data: SignupResponse }> {
+  return fetchApi<{ data: SignupResponse; headers: Headers }>(
+    '/auths/signup',
+    {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    },
+    5000,
+    true,
+  ).then((response) => {
+    const token = response.headers.get('Authorization');
+    return { data: { token } };
+  });
+}

src/_apis/auth/user-apis.ts

@@ -0,0 +1,11 @@
+import { fetchApi } from '@/src/utils/api';
+import { User } from '@/src/types/auth';
+
+export function getUser(): Promise<{ data: User }> {
+  return fetchApi<{ data: User }>('/auths/user', {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+}

src/_queries/auth/login-queries.ts

@@ -0,0 +1,16 @@
+import { useMutation } from '@tanstack/react-query';
+import { login } from '@/src/_apis/auth/login-apis';
+import { ApiError } from '@/src/utils/api';
+import { LoginRequest, LoginResponse } from '@/src/types/auth';
+import { useHandleAuthSuccess } from './use-handle-auth-success';
+
+export function usePostLoginQuery() {
+  const handleAuthSuccess = useHandleAuthSuccess();
+
+  return useMutation<{ data: LoginResponse }, ApiError, LoginRequest>({
+    mutationFn: login,
+    onSuccess: async (response) => {
+      await handleAuthSuccess(response.data.token);
+    },
+  });
+}

src/_queries/auth/signup-queries.ts

@@ -0,0 +1,16 @@
+import { useMutation } from '@tanstack/react-query';
+import { signup } from '@/src/_apis/auth/signup-apis';
+import { ApiError } from '@/src/utils/api';
+import { SignupRequest, SignupResponse } from '@/src/types/auth';
+import { useHandleAuthSuccess } from './use-handle-auth-success';
+
+export function usePostSignupQuery() {
+  const handleAuthSuccess = useHandleAuthSuccess();
+
+  return useMutation<{ data: SignupResponse }, ApiError, SignupRequest>({
+    mutationFn: signup,
+    onSuccess: async (response) => {
+      await handleAuthSuccess(response.data.token);
+    },
+  });
+}

src/_queries/auth/use-handle-auth-success.ts

@@ -0,0 +1,24 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useAuthStore } from '@/src/store/use-auth-store';
+import { User } from '@/src/types/auth';
+import { getUserQuery } from './user-apis';
+
+export function useHandleAuthSuccess() {
+  const queryClient = useQueryClient();
+  const { login, setUser } = useAuthStore();
+
+  return async function handleAuthSuccess(token: string | null) {
+    if (!token) {
+      throw new Error('토큰이 없습니다');
+    }
+
+    try {
+      const accessToken = token.replace(/^Bearer\s/, '');
+      login(accessToken);
+      const user: User = await queryClient.fetchQuery(getUserQuery());
+      setUser(user);
+    } catch (error) {
+      throw new Error('사용자 상태 업데이트 실패');
+    }
+  };
+}

src/_queries/auth/user-apis.ts

@@ -0,0 +1,11 @@
+import { getUser } from '@/src/_apis/auth/user-apis';
+import { transformKeysToCamel } from '@/src/utils/transform-keys';
+import { User } from '@/src/types/auth';
+
+export function getUserQuery() {
+  return {
+    queryKey: ['user'],
+    queryFn: getUser,
+    select: (data: User) => transformKeysToCamel(data),
+  };
+}

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

@@ -4,7 +4,7 @@ import React from 'react';
 import { useForm } from 'react-hook-form';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { usePostLoginQuery } from '@/src/_queries/auth/auth-queries';
+import { usePostLoginQuery } from '@/src/_queries/auth/login-queries';
 import LoginForm, { LoginFormValues } from './_component/login-form';
 
 export default function LoginPage() {

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

@@ -4,7 +4,7 @@ import React from 'react';
 import { useForm } from 'react-hook-form';
 import Link from 'next/link';
 import { useRouter } from 'next/navigation';
-import { usePostSignupQuery } from '@/src/_queries/auth/auth-queries';
+import { usePostSignupQuery } from '@/src/_queries/auth/signup-queries';
 import SignupForm, { SignupFormValues } from './_component/signup-form';
 
 export default function LoginPage() {

src/utils/api.ts

@@ -19,6 +19,7 @@ export async function fetchApi<T>(
   url: string,
   options: RequestInit = {},
   timeout = 5000,
+  isAuth = false,
 ): Promise<T> {
   const controller = new AbortController();
   const { signal } = controller;
@@ -50,8 +51,9 @@ export async function fetchApi<T>(
 
       throw new ApiError(response.status, errorMessage, errorDetail);
     }
-
-    return { data: await response.json() } as T;
+    const data = await response.json();
+    if (isAuth) return { data, headers: response.headers } as T;
+    return { data } as T;
   } catch (error) {
     if (error instanceof Error) {
       if (error.name === 'AbortError') throw new ApiError(408, 'Request timeout');