Refactor: lazy with Suspense wrapping

7-7-2 · Jun 1, 2024 · a9c9714 · a9c9714
1 parent 977577a
commit a9c9714
Show file tree

Hide file tree

Showing 23 changed files with 247 additions and 129 deletions.
diff --git a/src/components/follow/UserListItem.tsx b/src/components/follow/UserListItem.tsx
@@ -43,7 +43,7 @@ const UserListItem = ({
           userId={userId}
           post={true}
         />
-        {userId !== myId && <FollowBtn userId={userId} />}
+        {myId && userId !== myId && <FollowBtn userId={userId} />}
       </div>
     ),
     []

diff --git a/src/components/home/WeeklyPopular.tsx b/src/components/home/WeeklyPopular.tsx
@@ -1,4 +1,4 @@
-import { lazy } from 'react';
+import { Suspense, lazy } from 'react';
 import { useGetPopularList } from '@/hooks/home/useGetPopularList';
 import { TODAY_CAFFEINE_INFO_TEXTS } from '@/constants/home';
 import { styled } from 'styled-system/jsx';
@@ -25,11 +25,12 @@ const WeeklyPopular = () => {
           brandList.map(
             (item, idx) =>
               item && (
-                <WeeklyPopularItem
-                  data={item}
-                  idx={idx}
-                  key={item?.brand}
-                />
+                <Suspense key={item?.brand}>
+                  <WeeklyPopularItem
+                    data={item}
+                    idx={idx}
+                  />
+                </Suspense>
               )
           )}
       </WeeklyPopularList>

diff --git a/src/components/mypage/MyProfile.tsx b/src/components/mypage/MyProfile.tsx
@@ -1,4 +1,4 @@
-import { lazy, useRef } from 'react';
+import { Suspense, lazy, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 
@@ -96,7 +96,11 @@ const MyProfile = () => {
 
   return (
     <>
-      {isModal && <ConfirmDeleteUser />}
+      {isModal && (
+        <Suspense>
+          <ConfirmDeleteUser />
+        </Suspense>
+      )}
       <>
         <EditProfileImg
           profileImg={userData && userData.profileUrl}

diff --git a/src/components/post/CommentProto.tsx b/src/components/post/CommentProto.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { Suspense, useState } from 'react';
 import { styled } from 'styled-system/jsx';
 import { Flex, Column } from '@/styles/layout';
 
@@ -88,13 +88,15 @@ const CommentProto = ({
         {signedIn && (
           <>
             <Target ref={ref} />
-            <CommentAction
-              myComment={myComment}
-              comment={comment}
-              id={id}
-              postNum={postNum}
-              parentCommentId={parentCommentId}
-            />
+            <Suspense>
+              <CommentAction
+                myComment={myComment}
+                comment={comment}
+                id={id}
+                postNum={postNum}
+                parentCommentId={parentCommentId}
+              />
+            </Suspense>
           </>
         )}
       </Container>

diff --git a/src/components/post/PostDetail.tsx b/src/components/post/PostDetail.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { Suspense, useRef } from 'react';
 import { useQueries } from '@tanstack/react-query';
 
 import MiniProfile from '@/components/common/MiniProfile';
@@ -63,23 +63,29 @@ const PostDetail = ({ postNum }: { postNum: string }) => {
   return (
     <>
       {toggle && isPostOwner && (
-        <PostOwnerOption
-          cancleOptions={cancelOptions}
-          setConfirm={setConfirm}
-          postId={postNum}
-        />
+        <Suspense>
+          <PostOwnerOption
+            cancleOptions={cancelOptions}
+            setConfirm={setConfirm}
+            postId={postNum}
+          />
+        </Suspense>
       )}
       {toggle && !isPostOwner && (
-        <PublicOption
-          handleToggle={cancelOptions}
-          postId={postNum}
-        />
+        <Suspense>
+          <PublicOption
+            handleToggle={cancelOptions}
+            postId={postNum}
+          />
+        </Suspense>
       )}
       {confirm && (
-        <ConfirmDelete
-          cancelConfirm={cancelConfirm}
-          postId={postNum}
-        />
+        <Suspense>
+          <ConfirmDelete
+            cancelConfirm={cancelConfirm}
+            postId={postNum}
+          />
+        </Suspense>
       )}
       {postData && socialCounts && (
         <>
@@ -122,7 +128,9 @@ const PostDetail = ({ postNum }: { postNum: string }) => {
               commentCount={socialCounts.data.totalComments}
             />
           </InputContext.Provider>
-          <ReplyToPanel />
+          <Suspense>
+            <ReplyToPanel />
+          </Suspense>
           <PostInput
             inputRef={inputRef}
             postId={postNum}

diff --git a/src/components/posts/following/PostBody.tsx b/src/components/posts/following/PostBody.tsx
@@ -5,7 +5,7 @@ import { FollowingPost } from '@/types/types';
 import { styled } from 'styled-system/jsx';
 import { PostContent } from '@/styles/styles';
 import { PaddingT12 } from '@/styles/styles';
-import { lazy } from 'react';
+import { Suspense, lazy } from 'react';
 
 const ImageErrorCTA = lazy(() => import('../../common/ImageErrorCTA'));
 
@@ -44,10 +44,12 @@ const PostBody = ({
       <PostContent onClick={onClick}>{postTitle}</PostContent>
       {isError ? (
         <ImgErrorContainer>
-          <ImageErrorCTA
-            text={'이미지를 로드할 수 없습니다.'}
-            handleOnclick={handleReloadImg}
-          />
+          <Suspense>
+            <ImageErrorCTA
+              text={'이미지를 로드할 수 없습니다.'}
+              handleOnclick={handleReloadImg}
+            />
+          </Suspense>
         </ImgErrorContainer>
       ) : (
         <PostImg

diff --git a/src/components/posts/following/PostCard.tsx b/src/components/posts/following/PostCard.tsx
@@ -13,7 +13,7 @@ import { usePostOptions } from '@/hooks/post/usePostOptions';
 import { useNavigateTo } from '@/hooks/useNavigateTo';
 import PostBody from '@/components/posts/following/PostBody';
 import { useVerifyOwner } from '@/hooks/post/useVerifyOwner';
-import React from 'react';
+import React, { Suspense } from 'react';
 
 const PublicOption = React.lazy(
   () => import('../../post/overlay/PublicOption')
@@ -67,24 +67,30 @@ const PostCard = ({ ...props }: FollowingPost) => {
   return (
     <>
       {toggle && !isPostOwner && (
-        <PublicOption
-          handleToggle={cancelOptions}
-          postId={postId}
-        />
+        <Suspense>
+          <PublicOption
+            handleToggle={cancelOptions}
+            postId={postId}
+          />
+        </Suspense>
       )}
       {toggle && isPostOwner && (
-        <PostOwnerOption
-          cancleOptions={cancelOptions}
-          postId={postId}
-          setConfirm={setConfirm}
-        />
+        <Suspense>
+          <PostOwnerOption
+            cancleOptions={cancelOptions}
+            postId={postId}
+            setConfirm={setConfirm}
+          />
+        </Suspense>
       )}
       {confirm && (
-        <ConfirmDelete
-          cancelConfirm={cancelConfirm}
-          postId={postId}
-          posts={true}
-        />
+        <Suspense>
+          <ConfirmDelete
+            cancelConfirm={cancelConfirm}
+            postId={postId}
+            posts={true}
+          />
+        </Suspense>
       )}
       <Container>
         <UserProfile className={cx(Flex, Between)}>

diff --git a/src/components/posts/following/PostsFollowing.tsx b/src/components/posts/following/PostsFollowing.tsx
@@ -1,4 +1,4 @@
-import React, { useId } from 'react';
+import React, { Suspense, useId } from 'react';
 
 import PostCard from '@/components/posts/following/PostCard';
 import SEOMeta from '@/components/common/SEOMeta';
@@ -33,8 +33,16 @@ const PostsFollowing = () => {
           <Target ref={ref} />
         </Container>
       )}
-      {postsData && postsData.length === 0 && <FollowDiscoveryCTA />}
-      {!postsData && <SignInCTA />}
+      {postsData && postsData.length === 0 && (
+        <Suspense>
+          <FollowDiscoveryCTA />
+        </Suspense>
+      )}
+      {!postsData && (
+        <Suspense>
+          <SignInCTA />
+        </Suspense>
+      )}
     </>
   );
 };

diff --git a/src/components/profile/EmptyPostGrid.tsx b/src/components/profile/EmptyPostGrid.tsx
@@ -1,4 +1,4 @@
-import { lazy } from 'react';
+import { lazy, Suspense } from 'react';
 import { PROFILE_TEXTS } from '@/constants/profile';
 
 import { css, cx } from 'styled-system/css';
@@ -27,11 +27,13 @@ const EmptyPostGrid = ({
 
   return (
     <Container className={cx(Justify, userId === profileId && DefaultHeight)}>
-      <CTA
-        text={myProfile ? my.text : another}
-        actionText={myProfile ? my.actionText : ''}
-        fn={myProfile ? handleClickBtn : undefined}
-      />
+      <Suspense>
+        <CTA
+          text={myProfile ? my.text : another}
+          actionText={myProfile ? my.actionText : ''}
+          fn={myProfile ? handleClickBtn : undefined}
+        />
+      </Suspense>
     </Container>
   );
 };

diff --git a/src/components/profile/FollowCount.tsx b/src/components/profile/FollowCount.tsx
@@ -33,7 +33,10 @@ const FollowCount = ({ data }: FollowCountProps) => {
 
   const { userId: profileId, postCount } = data;
 
-  const { isFollowing, getCheckFollowing } = useGetCheckFollowing(profileId);
+  const { isFollowing, getCheckFollowing } = useGetCheckFollowing(
+    profileId,
+    signedIn
+  );
   const { userFollowCount } = useGetFollowCount(profileId, isFollowing);
 
   const handleFollowBtn = async () => {

diff --git a/src/components/profile/MemberProfile.tsx b/src/components/profile/MemberProfile.tsx
@@ -1,4 +1,4 @@
-import { lazy } from 'react';
+import { lazy, Suspense } from 'react';
 
 import { useTargetInfiniteScroll } from '@/hooks/useTargetInfiniteScroll';
 import { getProfilePostIQParam } from '@/hooks/useInfiniteScroll';
@@ -40,19 +40,25 @@ const MemberProfile = ({
   return (
     <Container className={Column}>
       <div className={cx(Column, Between)}>
-        <ProfileDetail userId={profileId} />
-        <FollowCount data={followCountData} />
+        <Suspense>
+          <ProfileDetail userId={profileId} />
+          <FollowCount data={followCountData} />
+        </Suspense>
       </div>
       {allCount != 0 ? (
-        <PostsGrid
-          data={postsData}
-          postRef={postRef}
-        />
+        <Suspense>
+          <PostsGrid
+            data={postsData}
+            postRef={postRef}
+          />
+        </Suspense>
       ) : (
-        <EmptyPostGrid
-          profileId={profileId}
-          userId={userId}
-        />
+        <Suspense>
+          <EmptyPostGrid
+            profileId={profileId}
+            userId={userId}
+          />
+        </Suspense>
       )}
     </Container>
   );

diff --git a/src/components/profile/PostsGrid.tsx b/src/components/profile/PostsGrid.tsx
@@ -1,4 +1,4 @@
-import { lazy } from 'react';
+import { lazy, Suspense } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useImgErrorCTA } from '@/hooks/useImgErrorCTA';
 import { PostsGridProps, UserProfilePostsTypes } from '@/types/types';
@@ -26,10 +26,12 @@ const PostsGrid = ({ data, postRef }: PostsGridProps) => {
     <>
       {isError ? (
         <Container>
-          <ImageErrorCTA
-            text={'게시물을 불러올 수 없습니다.'}
-            handleOnclick={refresh}
-          />
+          <Suspense>
+            <ImageErrorCTA
+              text={'게시물을 불러올 수 없습니다.'}
+              handleOnclick={refresh}
+            />
+          </Suspense>
         </Container>
       ) : (
         <GridContainer className={cx(Grid, Center)}>

diff --git a/src/components/search/SearchListItem.tsx b/src/components/search/SearchListItem.tsx
@@ -4,7 +4,7 @@ import { Align, Between } from '@/styles/layout';
 import { styled } from 'styled-system/jsx';
 import { cx } from 'styled-system/css';
 import { useSetHistory } from '@/hooks/search/useSetHistory';
-import { memo, lazy, useState } from 'react';
+import { memo, lazy, useState, Suspense } from 'react';
 
 const SearchMore = lazy(() => import('@/components/search/SearchMore'));
 const SearchMoreList = lazy(() => import('@/components/search/SearchMoreList'));
@@ -40,9 +40,15 @@ const SearchListItem = memo(({ users, search }: SearchList) => {
           </Container>
         ))}
       {users.length == 5 && !loadMore && (
-        <SearchMore onClick={handleSearchMore({ keyword: search })} />
+        <Suspense>
+          <SearchMore onClick={handleSearchMore({ keyword: search })} />
+        </Suspense>
+      )}
+      {loadMore && (
+        <Suspense>
+          <SearchMoreList search={search} />
+        </Suspense>
       )}
-      {loadMore && <SearchMoreList search={search} />}
     </>
   );
 });

diff --git a/src/components/support/CustomerCenter.tsx b/src/components/support/CustomerCenter.tsx
@@ -1,4 +1,4 @@
-import { lazy } from 'react';
+import { lazy, Suspense } from 'react';
 import Taps from '@/components/common/Taps';
 import SEOMeta from '@/components/common/SEOMeta';
 import SEO_DATA from '@/constants/SEOData';
@@ -20,7 +20,8 @@ const CustomerCenter = () => {
         selectedTab={seletedTap}
         handleButtonClick={handleSelectTap}
       />
-      {seletedTap === taps[0] ? <Notice /> : <FAQ />}
+
+      <Suspense>{seletedTap === taps[0] ? <Notice /> : <FAQ />}</Suspense>
     </>
   );
 };