Merge pull request #62 from Jigeum-lab/develop

fix: 캐러셀 오류 수정 및 헤더 스타일 수정
Jigeum-lab · Sep 29, 2024 · a7e8b32 · a7e8b32
2 parents 5a42a51 + 0e05040
commit a7e8b32
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/src/components/projectDetail/ButtonBox.tsx b/src/components/projectDetail/ButtonBox.tsx
@@ -18,8 +18,10 @@ export default function ButtonBox({ emblaApi, padding }: { emblaApi: EmblaCarous
         onClick={() => {
           if (!emblaApi) return;
           emblaApi.scrollNext();
-          emblaApi.plugins().autoScroll.stop();
-          startScroll(emblaApi);
+          if (emblaApi.plugins().autoScroll) {
+            emblaApi.plugins().autoScroll.stop();
+            startScroll(emblaApi);
+          }
         }}
       />
     </s.ButtonBox>

diff --git a/src/components/projectDetail/Carousel.tsx b/src/components/projectDetail/Carousel.tsx
@@ -38,6 +38,10 @@ export default function Carousel() {
         <s.CarouselContainer>
           {slides.map((carouselObj, index) => {
             img.src = carouselObj.url;
+            let type = 'row';
+            if (img.width < img.height) {
+              type = 'col';
+            }
             if (carouselObj.mediaType === 'VIDEO') {
               return (
                 <s.CarouselSlide key={carouselObj.url + index}>
@@ -56,9 +60,13 @@ export default function Carousel() {
                 <s.Img
                   src={carouselObj.url}
                   alt=""
-                  $type={img.width >= 1920 ? 'row' : 'col'}
+                  $type={type}
                   onClick={() => {
-                    setStartImg(index);
+                    if (index > projectInfo.projectMedia.length - 1) {
+                      setStartImg(index - projectInfo.projectMedia.length);
+                    } else {
+                      setStartImg(index);
+                    }
                     setShowZoomComponent(true);
                     document.body.style.overflow = 'hidden';
                   }}

diff --git a/src/components/projectDetail/Zoom/ZoomMediaBox.tsx b/src/components/projectDetail/Zoom/ZoomMediaBox.tsx
@@ -34,12 +34,12 @@ export default function ZoomMediaBox() {
   img.src = carouselImgs[startImg].url;
 
   useEffect(() => {
-    if (img.width >= 1920 || carouselImgs[startImg].mediaType === 'VIDEO') {
+    if (img.width > img.height || carouselImgs[startImg].mediaType === 'VIDEO') {
       setImgDirection('row');
     } else {
       setImgDirection('col');
     }
-  }, [startImg, img.width, carouselImgs]);
+  }, [startImg, img.width, carouselImgs, img.height]);
 
   useEffect(() => {
     const MouseMoveFunction = (e: MouseEvent) => {