[권주현] Week19

api.ts

@@ -1,5 +1,4 @@
 import { CODEIT_BASE_URL } from "@/constants";
-import { FormValues } from "./common/Auth/Form";
 import {
   FolderData,
   LinkData,
@@ -9,6 +8,7 @@ import {
   Response,
   UserData,
 } from "./types/api";
+import { FormValues } from "./types/form";
 
 interface TokenProp {
   token: string;
@@ -134,52 +134,52 @@ export async function getLinksByFolderId({
 
 // POST
 
-export async function postEmailCheck(email: string): Promise<void | string> {
-  const response = await fetch(`${CODEIT_BASE_URL}/check-email`, {
+export async function postEmailCheck(email: string): Promise<boolean | string> {
+  const response = await fetch(`${CODEIT_BASE_URL}/users/check-email`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
     body: JSON.stringify({ email }),
   });
+  const result = await response.json();
 
   if (response.status === 409) {
-    const data = await response.json();
-    return data.error.message;
+    return result.message;
   }
 
   if (!response.ok) {
     throw new Error("잘못된 요청입니다.");
   }
 
-  return;
+  return result;
 }
 
 interface postData {
-  data: {
-    accessToken: string;
-    refreshToken: string;
-  };
+  data:
+    | {
+        accessToken: string;
+        refreshToken: string;
+      }
+    | { message: string };
 }
 
 export async function postSignup({
   email,
   password,
-}: FormValues): Promise<postData> {
-  const response = await fetch(`${CODEIT_BASE_URL}/sign-up`, {
+}: FormValues): Promise<postData | void> {
+  const response = await fetch(`${CODEIT_BASE_URL}/auth/sign-up`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
     body: JSON.stringify({ email, password }),
   });
-  const data = await response.json();
+  const result = await response.json();
 
   if (!response.ok) {
-    return data.error.message;
+    return result.message;
   }
-
-  return data;
 }
 
 export async function postSignin({

common/Auth/Form/index.tsx

@@ -1,20 +1,5 @@
-import { SubmitHandler, UseFormHandleSubmit } from "react-hook-form";
+import { AuthFormProps } from "@/types/form";
 import styles from "./index.module.css";
-import { ReactNode } from "react";
-import { TProps } from "../Header";
-
-export interface FormValues {
-  email: string;
-  password: string;
-  passwordConfirm?: string;
-}
-
-export interface AuthFormProps {
-  children?: ReactNode;
-  onSubmit: SubmitHandler<FormValues>;
-  handleSubmit: UseFormHandleSubmit<FormValues, undefined>;
-  purpose: TProps;
-}
 
 function AuthForm({
   children,

common/Auth/Input/index.tsx

@@ -1,4 +1,4 @@
-import React, { HTMLInputTypeAttribute, forwardRef, useState } from "react";
+import React, { InputHTMLAttributes, forwardRef, useState } from "react";
 import { FaEyeSlash, FaEye } from "react-icons/fa";
 import styles from "./index.module.css";
 import {
@@ -9,16 +9,15 @@ import {
 } from "react-hook-form";
 import classNames from "classnames";
 
-interface AuthInputProps {
+interface AuthInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  id: string;
   label: string;
-  type: HTMLInputTypeAttribute;
-  placeholder: string;
   register: FieldValues;
   error?: FieldError | Merge<FieldError, FieldErrorsImpl>;
 }
 
 function AuthInput(
-  { label, type, placeholder, register, error }: AuthInputProps,
+  { id, label, type, placeholder, register, error }: AuthInputProps,
   ref: React.ForwardedRef<HTMLInputElement>
 ) {
   const [isVisible, setIsVisible] = useState(false);
@@ -32,10 +31,11 @@ function AuthInput(
 
   return (
     <div className={styles.container}>
-      <label className={styles.inputLabel} htmlFor={type}>
+      <label className={styles.inputLabel} htmlFor={id}>
         {label}
       </label>
       <input
+        id={id}
         type={type}
         placeholder={placeholder}
         className={classNames(styles.inputWrapper, {

constants/index.ts

@@ -1,7 +1,8 @@
 //API
 
 export const KAKAO_KEY = "a841341da0099a5d1291638b48030745";
-export const CODEIT_BASE_URL = "https://bootcamp-api.codeit.kr/api";
+export const CODEIT_BASE_URL =
+  "https://bootcamp-api.codeit.kr/api/linkbrary/v1";
 export const SAMPLE_USER_ID = 1;
 export const SOCIALLINKS = [
   { href: "https://www.kakaocorp.com/page", src: "/images/kakaotalk.png" },

hooks/auth/useSignin.ts

@@ -1,13 +1,9 @@
 import { postSignin } from "@/api";
-import { FormValues } from "@/common/Auth/Form";
+import { AuthHookProp, FormValues } from "@/types/form";
 import { useRouter } from "next/router";
-import { SubmitHandler, UseFormSetError } from "react-hook-form";
+import { SubmitHandler } from "react-hook-form";
 
-interface UseSigninProp {
-  setError: UseFormSetError<FormValues>;
-}
-
-export function useSignin({ setError }: UseSigninProp) {
+export function useSignin({ setError }: AuthHookProp) {
   const router = useRouter();
   const localAccessToken = localStorage.getItem("accessToken");
 

hooks/auth/useSignup.ts

@@ -0,0 +1,46 @@
+import { postEmailCheck, postSignup } from "@/api";
+import { AuthHookProp, FormValues } from "@/types/form";
+import { useRouter } from "next/router";
+import { SubmitHandler } from "react-hook-form";
+
+function useSignup({ setError }: AuthHookProp) {
+  const router = useRouter();
+
+  const handleEmailCheck = async (e: React.FocusEvent<HTMLInputElement>) => {
+    const email = e.target.value;
+    try {
+      if (email.length === 0) return;
+
+      const result = await postEmailCheck(email);
+
+      if (typeof result === "string") {
+        setError(
+          "email",
+          { type: "value", message: result },
+          { shouldFocus: true }
+        );
+      }
+
+      return;
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  const handleSignup: SubmitHandler<FormValues> = async ({
+    email,
+    password,
+  }) => {
+    try {
+      await postSignup({ email, password });
+
+      router.replace("/signin");
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return { handleEmailCheck, handleSignup };
+}
+
+export default useSignup;

pages/signup/index.page.tsx

@@ -1,59 +1,24 @@
-import { SubmitHandler, useForm } from "react-hook-form";
-import { postEmailCheck, postSignup } from "@/api";
+import { useForm } from "react-hook-form";
 import { EMAIL_PATTERN, PW_PATTERN } from "@/constants";
 import AuthHeader from "@/common/Auth/Header";
-import AuthForm, { FormValues } from "@/common/Auth/Form";
+import AuthForm from "@/common/Auth/Form";
 import AuthInput from "@/common/Auth/Input";
 import SocialAuthBox from "@/components/SocialAuthBox";
 import styles from "@/styles/Auth.module.css";
 import React from "react";
-import { useRouter } from "next/router";
+import useSignup from "@/hooks/auth/useSignup";
+import { FormValues } from "@/types/form";
 
 function Signup() {
-  const router = useRouter();
   const {
     register,
     handleSubmit,
     formState: { errors },
     watch,
     setError,
   } = useForm<FormValues>({ mode: "onBlur" });
-
   const password = watch("password");
-
-  const handleEmailCheck = async (e: React.FocusEvent<HTMLInputElement>) => {
-    const email = e.target.value;
-    try {
-      const result = await postEmailCheck(email);
-      console.log("result", result);
-
-      if (result) {
-        setError(
-          "email",
-          { type: "onBlur", message: result },
-          { shouldFocus: true }
-        );
-      }
-
-      return;
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  const handleSignup: SubmitHandler<FormValues> = async ({
-    email,
-    password,
-  }) => {
-    try {
-      const result = await postSignup({ email, password });
-
-      localStorage.setItem("accessToken", result.data.accessToken);
-      router.push("/folder");
-    } catch (error) {
-      console.error(error);
-    }
-  };
+  const { handleEmailCheck, handleSignup } = useSignup({ setError });
 
   return (
     <div className={styles.container}>
@@ -65,6 +30,7 @@ function Signup() {
           onSubmit={handleSignup}
         >
           <AuthInput
+            id="email"
             label="이메일"
             type="text"
             placeholder="이메일을 입력해 주세요"
@@ -79,6 +45,7 @@ function Signup() {
             error={errors.email}
           />
           <AuthInput
+            id="password"
             label="비밀번호"
             type="password"
             placeholder="영문, 숫자를 조합해 8자 이상 입력해 주세요"
@@ -92,6 +59,7 @@ function Signup() {
             error={errors.password}
           />
           <AuthInput
+            id="password-confirm"
             label="비밀번호 확인"
             type="password"
             placeholder="비밀번호와 일치하는 값을 입력해 주세요"

types/form/index.ts

@@ -0,0 +1,24 @@
+import { TProps } from "@/common/Auth/Header";
+import { ReactNode } from "react";
+import {
+  SubmitHandler,
+  UseFormHandleSubmit,
+  UseFormSetError,
+} from "react-hook-form";
+
+export interface AuthHookProp {
+  setError: UseFormSetError<FormValues>;
+}
+
+export interface FormValues {
+  email: string;
+  password: string;
+  passwordConfirm?: string;
+}
+
+export interface AuthFormProps {
+  children?: ReactNode;
+  onSubmit: SubmitHandler<FormValues>;
+  handleSubmit: UseFormHandleSubmit<FormValues, undefined>;
+  purpose: TProps;
+}