From 5d797440a74bed72dde700a40bef6622ce5daf0f Mon Sep 17 00:00:00 2001
From: Savien/Woo Jun Han <49388937+MrMirror21@users.noreply.github.com>
Date: Wed, 16 Oct 2024 18:05:46 +0900
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8?=
 =?UTF-8?q?=20api=20=ED=9B=85=20=EC=9E=91=EC=84=B1=20#1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/auth.ts          | 29 +++++++++++++++++++++++++++
 src/hooks/api/useAuth.ts | 43 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 72 insertions(+)
 create mode 100644 src/api/auth.ts
 create mode 100644 src/hooks/api/useAuth.ts

diff --git a/src/api/auth.ts b/src/api/auth.ts
new file mode 100644
index 00000000..b54f0c49
--- /dev/null
+++ b/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;
+};
diff --git a/src/hooks/api/useAuth.ts b/src/hooks/api/useAuth.ts
new file mode 100644
index 00000000..a4fc5cd9
--- /dev/null
+++ b/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');
+    },
+  });
+};