refactor: seperate components by function

@@ -3,8 +3,8 @@
 .vscode/**
 .vscode/**
 **/.idea/
 **/.idea/
 
 
+crawler/chromedriver_88
 crawler/chromedriver
 crawler/chromedriver
-crawler/chromedriver.exe
 **/*.exe
 **/*.exe
 package-lock.json
 package-lock.json
 __pycache__/
 __pycache__/

@@ -4,27 +4,10 @@
  * @description : 버튼 이벤트, Route 이벤트 등록 모음
  * @description : 버튼 이벤트, Route 이벤트 등록 모음
  **/
  **/
 
 
-import { linkEvent, searchEvent, updateEvent } from "./event.list";
-
-export const addEvent = async (
-  e: Event,
-  $App: Element,
-  App: (pathname: string) => string
-) => {
-  e.stopPropagation();
-
-  /* add navigation click event */
-  if ((e.target as HTMLAnchorElement).matches("[data-link]")) {
-    linkEvent(e);
-  }
-
-  if ((e.target as HTMLButtonElement).id === "search-button") {
-    /* add GET event for button */
-    searchEvent();
-  }
-
-  if ((e.target as HTMLButtonElement).id === "update-button") {
-    /* add POST event for button */
-    updateEvent();
-  }
-};
+export default function addEventWithElementByType(
+  element: HTMLElement,
+  eventType: string,
+  handler: (e: Event) => void
+) {
+  element.addEventListener(eventType, handler);
+}

@@ -21,8 +21,8 @@ export function linkEvent(e: Event) {
   randomTransition();
   randomTransition();
 }
 }
 
 
-export async function searchEvent() {
-  const insta_id = (getElement("#id-input") as HTMLInputElement).value;
+export async function handleFetchById(url: string, cssSelector: string) {
+  const insta_id = (getElement(cssSelector) as HTMLInputElement).value;
 
 
   pendingFetch();
   pendingFetch();
 
 
@@ -31,18 +31,5 @@ export async function searchEvent() {
     return;
     return;
   }
   }
 
 
-  await fetchByURL("search?insta_id=" + insta_id);
-}
-
-export async function updateEvent() {
-  const insta_id = (getElement("#id-input") as HTMLInputElement).value;
-
-  pendingFetch();
-
-  if (!insta_id) {
-    warningEmptyId();
-    return;
-  }
-
-  await fetchByURL("update?insta_id=" + insta_id);
+  await fetchByURL(url + insta_id);
 }
 }

-export const formatNumber = (number : number) : string => {
-    if(`${number}`.length > 6) {
-        return `${Math.floor(number / 1000000)}m`
-    }
-    else if(`${number}`.length > 3) {
-        return `${Math.floor(number / 1000)}k`
-    } else {
-        return `${number}`;
-    }
-}
\ No newline at end of file

@@ -4,6 +4,16 @@ import { togglePageLoader } from "@src/components/page.loader";
 import { randomTransition } from "@src/components/page.transition";
 import { randomTransition } from "@src/components/page.transition";
 import { renderApp } from "@src/App";
 import { renderApp } from "@src/App";
 
 
+export function formatNumber(number: number): string {
+  if (`${number}`.length > 6) {
+    return `${Math.floor(number / 1000000)}m`;
+  } else if (`${number}`.length > 3) {
+    return `${Math.floor(number / 1000)}k`;
+  } else {
+    return `${number}`;
+  }
+}
+
 export function getElement(cssSelector: string) {
 export function getElement(cssSelector: string) {
   return document.querySelector(cssSelector);
   return document.querySelector(cssSelector);
 }
 }

+export { default as color } from "./theme";

+export default {
+  color: {
+    black: "#333",
+  },
+};

@@ -4,23 +4,28 @@
  * @description : 현재 pathname을 파악 후 App으로 전달
  * @description : 현재 pathname을 파악 후 App으로 전달
  **/
  **/
 
 
-import App, { renderApp } from "./App";
-import animatePage from "./components/page.transition";
-import { addEvent } from "@src/components/add.event";
 import "./assets/style/PageTransition.scss";
 import "./assets/style/PageTransition.scss";
 import "./assets/style/PageLoader.scss";
 import "./assets/style/PageLoader.scss";
