refactor: useNav hook

navigate 전 canvas recoil 초기화

front/src/components/Modal/Modal.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { useNavigate } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 import styled from 'styled-components';
 import { axios, theme } from '@utils';
+import { useNav } from '@hooks';
 import { MessageListRecoil, SnowBallRecoil } from '@states';
 
 interface MsgResponse {
@@ -112,7 +112,7 @@ const MButton = styled.button`
 `;
 
 const DeleteModal = (props: DeleteModalProps) => {
-  const navigate = useNavigate();
+  const navigate = useNav();
   const [isModalOpened, setIsModalOpened] = useState(false);
   const modalRef = useRef<HTMLDivElement>(null);
   const setMessageList = useSetRecoilState(MessageListRecoil);

front/src/hooks/index.tsx

@@ -1 +1,2 @@
 export { default as useLogout } from './useLogout';
+export { default as useNav } from './useNav';

front/src/hooks/useNav.tsx

@@ -0,0 +1,17 @@
+import { useNavigate } from 'react-router-dom';
+import { useResetRecoilState } from 'recoil';
+import { PrevRecoil } from '@states';
+
+const useNav = () => {
+  const navigate = useNavigate();
+  const resetPrev = useResetRecoilState(PrevRecoil);
+
+  const customNavigate = (path: string) => {
+    resetPrev();
+    navigate(path);
+  };
+
+  return customNavigate;
+};
+
+export default useNav;

front/src/pages/Intro/Intro.tsx

@@ -1,8 +1,8 @@
 import { useEffect } from 'react';
 import { useCookies } from 'react-cookie';
-import { useNavigate } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 import styled from 'styled-components';
+import { useNav } from '@hooks';
 import { Message, MessageListRecoil } from '@states';
 import { SnowGlobeCanvas, UIContainer } from '@components';
 import mockData from '@mock';
@@ -21,14 +21,14 @@ const TitleDiv = styled.div`
 `;
 
 const Intro = () => {
-  const navigate = useNavigate();
+  const navigate = useNav();
   const [cookie] = useCookies(['loggedin']);
   const setMessageList = useSetRecoilState(MessageListRecoil);
 
   useEffect(() => {
     setMessageList(mockData.snowball_data.message_list as Array<Message>);
     cookie.loggedin ? navigate('/main') : null;
-  }, [setMessageList, navigate]);
+  }, [setMessageList]);
 
   return (
     <>

front/src/pages/Main/LockModal.tsx

@@ -1,9 +1,9 @@
 import { useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { useNavigate } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
 import { axios, theme } from '@utils';
+import { useNav } from '@hooks';
 import { SnowBallRecoil } from '@states';
 
 interface LockModalProps {
@@ -81,7 +81,7 @@ const MButton = styled.button`
 `;
 
 const LockModal = (props: LockModalProps) => {
-  const navigate = useNavigate();
+  const navigate = useNav();
   const modalRef = useRef<HTMLDivElement>(null);
   const [{ snowBallData }, setSnowBallBox] = useRecoilState(SnowBallRecoil);
   const privateFlag = snowBallData.is_message_private;

front/src/pages/Main/Main.tsx

@@ -1,11 +1,10 @@
 import { useEffect, useRef, useState } from 'react';
 import { useCookies } from 'react-cookie';
 import { createPortal } from 'react-dom';
-import { useNavigate } from 'react-router-dom';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import styled from 'styled-components';
 import { Loading, axios } from '@utils';
-import { useLogout } from '@hooks';
+import { useLogout, useNav } from '@hooks';
 import { MessageListRecoil, SnowBallRecoil } from '@states';
 import { SnowGlobeCanvas, UIContainer } from '@components';
 import Introduce from '@pages/Intro/Introduce';
@@ -80,7 +79,7 @@ const Main = () => {
   //   document.cookie = `${cookieName2}=${cookieValue2}; expires=${expire2.toUTCString()}; secure=${secure2}; path=/`;
   // };
 
-  const navigate = useNavigate();
+  const navigate = useNav();
   const logout = useLogout();
   const [cookie] = useCookies(['loggedin']);
 

front/src/pages/Main/MenuModal.tsx

@@ -1,9 +1,8 @@
 import { useRef, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useRecoilValue, useResetRecoilState } from 'recoil';
+import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
-import { useLogout } from '@hooks';
-import { PrevRecoil, SnowBallRecoil } from '@states';
+import { useLogout, useNav } from '@hooks';
+import { SnowBallRecoil } from '@states';
 
 interface ModalProps {
   set: React.Dispatch<React.SetStateAction<boolean>>;
@@ -61,10 +60,9 @@ const ToastMsg = styled.div`
 `;
 
 const MenuModal = (props: ModalProps) => {
-  const navigate = useNavigate();
+  const navigate = useNav();
   const logout = useLogout();
   const { userData } = useRecoilValue(SnowBallRecoil);
-  const resetPrev = useResetRecoilState(PrevRecoil);
 
   const [toast, setToast] = useState(false);
   const timer = useRef<number | null>(null);
@@ -80,7 +78,6 @@ const MenuModal = (props: ModalProps) => {
       }, 1500);
       return;
     }
-    resetPrev();
     navigate('/make/snowball');
   };
 

front/src/pages/Make/Nickname/Nickname.tsx

@@ -1,10 +1,9 @@
 import { useEffect, useRef, useState } from 'react';
 import { useCookies } from 'react-cookie';
-import { useNavigate } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
 import { axios, theme } from '@utils';
-import { useLogout } from '@hooks';
+import { useLogout, useNav } from '@hooks';
 import { SnowBallRecoil } from '@states';
 import { Button } from '@components';
 
@@ -70,7 +69,7 @@ const StyledButtonBox = styled.div`
 `;
 
 const Nickname = () => {
-  const navigate = useNavigate();
+  const navigate = useNav();
   const [nickname, setNickname] = useState(false);
   const [error, setError] = useState(false);
   const [lenWarning, setLenWarning] = useState(false);

front/src/pages/Make/Snowball/MainDeco/DecoEnroll.tsx

@@ -1,8 +1,7 @@
 import React, { useRef, useState } from 'react';
-import { NavigateFunction, useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 import { BlurBody, axios, theme } from '@utils';
-import { useLogout } from '@hooks';
+import { useLogout, useNav } from '@hooks';
 
 interface NaviProps {
   visible: [number, React.Dispatch<React.SetStateAction<number>>];
@@ -80,7 +79,7 @@ const CloseNav = (
   props: NaviProps,
   closeRef: React.RefObject<HTMLDivElement>,
   setIsFocus: React.Dispatch<React.SetStateAction<boolean>>,
-  navigate: NavigateFunction,
+  navigate: (path: string) => void,
   flag: 'close' | 'root'
 ) => {
   const onAnimationEnd = () => {
@@ -107,7 +106,7 @@ const CloseNav = (
 };
 
 const DecoEnroll = (props: NaviProps) => {
-  const navigate = useNavigate();
+  const navigate = useNav();
   const [isFocus, setIsFocus] = useState(true);
   const closeRef = useRef<HTMLDivElement>(null);
   const BlurBodyRef = useRef<HTMLDivElement>(null);

front/src/pages/Make/Snowball/MainDeco/MakeButton.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
 import { LongButton, axios } from '@utils';
+import { useNav } from '@hooks';
 import { MakeDecoRecoil } from '@states';
 
 interface MakeButtonProps {
@@ -31,7 +31,7 @@ const StyledAlert = styled.div`
 `;
 
 const MakeButton = (props: ButtonProps) => {
-  const navigate = useNavigate();
+  const navigate = useNav();
   const { snowballName, mainDecoID, mainColor, bottomID, bottomColor } =
     useRecoilValue(MakeDecoRecoil);
   const [alert, setAlert] = useState(false);

front/src/pages/Make/Snowball/Snowball.tsx

@@ -1,10 +1,9 @@
 import { useEffect, useState } from 'react';
 import { useCookies } from 'react-cookie';
-import { useNavigate } from 'react-router-dom';
 import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
 import { theme } from '@utils';
-import { useLogout } from '@hooks';
+import { useLogout, useNav } from '@hooks';
 import { SnowBallRecoil } from '@states';
 import { Button, SnowGlobeCanvas } from '@components';
 import { MainDeco } from './MainDeco';
@@ -63,7 +62,7 @@ const Home = styled.img`
 `;
 
 const Snowball = () => {
-  const navigate = useNavigate();
+  const navigate = useNav();
   const logout = useLogout();
   const [make, setMake] = useState(false);
 

front/src/pages/Visit/Deco/DecoEnroll.tsx

@@ -1,9 +1,10 @@
 import React, { useRef, useState } from 'react';
-import { NavigateFunction, useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { useResetRecoilState } from 'recoil';
 import styled from 'styled-components';
 import { BlurBody, theme } from '@utils';
-import { PrevRecoil, VisitDecoRecoil } from '@states';
+import { useNav } from '@hooks';
+import { VisitDecoRecoil } from '@states';
 
 interface NaviProps {
   visible: [number, React.Dispatch<React.SetStateAction<number>>];
@@ -68,7 +69,7 @@ const CloseNav = (
   props: NaviProps,
   closeRef: React.RefObject<HTMLDivElement>,
   setIsFocus: React.Dispatch<React.SetStateAction<boolean>>,
-  navigate: NavigateFunction,
+  navigate: (path: string) => void,
   user: string | undefined,
   flag: 'close' | 'root',
   callback: () => void
@@ -97,11 +98,10 @@ const CloseNav = (
 };
 
 const DecoEnroll = (props: NaviProps) => {
-  const navigate = useNavigate();
+  const navigate = useNav();
   const { user } = useParams();
   const [isFocus, setIsFocus] = useState(true);
   const closeRef = useRef<HTMLDivElement>(null);
-  const resetPrev = useResetRecoilState(PrevRecoil);
   const resetVisitDeco = useResetRecoilState(VisitDecoRecoil);
 
   return (
@@ -135,7 +135,6 @@ const DecoEnroll = (props: NaviProps) => {
                   'root',
                   resetVisitDeco
                 );
-                resetPrev();
               }}
             >
               <StyeldButtonText>
@@ -162,7 +161,6 @@ const DecoEnroll = (props: NaviProps) => {
                   'close',
                   resetVisitDeco
                 );
-                resetPrev();
               }}
             >
               <StyeldButtonText>전송한 선물 확인하기</StyeldButtonText>

front/src/pages/Visit/Deco/PostButton.tsx

@@ -1,8 +1,9 @@
 import { useRef, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
 import { LongButton, axios } from '@utils';
+import { useNav } from '@hooks';
 import { SnowBallRecoil, VisitDecoRecoil } from '@states';
 
 interface ButtonProps {
@@ -42,7 +43,7 @@ const ToastMsg = styled.div`
 `;
 
 const PostButton = (props: ButtonProps) => {
-  const navigate = useNavigate();
+  const navigate = useNav();
   const { user } = useParams();
   const [alerts, setAlerts] = useState(false);
   const [toast, setToast] = useState(false);

front/src/pages/Visit/Visit.tsx

@@ -1,15 +1,16 @@
 import { useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { Loading, axios } from '@utils';
+import { useNav } from '@hooks';
 import { Message, MessageListRecoil, SnowBallRecoil } from '@states';
 import { SnowGlobeCanvas, UIContainer } from '@components';
 import VisitBody from './VisitBody';
 import VisitBottom from './VisitBottom';
 import VisitHeader from './VisitHeader';
 
 const Visit = () => {
-  const navigate = useNavigate();
+  const navigate = useNav();
   const { user } = useParams();
   const setMessageList = useSetRecoilState(MessageListRecoil);
   const [{ snowBallData }, setSnowBallBox] = useRecoilState(SnowBallRecoil);
@@ -48,7 +49,7 @@ const Visit = () => {
 
   useEffect(() => {
     getVisitData();
-  }, [navigate, user]);
+  }, [user]);
 
   return (
     <>

front/src/pages/Visit/VisitBody.tsx

@@ -1,8 +1,8 @@
 import { useRef } from 'react';
-import { NavigateFunction, useNavigate } from 'react-router-dom';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import styled from 'styled-components';
 import { axios } from '@utils';
+import { useNav } from '@hooks';
 import {
   Message,
   MessageListRecoil,
@@ -27,7 +27,7 @@ const moveSnowball = async (
   { userData, snowBallData }: SnowBall,
   setSnowBallBox: React.Dispatch<React.SetStateAction<SnowBall>>,
   setMessageListData: React.Dispatch<React.SetStateAction<Array<Message>>>,
-  navigate: NavigateFunction
+  navigate: (path: string) => void
 ) => {
   const nowSnowBallID = userData.snowball_list.findIndex(
     id => id === snowBallData.id
@@ -67,7 +67,7 @@ const moveSnowball = async (
 };
 
 const VisitBody = () => {
-  const navigate = useNavigate();
+  const navigate = useNav();
   const { message, sender, color } = useRecoilValue(MessageRecoil);
   const setMessageList = useSetRecoilState(MessageListRecoil);
   const [{ userData, snowBallData }, setSnowBallBox] =

front/src/pages/Visit/VisitBottom.tsx

@@ -1,16 +1,17 @@
 import { useEffect, useState } from 'react';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { Container, theme } from '@utils';
+import { useNav } from '@hooks';
 import { Button } from '@components';
 
 const VisitBottom = () => {
-  const navigate = useNavigate();
+  const navigate = useNav();
   const { user } = useParams();
   const [write, setWrite] = useState(false);
 
   useEffect(() => {
     write ? navigate('./deco') : null;
-  }, [write, user, navigate]);
+  }, [write, user]);
 
   return (
     <Container>

front/src/pages/Visit/VisitHeader.tsx

@@ -1,7 +1,7 @@
-import { useNavigate } from 'react-router-dom';
 import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
 import { Container } from '@utils';
+import { useNav } from '@hooks';
 import { MessageListRecoil, SnowBallRecoil } from '@states';
 import { HeaderText } from '@components';
 
@@ -30,7 +30,7 @@ const HomeBtn = styled.img`
 `;
 
 const VisitHeader = () => {
-  const navigate = useNavigate();
+  const navigate = useNav();
   const messageList = useRecoilValue(MessageListRecoil);
   const { userData } = useRecoilValue(SnowBallRecoil);