refact, fixed: useLogout hooks fixed

front/package.json

@@ -17,6 +17,7 @@
     "@types/three": "^0.158.1",
     "axios": "^1.6.2",
     "react": "^18.2.0",
+    "react-cookie": "^6.1.1",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.18.0",
     "styled-components": "^6.1.0",

front/src/hooks/useLogout.tsx

@@ -1,9 +1,14 @@
-import cookie from 'react-cookies';
+import { useCookies } from 'react-cookie';
 
 const useLogout = () => {
-  window.open(`/api/auth/logout`, '_self');
-  cookie.remove('loggedin');
-  window.location.replace('/');
+  const [, , removeCookie] = useCookies(['loggedin']);
+  const logout = () => {
+    window.open(`/api/auth/logout`, '_self');
+    removeCookie('loggedin', { path: '/' });
+    window.location.replace('/');
+  };
+
+  return logout;
 };
 
 export default useLogout;

front/src/pages/Intro/Intro.tsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import cookie from 'react-cookies';
+import { useCookies } from 'react-cookie';
 import styled from 'styled-components';
 import { SnowGlobeCanvas, UIContainer } from '@components';
 import mockData from '@mock';
@@ -23,10 +23,11 @@ const TitleDiv = styled.div`
 const Intro = () => {
   const navigate = useNavigate();
   const { setMessageList } = useContext(MessageListContext);
+  const [cookie] = useCookies(['loggedin']);
 
   useEffect(() => {
     setMessageList(mockData.snowball_data.message_list as Array<Message>);
-    cookie.load('loggedin') ? navigate('/main') : null;
+    cookie.loggedin ? navigate('/main') : null;
   }, [setMessageList, navigate]);
 
   return (

front/src/pages/Main/Main.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useRef, useContext, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
-import cookie from 'react-cookies';
 import styled from 'styled-components';
 import { Loading } from '@utils';
 import { useLogout } from '@hooks';
@@ -14,6 +13,7 @@ import {
   SnowBallData
 } from '@pages/Visit/SnowBallProvider';
 import { MessageListContext, Message } from '@pages/Visit/MessageListProvider';
+import { useCookies } from 'react-cookie';
 
 const MainBodyWrap = styled.div`
   width: 100%;
@@ -66,13 +66,14 @@ const moveSnowball = (
 
 const Main = () => {
   const navigate = useNavigate();
-  const logout = useLogout;
+  const logout = useLogout();
   const { setSnowBallData, setUserData, userData, snowBallData } =
     useContext(SnowBallContext);
   const { setMessageList } = useContext(MessageListContext);
   const leftArrowRef = useRef<HTMLImageElement>(null);
   const rightArrowRef = useRef<HTMLImageElement>(null);
   const [isLoading, setIsLoading] = useState(false);
+  const [cookie] = useCookies(['loggedin']);
 
   const delayButton = () => {
     if (leftArrowRef.current && rightArrowRef.current) {
@@ -92,21 +93,21 @@ const Main = () => {
     }
   };
 
-  // const saveCookie = () => {
-  //   const cookieToken = import.meta.env.VITE_APP_COOKIE_TOKEN;
-  //   const cookieName = 'access_token';
-  //   const cookieValue = cookieToken;
-  //   const today = new Date();
-  //   const expire = new Date();
-  //   const secure = true;
-  //   expire.setDate(today.getDate() + 1);
-  //   document.cookie = `${cookieName}=${cookieValue}; expires=${expire.toUTCString()}; secure=${secure}; path=/`;
-  // };
+  const saveCookie = () => {
+    const cookieToken = import.meta.env.VITE_APP_COOKIE_TOKEN;
+    const cookieName = 'access_token';
+    const cookieValue = cookieToken;
+    const today = new Date();
+    const expire = new Date();
+    const secure = true;
+    expire.setDate(today.getDate() + 1);
+    document.cookie = `${cookieName}=${cookieValue}; expires=${expire.toUTCString()}; secure=${secure}; path=/`;
+  };
 
   useEffect(() => {
-    // saveCookie();
+    saveCookie();
 
-    if (!cookie.load('loggedin')) {
+    if (!cookie.loggedin) {
       navigate('/');
       return;
     }

front/src/pages/Main/MenuModal.tsx

@@ -47,7 +47,7 @@ const StyledClosed = styled(StyledSection)`
 const MenuModal = (props: ModalProps) => {
   const { userData } = useContext(SnowBallContext);
   const navigate = useNavigate();
-  const logout = useLogout;
+  const logout = useLogout();
 
   const makeNewSnowBall = () => {
     navigate('/make/snowball');