#91 fix: 라우터 충돌 오류때문에 자동저장(라우터 변경 감지) 주석처리 - 리팩토링 예정

AJD-Archive · Oct 9, 2024 · 8e46186 · 8e46186
1 parent c78995c
commit 8e46186
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 45 deletions.
diff --git 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,25 +37,24 @@ 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(() => {
     const refreshToken = localStorage.getItem('refreshToken');
     if (refreshToken) {
       setIsLoggedIn(true);
     }
-    setLoading(false); // 로딩 상태를 false로 변경
-
-    AOS.init(); // AOS 초기화
+    setLoading(false);
+    AOS.init();
   }, []);
 
   return { isLoggedIn, loading };
 };
 
 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
@@ -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
@@ -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
@@ -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 () => {