Refactor: 스켈레톤 로딩 CSS 변수화

TeamATM · Oct 26, 2023 · 3377083 · 3377083
1 parent ed2aa64
commit 3377083
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 41 deletions.
diff --git a/src/components/common/skeleton/RecommendBoxSkeleton.tsx b/src/components/common/skeleton/RecommendBoxSkeleton.tsx
@@ -1,3 +1,4 @@
+import { loadingCSS } from '@/styles/GlobalStyles';
 import color from '@/styles/color';
 import { css } from '@emotion/react';
 
@@ -25,24 +26,6 @@ const recommendsCSS = css`
   grid-template-columns: repeat(2, 1fr);
 `;
 
-const load = css`
-  @keyframes loading {
-    0% {
-      background-position: 0;
-    }
-    100% {
-      background-position: 480px;
-    }
-  }
-
-  animation: loading 10s infinite;
-  background: linear-gradient(
-    to right,
-    rgba(246, 247, 248, 0.8), rgba(204, 207, 208, 0.7) 50%, rgba(246, 247, 248, 0.8) 100%
-  );
-  background-size: 200% 100%;
-`;
-
 const boxCSS = css`
   margin: 0.5rem;
   padding: 1rem;
@@ -60,22 +43,22 @@ const imageWrapperCSS = css`
   position: relative;
   margin: 0.25rem;
   border-radius: 50%;
-  ${load}
+  ${loadingCSS}
 `;
 
 const characterNameCSS = css`
   width: 5rem;
   height: 1rem;
   border-radius: 1rem;
-  ${load};
+  ${loadingCSS};
 `;
 
 const hashTagCSS = css`
   height: 0.75rem;
   margin: 0.375rem;
   width: 8rem;
   border-radius: 0.75rem;
-  ${load}
+  ${loadingCSS}
 `;
 
 const statusMessageCSS = css`
@@ -85,5 +68,5 @@ const statusMessageCSS = css`
   margin: 0.375rem;
   border-radius: 0.875rem;
 
-  ${load}
+  ${loadingCSS}
 `;
diff --git a/src/components/common/skeleton/SkeletonList.tsx b/src/components/common/skeleton/SkeletonList.tsx
@@ -1,3 +1,4 @@
+import { loadingCSS } from '@/styles/GlobalStyles';
 import { css } from '@emotion/react';
 
 const SkeletonList = () => (
@@ -19,22 +20,6 @@ const SingleSkeleton = () => (
   </div>
 );
 
-const load = css`
-  @keyframes loading {
-    0% {
-      background-position: 0;
-    }
-    100% {
-      background-position: 480px;
-    }
-  }
-
-  animation: loading 10s infinite;
-  background: linear-gradient(to right, #f2f2f2, #ddd, #f2f2f2);
-
-  background-size: 200% 100%;
-`;
-
 const friendCSS = css`
   display:flex;
   flex-direction:row;
@@ -47,7 +32,7 @@ const imageWrapperCSS = css`
   position: relative;
   margin: 0.375rem;
   border-radius: 50%;
-  ${load};
+  ${loadingCSS};
 `;
 
 const textWrapperCSS = css`
@@ -63,12 +48,12 @@ const characterNameCSS = css`
   width: 5rem;
   height: 1rem;
   border-radius: 1rem;
-  ${load};
+  ${loadingCSS};
 `;
 
 const messageCSS = css`
   width: 15rem;
   height: 0.75rem;
   border-radius: 0.75rem;
-  ${load};
+  ${loadingCSS};
 `;
diff --git a/src/styles/GlobalStyles.tsx b/src/styles/GlobalStyles.tsx
@@ -76,3 +76,23 @@ const GlobalStyles = () => (
 );
 
 export default GlobalStyles;
+
+export const loadingCSS = css`
+  @keyframes loading {
+    0% {
+    background-position: 100% 0;
+    }
+    100% {
+      background-position: -100% 0;
+    }
+  }
+
+  animation: loading 4s infinite;
+  background: linear-gradient(
+    to right,
+    rgba(230, 233, 238, 0.9), 
+    rgba(215, 218, 224, 0.95) 50%, 
+    rgba(230, 233, 238, 0.9) 100%
+  ); 
+  background-size: 200% 100%;
+`;