From 5a49a56d0e0f815a3adac5ea52390ba854a51cfd Mon Sep 17 00:00:00 2001
From: Jungmin <miniharu.zip@gmail.com>
Date: Wed, 30 Oct 2024 21:28:34 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20React=20Query=EB=A1=9C=20=EB=A1=9C?=
 =?UTF-8?q?=EA=B7=B8=EC=9D=B8=20=EA=B8=B0=EB=8A=A5=20=ED=86=B5=ED=95=A9=20?=
 =?UTF-8?q?=EB=B0=8F=20hooks=20=ED=8F=B4=EB=8D=94=EB=AA=85=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- hook ⇨ hooks로 폴더명 변경
- 로그인 로직을 React Query의 useMutation으로 리팩토링
- 로컬 로그인 오류 상태 관리 제거
- 로그인 실패 시 toast 알림을 통한 오류 처리 추가
- useSignup을 useAuth로 통합하여 인증 처리 통일
- LoginForm 컴포넌트를 새로운 useAuth 훅을 사용하도록 업데이트
---
 src/app/(auth)/components/LoginForm.tsx   | 26 +++-------------
 src/app/(auth)/components/SignupForm.tsx  |  4 +--
 src/app/dashboard/components/Sidebar.tsx  |  2 +-
 src/app/dashboard/components/TodoCard.tsx |  2 +-
 src/app/dashboard/components/TodoItem.tsx |  2 +-
 src/components/CreateNewTodo.tsx          |  2 +-
 src/hook/useSignup.tsx                    | 23 --------------
 src/hooks/useAuth.tsx                     | 37 +++++++++++++++++++++++
 src/{hook => hooks}/useModal.tsx          |  0
 9 files changed, 47 insertions(+), 51 deletions(-)
 delete mode 100644 src/hook/useSignup.tsx
 create mode 100644 src/hooks/useAuth.tsx
 rename src/{hook => hooks}/useModal.tsx (100%)

diff --git a/src/app/(auth)/components/LoginForm.tsx b/src/app/(auth)/components/LoginForm.tsx
index d115dd0..fd026c9 100644
--- a/src/app/(auth)/components/LoginForm.tsx
+++ b/src/app/(auth)/components/LoginForm.tsx
@@ -1,20 +1,16 @@
 "use client";
 
-import { useState } from "react";
-import { useRouter } from "next/navigation";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
-import { AxiosError } from "axios";
 
-import { login } from "@/utils/authUtils";
 import LoadingSpinner from "@/components/LoadingSpinner";
