Merge pull request #324 from SCBJ-7/feat/#323-weekendItem

[#323] 주말 특가가 0개일 때는 주말특가 컨테이너 숨기기
SCBJ-7 · Feb 28, 2024 · bb29f50 · bb29f50
2 parents 6216b79 + adaa252
commit bb29f50
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 36 deletions.
diff --git a/src/apis/fetchMainItems.ts b/src/apis/fetchMainItems.ts
@@ -6,16 +6,19 @@ import { BASE_URL, END_POINTS } from "@/constants/api";
 
 // 유저 정보를 불러오는 api입니다.
 export const fetchMainItem = async (): Promise<
-  [LocaleItemsType, WeekendItem[]]
+  [LocaleItemsType, WeekendItem[] | null]
 > => {
   const { data } = await axios.get(
     BASE_URL +
       END_POINTS.MAIN +
       "?cityNames=서울&cityNames=강원&cityNames=부산&cityNames=제주&cityNames=경상&cityNames=전라",
   );
 
+  console.log(data);
+
   const { weekend, ...locale } = data.data;
-  const temp = weekend.content;
+  console.log(locale, "locale");
+  const temp = weekend.content.length ? weekend.content : [];
 
   return [locale, temp];
 };
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
@@ -1,10 +1,11 @@
-import { isMobile } from "@/utils/isMobile";
 import React from "react";
-import A2HS from "../A2HS/A2HS";
 
 import Header from "./header/HeaderTop";
 import * as S from "./Layout.style";
 import BottomNav from "./navBottom/NavBottom";
+import A2HS from "../A2HS/A2HS";
+
+import { isMobile } from "@/utils/isMobile";
 
 interface ChildrenProps {
   children: React.ReactNode;

diff --git a/src/components/noResult/NoResult.tsx b/src/components/noResult/NoResult.tsx
@@ -6,8 +6,8 @@ import * as S from "./NoResult.style";
 interface NoResultProps {
   title: string;
   desc: string | React.ReactNode;
-  buttonDesc: string;
-  navigateTo: string;
+  buttonDesc?: string;
+  navigateTo?: string;
 }
 
 const NoResult = ({ title, desc, buttonDesc, navigateTo }: NoResultProps) => {
@@ -25,13 +25,15 @@ const NoResult = ({ title, desc, buttonDesc, navigateTo }: NoResultProps) => {
         </S.TitleWrapper>
       </S.MainWrapper>
       <S.BottomWrapper>
-        <S.Button
-          type="button"
-          variant="solid"
-          onClick={() => navigate(navigateTo)}
-        >
-          {buttonDesc}
-        </S.Button>
+        {buttonDesc && navigateTo && (
+          <S.Button
+            type="button"
+            variant="solid"
+            onClick={() => navigate(navigateTo)}
+          >
+            {buttonDesc}
+          </S.Button>
+        )}
       </S.BottomWrapper>
     </S.Container>
   );

diff --git a/src/hooks/common/useCarousel.ts b/src/hooks/common/useCarousel.ts
@@ -1,7 +1,7 @@
 import { useState } from "react";
 
 interface CarouselProps {
-  slideLength: number;
+  slideLength: number | undefined;
   slideWidth: number;
   infinite?: boolean;
 }
@@ -27,6 +27,7 @@ export const useCarousel = ({
   };
 
   const handleDragEnd = (deltaX: number) => {
+    if (!slideLength) return;
     const maxIndex = slideLength - 1;
 
     if (deltaX < -50) setCurrentIndex(inrange(currentIndex + 1, 0, maxIndex));
@@ -39,6 +40,7 @@ export const useCarousel = ({
   const handleSliderNavigationClick =
     (index: number) => (event: React.MouseEvent<HTMLButtonElement>) => {
       event.stopPropagation();
+      if (!slideLength) return;
 
       if (index < 0 || index >= slideLength) return;
 
@@ -105,6 +107,7 @@ export const useCarousel = ({
   };
 
   const handleSliderTransitionEnd = () => {
+    if (!slideLength) return;
     setAnimate(false);
 
     if (!infinite) return;

diff --git a/src/pages/homePage/Home.style.ts b/src/pages/homePage/Home.style.ts
@@ -3,7 +3,7 @@ import styled from "styled-components";
 export const Container = styled.section`
   background-color: ${({ theme }) => theme.color.greyScale6};
 
-  padding-top: 80px;
+  padding: 80px 0;
   display: flex;
   flex-direction: column;
   align-items: center;

diff --git a/src/pages/homePage/Home.tsx b/src/pages/homePage/Home.tsx
@@ -38,11 +38,11 @@ const Home = () => {
     .map((_, i) => i);
 
   // 주말 특가 관련 데이터
-  const WeekendMapped: [number, WeekendItem][] = weekendProds.map((v, i) => [
-    i,
-    v,
-  ]);
+  const WeekendMapped: [number, WeekendItem][] | undefined = weekendProds?.map(
+    (v, i) => [i, v],
+  );
   const [weekendHotels] = useState(WeekendMapped);
+  console.log(weekendHotels, "weekendHotels");
 
   return (
     <S.Container>
@@ -78,18 +78,20 @@ const Home = () => {
           onSetSequence={setCurrentLocale}
         />
       </S.SaleCarouselContainer>
+      {weekendHotels && weekendHotels.length !== 0 && (
+        <S.WeekendCarouselContainer className="week-container">
+          <S.TitleSection>주말 호캉스 추천</S.TitleSection>
 
-      <S.WeekendCarouselContainer className="week-container">
-        <S.TitleSection>주말 호캉스 추천</S.TitleSection>
-        <WeekendCarousel
-          weekendHotels={weekendHotels}
-          onChangeLocale={setCurrentLocale}
-          height={343}
-          arrows={true}
-          infinite={false}
-          draggable={true}
-        />
-      </S.WeekendCarouselContainer>
+          <WeekendCarousel
+            weekendHotels={weekendHotels}
+            onChangeLocale={setCurrentLocale}
+            height={343}
+            arrows={true}
+            infinite={false}
+            draggable={true}
+          />
+        </S.WeekendCarouselContainer>
+      )}
     </S.Container>
   );
 };

diff --git a/src/pages/homePage/weekendCarousel/WeekendCarousel.tsx b/src/pages/homePage/weekendCarousel/WeekendCarousel.tsx
@@ -1,3 +1,4 @@
+import NoResult from "@components/noResult/NoResult.tsx";
 import { useCarousel } from "@hooks/common/useCarousel";
 import { useCarouselSize } from "@hooks/common/useCarouselSize";
 import { LocaleItem, WeekendItem } from "@type/saleSection.ts";
@@ -6,7 +7,7 @@ import * as S from "./WeekendCarousel.style.ts";
 import WeekendUnit from "./weekendCarouselUnit/WeekendUnit.tsx";
 
 interface CarouselProps {
-  weekendHotels: [number, WeekendItem][];
+  weekendHotels: [number, WeekendItem][] | undefined;
   onChangeLocale: React.Dispatch<
     React.SetStateAction<[number, string, LocaleItem[]]>
   >;
@@ -34,7 +35,7 @@ const WeekendCarousel = ({
     handlerSliderMoueDown,
     handleSliderTouchStart,
   } = useCarousel({
-    slideLength: weekendHotels.length,
+    slideLength: weekendHotels?.length,
     infinite,
     slideWidth: window.innerWidth > 500 ? 450 + 24 : 240 + 24,
   });
@@ -50,12 +51,16 @@ const WeekendCarousel = ({
           onTouchStart={draggable ? handleSliderTouchStart : undefined}
           onTransitionEnd={draggable ? handleSliderTransitionEnd : undefined}
         >
-          {weekendHotels.map((item) => (
-            <WeekendUnit key={item[1].id} item={item} />
-          ))}
+          {weekendHotels ? (
+            weekendHotels.map((item) => (
+              <WeekendUnit key={item[1].id} item={item} />
+            ))
+          ) : (
+            <NoResult title="주말 특가 상품이 없습니다." desc=""></NoResult>
+          )}
         </S.SliderContainer>
       </S.SliderWrapper>
-      {arrows && (
+      {weekendHotels && arrows && (
         <S.ButtonContainer>
           <S.LeftButton
             aria-label="뒤로가기"