로딩시 로티 이미지 출력

오윤석
Commit 458011781ab95039ef6fdf305d26336fc5307ed9 45801178 1 parent 92f4716d
Showing 3 changed files with 45 additions and 21 deletions
app/web/package-lock.json
app/web/package.json
app/web/src/components/Loading.svelte
--- a/app/web/package-lock.json
View file @4580117
+++ b/app/web/package-lock.json
View file @4580117
@@ -30,6 +30,14 @@
         "js-tokens": "^4.0.0"
       }
     },
+    "@lottiefiles/svelte-lottie-player": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/@lottiefiles/svelte-lottie-player/-/svelte-lottie-player-0.1.4.tgz",
+      "integrity": "sha512-NVNDdB1kQLIOytWsTxEYRRHhl2T9oZFfKSkUEr8m73JM7jaLP8J8GGH9B6A0vXU4wKsjR69ET6JEvib6z1QH+g==",
+      "requires": {
+        "lottie-web": "^5.6.8"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
@@ -85,9 +93,9 @@
       }
     },
     "@rollup/pluginutils": {
-      "version": "3.0.10",
+      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.0.10.tgz",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-3.1.0.tgz",
-      "integrity": "sha512-d44M7t+PjmMrASHbhgpSbVgtL6EFyX7J4mYxwQ/c5eoaE6N2VgCgEcWVzNnwycIloti+/MpwFr8qfw+nRw00sw==",
+      "integrity": "sha512-GksZ6pr6TpIjHm8h9lSQ8pi8BE9VeubNT0OMJ3B5uZJ8pz73NPiqOtCog/x2/QzM1ENChPKxMDhiQuRHsqc+lg==",
       "dev": true,
       "requires": {
         "@types/estree": "0.0.39",
@@ -101,11 +109,6 @@
       "integrity": "sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==",
       "dev": true
     },
-    "@types/events": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz",
-      "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g=="
-    },
     "@types/fs-extra": {
       "version": "8.1.1",
       "resolved": "https://registry.npmjs.org/@types/fs-extra/-/fs-extra-8.1.1.tgz",
@@ -115,11 +118,10 @@
       }
     },
     "@types/glob": {
-      "version": "7.1.1",
+      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.2.tgz",
-      "integrity": "sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==",
+      "integrity": "sha512-VgNIkxK+j7Nz5P7jvUZlRvhuPSmsEfS03b0alKcq5V/STUKAa3Plemsn5mrQUO7am6OErJ4rhGEGJbACclrtRA==",
       "requires": {
-        "@types/events": "*",
         "@types/minimatch": "*",
         "@types/node": "*"
       }
@@ -130,9 +132,9 @@
       "integrity": "sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA=="
     },
     "@types/node": {
-      "version": "14.0.9",
+      "version": "14.0.13",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.9.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.0.13.tgz",
-      "integrity": "sha512-0sCTiXKXELOBxvZLN4krQ0FPOAA7ij+6WwvD0k/PHd9/KAkr4dXel5J9fh6F4x1FwAQILqAWkmpeuS6mjf1iKA=="
+      "integrity": "sha512-rouEWBImiRaSJsVA+ITTFM6ZxibuAlTuNOCyxVbwreu6k6+ujs7DfnU9o+PShFhET78pMBl3eH+AGSI5eOTkPA=="
     },
     "@types/resolve": {
       "version": "0.0.8",
@@ -144,9 +146,9 @@
       }
     },
     "acorn": {
-      "version": "7.2.0",
+      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.3.1.tgz",
-      "integrity": "sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==",
+      "integrity": "sha512-tLc0wSnatxAQHVHUapaHdz72pi9KUyHjq5KyHjGg9Y8Ifdc79pTh2XvI6I1/chZbnM7QtNKzh66ooDogPZSleA==",
       "dev": true
     },
     "ansi-styles": {
@@ -502,6 +504,11 @@
       "resolved": "https://registry.npmjs.org/local-access/-/local-access-1.0.1.tgz",
       "integrity": "sha512-ykt2pgN0aqIy6KQC1CqdWTWkmUwNgaOS6dcpHVjyBJONA+Xi7AtSB1vuxC/U/0tjIP3wcRudwQk1YYzUvzk2bA=="
     },
+    "lottie-web": {
+      "version": "5.6.10",
+      "resolved": "https://registry.npmjs.org/lottie-web/-/lottie-web-5.6.10.tgz",
+      "integrity": "sha512-ucTzaiBJOMm56/K7Wqjajyh7qXlonHKB3+b5fHvhSiz+jOrXt6QDNKAinI3qdw/zvvYHKzXvFMy5SgOXbOJ5ng=="
+    },
     "magic-string": {
       "version": "0.25.7",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
@@ -751,9 +758,9 @@
       }
     },
     "svelte": {
-      "version": "3.23.0",
+      "version": "3.23.2",
-      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.23.0.tgz",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-3.23.2.tgz",
-      "integrity": "sha512-cnyd96bK/Nw5DnYuB1hzm5cl6+I1fpmdKOteA7KLzU9KGLsLmvWsSkSKbcntzODCLmSySN3HjcgTHRo6/rJNTw==",
+      "integrity": "sha512-hE8GeTM83YVR4GY6/6PeDEcGct4JS5aCi+IYbCAa76oaPSfuF7L85DQYULQxlTK/KPWzw3L1GRGmC3oPG/PQoA==",
       "dev": true
     },
     "svelte-spa-router": {
--- a/app/web/package.json
View file @4580117
+++ b/app/web/package.json
View file @4580117
@@ -15,6 +15,7 @@
     "svelte": "^3.0.0"
   },
   "dependencies": {
+    "@lottiefiles/svelte-lottie-player": "^0.1.4",
     "axios": "^0.19.2",
     "rollup-plugin-copy": "^3.3.0",
     "sirv-cli": "^0.4.4",
--- a/app/web/src/components/Loading.svelte 0 → 100644
View file @4580117
+++ b/app/web/src/components/Loading.svelte 0 → 100644
View file @4580117
+<script>
+    import {LottiePlayer} from '@lottiefiles/svelte-lottie-player';
+    
+    export let count = 0;
+</script>
+
+<div id="loading" class:show={count > 0}> 
+	<LottiePlayer
+		src="https://assets5.lottiefiles.com/packages/lf20_kblbXu.json"  background="transparent"  speed="1"  width={300} height={300} controls={false} controlsLayout={null} loop autoplay>
+	</LottiePlayer>
+</div>
+
+<style>
+#loading { position:fixed; width:100%; height:100%; z-index:9999; background-color:rgba(0,0,0,0.3); align-items:center; justify-content:center; display:none; }
+#loading.show { display:flex; }
+</style>
\ No newline at end of file