From 1f75d4b7f85886c19a151b8dc47a25d16b030e6e Mon Sep 17 00:00:00 2001
From: Ivoryeee <105477246+Ivoryeee@users.noreply.github.com>
Date: Sun, 17 Nov 2024 23:51:24 +0900
Subject: [PATCH] =?UTF-8?q?[Feat]=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=8A=A4=ED=94=8C=EB=A6=BF=ED=8C=85=20=20?=
 =?UTF-8?q?(#213)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

* [Feat] 타이머, 홈 페이지 코드 스플릿팅 (#204)
---
 .../components/StatusAddBoxTodayTodo.tsx      | 12 ++++++++-
 src/pages/LoginPage/index.tsx                 |  7 +++++
 .../TimerPage/components/SideBarTimer.tsx     |  8 +++++-
 src/router/Router.tsx                         | 26 ++++++++++++++-----
 4 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/src/pages/HomePage/components/StatusAddBoxTodayTodo.tsx b/src/pages/HomePage/components/StatusAddBoxTodayTodo.tsx
index 9b3494ee..c6a2ffe1 100644
--- 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
index 58464a3a..39ffe925 100644
--- 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
index 29c5521e..e990be08 100644
--- 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
index f07a4a1d..6d56e9fd 100644
--- 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>
+				),
 			},
 		],
 	},