✨ Feat: 로딩 스피너 (#58)

* 📦️ Chore: 로딩스피너 세팅 * ✨ Feat: 로딩 스피너 적용 * 🔨 Refactor: 스피너 주석 * ✨ Feat: svg 컴포넌트로 수정
sprint6-part2 · May 11, 2024 · 3c72ef1 · 3c72ef1
1 parent 046e106
commit 3c72ef1
Show file tree

Hide file tree

Showing 4 changed files with 177 additions and 0 deletions.
diff --git a/src/assets/icons/Spinner.jsx b/src/assets/icons/Spinner.jsx
@@ -0,0 +1,166 @@
+import * as React from 'react';
+const Spinner = ({ width = 200, height = 200, fill = '#f96d69', ...props }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 100 100"
+    preserveAspectRatio="xMidYMid"
+    width={width}
+    height={height}
+    style={{
+      shapeRendering: 'auto',
+      display: 'block',
+      background: 'transparent',
+    }}
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    {...props}
+  >
+    <g>
+      <g transform="rotate(0 50 50)">
+        <rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
+          <animate
+            repeatCount="indefinite"
+            begin="-0.9166666666666666s"
+            dur="1s"
+            keyTimes="0;1"
+            values="1;0"
+            attributeName="opacity"
+          />
+        </rect>
+      </g>
+      <g transform="rotate(30 50 50)">
+        <rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
+          <animate
+            repeatCount="indefinite"
+            begin="-0.8333333333333334s"
+            dur="1s"
+            keyTimes="0;1"
+            values="1;0"
+            attributeName="opacity"
+          />
+        </rect>
+      </g>
+      <g transform="rotate(60 50 50)">
+        <rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
+          <animate
+            repeatCount="indefinite"
+            begin="-0.75s"
+            dur="1s"
+            keyTimes="0;1"
+            values="1;0"
+            attributeName="opacity"
+          />
+        </rect>
+      </g>
+      <g transform="rotate(90 50 50)">
+        <rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
+          <animate
+            repeatCount="indefinite"
+            begin="-0.6666666666666666s"
+            dur="1s"
+            keyTimes="0;1"
+            values="1;0"
+            attributeName="opacity"
+          />
+        </rect>
+      </g>
+      <g transform="rotate(120 50 50)">
+        <rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
+          <animate
+            repeatCount="indefinite"
+            begin="-0.5833333333333334s"
+            dur="1s"
+            keyTimes="0;1"
+            values="1;0"
+            attributeName="opacity"
+          />
+        </rect>
+      </g>
+      <g transform="rotate(150 50 50)">
+        <rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
+          <animate
+            repeatCount="indefinite"
+            begin="-0.5s"
+            dur="1s"
+            keyTimes="0;1"
+            values="1;0"
+            attributeName="opacity"
+          />
+        </rect>
+      </g>
+      <g transform="rotate(180 50 50)">
+        <rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
+          <animate
+            repeatCount="indefinite"
+            begin="-0.4166666666666667s"
+            dur="1s"
+            keyTimes="0;1"
+            values="1;0"
+            attributeName="opacity"
+          />
+        </rect>
+      </g>
+      <g transform="rotate(210 50 50)">
+        <rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
+          <animate
+            repeatCount="indefinite"
+            begin="-0.3333333333333333s"
+            dur="1s"
+            keyTimes="0;1"
+            values="1;0"
+            attributeName="opacity"
+          />
+        </rect>
+      </g>
+      <g transform="rotate(240 50 50)">
+        <rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
+          <animate
+            repeatCount="indefinite"
+            begin="-0.25s"
+            dur="1s"
+            keyTimes="0;1"
+            values="1;0"
+            attributeName="opacity"
+          />
+        </rect>
+      </g>
+      <g transform="rotate(270 50 50)">
+        <rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
+          <animate
+            repeatCount="indefinite"
+            begin="-0.16666666666666666s"
+            dur="1s"
+            keyTimes="0;1"
+            values="1;0"
+            attributeName="opacity"
+          />
+        </rect>
+      </g>
+      <g transform="rotate(300 50 50)">
+        <rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
+          <animate
+            repeatCount="indefinite"
+            begin="-0.08333333333333333s"
+            dur="1s"
+            keyTimes="0;1"
+            values="1;0"
+            attributeName="opacity"
+          />
+        </rect>
+      </g>
+      <g transform="rotate(330 50 50)">
+        <rect fill={fill} height={12} width={6} ry={6} rx={3} y={24} x={47}>
+          <animate
+            repeatCount="indefinite"
+            begin="0s"
+            dur="1s"
+            keyTimes="0;1"
+            values="1;0"
+            attributeName="opacity"
+          />
+        </rect>
+      </g>
+      <g />
+    </g>
+  </svg>
+);
+export default Spinner;
diff --git a/src/pages/ListPage/MonthlyChart/index.jsx b/src/pages/ListPage/MonthlyChart/index.jsx
@@ -7,6 +7,7 @@ import CustomButton from '@/components/CustomButton';
 import Chart from '@/assets/icons/Chart';
 import { boys, girls } from './mock';
 import useSetNumOfItemsToShow from '@/hooks/useSetNumberOfItemsToShow';
+import Spinner from '@/assets/icons/Spinner';
 
 const MonthlyChart = () => {
   const [idolList, setIdolList] = useState([]);

diff --git a/src/pages/ListPage/MonthlyChart/styles.module.scss b/src/pages/ListPage/MonthlyChart/styles.module.scss
@@ -119,3 +119,11 @@
     background: #ffffff1a;
   }
 }
+
+.loading_spinner{
+  min-height: 418px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+}
diff --git a/src/pages/TestPage/index.jsx b/src/pages/TestPage/index.jsx
@@ -10,13 +10,15 @@ import ModalHeader from '@/components/Modal/components/ModalHeader';
 // import ModalMobileHeader from '@/components/Modal/components/ModalMobileHeader';
 import Profile from '@/components/Profile';
 import LoadingError from '@/components/LoadingError';
+import Spinner from '@/assets/icons/Spinner';
 
 const TestPage = () => {
   const [isOpen, openModal, closeModal] = useModal();
 
   return (
     <div style={{ backgroundColor: 'black' }}>
       <Header />
+      <Spinner />
       <div
         style={{ display: 'flex', justifyContent: 'center', padding: '24px' }}
       ></div>