Feat: 회원가입 API 연결

mungyun · web-flow · commit bd01a01a645b · 2024-11-09T17:00:13.000+09:00
Feat: 회원가입 API 연결
diff --git a/components/Layout/AuthLayout.tsx b/components/Layout/AuthLayout.tsx
@@ -5,7 +5,7 @@ import { ReactNode } from "react";
 const AuthLayout = ({ children }: { children: ReactNode }) => {
   const router = useRouter();
   return (
-    <div className="mx-auto bg-gray100 flex flex-col items-center justify-center h-screen py-32">
+    <div className="mx-auto flex flex-col items-center justify-center h-sc py-16">
       <div>
         <Image
           className="cursor-pointer"
diff --git a/hooks/useForm.tsx b/hooks/useForm.tsx
@@ -1,6 +1,7 @@
 import { useState, ChangeEvent, FormEvent } from "react";
 import { useRouter } from "next/router";
 import { postSignIn, postSignUp } from "@/lib/api/auth";
+import { TbWashDryP } from "react-icons/tb";
 
 interface FormValues {
   email: string;
@@ -16,7 +17,7 @@ const INITIAL_VALUES: FormValues = {
   passwordConfirm: "",
 };
 
-export function useForm(isSignUp = false) {
+const useForm = (isSignUp = false) => {
   const [values, setValues] = useState<FormValues>(INITIAL_VALUES);
   const [errors, setErrors] = useState<FormValues>(INITIAL_VALUES);
   const router = useRouter();
@@ -52,7 +53,7 @@ export function useForm(isSignUp = false) {
       if (!value) {
         setErrors((prev) => ({
           ...prev,
-          nickname: "닉네임을 입력해주세요.",
+          nickname: "이름을 입력해주세요.",
         }));
       }
     } else if (name === "password") {
@@ -77,17 +78,26 @@ export function useForm(isSignUp = false) {
     }
   };
 
-  const handleSubmit = (e: FormEvent) => {
+  const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
     if (isFormInvalid()) return;
     const { email, password, nickname } = values;
 
     if (isSignUp) {
-      postSignUp({ email, password, name: nickname || "" });
+      const data = await postSignUp({ email, password, name: nickname || "" });
+
+      if (data) {
+        router.push("/login");
+      } else {
+        alert("회원가입 실패: 이메일 또는 비밀번호를 확인해주세요.");
+      }
     } else {
-      const data: any = postSignIn({ email, password });
+      const data = await postSignIn({ email, password });
+
       if (data) {
-        router.push("/"); // 로그인 성공 후 대시보드로 리디렉션
+        router.push("/");
+      } else {
+        alert("로그인 실패: 이메일 또는 비밀번호를 확인해주세요.");
       }
     }
 
@@ -118,4 +128,6 @@ export function useForm(isSignUp = false) {
     handleSubmit,
     isFormInvalid,
   };
-}
+};
+
+export default useForm;
diff --git a/lib/api/auth.ts b/lib/api/auth.ts
@@ -21,7 +21,7 @@ interface easySignUpProps extends easySignInProps {
 // 회원가입
 export const postSignUp = async (body: signUpProps) => {
   try {
-    const res = await axiosInstance.post("/auth/sign-up", body);
+    const res = await proxy.post("api/auth/sign-up", body);
     if (res.status >= 200 && res.status < 300) return res.data;
   } catch (err) {
     console.error("에러 메시지: ", err instanceof Error ? err.message : err);
diff --git a/pages/api/auth/sign-up.ts b/pages/api/auth/sign-up.ts
@@ -0,0 +1,23 @@
+import axiosInstance from "@/lib/api/axiosInstanceApi";
+import { NextApiRequest, NextApiResponse } from "next";
+
+const handler = async (req: NextApiRequest, res: NextApiResponse) => {
+  if (req.method === "POST") {
+    try {
+      const { email, password, name } = req.body;
+
+      await axiosInstance.post("/auth/sign-up", {
+        email,
+        password,
+        name,
+      });
+      return res.status(200).json({ message: "회원가입 성공" });
+    } catch (error) {
+      return res.status(400).json({ message: "서버 오류" });
+    }
+  } else {
+    res.status(405).json({ message: "허용되지 않은 접근 방법" });
+  }
+};
+
+export default handler;
diff --git a/pages/login/index.tsx b/pages/login/index.tsx
@@ -1,62 +1,71 @@
-import { useForm } from "@/hooks/useForm";
+import useForm from "@/hooks/useForm";
 import AuthInput from "@/components/Auth/AuthInput";
 import SnsLogin from "@/components/Auth/SnsLogin";
 import SubmitButton from "@/components/SubMitButton";
 import AuthLayout from "@/components/Layout/AuthLayout";
 import Link from "next/link";
 
-const Login = () => {
-  const { values, errors, handleChange, handleBlur, handleSubmit } =
-    useForm(false);
+const LoginPage = () => {
+  const {
+    values,
+    errors,
+    handleChange,
+    handleBlur,
+    handleSubmit,
+    isFormInvalid,
+  } = useForm(false);
 
   return (
-    <AuthLayout>
-      <p className="mt-[16px] text-base font-normal">
-        회원이 아니신가요?{" "}
-        <Link
-          href="/signup"
-          className="cursor-pointer text-purple100 underline font-semibold"
+    <div className="bg-gray100 min-h-screen">
+      <AuthLayout>
+        <p className="mt-[16px] text-base font-normal">
+          회원이 아니신가요?{" "}
+          <Link
+            href="/signup"
+            className="cursor-pointer text-purple100 underline font-semibold"
+          >
+            회원 가입하기
+          </Link>
+        </p>
+        <form
+          className="w-full sm:max-w-[325px] md:max-w-[400px] lg:max-w-[400px] mt-[30px]"
+          aria-labelledby="login-form"
+          onSubmit={handleSubmit}
         >
-          회원 가입하기
-        </Link>
-      </p>
-      <form
-        className="w-full sm:max-w-[325px] md:max-w-[400px] lg:max-w-[400px] mt-[30px]"
-        aria-labelledby="login-form"
-        onSubmit={handleSubmit}
-      >
-        <AuthInput
-          text="이메일"
-          type="text"
-          name="email"
-          placeholder="이메일을 입력해주세요."
-          value={values.email}
-          onChange={handleChange}
-          onBlur={handleBlur}
-          error={errors.email}
-        />
-        <AuthInput
-          text="비밀번호"
-          type="password"
-          name="password"
-          placeholder="비밀번호를 입력해주세요."
-          value={values.password}
-          onChange={handleChange}
-          onBlur={handleBlur}
-          error={errors.password}
-        />
-        <SubmitButton
-          type="submit"
-          width="w-full"
-          height="h-[53px]"
-          className="mt-[30px]"
-        >
-          로그인
-        </SubmitButton>
-        <SnsLogin />
-      </form>
-    </AuthLayout>
+          <AuthInput
+            text="이메일"
+            type="text"
+            name="email"
+            placeholder="이메일을 입력해주세요."
+            value={values.email}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            error={errors.email}
+          />
+          <AuthInput
+            text="비밀번호"
+            type="password"
+            name="password"
+            placeholder="비밀번호를 입력해주세요."
+            value={values.password}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            error={errors.password}
+          />
+          <SubmitButton
+            type="submit"
+            width="w-full"
+            height="h-[53px]"
+            className="mt-[30px]"
+            disabled={isFormInvalid()}
+          >
+            로그인
+          </SubmitButton>
+          <SnsLogin />
+        </form>
+      </AuthLayout>
+    </div>
   );
 };
 
-export default Login;
+export default LoginPage;
diff --git a/pages/signup/index.tsx b/pages/signup/index.tsx
@@ -2,53 +2,76 @@ import AuthInput from "@/components/Auth/AuthInput";
 import SubmitButton from "@/components/SubMitButton";
 import AuthLayout from "@/components/Layout/AuthLayout";
 import Link from "next/link";
+import useForm from "@/hooks/useForm";
+
+const SignupPage = () => {
+  const { values, errors, handleChange, handleBlur, handleSubmit } =
+    useForm(true);
 
-const signup = () => {
   return (
-    <AuthLayout>
-      <p className="mt-[16px] text-base font-normal">
-        이미 회원이신가요?{" "}
-        <Link
-          href="/login"
-          className="cursor-pointer text-purple100 underline font-semibold"
+    <div className="bg-gray100 min-h-screen">
+      <AuthLayout>
+        <p className="mt-[16px] text-base font-normal">
+          이미 회원이신가요?{" "}
+          <Link
+            href="/login"
+            className="cursor-pointer text-purple100 underline font-semibold"
+          >
+            로그인하기
+          </Link>
+        </p>
+        <form
+          className="w-full sm:max-w-[325px] md:max-w-[400px] lg:max-w-[400px] mt-[30px] h-full"
+          aria-labelledby="login-form"
+          onSubmit={handleSubmit}
         >
-          로그인하기
-        </Link>
-      </p>
-      <form
-        className="w-full sm:max-w-[325px] md:max-w-[400px] lg:max-w-[400px] mt-[30px]"
-        aria-labelledby="login-form"
-      >
-        <AuthInput
-          text="이메일"
-          type="text"
-          name="email"
-          placeholder="이메일을 입력해주세요."
-        />
-        <AuthInput
-          text="이름"
-          type="text"
-          name="nickname"
-          placeholder="이름을 입력해주세요."
-        />
-        <AuthInput
-          text="비밀번호"
-          type="password"
-          name="password"
-          placeholder="비밀번호를 입력해주세요."
-        />
-        <AuthInput
-          text="비밀번호 확인"
-          type="password"
-          name="passwordConfirm"
-          placeholder="비밀번호를 다시 입력해주세요."
-        />
-        <SubmitButton width="w-full" height="h-[53px]" className="mt-[30px]">
-          회원가입
-        </SubmitButton>
-      </form>
-    </AuthLayout>
+          <AuthInput
+            text="이메일"
+            type="text"
+            name="email"
+            placeholder="이메일을 입력해주세요."
+            value={values.email}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            error={errors.email}
+          />
+          <AuthInput
+            text="이름"
+            type="text"
+            name="nickname"
+            placeholder="이름을 입력해주세요."
+            value={values.nickname}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            error={errors.nickname}
+          />
+          <AuthInput
+            text="비밀번호"
+            type="password"
+            name="password"
+            placeholder="비밀번호를 입력해주세요."
+            value={values.password}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            error={errors.password}
+          />
+          <AuthInput
+            text="비밀번호"
+            type="password"
+            name="passwordConfirm"
+            placeholder="비밀번호를 입력해주세요."
+            value={values.passwordConfirm}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            error={errors.passwordConfirm}
+          />
+          <SubmitButton width="w-full" height="h-[53px]" className="mt-[30px]">
+            회원가입
+          </SubmitButton>
+        </form>
+      </AuthLayout>
+    </div>
   );
 };
 
-export default signup;
+export default SignupPage;
