#230 feat: video > gif로 파일 수정

depromeet · Feb 2, 2024 · d7c9ded · d7c9ded
1 parent 9a21e8a
commit d7c9ded
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 6 deletions.
diff --git a/public/gif/onboarding_1.gif b/public/gif/onboarding_1.gif
diff --git a/public/gif/onboarding_2.gif b/public/gif/onboarding_2.gif
diff --git a/public/gif/onboarding_3.gif b/public/gif/onboarding_3.gif
diff --git a/src/app/onboarding/page.tsx b/src/app/onboarding/page.tsx
@@ -18,6 +18,7 @@ export default function Page() {
               title={content.title}
               content={content.content}
               videoUrl={content.videoUrl}
+              gifUrl={content.gifUrl}
               icon={content.icon}
               onNextStep={() => setStep((prev) => prev + 1)}
               key={content.step}

diff --git a/src/components/onboarding/Scene/index.tsx b/src/components/onboarding/Scene/index.tsx
@@ -1,6 +1,7 @@
 import { motion } from 'framer-motion';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
+import Image from 'next/image';
 
 import OnboardingModal from '@components/onboarding/Modal';
 import { pageTransitionVariant } from '@constants/motions';
@@ -10,6 +11,7 @@ interface SceneProps {
   title: string;
   content: string;
   videoUrl: string;
+  gifUrl: string;
   icon: string;
   onNextStep: () => void;
 }
@@ -18,15 +20,23 @@ export default function Scene({
   step,
   title,
   content,
-  videoUrl,
+  // videoUrl,
+  gifUrl,
   onNextStep,
 }: SceneProps) {
   const router = useRouter();
   const [buttonActive, setButtonActive] = useState(false);
 
-  const handleVideoEnd = () => {
-    setButtonActive(true);
-  };
+  /* TODO: IOS 영상 이슈 대응 필요 */
+  // const handleVideoEnd = () => {
+  // setButtonActive(true);
+  // };
+
+  useEffect(() => {
+    setTimeout(() => {
+      setButtonActive(true);
+    }, 2000);
+  }, [router, step]);
 
   const handleClickNext = () => {
     onNextStep();
@@ -42,14 +52,21 @@ export default function Scene({
       initial="initial"
       animate={['animate', 'opacity']}
     >
-      <video
+      {/* <video
         src={videoUrl}
         autoPlay
         className="absolute object-cover top-0 h-full w-full"
         playsInline
         muted
         key={videoUrl}
         onEnded={handleVideoEnd}
+      /> */}
+      <Image
+        src={gifUrl}
+        alt="onboarding_gif"
+        fill
+        unoptimized={true}
+        priority
       />
       <OnboardingModal
         title={title}

diff --git a/src/constants/onboarding.ts b/src/constants/onboarding.ts
@@ -3,6 +3,7 @@ export interface OnboardingContentProps {
   title: string;
   content: string;
   videoUrl: string;
+  gifUrl: string;
   icon: string;
 }
 
@@ -12,6 +13,7 @@ export const ONBOARDING_CONTENT: OnboardingContentProps[] = [
     title: '재방문 맛집을 지도에 표시했어요',
     content: '많은 사람이 재방문한 곳일수록 그릇이 많아요!',
     videoUrl: '/video/onboarding_1.mp4',
+    gifUrl: '/gif/onboarding_1.gif',
     icon: '/assets/icon_onboarding/first_step.svg',
   },
   {
@@ -20,6 +22,7 @@ export const ONBOARDING_CONTENT: OnboardingContentProps[] = [
     content:
       '가고 싶은 곳을 북마크하고, 방문 후 기록을 남겨보세요.\n 나의 맛집 지도가 완성될 거예요!',
     videoUrl: '/video/onboarding_2.mp4',
+    gifUrl: '/gif/onboarding_2.gif',
     icon: 'assets/icon_onboarding/second_step.svg',
   },
   {
@@ -28,6 +31,7 @@ export const ONBOARDING_CONTENT: OnboardingContentProps[] = [
     content:
       '다녀온 맛집 기록을 남겨보세요.\n 5개 이상 남기면 레벨이 올라가요!',
     videoUrl: '/video/onboarding_3.mp4',
+    gifUrl: '/gif/onboarding_3.gif',
     icon: '/assets/icon_onboarding/third_step.svg',
   },
 ];