feat: React Query로 로그인 기능 통합 및 hooks 폴더명 수정

- hook ⇨ hooks로 폴더명 변경
- 로그인 로직을 React Query의 useMutation으로 리팩토링
- 로컬 로그인 오류 상태 관리 제거
- 로그인 실패 시 toast 알림을 통한 오류 처리 추가
- useSignup을 useAuth로 통합하여 인증 처리 통일
- LoginForm 컴포넌트를 새로운 useAuth 훅을 사용하도록 업데이트

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}

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, {

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";

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";
 

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";

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";
 

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 };
+};