Merge pull request #217 from softeerbootcamp4th/feat/216

[Fix] 이미지 캐러셀 오류 수정
softeerbootcamp4th · Aug 25, 2024 · 29fca26 · 29fca26
2 parents 2ffd278 + 0232853
commit 29fca26
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 45 deletions.
diff --git a/service/src/components/MainPage/CarInfoSection/Carousel.tsx b/service/src/components/MainPage/CarInfoSection/Carousel.tsx
@@ -9,54 +9,24 @@ import CarouselBg from './CarouselBg';
 import { motion } from 'framer-motion';
 import { FLOATING_CAROUSEL } from '@/constants/animation';
 import { CarInfoList } from '@/types/main/type';
+import { getTransformClass } from '@/utils/main/getTransformClass';
+import { getVisibleItems } from '@/utils/main/getVisibleItems';
 
 interface CarouselProps {
   carInfoList: CarInfoList[];
 }
 
 const Carousel = ({ carInfoList }: CarouselProps) => {
   const { state, openCarDetail, selectCurrentIndex } = useCarInfoContext();
+
   const handleSlideClick = (index: number) => {
     if (index >= 0 && index < carInfoList.length) {
       selectCurrentIndex({ index: index });
     }
   };
 
-  const getVisibleItems = () => {
-    switch (state.currentIndex) {
-      case 0:
-        return [carInfoList[0], carInfoList[1], carInfoList[2]];
-      case 1:
-        return [carInfoList[0], carInfoList[1], carInfoList[2], carInfoList[3]];
-      case 2:
-        return carInfoList;
-      case 3:
-        return [carInfoList[1], carInfoList[2], carInfoList[3], carInfoList[4]];
-      case 4:
-        return [carInfoList[2], carInfoList[3], carInfoList[4]];
-      default:
-        return carInfoList;
-    }
-  };
-
-  const visibleItems = getVisibleItems();
+  const visibleItems = getVisibleItems(state.currentIndex, carInfoList);
 
-  const getTransformClass = (id: number) => {
-    switch (id) {
-      case 1:
-        return 'translate-x-custom-1';
-      case 2:
-        return 'translate-x-custom-2';
-      case 3:
-        return '';
-      case 4:
-        return 'translate-x-custom-4';
-      case 5:
-        return 'translate-x-custom-5';
-      default:
-        return '';
-    }
-  };
   return (
     <div className='snap-center carousel-container'>
       <CarouselBg currentIdx={state.currentIndex} />
@@ -79,7 +49,7 @@ const Carousel = ({ carInfoList }: CarouselProps) => {
                       <VideoPlayer videoUrl={item.imgUrl} />
                     ) : (
                       <motion.div
-                        className='h-[422px] relative transform duration-200 px-2'
+                        className='h-[422px] relative transform duration-200'
                         style={{
                           width: '784px',
                           transform: `translateX(${-(item.id - 3) * 50}px)`,
@@ -91,7 +61,7 @@ const Carousel = ({ carInfoList }: CarouselProps) => {
                           alt={item.title}
                           className='w-full h-full object-cover transform duration-200'
                         />
-                        <div className='w-full h-full absolute top-0 bg-gradient-bottom-gray' />
+                        <div className='w-full h-full absolute top-0 left-0 bg-gradient-bottom-gray' />
                         <motion.div
                           className={`absolute top-12 right-12 `}
                           {...FLOATING_CAROUSEL}

diff --git a/service/src/components/MainPage/CarInfoSection/VideoPlayer.tsx b/service/src/components/MainPage/CarInfoSection/VideoPlayer.tsx
@@ -1,5 +1,6 @@
+import useVideoMetadata from '@/hooks/MainPage/useVideoMetaData';
 import { useCarInfoContext } from '@/store/context/useCarInfoContext';
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 
 interface VideoPlayerProps {
   videoUrl: string;
@@ -12,16 +13,9 @@ const VideoPlayer = ({ videoUrl }: VideoPlayerProps) => {
   const [isPlaying, setIsPlaying] = useState(true);
   const [isMuted, setIsMuted] = useState(true);
   const [progress, setProgress] = useState(0);
-  const [duration, setDuration] = useState(0);
   const [isHovered, setIsHovered] = useState(false);
 
-  useEffect(() => {
-    if (videoRef.current) {
-      videoRef.current.addEventListener('loadedmetadata', () => {
-        setDuration(videoRef.current!.duration);
-      });
-    }
-  });
+  const duration = useVideoMetadata(videoRef);
 
   const handlePlayPause = () => {
     if (videoRef.current) {

diff --git a/service/src/hooks/MainPage/useVideoMetaData.tsx b/service/src/hooks/MainPage/useVideoMetaData.tsx
@@ -0,0 +1,27 @@
+import { useState, useEffect, RefObject } from 'react';
+
+const useVideoMetadata = (videoRef: RefObject<HTMLVideoElement>) => {
+  const [duration, setDuration] = useState(0);
+
+  useEffect(() => {
+    if (videoRef.current) {
+      const handleLoadedMetadata = () => {
+        setDuration(videoRef.current!.duration);
+      };
+
+      const videoElement = videoRef.current;
+      videoElement.addEventListener('loadedmetadata', handleLoadedMetadata);
+
+      return () => {
+        videoElement.removeEventListener(
+          'loadedmetadata',
+          handleLoadedMetadata
+        );
+      };
+    }
+  }, [videoRef]);
+
+  return duration;
+};
+
+export default useVideoMetadata;
diff --git a/service/src/utils/main/getTransformClass.ts b/service/src/utils/main/getTransformClass.ts
@@ -0,0 +1,16 @@
+export const getTransformClass = (id: number) => {
+  switch (id) {
+    case 1:
+      return 'translate-x-custom-1';
+    case 2:
+      return 'translate-x-custom-2';
+    case 3:
+      return '';
+    case 4:
+      return 'translate-x-custom-4';
+    case 5:
+      return 'translate-x-custom-5';
+    default:
+      return '';
+  }
+};
diff --git a/service/src/utils/main/getVisibleItems.ts b/service/src/utils/main/getVisibleItems.ts
@@ -0,0 +1,21 @@
+import { CarInfoList } from '@/types/main/type';
+
+export const getVisibleItems = (
+  currentIndex: number,
+  carInfoList: CarInfoList[]
+): CarInfoList[] => {
+  switch (currentIndex) {
+    case 0:
+      return [carInfoList[0], carInfoList[1], carInfoList[2]];
+    case 1:
+      return [carInfoList[0], carInfoList[1], carInfoList[2], carInfoList[3]];
+    case 2:
+      return carInfoList;
+    case 3:
+      return [carInfoList[1], carInfoList[2], carInfoList[3], carInfoList[4]];
+    case 4:
+      return [carInfoList[2], carInfoList[3], carInfoList[4]];
+    default:
+      return carInfoList;
+  }
+};