Merge pull request #115 from softeerbootcamp4th/perf-build

[Perf] Reflow 줄이기 & 리소스 preload & Fallback Component 디자인 보완
softeerbootcamp4th · Aug 22, 2024 · add3bb8 · add3bb8
2 parents c60bac6 + 26b4431
commit add3bb8
Show file tree

Hide file tree

Showing 16 changed files with 169 additions and 122 deletions.
diff --git a/packages/user/index.html b/packages/user/index.html
@@ -38,8 +38,47 @@
 		<meta name="twitter:image" content="https://www.batro.org/link/og-default.png" />
 
 		<meta name="google-site-verification" content="pHvxGaLdn5eMOrC4VRB4hKRWhVU-0u0DMEStef_gy-U" />
-		<link rel="preconnect" href="https://softeer-team4.site:8080" />
-		<link rel="preconnect" href="https://softeer-team4.site:8081" />
+
+		<link
+			rel="preconnect"
+			as="fetch"
+			crossorigin="use-credentials"
+			href="https://softeer-team4.site:8080"
+		/>
+		<link
+			rel="preconnect"
+			as="fetch"
+			crossorigin="use-credentials"
+			href="https://softeer-team4.site:8081"
+		/>
+		<link
+			rel="preload"
+			href="/fonts/HyundaiSansHeadKRBold.woff2"
+			as="font"
+			type="font/woff2"
+			crossorigin="anonymous"
+		/>
+
+		<link
+			rel="preload"
+			href="/fonts/HyundaiSansHeadKRMedium.woff2"
+			as="font"
+			type="font/woff2"
+			crossorigin="anonymous"
+		/>
+		<link
+			rel="preload"
+			href="/fonts/HyundaiSansHeadKR.woff2"
+			as="font"
+			type="font/woff2"
+			crossorigin="anonymous"
+		/>
+		<link rel="preload" as="image" href="/images/fcfs/result/correct.webp" />
+		<link rel="preload" as="image" href="/images/racing/front/travel.webp" />
+		<link rel="preload" as="image" href="/images/racing/front/leisure.webp" />
+		<link rel="preload" as="image" href="/images/racing/front/pet.webp" />
+		<link rel="prefetch" as="image" href="/images/racing/background.webp" />
+
 		<link rel="icon" type="favicon" href="/favicon/favicon.ico" />
 
 		<title>현대자동차 캐스퍼 일렉트릭 이벤트</title>

diff --git a/packages/user/public/images/racing/front/travel.webp b/packages/user/public/images/racing/front/travel.webp
diff --git a/packages/user/src/App.tsx b/packages/user/src/App.tsx
@@ -1,7 +1,7 @@
 import { RouterProvider } from 'react-router-dom';
 import ToasterStack from 'src/components/common/toast/ToasterStack.tsx';
 import GlobalErrorBoundary from 'src/components/layout/GlobalErrorBoundary.tsx';
-import GlobalFallback from 'src/components/layout/GlobalFallback.tsx';
+import GlobalFallback from 'src/components/layout/fallback/GlobalFallback.tsx';
 import AppProviders from 'src/libs/index.tsx';
 import router from 'src/routes/router.tsx';
 import CasperCursor from './components/cursor/CasperCursor.tsx';

