[권주현] Week19 (#493)

* Add return for dynamic folder useEffect

* Remove function at constants

* Fix import error

* Refactor: 홈 마크업 및 스타일 개선

* Refactor: 회원가입 폼 커스텀 훅 구현

* Remove: 인증관련 컴포넌트 이동을 위해 삭제

* Feat: api url 변경으로 코드 수정

* Remove: 폴더 이동

* Feat: zustand 코드 정리 및 비밀번호 가시성 상태 추가

* Feat: 폼 컴포넌트 분리 후 적용(추후 레이아웃 구현)

* Feat: 로그인 로직에 탠스택 쿼리 적용

* Feat: 회원가입 로직 탠스택 쿼리 적용 후 인증 로직 훅으로 분리

* Refactor: 로그인 부분 개선

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,70 +134,72 @@ 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();
 
   if (!response.ok) {
-    return data.error.message;
+    throw new Error("잘못된 요청입니다.");
   }
-
-  return data;
 }
 
 export async function postSignin({
   email,
   password,
 }: FormValues): Promise<postData> {
-  const response = await fetch(`${CODEIT_BASE_URL}/sign-in`, {
+  const response = await fetch(`${CODEIT_BASE_URL}/auth/sign-in`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
     body: JSON.stringify({ email, password }),
   });
-  const data = await response.json();
 
   if (!response.ok) {
-    return data.error.message;
+    throw new Error("잘못된 요청입니다.");
   }
 
-  return data;
+  const result = await response.json();
+
+  return result;
 }
+
+// 탠스택 쿼리와 미들웨어 api 라우트 구현

common/Auth/Input/index.module.css → components/Auth/Form.module.css

@@ -1,4 +1,23 @@
-.container {
+.formContainer {
+  width: 100%;
+  max-width: 400px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.submitButton {
+  font-size: 20px;
+  width: 100%;
+  height: 60px;
+  border: none;
+  border-radius: 8px;
+  color: var(--white);
+  background: var(--primary-gradient);
+  margin-bottom: 15px;
+}
+
+.inputContainer {
   width: 100%;
   position: relative;
 }
@@ -10,6 +29,7 @@
   border: 1px solid var(--gray-500);
   border-radius: 8px;
   margin-bottom: 10px;
+  font-size: 16px;
 }
 
 .inputWrapper:focus {
@@ -18,15 +38,15 @@
 
 .inputLabel {
   display: inline-block;
-  margin-bottom: 15px;
+  margin-bottom: 10px;
 }
 
-.eyeSlash {
+.eyeIcon {
   border: none;
   background: none;
   position: absolute;
   right: 16px;
-  top: 53px;
+  top: 48px;
 }
 
 .errorBorder {

components/Auth/SigninForm/index.tsx

@@ -0,0 +1,78 @@
+import { useForm } from "react-hook-form";
+import useSignin from "@/hooks/auth/useSignin";
+import { useStoreState } from "@/hooks/state";
+import classNames from "classnames";
+import { FormValues } from "@/types/form";
+import { EMAIL_PATTERN, PW_PATTERN } from "@/constants";
+import { FaEye, FaEyeSlash } from "react-icons/fa";
+import styles from "../Form.module.css";
+
+function SigninForm() {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<FormValues>({ mode: "onBlur" });
+  const { currentType, toggleType } = useStoreState();
+  const { handleSignin } = useSignin();
+
+  return (
+    <form
+      className={styles.formContainer}
+      onSubmit={handleSubmit(handleSignin)}
+    >
+      <div className={styles.inputContainer}>
+        <label className={styles.inputLabel} htmlFor="email">
+          이메일
+        </label>
+        <input
+          id="email"
+          type="text"
+          placeholder="이메일을 입력해 주세요"
+          className={classNames(styles.inputWrapper, {
+            [styles.errorBorder]: errors.email,
+          })}
+          {...register("email", {
+            required: "이메일을 입력해 주세요",
+            pattern: {
+              value: EMAIL_PATTERN,
+              message: "올바른 형식의 이메일을 입력해 주세요",
+            },
+          })}
+        />
+        {errors.email && (
+          <p className={styles.errorMessage}>{errors.email.message}</p>
+        )}
+      </div>
+      <div className={styles.inputContainer}>
+        <label className={styles.inputLabel} htmlFor="password">
+          비밀번호
+        </label>
+        <input
+          id="password"
+          type={currentType}
+          placeholder="영문, 숫자를 조합해 8자 이상 입력해 주세요"
+          className={classNames(styles.inputWrapper, {
+            [styles.errorBorder]: errors.password,
+          })}
+          {...register("password", {
+            required: "비밀번호를 입력해 주세요",
+            pattern: {
+              value: PW_PATTERN,
+              message: "영문, 숫자를 조합해 8자 이상 입력해 주세요",
+            },
+          })}
+        />
+        {errors.password && (
+          <p className={styles.errorMessage}>{errors.password.message}</p>
+        )}
+        <button className={styles.eyeIcon} type="button" onClick={toggleType}>
+          {currentType === "password" ? <FaEye /> : <FaEyeSlash />}
+        </button>
+      </div>
+      <button className={styles.submitButton}>로그인</button>
+    </form>
+  );
+}
+
+export default SigninForm;