배포 전 중간 점검

package.json

@@ -24,6 +24,8 @@
     "react-scripts": "5.0.1",
     "react-slick": "^0.29.0",
     "recoil": "^0.7.7",
+    "recoil-persist": "^5.1.0",
+    "recoilize": "^3.2.0",
     "redux": "^4.2.1",
     "redux-promise": "^0.6.0",
     "redux-thunk": "^2.4.2",

src/App.js

@@ -1,3 +1,4 @@
+import { message } from "antd";
 import axios from "axios";
 import React, { Suspense } from "react";
 import { useCookies } from "react-cookie";
@@ -7,6 +8,7 @@ import HomePage from "../src/pages/HomePage/Homepage";
 import MyPage from "../src/pages/MyPage/MyPage";
 import StoreDetailPage from "../src/pages/StoreDetailPage/StoreDetailPage";
 import "./App.css";
+import loading from "./assets/animation/loading.json";
 import Auth from "./hoc/auth";
 import useInterval from "./hooks/useInterval";
 import CafeSearchPage from "./pages/CafeSearch/CafeSearch";
@@ -63,6 +65,7 @@ function App() {
   // const NewPackagingStatusPage = Auth(PackagingStatusPage, true);
 
   const minute = 1000 * 60 * 60 * 24; // 24시간
+  // const minute = 1000 * 60;
   // 주기적으로 실행되는 함수
   useInterval(() => {
     // 리프레시 토큰이 존재하고, 비어 있지 않은 경우
@@ -81,11 +84,14 @@ function App() {
           console.log(response);
           // 현재 쿠키 삭제
           if (!response.data) {
+            message.info("다시 로그인해주세요.");
             removeCookies();
             navigate("/kakaologin");
           }
         })
         .catch((error) => {
+          console.log(error);
+          message.info("다시 로그인해주세요.");
           navigate("/kakaologin");
         });
     }
@@ -94,7 +100,7 @@ function App() {
   return (
     <div className="App">
       <RecoilRoot>
-        <Suspense fallback={<div>Loading...</div>}>
+        <Suspense fallback={<div><img src={loading} alt="loading"/></div>}>
           <Routes>
             {/* 로그인 하지 않아도 볼 수 있는 페이지 */}
             {/* 메인페이지 */}

src/Atom/status.jsx

@@ -1,10 +1,14 @@
 import axios from "axios";
 import { atom, selector } from "recoil";
+import { recoilPersist } from 'recoil-persist';
+
+const { persistAtom } = recoilPersist();
 
 // 현재 사용자가 인증되었는지 여부를 나타내는 상태
 export const isAuthenticatedState = atom({
   key: "isAuthenticatedState",
   default: false, // 인증되지 않았다고 가정
+  effects_UNSTABLE: [persistAtom],
 });
 
 // 현재 사용자의 인증 상태를 가져오거나 토글하는 selector
@@ -19,6 +23,7 @@ export const getAuthenticatedSelector = selector({
     // 현재 isAuthenticatedState의 값을 반전
     set(isAuthenticatedState, (currentValue) => !currentValue);
   },
+  effects_UNSTABLE: [persistAtom],
 });
 
 // 사용자의 로그인 상태 및 토큰 정보를 저장하는 상태
@@ -28,12 +33,14 @@ export const loginState = atom({
     accessToken: null,
     expiredTime: null,
   },
+  effects_UNSTABLE: [persistAtom],
 });
 
 // 사용자 정보를 저장하는 상태
 export const userState = atom({
   key: "userState",
   dafault: null,
+  effects_UNSTABLE: [persistAtom],
 });
 
 // 사용자 정보를 가져오는 selector
@@ -65,4 +72,5 @@ export const getUserSelector = selector({
     // 가져온 사용자 정보 userState에 저장
     set(userState, newValue);
   },
+  effects_UNSTABLE: [persistAtom],
 });

src/components/views/Header/Header.css

@@ -11,6 +11,7 @@
   z-index: 100;
   align-items: center;
   border-radius: 0rem 0rem 2rem 2rem;
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
 }
 
 .top_header_page {
@@ -46,7 +47,18 @@
 }
 
 .homeIcon {
-  margin-right: 1rem; /* 간격을 주기 위한 마진 값 설정 */
+  margin-left: 1rem; /* 간격을 주기 위한 마진 값 설정 */
+}
+
+.home-link2 {
+  margin-left: auto;
+  margin-right: 2rem;
+}
+
+.homeIcon2 {
+  margin: 0 2rem;
+  /* margin-left: 2rem; */
+  /* 간격을 주기 위한 마진 값 설정 */
 }
 
 /* cart-link 및 bagIcon 스타일 조정 */
@@ -55,7 +67,7 @@
 }
 
 .bagIcon {
-  margin-left: 1rem; /* 간격을 주기 위한 마진 값 설정 */
+  margin-right: 1rem; /* 간격을 주기 위한 마진 값 설정 */
 }
 
 /* homeAndCart 간격 조정 */

src/components/views/Header/Header.jsx

@@ -46,22 +46,30 @@ const Header = ({ headerProps }) => {
             ) : (
               //  isClosed가 false인 경우
               <div className="homeAndCart">
-                {/* 현재 페이지가 홈이 아니고 장바구니 페이지가 아닌 경우에만 홈 아이콘 표시 */}
-                {!isCartPage && (
-                  <Link to="/" className="home-link">
+                {/* 현재 페이지가 홈이 아니고 장바구니 페이지가 아닌 경우에만 장바구니 아이콘 표시 */}
+                {!isCartPage ? (
+                  <div>
+                    <Link to="/cart" className="cart-link">
+                      <img src={icon_bag} alt="bagIcon" className="bag-icon" />
+                    </Link>
+
+                    <Link to="/" className="home-link">
+                      <img
+                        src={home_logo_bk}
+                        alt="homeIcon"
+                        className="homeIcon"
+                      />
+                    </Link>
+                  </div>
+                ) : (
+                  <Link to="/" className="home-link-2">
                     <img
                       src={home_logo_bk}
                       alt="homeIcon"
-                      className="homeIcon"
+                      className="homeIcon2"
                     />
                   </Link>
                 )}
-                {/* 현재 페이지가 홈이 아니고 장바구니 페이지가 아닌 경우에만 장바구니 아이콘 표시 */}
-                {!isCartPage && (
-                  <Link to="/cart" className="cart-link">
-                    <img src={icon_bag} alt="bagIcon" className="bag-icon" />
-                  </Link>
-                )}
               </div>
             )}
           </div>

src/components/views/NavBar/NavBar.css

@@ -17,7 +17,7 @@
   right: 0;
   height: 6rem; /*60px*/
   background-color: #00000000;
-  z-index: 3;
+  z-index: 100;
 
   -webkit-tap-highlight-color: transparent; /*모바일 크롬 브라우저에서 클릭시 하이라이트 제거*/
 }