Merge pull request #381 from SCBJ-7/revert-375-revert-374-feature/#349-…

…feat-main

Revert "Revert "Feature/#349 feat main""

public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (2.1.5).
+ * Mock Service Worker (2.1.4).
  * @see https://github.com/mswjs/msw
  * - Please do NOT modify this file.
  * - Please do NOT serve this file on production.

src/apis/fetchMainItems.ts

@@ -16,6 +16,6 @@ export const fetchMainItem = async (): Promise<
 
   const { weekend, ...locale } = data.data;
   const temp = weekend.content.length ? weekend.content : [];
-
+  console.log(data);
   return [locale, temp];
 };

src/apis/fetchSeachList.ts

@@ -1,6 +1,7 @@
-import { BASE_URL, END_POINTS } from "@/constants/api";
 import axios from "axios";
 
+import { BASE_URL, END_POINTS } from "@/constants/api";
+
 export const fetchSearchList = async (
   location: string | null,
   checkIn: string | null,
@@ -36,7 +37,6 @@ export const fetchSearchList = async (
         },
       },
     );
-    console.log("response data", response);
     return response.data.data;
   } catch (error) {
     throw new Error("호텔 검색에 실패했습니다");

src/components/carousel/Carousel.tsx

@@ -24,7 +24,7 @@ const Carousel = ({
   const slideList = infinite
     ? [images.at(-1), ...images, images.at(0)]
     : images;
-
+  console.log(images.at(-1));
   const { slideWidth, sliderRef } = useCarouselSize();
 
   const {
@@ -39,7 +39,7 @@ const Carousel = ({
     infinite,
     slideWidth,
   });
-
+  console.log("currentIndex", currentIndex);
   return (
     <S.CarouselContainer $height={height}>
       <S.SliderWrapper>

src/components/layout/header/HeaderTop.tsx

@@ -19,10 +19,13 @@ const Header = ({ text, handleBackClick }: HeaderProps) => {
   let title = "";
   let undo = true;
 
-  if (pathname.includes(PATH.WRITE_TRANSFER_PRICE)) {
-    const hotelName = params.get("hotelName");
-    if (hotelName) {
-      title = hotelName;
+  if (pathname.includes(PATH.MAIN_DETAIL)) {
+    const id = params.get("id");
+    undo = true;
+    if (id === "0") {
+      title = "봄 여행 숙소 추천";
+    } else if (id === "1") {
+      title = "성수기 숙소 예약 놓쳤다면?";
     }
   }
 
@@ -31,6 +34,13 @@ const Header = ({ text, handleBackClick }: HeaderProps) => {
     title = "판매내역 상세";
   }
 
+  if (pathname.includes(PATH.WRITE_TRANSFER_PRICE)) {
+    const hotelName = params.get("id");
+    if (hotelName) {
+      title = hotelName;
+    }
+  }
+
   switch (pathname) {
     case PATH.ROOT:
       alarmIC = false;

src/constants/path.ts

@@ -1,5 +1,6 @@
 export const PATH = {
   ROOT: "/",
+  MAIN_DETAIL: "/main-detail",
   ALARM: "/alarm",
   SEARCHLIST: "/search",
   SEARCH_FILTER: "/search/filter",

src/hooks/common/useCarouselSize.ts

@@ -10,6 +10,7 @@ export const useCarouselSize = () => {
 
       const parentWidth =
         sliderRef.current.parentElement?.getBoundingClientRect().width ?? 0;
+      console.dir(sliderRef.current.parentElement);
       setSlideWidth(parentWidth);
     };
 

src/pages/homePage/Home.style.ts

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 export const Container = styled.section<{ $weekLength: undefined | number }>`
-  background-color: ${({ theme }) => theme.color.greyScale6};
+  background-color: ${({ theme }) => theme.color.greyScale7};
 
   padding-top: 80px;
   padding-bottom: ${({ $weekLength }) => !$weekLength && "200px"};
@@ -21,15 +21,10 @@ export const Container = styled.section<{ $weekLength: undefined | number }>`
 `;
 
 export const SaleCarouselContainer = styled.div`
-  width: calc(100% - 40px);
-  height: 434px;
-
+  width: 100%;
   background-color: white;
-  margin-bottom: 32px;
-
-  border-radius: 12px;
-  overflow: hidden;
-  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.1);
+  margin-bottom: 70px;
+  margin-top: 10px;
 `;
 
 export const TextSlider = styled.div`
@@ -52,15 +47,20 @@ export const TextSlider = styled.div`
 
 export const WeekendCarouselContainer = styled.div`
   width: 100%;
-  height: 467px;
+  height: 520px;
   margin: 0 20px;
   background-color: white;
-  margin-bottom: 60px;
+  padding-bottom: 100px;
 `;
 
 export const TitleSection = styled.div`
-  margin: 40px 20px 0;
-  height: 46px;
+  margin: 40px 20px 8px;
   font-size: 18px;
   font-weight: 800;
 `;
+
+export const SubTitle = styled.div`
+  width: 100%;
+  ${({ theme }) => theme.typo.body3}
+  margin: 0 20px 25px;
+`;

src/pages/homePage/Home.tsx

@@ -1,26 +1,39 @@
-import { fetchMainItem } from "@/apis/fetchMainItems";
-import { locale } from "@/constants/locale";
 import { useSuspenseQuery } from "@tanstack/react-query";
-import { LocaleItem, WeekendItem } from "@/types/saleSection";
 import { useState } from "react";
 
+import EventCarousel from "./eventCarousel/EventCarousel";
 import * as S from "./Home.style";
 import ItemCarousel from "./itemCarousel/ItemCarousel";
 import MainHeader from "./mainHeader/MainHeader";
 import NavToSearchSection from "./navToSearchSection/NavToSearchSection";
 import PercentAnimator from "./percentAnimator/PercentAnimator";
 import SequenceSection from "./sequenceSection/SequenceSection";
-import TextLocaleAnimator from "./textAnimator/TextAnimator";
-import TitleSection from "./titleSection/TitleSection";
 import WeekendCarousel from "./weekendCarousel/WeekendCarousel";
 
+import { fetchMainItem } from "@/apis/fetchMainItems";
+import secondMonth from "@/assets/EventImages/secondMonth.png";
+import { LocaleItem, WeekendItem } from "@/types/saleSection";
+interface EventItem {
+  id: number;
+  image: string;
+  title1: string;
+  title2: string;
+}
+
 const Home = () => {
   const { data: mainData } = useSuspenseQuery({
     queryKey: ["main"],
     queryFn: fetchMainItem,
   });
   const [localeProds, weekendProds] = mainData;
-
+  const EventCarouselContents: EventItem[] = [
+    {
+      id: 1,
+      image: secondMonth,
+      title1: "성수기 숙소 예약 놓쳤다면?",
+      title2: "황금연휴 호캉스 추천",
+    },
+  ];
   // 지역 별 할인 관련 데이터
   const localeEntries: [number, string, LocaleItem[]][] = Object.entries(
     localeProds,
@@ -29,15 +42,14 @@ const Home = () => {
     .map((v, i) => [i, v[0], v[1]]);
 
   const [localeAndHotel] = useState(localeEntries);
-
+  console.log("localeEntries", localeEntries);
   const [currentLocale, setCurrentLocale] = useState<
     [number, string, LocaleItem[]]
   >(localeAndHotel[0]);
   const indicatorRange = new Array(localeAndHotel.length)
     .fill("")
     .map((_, i) => i);
 
-  // 주말 특가 관련 데이터
   const WeekendMapped: [number, WeekendItem][] | undefined = weekendProds?.map(
     (v, i) => [i, v],
   );
@@ -46,12 +58,34 @@ const Home = () => {
   return (
     <S.Container $weekLength={weekendHotels?.length}>
       <MainHeader />
-      <TitleSection />
       <NavToSearchSection />
+      <EventCarousel
+        EventCarouselContents={EventCarouselContents}
+        height={304}
+        arrows={false}
+        infinite={true}
+        innerShadow={true}
+        draggable={true}
+        auto={true}
+      />
 
+      {weekendHotels && weekendHotels.length !== 0 && (
+        <S.WeekendCarouselContainer className="week-container">
+          <S.TitleSection>프리미엄 호캉스</S.TitleSection>
+          <S.SubTitle>퍼센특가로 만나는 4-5성급 호텔 모음 </S.SubTitle>
+
+          <WeekendCarousel
+            weekendHotels={weekendHotels}
+            onChangeLocale={setCurrentLocale}
+            height={343}
+            arrows={true}
+            infinite={false}
+            draggable={true}
+          />
+        </S.WeekendCarouselContainer>
+      )}
       <S.SaleCarouselContainer>
         <S.TextSlider>
-          <TextLocaleAnimator text={locale[currentLocale[1]]} />
           <span>지역</span>
           <PercentAnimator
             percent={currentLocale[2][0]?.salePercentage}
@@ -77,20 +111,6 @@ const Home = () => {
           onSetSequence={setCurrentLocale}
         />
       </S.SaleCarouselContainer>
-      {weekendHotels && weekendHotels.length !== 0 && (
-        <S.WeekendCarouselContainer className="week-container">
-          <S.TitleSection>주말 호캉스 추천</S.TitleSection>
-
-          <WeekendCarousel
-            weekendHotels={weekendHotels}
-            onChangeLocale={setCurrentLocale}
-            height={343}
-            arrows={true}
-            infinite={false}
-            draggable={true}
-          />
-        </S.WeekendCarouselContainer>
-      )}
     </S.Container>
   );
 };

src/pages/homePage/eventCarousel/EventCarousel.style.ts

@@ -0,0 +1,122 @@
+import { PiCaretLeftBold, PiCaretRightBold } from "react-icons/pi";
+import styled, { css } from "styled-components";
+
+export const Container = styled.div<{ $height: number }>`
+  position: relative;
+
+  min-height: ${(props) => `${props.$height}px`};
+  height: ${(props) => `${props.$height}px`};
+
+  overflow: hidden;
+  cursor: grab;
+
+  touch-action: pan-y;
+`;
+export const SliderContainer = styled.div`
+  display: flex;
+
+  width: 100%;
+  height: 100%;
+`;
+
+export const Title = styled.div`
+  position: absolute;
+  bottom: 28%;
+  left: 30px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  color: white;
+  font-size: 24px;
+  font-weight: 600;
+
+  > div:nth-child(3) {
+    font-size: 12px;
+    font-weight: 500;
+    text-decoration: underline;
+  }
+`;
+
+export const ImageWrapper = styled.div<{
+  $height: number;
+}>`
+  position: relative;
+  width: 100%;
+  min-height: ${(props) => `${props.$height}px`};
+  height: ${(props) => `${props.$height}px`};
+
+  flex: 0 0 auto;
+
+  img {
+    width: 100%;
+    height: ${(props) => `${props.$height}px`};
+    object-fit: cover;
+  }
+`;
+
+export const ButtonContainer = styled.div`
+  position: absolute;
+  top: 50%;
+  width: 100%;
+
+  display: flex;
+  justify-content: space-between;
+
+  transform: translateY(-50%);
+
+  pointer-events: none;
+`;
+
+export const Button = styled.button<{ $visible: boolean }>`
+  position: absolute;
+  top: 50%;
+  width: 28px;
+  height: 28px;
+
+  border-radius: 50%;
+  background-color: white;
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
+
+  opacity: ${(props) => (props.$visible ? 0.7 : 0)};
+
+  transform: translateY(-50%) scale(${(props) => (props.$visible ? 1 : 0)});
+  transition:
+    opacity 0.5s cubic-bezier(0.5, -0.75, 0.7, 2),
+    transform 0.6s cubic-bezier(0.5, -0.75, 0.7, 2);
+
+  pointer-events: ${(props) => (props.$visible ? "all" : "none")};
+  cursor: pointer;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  @media (max-width: 375px) {
+    opacity: ${(props) => (props.$visible ? 1 : 0)};
+  }
+`;
+
+export const LeftButton = styled(Button)`
+  left: 6px;
+`;
+
+export const RightButton = styled(Button)`
+  right: 6px;
+`;
+
+export const IconStyle = css`
+  width: 100%;
+  font-size: 1.1rem;
+  fill: rgba(0, 0, 0, 0.9);
+
+  transition: fill 0.5s ease;
+`;
+
+export const LeftIcon = styled(PiCaretLeftBold)`
+  ${IconStyle}
+`;
+
+export const RightIcon = styled(PiCaretRightBold)`
+  ${IconStyle}
+`;