add Page loader

@@ -9,8 +9,8 @@
 import Header from "./views/header";
 import Header from "./views/header";
 import Body from "./views/body";
 import Body from "./views/body";
 import Footer from "./views/footer";
 import Footer from "./views/footer";
-import './assets/style/App.scss';
 import {getState} from "@src/store/state";
 import {getState} from "@src/store/state";
+import './assets/style/App.scss';
 
 
 const App = (pathname : string) : string => {
 const App = (pathname : string) : string => {
     /* id 없을 시 id 입력으로 redirect */
     /* id 없을 시 id 입력으로 redirect */

+.page-loader {
+  position: fixed;
+  left: 46%;
+  top: 47%;
+  display: none;
+  width: 80px;
+  height: 80px;
+  z-index: -1;
+}
+.page-loader:after {
+  content: " ";
+  display: block;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border-radius: 50%;
+  border: 12px solid #aaa;
+  border-color: #a29bfe transparent #a29bfe transparent;
+  transform: translate(-50%, -50%);
+  animation: spin 1.2s both infinite;
+}
+
+/* Safari */
+@-webkit-keyframes spin {
+  0% { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
\ No newline at end of file

@@ -51,7 +51,7 @@
     top: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
     transform: translate(-50%,-50%);
     background-color: #353535;
     background-color: #353535;
-    z-index: 1;
+    z-index: 2;
     display: none;
     display: none;
 
 
     &.transition-0 {
     &.transition-0 {

@@ -5,8 +5,9 @@
 **/
 **/
 
 
 import {BASE_URL} from "@src/config/url";
 import {BASE_URL} from "@src/config/url";
-import {randomTransition} from "@src/components/page.transition";
 import {setState} from "@src/store/state";
 import {setState} from "@src/store/state";
+import {togglePageLoader} from "@src/components/page.loader";
+import {randomTransition} from "@src/components/page.transition";
 
 
 export const addEvent = async (
 export const addEvent = async (
     e : Event,
     e : Event,
@@ -28,6 +29,7 @@ export const addEvent = async (
     else if((e.target as HTMLButtonElement).id === 'search-button') {
     else if((e.target as HTMLButtonElement).id === 'search-button') {
         let result: any= null;
         let result: any= null;
         const insta_id = (document.querySelector('#id-input') as HTMLInputElement).value;
         const insta_id = (document.querySelector('#id-input') as HTMLInputElement).value;
+        togglePageLoader(true);
 
 
         if(insta_id){
         if(insta_id){
             try{
             try{
@@ -36,16 +38,23 @@ export const addEvent = async (
                 console.log(e);
                 console.log(e);
             } finally {
             } finally {
                 console.log('res!',result);
                 console.log('res!',result);
-                result && $App && (()=>{
-                    randomTransition();
-                    setState(result);
-                    setTimeout(()=>{
-                        $App.innerHTML = App('main');
-                    },1200)
-                })();
+                if(result){
+                    $App && (()=>{
+                        randomTransition();
+                        setState(result);
+                        setTimeout(()=>{
+                            $App.innerHTML = App('main');
+                            togglePageLoader(false);
+                        },1200)
+                    })();
+                } else {
+                    togglePageLoader(false);
+                    alert('fail to search');
+                }
             }
             }
         } else {
         } else {
             alert('아이디를 입력하세요');
             alert('아이디를 입력하세요');
+            togglePageLoader(false);
         }
         }
     }
     }
     /* add POST event for button */
     /* add POST event for button */

+export const togglePageLoader = (type : boolean) : void => {
+    const $loader : HTMLDivElement | null = document.querySelector('.page-loader');
+    if($loader) {
+        if(type) {
+            $loader.style.display = 'block';
+            $loader.style.zIndex = '1';
+        } else {
+            $loader.style.display = 'none';
+            $loader.style.zIndex = '-1';
+        }
+    }
+}
\ No newline at end of file

@@ -6,8 +6,9 @@
 
 
 import App from './App';
 import App from './App';
 import {initialTrantition} from "./components/page.transition";
 import {initialTrantition} from "./components/page.transition";
-import './assets/style/PageTransition.scss';
 import {addEvent} from "@src/components/add.event";
 import {addEvent} from "@src/components/add.event";
+import './assets/style/PageTransition.scss';
+import './assets/style/PageLoader.scss';
 
 
 window.addEventListener('DOMContentLoaded', () => {
 window.addEventListener('DOMContentLoaded', () => {
     /* add div for page transitions */
     /* add div for page transitions */
@@ -19,6 +20,12 @@ window.addEventListener('DOMContentLoaded', () => {
         initialTrantition();
         initialTrantition();
     })();
     })();
 
 
+    (()=> {
+        const $div = document.createElement('div');
+        $div.className = "page-loader";
+        document.body.appendChild($div);
+    })();
+
     const $App = document.querySelector('#App');
     const $App = document.querySelector('#App');
     const pathname = window.location.pathname.split('/')[1];
     const pathname = window.location.pathname.split('/')[1];