From 8e46186a9704ec66ccebddc5f990810f26c6ad97 Mon Sep 17 00:00:00 2001
From: MyungJiwoo <1206jiwoo@gmail.com>
Date: Wed, 9 Oct 2024 22:07:03 +0900
Subject: [PATCH] =?UTF-8?q?#91=20fix:=20=EB=9D=BC=EC=9A=B0=ED=84=B0=20?=
 =?UTF-8?q?=EC=B6=A9=EB=8F=8C=20=EC=98=A4=EB=A5=98=EB=95=8C=EB=AC=B8?=
 =?UTF-8?q?=EC=97=90=20=EC=9E=90=EB=8F=99=EC=A0=80=EC=9E=A5(=EB=9D=BC?=
 =?UTF-8?q?=EC=9A=B0=ED=84=B0=20=EB=B3=80=EA=B2=BD=20=EA=B0=90=EC=A7=80)?=
 =?UTF-8?q?=20=EC=A3=BC=EC=84=9D=EC=B2=98=EB=A6=AC=20-=20=EB=A6=AC?=
 =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81=20=EC=98=88=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                | 34 +++++++++++++++-------------------
 src/index.tsx              |  8 ++++----
 src/pages/SidePage.tsx     | 36 ++++++++++++++++++++++++------------
 src/pages/TeamDocument.tsx | 21 +++++++++++----------
 4 files changed, 54 insertions(+), 45 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index f542f44..e43b067 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Routes, Route, Navigate } from 'react-router-dom';
+import { Routes, Route } from 'react-router-dom';
 import MainPage from './pages/MainPage';
 import LoginPage from './pages/LoginPage';
 import MyPage from './pages/MyPage';
