Merge pull request #63 from hhbb0081/test

Fix: 객체 렌더링 오류 해결

.env

@@ -5,4 +5,5 @@ NODE_PATH=src/
 REACT_APP_API_ROOT=http://localhost:8080
 REACT_APP_HOME_URL=http://localhost:3000
 REACT_APP_API_URL=http://readyvery.com
-REACT_APP_KAKAO_LOGIN=http://localhost:8080/oauth2/authorization/kakao
+REACT_APP_KAKAO_LOGIN=http://localhost:8080/oauth2/authorization/kakao
+REACT_API_DOMAIN=localhost

package.json

@@ -28,6 +28,7 @@
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
     "recoil": "^0.7.7",
+    "recoil-persist": "^5.1.0",
     "redux": "^4.2.1",
     "redux-promise": "^0.6.0",
     "redux-thunk": "^2.4.2",

src/App.js

@@ -36,11 +36,11 @@ function App() {
   // const expiredTime = 65000;
   useInterval(() => {
     // console.log(cookies.refreshToken);
-    // if (
-    //   cookies.refreshToken !== "undefined" &&
-    //   cookies.refreshToken !== undefined &&
-    //   cookies.refreshToken
-    // ) {
+    if (
+      cookies.refreshToken !== "undefined" &&
+      cookies.refreshToken !== undefined &&
+      cookies.refreshToken
+    ) {
     if (cookies.accessToken) {
       const config = {
         withCredentials: true,
@@ -59,8 +59,8 @@ function App() {
           navigate("/");
         });
     }
-    // }
-  }, expiredTime);
+    }
+  }, expiredTime - 60000);
   if (location.pathname === "/") {
     return (
       <div>

src/Atom/status.jsx

@@ -1,10 +1,14 @@
 import axios from "axios";
 import { atom, selector } from "recoil";
+import { recoilPersist } from 'recoil-persist';
 import { Refresh } from "../hoc/handleRefresh";
 
+const { persistAtom } = recoilPersist();
+
 export const storeState = atom({
   key: "storeState", // 전역적으로 고유한 값
   default: false, // 초깃값
+  effects_UNSTABLE: [persistAtom],
 });
 
 export const selectStoreState = selector({
@@ -16,11 +20,13 @@ export const selectStoreState = selector({
   set: ({ set }, newValue) => {
     set(storeState, newValue);
   },
+  effects_UNSTABLE: [persistAtom],
 });
 
 export const soundState = atom({
   key: "soundState",
   default: false,
+  effects_UNSTABLE: [persistAtom],
 });
 
 export const selectSoundState = selector({
@@ -32,16 +38,19 @@ export const selectSoundState = selector({
   set: ({ set }, newValue) => {
     set(soundState, newValue);
   },
+  effects_UNSTABLE: [persistAtom],
 });
 
 export const isRecentFirstState = atom({
   key: "isRecentFirstState",
   default: true,
+  effects_UNSTABLE: [persistAtom],
 });
 
 export const isAuthenticatedState = atom({
   key: "isAuthenticatedState",
   default: false,
+  effects_UNSTABLE: [persistAtom],
 });
 
 export const getAuthenticatedSelector = selector({
@@ -58,6 +67,7 @@ export const getAuthenticatedSelector = selector({
   set: ({ set }) => {
     set(isAuthenticatedState, (currentValue) => !currentValue);
   },
+  effects_UNSTABLE: [persistAtom],
 });
 
 export const loginState = atom({
@@ -66,11 +76,13 @@ export const loginState = atom({
     accessToken: null,
     expiredTime: null,
   },
+  effects_UNSTABLE: [persistAtom],
 });
 
 export const userState = atom({
   key: "userState",
   dafault: null,
+  effects_UNSTABLE: [persistAtom],
 });
 
 export const getUserSelector = selector({
@@ -97,6 +109,7 @@ export const getUserSelector = selector({
   set: ({ set }, newValue) => {
     set(userState, newValue);
   },
+  effects_UNSTABLE: [persistAtom],
 });
 
 // export const waitorderState = atom({

src/hoc/auth.jsx

@@ -1,16 +1,18 @@
+import { message } from "antd";
 import moment from "moment";
 import { useEffect } from "react";
 import { useCookies } from "react-cookie";
 import { useLocation, useNavigate } from "react-router-dom";
-import { useRecoilValue, useSetRecoilState } from "recoil";
-import { getUserSelector, loginState } from "../Atom/status";
+import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
+import { getUserSelector, isAuthenticatedState, loginState } from "../Atom/status";
 
 function Auth(SpecificComponent, option) {
   function AuthenticationCheck(props) {
     const navigate = useNavigate();
     const location = useLocation();
     const userInfo = useRecoilValue(getUserSelector);
     // const tokenInfo = useRecoilValue(getAuthenticatedSelector);
+    const [isAuth, setIsAuth] = useRecoilState(isAuthenticatedState);
     const setIsLoggedIn = useSetRecoilState(loginState);
     const [cookies] = useCookies(["accessToken"]);
 
@@ -21,22 +23,19 @@ function Auth(SpecificComponent, option) {
       if (userInfo === "404" && location.pathname !== "/") {
         navigate("/");
       } else {
-        // if(userInfo !== "404"){
-        //   const tokenInfo = useRecoilValue(getAuthenticatedSelector);
-        //   console.log(tokenInfo);
-        // }
+
         if (
-          !window.localStorage.getItem("isAuthenticated") &&
+          !isAuth &&
           cookies?.accessToken
         ) {
           // 첫 로그인 시
-          window.localStorage.setItem("isAuthenticated", true);
+          setIsAuth(true);
           setIsLoggedIn({
             accessToken: getAccessTokenFromCookie(),
             expiredTime: moment().add(1, "hour").format("yyyy-MM-DD HH:mm:ss"),
           });
           navigate("/home");
-          alert("로그인에 성공하셨습니다.");
+          message.success("로그인에 성공하셨습니다.");
         } else {
           if (cookies?.accessToken && location.pathname === "/") {
             // 로그인 상태에서 로그인 화면으로 갔을 경우

src/pages/Home/Receipt/StatusReceipt/PickUpAfterReceipt.jsx

@@ -32,8 +32,16 @@ const PickUpAfterReceipt = ({ orderProps }) => {
             <span className="receipt-text">{e.count}</span>
           </div>
           <div className="receiptOption">
-            {e.options.map((option) => (
-              <span className="receipt-optiontext">└ {option}</span>
+            {e.options?.map((option) => (
+              <span
+              className="receipt-optiontext"
+              style={{
+                color: option?.price !== 0 ? "#D82356" : undefined,
+                fontWeight: "500",
+              }}
+            >
+              └ ({option.category}) {option.name}
+            </span>
             ))}
           </div>
         </React.Fragment>

src/pages/Mypage/MainMypage.jsx

@@ -1,3 +1,4 @@
+import { message } from "antd";
 import axios from "axios";
 import React, { useEffect, useState } from "react";
 import { useCookies } from "react-cookie";
@@ -12,7 +13,7 @@ import "./MainMypage.css";
 const MainMypage = React.memo(() => {
   const navigate = useNavigate();
   const apiUrl = process.env.REACT_APP_API_ROOT;
-  const [, , removeCookies] = useCookies();
+  const [, , removeCookie] = useCookies(["accessToken", "JSESSIONID"]);
   const setIsLoggedIn = useSetRecoilState(loginState);
   const setIsAuthenticated = useSetRecoilState(isAuthenticatedState);
   const [cafeInfo, setCafeInfo] = useState({});
@@ -49,13 +50,14 @@ const MainMypage = React.memo(() => {
           accessToken: null,
           expiredTime: null,
         });
+        removeCookie("accessToken", { domain: process.env.REACT_APP_DOMAIN });
+        removeCookie("JSESSIONID", { domain: process.env.REACT_APP_DOMAIN });
+        // window.localStorage.setItem("isAuthenticated", false);
+        message.success("로그아웃에 성공하셨습니다.");
         navigate("/");
-        removeCookies("accessToken");
-        removeCookies("JSESSIONID");
-        window.localStorage.setItem("isAuthenticated", false);
       })
       .catch((error) => {
-        alert("관리자에게 문의하세요.");
+        message.info("관리자에게 문의하세요.");
         navigate("/");
       });
   };