Merge pull request #167 from Step3-kakao-tech-campus/feat/#165

코드 리팩토링

src/commons/Input.tsx

@@ -8,11 +8,13 @@ const Input = ({
   onChange,
   autocomplete,
   defaultValue,
+  dataInputType,
 }: InputGroupProps) => {
   return (
     <input
       className="border-2 rounded-md border-gray-300 p-2"
       id={id}
+      data-input-type={dataInputType}
       name={name}
       type={type}
       placeholder={placeholder}

src/commons/InputGroup.tsx

@@ -8,6 +8,7 @@ export interface InputGroupProps
   type: string;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   autocomplete?: string;
+  dataInputType?: string;
 }
 
 const InputGroup = ({
@@ -18,6 +19,7 @@ const InputGroup = ({
   onChange,
   autocomplete,
   defaultValue,
+  dataInputType,
 }: InputGroupProps) => {
   return (
     <Container className={'flex flex-col gap-1'}>
@@ -26,6 +28,7 @@ const InputGroup = ({
       </label>
       <Input
         id={id}
+        dataInputType={dataInputType}
         name={name}
         type={type}
         placeholder={placeholder}

src/commons/UserDropdownBox.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 import { useState } from 'react';
-import { getCookie, removeCookie, setCookie } from './cookie/cookie';
+import { getCookie, removeToken, setCookie } from './cookie/cookie';
 
 // 로그인 되었을 때 상태를 보여주는 SelectBox 제작
 const UserDropdownBox = () => {
@@ -15,11 +15,6 @@ const UserDropdownBox = () => {
     setIsDropdownOpen(!isDropdownOpen);
   };
 
-  const removeToken = () => {
-    removeCookie('loginToken');
-    removeCookie('userAccountInfo');
-  };
-
   const handleOptionClick = (option: string) => {
     switch (option) {
       case 'My 정보 변경':

src/commons/UserToggleBox.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { getCookie, removeCookie, setCookie } from './cookie/cookie';
+import { getCookie, removeToken, setCookie } from './cookie/cookie';
 
 const UserToggleBox = () => {
   const token = getCookie('loginToken');
@@ -13,11 +13,6 @@ const UserToggleBox = () => {
     setTabVisible(!isTabVisible);
   };
 
-  const removeToken = () => {
-    removeCookie('loginToken');
-    removeCookie('userAccountInfo');
-  };
-
   const handleOptionClick = (option: string) => {
     switch (option) {
       case 'My 정보 변경':

src/commons/cookie/cookie.ts

@@ -2,7 +2,16 @@ import { Cookies } from 'react-cookie';
 
 const cookies = new Cookies();
 
-export const setCookie = (name: string, value: string, option?: any) => {
+type CookieSetOptions = {
+  expires?: Date;
+  maxAge?: number;
+};
+
+export const setCookie = (
+  name: string,
+  value: string,
+  option?: CookieSetOptions,
+) => {
   return cookies.set(name, value, { ...option });
 };
 
@@ -14,3 +23,8 @@ export const getCookie = (name: string) => {
 export const removeCookie = (name: string) => {
   return cookies.remove(name);
 };
+
+export const removeToken = () => {
+  removeCookie('loginToken');
+  removeCookie('userAccountInfo');
+};

src/commons/modals/LoginGuideModal.tsx

@@ -34,7 +34,7 @@ const LoginGuideModal = () => {
           <button
             className="bg-brand-color text-white rounded-md px-4 py-1 transition duration-300 hover:bg-white hover:text-brand-color"
             onClick={() => {
-              setCookie('userAccountInfo', 'Not Login');
+              setCookie('userAccountInfo', 'Not Login', { maxAge: 60000 * 30 }); // 30분
               setIsLogined(true);
             }}
           >

src/layouts/ValidateCheckLayout.tsx

@@ -14,8 +14,10 @@ const ValidateCheckLayout: React.FC<LayoutProps> = ({ children }) => {
   const loginToken = getCookie('loginToken');
   const userAccount = getCookie('userAccountInfo');
 
+  // userAccount에 대한 정책 수정이 필요
+  // Layout 먹이는 방식 수정
   useEffect(() => {
-    if (!loginToken && !userAccount) {
+    if (!loginToken && userAccount) {
       // loginToken이 없으면 모달 열기
       setIsLogined(false);
     }

src/pages/editProfile/EditAddressInputGroup.tsx

@@ -1,4 +1,4 @@
-import VAddressInputGroup from 'pages/signUp/VAddressInputGroup';
+import VAddressInputGroup from 'pages/signUp/components/VAddressInputGroup';
 import { useRecoilState } from 'recoil';
 import { shelterSignupState } from 'recoil/shelterState';
 

src/pages/login/LoginInputForm.tsx

@@ -3,6 +3,7 @@ import { useRecoilState } from 'recoil';
 import { useNavigate } from 'react-router-dom';
 import { ShelterLoginType, shelterLoginState } from 'recoil/shelterState';
 import * as Yup from 'yup';
+import { useMutation } from '@tanstack/react-query';
 import VLoginInputForm from './VLoginInputForm';
 import { setCookie } from '../../commons/cookie/cookie';
 
@@ -20,9 +21,8 @@ const LoginInputForm = () => {
     password: Yup.string().required('비밀번호를 입력해주세요.'),
   });
 
-  const userfetch = () => {
-    let token: string;
-    fetch(`${process.env.REACT_APP_URI}/account/login`, {
+  const userFetch = async () => {
+    const res = await fetch(`${process.env.REACT_APP_URI}/account/login`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -32,38 +32,19 @@ const LoginInputForm = () => {
         email: userInfo.email,
         password: userInfo.password,
       }),
-    }).then(async (res) => {
-      const jwtToken = res.headers.get('Authorization');
-      if (jwtToken) {
-        // eslint-disable-next-line prefer-destructuring
-        token = jwtToken.split(' ')[1];
-      } else {
-        console.log('로그인 실패로 token이 Null');
-      }
-      const data = await res.json();
-      if (data.success && token) {
-        const { accountInfo, tokenExpirationDateTime } = data.response;
-        const { id, role } = accountInfo;
-        const tokenExpirationDate = new Date(tokenExpirationDateTime);
-        const timeDifferenceseconds = Math.floor(
-          (Number(tokenExpirationDate) - Number(currentDate)) / 1000,
-        );
-
-        setCookie('accountInfo', `${role} ${id}`, {
-          expires: tokenExpirationDate,
-          maxAge: timeDifferenceseconds,
-        });
-        setCookie('loginToken', token, {
-          expires: tokenExpirationDate,
-          maxAge: timeDifferenceseconds,
-        });
-        navigate('/');
-      } else {
-        // 형식은 맞지만 입력된 값이 가입되지 않은 계정일 때
-        alert(data.error.message);
-      }
-      setIsLoading(false);
     });
+
+    if (!res.ok) {
+      // error 발생 시 처리는 status 값에 따라 하는 것으로 변경 필요
+      const errorData = await res.json();
+      console.error('userFetchError: ', errorData);
+    }
+
+    const response = await res.json();
+    const jwtToken = res.headers.get('Authorization');
+    const token = jwtToken ? jwtToken.split(' ')[1] : '';
+
+    return { response, token };
   };
 
   const validateCheck = () => {
@@ -83,11 +64,32 @@ const LoginInputForm = () => {
       });
   };
 
+  const mutation = useMutation(userFetch, {
+    onSuccess: (data) => {
+      const { accountInfo, tokenExpirationDateTime } = data.response.response;
+      const { id, role } = accountInfo;
+      const tokenExpirationDate = new Date(tokenExpirationDateTime);
+      const timeDifferenceseconds = Math.floor(
+        (Number(tokenExpirationDate) - Number(currentDate)) / 1000,
+      );
+
+      setCookie('accountInfo', `${role} ${id}`, {
+        expires: tokenExpirationDate,
+        maxAge: timeDifferenceseconds,
+      });
+      setCookie('loginToken', data.token, {
+        expires: tokenExpirationDate,
+        maxAge: timeDifferenceseconds,
+      });
+      navigate('/');
+    },
+  });
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
     validateCheck();
-    userfetch();
+    mutation.mutate();
   };
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {

src/pages/map/useMap.ts

@@ -6,6 +6,7 @@ import displayMarker from './displayMarker';
 function useMap<T>(
   containerRef: RefObject<T extends HTMLElement ? T : HTMLElement>,
 ) {
+  const { kakao } = window;
   const [map, setMap] = useState<any>();
   const [searchedPlace, setSearchedPlace] = useState<any>([]);
   const boundRef = useRef<any>();