diff --git a/packages/user/src/components/common/PendingContainer.tsx b/packages/user/src/components/common/PendingContainer.tsx
@@ -1,7 +1,14 @@
 export default function PendingContainer({ message }: { message: string }) {
 	return (
-		<div role="status" className="flex h-screen w-screen flex-col items-center justify-center">
-			<img src="/images/fcfs/result/correct.webp" alt="로딩 중 이미지" className="max-w-[500px]" />
+		<div
+			role="status"
+			className="m-auto flex h-screen w-screen flex-col items-center justify-center"
+		>
+			<img
+				src="/images/fcfs/result/correct.webp"
+				alt="로딩 중 이미지"
+				className="h-[400px] max-w-[500px]"
+			/>
 			<div className="flex flex-col items-center gap-5">
 				<h4>{message}</h4>
 				<p>잠시만 기다려주세요...</p>

diff --git a/packages/user/src/components/home/eventSteps/ContentsContainer.tsx b/packages/user/src/components/home/eventSteps/ContentsContainer.tsx
@@ -12,7 +12,7 @@ export default function ContentsContainer({
 	const contents = Children.toArray(children);
 
 	return (
-		<div className={`flex items-center p-1 gap-${gap}`}>
+		<div className={`flex items-center p-1 gap-${gap} h-[542px]`}>
 			{contents.map((content, index) => (
 				// eslint-disable-next-line react/no-array-index-key
 				<Fragment key={index}>

diff --git a/packages/user/src/components/home/eventSteps/EventStep.tsx b/packages/user/src/components/home/eventSteps/EventStep.tsx
@@ -8,7 +8,7 @@ export default function EventStep({ step, title, children }: PropsWithChildren<E
 	const stepLabel = `Step ${step.toString().padStart(2, '0')}`;
 
 	return (
-		<div className="flex flex-col items-center">
+		<div className="flex h-[660px] flex-col items-center">
 			<p className="text-primary text-heading-8 mb-[30px] font-medium">{stepLabel}</p>
 			<p className="text-heading-10 font-medium">{title}</p>
 			{children}

diff --git a/packages/user/src/components/home/fastestQuiz/index.tsx b/packages/user/src/components/home/fastestQuiz/index.tsx
@@ -6,7 +6,7 @@ import TopSection from './TopSection.tsx';
 /** 선착순 퀴즈 설명 섹션 */
 export default function FastestQuiz() {
 	return (
-		<section id={SECTION_ID.QUIZ} className="snap-start bg-neutral-700 pt-[120px]">
+		<section id={SECTION_ID.QUIZ} className="h-full snap-start bg-neutral-700 pt-[120px]">
 			<div className="gap-15 flex flex-col items-center">
 				<TopSection />
 				<QuizImages />

diff --git a/packages/user/src/components/layout/LayoutFallback.tsx b/packages/user/src/components/layout/LayoutFallback.tsx
diff --git a/.../src/components/layout/GlobalFallback.tsx → ...onents/layout/fallback/GlobalFallback.tsx b/.../src/components/layout/GlobalFallback.tsx → ...onents/layout/fallback/GlobalFallback.tsx
diff --git a/packages/user/src/components/layout/fallback/LayoutFallback.tsx b/packages/user/src/components/layout/fallback/LayoutFallback.tsx
@@ -0,0 +1,5 @@
+import PendingContainer from 'src/components/common/PendingContainer.tsx';
+
+export default function LayoutFallback() {
+	return <PendingContainer message="이벤트 정보를 불러오는 중입니다!" />;
+}
diff --git a/packages/user/src/components/layout/fallback/PageFallback.tsx b/packages/user/src/components/layout/fallback/PageFallback.tsx
@@ -0,0 +1,9 @@
+import PendingContainer from 'src/components/common/PendingContainer.tsx';
+
+export default function PageFallback() {
+	return (
+		<div className="-mt-[115px] snap-start">
+			<PendingContainer message="페이지를 불러오는 중입니다!" />
+		</div>
+	);
+}
diff --git a/packages/user/src/components/layout/index.tsx b/packages/user/src/components/layout/index.tsx
@@ -1,4 +1,5 @@
 import { Outlet } from 'react-router-dom';
+import InViewLoadSection from 'src/components/common/InViewLoadSection.tsx';
 import useInitialize from 'src/hooks/useInitialize.ts';
 import Banner from './banner/index.tsx';
 import BodyContainer from './BodyContainer.tsx';
@@ -20,7 +21,7 @@ export default function Layout() {
 				<div className="flex-grow">
 					<Outlet />
 				</div>
-				<Footer />
+				<InViewLoadSection component={Footer} className="h-[270px]" />
 			</BodyContainer>
 			<FCFSFloatingButtonController />
 		</div>

diff --git a/packages/user/src/components/shared/modal/InfoStep.tsx b/packages/user/src/components/shared/modal/InfoStep.tsx
@@ -3,7 +3,11 @@ import { PropsWithChildren } from 'react';
 export default function InfoStep({ children }: PropsWithChildren) {
 	return (
 		<div className="flex h-full flex-col items-center justify-center gap-10 p-[20px]">
-			<img src="/images/thumbnail.webp" alt="modal" className="max-w-[500px] object-contain" />
+			<img
+				src="/images/thumbnail.webp"
+				alt="modal"
+				className="h-[400px] max-w-[500px] object-contain"
+			/>
 			<div className="text-heading-12 flex flex-col items-center gap-4 font-medium">{children}</div>
 		</div>
 	);

diff --git a/packages/user/src/pages/HomePage.tsx b/packages/user/src/pages/HomePage.tsx
@@ -23,15 +23,17 @@ export default function HomePage() {
 	return (
 		<>
 			<EventHero />
-			<InViewLoadSection<HTMLDivElement> component={EventPrizes} />
-			<InViewLoadSection<HTMLDivElement> component={EventSteps} />
+			<InViewLoadSection<HTMLDivElement> component={EventPrizes} className="h-[570px]" />
+			<InViewLoadSection<HTMLDivElement> component={EventSteps} className="h-[2650px]" />
 			{/* 배너 바로가기 기능 동작을 위해 view port load 하지 않음 */}
-			<Suspense>
-				<FastestQuiz />
-			</Suspense>
-			<InViewLoadSection<HTMLDivElement> component={QuizHint} />
-			<InViewLoadSection<HTMLDivElement> component={TeamsDescriptions} />
-			<InViewLoadSection<HTMLDivElement> component={EventGuidelines} />
+			<div className="h-[1000px]">
+				<Suspense>
+					<FastestQuiz />
+				</Suspense>
+			</div>
+			<InViewLoadSection<HTMLDivElement> component={QuizHint} className="h-[1320px]" />
+			<InViewLoadSection<HTMLDivElement> component={TeamsDescriptions} className="h-[1000px]" />
+			<InViewLoadSection<HTMLDivElement> component={EventGuidelines} className="h-[730px]" />
 		</>
 	);
 }
diff --git a/packages/user/src/routes/router.tsx b/packages/user/src/routes/router.tsx
@@ -1,7 +1,8 @@
 import { lazy, Suspense } from 'react';
 import { createBrowserRouter, Outlet, RouteObject } from 'react-router-dom';
-import GlobalFallback from 'src/components/layout/GlobalFallback.tsx';
-import LayoutFallback from 'src/components/layout/LayoutFallback.tsx';
+import GlobalFallback from 'src/components/layout/fallback/GlobalFallback.tsx';
+import LayoutFallback from 'src/components/layout/fallback/LayoutFallback.tsx';
+import PageFallback from 'src/components/layout/fallback/PageFallback.tsx';
 import RoutePaths from 'src/constants/routePath.ts';
 import {
 	kakaoRedirectLoader,
@@ -23,7 +24,7 @@ const routes: RouteObject[] = [
 		path: RoutePaths.Index,
 		loader: rootLoader,
 		errorElement: (
-			<Suspense fallback={<GlobalFallback />}>
+			<Suspense>
 				<NotStartedEventPage />
 			</Suspense>
 		),
@@ -48,23 +49,23 @@ const routes: RouteObject[] = [
 					</Suspense>
 				),
 				errorElement: (
-					<Suspense fallback={<GlobalFallback />}>
+					<Suspense>
 						<ErrorPage />
 					</Suspense>
 				),
 				children: [
 					{
 						index: true,
 						element: (
-							<Suspense fallback={<LayoutFallback />}>
+							<Suspense fallback={<PageFallback />}>
 								<HomePage />
 							</Suspense>
 						),
 					},
 					{
 						path: RoutePaths.Event,
 						element: (
-							<Suspense fallback={<LayoutFallback />}>
+							<Suspense fallback={<PageFallback />}>
 								<EventPage />
 							</Suspense>
 						),