add Absolute Path, classify components

@@ -10,7 +10,6 @@ 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 './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);
@@ -19,8 +18,8 @@ const App = (pathname : string) : string => {
         <div class="container">
         <div class="container">
             ${Header()}
             ${Header()}
             ${Body(pathname)}
             ${Body(pathname)}
-            ${Footer()}
         </div>
         </div>
+        ${Footer()}
     `;
     `;
 }
 }
 
 

@@ -8,12 +8,7 @@ body {
     justify-content: center;
     justify-content: center;
     align-items: center;
     align-items: center;
     flex-direction: column;
     flex-direction: column;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
     min-width: 250px;
     min-width: 250px;
-    min-height: 500px;
-    width: 100%;
-    height: 100%;
+    width: 100vw;
+    height: 100vh;
 }
 }
\ No newline at end of file

 .footer {
 .footer {
-  height: 50px;
+  height: 120px;
   background-color: #afafaf;
   background-color: #afafaf;
   display: flex;
   display: flex;
   justify-content: center;
   justify-content: center;

+/**
+ * @author : wonseog
+ * @date : 2021/03/10
+ * @description : 버튼 이벤트, Route 이벤트 등록 모음
+**/
+
+import {BASE_URL} from "@src/config/url";
+import {randomTransition} from "@src/components/pageTransition";
+import {setState} from "@src/store/state";
+
+export const addEvent = async (
+    e : Event,
+    $App : Element | null,
+    App : (pathname : string) => string
+) => {
+    e.stopPropagation();
+
+    /* add navigation click event */
+    if((e.target as HTMLAnchorElement).matches("[data-link]")){
+        const href : string= (e.target as HTMLAnchorElement).href.split(BASE_URL)[1];
+        e.preventDefault();
+        setTimeout(()=>{
+            $App && ($App.innerHTML = App(href));
+        },1200);
+        randomTransition();
+    }
+    /* add GET event for button */
+    else if((e.target as HTMLButtonElement).id === 'search-button') {
+        let result: any= null;
+        const insta_id = (document.querySelector('#id-input') as HTMLInputElement).value;
+
+        if(insta_id){
+            try{
+                result = await (await fetch(BASE_URL + 'update?insta_id=' + insta_id)).json();
+            } catch (e){
+                console.log(e);
+            } finally {
+                console.log(result);
+                result && $App && (()=>{
+                    $App.innerHTML = App('main');
+                    setState({
+                        insta_id : insta_id,
+                        followers : result.followers,
+                        following : result.following
+                    });
+                })();
+            }
+        } else {
+            alert('아이디를 입력하세요');
+        }
+    }
+    /* add POST event for button */
+    else if((e.target as HTMLButtonElement).id === 'update-button') {
+        let result: any= null;
+        const insta_id = (document.querySelector('#id-input') as HTMLInputElement).value;
+
+        if(insta_id){
+            try{
+                result = await (await fetch(BASE_URL + 'update?insta_id=' + insta_id)).json();
+            } catch (e){
+                console.log(e);
+            } finally {
+                console.log(result);
+                result && $App && (()=>{
+                    $App.innerHTML = App('main');
+                    setState({insta_id : insta_id});
+                })();
+            }
+        } else {
+            alert('아이디를 입력하세요');
+        }
+    }
+}
\ No newline at end of file

@@ -7,7 +7,9 @@
 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";
 import {initialTrantition, randomTransition} from "./components/pageTransition";
-import {setState} from "./state/state";
+import {setState} from "./store/state";
+import './assets/style/PageTransition.scss';
+import {addEvent} from "@src/components/addEvent";
 
 
 window.addEventListener('DOMContentLoaded', () => {
 window.addEventListener('DOMContentLoaded', () => {
     /* add div for page transitions */
     /* add div for page transitions */
@@ -31,37 +33,6 @@ window.addEventListener('DOMContentLoaded', () => {
     $App && ($App.innerHTML = App(pathname));
     $App && ($App.innerHTML = App(pathname));
 
 
     document.body.addEventListener('click', async (e) => {
     document.body.addEventListener('click', async (e) => {
-        e.stopPropagation();
-
-        /* add navigation click event */
-        if((e.target as HTMLAnchorElement).matches("[data-link]")){
-            const href : string= (e.target as HTMLAnchorElement).href.split(BASE_URL)[1];
-            e.preventDefault();
-            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;
-            const insta_id = (document.querySelector('#id-input') as HTMLInputElement).value;
-
-            if(insta_id){
-                try{
-                    result = await (await fetch(BASE_URL + 'update?insta_id=' + insta_id)).json();
-                } catch (e){
-                    console.log(e);
-                } finally {
-                    console.log(result);
-                    result && $App && (()=>{
-                        $App.innerHTML = App('main');
-                        setState({insta_id : insta_id});
-                    })();
-                }
-            } else {
-                alert('아이디를 입력하세요');
-            }
-        }
+        await addEvent(e, $App, App);
     });
     });
 })
 })
\ No newline at end of file

 /**
 /**
  * @author wonseog
  * @author wonseog
  * @date 2021-03-09
  * @date 2021-03-09
- * @description state 관리
+ * @description store 관리
  *              주로 instaId, followers, following 관리
  *              주로 instaId, followers, following 관리
  **/
  **/
 
 
@@ -11,12 +11,14 @@ export interface StateType{
     following? : Array<string>
     following? : Array<string>
 }
 }
 
 
-const  state: StateType ={
+const initialState = {
     insta_id : '',
     insta_id : '',
     followers : [''],
     followers : [''],
     following : [''],
     following : [''],
 };
 };
 
 
+const state: StateType = initialState;
+
 export const setState = (newState: StateType): StateType =>({
 export const setState = (newState: StateType): StateType =>({
     ...state,
     ...state,
     ...newState
     ...newState

@@ -3,8 +3,11 @@
  * @date : 2021/03/08
  * @date : 2021/03/08
  * @description : 페이지 내용
  * @description : 페이지 내용
 **/
 **/
-import Home from "./contents/Home";
-import '../../assets/style/Body.scss';
+
+import Intro from "./contents/intro";
+import Main from "./contents/main";
+import Compare from "./contents/compare";
+import '@src/assets/style/Body.scss';
 
 
 const Body = (pathname: string) : string => {
 const Body = (pathname: string) : string => {
     let contentsContainer = '';
     let contentsContainer = '';
@@ -12,12 +15,14 @@ const Body = (pathname: string) : string => {
     switch (pathname){
     switch (pathname){
         case 'compare':
         case 'compare':
             /* 팔로워, 팔로잉 비교*/
             /* 팔로워, 팔로잉 비교*/
+            contentsContainer = Compare();
             break;
             break;
         case 'main':
         case 'main':
             /* 아이디 조회 후 */
             /* 아이디 조회 후 */
+            contentsContainer = Main();
             break;
             break;
         default:
         default:
-            contentsContainer = Home();
+            contentsContainer = Intro();
     }
     }
 
 
     return `
     return `

+/**
+ * @author : wonseog
+ * @date : 2021/03/10
+ * @description : followers vs followings
+**/
+
+const Compare = () => {
+    return `
+        <div class="compare">
+            its compare
+        </div>
+    `
+}
+
+export default Compare
\ No newline at end of file

+export {default} from './Compare'
\ No newline at end of file

@@ -4,24 +4,17 @@
  * @description id 입력하는 메인 화면
  * @description id 입력하는 메인 화면
  *              조회 / 업데이트
  *              조회 / 업데이트
  **/
  **/
-import state from "../../../state";
-import Title from "../../../components/title";
 
 
-const Home = (): string =>{
-    const onSubmit = (e : Event) => {
-        e.preventDefault();
-        alert('hi');
-    }
+import Title from "@src/components/title";
 
 
-    const literalTag = `<div class="home">
+const Intro = (): string =>{
+    return `<div class="home">
         <lable>   
         <lable>   
             ${Title('인스타 조회하기').Large}
             ${Title('인스타 조회하기').Large}
             <input id="id-input" type="text" name="insta_id" />
             <input id="id-input" type="text" name="insta_id" />
-            <button id="update-button">조회</button>
+            <button id="search-button">조회</button>
         </lable>
         </lable>
     </div>`
     </div>`
-
-    return literalTag;
 }
 }
 
 
-export default Home;
\ No newline at end of file
+export default Intro;
\ No newline at end of file

+export {default} from './Intro'
\ No newline at end of file

+/**
+ * @author : wonseog
+ * @date : 2021/03/10
+ * @description : 로그인 이후 첫 화면
+ *                업데이트하기
+ *                다른 메뉴 보기
+**/
+
+const Main = () => {
+    return `
+        <div class="main">
+            its main
+        </div>
+    `
+}
+
+export default Main
\ No newline at end of file

+export {default} from './Main'
\ No newline at end of file

@@ -4,7 +4,7 @@
  * @description : 페이지 푸터
  * @description : 페이지 푸터
 **/
 **/
 
 
-import '../../assets/style/Footer.scss'
+import '@src/assets/style/Footer.scss'
 
 
 const Footer = () : string => {
 const Footer = () : string => {
 
 

@@ -4,8 +4,8 @@
  * @description : 페이지 헤더
  * @description : 페이지 헤더
 **/
 **/
 
 
-import Title from "../../components/title";
-import '../../assets/style/Header.scss'
+import Title from "@src/components/title";
+import '@src/assets/style/Header.scss'
 
 
 const Header = () : string => `
 const Header = () : string => `
     <div class="header">
     <div class="header">

@@ -8,9 +8,16 @@
     "module": "commonjs",
     "module": "commonjs",
     "strict": true,
     "strict": true,
     "removeComments": true,
     "removeComments": true,
-    "esModuleInterop": true
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "paths": {
+      "@src/*": [
+        "src/*"
+      ]
+    }
   },
   },
   "include": [
   "include": [
     "src/**/*.ts"
     "src/**/*.ts"
   ],
   ],
+  "exclude": ["node_modules"]
 }
 }

@@ -30,6 +30,9 @@ module.exports = {
     },
     },
     resolve : {
     resolve : {
         extensions: [".tsx", ".ts", ".js"],
         extensions: [".tsx", ".ts", ".js"],
+        alias: {
+          '@src': path.resolve(__dirname, 'src'),
+        },
     },
     },
     output : {
     output : {
         publicPath: '/public/',
         publicPath: '/public/',

@@ -31,7 +31,20 @@ def update_data(user_insta_id, data):
 def get_data_by_id(user_insta_id):
 def get_data_by_id(user_insta_id):
     insta_id = id_encrypt(user_insta_id)
     insta_id = id_encrypt(user_insta_id)
 
 
-    data = db.child("insta").child(insta_id).get()
-
-    return data.val()
+    data = {};
+    try:
+        data = db.child("insta").child(insta_id).get()
+    except Exception as e:
+        print(e)
+        return {
+            'result' : 'no'
+        }
+    finally:
+        if data:
+            return data.val()
+        else:
+            return {
+                'followers': [],
+                'following': []
+            }