fix: quiz animation (picktoss#302)

rabyeoljji · Dec 6, 2024 · b4c7e74 · b4c7e74
1 parent 6bc72ed
commit b4c7e74
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 26 deletions.
diff --git a/src/app/(routes)/document/[id]/(main)/layout.tsx b/src/app/(routes)/document/[id]/(main)/layout.tsx
@@ -1,8 +1,7 @@
-import { FunctionComponent, PropsWithChildren, Suspense } from 'react'
+import { FunctionComponent, PropsWithChildren } from 'react'
 import type { Metadata } from 'next'
 import { DirectoryProvider } from '@/features/directory/contexts/directory-context'
 import { DocumentProvider } from '@/features/document/contexts/document-context'
-import RootLoading from '@/app/loading'
 
 export const metadata: Metadata = {}
 
@@ -12,14 +11,12 @@ interface LayoutProps extends PropsWithChildren {
 
 const Layout: FunctionComponent<LayoutProps> = ({ header, children }) => {
   return (
-    <Suspense fallback={<RootLoading />}>
-      <DirectoryProvider>
-        <DocumentProvider>
-          {header}
-          {children}
-        </DocumentProvider>
-      </DirectoryProvider>
-    </Suspense>
+    <DirectoryProvider>
+      <DocumentProvider>
+        {header}
+        {children}
+      </DocumentProvider>
+    </DirectoryProvider>
   )
 }
 

diff --git a/src/features/quiz/components/bomb-animation-success/index.tsx b/src/features/quiz/components/bomb-animation-success/index.tsx
@@ -78,7 +78,7 @@ const FlameBomb = ({ leftQuizCount, onNext }: { leftQuizCount: number; onNext: (
           opacity: [1, 0, 1, 0, 0],
         }}
         transition={{
-          duration: 0.5,
+          duration: 0.7,
           delay: 0.5,
         }}
         onAnimationComplete={() => leftQuizCount === 1 && onNext()}

diff --git a/src/features/quiz/screen/intro-and-quiz-view.tsx b/src/features/quiz/screen/intro-and-quiz-view.tsx
@@ -24,7 +24,7 @@ const IntroAndQuizView = ({
   const handleAnimationComplete = () => {
     const delayTimer = setTimeout(() => {
       setFinishedIntro(true)
-    }, 1000)
+    }, 2000)
 
     return () => clearTimeout(delayTimer)
   }

diff --git a/src/shared/components/custom/spring-up-card-animation.tsx b/src/shared/components/custom/spring-up-card-animation.tsx
@@ -29,10 +29,8 @@ const SpringUpCardAnimation = ({
         initial={{ y: '500px', scaleX: 0, opacity: 0 }}
         animate={{ y: '0%', scaleX: 1, opacity: 1 }}
         transition={{
-          type: 'spring',
-          stiffness: 120,
-          damping: 20,
-          duration: 0.5,
+          duration: 0.7,
+          ease: [0.25, 0.1, 0.25, 1],
         }}
         onAnimationComplete={onAnimationComplete}
       ></motion.div>
@@ -43,11 +41,9 @@ const SpringUpCardAnimation = ({
           initial={{ y: '300px', opacity: 0 }}
           animate={{ y: '0%', opacity: 1 }}
           transition={{
-            delay: 0.1,
-            type: 'spring',
-            stiffness: 130,
-            damping: 20,
-            duration: 0.1,
+            delay: 0.2,
+            duration: 0.3,
+            ease: [0.25, 0.1, 0.25, 1],
           }}
         >
           {cardName}
@@ -58,11 +54,9 @@ const SpringUpCardAnimation = ({
           initial={{ y: '100px', opacity: 0 }}
           animate={{ y: '0%', opacity: 1 }}
           transition={{
-            delay: 0.2,
-            type: 'spring',
-            stiffness: 150,
-            damping: 20,
-            duration: 0.3,
+            delay: 0.3,
+            duration: 0.4,
+            ease: [0.25, 0.1, 0.25, 1],
           }}
         >
           {image}