-import createLoaderElement from "./components/page.loader";
-import { getElement, getPathname } from "./components/functions";
+
+import animatePage from "@src/components/page.transition";
+import createLoaderElement from "@src/components/page.loader";
+import addEventWithElementByType from "@src/components/add.event";
+import { getPathname } from "@src/components/functions";
+import { linkEvent } from "@src/components/event.list";
+
+import { renderApp } from "./App";
 
 
 window.addEventListener("DOMContentLoaded", () => {
 window.addEventListener("DOMContentLoaded", () => {
   createLoaderElement();
   createLoaderElement();
   animatePage();
   animatePage();
 
 
-  const $App = getElement("#App") as HTMLDivElement;
   const pathname = getPathname();
   const pathname = getPathname();
 
 
-  document.body.addEventListener("click", async (e) => {
-    await addEvent(e, $App, App);
+  addEventWithElementByType(document.body, "click", function (e: Event) {
+    /* add navigation click event */
+    if ((e.target as HTMLAnchorElement).matches("[data-link]")) {
+      linkEvent(e);
+    }
   });
   });
 
 
   /* change url */
   /* change url */

@@ -5,13 +5,22 @@
  *              조회 / 업데이트
  *              조회 / 업데이트
  **/
  **/
 
 
-import Title from "@src/components/title";
-import '@src/assets/style/Intro.scss'
+import Title from "@src/components/Title";
+import "@src/assets/style/Intro.scss";
+import addEventWithElementByType from "@src/components/add.event";
+import { handleFetchById } from "@src/components/event.list";
+
+const Intro = (): string => {
+  addEventWithElementByType(document.body, "click", function (e: Event) {
+    if ((e.target as HTMLButtonElement).id === "search-button") {
+      /* add GET event for button */
+      handleFetchById("search?insta_id=", "#id-input");
+    }
+  });
 
 
-const Intro = (): string =>{
   return `<div class="intro">
   return `<div class="intro">
         <label for="id-input">   
         <label for="id-input">   
-            ${Title('SEARCH INSTAGRAM').Large}
+            ${Title("SEARCH INSTAGRAM").Large}
             <input 
             <input 
                 id="id-input" 
                 id="id-input" 
                 type="text" 
                 type="text" 
@@ -20,7 +29,7 @@ const Intro = (): string =>{
             />
             />
             <button id="search-button">SEARCH</button>
             <button id="search-button">SEARCH</button>
         </label>
         </label>
-    </div>`
-}
+    </div>`;
+};
 
 
 export default Intro;
 export default Intro;

@@ -5,10 +5,11 @@
  *                업데이트하기
  *                업데이트하기
  *                다른 메뉴 보기
  *                다른 메뉴 보기
  **/
  **/
-import { getState } from "@src/store/state";
-import { formatNumber } from "@src/components/format.number";
 import "@src/assets/style/Main.scss";
 import "@src/assets/style/Main.scss";
 
 
+import { getState } from "@src/store/state";
+import { formatNumber } from "@src/components/functions";
+
 const Main = () => {
 const Main = () => {
   const state = getState();
   const state = getState();
   let followers: string = "";
   let followers: string = "";

@@ -2,16 +2,35 @@
  * @author : wonseog
  * @author : wonseog
  * @date : 2021/03/08
  * @date : 2021/03/08
  * @description : 페이지 헤더
  * @description : 페이지 헤더
-**/
+ **/
 
 
-import Title from "@src/components/title";
-import '@src/assets/style/Header.scss'
-import {getState} from "@src/store/state";
+import "@src/assets/style/Header.scss";
 
 
-const Header = () : string => `
+import { renderApp } from "@src/App";
+import addEventWithElementByType from "@src/components/add.event";
+import { handleFetchById } from "@src/components/event.list";
+
+import { getState } from "@src/store/state";
+
+const Header = (): string => {
+  const { insta_id } = getState();
+
+  addEventWithElementByType(document.body, "click", function (e: Event) {
+    if ((e.target as HTMLButtonElement).id === "update-button") {
+      /* add POST event for button */
+      handleFetchById("update?insta_id=", "#id-input");
+      renderApp("main");
+    }
+  });
+
+  return `
     <div class="header">
     <div class="header">
-        ${Title(getState().insta_id || 'INSTAGRAM').Large}
+        <div class="form-container">
+            <input type="text" name="insta_id" id="id-input" placeholder="${insta_id}" value="${insta_id}" />
+            <button id="update-button">UPDATE</button>
+        </div>
     </div>
     </div>
 `;
 `;
+};
 
 
 export default Header;
 export default Header;

@@ -6,6 +6,7 @@ from config.admin import ID, PW, LOCAL_PROJECT_PATH
 from config.URLs import INSTAGRAM_URL
 from config.URLs import INSTAGRAM_URL
 from config.firebase import update_data
 from config.firebase import update_data
 
 
+
 def check_people(driver, type):
 def check_people(driver, type):
     result = []
     result = []
     navigations = driver.find_elements_by_class_name('-nal3')
     navigations = driver.find_elements_by_class_name('-nal3')
@@ -50,10 +51,10 @@ def get_list(insta_id, driver):
 
 
     # update at firebase
     # update at firebase
     data = {
     data = {
-        "followers" : followers_list,
-        "following" : following_list,
-        "insta_id" : insta_id,
-        "src" : src
+        "followers": followers_list,
+        "following": following_list,
+        "insta_id": insta_id,
+        "src": src
     }
     }
     update_data(insta_id, data)
     update_data(insta_id, data)
 
 
@@ -62,7 +63,7 @@ def get_list(insta_id, driver):
 
 
 def crawler_instagram(insta_id):
 def crawler_instagram(insta_id):
     options = Options()
     options = Options()
-    options.add_argument("--headless")
+    # options.add_argument("--headless")
     options.add_argument("window-size=1920,1080")
     options.add_argument("window-size=1920,1080")
     driver = webdriver.Chrome(chrome_options=options, executable_path=LOCAL_PROJECT_PATH + '/crawler/chromedriver')
     driver = webdriver.Chrome(chrome_options=options, executable_path=LOCAL_PROJECT_PATH + '/crawler/chromedriver')
     driver.get(url=INSTAGRAM_URL)
     driver.get(url=INSTAGRAM_URL)
@@ -70,10 +71,10 @@ def crawler_instagram(insta_id):
 
 
     print('hi')
     print('hi')
     login(driver)
     login(driver)
-    print('by')
+    print(insta_id)
     time.sleep(2)
     time.sleep(2)
 
 
-    url="%s/%s"%(INSTAGRAM_URL, insta_id)
+    url = "%s/%s" % (INSTAGRAM_URL, insta_id)
     driver.get(url=url)
     driver.get(url=url)
     time.sleep(2)
     time.sleep(2)