feat: 이미지 스켈레톤, 애니메이션 펄스 적용 #222

boostcampwm-2024 · Dec 3, 2024 · ee9e5e3 · ee9e5e3
1 parent 4f50db4
commit ee9e5e3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/frontend/src/components/ImageSkeleton.tsx b/frontend/src/components/ImageSkeleton.tsx
@@ -15,23 +15,18 @@ const ImageWithSkeleton = ({
   height,
 }: ImageWithSkeletonProps) => {
   const [loaded, setLoaded] = useState(false);
-  const [showSkeleton, setShowSkeleton] = useState(true);
   const [error, setError] = useState(false);
 
   useEffect(() => {
     const img = new Image();
     img.src = src;
 
     img.onload = () => {
-      setShowSkeleton(false);
-      setTimeout(() => {
-        setLoaded(true);
-      }, 3000);
+      setLoaded(true);
     };
 
     img.onerror = () => {
       setError(true);
-      setShowSkeleton(false);
     };
   }, [src]);
 
@@ -49,9 +44,15 @@ const ImageWithSkeleton = ({
 
   return (
     <div className="h-20 w-20 flex-shrink-0">
-      {!loaded && <div className="h-full w-full animate-pulse bg-slate-400" />}
+      {!loaded && (
+        <div className="h-full w-full animate-pulse rounded bg-c_button_gray"></div>
+      )}
       {loaded && (
-        <img className="h-full w-full object-cover" src={src} alt={alt} />
+        <img
+          className="h-full w-full rounded object-cover"
+          src={src}
+          alt={alt}
+        />
       )}
     </div>
   );

diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
@@ -30,6 +30,7 @@ module.exports = {
       animation: {
         slideInUp: 'slideInUp 0.5s ease-out forwards',
         fadeOut: 'fadeOut 0.5s ease-out forwards',
+        pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
       },
     },
     keyframes: {
@@ -41,6 +42,10 @@ module.exports = {
         '0%': { opacity: '1' },
         '100%': { opacity: '0' },
       },
+      pulse: {
+        '0%, 100%': { opacity: 1 },
+        '50%': { opacity: 0.5 },
+      },
     },
   },
   plugins: [require('tailwind-scrollbar')],