✨ feat: 로그인 api 훅 작성 #1

src/api/auth.ts

@@ -0,0 +1,29 @@
+import { SignInRequest, SignInResponse } from '@/types/api/auth';
+import { api } from './index.ts';
+
+/**
+ * 사용자 로그인을 처리하는 함수
+ *
+ * @async
+ * @function signIn
+ * @param {SignInRequest} signinInfo - 로그인에 필요한 사용자 정보
+ * @returns {Promise<SignInResponse>} 로그인 결과 및 사용자 정보
+ * @throws {Error} API 요청 실패 시 에러를 throw
+ *
+ * @description
+ * 이 함수는 주로 useSignIn 커스텀 훅 내부에서 사용됩니다.
+ * 직접 호출하기보다는 useSignIn 훅을 통해 사용하는 것이 권장됩니다.
+ *
+ * @see useSignIn
+ *
+ * @example useSignIn 훅을 통한 사용 (권장)
+ * const { mutate: signIn } = useSignIn();
+ * signIn({ email: 'user@example.com', password: 'password123' });
+ */
+
+export const signIn = async (
+  signinInfo: SignInRequest,
+): Promise<SignInResponse> => {
+  const response = await api.post(`/auth/sign-in`, signinInfo);
+  return response.data;
+};

src/hooks/api/useAuth.ts

@@ -0,0 +1,43 @@
+import { signIn } from '@/api/auth';
+import { SignInResponse } from '@/types/api/auth';
+import { setAccessToken } from '@/utils/auth';
+import { useNavigate } from 'react-router-dom';
+import { useMutation } from '@tanstack/react-query';
+
+/**
+ * 로그인 프로세스를 처리하는 커스텀 훅
+ *
+ * @function useSignIn
+ * @returns {UseMutationResult} Tanstack Query의 useMutation 결과
+ *
+ * @description
+ * 이 훅은 로그인 과정을 관리하며 다음과 같은 기능을 수행합니다:
+ * 1. signIn 함수를 사용하여 로그인 요청을 보냅니다.
+ * 2. 로그인 성공 시 액세스 토큰을 저장하고 홈페이지로 이동합니다.
+ * 3. 로그인 실패 시 로그인 페이지로 리다이렉트합니다.
+ *
+ * @example
+ * const { mutate: signIn, isLoading } = useSignIn();
+ *
+ * const handleSubmit = (data) => {
+ *   signIn(data);
+ * };
+ *
+ * if (isLoading) return <LoadingSpinner />;
+ *
+ * return <LoginForm onSubmit={handleSubmit} />;
+ */
+
+export const useSignIn = () => {
+  const navigate = useNavigate();
+  return useMutation({
+    mutationFn: signIn,
+    onSuccess: (data: SignInResponse) => {
+      setAccessToken(data.access_token);
+      navigate('/');
+    },
+    onError: () => {
+      navigate('/signin');
+    },
+  });
+};