add scss loader & SPA animation

@@ -26,6 +26,8 @@
     "file-loader": "^6.2.0",
     "file-loader": "^6.2.0",
     "gts": "^3.1.0",
     "gts": "^3.1.0",
     "html-webpack-plugin": "^5.3.0",
     "html-webpack-plugin": "^5.3.0",
+    "node-sass": "^5.0.0",
+    "sass-loader": "^11.0.1",
     "style-loader": "^2.0.0",
     "style-loader": "^2.0.0",
     "ts-loader": "^8.0.17",
     "ts-loader": "^8.0.17",
     "typescript": "^4.0.3",
     "typescript": "^4.0.3",

@@ -9,6 +9,8 @@
 import Header from "./views/header/Header";
 import Header from "./views/header/Header";
 import Body from "./views/body/Body";
 import Body from "./views/body/Body";
 import Footer from "./views/footer/Footer";
 import Footer from "./views/footer/Footer";
+import './assets/style/App.scss';
+import './assets/style/PageTransition.scss';
 
 
 const App = (pathname : string) : string => {
 const App = (pathname : string) : string => {
     history.pushState('','', pathname);
     history.pushState('','', pathname);

 body{
 body{
-    background-color: beige;
+    margin: 0;
+    padding: 0;
 }
 }
\ No newline at end of file

+@keyframes page-initial-bottom {
+    0%{
+        opacity: 1;
+        background-color: white;
+    }
+    100%{
+        opacity: 0;
+        background-color: white;
+    }
+}
+
+@keyframes page-blink-bottom {
+    0%{
+        opacity: 0;
+        top: 50%;
+        left: 50%
+    }
+    40%{
+        opacity: 1;
+        left: 50%;
+    }
+    50%{
+        left: 50%;
+    }
+    100%{
+        opacity: 1;
+        left: -70%;
+    }
+}
+
+@keyframes page-top-left {
+    0%{
+        left: 50%;
+        top: 170%;
+    }
+    50%{
+        top: 50%;
+        left: 50%;
+    }
+    100%{
+        top: 50%;
+        left: -70%;
+    }
+}
+
+.page-transition {
+    width : 120%;
+    height: 120%;
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    background-color: #353535;
+    z-index: 1;
+    display: none;
+
+    &.transition-0 {
+        animation: ease-in-out 1.2s page-initial-bottom;
+    }
+
+    &.transition-1 {
+        animation: ease-in-out 2.4s page-blink-bottom;
+    }
+
+    &.transition-2 {
+        animation: ease-in-out 2.4s page-top-left;
+    }
+}
\ No newline at end of file

+/**
+ * @author : wonseog
+ * @date : 2021/03/09
+ * @description : 페이지 이동 효과 주는 함수
+**/
+
+let $div : HTMLDivElement | null;
+
+const pageTransitionClassList = [
+    "transition-0",
+    "transition-1",
+    "transition-2"
+]
+
+const getDivs = () : HTMLDivElement | null => document.querySelector('.page-transition');
+
+const turnOnAndOff = (idx : number)=>{
+    $div && (()=>{
+        $div.classList.toggle(pageTransitionClassList[idx]);
+        $div.style.display = 'block';
+
+        setTimeout(()=>{
+            $div && (()=>{
+                $div.style.display = 'none';
+                $div.classList.toggle(pageTransitionClassList[idx]);
+            })()
+        },idx === 0 ? 1000 : 2400);
+    })()
+}
+
+export const initialTrantition = () => {
+    $div = $div || getDivs();
+    $div && turnOnAndOff(0);
+}
+
+export const randomTransition = () => {
+    $div = $div || getDivs();
+    const randomIndex = Math.floor(Math.random()*(pageTransitionClassList.length - 1) + 1);
+
+    $div && turnOnAndOff(randomIndex);
+}
\ No newline at end of file

-export const BASE_URL = 'http://localhost:5000/';
+export const BASE_URL = 'http://localhost:8080/';

@@ -3,20 +3,46 @@
  * @date : 2021/03/08
  * @date : 2021/03/08
  * @description : 현재 pathname을 파악 후 App으로 전달
  * @description : 현재 pathname을 파악 후 App으로 전달
 **/
 **/
+
 import App from './App';
 import App from './App';
 import {BASE_URL} from './config/url';
 import {BASE_URL} from './config/url';
+import {initialTrantition, randomTransition} from "./components/pageTransition";
 
 
 window.addEventListener('DOMContentLoaded', () => {
 window.addEventListener('DOMContentLoaded', () => {
+    /* add div for page transitions */
+    (()=> {
+        const $div = document.createElement('div');
+        $div.className = "page-transition";
+        document.body.appendChild($div);
+
+        initialTrantition();
+    })();
+
     const $App = document.querySelector('#App');
     const $App = document.querySelector('#App');
     const pathname = window.location.pathname.split('/')[1];
     const pathname = window.location.pathname.split('/')[1];
 
 
+    /* change url */
+    window.addEventListener('popstate', ()=>{
+        $App && ($App.innerHTML = App(pathname))
+    });
+
+    /* initial render */
+    $App && ($App.innerHTML = App(pathname));
+
     document.body.addEventListener('click', async (e) => {
     document.body.addEventListener('click', async (e) => {
         e.stopPropagation();
         e.stopPropagation();
+
+        /* add navigation click event */
         if((e.target as HTMLAnchorElement).matches("[data-link]")){
         if((e.target as HTMLAnchorElement).matches("[data-link]")){
-            const href = (e.target as HTMLAnchorElement).href.split(BASE_URL)[1];
+            const href : string= (e.target as HTMLAnchorElement).href.split(BASE_URL)[1];
             e.preventDefault();
             e.preventDefault();
-            $App && ($App.innerHTML = App(href));
-        } else if((e.target as HTMLAnchorElement).id === 'update-button') {
+            setTimeout(()=>{
+                $App && ($App.innerHTML = App(href));
+            },1200);
+            randomTransition();
+        }
+        /* add POST event for button */
+        else if((e.target as HTMLAnchorElement).id === 'update-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;
 
 
@@ -32,10 +58,4 @@ window.addEventListener('DOMContentLoaded', () => {
             }
             }
         }
         }
     });
     });
-
-    window.addEventListener('popstate', ()=>{
-        $App && ($App.innerHTML = App(pathname))
-    });
-
-    $App && ($App.innerHTML = App(pathname));
 })
 })
\ No newline at end of file

@@ -15,8 +15,8 @@ module.exports = {
                 exclude: /node_modules/,
                 exclude: /node_modules/,
             },
             },
             {
             {
-                test : /\.css$/,
-                use: ['style-loader', 'css-loader'],
+                test : /\.scss$/,
+                use: ['style-loader', 'css-loader', 'sass-loader'],
             },
             },
             {
             {
                 test: /\.(png|jpe?g|gif|jp2|webp)$/,
                 test: /\.(png|jpe?g|gif|jp2|webp)$/,

@@ -2,9 +2,6 @@ import os
 from flask import Flask, render_template, request, jsonify, send_from_directory
 from flask import Flask, render_template, request, jsonify, send_from_directory
 from crawler.crawler_instagram import crawler_instagram
 from crawler.crawler_instagram import crawler_instagram
 
 
-# my_path = '/Users/choewonseog/Documents/check-your-instagram/app/public'
-# my_path = 'C:/Users/goesnow/Documents/study/check-your-instagram/app/public'
-
 root_dir = os.path.dirname(os.getcwd())
 root_dir = os.path.dirname(os.getcwd())
 my_path = os.path.join(root_dir, 'check-your-instagram', 'app', 'public')
 my_path = os.path.join(root_dir, 'check-your-instagram', 'app', 'public')
 app = Flask(__name__, static_folder=os.path.abspath(my_path))
 app = Flask(__name__, static_folder=os.path.abspath(my_path))
@@ -39,4 +36,4 @@ if __name__ == "__main__":
     print("  server is start")
     print("  server is start")
     print("-" * 60)
     print("-" * 60)
 
 
-    app.run(debug=True)
+    app.run(host="localhost", port=8080, debug=True)