add components, edit Update API

@@ -13,17 +13,14 @@ import Footer from "./views/footer/Footer";
 const App = (pathname : string) : string => {
     history.pushState('','', pathname);
 
-    let contents : string = `
+    return `
         <div>
             ${Header()}
-            hello ${pathname}
-            ${Body()}
+            ${Body(pathname)}
             ${Footer()}
             <a href="/wonseog" id="nav-button" data-link>wonseok!!</a>
         </div>
     `;
-
-    return contents;
 }
 
 export default App;
\ No newline at end of file

@@ -6,7 +6,7 @@
 
 const titleTemplate = (type : string, title : string) => `
     <div class="${type}-title">
-        ${type} ${title}
+        ${title}
     </div>
 `
 

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

@@ -10,15 +10,32 @@ window.addEventListener('DOMContentLoaded', () => {
     const $App = document.querySelector('#App');
     const pathname = window.location.pathname.split('/')[1];
 
-    document.body.addEventListener('click', (e) => {
-        const target = e.target as HTMLAnchorElement;
-        const href = target.href.split(BASE_URL)[1];
-
-        if(target.matches("[data-link]")){
+    document.body.addEventListener('click', async (e) => {
+        e.stopPropagation();
+        if((e.target as HTMLAnchorElement).matches("[data-link]")){
+            const href = (e.target as HTMLAnchorElement).href.split(BASE_URL)[1];
             e.preventDefault();
             $App && ($App.innerHTML = App(href));
+        } 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'))
+                }
+            }
         }
     });
 
+    window.addEventListener('popstate', ()=>{
+        $App && ($App.innerHTML = App(pathname))
+    });
+
     $App && ($App.innerHTML = App(pathname));
 })
\ No newline at end of file

+/**
+ * @author wonseog
+ * @date 2021-03-09
+ * @description state 관리
+ *              주로 instaId, followers, following 관리
+ **/
+
+export interface StateType{
+    insta_id? : string,
+    followers? : Array<string>,
+    following? : Array<string>
+}
+
+export const state: StateType ={
+    insta_id : '',
+    followers : [''],
+    following : [''],
+};
+
+export const setState = (newState: StateType): StateType =>({
+    ...state,
+    ...newState
+});
\ No newline at end of file

@@ -3,11 +3,24 @@
  * @date : 2021/03/08
  * @description : 페이지 내용
 **/
+import Home from "./contents/Home";
 
-const Body = () : string => {
+const Body = (pathname: string) : string => {
+    let contentsContainer = '';
+
+    switch (pathname){
+        case 'compare':
+            break;
+        case 'main':
+            break;
+        default:
+            contentsContainer = Home();
+    }
 
     return `
-        <div class="Body">Its my Body</div>
+        <div class="Body">
+            ${contentsContainer}
+        </div>
     `;
 }
 

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

@@ -3,13 +3,13 @@
  * @date : 2021/03/08
  * @description : 페이지 헤더
 **/
-import Title from "../../components/title";
 
-const Header = () : string => {
+import Title from "../../components/title";
 
-    return `
-        <div class="header">${Title('im title').Large}</div>
-    `;
-}
+const Header = () : string => `
+    <div class="header">
+        ${Title('im title').Large}
+    </div>
+`;
 
 export default Header;
\ No newline at end of file

@@ -49,10 +49,10 @@ def get_list(insta_id, driver):
 def crawler_instagram(insta_id):
     driver = webdriver.Chrome(executable_path=LOCAL_PROJECT_PATH + '/crawler/chromedriver')
     driver.get(url=INSTAGRAM_URL)
-    time.sleep(4)
+    time.sleep(2)
 
     login(driver)
-    time.sleep(5)
+    time.sleep(2)
 
     url="%s/%s"%(INSTAGRAM_URL, insta_id)
     driver.get(url=url)

@@ -29,11 +29,9 @@ def page_not_found():
 def home(path):
     if path == 'update':
         insta_id = request.args.get('insta_id')
-        update(insta_id)
-    # elif path == '':
-    else:
-        print()
-        return send_from_directory(my_path, filename='index.html')
+        return update(insta_id)
+
+    return send_from_directory(my_path, filename='index.html')
 
 
 if __name__ == "__main__":