refactor: Add image modal spin and change home video

1ilsang · Jun 11, 2024 · 9e1f892 · 9e1f892
1 parent 6ffe70f
commit 9e1f892
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 8 deletions.
diff --git a/_posts/activity/bali-remote.md → _posts/activity/remote-work/bali-remote.md b/_posts/activity/bali-remote.md → _posts/activity/remote-work/bali-remote.md
diff --git a/_posts/activity/jeju-remote.md → _posts/activity/remote-work/jeju-remote.md b/_posts/activity/jeju-remote.md → _posts/activity/remote-work/jeju-remote.md
diff --git a/package.json b/package.json
@@ -12,7 +12,7 @@
     "build": "next build",
     "start": "next start",
     "lint:stylelint": "stylelint --config './.stylelintrc.cjs' './src/**/*.scss'",
-    "lint:prettier": "prettier --list-different './src/**/*.{json,html,yml,tsx,ts,js,jsx,scss}'",
+    "lint:prettier": "prettier --check './src/**/*.{json,html,yml,tsx,ts,js,jsx,scss}'",
     "lint:eslint": "eslint",
     "lint:markdown": "markdownlint --config './.markdownlint.cjs' './_posts/**/*.{md,mdx}'",
     "lint:typeCheck": "tsc --pretty",

diff --git a/public/assets/open.mp4 b/public/assets/open.mp4
diff --git a/src/features/shared/components/modal/useImageModal.tsx b/src/features/shared/components/modal/useImageModal.tsx
@@ -9,13 +9,16 @@ export const useImageModal = () => {
 
   const handleDialogClick = () => {
     setImageSrc('');
+    setLoading(true);
   };
 
   const load = async () => {
     new Promise((resolve) => {
       imageRef.current.onload = resolve;
     }).then(() => {
-      setLoading(false);
+      setTimeout(() => {
+        setLoading(false);
+      }, 700);
     });
   };
 

diff --git a/src/features/styles/modal/image.scss b/src/features/styles/modal/image.scss
@@ -20,10 +20,10 @@
 
   .image-section {
     position: absolute;
-    width: 65vw;
-    height: 70vh;
-    max-width: 70vw;
-    max-height: 70vh;
+    width: 85vw;
+    height: 85vh;
+    max-width: 85vw;
+    max-height: 85vh;
 
     @include mobile {
       width: 95vw;
@@ -40,8 +40,17 @@
       height: 100%;
 
       .loading-bar {
-        width: 100%;
-        height: 50%;
+        @keyframes spin {
+          100% {
+            transform: rotate(360deg);
+          }
+        }
+
+        width: 30%;
+        height: 30%;
+        animation:
+          skeleton-gradient 1.8s infinite ease-in-out,
+          spin 1.8s infinite ease-in-out;
       }
     }