feat: recommendList skeleton 컴포넌트 적용

Kernel360 · Mar 3, 2024 · 8d6ebfc · 8d6ebfc
1 parent 9de333d
commit 8d6ebfc
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/src/components/shared/carousel/RecommendListContainer.tsx b/src/components/shared/carousel/RecommendListContainer.tsx
@@ -3,11 +3,17 @@
 import React from 'react';
 
 import useRecommendProducts from '@remote/queries/home/useRecommendProducts';
+import Skeleton from '@shared/skeleton/Skeleton';
 
 import RecommendList from './RecommendList';
 
 function RecommendListContainer() {
-  const { data: recommendProductsData } = useRecommendProducts();
+  const { data: recommendProductsData, isLoading } = useRecommendProducts();
+
+  if (isLoading) {
+    return <Skeleton width="100%" height="172px" />;
+  }
+
   return (
     <RecommendList recommendProductsData={recommendProductsData!} />
   );

diff --git a/src/components/shared/skeleton/Skeleton.tsx b/src/components/shared/skeleton/Skeleton.tsx
@@ -5,8 +5,8 @@ import styles from './Skeleton.module.scss';
 const cx = classNames.bind(styles);
 
 interface SkeletonProps {
-  width: number
-  height: number
+  width: number | string
+  height: number | string
 }
 
 function Skeleton({ width, height }: SkeletonProps) {