feat: 주르마블 메인 페이지 코드 스플리팅 적용

.yarnrc.yml

@@ -7,5 +7,11 @@ packageExtensions:
     dependencies:
       "@types/react": "^17"
       react: "^17"
+  follow-redirects@*:
+    dependencies:
+      debug: "*"
+  debug@*:
+    dependencies:
+      supports-color: "*"
 
 yarnPath: .yarn/releases/yarn-3.3.0.cjs

apps/jurumarble/src/app/page.tsx

@@ -4,10 +4,24 @@ import BottomBar from "components/BottomBar";
 import Header from "components/Header";
 import styled, { css } from "styled-components";
 import Banner from "./main/components/Banner";
-import HotDrinkContainer from "./main/components/HotDrinkContainer";
-import HotDrinkVoteContainer from "./main/components/HotDrinkVoteContainer";
 import SearchInputWrapper from "./main/components/SearchInputWrapper";
 import TodayDrinkRecommendation from "./main/components/TodayDrinkRecommendation";
+import dynamic from "next/dynamic";
+
+const DynamicHotDrinkVoteContainer = dynamic(
+  () => import("./main/components/HotDrinkVoteContainer"),
+);
+
+const DynamicHotDrinkContainer = dynamic(() => import("./main/components/HotDrinkContainer"), {
+  ssr: false,
+  loading: () => (
+    <div
+      style={{
+        height: "200px",
+      }}
+    />
+  ),
+});
 
 function MainPage() {
   return (
@@ -17,11 +31,11 @@ function MainPage() {
       <TopSection>
         <Banner />
         <SearchInputWrapper />
-        <HotDrinkContainer />
+        <DynamicHotDrinkContainer />
       </TopSection>
       <DivideLine />
       <BottomSection>
-        <HotDrinkVoteContainer />
+        <DynamicHotDrinkVoteContainer />
       </BottomSection>
       <BottomBar />
     </>

yarn.lock

@@ -3104,7 +3104,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.3":
+"debug@npm:*, debug@npm:4, debug@npm:^4.1.0, debug@npm:^4.1.1, debug@npm:^4.3.3":
   version: 4.3.4
   resolution: "debug@npm:4.3.4"
   dependencies:
@@ -5157,6 +5157,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"supports-color@npm:*":
+  version: 9.4.0
+  resolution: "supports-color@npm:9.4.0"
+  checksum: cb8ff8daeaf1db642156f69a9aa545b6c01dd9c4def4f90a49f46cbf24be0c245d392fcf37acd119cd1819b99dad2cc9b7e3260813f64bcfd7f5b18b5a1eefb8
+  languageName: node
+  linkType: hard
+
 "supports-color@npm:^5.3.0, supports-color@npm:^5.5.0":
   version: 5.5.0
   resolution: "supports-color@npm:5.5.0"