Merge pull request #180 from SCBJ-7/feature/#179-main

[#179] 캐로셀 할인률 반대로 나오는 이슈 수정
SCBJ-7 · Jan 24, 2024 · e3f533b · e3f533b
2 parents 110061b + cf1e3f1
commit e3f533b
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 22 deletions.
diff --git a/src/pages/homePage/Home.tsx b/src/pages/homePage/Home.tsx
@@ -52,7 +52,9 @@ const Home = () => {
           <TextLocaleAnimator text={locale[currentLocale[1]]} />
           <span>지역</span>
           <PercentAnimator
-            percent={currentLocale[2][0]?.salePercentage}
+            percent={
+              currentLocale[2][currentLocale[2].length - 1]?.salePercentage
+            }
             localeAndHotel={localeAndHotel}
           />
           <span>할인 호텔</span>

diff --git a/src/pages/homePage/itemCarousel/ItemCarousel.tsx b/src/pages/homePage/itemCarousel/ItemCarousel.tsx
@@ -71,7 +71,7 @@ const ItemCarousel = ({
           {localeAndHotel.map(
             (item) =>
               item[2].length && (
-                <ItemCarouselUnit key={item[2][0]?.id} item={item} />
+                <ItemCarouselUnit key={item[2][0].id} item={item} />
               ),
           )}
         </S.SliderContainer>

diff --git a/src/pages/homePage/itemCarousel/itemCarouselUnit/ItemCarouselUnit.tsx b/src/pages/homePage/itemCarousel/itemCarouselUnit/ItemCarouselUnit.tsx
@@ -29,43 +29,43 @@ const ItemCarouselUnit = ({ item }: UnitProps) => {
 
   return (
     <S.LocaleWrapper $display={hotel ? "block" : "none"}>
-      {hotel[0] && (
-        <S.ItemUnit onClick={() => onClickHandler(0)}>
-          <img src={hotel[0].imageUrl} />
+      {hotel[1] && (
+        <S.ItemUnit onClick={() => onClickHandler(1)}>
+          <img src={hotel[1].imageUrl} />
           <div className="item-info">
             <div className="hotel_title">
-              <h1>{hotel[0].hotelName}</h1>
-              <h3>{hotel[0].roomType}</h3>
+              <h1>{hotel[1].hotelName}</h1>
+              <h3>{hotel[1].roomType}</h3>
               <S.Sticker>
-                {CHKIN0} ~ {CHKOUT0}
+                {CHKIN1} ~ {CHKOUT1}
               </S.Sticker>
             </div>
             <div className="hotel_price">
-              <h5>{hotel[0].originalPrice}</h5>
+              <h5>{hotel[1].originalPrice}</h5>
               <h1>
-                {priceFormat(hotel[0].salePrice)} 원
-                <span>{Math.floor(hotel[0].salePercentage * 100)}%</span>
+                {priceFormat(hotel[1].salePrice)} 원
+                <span>{Math.floor(hotel[1].salePercentage * 100)}%</span>
               </h1>
             </div>
           </div>
         </S.ItemUnit>
       )}
-      {hotel[1] && (
-        <S.ItemUnit onClick={() => onClickHandler(1)}>
-          <img src={hotel[1].imageUrl} />
+      {hotel[0] && (
+        <S.ItemUnit onClick={() => onClickHandler(0)}>
+          <img src={hotel[0].imageUrl} />
           <div className="item-info">
             <div className="hotel_title">
-              <h1>{hotel[1].hotelName}</h1>
-              <h3>{hotel[1].roomType}</h3>
+              <h1>{hotel[0].hotelName}</h1>
+              <h3>{hotel[0].roomType}</h3>
               <S.Sticker>
-                {CHKIN1} ~ {CHKOUT1}
+                {CHKIN0} ~ {CHKOUT0}
               </S.Sticker>
             </div>
             <div className="hotel_price">
-              <h5>{hotel[1].originalPrice}</h5>
+              <h5>{hotel[0].originalPrice}</h5>
               <h1>
-                {priceFormat(hotel[1].salePrice)} 원
-                <span>{Math.floor(hotel[1].salePercentage * 100)}%</span>
+                {priceFormat(hotel[0].salePrice)} 원
+                <span>{Math.floor(hotel[0].salePercentage * 100)}%</span>
               </h1>
             </div>
           </div>

diff --git a/src/pages/homePage/percentAnimator/PercentAnimator.tsx b/src/pages/homePage/percentAnimator/PercentAnimator.tsx
@@ -14,8 +14,8 @@ const PercentAnimator = ({
       {localeAndHotel.map(
         (item) =>
           item[2].length !== 0 && (
-            <AnimatePresence key={item[2][0]?.id}>
-              {item[2][0]?.salePercentage === percent && (
+            <AnimatePresence key={item[2][0].id}>
+              {item[2][item[2].length - 1].salePercentage === percent && (
                 <S.PercentDiv animate={{ y: [30, 0] }} exit={{ y: [0, -30] }}>
                   최대 {Math.floor(percent * 100)}%
                 </S.PercentDiv>