refactor: Form 리팩토링

codeit-bootcamp-frontend · May 3, 2024 · 4d0c121 · 4d0c121
1 parent 1e5a089
commit 4d0c121
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 20 deletions.
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -2,6 +2,7 @@ import Head from "next/head";
 import styled from "styled-components";
 import Link from "next/link";
 import { useEffect, useState } from "react";
+import { safeGetItem } from "@src/utils/safeKey";
 
 const Container = styled.div`
   height: 600px;
@@ -31,10 +32,11 @@ function Home() {
 
   useEffect(() => {
     if (typeof window !== "undefined") {
-      const accessToken = localStorage.getItem("accessToken");
+      const accessToken = safeGetItem("accessToken");
       if (accessToken !== null) setToken(accessToken);
     }
   }, []);
+
   return (
     <>
       <Head>

diff --git a/src/components/sign/ErrorMessages.js → src/components/sign/ErrorMessages.ts b/src/components/sign/ErrorMessages.js → src/components/sign/ErrorMessages.ts
diff --git a/src/components/sign/SigninForm.tsx b/src/components/sign/SigninForm.tsx
@@ -8,6 +8,8 @@ import { postSignIn } from "@src/api";
 import { useRouter } from "next/router";
 import Input from "@src/components/sign/Input";
 import ERROR from "@src/components/sign/ErrorMessages";
+import { saveToLocalStorage } from "@src/utils/safeKey";
+import { emailTextInputProps } from "@src/utils/formProps";
 
 type FormType = {
   email: string;
@@ -32,7 +34,7 @@ function SigninForm() {
       console.log(accessToken);
 
       if (accessToken) {
-        localStorage.setItem("accessToken", accessToken);
+        saveToLocalStorage("accessToken", accessToken);
       } else {
         throw new Error("Access token이 없습니다.");
       }
@@ -56,12 +58,8 @@ function SigninForm() {
       <S.Label>이메일</S.Label>
       <div style={{ position: "relative" }}>
         <Input.TextInput
-          type="text"
-          register={register("email", {
-            required: true,
-            pattern: /^[a-z0-9]+@[a-z]+\.[a-z]{2,3}$/,
-          })}
-          placeholder="이메일을 입력해 주세요"
+          {...emailTextInputProps}
+          register={register("email", emailTextInputProps.registerOptions)}
           $hasError={!!errors.email}
         />
         <S.ErrorMessage>

diff --git a/src/components/sign/SignupForm.tsx b/src/components/sign/SignupForm.tsx
@@ -8,6 +8,10 @@ import { postCheckEmailDuplicate, postSignUp } from "@src/api";
 import { useRouter } from "next/router";
 import Input from "@src/components/sign/Input";
 import ERROR from "@src/components/sign/ErrorMessages";
+import {
+  emailTextInputProps,
+  passwordTextInputProps,
+} from "@src/utils/formProps";
 
 type FormType = {
   email: string;
@@ -87,12 +91,8 @@ function SignupForm() {
       <S.Label>이메일</S.Label>
       <div style={{ position: "relative" }}>
         <Input.TextInput
-          type="text"
-          register={register("email", {
-            required: true,
-            pattern: /^[a-z0-9]+@[a-z]+\.[a-z]{2,3}$/,
-          })}
-          placeholder="이메일을 입력해 주세요"
+          {...emailTextInputProps}
+          register={register("email", emailTextInputProps.registerOptions)}
           $hasError={!!errors.email}
         />
         <S.ErrorMessage>
@@ -106,12 +106,11 @@ function SignupForm() {
       <S.Label>비밀번호</S.Label>
       <div style={{ position: "relative" }}>
         <Input.TextInput
-          type={inputType}
-          register={register("password", {
-            required: true,
-            pattern: /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/,
-          })}
-          placeholder="영문, 숫자를 조합해 8자 이상 입력해 주세요"
+          {...passwordTextInputProps(inputType)}
+          register={
+            (register("password"),
+            passwordTextInputProps(inputType).registerOptions)
+          }
           $hasError={!!errors.password}
         />
         <S.EyeIconWrapper onClick={handleEyeIconClick}>

diff --git a/src/utils/formProps.ts b/src/utils/formProps.ts
@@ -0,0 +1,17 @@
+export const emailTextInputProps = {
+  type: "text",
+  registerOptions: {
+    required: true,
+    pattern: /^[a-z0-9]+@[a-z]+\.[a-z]{2,3}$/,
+  },
+  placeholder: "이메일을 입력해 주세요",
+};
+
+export const passwordTextInputProps = (inputType: string) => ({
+  type: inputType,
+  registerOptions: {
+    required: true,
+    pattern: /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/,
+  },
+  placeholder: "영문, 숫자를 조합해 8자 이상 입력해 주세요",
+});
diff --git a/src/utils/safeKey.tsx b/src/utils/safeKey.tsx
@@ -0,0 +1,16 @@
+export const safeGetItem = (key: string) => {
+  try {
+    return localStorage.getItem(key);
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+};
+
+export const saveToLocalStorage = (key: string, value: string) => {
+  try {
+    localStorage.setItem(key, value);
+  } catch (e) {
+    console.error(e);
+  }
+};