diff --git a/pages/index.tsx b/pages/index.tsx index 5ac310c3ff..5f8771ed6b 100644 --- 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 ( <> diff --git a/src/components/sign/ErrorMessages.js b/src/components/sign/ErrorMessages.ts similarity index 100% rename from src/components/sign/ErrorMessages.js rename to src/components/sign/ErrorMessages.ts diff --git a/src/components/sign/SigninForm.tsx b/src/components/sign/SigninForm.tsx index 7c134e68cc..689128adb6 100644 --- 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() { 이메일
diff --git a/src/components/sign/SignupForm.tsx b/src/components/sign/SignupForm.tsx index 0cac72e00c..ff0f9c27da 100644 --- 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() { 이메일
@@ -106,12 +106,11 @@ function SignupForm() { 비밀번호
diff --git a/src/utils/formProps.ts b/src/utils/formProps.ts new file mode 100644 index 0000000000..f53ce644e5 --- /dev/null +++ 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 new file mode 100644 index 0000000000..6a00f63544 --- /dev/null +++ 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); + } +};