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

구글 애널리틱스 RouterChangeTracker 연결 #93

Merged
merged 1 commit into from
Oct 5, 2024
Merged

구글 애널리틱스 RouterChangeTracker 연결 #93

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
327 changes: 148 additions & 179 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,5 @@
import React, { useCallback, useEffect, useRef, useState } from 'react';
import {
createBrowserRouter,
RouterProvider,
createRoutesFromElements,
Route,
Navigate,
Routes,
} from 'react-router-dom';
import React, { useEffect, useState } from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import MainPage from './pages/MainPage';
import LoginPage from './pages/LoginPage';
import MyPage from './pages/MyPage';
Expand All @@ -22,7 +15,6 @@ import ChallengeCommunityPage from './pages/ChallengeCommunityPage';
import CreateChallengePage from './pages/CreateChallengePage';
import ChallengeDetailPage from './pages/ChallengeDetailPage';
import TutorialPage from './pages/TutorialPage';

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import AOS from 'aos';
Expand Down Expand Up @@ -61,176 +53,13 @@ const useAuth = () => {
return { isLoggedIn, loading };
};

// Data Router 사용하여 라우터 설정
const router = (isLoggedIn: boolean) =>
createBrowserRouter(
createRoutesFromElements(
<Route>
{/* 기본 라우터를 로그인 페이지로 변경 */}
<Route path="/" element={<LoginPage />} />
{/* <Route
path="/"
element={
isLoggedIn ? (
<Navigate to={`/${localStorage.getItem('LatestBoard') ?? 'tutorial'}`} replace />
) : (
<LoginPage />
)
}
/> */}

{/* 로그인 상관없이 접근 가능한 라우터. 보호되지 않는 라우터 */}
<Route path="/api/oauth2/callback/:provider" element={<OAuthRedirectHandler />} />
<Route path="*" element={<Error404Page />} />
<Route path="/error/403" element={<Error403Page />} />

{/* 보호된 경로들에 ProtectedRoute 적용 */}
<Route
path="/:id"
element={
<ProtectedRoute>
<MainPage />
</ProtectedRoute>
}
>
<Route path="/:id/personalBlock/:blockId" element={<SidePage />} />
</Route>

<Route
path="/createBoard"
element={
<ProtectedRoute>
<CreateBoard />
</ProtectedRoute>
}
/>

<Route
path="/createPersonalBoard"
element={
<ProtectedRoute>
<CreatePersonalBoard />
</ProtectedRoute>
}
/>

<Route
path="/createPersonalBoard/:id"
element={
<ProtectedRoute>
<CreatePersonalBoard />
</ProtectedRoute>
}
/>

<Route
path="/createTeamBoard"
element={
<ProtectedRoute>
<CreateTeamBoard />
</ProtectedRoute>
}
/>

<Route
path="/createTeamBoard/:id"
element={
<ProtectedRoute>
<CreateTeamBoard />
</ProtectedRoute>
}
/>

<Route
path="/mypage"
element={
<ProtectedRoute>
<MyPage />
</ProtectedRoute>
}
/>

<Route
path="/mypage/edit"
element={
<ProtectedRoute>
<ProfileEdit />
</ProtectedRoute>
}
/>

<Route
path="/:id/teamdocument"
element={
<ProtectedRoute>
<TeamDocumentBoard />
</ProtectedRoute>
}
>
<Route
path=":documentId"
element={
<ProtectedRoute>
<TeamDocument />
</ProtectedRoute>
}
/>
</Route>

<Route
path="/challenge"
element={
<ProtectedRoute>
<ChallengeCommunityPage />
</ProtectedRoute>
}
/>

<Route
path="/challenge/create"
element={
<ProtectedRoute>
<CreateChallengePage />
</ProtectedRoute>
}
/>

<Route
path="/challenge/create/:id"
element={
<ProtectedRoute>
<CreateChallengePage />
</ProtectedRoute>
}
/>

<Route
path="/challenge/:id"
element={
<ProtectedRoute>
<ChallengeDetailPage />
</ProtectedRoute>
}
/>

<Route
path="/tutorial"
element={
<ProtectedRoute>
<TutorialPage />
</ProtectedRoute>
}
/>
</Route>
)
);

