Merge pull request #187 from Step3-kakao-tech-campus/feat/#180

page 디렉토리 구조 통일

src/App.tsx

@@ -17,7 +17,6 @@ import ValidateCheckLayout from 'layouts/ValidateCheckLayout';
 import EditProfilePage from 'pages/editProfile/EditProfilePage';
 import GNB from 'layouts/GNB';
 import NotFound from 'pages/notFound/NotFound';
-import ErrorBoundary from 'commons/ErrorBoundary';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -31,6 +30,7 @@ const router = createBrowserRouter([
     children: [
       {
         element: <ValidateCheckLayout />,
+
         children: [
           {
             path: '/',
@@ -96,13 +96,11 @@ const router = createBrowserRouter([
 
 function App() {
   return (
-    <ErrorBoundary>
-      <QueryClientProvider client={queryClient}>
-        <RecoilRoot>
-          <RouterProvider router={router} />;
-        </RecoilRoot>
-      </QueryClientProvider>
-    </ErrorBoundary>
+    <QueryClientProvider client={queryClient}>
+      <RecoilRoot>
+        <RouterProvider router={router} />
+      </RecoilRoot>
+    </QueryClientProvider>
   );
 }
 

src/commons/apis/useGetFetch.ts

@@ -2,27 +2,38 @@ import { useState } from 'react';
 
 const useGetFetch = (url: string) => {
   const [data, setData] = useState<Promise<any>>();
+  const [error, setError] = useState<Promise<Error>>();
   const [getStatusCode, setErrorStatusCode] = useState<number>();
   const [getLoading, setLoading] = useState<boolean>(false);
 
   const getData = async () => {
-    setLoading(true);
-    const response = await fetch(url);
+    try {
+      setLoading(true);
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
 
-    if (!response.ok) {
-      setErrorStatusCode(response.status);
-      return;
-    }
+      if (!response.ok) {
+        setErrorStatusCode(response.status);
+        return;
+      }
 
-    const jsonData = await response.json();
-    setData(jsonData);
-    setLoading(false);
+      const jsonData = await response.json();
+      setData(jsonData);
 
-    // eslint-disable-next-line consistent-return
-    return jsonData;
+      // eslint-disable-next-line consistent-return
+      return jsonData;
+    } catch (err) {
+      setError(err as Promise<Error>);
+    } finally {
+      setLoading(false);
+    }
   };
 
-  return { data, getStatusCode, getLoading, getData };
+  return { data, error, getStatusCode, getLoading, getData };
 };
 
 export default useGetFetch;

src/commons/apis/usePostFetch.ts

@@ -1,7 +1,8 @@
 import { useState } from 'react';
 
 const usePostFetch = (url: string, options: object) => {
-  const [data, setData] = useState();
+  const [data, setData] = useState<Promise<any>>();
+  const [error, setError] = useState<Promise<Error>>();
   const [postStatusCode, setStatusCode] = useState<number>();
   const [postloading, setLoading] = useState<boolean>(false);
 
@@ -14,17 +15,16 @@ const usePostFetch = (url: string, options: object) => {
         setStatusCode(response.status);
         return;
       }
-
       const jsonData = await response.json();
       setData(jsonData);
     } catch (err) {
-      console.error('Error: ', err);
+      setError(err as Promise<Error>);
     } finally {
       setLoading(false);
     }
   };
 
-  return { data, postStatusCode, postloading, postData };
+  return { data, error, postStatusCode, postloading, postData };
 };
 
 export default usePostFetch;

src/commons/Input.tsx → src/commons/components/Input.tsx

@@ -1,4 +1,4 @@
-import { InputGroupProps } from 'commons/InputGroup';
+import { InputGroupProps } from 'commons/components/InputGroup';
 
 const Input = ({
   id,

src/commons/InputGroup.tsx → src/commons/components/InputGroup.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Container from 'commons/Container';
-import Input from 'commons/Input';
+import Container from 'commons/components/Container';
+import Input from 'commons/components/Input';
 
 export interface InputGroupProps
   extends React.HTMLAttributes<HTMLInputElement> {

src/commons/UserDropdownBox.tsx → src/commons/components/UserDropdownBox.tsx

@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 import { useState } from 'react';
-import { getCookie, removeToken, setCookie } from './cookie/cookie';
+import { getCookie, removeToken } from '../cookie/cookie';
 
 // 로그인 되었을 때 상태를 보여주는 SelectBox 제작
 const UserDropdownBox = () => {
@@ -25,7 +25,6 @@ const UserDropdownBox = () => {
         break;
       case '로그아웃':
         removeToken();
-        setCookie('accountInfo', 'Not Login');
         window.location.reload();
         break;
       default:

src/commons/UserToggleBox.tsx → src/commons/components/UserToggleBox.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { getCookie, removeToken, setCookie } from './cookie/cookie';
+import { getCookie, removeToken } from '../cookie/cookie';
 
 const UserToggleBox = () => {
   const token = getCookie('loginToken');
@@ -16,14 +16,13 @@ const UserToggleBox = () => {
   const handleOptionClick = (option: string) => {
     switch (option) {
       case 'My 정보 변경':
-        navigate(`/shelter/${id}/edit`); // 아직 회원정보 수정 페이지 구현 안됨
+        navigate(`/shelter/${id}/edit`);
         break;
       case 'My 보호소 이동':
         navigate(`/shelter/${id}/1`);
         break;
       case '로그아웃':
         removeToken();
-        setCookie('userAccountInfo', 'Not Login');
         window.location.reload();
         break;
       default:

src/commons/VPagenation.tsx → src/commons/components/VPagenation.tsx

@@ -1,4 +1,4 @@
-import PageButton from 'pages/profileList/PageButton';
+import PageButton from 'pages/profileList/components/PageButton';
 
 export function getPaginationItems(
   currentPage: number,

src/commons/cookie/cookie.ts

@@ -26,5 +26,6 @@ export const removeCookie = (name: string) => {
 
 export const removeToken = () => {
   removeCookie('loginToken');
-  removeCookie('userAccountInfo');
+  removeCookie('accountInfo');
+  removeCookie('loginState');
 };

src/commons/modals/AutoplayGuideModal.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const AutoplayGuideModal = () => {
+  return <div></div>;
+};
+
+export default 'AutoplayGuideModal';

src/commons/modals/LoginGuideModal.tsx

@@ -1,48 +1,52 @@
-import { setCookie } from 'commons/cookie/cookie';
+import { removeCookie, setCookie } from 'commons/cookie/cookie';
 import { useNavigate } from 'react-router-dom';
-import { useRecoilState, useRecoilValue } from 'recoil';
+import { useRecoilState } from 'recoil';
 import { tokenCheckState } from 'recoil/shelterState';
 
 const LoginGuideModal = () => {
   const navigate = useNavigate();
-  const [isLogined, setIsLogined] = useRecoilState(tokenCheckState); // default : true
+  const [isLogined, setIsLogined] = useRecoilState(tokenCheckState);
+  // default : true (로그인이 되지 않았을 때 사용하기 위해)
 
   if (isLogined) {
     return null;
   }
 
   return (
-    <dialog
-      className="fixed z-50 flex justify-center w-full h-[20vh] opacity-80 hover:opacity-100 bottom-2 rounded-lg border-2 border-gray-300 text-black"
-      open={isLogined}
-    >
-      <div className="modal-content w-[600px] flex flex-col gap-4 justify-center">
-        <div className="font-bold text-center text-lg">
-          <div>로그인이 만료되었습니다.</div>
-          <div>다시 로그인 하시겠습니까?</div>
+    <>
+      <dialog
+        className="fixed z-50 flex justify-center w-full h-[20vh] opacity-100 hover:opacity-100 bottom-2 rounded-lg border-2 border-gray-300 text-black"
+        open={!isLogined}
+      >
+        <div className="modal-content w-[600px] flex flex-col gap-4 justify-center">
+          <div className="font-bold text-center text-lg">
+            <div>로그인 정보가 만료되었습니다.</div>
+            <div>다시 로그인 하시겠습니까?</div>
+          </div>
+          <div className="flex justify-evenly font-bold ">
+            <button
+              className="border-brand-color text-brand-color border-2 rounded-md px-4 py-1 transition duration-300 hover:bg-brand-color hover:text-white "
+              onClick={() => {
+                navigate('/login');
+                removeCookie('loginState');
+                setIsLogined(true);
+              }}
+            >
+              로그인 하기
+            </button>
+            <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('loginState', 'Not Login');
+                setIsLogined(true);
+              }}
+            >
+              로그아웃 유지하기
+            </button>
+          </div>
         </div>
-        <div className="flex justify-evenly font-bold ">
-          <button
-            className="border-brand-color text-brand-color border-2 rounded-md px-4 py-1 transition duration-300 hover:bg-brand-color hover:text-white "
-            onClick={() => {
-              navigate('/login');
-              setIsLogined(true);
-            }}
-          >
-            로그인 하기
-          </button>
-          <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', { maxAge: 60000 * 30 }); // 30분
-              setIsLogined(true);
-            }}
-          >
-            로그아웃 유지하기
-          </button>
-        </div>
-      </div>
-    </dialog>
+      </dialog>
+    </>
   );
 };
 

src/layouts/VGNB.tsx

@@ -1,5 +1,5 @@
-import LogoButton from 'commons/LogoButton';
-import UserToggleBox from 'commons/UserToggleBox';
+import LogoButton from 'commons/components/LogoButton';
+import UserToggleBox from 'commons/components/UserToggleBox';
 import { Link } from 'react-router-dom';
 
 export interface VGNBProps {

src/layouts/VLargeGNB.tsx

@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
-import LogoButton from 'commons/LogoButton';
-import UserSelectBox from 'commons/UserDropdownBox';
+import LogoButton from 'commons/components/LogoButton';
+import UserSelectBox from 'commons/components/UserDropdownBox';
 
 export interface VLargeGNBProps {
   handleCategoryButtonClick: () => void;

src/layouts/ValidateCheckLayout.tsx

@@ -1,24 +1,23 @@
 import { getCookie } from 'commons/cookie/cookie';
-import LoginGuideModal from 'commons/modals/LoginGuideModal';
-import { useEffect } from 'react';
-import { Outlet } from 'react-router-dom';
+import { lazy, useEffect } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 import { tokenCheckState } from 'recoil/shelterState';
 
+const LoginGuideModal = lazy(() => import('commons/modals/LoginGuideModal'));
+
 const ValidateCheckLayout = () => {
   const setIsLogined = useSetRecoilState(tokenCheckState);
   const loginToken = getCookie('loginToken');
-  const userAccount = getCookie('userAccountInfo');
+  const loginState = getCookie('loginState');
+  const location = useLocation();
 
-  // userAccount에 대한 정책 수정이 필요
-  // Layout 먹이는 방식 수정
+  // 로그인 정보가 담긴 쿠키가 만료된 상태에서 사용자가 api 호출 관련 기능을 쓰기 전에 미리 알려주기
   useEffect(() => {
-    if (!loginToken && userAccount === 'Login') {
-      // loginToken이 없으면 모달 열기
+    if (!loginToken && loginState === 'Login') {
       setIsLogined(false);
     }
-    console.log('token 로직 동작');
-  }, [loginToken, userAccount]);
+  }, [location]);
 
   return (
     <>

src/pages/detailPet/DetailPetPage.tsx

@@ -1,5 +1,5 @@
-import DetailPetData from 'pages/detailPet/DetailPetData';
-import ErrorBoundary from 'commons/ErrorBoundary';
+import DetailPetData from 'pages/detailPet/components/DetailPetData';
+import ErrorBoundary from 'layouts/ErrorBoundary';
 
 const DetailPetPage = () => {
   return (