[Feat] 페이지 코드 스플릿팅 (#213)

* [Feat] 페이지 코드 스플릿팅 (#204) * [Feat] 타이머, 홈 페이지 코드 스플릿팅 (#204)
morib-in · Nov 17, 2024 · 1f75d4b · 1f75d4b
1 parent 8f56b73
commit 1f75d4b
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 8 deletions.
diff --git a/src/pages/HomePage/components/StatusAddBoxTodayTodo.tsx b/src/pages/HomePage/components/StatusAddBoxTodayTodo.tsx
@@ -32,6 +32,11 @@ const StatusAddBoxTodayTodo = ({
 	//Todo: 선택된 Todo들을 취소하고 다시 추가하는 로직 추가
 	const hasTodayTodos = !(selectedTodayTodos.length === 0);
 	const clickable = addingComplete ? '' : 'pointer-events-none cursor-default ';
+	const handleMouseEnter = () => {
+		import('@/pages/TimerPage/TimerPage').catch((error) => {
+			console.error('타이머 페이지를 받아오는데 오류가 발생했습니다.', error);
+		});
+	};
 
 	return (
 		<div className="flex flex-grow flex-col justify-between">
@@ -77,7 +82,12 @@ const StatusAddBoxTodayTodo = ({
 					<HomeSmallBtn onClick={onDisableAddStatus}>{SMALL_BTN_TEXT.CANCEL}</HomeSmallBtn>
 				)}
 				<div className={clickable}>
-					<HomeLargeBtn variant={HomeLargeBtnVariant.LARGE} disabled={!addingComplete} onClick={onCreateTodayTodos}>
+					<HomeLargeBtn
+						variant={HomeLargeBtnVariant.LARGE}
+						disabled={!addingComplete}
+						onClick={onCreateTodayTodos}
+						onMouseEnter={handleMouseEnter}
+					>
 						{LARGE_BTN_TEXT.START_TIMER}
 					</HomeLargeBtn>
 				</div>

diff --git a/src/pages/LoginPage/index.tsx b/src/pages/LoginPage/index.tsx
@@ -26,6 +26,12 @@ const LoginPage = () => {
 		window.location.href = API_URL;
 	};
 
+	const handleMouseEnter = () => {
+		import('@/pages/HomePage/HomePage').catch((error) => {
+			console.error('홈페이지를 받아오는데 오류가 발생했습니다.', error);
+		});
+	};
+
 	return (
 		<LoginPageWrapper>
 			<div className="h-[37rem] w-[60rem]">
@@ -44,6 +50,7 @@ const LoginPage = () => {
 				/>
 				{/* Todo: 추후 로그인 로직 추가 */}
 				<ButtonSVG
+					onMouseEnter={handleMouseEnter}
 					onClick={handleClick}
 					className={`ml-[12rem] transition-opacity duration-300 ${isAnimationComplete ? 'opacity-100' : 'opacity-0'}`}
 				>

diff --git a/src/pages/TimerPage/components/SideBarTimer.tsx b/src/pages/TimerPage/components/SideBarTimer.tsx
@@ -89,6 +89,12 @@ const SideBarTimer = ({
 		}
 	};
 
+	const handleMouseEnter = () => {
+		import('@/pages/HomePage/HomePage').catch((error) => {
+			console.error('홈페이지를 받아오는데 오류가 발생했습니다.', error);
+		});
+	};
+
 	if (isError) {
 		console.error(error);
 	}
@@ -135,7 +141,7 @@ const SideBarTimer = ({
 			</div>
 			<div className="flex flex-col items-start gap-[1rem] pb-[2rem] pt-[4rem]">
 				<ButtonSideBar variant="할 일 추가">할 일 추가</ButtonSideBar>
-				<ButtonSideBar variant="홈으로 나가기" onClick={handleNavigateHome}>
+				<ButtonSideBar variant="홈으로 나가기" onClick={handleNavigateHome} onMouseEnter={handleMouseEnter}>
 					홈으로 나가기
 				</ButtonSideBar>
 			</div>

diff --git a/src/router/Router.tsx b/src/router/Router.tsx
@@ -1,15 +1,17 @@
 import type { Router } from '@remix-run/router';
 
+import { Suspense, lazy } from 'react';
 import { Outlet, createBrowserRouter } from 'react-router-dom';
 
-import HomePage from '@/pages/HomePage/HomePage';
-import LoginPage from '@/pages/LoginPage';
 import NotFoundPage from '@/pages/NotFoundPage/NotFoundPage';
-import TimerPage from '@/pages/TimerPage/TimerPage';
 
 import RedirectPage from '../pages/RedirectPage';
 import { ROUTES_CONFIG } from './routesConfig';
 
+const LoginPage = lazy(() => import('@/pages/LoginPage'));
+const HomePage = lazy(() => import('@/pages/HomePage/HomePage'));
+const TimerPage = lazy(() => import('@/pages/TimerPage/TimerPage'));
+
 const ProtectedRoute = () => {
 	//Todo: 개발이 진행되면 실제 토큰 상태를 받아서 login page로 이동 시킴
 	// const accessToken = getAccessTotken();
@@ -28,7 +30,11 @@ const router: Router = createBrowserRouter([
 		children: [
 			{
 				path: ROUTES_CONFIG.login.path,
-				element: <LoginPage />,
+				element: (
+					<Suspense fallback={<div>Loading...</div>}>
+						<LoginPage />
+					</Suspense>
+				),
 			},
 			{
 				path: ROUTES_CONFIG.redirect.path,
@@ -44,11 +50,19 @@ const router: Router = createBrowserRouter([
 		children: [
 			{
 				path: ROUTES_CONFIG.home.path,
-				element: <HomePage />,
+				element: (
+					<Suspense fallback={<div>Loading...</div>}>
+						<HomePage />
+					</Suspense>
+				),
 			},
 			{
 				path: ROUTES_CONFIG.timer.path,
-				element: <TimerPage />,
+				element: (
+					<Suspense fallback={<div>Loading...</div>}>
+						<TimerPage />
+					</Suspense>
+				),
 			},
 		],
 	},