style: 스타일 조정

sopt-makers · Dec 3, 2023 · ab5be83 · ab5be83
1 parent 5a460be
commit ab5be83
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 6 deletions.
diff --git a/src/hooks/useInfiniteCarousel.ts b/src/hooks/useInfiniteCarousel.ts
@@ -1,15 +1,16 @@
 import { useEffect, useRef, useState } from 'react';
 
 const useInfiniteCarousel = <T>(carouselList: Array<T>, x: string) => {
+  const TOTAL_SLIDE = carouselList.length;
   const [infiniteCarouselList, setInfiniteCarouselList] = useState(carouselList);
-  const [currentIndex, setCurrentIndex] = useState(1);
+  const [currentIndex, setCurrentIndex] = useState(0);
   const carouselRef = useRef<HTMLDivElement>(null);
-  const TOTAL_SLIDE = carouselList.length;
 
   useEffect(() => {
     const firstSide = carouselList[0];
     const lastSlide = carouselList[TOTAL_SLIDE - 1];
     setInfiniteCarouselList([lastSlide, ...carouselList, firstSide]);
+    setCurrentIndex(1);
   }, [carouselList, TOTAL_SLIDE]);
 
   const moveToNthSlide = (index: number) => {

diff --git a/src/views/MainPage/components/PartConfig/PartSlide/index.tsx b/src/views/MainPage/components/PartConfig/PartSlide/index.tsx
@@ -17,7 +17,7 @@ export default function PartSlide({ part, handleCarouselSwipe }: PartSlideProps)
     visible: {
       opacity: 1,
       y: 0,
-      transition: { opacity: { delay: 0.2, duration: 0.6 }, y: { delay: 0.2, duration: 1 } },
+      transition: { opacity: { delay: 0.4, duration: 0.6 }, y: { delay: 0.4, duration: 1 } },
     },
   };
 

diff --git a/src/views/MainPage/components/PartConfig/PartSlide/style.ts b/src/views/MainPage/components/PartConfig/PartSlide/style.ts
@@ -8,7 +8,7 @@ export const PartSlide = styled.div`
   flex-shrink: 0;
   position: relative;
 
-  width: 100vw;
+  width: 100%;
   height: 428px;
 
   padding: 77px 0 62px 0;

diff --git a/src/views/MainPage/components/PartConfig/index.tsx b/src/views/MainPage/components/PartConfig/index.tsx
@@ -10,7 +10,7 @@ export default function PartConfig() {
   const [partIndex, setPartIndex] = useState(0);
   const { carouselRef, infiniteCarouselList, handleSwipe } = useInfiniteCarousel<TabType>(
     carouselList,
-    '(-100vw - 20px)',
+    '(-100% - 20px)',
   );
 
   const handleSelectPart = (clickedIndex: number) => {

diff --git a/src/views/MainPage/components/PartConfig/style.ts b/src/views/MainPage/components/PartConfig/style.ts
@@ -12,7 +12,7 @@ export const PartButtonList = styled.div`
 `;
 
 export const CarouselWrapper = styled.div`
-  width: 100vw;
+  width: 100%;
   overflow: hidden;
 `;