From c90a8dfba9704c388cbc5deb5191d906ac36304e Mon Sep 17 00:00:00 2001
From: im-na0 <139189221+im-na0@users.noreply.github.com>
Date: Fri, 12 Jul 2024 19:13:07 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20carousel=20height=20props=20?=
 =?UTF-8?q?=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/carousel/Carousel.style.ts                | 8 +-------
 src/components/carousel/Carousel.tsx                     | 8 ++++----
 src/pages/homePage/itemCarousel/ItemCarousel.tsx         | 7 ++++---
 .../homePage/weekendCarousel/WeekendCarousel.style.ts    | 9 +--------
 src/pages/homePage/weekendCarousel/WeekendCarousel.tsx   | 4 +---
 5 files changed, 11 insertions(+), 25 deletions(-)

diff --git a/src/components/carousel/Carousel.style.ts b/src/components/carousel/Carousel.style.ts
index 3595b001..d4fe0472 100644
--- 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
index f06376c2..f5007000 100644
--- 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
index e8f527ed..9144e340 100644
--- 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
index 2532dee3..90f5dc41 100644
--- 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
index 3d23edb4..dd1a02ad 100644
--- 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}