refactor: 코드 리뷰 내용 반영

멘토 코드 리뷰 내용을 반영하여 변수명 rename, 로직 분리 진행하였습니다.

package.json

@@ -27,12 +27,6 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",

src/commons/cookie/getUser.ts

@@ -8,6 +8,6 @@ export const getLoginState = () => {
   return '로그인';
 };
 
-export const removeUser = () => {
+export const removeToken = () => {
   removeCookie('loginToken');
 };

src/layouts/VGNB.tsx

@@ -1,5 +1,5 @@
 import LogoButton from 'commons/LogoButton';
-import { getLoginState, removeUser } from 'commons/cookie/getUser';
+import { getLoginState, removeToken } from 'commons/cookie/getUser';
 import { Link } from 'react-router-dom';
 
 export interface VGNBProps {
@@ -39,7 +39,7 @@ const VGNB = (props: VGNBProps) => {
               <Link to="/login">
                 <button
                   className="border border-2 box-border border-brand-color text-brand-color rounded-md w-28 py-1"
-                  onClick={removeUser}
+                  onClick={removeToken}
                 >
                   {getLoginState()}
                 </button>

src/layouts/VLargeGNB.tsx

@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 import LogoButton from 'commons/LogoButton';
-import { getLoginState, removeUser } from 'commons/cookie/getUser';
+import { getLoginState, removeToken } from 'commons/cookie/getUser';
 
 export interface VLargeGNBProps {
   handleCategoryButtonClick: () => void;
@@ -64,7 +64,7 @@ const VLargeGNB = (props: VLargeGNBProps) => {
           <Link to="/login">
             <button
               className="border border-2 box-content border-brand-color text-brand-color rounded-md py-1 px-4 transition duration-300 hover:bg-brand-color hover:text-white"
-              onClick={removeUser}
+              onClick={removeToken}
             >
               {getLoginState()}
             </button>

src/pages/login/LoginInputForm.tsx

@@ -24,16 +24,17 @@ const LoginInputForm = () => {
     setIsEmailEmpty(false);
   };
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+  const checkEmpty = () => {
     if (!userInfo.email) {
       setErrorText('이메일을 입력해주세요');
       setIsEmailEmpty(true);
     }
     if (!userInfo.password) {
       setIsPasswordEmpty(true);
     }
-    // email, password 보내기
+  };
+
+  const userfetch = () => {
     fetch(`${process.env.REACT_APP_URI}/account/login`, {
       method: 'POST',
       headers: {
@@ -63,6 +64,14 @@ const LoginInputForm = () => {
       });
   };
 
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    // email, password 비었는지 확인
+    checkEmpty();
+    // email, password 보내기
+    userfetch();
+  };
+
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const target = event.target as HTMLInputElement;
     if (target.id === 'id') {

src/pages/login/VLoginInputForm.tsx

@@ -1,11 +1,20 @@
 import InputGroup from 'commons/InputGroup';
 
-type Props = {
+interface LoginInputFormProps {
   handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   handleSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
   isEmailEmpty: boolean;
   isPasswordEmpty: boolean;
   errorText: string;
+}
+
+interface ErrorTextProps {
+  isEmpty: boolean;
+  text: string;
+}
+
+const ErrorText = ({ isEmpty, text }: ErrorTextProps) => {
+  return <div>{isEmpty && <span className="text-red-500">{text}</span>}</div>;
 };
 
 const VLoginInputForm = ({
@@ -14,7 +23,7 @@ const VLoginInputForm = ({
   isEmailEmpty,
   isPasswordEmpty,
   errorText,
-}: Props) => {
+}: LoginInputFormProps) => {
   return (
     <form
       className="flex flex-col gap-4 w-full max-w-[400px]"
@@ -30,7 +39,8 @@ const VLoginInputForm = ({
         }}
         autocomplete="off"
       />
-      {isEmailEmpty && <div className="text-red-500">{errorText}</div>}
+      <ErrorText isEmpty={isEmailEmpty} text={errorText} />
+
       <InputGroup
         id="password"
         name="비밀번호"
@@ -41,9 +51,7 @@ const VLoginInputForm = ({
         }}
         autocomplete="off"
       />
-      {isPasswordEmpty && (
-        <div className="text-red-500">비밀번호를 입력해주세요.</div>
-      )}
+      <ErrorText isEmpty={isPasswordEmpty} text="비밀번호를 입력해주세요." />
       <button className="bg-brand-color text-white w-full rounded-md p-2">
         로그인
       </button>