refactor: grap functions

-build/
-gulpfile.js
-gulp.js
-webpack.config.js

@@ -11,7 +11,7 @@ import Body from "./views/body";
 import Footer from "./views/footer";
 import Footer from "./views/footer";
 import { getState } from "@src/store/state";
 import { getState } from "@src/store/state";
 import "./assets/style/App.scss";
 import "./assets/style/App.scss";
-import { getElement } from "./components/functions";
+import { getElement } from "./shared/functions";
 
 
 function App(pathname: string): string {
 function App(pathname: string): string {
   /* id 없을 시 id 입력으로 redirect */
   /* id 없을 시 id 입력으로 redirect */

-/**
- * @author : wonseog
- * @date : 2021/03/10
- * @description : 버튼 이벤트, Route 이벤트 등록 모음
- **/
-
-export default function addEventWithElementByType(
-  element: HTMLElement,
-  eventType: string,
-  handler: (e: Event) => void
-) {
-  element.addEventListener(eventType, handler);
-}

-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

-export const togglePageLoader = (type: boolean): void => {
-  const $loader = document.querySelector(".page-loader") as HTMLDivElement;
-
-  if (type === true) {
-    $loader.style.display = "block";
-    $loader.style.zIndex = "1";
-  } else {
-    $loader.style.display = "none";
-    $loader.style.zIndex = "-1";
-  }
-};
-
-export default function createLoaderElement() {
-  const $div = document.createElement("div");
-  $div.className = "page-loader";
-  document.body.appendChild($div);
-}

+export const updateHtml = (
+  type: string = "literal",
+  tag: string | HTMLElement = "<div></div>",
+  target: string = "app"
+) => {
+  const $target: null | HTMLElement = document.querySelector(target);
+
+  $target && ($target.innerHTML = `${tag}`);
+};

-export const updateHtml = (
-    type : string = 'literal',
-    tag : string | HTMLElement = '<div></div>',
-    target : string = 'app'
-) => {
-    const $target : null | HTMLElement = document.querySelector(target);
-
-    $target && ($target.innerHTML = `${tag}`)
-}
\ No newline at end of file

@@ -7,13 +7,10 @@
 import "./assets/style/PageTransition.scss";
 import "./assets/style/PageTransition.scss";
 import "./assets/style/PageLoader.scss";
 import "./assets/style/PageLoader.scss";
 
 
-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";
 import renderApp from "./App";
+import { animatePage, createLoaderElement } from "./shared/page";
+import { getPathname } from "./shared/functions";
+import { addEventWithElementByType, linkEvent } from "./shared/event";
 
 
 window.addEventListener("DOMContentLoaded", () => {
 window.addEventListener("DOMContentLoaded", () => {
   createLoaderElement();
   createLoaderElement();

-import { randomTransition } from "@src/components/page.transition";
 import renderApp from "@src/App";
 import renderApp from "@src/App";
 import {
 import {
   getElement,
   getElement,
@@ -6,6 +5,7 @@ import {
   warningEmptyId,
   warningEmptyId,
   fetchByURL,
   fetchByURL,
 } from "./functions";
 } from "./functions";
+import { randomTransition } from "./page";
 
 
 export function linkEvent(e: Event) {
 export function linkEvent(e: Event) {
   e.preventDefault();
   e.preventDefault();
@@ -33,3 +33,7 @@ export async function handleFetchById(url: string, cssSelector: string) {
 
 
   await fetchByURL(url + insta_id);
   await fetchByURL(url + insta_id);
 }
 }
+
+export const addEventWithElementByType = (element, eventType, handler) => {
+  element.addEventListener(eventType, handler);
+};

 import { BASE_URL } from "@src/config/url";
 import { BASE_URL } from "@src/config/url";
 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";
 import renderApp from "@src/App";
 import renderApp from "@src/App";
+import { randomTransition, togglePageLoader } from "./page";
 
 
 export function formatNumber(number: number): string {
 export function formatNumber(number: number): string {
   if (`${number}`.length > 6) {
   if (`${number}`.length > 6) {

@@ -43,10 +43,28 @@ export const randomTransition = () => {
   turnOnAndOff(randomIndex);
   turnOnAndOff(randomIndex);
 };
 };
 
 
-export default function animatePage() {
+export function animatePage() {
   const $div = document.createElement("div");
   const $div = document.createElement("div");
   $div.className = "page-transition";
   $div.className = "page-transition";
   document.body.appendChild($div);
   document.body.appendChild($div);
 
 
   initialTrantition();
   initialTrantition();
 }
 }
+
+export const togglePageLoader = (type: boolean): void => {
+  const $loader = document.querySelector(".page-loader") as HTMLDivElement;
+
+  if (type === true) {
+    $loader.style.display = "block";
+    $loader.style.zIndex = "1";
+  } else {
+    $loader.style.display = "none";
+    $loader.style.zIndex = "-1";
+  }
+};
+
+export function createLoaderElement() {
+  const $div = document.createElement("div");
+  $div.className = "page-loader";
+  document.body.appendChild($div);
+}

@@ -7,8 +7,7 @@
 
 
 import Title from "@src/components/Title";
 import Title from "@src/components/Title";
 import "@src/assets/style/Intro.scss";
 import "@src/assets/style/Intro.scss";
-import addEventWithElementByType from "@src/components/add.event";
-import { handleFetchById } from "@src/components/event.list";
+import { addEventWithElementByType, handleFetchById } from "@src/shared/event";
 
 
 const Intro = (): string => {
 const Intro = (): string => {
   addEventWithElementByType(document.body, "click", function (e: Event) {
   addEventWithElementByType(document.body, "click", function (e: Event) {

@@ -6,9 +6,9 @@
  *                다른 메뉴 보기
  *                다른 메뉴 보기
  **/
  **/
 import "@src/assets/style/Main.scss";
 import "@src/assets/style/Main.scss";
+import { formatNumber } from "@src/shared/functions";
 
 
 import { getState } from "@src/store/state";
 import { getState } from "@src/store/state";
-import { formatNumber } from "@src/components/functions";
 
 
 const Main = () => {
 const Main = () => {
   const state = getState();
   const state = getState();

@@ -7,10 +7,9 @@
 import "@src/assets/style/Header.scss";
 import "@src/assets/style/Header.scss";
 
 
 import renderApp from "@src/App";
 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";
 import { getState } from "@src/store/state";
+import { addEventWithElementByType, handleFetchById } from "@src/shared/event";
 
 
 const Header = (): string => {
 const Header = (): string => {
   const { insta_id } = getState();
   const { insta_id } = getState();

@@ -6,18 +6,14 @@
     "outDir": "build",
     "outDir": "build",
     "target": "es6",
     "target": "es6",
     "module": "commonjs",
     "module": "commonjs",
-    "strict": true,
+    "strict": false,
     "removeComments": true,
     "removeComments": true,
     "esModuleInterop": true,
     "esModuleInterop": true,
     "baseUrl": ".",
     "baseUrl": ".",
     "paths": {
     "paths": {
-      "@src/*": [
-        "src/*"
-      ]
+      "@src/*": ["src/*"]
     }
     }
   },
   },
-  "include": [
-    "src/**/*.ts"
-  ],
+  "include": ["src/**/*.ts"],
   "exclude": ["node_modules"]
   "exclude": ["node_modules"]
 }
 }