refactor: carousel height props 제거

SCBJ-7 · Jul 12, 2024 · c90a8df · c90a8df
1 parent 20cd58e
commit c90a8df
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 25 deletions.
diff --git a/src/components/carousel/Carousel.style.ts b/src/components/carousel/Carousel.style.ts
@@ -1,16 +1,10 @@
 import { PiCaretLeftBold, PiCaretRightBold } from "react-icons/pi";
 import styled, { css } from "styled-components";
 
-export const CarouselContainer = styled.div<{
-  $height: number;
-}>`
+export const CarouselContainer = styled.div`
   position: relative;
 
-  min-height: ${(props) => `${props.$height}px`};
-  height: ${(props) => `${props.$height}px`};
-
   overflow: hidden;
-  cursor: grab;
 
   touch-action: pan-y;
 `;

diff --git a/src/components/carousel/Carousel.tsx b/src/components/carousel/Carousel.tsx
@@ -1,9 +1,9 @@
-import { useCarousel } from "@/hooks/common/useCarousel";
-import { useCarouselSize } from "@/hooks/common/useCarouselSize";
-
 import * as S from "./Carousel.style.ts";
 import ProgressiveImg from "../progressiveImg/ProgressiveImg.tsx";
 
+import { useCarousel } from "@/hooks/common/useCarousel";
+import { useCarouselSize } from "@/hooks/common/useCarouselSize";
+
 interface CarouselProps {
   images: string[];
   height?: number;
@@ -41,7 +41,7 @@ const Carousel = ({
   });
   console.log("currentIndex", currentIndex);
   return (
-    <S.CarouselContainer $height={height}>
+    <S.CarouselContainer>
       <S.SliderWrapper>
         <S.SliderContainer
           ref={sliderRef}

diff --git a/src/pages/homePage/itemCarousel/ItemCarousel.tsx b/src/pages/homePage/itemCarousel/ItemCarousel.tsx
@@ -1,11 +1,12 @@
-import { useAnimateCarousel } from "@/hooks/common/useAnimateCarousel";
-import { useCarouselSize } from "@/hooks/common/useCarouselSize";
-import { type LocaleItem } from "@/types/saleSection";
 import { useEffect } from "react";
 
 import * as S from "./ItemCarousel.style";
 import ItemCarouselUnit from "./itemCarouselUnit/ItemCarouselUnit.tsx";
 
+import { useAnimateCarousel } from "@/hooks/common/useAnimateCarousel";
+import { useCarouselSize } from "@/hooks/common/useCarouselSize";
+import { type LocaleItem } from "@/types/saleSection";
+
 interface CarouselProps {
   currentLocale: [number, string, LocaleItem[]];
   localeAndHotel: [number, string, LocaleItem[]][];

diff --git a/src/pages/homePage/weekendCarousel/WeekendCarousel.style.ts b/src/pages/homePage/weekendCarousel/WeekendCarousel.style.ts
@@ -1,20 +1,13 @@
 import { PiCaretLeftBold, PiCaretRightBold } from "react-icons/pi";
 import styled, { css } from "styled-components";
 
-export const CarouselContainer = styled.div<{
-  $height: number;
-}>`
+export const CarouselContainer = styled.div`
   position: relative;
-
   width: 100%;
-  min-height: ${(props) => `${props.$height}px`};
-  height: ${(props) => `${props.$height}px`};
   background-color: white;
   display: flex;
   align-items: center;
   gap: 8px;
-
-  cursor: grab;
   touch-action: pan-y;
 `;
 

diff --git a/src/pages/homePage/weekendCarousel/WeekendCarousel.tsx b/src/pages/homePage/weekendCarousel/WeekendCarousel.tsx
@@ -11,7 +11,6 @@ interface CarouselProps {
   onChangeLocale: React.Dispatch<
     React.SetStateAction<[number, string, LocaleItem[]]>
   >;
-  height?: number;
   arrows?: boolean;
   infinite?: boolean;
   draggable?: boolean;
@@ -20,7 +19,6 @@ interface CarouselProps {
 
 const WeekendCarousel = ({
   weekendHotels,
-  height = 300,
   arrows = true,
   infinite = false,
   draggable = false,
@@ -41,7 +39,7 @@ const WeekendCarousel = ({
   });
 
   return (
-    <S.CarouselContainer $height={height}>
+    <S.CarouselContainer>
       <S.SliderWrapper>
         <S.SliderContainer
           ref={sliderRef}