Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

라우터와 자동 저장 충돌 오류 일시 해결 #96

Merged
merged 1 commit into from
Oct 9, 2024
Merged

라우터와 자동 저장 충돌 오류 일시 해결 #96

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 15 additions & 19 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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();

Expand All @@ -67,7 +66,7 @@ const App = () => {
return (
<MobileDisplay>
<Flex justifyContent="center" alignItems="center">
데스크톱만 지원 합니다
데스크톱만 지원합니다
</Flex>
</MobileDisplay>
);
Expand All @@ -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"
Expand All @@ -103,7 +102,14 @@ const App = () => {
</ProtectedRoute>
}
>
<Route path="/:id/personalBlock/:blockId" element={<SidePage />} />
<Route
path="personalBlock/:blockId"
element={
<ProtectedRoute>
<SidePage />
</ProtectedRoute>
}
/>
</Route>

<Route
Expand All @@ -114,7 +120,6 @@ const App = () => {
</ProtectedRoute>
}
/>

<Route
path="/createPersonalBoard"
element={
Expand All @@ -123,7 +128,6 @@ const App = () => {
</ProtectedRoute>
}
/>

<Route
path="/createPersonalBoard/:id"
element={
Expand All @@ -132,7 +136,6 @@ const App = () => {
</ProtectedRoute>
}
/>

<Route
path="/createTeamBoard"
element={
Expand All @@ -141,7 +144,6 @@ const App = () => {
</ProtectedRoute>
}
/>

<Route
path="/createTeamBoard/:id"
element={
Expand All @@ -150,7 +152,6 @@ const App = () => {
</ProtectedRoute>
}
/>

<Route
path="/mypage"
element={
Expand All @@ -159,7 +160,6 @@ const App = () => {
</ProtectedRoute>
}
/>

<Route
path="/mypage/edit"
element={
Expand Down Expand Up @@ -195,7 +195,6 @@ const App = () => {
</ProtectedRoute>
}
/>

<Route
path="/challenge/create"
element={
Expand All @@ -204,7 +203,6 @@ const App = () => {
</ProtectedRoute>
}
/>

<Route
path="/challenge/create/:id"
element={
Expand All @@ -213,7 +211,6 @@ const App = () => {
</ProtectedRoute>
}
/>

<Route
path="/challenge/:id"
element={
Expand All @@ -222,7 +219,6 @@ const App = () => {
</ProtectedRoute>
}
/>

<Route
path="/tutorial"
element={
Expand Down
8 changes: 4 additions & 4 deletions src/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
36 changes: 24 additions & 12 deletions src/pages/SidePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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}>
Expand Down Expand Up @@ -141,4 +153,4 @@ const SidePage = () => {
);
};

export default SidePage;
export default React.memo(SidePage);
21 changes: 11 additions & 10 deletions src/pages/TeamDocument.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down