From c01dc4b8234784fbb5025d171a868bc7e68f290d Mon Sep 17 00:00:00 2001
From: brian <90752841+wokbjso@users.noreply.github.com>
Date: Tue, 26 Nov 2024 18:26:03 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20=EC=B9=9C=EA=B5=AC=20=EC=B0=BE?=
 =?UTF-8?q?=EA=B8=B0=EC=97=90=EC=84=9C=20=EC=B9=9C=EA=B5=AC=20=EC=B6=94?=
 =?UTF-8?q?=EC=B2=9C=20=EC=8A=A4=EC=BC=88=EB=A0=88=ED=86=A4=20Suspense?=
 =?UTF-8?q?=EB=A1=9C=20=EC=B2=98=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...recommended-profile-card-list-skeleton.tsx |  4 +++-
 .../components/empty-keyword.tsx              | 20 +++++++++++++++++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/features/profile-recommend/components/skeleton/recommended-profile-card-list-skeleton.tsx b/features/profile-recommend/components/skeleton/recommended-profile-card-list-skeleton.tsx
index d8ccbccf..b5437277 100644
--- a/features/profile-recommend/components/skeleton/recommended-profile-card-list-skeleton.tsx
+++ b/features/profile-recommend/components/skeleton/recommended-profile-card-list-skeleton.tsx
@@ -4,7 +4,8 @@ import { ProfileCardListProps } from '../organisms';
 
 export function RecommendedProfileCardListSkeleton({
   variant = 'horizontal',
-}: Pick<ProfileCardListProps, 'variant'>) {
+  itemStyle,
+}: Pick<ProfileCardListProps, 'variant'> & { itemStyle?: object }) {
   return (
     <>
       <div className={RecommendedProfileCardListSkeletonStyle.title} />
@@ -21,6 +22,7 @@ export function RecommendedProfileCardListSkeleton({
                 variant: variant === 'horizontal' ? 'vertical' : 'horizontal',
               }),
             )}
+            style={itemStyle}
           />
         ))}
       </div>
diff --git a/features/profile-search/components/empty-keyword.tsx b/features/profile-search/components/empty-keyword.tsx
index 884afe30..1ccdae11 100644
--- a/features/profile-search/components/empty-keyword.tsx
+++ b/features/profile-search/components/empty-keyword.tsx
@@ -1,5 +1,12 @@
+import { lazy, Suspense } from 'react';
+
 import { Divider } from '@/components/atoms/divider';
-import { RecommendedProfileItemList } from '@/features/profile-recommend';
+import { RecommendedProfileCardListSkeleton } from '@/features/profile-recommend';
+const RecommendedProfileItemList = lazy(() =>
+  import('@/features/profile-recommend').then((module) => ({
+    default: module.RecommendedProfileItemList,
+  })),
+);
 import { css } from '@/styled-system/css';
 
 export const EmptyKeyword = () => {
@@ -11,7 +18,16 @@ export const EmptyKeyword = () => {
         서로의 기록에 응원을 보내보세요.
       </div>
       <Divider variant="thick" />
-      <RecommendedProfileItemList title="다른 수영인과 응원을 주고 받아보세요" />
+      <Suspense
+        fallback={
+          <RecommendedProfileCardListSkeleton
+            variant="vertical"
+            itemStyle={{ height: '64px' }}
+          />
+        }
+      >
+        <RecommendedProfileItemList title="다른 수영인과 응원을 주고 받아보세요" />
+      </Suspense>
     </>
   );
 };