From 8750d24971fda519e02fc5aa442f25690ac87ef1 Mon Sep 17 00:00:00 2001
From: hookor <gerrard1219@gmail.com>
Date: Mon, 3 Jun 2024 18:30:34 +0900
Subject: [PATCH] Refactor: home

---
 src/components/home/CaffeineFilter.tsx      | 16 +++-
 src/components/home/CoffeeMenuSelection.tsx | 29 ++++---
 src/components/home/TodayCaffeineInfo.tsx   | 16 +++-
 src/components/home/TodayCaffeineText.tsx   | 66 ++++++++-------
 src/components/home/WaterPerCoffee.tsx      | 91 +++++++++++----------
 src/pages/Page-Home.tsx                     | 29 +++++--
 6 files changed, 139 insertions(+), 108 deletions(-)

diff --git a/src/components/home/CaffeineFilter.tsx b/src/components/home/CaffeineFilter.tsx
index e9f8bdbb..849e992d 100644
--- a/src/components/home/CaffeineFilter.tsx
+++ b/src/components/home/CaffeineFilter.tsx
@@ -1,6 +1,5 @@
+import { lazy, Suspense } from 'react';
 import Button from '@/components/common/Button';
-import CaffeineInfo from '@/components/home/CaffeineInfo';
-import CoffeeSelection from '@/components/home/CoffeeSelection';
 import { BUTTON_TEXTS } from '@/constants/common';
 import { useNavigateTo } from '@/hooks/useNavigateTo';
 import { styled } from 'styled-system/jsx';
@@ -8,14 +7,23 @@ import { RegistBtn } from '@/styles/styles';
 import { css, cx } from 'styled-system/css';
 import { useGetSignedIn } from '@/hooks/useGetSignedIn';
 
