fix: 배너 스켈레톤 구현 #111

#preview
boostcampwm-2024 · Dec 5, 2024 · 4a367cc · 4a367cc
1 parent d223ea2
commit 4a367cc
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 15 deletions.
diff --git a/frontend/src/components/Banner/BannerSlider.tsx b/frontend/src/components/Banner/BannerSlider.tsx
@@ -61,20 +61,24 @@ const BannerSlider: React.FC<BannerSliderProps> = ({
 
   return (
     <div className={className}>
-      <Slider {...settings} className="h-full w-full">
-        {banners.map((banner, index) => (
-          <div key={index} className="cursor-pointer">
-            <img
-              className="box-sizing:border-box h-full w-full rounded-md border-[1.5px] border-c_border_gray"
-              src={banner.imageUrl}
-              alt={`Banner ${index}`}
-              onMouseDown={handleMouseDown}
-              onMouseUp={handleMouseUp}
-              onClick={() => handleClick(banner.redirectUrl)}
-            />
-          </div>
-        ))}
-      </Slider>
+      {banners.length > 0 ? (
+        <Slider {...settings} className="h-full w-full">
+          {banners.map((banner, index) => (
+            <div key={index} className="cursor-pointer">
+              <img
+                className="box-sizing:border-box h-full w-full rounded-md border-[1.5px] border-c_border_gray"
+                src={banner.imageUrl}
+                alt={`Banner ${index}`}
+                onMouseDown={handleMouseDown}
+                onMouseUp={handleMouseUp}
+                onClick={() => handleClick(banner.redirectUrl)}
+              />
+            </div>
+          ))}
+        </Slider>
+      ) : (
+        <div className="h-96 w-full animate-pulse rounded-md border-[1.5px] bg-c_textarea_gray"></div>
+      )}
     </div>
   );
 };

diff --git a/frontend/src/components/ImageSkeleton.tsx b/frontend/src/components/ImageSkeleton.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
 type ImageWithSkeletonProps = {
   src: string;