이메일 중복 메세지 출력 제외 api 완성

codeit-bootcamp-frontend · May 21, 2024 · 14cc812 · 14cc812
1 parent cc81c0c
commit 14cc812
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 22 deletions.
diff --git a/components/InputBox/InputBox.js b/components/InputBox/InputBox.js
@@ -21,10 +21,10 @@ export function InputBox({
     setIsToggle(!isToggle);
   };
 
-  const validationProps =
-    name === "email" || name === "password"
-      ? register(name, valid)
-      : register(name, { validate });
+  const validationProps = {
+    ...valid, // 이메일 필드에 대한 기본 유효성 검사를 포함합니다.
+    validate,
+  };
 
   return (
     <div className={cx("input-wrapper")}>
@@ -36,7 +36,7 @@ export function InputBox({
         })}
         type={name !== "email" ? (isToggle ? "test" : "password") : "text"}
         placeholder={placeholder}
-        {...validationProps}
+        {...register(name, validationProps)}
       />
       <ErrorMessage
         errors={errors}

diff --git a/components/SinginForm/SinginForm.js b/components/SinginForm/SinginForm.js
@@ -1,9 +1,8 @@
-import { useEffect, useRef, useState } from "react";
 import styles from "./SinginForm.module.scss";
 import classNames from "classnames/bind";
 import { useForm } from "react-hook-form";
 import { InputBox } from "../InputBox/InputBox";
-import { regexData } from "../../utils";
+import { postIdPwd, regexData, ApiUrl, checkAccessToken } from "../../utils";
 
 const cx = classNames.bind(styles);
 
@@ -20,17 +19,20 @@ const ValidData = {
   },
 };
 
+checkAccessToken("signInToken");
+
 export function SinginForm() {
   const {
     register,
     handleSubmit,
     formState: { errors },
+    setError,
   } = useForm({
     mode: "onBlur",
   });
 
   const onSubmit = (data) => {
-    console.log(data);
+    postIdPwd(ApiUrl.signin, data, setError, "signInToken");
   };
 
   return (

diff --git a/components/SingupForm/SingupForm.js b/components/SingupForm/SingupForm.js
@@ -2,7 +2,7 @@ import styles from "./SingupForm.module.scss";
 import classNames from "classnames/bind";
 import { useForm } from "react-hook-form";
 import { InputBox } from "../InputBox/InputBox";
-import { regexData } from "../../utils";
+import { checkDuplicateEmail, regexData } from "../../utils";
 
 const cx = classNames.bind(styles);
 
@@ -29,14 +29,15 @@ export function SingupForm() {
     handleSubmit,
     formState: { errors },
     watch,
+    setError,
   } = useForm({
     mode: "onBlur",
   });
 
   const password = watch("password");
 
-  const onSubmit = (data) => {
-    console.log(data);
+  const onSubmit = () => {
+    location.href = "folder";
   };
 
   return (
@@ -48,6 +49,7 @@ export function SingupForm() {
         errors={errors}
         valid={ValidData.email}
         register={register}
+        validate={(value) => checkDuplicateEmail(value) || "이메일 중복됨"}
       />
       <InputBox
         label="비밀번호"

diff --git a/utils/api.js b/utils/api.js
@@ -1,3 +1,59 @@
+import { ApiUrl } from "./url";
+
+export async function postIdPwd(url, inputData, setError, tokenName) {
+  try {
+    const res = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-type": "application/json",
+      },
+      body: JSON.stringify(inputData),
+    });
+
+    if (!res.ok) {
+      throw new Error("bad request");
+    }
+
+    const result = await res.json();
+    const accessToken = result.data.accessToken;
+    saveAccessTokenToLocalStorage(accessToken, tokenName);
+    location.href = "folder";
+  } catch {
+    setError("password", {
+      type: "server",
+      message: "비밀번호를 확인해 주세요",
+    });
+    setError("email", {
+      type: "server",
+      message: "이메일을 확인해 주세요",
+    });
+  }
+}
+
+export async function checkDuplicateEmail(value) {
+  const emailData = {
+    email: value,
+  };
+
+  try {
+    const res = await fetch(ApiUrl.checkEmail, {
+      method: "POST",
+      headers: {
+        "Content-type": "application/json",
+      },
+      body: JSON.stringify(emailData),
+    });
+
+    if (!res.ok) {
+      throw new Error("bad request");
+    }
+
+    return (result = await res.json());
+  } catch {
+    return false;
+  }
+}
+
 export async function getLinkList() {
   const response = await fetch(
     "https://bootcamp-api.codeit.kr/api/sample/folder"
@@ -12,16 +68,15 @@ export async function getData(url) {
   return body;
 }
 
-export async function postData(apiUrl, userData) {
-  const response = await fetch(apiUrl, {
-    method: "POST",
-    headers: {
-      "Content-type": "application/json",
-    },
-    body: JSON.stringify(userData),
-  });
-  if (!response.ok) {
-    throw new Error("페이지 없다.");
+export function saveAccessTokenToLocalStorage(accessToken, accessTokenName) {
+  localStorage.setItem(accessTokenName, accessToken);
+}
+
+export function checkAccessToken(accessToken) {
+  if (typeof window !== "undefined") {
+    const token = localStorage.getItem(accessToken);
+    if (token) {
+      location.href = "folder";
+    }
   }
-  return await response.json();
 }
diff --git a/utils/url.js b/utils/url.js
@@ -4,4 +4,7 @@ export const ApiUrl = {
   sampleUser: `${baseUrl}sample/user`,
   usersFolders: `${baseUrl}users/1/folders`,
   usersLinks: `${baseUrl}users/1/links`,
+  signin: `${baseUrl}sign-in`,
+  signup: `${baseUrl}sign-up`,
+  checkEmail: `${baseUrl}check-email`,
 };