+import { useAuth } from "@/hooks/useAuth";
 
 type FormData = z.infer<typeof schema>;
 
 export default function LoginForm() {
-  const router = useRouter();
-  const [loginError, setLoginError] = useState<string | null>(null);
+  const { loginMutation } = useAuth();
 
   const {
     register,
@@ -26,22 +22,9 @@ export default function LoginForm() {
     resolver: zodResolver(schema),
   });
 
-  const onSubmit = async (data: FormData) => {
+  const onSubmit = async (data: { email: string; password: string }) => {
     clearErrors();
-    setLoginError(null);
-
-    try {
-      const success = await login(data.email, data.password);
-      if (success) {
-        router.push("/dashboard");
-      } else {
-        setLoginError("로그인에 실패했습니다. 다시 시도해 주세요.");
-      }
-    } catch (error) {
-      const axiosError = error as AxiosError;
-      console.error("로그인 중 오류 발생:", axiosError);
-      setLoginError("로그인 실패했습니다. 다시 시도해 주세요.");
-    }
+    loginMutation.mutate(data);
   };
 
   return (
@@ -77,7 +60,6 @@ export default function LoginForm() {
       />
       {errors.email && <small className="text-sm text-red-50">{errors.email.message}</small>}
       {errors.password && <small className="mb-5 text-sm text-red-50">{errors.password.message}</small>}
-      {loginError && <small className="mb-5 text-sm text-red-50">{loginError}</small>}
       <button
         type="submit"
         disabled={isSubmitting}
diff --git a/src/app/(auth)/components/SignupForm.tsx b/src/app/(auth)/components/SignupForm.tsx
index 5c6900d..30222dd 100644
--- a/src/app/(auth)/components/SignupForm.tsx
+++ b/src/app/(auth)/components/SignupForm.tsx
@@ -6,7 +6,7 @@ import { z } from "zod";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 
-import { useSignup } from "@/hook/useSignup";
+import { useAuth } from "@/hooks/useAuth";
 
 import SubmitButton from "./SubmitButton";
 import InputField from "./InputField";
@@ -28,7 +28,7 @@ export default function SignupForm() {
     mode: "onChange", // 실시간 유효성 검사를 위해 추가
   });
 
-  const signupMutation = useSignup();
+  const { signupMutation } = useAuth();
 
   const onSubmit = async (data: FormData) => {
     signupMutation.mutate(data, {
diff --git a/src/app/dashboard/components/Sidebar.tsx b/src/app/dashboard/components/Sidebar.tsx
index 54e2ac9..264477c 100644
--- a/src/app/dashboard/components/Sidebar.tsx
+++ b/src/app/dashboard/components/Sidebar.tsx
@@ -8,7 +8,7 @@ import Link from "next/link";
 import { useQueryClient } from "@tanstack/react-query";
 
 import { logout } from "@/utils/authUtils";
-import useModal from "@/hook/useModal";
+import useModal from "@/hooks/useModal";
 import AnimatedText from "@/utils/AnimatedText";
 import { useGoalStore } from "@/store/goalStore";
 import { useAuthStore } from "@/store/authStore";
diff --git a/src/app/dashboard/components/TodoCard.tsx b/src/app/dashboard/components/TodoCard.tsx
index 013cfe3..659c2b1 100644
--- a/src/app/dashboard/components/TodoCard.tsx
+++ b/src/app/dashboard/components/TodoCard.tsx
@@ -7,7 +7,7 @@ import { useRouter } from "next/navigation";
 import { getGoal } from "@/api/goalAPI";
 import { getTodos } from "@/api/todoAPI";
 import { useTodoStore } from "@/store/todoStore";
-import useModal from "@/hook/useModal";
+import useModal from "@/hooks/useModal";
 import CreateNewTodo from "@/components/CreateNewTodo";
 import { GoalType, TodoType } from "@/type";
 
diff --git a/src/app/dashboard/components/TodoItem.tsx b/src/app/dashboard/components/TodoItem.tsx
index 713252d..8dbaa12 100644
--- a/src/app/dashboard/components/TodoItem.tsx
+++ b/src/app/dashboard/components/TodoItem.tsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
 
-import useModal from "@/hook/useModal";
+import useModal from "@/hooks/useModal";
 import CreateNewTodo from "@/components/CreateNewTodo";
 import { getNotes } from "@/api/noteAPI";
 import { deleteTodo, toggleTodo } from "@/api/todoAPI";
diff --git a/src/components/CreateNewTodo.tsx b/src/components/CreateNewTodo.tsx
index 9ad35f8..930ec5b 100644
--- a/src/components/CreateNewTodo.tsx
+++ b/src/components/CreateNewTodo.tsx
@@ -4,7 +4,7 @@ import Image from "next/image";
 
 import { useTodoStore } from "@/store/todoStore";
 import { createTodo, postFile, updateTodo } from "@/api/todoAPI";
-import useModal from "@/hook/useModal";
+import useModal from "@/hooks/useModal";
 import { getGoals } from "@/api/goalAPI";
 import { GoalType, InitialTodoType, TodoType } from "@/type";
 
diff --git a/src/hook/useSignup.tsx b/src/hook/useSignup.tsx
deleted file mode 100644
index 416a536..0000000
--- a/src/hook/useSignup.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { useRouter } from "next/navigation";
-import { toast } from "react-toastify";
-import { useMutation } from "@tanstack/react-query";
-
-import { signup } from "@/api/authAPI";
-import { ErrorType } from "@/api/goalAPI";
-import { poof } from "@/utils/confetti";
-
-export const useSignup = () => {
-  const router = useRouter();
-
-  return useMutation({
-    mutationFn: signup,
-    onSuccess: () => {
-      toast.success("회원가입이 완료되었습니다.");
-      poof();
-      router.push("/login");
-    },
-    onError: (error: ErrorType) => {
-      throw error;
-    },
-  });
-};
diff --git a/src/hooks/useAuth.tsx b/src/hooks/useAuth.tsx
new file mode 100644
index 0000000..0b67ae3
--- /dev/null
+++ b/src/hooks/useAuth.tsx
@@ -0,0 +1,37 @@
+import { useRouter } from "next/navigation";
+import { toast } from "react-toastify";
+import { useMutation } from "@tanstack/react-query";
+
+import { signup } from "@/api/authAPI";
+import { ErrorType } from "@/api/goalAPI";
+import { poof } from "@/utils/confetti";
+import { login } from "@/utils/authUtils";
+
+export const useAuth = () => {
+  const router = useRouter();
+
+  const signupMutation = useMutation({
+    mutationFn: signup,
+    onSuccess: () => {
+      toast.success("회원가입이 완료되었습니다.");
+      poof();
+      router.push("/login");
+    },
+    onError: (error: ErrorType) => {
+      throw error;
+    },
+  });
+
+  const loginMutation = useMutation({
+    mutationFn: (data: { email: string; password: string }) => login(data.email, data.password),
+    onSuccess: () => {
+      router.push("/dashboard");
+    },
+    onError: (error: ErrorType) => {
+      console.error("로그인 중 오류 발생:", error);
+      toast.error("로그인을 실패했습니다. 다시 시도해 주세요.");
+    },
+  });
+
+  return { signupMutation, loginMutation };
+};
diff --git a/src/hook/useModal.tsx b/src/hooks/useModal.tsx
similarity index 100%
rename from src/hook/useModal.tsx
rename to src/hooks/useModal.tsx