Merge pull request #375 from SCBJ-7/revert-374-feature/#349-feat-main

Revert "Feature/#349 feat main"

public/mockServiceWorker.js

@@ -2,7 +2,7 @@
 /* tslint:disable */
 
 /**
- * Mock Service Worker (2.1.4).
+ * Mock Service Worker (2.1.5).
  * @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,5 @@
-import axios from "axios";
-
 import { BASE_URL, END_POINTS } from "@/constants/api";
+import axios from "axios";
 
 export const fetchSearchList = async (
   location: string | null,
@@ -37,6 +36,7 @@ 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,13 +19,10 @@ const Header = ({ text, handleBackClick }: HeaderProps) => {
   let title = "";
   let undo = true;
 
-  if (pathname.includes(PATH.MAIN_DETAIL)) {
-    const id = params.get("id");
-    undo = true;
-    if (id === "0") {
-      title = "봄 여행 숙소 추천";
-    } else if (id === "1") {
-      title = "성수기 숙소 예약 놓쳤다면?";
+  if (pathname.includes(PATH.WRITE_TRANSFER_PRICE)) {
+    const hotelName = params.get("hotelName");
+    if (hotelName) {
+      title = hotelName;
     }
   }
 
@@ -34,13 +31,6 @@ 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,6 +1,5 @@
 export const PATH = {
   ROOT: "/",
-  MAIN_DETAIL: "/main-detail",
   ALARM: "/alarm",
   SEARCHLIST: "/search",
   SEARCH_FILTER: "/search/filter",

src/hooks/common/useCarouselSize.ts

@@ -10,7 +10,6 @@ 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.greyScale7};
+  background-color: ${({ theme }) => theme.color.greyScale6};
 
   padding-top: 80px;
   padding-bottom: ${({ $weekLength }) => !$weekLength && "200px"};
@@ -21,10 +21,15 @@ export const Container = styled.section<{ $weekLength: undefined | number }>`
 `;
 
 export const SaleCarouselContainer = styled.div`
-  width: 100%;
+  width: calc(100% - 40px);
+  height: 434px;
+
   background-color: white;
-  margin-bottom: 70px;
-  margin-top: 10px;
+  margin-bottom: 32px;
+
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 4px 4px 10px 0 rgba(0, 0, 0, 0.1);
 `;
 
 export const TextSlider = styled.div`
@@ -47,20 +52,15 @@ export const TextSlider = styled.div`
 
 export const WeekendCarouselContainer = styled.div`
   width: 100%;
-  height: 520px;
+  height: 467px;
   margin: 0 20px;
   background-color: white;
-  padding-bottom: 100px;
+  margin-bottom: 60px;
 `;
 
 export const TitleSection = styled.div`
-  margin: 40px 20px 8px;
+  margin: 40px 20px 0;
+  height: 46px;
   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,39 +1,26 @@
+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,
@@ -42,14 +29,15 @@ 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],
   );
@@ -58,34 +46,12 @@ 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}
@@ -111,6 +77,20 @@ 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>
   );
 };