Merge pull request #234 from depromeet/feat/#230

Feat/#230 QA 수정
depromeet · Feb 3, 2024 · 5e9d5b9 · 5e9d5b9
2 parents f30c1d9 + d7c9ded
commit 5e9d5b9
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 18 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/layout.tsx b/src/app/onboarding/layout.tsx
diff --git a/src/app/onboarding/page.tsx b/src/app/onboarding/page.tsx
@@ -9,7 +9,7 @@ export default function Page() {
   const [step, setStep] = useState(ONBOARDING_CONTENT[0].step);
 
   return (
-    <div>
+    <div className="relative h-screen w-full overflow-hidden">
       {ONBOARDING_CONTENT.map(
         (content) =>
           step >= content.step && (
@@ -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/common/Pin/index.tsx b/src/components/common/Pin/index.tsx
@@ -41,7 +41,7 @@ export default function Pin({
         {!isActive && (
           <Tag
             size={'small'}
-            className="absolute top-[100%] caption-12-bold px-[4px] rounded-[20px] bg-gray-700 text-gray-50 gap-0"
+            className="absolute top-[100%] caption-12-bold px-[6px] py-[2px] rounded-[20px] bg-gray-700 text-gray-50 gap-[2px]"
           >
             <PinVisitorIcon />
             <span className="caption-12-extraBold text-gray-50">

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 top-0 object-cover h-full w-full"
+        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',
   },
 ];