From 7bcf768f94f72067328898a319a0add3ed26200f Mon Sep 17 00:00:00 2001
From: Jaeha Lee <wogkdkrm112@gmail.com>
Date: Mon, 20 Feb 2023 18:29:42 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20loading=20svg=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                       |  2 +-
 public/spinner.svg               | 52 ++++++++++++++++++++++++++++++++
 src/js/main.js                   |  4 +--
 src/js/page/admin/dashboard.js   |  4 +++
 src/js/page/mainPage/mainPage.js |  1 -
 5 files changed, 59 insertions(+), 4 deletions(-)
 create mode 100644 public/spinner.svg

diff --git a/index.html b/index.html
index 76dbd66..2a989cb 100644
--- a/index.html
+++ b/index.html
@@ -114,7 +114,7 @@ <h1 class="header-main__company-name">마켓로그</h1>
     <!-- 메인페이지 라우터 -->
     <main class="app"></main>
     <div class="loadingGif">
-      <img src="public/loading.svg" alt="로딩.." id="img-loadingGIF" />
+      <img src="public/spinner.svg" alt="로딩.." id="img-loadingGIF" />
     </div>
     <!-- 메인페이지 끝 -->
 
diff --git a/public/spinner.svg b/public/spinner.svg
new file mode 100644
index 0000000..bcfba2c
--- /dev/null
+++ b/public/spinner.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(241, 242, 243); display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<g transform="rotate(0 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#630e80">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(30 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#630e80">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(60 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#630e80">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(90 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#630e80">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(120 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#630e80">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(150 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#630e80">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(180 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#630e80">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(210 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#630e80">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(240 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#630e80">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(270 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#630e80">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(300 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#630e80">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"></animate>
+  </rect>
+</g><g transform="rotate(330 50 50)">
+  <rect x="47" y="24" rx="3" ry="6" width="6" height="12" fill="#630e80">
+    <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
+  </rect>
+</g>
+<!-- [ldio] generated by https://loading.io/ --></svg>
\ No newline at end of file
diff --git a/src/js/main.js b/src/js/main.js
index e70274d..927a58b 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -1,4 +1,5 @@
 import Navigo from 'navigo';
+import { $ } from './utils/dom.js';
 import { htmlMypage_Nav, renderMyPageNav } from './page/mypage.js';
 import { htmlMypage_Account, initFuncAccount } from './page/mypage/account';
 // import { htmlMypage_MyHeart, initFuncMyHeart } from './page/mypage/wishlist';
@@ -38,9 +39,8 @@ import {
   orderDetailPage,
 } from './page/admin/renderTemplate';
 
-const $ = (selector) => document.querySelector(selector);
 export const router = new Navigo('/');
-const divLoadingEl = $('.loadingGif');
+export const divLoadingEl = $('.loadingGif');
 
 function getLoginStatus() {
   return localStorage.getItem('token') ? true : false;
diff --git a/src/js/page/admin/dashboard.js b/src/js/page/admin/dashboard.js
index 62a6052..b7fdb0d 100644
--- a/src/js/page/admin/dashboard.js
+++ b/src/js/page/admin/dashboard.js
@@ -5,9 +5,12 @@ import {
 import { getAllOrder, getAllProducts } from '../../api.js';
 import { formatPrice } from '../../utils/format.js';
 import Chart from 'chart.js/auto';
+import { divLoadingEl } from '../../main.js';
 
 /** 대시보드 페이지 핸들러 */
 export const dashboardHandler = async () => {
+  divLoadingEl.style.display = 'block';
+
   let orders = await getAllOrder();
   let products = await getAllProducts();
 
@@ -16,6 +19,7 @@ export const dashboardHandler = async () => {
   renderDashboardChart();
   setDashBoardChartCategory(products);
   setDashBoardChartAmount(orders);
+  divLoadingEl.style.display = 'none';
 };
 
 /** 거래 카테고리 통계 chart 생성 */
diff --git a/src/js/page/mainPage/mainPage.js b/src/js/page/mainPage/mainPage.js
index 22c32b8..2417c29 100644
--- a/src/js/page/mainPage/mainPage.js
+++ b/src/js/page/mainPage/mainPage.js
@@ -124,6 +124,5 @@ $('.app').addEventListener('click', (e) => {
 /** router on '/' 핸들링 함수 */
 export const handleMainPage = () => {
   $('.modal__addCart').style.display = 'none';
-  console.log('/ route is working');
   renderPage(renderMainPageTemplate);
 };