spinner 추가

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import '@/styles/style.scss'
+import Spinner from "@/components/layouts/Spinner";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -28,6 +29,7 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         {children}
+        <Spinner/>
       </body>
     </html>
   );

src/components/layouts/Spinner.tsx

@@ -0,0 +1,7 @@
+export default function Spinner(){
+  return(
+    <div className="spinner-wrap">
+      <span className="loader"></span>
+    </div>
+  )
+}

src/styles/components/_index.scss

@@ -2,4 +2,5 @@
 @forward 'login';
 @forward 'pop-contents';
 @forward 'sub';
-@forward 'pdfview';
+@forward 'pdfview';
+@forward 'spinner';

src/styles/components/_spinner.scss

@@ -0,0 +1,37 @@
+.spinner-wrap{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba($color: #101010, $alpha: 0.5);
+    z-index: 2000000;
+}
+.loader {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #fff;
+  box-shadow: 32px 0 #fff, -32px 0 #fff;
+  position: relative;
+  animation: flash 0.5s ease-out infinite alternate;
+}
+
+@keyframes flash {
+  0% {
+    background-color: #FFF2;
+    box-shadow: 32px 0 #FFF2, -32px 0 #FFF;
+  }
+  50% {
+    background-color: #FFF;
+    box-shadow: 32px 0 #FFF2, -32px 0 #FFF2;
+  }
+  100% {
+    background-color: #FFF2;
+    box-shadow: 32px 0 #FFF, -32px 0 #FFF2;
+  }
+}
+