const App: React.FC = () => {
const App = () => {
const isMobile = useMediaQuery({ query: '(max-width: 1000px)' });
const { isLoggedIn, loading } = useAuth(); // 로그인 여부와 로딩 상태 체크

RouteChangeTracker();

if (loading) {
// 로딩 중일 때는 아무것도 렌더링하지 않음
return <div>Loading...</div>;
}

Expand Down Expand Up @@ -260,13 +89,153 @@ const App: React.FC = () => {
theme="light"
style={{ width: '21.875rem', lineHeight: '1.5rem' }}
/>
<RouterProvider router={router(isLoggedIn)} />
<Routes>
<Route path="/" element={<LoginPage />} />
<Route path="/api/oauth2/callback/:provider" element={<OAuthRedirectHandler />} />
<Route path="*" element={<Error404Page />} />
<Route path="/error/403" element={<Error403Page />} />

{/* <RouteChangeTracker /> */}
</AuthProvider>
<Route
path="/:id"
element={
<ProtectedRoute>
<MainPage />
</ProtectedRoute>
}
>
<Route path="/:id/personalBlock/:blockId" element={<SidePage />} />
</Route>

<Route
path="/createBoard"
element={
<ProtectedRoute>
<CreateBoard />
</ProtectedRoute>
}
/>

<Route
path="/createPersonalBoard"
element={
<ProtectedRoute>
<CreatePersonalBoard />
</ProtectedRoute>
}
/>

<Route
path="/createPersonalBoard/:id"
element={
<ProtectedRoute>
<CreatePersonalBoard />
</ProtectedRoute>
}
/>

<Route
path="/createTeamBoard"
element={
<ProtectedRoute>
<CreateTeamBoard />
</ProtectedRoute>
}
/>

<Route
path="/createTeamBoard/:id"
element={
<ProtectedRoute>
<CreateTeamBoard />
</ProtectedRoute>
}
/>

<Route
path="/mypage"
element={
<ProtectedRoute>
<MyPage />
</ProtectedRoute>
}
/>

<Route
path="/mypage/edit"
element={
<ProtectedRoute>
<ProfileEdit />
</ProtectedRoute>
}
/>

<Route
path="/:id/teamdocument"
element={
<ProtectedRoute>
<TeamDocumentBoard />
</ProtectedRoute>
}
>
<Route
path=":documentId"
element={
<ProtectedRoute>
<TeamDocument />
</ProtectedRoute>
}
/>
</Route>

<Route
path="/challenge"
element={
<ProtectedRoute>
<ChallengeCommunityPage />
</ProtectedRoute>
}
/>

<Route
path="/challenge/create"
element={
<ProtectedRoute>
<CreateChallengePage />
</ProtectedRoute>
}
/>

<Route
path="/challenge/create/:id"
element={
<ProtectedRoute>
<CreateChallengePage />
</ProtectedRoute>
}
/>

<Route
path="/challenge/:id"
element={
<ProtectedRoute>
<ChallengeDetailPage />
</ProtectedRoute>
}
/>

<Route
path="/tutorial"
element={
<ProtectedRoute>
<TutorialPage />
</ProtectedRoute>
}
/>
</Routes>
</AuthProvider>
<ReactQueryDevtools initialIsOpen={false} />
</QueryClientProvider>
);
};

export default App;
19 changes: 8 additions & 11 deletions src/components/RouteChangeTracker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,18 +7,18 @@ import ReactGA from 'react-ga4';
* uri 변경 추적 컴포넌트
* uri가 변경될 때마다 pageview 이벤트 전송
*/
const RouteChangeTracker: React.FC = () => {
const RouteChangeTracker = () => {
const location = useLocation();
const [initialized, setInitialized] = useState(false);

// localhost는 기록하지 않음
// useEffect(() => {
// if (!window.location.href.includes('localhost')) {
// process.env.REACT_APP_GOOGLE_ANALYTICS_TRAKING_ID &&
// ReactGA.initialize(process.env.REACT_APP_GOOGLE_ANALYTICS_TRAKING_ID);
// setInitialized(true);
// }
// }, []);
useEffect(() => {
if (!window.location.href.includes('localhost')) {
process.env.REACT_APP_GOOGLE_ANALYTICS_TRAKING_ID &&
ReactGA.initialize(process.env.REACT_APP_GOOGLE_ANALYTICS_TRAKING_ID);
setInitialized(true);
}
}, []);

// location 변경 감지시 pageview 이벤트 전송
useEffect(() => {
Expand All @@ -35,9 +35,6 @@ const RouteChangeTracker: React.FC = () => {
ReactGA.set({ page: location.pathname });
ReactGA.send('pageview');
}, [location]);

// JSX에서 사용하기 위해 null 반환
return null;
};

export default RouteChangeTracker;
Loading