chore: 커스텀 스피너 추가

src/components/common/spinner/GlobalSpinner.jsx

@@ -1,7 +1,13 @@
 'use client'
 
-import { HashLoader } from 'react-spinners'
+import '@/styles/spinner.scss'
 
 export default function GlobalSpinner() {
-  return <HashLoader />
+  return (
+    <>
+      <div className="spinner-wrap">
+        <span className="loader"></span>
+      </div>
+    </>
+  )
 }

src/styles/spinner.scss

@@ -0,0 +1,109 @@
+.spinner-wrap {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  .loader {
+    font-size: 10px;
+    width: 1.2em;
+    height: 1.2em;
+    border-radius: 50%;
+    position: relative;
+    text-indent: -9999em;
+    animation: mulShdSpin 1.1s infinite ease;
+    transform: translateZ(0);
+  }
+  @keyframes mulShdSpin {
+    0%,
+    100% {
+      box-shadow:
+        0em -2.6em 0em 0em #101010,
+        1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2),
+        2.5em 0em 0 0em rgba(16, 16, 16, 0.2),
+        1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2),
+        0em 2.5em 0 0em rgba(16, 16, 16, 0.2),
+        -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2),
+        -2.6em 0em 0 0em rgba(16, 16, 16, 0.5),
+        -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.7);
+    }
+    12.5% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(16, 16, 16, 0.7),
+        1.8em -1.8em 0 0em #101010,
+        2.5em 0em 0 0em rgba(16, 16, 16, 0.2),
+        1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2),
+        0em 2.5em 0 0em rgba(16, 16, 16, 0.2),
+        -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2),
+        -2.6em 0em 0 0em rgba(16, 16, 16, 0.2),
+        -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.5);
+    }
+    25% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(16, 16, 16, 0.5),
+        1.8em -1.8em 0 0em rgba(16, 16, 16, 0.7),
+        2.5em 0em 0 0em #101010,
+        1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2),
+        0em 2.5em 0 0em rgba(16, 16, 16, 0.2),
+        -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2),
+        -2.6em 0em 0 0em rgba(16, 16, 16, 0.2),
+        -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
+    }
+    37.5% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(16, 16, 16, 0.2),
+        1.8em -1.8em 0 0em rgba(16, 16, 16, 0.5),
+        2.5em 0em 0 0em rgba(16, 16, 16, 0.7),
+        1.75em 1.75em 0 0em #101010,
+        0em 2.5em 0 0em rgba(16, 16, 16, 0.2),
+        -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2),
+        -2.6em 0em 0 0em rgba(16, 16, 16, 0.2),
+        -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
+    }
+    50% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(16, 16, 16, 0.2),
+        1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2),
+        2.5em 0em 0 0em rgba(16, 16, 16, 0.5),
+        1.75em 1.75em 0 0em rgba(16, 16, 16, 0.7),
+        0em 2.5em 0 0em #101010,
+        -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.2),
+        -2.6em 0em 0 0em rgba(16, 16, 16, 0.2),
+        -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
+    }
+    62.5% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(16, 16, 16, 0.2),
+        1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2),
+        2.5em 0em 0 0em rgba(16, 16, 16, 0.2),
+        1.75em 1.75em 0 0em rgba(16, 16, 16, 0.5),
+        0em 2.5em 0 0em rgba(16, 16, 16, 0.7),
+        -1.8em 1.8em 0 0em #101010,
+        -2.6em 0em 0 0em rgba(16, 16, 16, 0.2),
+        -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
+    }
+    75% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(16, 16, 16, 0.2),
+        1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2),
+        2.5em 0em 0 0em rgba(16, 16, 16, 0.2),
+        1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2),
+        0em 2.5em 0 0em rgba(16, 16, 16, 0.5),
+        -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.7),
+        -2.6em 0em 0 0em #101010,
+        -1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2);
+    }
+    87.5% {
+      box-shadow:
+        0em -2.6em 0em 0em rgba(16, 16, 16, 0.2),
+        1.8em -1.8em 0 0em rgba(16, 16, 16, 0.2),
+        2.5em 0em 0 0em rgba(16, 16, 16, 0.2),
+        1.75em 1.75em 0 0em rgba(16, 16, 16, 0.2),
+        0em 2.5em 0 0em rgba(16, 16, 16, 0.2),
+        -1.8em 1.8em 0 0em rgba(16, 16, 16, 0.5),
+        -2.6em 0em 0 0em rgba(16, 16, 16, 0.7),
+        -1.8em -1.8em 0 0em #101010;
+    }
+  }
+}