@@ -37,7 +37,7 @@ const queryClient = new QueryClient();
 // 로그인 상태를 체크하는 함수
 const useAuth = () => {
   const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
-  const [loading, setLoading] = useState<boolean>(true); // 로딩 상태 추가
+  const [loading, setLoading] = useState<boolean>(true);
 
   useSSE();
   useEffect(() => {
@@ -45,9 +45,8 @@ const useAuth = () => {
     if (refreshToken) {
       setIsLoggedIn(true);
     }
-    setLoading(false); // 로딩 상태를 false로 변경
-
-    AOS.init(); // AOS 초기화
+    setLoading(false);
+    AOS.init();
   }, []);
 
   return { isLoggedIn, loading };
@@ -55,7 +54,7 @@ const useAuth = () => {
 
 const App = () => {
   const isMobile = useMediaQuery({ query: '(max-width: 1000px)' });
-  const { isLoggedIn, loading } = useAuth(); // 로그인 여부와 로딩 상태 체크
+  const { isLoggedIn, loading } = useAuth();
 
   RouteChangeTracker();
 
@@ -67,7 +66,7 @@ const App = () => {
     return (
       <MobileDisplay>
         <Flex justifyContent="center" alignItems="center">
-          데스크톱만 지원 합니다
+          데스크톱만 지원합니다
         </Flex>
       </MobileDisplay>
     );
@@ -92,8 +91,8 @@ const App = () => {
         <Routes>
           <Route path="/" element={<LoginPage />} />
           <Route path="/api/oauth2/callback/:provider" element={<OAuthRedirectHandler />} />
-          <Route path="*" element={<Error404Page />} />
           <Route path="/error/403" element={<Error403Page />} />
+          <Route path="*" element={<Error404Page />} />
 
           <Route
             path="/:id"
@@ -103,7 +102,14 @@ const App = () => {
               </ProtectedRoute>
             }
           >
-            <Route path="/:id/personalBlock/:blockId" element={<SidePage />} />
+            <Route
+              path="personalBlock/:blockId"
+              element={
+                <ProtectedRoute>
+                  <SidePage />
+                </ProtectedRoute>
+              }
+            />
           </Route>
 
           <Route
@@ -114,7 +120,6 @@ const App = () => {
               </ProtectedRoute>
             }
           />
-
           <Route
             path="/createPersonalBoard"
             element={
@@ -123,7 +128,6 @@ const App = () => {
               </ProtectedRoute>
             }
           />
-
           <Route
             path="/createPersonalBoard/:id"
             element={
@@ -132,7 +136,6 @@ const App = () => {
               </ProtectedRoute>
             }
           />
-
           <Route
             path="/createTeamBoard"
             element={
@@ -141,7 +144,6 @@ const App = () => {
               </ProtectedRoute>
             }
           />
-
           <Route
             path="/createTeamBoard/:id"
             element={
@@ -150,7 +152,6 @@ const App = () => {
               </ProtectedRoute>
             }
           />
-
           <Route
             path="/mypage"
             element={
@@ -159,7 +160,6 @@ const App = () => {
               </ProtectedRoute>
             }
           />
-
           <Route
             path="/mypage/edit"
             element={
@@ -195,7 +195,6 @@ const App = () => {
               </ProtectedRoute>
             }
           />
-
           <Route
             path="/challenge/create"
             element={
@@ -204,7 +203,6 @@ const App = () => {
               </ProtectedRoute>
             }
           />
-
           <Route
             path="/challenge/create/:id"
             element={
@@ -213,7 +211,6 @@ const App = () => {
               </ProtectedRoute>
             }
           />
-
           <Route
             path="/challenge/:id"
             element={
@@ -222,7 +219,6 @@ const App = () => {
               </ProtectedRoute>
             }
           />
-
           <Route
             path="/tutorial"
             element={
diff --git a/src/index.tsx b/src/index.tsx
index fab90c3..29883ec 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -14,12 +14,12 @@ if (process.env.REACT_APP_GOOGLE_ANALYTICS_TRAKING_ID) {
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 root.render(
-  <HelmetProvider>
-    <BrowserRouter>
+  <BrowserRouter>
+    <HelmetProvider>
       <GlobalStyle />
       <App />
-    </BrowserRouter>
-  </HelmetProvider>
+    </HelmetProvider>
+  </BrowserRouter>
 );
 
 // If you want to start measuring performance in your app, pass a function
diff --git a/src/pages/SidePage.tsx b/src/pages/SidePage.tsx
index bbe735d..29cc654 100644
--- a/src/pages/SidePage.tsx
+++ b/src/pages/SidePage.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate, useLocation, useBlocker } from 'react-router-dom';
 import Flex from '../components/Flex';
 import trash from '../img/delete2.png';
@@ -71,16 +71,28 @@ const SidePage = () => {
   }, []);
   */
 
-  // 라우터 변경 감지 : 라우터 변경시 데이터 저장
-  useBlocker(tx => {
-    const { currentLocation, nextLocation } = tx;
-
-    if (currentLocation.pathname !== nextLocation.pathname) {
-      SubmitData();
-      return false;
-    }
-    return true;
-  });
+  // ! 라우터 변경 감지 : 라우터 변경시 데이터 저장 => 구글 애널리틱스 적용 이후 오류나서 주석처리
+  // useBlocker(tx => {
+  //   const { currentLocation, nextLocation } = tx;
+
+  //   if (currentLocation.pathname !== nextLocation.pathname) {
+  //     SubmitData();
+  //     return false;
+  //   }
+  //   return true;
+  // });
+  // ! 페이지 나갈때 자동저장 다시 구현
+  // const ref = useRef(false);
+
+  // useEffect(() => {
+  //   return () => SubmitData();
+  // return () => alert('히히');
+  // return () => {
+  //   if (ref.current) return;
+  //   ref.current = true;
+  //   alert('ss');
+  // };
+  // }, []);
 
   return (
     <SideScreenContainer onClick={toggleFunc}>
@@ -141,4 +153,4 @@ const SidePage = () => {
   );
 };
 
-export default SidePage;
+export default React.memo(SidePage);
diff --git a/src/pages/TeamDocument.tsx b/src/pages/TeamDocument.tsx
index 61dd5eb..94fb86f 100644
--- a/src/pages/TeamDocument.tsx
+++ b/src/pages/TeamDocument.tsx
@@ -67,16 +67,17 @@ const TeamDocument = () => {
 
   if (!editor) return <div>Loading editor...</div>;
 
-  // 라우터 변경 감지 : 라우터 변경시 데이터 저장
-  useBlocker(tx => {
-    const { currentLocation, nextLocation } = tx;
-
-    if (currentLocation.pathname !== nextLocation.pathname) {
-      // SubmitData();
-      return false;
-    }
-    return true;
-  });
+  // ! 라우터 변경 감지 : 라우터 변경시 데이터 저장 => 구글 애널리틱스 적용 이후 오류나서 주석처리
+  // ! 페이지 나갈때 자동저장 다시 구현
+  // useBlocker(tx => {
+  //   const { currentLocation, nextLocation } = tx;
+
+  //   if (currentLocation.pathname !== nextLocation.pathname) {
+  //     // SubmitData();
+  //     return false;
+  //   }
+  //   return true;
+  // });
 
   // * 팀 문서 삭제
   const delTeamDocument = async () => {