+const CaffeineInfo = lazy(() => import('@/components/home/CaffeineInfo'));
+const CoffeeSelection = lazy(() => import('@/components/home/CoffeeSelection'));
+
 const CaffeineFilter = () => {
   const registPage = useNavigateTo('/post/register');
   const { signedIn } = useGetSignedIn();
 
   return (
     <Container>
-      <CoffeeSelection />
-      <CaffeineInfo />
+      <Suspense>
+        <CoffeeSelection />
+      </Suspense>
+
+      <Suspense>
+        <CaffeineInfo />
+      </Suspense>
+
       {signedIn && (
         <Button
           text={BUTTON_TEXTS.regist}
diff --git a/src/components/home/CoffeeMenuSelection.tsx b/src/components/home/CoffeeMenuSelection.tsx
index bc46b4fe..4b94e8dd 100644
--- a/src/components/home/CoffeeMenuSelection.tsx
+++ b/src/components/home/CoffeeMenuSelection.tsx
@@ -1,7 +1,7 @@
+import { lazy, Suspense } from 'react';
 import { useParams } from 'react-router-dom';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 
-import SelectBox from '@/components/common/SelectBox';
 import RegisterLabel from '@/components/post/RegisterLabel';
 import { CAFFEINE_FILTER_TEXTS } from '@/constants/home';
 import useGetCoffeeList from '@/hooks/useGetCoffeeList';
@@ -14,6 +14,7 @@ import { SmStyle } from '@/styles/styles';
 import { Column, Grid } from '@/styles/layout';
 
 const { coffeeMenu } = CAFFEINE_FILTER_TEXTS;
+const SelectBox = lazy(() => import('@/components/common/SelectBox'));
 
 const CoffeeMenuSelection = () => {
   const { postid } = useParams();
@@ -95,18 +96,20 @@ const CoffeeMenuSelection = () => {
             essential
           />
         )}
-        <SelectBox
-          value={registInfo.brand}
-          defaultValue={registInfo.brand || coffeeMenu.brand}
-          data={brandList}
-          onClick={selectBrand}
-        />
-        <SelectBox
-          value={registInfo.menu}
-          defaultValue={coffeeMenu.menu}
-          data={menuList}
-          onClick={selectMenu}
-        />
+        <Suspense>
+          <SelectBox
+            value={registInfo.brand}
+            defaultValue={registInfo.brand || coffeeMenu.brand}
+            data={brandList}
+            onClick={selectBrand}
+          />
+          <SelectBox
+            value={registInfo.menu}
+            defaultValue={coffeeMenu.menu}
+            data={menuList}
+            onClick={selectMenu}
+          />
+        </Suspense>
       </CoffeeSelectContainer>
     </div>
   );
diff --git a/src/components/home/TodayCaffeineInfo.tsx b/src/components/home/TodayCaffeineInfo.tsx
index f31617ae..0d718aee 100644
--- a/src/components/home/TodayCaffeineInfo.tsx
+++ b/src/components/home/TodayCaffeineInfo.tsx
@@ -1,12 +1,20 @@
-import TodayCaffeineText from '@/components/home/TodayCaffeineText';
-import WaterPerCoffee from '@/components/home/WaterPerCoffee';
+import { lazy, Suspense } from 'react';
 import { styled } from 'styled-system/jsx';
 
+const TodayCaffeineText = lazy(
+  () => import('@/components/home/TodayCaffeineText')
+);
+const WaterPerCoffee = lazy(() => import('@/components/home/WaterPerCoffee'));
+
 const TodayCaffeineInfo = () => {
   return (
     <Container>
-      <TodayCaffeineText />
-      <WaterPerCoffee />
+      <Suspense>
+        <TodayCaffeineText />
+      </Suspense>
+      <Suspense>
+        <WaterPerCoffee />
+      </Suspense>
     </Container>
   );
 };
diff --git a/src/components/home/TodayCaffeineText.tsx b/src/components/home/TodayCaffeineText.tsx
index 5630d99e..3732fdec 100644
--- a/src/components/home/TodayCaffeineText.tsx
+++ b/src/components/home/TodayCaffeineText.tsx
@@ -19,51 +19,49 @@ const TodayCaffeineText = () => {
   const allCount = todayCoffeeData?.allCount;
   const waterPerCoffeeCount = allCount && allCount * 2 - takedWater;
 
-  const anonymousText = !user?.nickname && (
-    <div className={Column}>
-      <span>{anonymous.first}</span>
-      <span>{anonymous.second}</span>
-      <span>{anonymous.third}</span>
-    </div>
-  );
-
-  const signedInText = (
-    <div className={Column}>
-      <span>
-        {user ? user?.nickname : userInfo.nickname}
-        {signedIn.first}
-      </span>
-      <div>
-        <CaffeineInfo>총 {user?.sum || 0}mg</CaffeineInfo>
-        {signedIn.second}
-      </div>
-      <span>{signedIn.third}</span>
-    </div>
-  );
-
-  const signedInMessage = (
-    <div>
-      {signedIn.messageText.first}
-      {waterPerCoffeeCount ? ` ${waterPerCoffeeCount}` : null}
-      {waterPerCoffeeCount
-        ? signedIn.messageText.second
-        : signedIn.messageText.third}
-    </div>
-  );
-
   return (
     <div className={HomeHeaderContent}>
       <div className={cx(Align, Between)}>
-        {user?.nickname ? signedInText : anonymousText}
+        {user?.nickname ? (
+          <div className={Column}>
+            <span>
+              {user ? user?.nickname : userInfo.nickname}
+              {signedIn.first}
+            </span>
+            <div>
+              <CaffeineInfo>총 {user?.sum || 0}mg</CaffeineInfo>
+              {signedIn.second}
+            </div>
+            <span>{signedIn.third}</span>
+          </div>
+        ) : (
+          <div className={Column}>
+            <span>{anonymous.first}</span>
+            <span>{anonymous.second}</span>
+            <span>{anonymous.third}</span>
+          </div>
+        )}
         <CoffeeImage
           src="/png/coffee_mainimg.png"
           alt="coffee"
+          srcset="/png/coffee_mainimg.png 120w"
+          sizes="(min-width: 360px) 120px, (max-width: 500px) 120px"
         />
       </div>
       <AlertBubble
         type={allCount && allCount >= 1 ? '' : null}
         message={
-          allCount && allCount >= 1 ? signedInMessage : anonymous.messageText
+          allCount && allCount >= 1 ? (
+            <div>
+              {signedIn.messageText.first}
+              {waterPerCoffeeCount ? ` ${waterPerCoffeeCount}` : null}
+              {waterPerCoffeeCount
+                ? signedIn.messageText.second
+                : signedIn.messageText.third}
+            </div>
+          ) : (
+            anonymous.messageText
+          )
         }
       />
     </div>
diff --git a/src/components/home/WaterPerCoffee.tsx b/src/components/home/WaterPerCoffee.tsx
index dcbc2670..58736658 100644
--- a/src/components/home/WaterPerCoffee.tsx
+++ b/src/components/home/WaterPerCoffee.tsx
@@ -1,4 +1,4 @@
-import { lazy } from 'react';
+import { lazy, Suspense } from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { BUTTON_TEXTS } from '@/constants/common';
@@ -31,46 +31,6 @@ const WaterPerCoffee = () => {
   const user = useRecoilValue(userInfoState);
   const { coffeeInfo: todayCoffeeData } = useGetTodayCoffeeData();
 
-  const anonymousCard = (
-    <div className={cx(Column, Center, MarginAuto)}>
-      <CTA
-        text={anonymous.card}
-        actionText={BUTTON_TEXTS.signIn1}
-        btn={true}
-        fn={useNavigateTo('/start/1')}
-      />
-    </div>
-  );
-
-  const notConsumedCoffee = (
-    <div className={cx(Column, Center, MarginAuto)}>
-      <span className={AlertMessage}>{signedIn.card.notConsumed}</span>
-      <Button
-        text={signedIn.btn}
-        onClick={useNavigateTo('/post/register')}
-        className={RegistCoffeeBtn}
-      />
-    </div>
-  );
-
-  const consumedCoffee = (
-    <ConsumedCoffeeContainer className={Column}>
-      <div className={cx(Flex, Between)}>
-        <CoffeeIntake data={todayCoffeeData} />
-        <WaterIntake coffeeCount={todayCoffeeData?.allCount} />
-      </div>
-      <TodayMenuList className={Flex}>
-        {todayCoffeeData?.allCount !== null &&
-          todayCoffeeData?.item.map((item, idx) => (
-            <TodayMenuItem
-              data={item}
-              key={idx}
-            />
-          ))}
-      </TodayMenuList>
-    </ConsumedCoffeeContainer>
-  );
-
   return (
     <Container
       className={cx(
@@ -80,12 +40,53 @@ const WaterPerCoffee = () => {
         Align,
         Between
       )}>
-      {!user.nickname && anonymousCard}
-      {user.nickname && !todayCoffeeData?.allCount && notConsumedCoffee}
+      {!user.nickname && (
+        <div className={cx(Column, Center, MarginAuto)}>
+          <Suspense>
+            <CTA
+              text={anonymous.card}
+              actionText={BUTTON_TEXTS.signIn1}
+              btn={true}
+              fn={useNavigateTo('/start/1')}
+            />
+          </Suspense>
+        </div>
+      )}
+      {user.nickname && !todayCoffeeData?.allCount && (
+        <div className={cx(Column, Center, MarginAuto)}>
+          <span className={AlertMessage}>{signedIn.card.notConsumed}</span>
+          <Suspense>
+            <Button
+              text={signedIn.btn}
+              onClick={useNavigateTo('/post/register')}
+              className={RegistCoffeeBtn}
+            />
+          </Suspense>
+        </div>
+      )}
       {user.nickname &&
         todayCoffeeData?.allCount &&
-        todayCoffeeData?.allCount >= 1 &&
-        consumedCoffee}
+        todayCoffeeData?.allCount >= 1 && (
+          <ConsumedCoffeeContainer className={Column}>
+            <div className={cx(Flex, Between)}>
+              <Suspense>
+                <CoffeeIntake data={todayCoffeeData} />
+              </Suspense>
+              <Suspense>
+                <WaterIntake coffeeCount={todayCoffeeData?.allCount} />
+              </Suspense>
+            </div>
+            <TodayMenuList className={Flex}>
+              {todayCoffeeData?.allCount !== null &&
+                todayCoffeeData?.item.map((item, idx) => (
+                  <TodayMenuItem
+                    data={item}
+                    key={idx}
+                  />
+                ))}
+            </TodayMenuList>
+          </ConsumedCoffeeContainer>
+        )}
     </Container>
   );
 };
diff --git a/src/pages/Page-Home.tsx b/src/pages/Page-Home.tsx
index 1c1d3eac..963e7d36 100644
--- a/src/pages/Page-Home.tsx
+++ b/src/pages/Page-Home.tsx
@@ -1,13 +1,18 @@
-import CaffeineFilter from '@/components/home/CaffeineFilter';
-import HomeFooter from '@/components/home/HomeFooter';
-import TodayCaffeineInfo from '@/components/home/TodayCaffeineInfo';
-import WeeklyPopular from '@/components/home/WeeklyPopular';
+import { lazy, Suspense } from 'react';
+
 import SEOMeta from '@/components/common/SEOMeta';
 import SEO_DATA from '@/constants/SEOData';
 import { useComposeHeader } from '@/hooks/useComposeHeader';
 import useGetUserInfo from '@/hooks/useGetUserInfo';
 import { styled } from 'styled-system/jsx';
 
+const CaffeineFilter = lazy(() => import('../components/home/CaffeineFilter'));
+const TodayCaffeineInfo = lazy(
+  () => import('../components/home/TodayCaffeineInfo')
+);
+const HomeFooter = lazy(() => import('../components/home/HomeFooter'));
+const WeeklyPopular = lazy(() => import('../components/home/WeeklyPopular'));
+
 const Home = () => {
   useComposeHeader(true, '', 'icons');
   useGetUserInfo();
@@ -16,11 +21,19 @@ const Home = () => {
     <>
       <SEOMeta pageData={SEO_DATA.home} />
       <Container>
-        <TodayCaffeineInfo />
-        <CaffeineFilter />
-        <WeeklyPopular />
+        <Suspense>
+          <TodayCaffeineInfo />
+        </Suspense>
+        <Suspense>
+          <CaffeineFilter />
+        </Suspense>
+        <Suspense>
+          <WeeklyPopular />
+        </Suspense>
       </Container>
-      <HomeFooter />
+      <Suspense>
+        <HomeFooter />
+      </Suspense>
     </>
   );
 };