diff --git a/src/components/shared/carousel/RecommendListContainer.tsx b/src/components/shared/carousel/RecommendListContainer.tsx
index 2e23f519..6122b51a 100644
--- 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
index c147a234..2a872980 100644
--- 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) {