From 1c6aa023a2d03f0d9d436b783c493a62b21fa009 Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Thu, 28 Nov 2024 10:47:47 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?=
 =?UTF-8?q?=EC=8A=A4=ED=94=BC=EB=84=88=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/spinner/GlobalSpinner.jsx          |  10 +-
 src/styles/spinner.scss                       | 109 ++++++++++++++++++
 2 files changed, 117 insertions(+), 2 deletions(-)
 create mode 100644 src/styles/spinner.scss

diff --git a/src/components/common/spinner/GlobalSpinner.jsx b/src/components/common/spinner/GlobalSpinner.jsx
index c643cc30..1da91ef9 100644
--- a/src/components/common/spinner/GlobalSpinner.jsx
+++ b/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>
+    </>
+  )
 }
diff --git a/src/styles/spinner.scss b/src/styles/spinner.scss
new file mode 100644
index 00000000..18993c78
--- /dev/null
+++ b/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;
+    }
+  }
+}