chore: 스켈레톤 컴포넌트 구현

features/news/components/molecules/empty-news.tsx

@@ -1,8 +1,14 @@
 import Link from 'next/link';
+import { lazy, Suspense } from 'react';
 
 import { SpeechBubbleIcon } from '@/components/atoms';
 import { Divider } from '@/components/atoms/divider';
-import { RecommendedProfileCardList } from '@/features/profile-recommend';
+import { RecommendedProfileCardListSkeleton } from '@/features/profile-recommend';
+const LazyRecommendedProfileCardList = lazy(() =>
+  import('@/features/profile-recommend').then((module) => ({
+    default: module.RecommendedProfileCardList,
+  })),
+);
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
@@ -23,10 +29,14 @@ export const EmptyNews = () => {
         </Link>
       </div>
       <Divider variant="thick" />
-      <RecommendedProfileCardList
-        title="다른 수영인과 응원을 주고 받아보세요"
-        variant="vertical"
-      />
+      <Suspense
+        fallback={<RecommendedProfileCardListSkeleton variant="vertical" />}
+      >
+        <LazyRecommendedProfileCardList
+          title="다른 수영인과 응원을 주고 받아보세요"
+          variant="vertical"
+        />
+      </Suspense>
     </>
   );
 };

features/profile-recommend/components/index.ts

@@ -1,2 +1,3 @@
 export * from './molecules';
 export * from './organisms';
+export * from './skeleton';

features/profile-recommend/components/organisms/recommended-profile-card-list.tsx

@@ -1,5 +1,3 @@
-import { Suspense } from 'react';
-
 import { useCurrentMemberInfo, useMemberFollowingState } from '@/hooks';
 import { css, cva } from '@/styled-system/css';
 
@@ -30,18 +28,16 @@ export function RecommendedProfileCardList({
   return (
     <section className={ProfileCardListStyle.layout}>
       <p className={ProfileCardListStyle.title}>{title}</p>
-      <Suspense>
-        <div className={css(ProfileCardListStyle.slider.raw({ variant }))}>
-          {recommendedMemberIds.map((memberId) => (
-            <RecommendedProfileCard
-              key={memberId}
-              variant={variant === 'vertical' ? 'horizontal' : 'vertical'}
-              memberId={memberId}
-              isMyProfile={getIsMyProfile(memberId)}
-            />
-          ))}
-        </div>
-      </Suspense>
+      <div className={css(ProfileCardListStyle.slider.raw({ variant }))}>
+        {recommendedMemberIds.map((memberId) => (
+          <RecommendedProfileCard
+            key={memberId}
+            variant={variant === 'vertical' ? 'horizontal' : 'vertical'}
+            memberId={memberId}
+            isMyProfile={getIsMyProfile(memberId)}
+          />
+        ))}
+      </div>
     </section>
   );
 }

features/profile-recommend/components/skeleton/index.ts

@@ -0,0 +1 @@
+export * from './recommended-profile-card-list-skeleton';

features/profile-recommend/components/skeleton/recommended-profile-card-list-skeleton.tsx

@@ -0,0 +1,69 @@
+import { css, cva } from '@/styled-system/css';
+
+import { ProfileCardListProps } from '../organisms';
+
+export function RecommendedProfileCardListSkeleton({
+  variant = 'horizontal',
+}: Pick<ProfileCardListProps, 'variant'>) {
+  return (
+    <>
+      <div className={RecommendedProfileCardListSkeletonStyle.title} />
+      <div
+        className={css(
+          RecommendedProfileCardListSkeletonStyle.itemLayout.raw({ variant }),
+        )}
+      >
+        {Array.from({ length: 5 }, (_, i) => (
+          <div
+            key={i}
+            className={css(
+              RecommendedProfileCardListSkeletonStyle.item.raw({
+                variant: variant === 'horizontal' ? 'vertical' : 'horizontal',
+              }),
+            )}
+          />
+        ))}
+      </div>
+    </>
+  );
+}
+
+const RecommendedProfileCardListSkeletonStyle = {
+  itemLayout: cva({
+    base: {
+      display: 'flex',
+      gap: '8px',
+      p: '16px 20px',
+    },
+    variants: {
+      variant: {
+        vertical: {
+          flexDirection: 'column',
+        },
+        horizontal: {},
+      },
+    },
+  }),
+  title: css({
+    m: '20px 0 0 20px',
+    width: '240px',
+    height: '24px',
+    backgroundColor: 'fill.normal',
+    borderRadius: '4px',
+    animation: 'skeleton 1.5s infinite',
+  }),
+  item: cva({
+    base: {
+      backgroundColor: 'fill.normal',
+      borderRadius: '10px',
+      flexShrink: 0,
+      animation: 'skeleton 1.5s infinite',
+    },
+    variants: {
+      variant: {
+        vertical: { width: '146px', height: '208px' },
+        horizontal: { w: 'full', height: '100px' },
+      },
+    },
+  }),
+};

features/profile/components/organisms/my-page.tsx

@@ -1,13 +1,18 @@
 'use client';
 
 import Link from 'next/link';
-import { useState } from 'react';
+import { lazy, Suspense, useState } from 'react';
 
 import { Button } from '@/components/atoms';
 import { StatisticsIcon } from '@/components/atoms';
 import BadgeIcon from '@/components/atoms/icons/badge-icon';
 import { Tab, TabItem } from '@/components/molecules';
-import { RecommendedProfileCardList } from '@/features/profile-recommend';
+const LazyRecommendedProfileCardList = lazy(() =>
+  import('@/features/profile-recommend').then((module) => ({
+    default: module.RecommendedProfileCardList,
+  })),
+);
+import { RecommendedProfileCardListSkeleton } from '@/features/profile-recommend';
 import { useToast } from '@/hooks';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
@@ -61,7 +66,9 @@ export function MyProfile({
           />
         </div>
       </section>
-      <RecommendedProfileCardList title="다른 수영인과 응원을 주고 받아보세요" />
+      <Suspense fallback={<RecommendedProfileCardListSkeleton />}>
+        <LazyRecommendedProfileCardList title="다른 수영인과 응원을 주고 받아보세요" />
+      </Suspense>
       <Tab type="primary">
         <TabItem
           text="통계"