diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js index 7522cac6..a2745d12 100644 --- a/public/mockServiceWorker.js +++ b/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. diff --git a/src/apis/fetchMainItems.ts b/src/apis/fetchMainItems.ts index 20a7391b..d31313cd 100644 --- a/src/apis/fetchMainItems.ts +++ b/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]; }; diff --git a/src/apis/fetchSeachList.ts b/src/apis/fetchSeachList.ts index fe14148b..50273455 100644 --- a/src/apis/fetchSeachList.ts +++ b/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("호텔 검색에 실패했습니다"); diff --git a/src/assets/EventImages/firstMonth.png b/src/assets/EventImages/firstMonth.png deleted file mode 100644 index e35f961f..00000000 Binary files a/src/assets/EventImages/firstMonth.png and /dev/null differ diff --git a/src/assets/EventImages/secondMonth.png b/src/assets/EventImages/secondMonth.png deleted file mode 100644 index 8fdc1106..00000000 Binary files a/src/assets/EventImages/secondMonth.png and /dev/null differ diff --git a/src/assets/firstFestivalImages/First1.jpg b/src/assets/firstFestivalImages/First1.jpg deleted file mode 100644 index 7f8b2fd3..00000000 Binary files a/src/assets/firstFestivalImages/First1.jpg and /dev/null differ diff --git a/src/assets/firstFestivalImages/First10.jpg b/src/assets/firstFestivalImages/First10.jpg deleted file mode 100644 index 93daefeb..00000000 Binary files a/src/assets/firstFestivalImages/First10.jpg and /dev/null differ diff --git a/src/assets/firstFestivalImages/First11.jpg b/src/assets/firstFestivalImages/First11.jpg deleted file mode 100644 index 18daae13..00000000 Binary files a/src/assets/firstFestivalImages/First11.jpg and /dev/null differ diff --git a/src/assets/firstFestivalImages/First12.jpg b/src/assets/firstFestivalImages/First12.jpg deleted file mode 100644 index 25d63952..00000000 Binary files a/src/assets/firstFestivalImages/First12.jpg and /dev/null differ diff --git a/src/assets/firstFestivalImages/First13.jpg b/src/assets/firstFestivalImages/First13.jpg deleted file mode 100644 index bb39d60d..00000000 Binary files a/src/assets/firstFestivalImages/First13.jpg and /dev/null differ diff --git a/src/assets/firstFestivalImages/First14.jpg b/src/assets/firstFestivalImages/First14.jpg deleted file mode 100644 index 444a6058..00000000 Binary files a/src/assets/firstFestivalImages/First14.jpg and /dev/null differ diff --git a/src/assets/firstFestivalImages/First15.jpg b/src/assets/firstFestivalImages/First15.jpg deleted file mode 100644 index d5c58e63..00000000 Binary files a/src/assets/firstFestivalImages/First15.jpg and /dev/null differ diff --git a/src/assets/firstFestivalImages/First2.jpg b/src/assets/firstFestivalImages/First2.jpg deleted file mode 100644 index c3c5d50a..00000000 Binary files a/src/assets/firstFestivalImages/First2.jpg and /dev/null differ diff --git a/src/assets/firstFestivalImages/First3.jpg b/src/assets/firstFestivalImages/First3.jpg deleted file mode 100644 index 2767c245..00000000 Binary files a/src/assets/firstFestivalImages/First3.jpg and /dev/null differ diff --git a/src/assets/firstFestivalImages/First4.jpg b/src/assets/firstFestivalImages/First4.jpg deleted file mode 100644 index e6a41eaf..00000000 Binary files a/src/assets/firstFestivalImages/First4.jpg and /dev/null differ diff --git a/src/assets/firstFestivalImages/First5.jpg b/src/assets/firstFestivalImages/First5.jpg deleted file mode 100644 index a0901ff2..00000000 Binary files a/src/assets/firstFestivalImages/First5.jpg and /dev/null differ diff --git a/src/assets/firstFestivalImages/First6.jpg b/src/assets/firstFestivalImages/First6.jpg deleted file mode 100644 index c7ceca90..00000000 Binary files a/src/assets/firstFestivalImages/First6.jpg and /dev/null differ diff --git a/src/assets/firstFestivalImages/First7.jpg b/src/assets/firstFestivalImages/First7.jpg deleted file mode 100644 index dc0aa346..00000000 Binary files a/src/assets/firstFestivalImages/First7.jpg and /dev/null differ diff --git a/src/assets/firstFestivalImages/First8.jpg b/src/assets/firstFestivalImages/First8.jpg deleted file mode 100644 index ba8241c1..00000000 Binary files a/src/assets/firstFestivalImages/First8.jpg and /dev/null differ diff --git a/src/assets/firstFestivalImages/First9.jpg b/src/assets/firstFestivalImages/First9.jpg deleted file mode 100644 index 6fe7d70e..00000000 Binary files a/src/assets/firstFestivalImages/First9.jpg and /dev/null differ diff --git a/src/assets/secondFestivalImages/Second1.jpg b/src/assets/secondFestivalImages/Second1.jpg deleted file mode 100644 index 6c677b07..00000000 Binary files a/src/assets/secondFestivalImages/Second1.jpg and /dev/null differ diff --git a/src/assets/secondFestivalImages/Second10.jpg b/src/assets/secondFestivalImages/Second10.jpg deleted file mode 100644 index 531c86f6..00000000 Binary files a/src/assets/secondFestivalImages/Second10.jpg and /dev/null differ diff --git a/src/assets/secondFestivalImages/Second11.jpg b/src/assets/secondFestivalImages/Second11.jpg deleted file mode 100644 index 6d69e543..00000000 Binary files a/src/assets/secondFestivalImages/Second11.jpg and /dev/null differ diff --git a/src/assets/secondFestivalImages/Second12.jpg b/src/assets/secondFestivalImages/Second12.jpg deleted file mode 100644 index c92560c4..00000000 Binary files a/src/assets/secondFestivalImages/Second12.jpg and /dev/null differ diff --git a/src/assets/secondFestivalImages/Second13.jpg b/src/assets/secondFestivalImages/Second13.jpg deleted file mode 100644 index ce783ab2..00000000 Binary files a/src/assets/secondFestivalImages/Second13.jpg and /dev/null differ diff --git a/src/assets/secondFestivalImages/Second14.jpg b/src/assets/secondFestivalImages/Second14.jpg deleted file mode 100644 index a6ef22d4..00000000 Binary files a/src/assets/secondFestivalImages/Second14.jpg and /dev/null differ diff --git a/src/assets/secondFestivalImages/Second15.jpg b/src/assets/secondFestivalImages/Second15.jpg deleted file mode 100644 index a818a4ce..00000000 Binary files a/src/assets/secondFestivalImages/Second15.jpg and /dev/null differ diff --git a/src/assets/secondFestivalImages/Second2.jpg b/src/assets/secondFestivalImages/Second2.jpg deleted file mode 100644 index 4ee5fb7a..00000000 Binary files a/src/assets/secondFestivalImages/Second2.jpg and /dev/null differ diff --git a/src/assets/secondFestivalImages/Second3.jpg b/src/assets/secondFestivalImages/Second3.jpg deleted file mode 100644 index 78f9f2f9..00000000 Binary files a/src/assets/secondFestivalImages/Second3.jpg and /dev/null differ diff --git a/src/assets/secondFestivalImages/Second4.jpg b/src/assets/secondFestivalImages/Second4.jpg deleted file mode 100644 index 6cf00131..00000000 Binary files a/src/assets/secondFestivalImages/Second4.jpg and /dev/null differ diff --git a/src/assets/secondFestivalImages/Second5.jpg b/src/assets/secondFestivalImages/Second5.jpg deleted file mode 100644 index 128fd831..00000000 Binary files a/src/assets/secondFestivalImages/Second5.jpg and /dev/null differ diff --git a/src/assets/secondFestivalImages/Second6.jpg b/src/assets/secondFestivalImages/Second6.jpg deleted file mode 100644 index 99d09eda..00000000 Binary files a/src/assets/secondFestivalImages/Second6.jpg and /dev/null differ diff --git a/src/assets/secondFestivalImages/Second7.jpg b/src/assets/secondFestivalImages/Second7.jpg deleted file mode 100644 index 4dd81a46..00000000 Binary files a/src/assets/secondFestivalImages/Second7.jpg and /dev/null differ diff --git a/src/assets/secondFestivalImages/Second8.jpg b/src/assets/secondFestivalImages/Second8.jpg deleted file mode 100644 index 9208fe2a..00000000 Binary files a/src/assets/secondFestivalImages/Second8.jpg and /dev/null differ diff --git a/src/assets/secondFestivalImages/Second9.jpg b/src/assets/secondFestivalImages/Second9.jpg deleted file mode 100644 index 32c4888e..00000000 Binary files a/src/assets/secondFestivalImages/Second9.jpg and /dev/null differ diff --git a/src/components/carousel/Carousel.tsx b/src/components/carousel/Carousel.tsx index f06376c2..86826c3c 100644 --- a/src/components/carousel/Carousel.tsx +++ b/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 ( diff --git a/src/components/layout/header/HeaderTop.tsx b/src/components/layout/header/HeaderTop.tsx index 8227c6ed..ecef1c66 100644 --- a/src/components/layout/header/HeaderTop.tsx +++ b/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; diff --git a/src/constants/path.ts b/src/constants/path.ts index b8dc9a6c..7a57e59e 100644 --- a/src/constants/path.ts +++ b/src/constants/path.ts @@ -1,6 +1,5 @@ export const PATH = { ROOT: "/", - MAIN_DETAIL: "/main-detail", ALARM: "/alarm", SEARCHLIST: "/search", SEARCH_FILTER: "/search/filter", diff --git a/src/hooks/common/useCarouselSize.ts b/src/hooks/common/useCarouselSize.ts index 11eafaf6..e29f140d 100644 --- a/src/hooks/common/useCarouselSize.ts +++ b/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); }; diff --git a/src/pages/homePage/Home.style.ts b/src/pages/homePage/Home.style.ts index d53fe926..0846cd14 100644 --- a/src/pages/homePage/Home.style.ts +++ b/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; -`; diff --git a/src/pages/homePage/Home.tsx b/src/pages/homePage/Home.tsx index 4ca6b93f..4a1e174d 100644 --- a/src/pages/homePage/Home.tsx +++ b/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,7 +29,7 @@ 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]); @@ -50,6 +37,7 @@ const Home = () => { .fill("") .map((_, i) => i); + // 주말 특가 관련 데이터 const WeekendMapped: [number, WeekendItem][] | undefined = weekendProds?.map( (v, i) => [i, v], ); @@ -58,34 +46,12 @@ const Home = () => { return ( + - - {weekendHotels && weekendHotels.length !== 0 && ( - - 프리미엄 호캉스 - 퍼센특가로 만나는 4-5성급 호텔 모음 - - - - )} + 지역 { onSetSequence={setCurrentLocale} /> + {weekendHotels && weekendHotels.length !== 0 && ( + + 주말 호캉스 추천 + + + + )} ); }; diff --git a/src/pages/homePage/eventCarousel/EventCarousel.style.ts b/src/pages/homePage/eventCarousel/EventCarousel.style.ts deleted file mode 100644 index 7a85c926..00000000 --- a/src/pages/homePage/eventCarousel/EventCarousel.style.ts +++ /dev/null @@ -1,122 +0,0 @@ -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} -`; diff --git a/src/pages/homePage/eventCarousel/EventCarousel.tsx b/src/pages/homePage/eventCarousel/EventCarousel.tsx deleted file mode 100644 index 4759d920..00000000 --- a/src/pages/homePage/eventCarousel/EventCarousel.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import { useNavigate } from "react-router-dom"; - -import * as S from "./EventCarousel.style"; - -import { PATH } from "@/constants/path"; -import { useCarousel } from "@/hooks/common/useCarousel"; -import { useCarouselSize } from "@/hooks/common/useCarouselSize"; - -interface EventItem { - id: number; - image: string; - title1: string; - title2: string; -} -interface EventCarouselProps { - EventCarouselContents: EventItem[]; - arrows?: boolean; - height?: number; - infinite?: boolean; - innerShadow?: boolean; - draggable?: boolean; - auto?: boolean; -} -const EventCarousel: React.FC = ({ - EventCarouselContents, - arrows, - height, - infinite, - draggable, -}) => { - const navigate = useNavigate(); - const { slideWidth, sliderRef } = useCarouselSize(); - const slideList = infinite - ? [ - EventCarouselContents.at(-1), - ...EventCarouselContents, - EventCarouselContents.at(0), - ] - : EventCarouselContents; - const { - currentIndex, - getSliderStyle, - handleSliderNavigationClick, - handleSliderTransitionEnd, - handlerSliderMoueDown, - handleSliderTouchStart, - } = useCarousel({ - slideLength: slideList.length, - infinite, - slideWidth, - }); - const onClickHandler = (id: number) => { - navigate(`${PATH.MAIN_DETAIL}?id=${id}`); - }; - - return ( - <> - - - {slideList?.map((content, index) => ( - - onClickHandler(content?.id ?? 0)} - /> - -
{content?.title1}
-
{content?.title2}
-
바로 예약하러 가기
- - - ))} - - {arrows && ( - - 0} - > - - - - - - - )} - - - ); -}; - -EventCarousel.defaultProps = { - height: 300, - arrows: true, - infinite: true, - draggable: true, - innerShadow: false, - auto: false, -}; - -export default EventCarousel; diff --git a/src/pages/homePage/itemCarousel/ItemCarousel.tsx b/src/pages/homePage/itemCarousel/ItemCarousel.tsx index e8f527ed..385937ee 100644 --- a/src/pages/homePage/itemCarousel/ItemCarousel.tsx +++ b/src/pages/homePage/itemCarousel/ItemCarousel.tsx @@ -30,6 +30,7 @@ const ItemCarousel = ({ innerShadow = false, }: CarouselProps) => { const { slideWidth, sliderRef } = useCarouselSize(); + const { currentIndex, getSliderStyle, diff --git a/src/pages/homePage/mainHeader/MainHeader.style.ts b/src/pages/homePage/mainHeader/MainHeader.style.ts index 962625d7..627eecba 100644 --- a/src/pages/homePage/mainHeader/MainHeader.style.ts +++ b/src/pages/homePage/mainHeader/MainHeader.style.ts @@ -3,8 +3,6 @@ import { styled } from "styled-components"; export const HeaderContainer = styled.section` width: 100%; - max-width: 768px; - min-width: 360px; height: 56px; display: flex; @@ -14,11 +12,7 @@ export const HeaderContainer = styled.section` top: 0; z-index: 10; - background-color: ${({ theme }) => theme.color.greyScale7}; - - @media screen and(max-width: 768px) { - width: 100%; - } + background-color: ${({ theme }) => theme.color.greyScale6}; `; export const HeaderWrapper = styled.div` diff --git a/src/pages/homePage/mainHeader/MainHeader.tsx b/src/pages/homePage/mainHeader/MainHeader.tsx index 672b14a0..d5fd8d3c 100644 --- a/src/pages/homePage/mainHeader/MainHeader.tsx +++ b/src/pages/homePage/mainHeader/MainHeader.tsx @@ -1,12 +1,11 @@ +import { fetchHasAlarm } from "@/apis/fetchHasAlarm"; +import MainLogo from "@/assets/logos/main_logo.svg?react"; +import { PATH } from "@/constants/path"; import { useSuspenseQuery } from "@tanstack/react-query"; import { useNavigate } from "react-router-dom"; import * as S from "./MainHeader.style"; -import { fetchHasAlarm } from "@/apis/fetchHasAlarm"; -import MainLogo from "@/assets/logos/main_logo.svg?react"; -import { PATH } from "@/constants/path"; - const MainHeader = () => { const { data: hasAlarmData } = useSuspenseQuery({ queryKey: ["hasAlarm"], diff --git a/src/pages/homePage/weekendCarousel/WeekendCarousel.style.ts b/src/pages/homePage/weekendCarousel/WeekendCarousel.style.ts index 2532dee3..c5951681 100644 --- a/src/pages/homePage/weekendCarousel/WeekendCarousel.style.ts +++ b/src/pages/homePage/weekendCarousel/WeekendCarousel.style.ts @@ -14,7 +14,9 @@ export const CarouselContainer = styled.div<{ align-items: center; gap: 8px; + overflow: hidden; cursor: grab; + touch-action: pan-y; `; diff --git a/src/pages/homePage/weekendCarousel/weekendCarouselUnit/WeekendUnit.style.ts b/src/pages/homePage/weekendCarousel/weekendCarouselUnit/WeekendUnit.style.ts index fcf52b35..586e0359 100644 --- a/src/pages/homePage/weekendCarousel/weekendCarouselUnit/WeekendUnit.style.ts +++ b/src/pages/homePage/weekendCarousel/weekendCarouselUnit/WeekendUnit.style.ts @@ -1,9 +1,8 @@ import styled from "styled-components"; export const LocaleWrapper = styled.div` - position: relative; - margin-top: 30px; - height: 390px; + height: 343px; + background-color: ${({ theme }) => theme.color.greyScale7}; border-radius: 12px; @@ -13,7 +12,7 @@ export const LocaleWrapper = styled.div` & img { width: 100%; - height: 195px; + height: 169px; margin-bottom: 16px; object-fit: cover; } @@ -30,16 +29,19 @@ export const LocaleWrapper = styled.div` `; export const Stickers = styled.div` - width: 100%; - height: 14px; display: flex; gap: 4px; font-size: 12px; - font-weight: 700; + font-weight: 900; padding: 0 16px; margin-bottom: 16px; - color: ${({ theme }) => theme.color.percentOrange}; + & section { + padding: 5px 8px; + border: 1px solid ${({ theme }) => theme.color.percentOrange}; + border-radius: 4px; + color: ${({ theme }) => theme.color.percentOrange}; + } @media screen and (max-width: 500px) { margin-bottom: 8px; @@ -48,7 +50,7 @@ export const Stickers = styled.div` export const Titles = styled.div` padding: 0 16px; - margin-bottom: 8px; + margin-bottom: 16px; & h1 { ${({ theme }) => theme.typo.body1} @@ -63,32 +65,21 @@ export const Titles = styled.div` export const Price = styled.div` padding: 0 16px; h4 { - display: flex; - justify-content: space-between; - font-size: 12px; font-weight: 600; margin-bottom: 4px; - } - - h4 .original { color: ${({ theme }) => theme.color.greyScale3}; text-decoration: line-through; - margin-left: 0.2rem; } - h1 { - width: 100%; + section { display: flex; justify-content: space-between; - } - - section { + align-items: center; ${({ theme }) => theme.typo.body1} } - section .percentage { - ${({ theme }) => theme.typo.caption2} + section h1.percentage { color: ${({ theme }) => theme.color.percentBlue}; } @@ -102,68 +93,13 @@ export const Price = styled.div` `; export const Discounted = styled.div` + display: flex; gap: 8px; `; export const Period = styled.div` - display: flex; - justify-content: center; - align-items: center; - width: 97px; - height: 23px; - - white-space: nowrap; - ${({ theme }) => theme.typo.body3} + ${({ theme }) => theme.typo.body5} padding: 2px 8px; background-color: ${({ theme }) => theme.color.greyScale6}; - border-radius: 12px; - - @media screen and (max-width: 500px) { - width: 67px; - font-size: 10px; - font-weight: 700; - } -`; - -export const HotelRate = styled.div` - display: flex; - margin: 0 0 8px 16px; - ${({ theme }) => theme.typo.caption2} - > div { - padding-right: 0.1rem; - } -`; - -export const OriginalSection = styled.div` - width: 127px; - display: flex; - justify-content: space-between; -`; - -export const SalesSection = styled.div` - width: 127px; - display: flex; - justify-content: space-between; - align-items: flex-end; - font-size: 12px; - font-weight: 600; - height: 20px; - - > div:nth-child(2) { - font-size: 17px; /* 두 번째 div에 대해 다른 폰트 크기 적용 */ - } -`; - -export const HotelRateMark = styled.div` - display: flex; - justify-content: center; - align-items: center; - position: absolute; - width: 79px; - height: 24px; - font-size: 12px; - color: ${({ theme }) => theme.color.percentOrange}; - background-color: ${({ theme }) => theme.color.black}; - right: 0; - border-radius: 0 12px 0 12px; + border-radius: 4px; `; diff --git a/src/pages/homePage/weekendCarousel/weekendCarouselUnit/WeekendUnit.tsx b/src/pages/homePage/weekendCarousel/weekendCarouselUnit/WeekendUnit.tsx index 90cafa45..f72cc8a8 100644 --- a/src/pages/homePage/weekendCarousel/weekendCarouselUnit/WeekendUnit.tsx +++ b/src/pages/homePage/weekendCarousel/weekendCarouselUnit/WeekendUnit.tsx @@ -7,7 +7,6 @@ import { useNavigate } from "react-router-dom"; import * as S from "./WeekendUnit.style"; import ProgressiveImg from "@/components/progressiveImg/ProgressiveImg"; -import { StartImg } from "@/pages/searchPage/components/searchItem/SearchItem.style"; interface UnitProps { item: [number, WeekendItem]; @@ -24,59 +23,34 @@ const WeekendUnit = ({ item }: UnitProps) => { return ( - {item[1].reviewRate} - - - -
{item[1]?.hotelRate}
-
·
-
{item[1]?.reviewRate}
- - -

{item[1].hotelName}

-

{item[1].roomType}

- - {!item[1].isBrunchIncluded ? null : item[1].isPoolIncluded || - item[1].isOceanViewIncluded ? ( -
조식제공 ·
- ) : ( -
조식제공
+ {item[1].isBrunchIncluded && ( +
{item[1].isBrunchIncluded && "조식제공"}
+ )} + {item[1].isPoolIncluded && ( +
{item[1].isPoolIncluded && "수영장"}
)} - {!item[1].isPoolIncluded ? null : item[1].isOceanViewIncluded ? ( -
수영장 ·
- ) : ( -
수영장
+ {item[1].isOceanViewIncluded && ( +
{item[1].isOceanViewIncluded && "오션뷰"}
)} - {item[1].isOceanViewIncluded &&
오션뷰
} + +

{item[1].hotelName}

+

{item[1].roomType}

+ +

{priceFormat(item[1].originalPrice)}원

-

-
- -
정가
-
- - {Math.round(item[1].salePercentage * 100)}% - - - {priceFormat(item[1].originalPrice)}원 - -
- -

- -

- - {CHKIN} ~ {CHKOUT} - - -
거래가
-
{priceFormat(item[1].salePrice)}원
- -

+ +

{priceFormat(item[1].salePrice)} 원

+

+ {Math.round(item[1].salePercentage * 100)}% +

+ + + {CHKIN} ~ {CHKOUT} +
diff --git a/src/pages/mainDetailPage/MainDetail.style.ts b/src/pages/mainDetailPage/MainDetail.style.ts deleted file mode 100644 index a8ea6db2..00000000 --- a/src/pages/mainDetailPage/MainDetail.style.ts +++ /dev/null @@ -1,90 +0,0 @@ -import styled from "styled-components"; -import TopButtonIcon from "@/assets/icons/ic_top_button.svg?react"; - -export const Container = styled.main` - background-color: ${({ theme }) => theme.color.greyScale7}; - padding-top: 56px; -`; - -export const SearchContainer = styled.div` - width: 100%; - height: 100%; - min-height: 50vh; - color: ${({ theme }) => theme.color.black}; - padding: 24px 0 130px 0; -`; - -export const SearchItemFlex = styled.div` - width: 100%; - display: flex; - flex-wrap: wrap; - gap: 1rem; - padding: 0 20px; -`; - -interface TopButtonProps { - $visible: boolean; -} -export const TopButtonCover = styled.div` - position: fixed; - width: 100%; - max-width: 768px; - bottom: 11%; - margin: 0 auto; - display: flex; - justify-content: flex-end; -`; - -export const TopButton = styled.div` - margin-right: 20px; - display: flex; - justify-content: center; - align-items: center; - - width: 36px; - height: 36px; - - background-color: ${({ theme }) => theme.color.white}; - border-radius: 50%; - border: 1px solid #e4e4e7; - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); - - transform: rotate(270deg); - - & > svg { - width: 28px; - height: 28px; - color: ${({ theme }) => theme.color.greyScale3}; - } - - &:hover { - background-color: #f4f4f5; - } - - visibility: hidden; - opacity: 0; - - &.visible { - visibility: visible; - opacity: 1; - } - - cursor: pointer; - - transition-property: background-color, visibility, opacity; - transition-duration: 0.125s; - transition-timing-function: ease; -`; - -export const NoResultCover = styled.div` - width: 100%; - text-align: center; -`; -export const NoResultText = styled.div` - margin-top: 184px; - ${({ theme }) => theme.typo.title4} -`; -export const NoResultTextTwo = styled.div` - ${({ theme }) => theme.typo.body3} - margin-top: 1rem; -`; diff --git a/src/pages/mainDetailPage/MainDetail.tsx b/src/pages/mainDetailPage/MainDetail.tsx deleted file mode 100644 index 8ebe9829..00000000 --- a/src/pages/mainDetailPage/MainDetail.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import { useInfiniteQuery } from "@tanstack/react-query"; -import { useEffect, useState } from "react"; - -import MainTheme from "./components/MainTheme/MainTheme"; -import RegionButton from "./components/RegionButton/RegionButton"; -import * as S from "./MainDetail.style"; - -import { fetchSearchList } from "@/apis/fetchSeachList"; -import ArrowIcon from "@/assets/icons/ic_arrow.svg?react"; -import { useIntersectionObserver } from "@/hooks/common/useIntersectionObserver"; -import SearchItem from "@/pages/searchPage/components/searchItem/SearchItem"; -import { ISearchList } from "@/types/searchList"; - -const MainDetail = () => { - const pageSize = 10; - const [selectedRegion, setSelectedRegion] = useState("전체"); - const [scrollPosition, setScrollPosition] = useState(0); - - const [isTopButtonVisible, setIsTopButtonVisible] = useState(false); - const searchInfo = { - brunch: null, - checkIn: null, - checkOut: null, - location: selectedRegion === "전체" ? null : selectedRegion, - oceanView: null, - pool: null, - quantityPeople: 0, - sorted: null, - }; - const { data, fetchNextPage, isLoading, hasNextPage } = useInfiniteQuery({ - queryKey: [ - "searchItems", - searchInfo.location, - searchInfo.checkIn, - searchInfo.checkOut, - searchInfo.quantityPeople, - searchInfo.sorted, - searchInfo.brunch, - searchInfo.pool, - searchInfo.oceanView, - ], - queryFn: ({ pageParam = 0 }) => - fetchSearchList( - searchInfo.location, - searchInfo.checkIn, - searchInfo.checkOut, - searchInfo.quantityPeople, - searchInfo.sorted, - searchInfo.brunch, - searchInfo.pool, - searchInfo.oceanView, - pageParam, - pageSize, - ), - refetchOnMount: false, - refetchOnWindowFocus: false, - initialPageParam: 0, - getNextPageParam: (lastPage) => { - const lastData = lastPage?.content; - return lastData && lastData.length === pageSize - ? lastPage?.number + 1 - : undefined; - }, - }); - - const handleIntersect = (isIntersecting: boolean) => { - if (isIntersecting && hasNextPage) { - fetchNextPage(); - } - }; - const { ref } = useIntersectionObserver({ - onChange: handleIntersect, - threshold: 0.5, - }); - - const handleScroll = () => { - const currentPosition = window.scrollY; - setScrollPosition(currentPosition); - setIsTopButtonVisible(currentPosition > 500); - }; - - useEffect(() => { - window.addEventListener("scroll", handleScroll); - return () => { - window.removeEventListener("scroll", handleScroll); - }; - }, [scrollPosition]); - - const MoveToTop = () => { - window.scroll({ - top: 0, - behavior: "smooth", - }); - }; - - return ( - - - - - - {!isLoading && data && !data?.pages?.[0]?.content?.length && ( - - 검색 조건에 맞는 호텔이 없어요 - - 다른 지역과 날짜로 변경해보세요 - - - )} - - {data && - data.pages?.length > 0 && - data.pages.map((page) => - page?.content.map((item: ISearchList) => ( - - )), - )} - -
- - - - - - - - ); -}; -export default MainDetail; diff --git a/src/pages/mainDetailPage/components/MainTheme/MainTheme.style.ts b/src/pages/mainDetailPage/components/MainTheme/MainTheme.style.ts deleted file mode 100644 index 7b66be6a..00000000 --- a/src/pages/mainDetailPage/components/MainTheme/MainTheme.style.ts +++ /dev/null @@ -1,13 +0,0 @@ -import styled from "styled-components"; - -export const Container = styled.div` - width: 100%; - height: 203px; - background-color: white; - padding: 24px 32px; -`; - -export const Title = styled.div` - ${({ theme }) => theme.typo.body2} - color: ${({ theme }) => theme.color.black}; -`; diff --git a/src/pages/mainDetailPage/components/MainTheme/MainTheme.tsx b/src/pages/mainDetailPage/components/MainTheme/MainTheme.tsx deleted file mode 100644 index 63d351e7..00000000 --- a/src/pages/mainDetailPage/components/MainTheme/MainTheme.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { useLocation } from "react-router-dom"; - -import * as S from "./MainTheme.style"; -import FestivalCarousel from "../festivalCarousel/FestivalCarousel"; - -import { FirstFestivals, SecondFestivals } from "@/types/FestivalsData"; - -const MainTheme = () => { - const { search } = useLocation(); - const params = new URLSearchParams(search); // - const id = params.get("id"); - - const festivals = id && id === "0" ? FirstFestivals : SecondFestivals; - const title = id && id === "0" ? "벚꽃 축제 모음" : "국내 놀거리 모음"; - - return ( - - {title} - - - ); -}; - -export default MainTheme; diff --git a/src/pages/mainDetailPage/components/RegionButton/RegionButton.style.ts b/src/pages/mainDetailPage/components/RegionButton/RegionButton.style.ts deleted file mode 100644 index f9f09161..00000000 --- a/src/pages/mainDetailPage/components/RegionButton/RegionButton.style.ts +++ /dev/null @@ -1,32 +0,0 @@ -import styled from "styled-components"; - -export const ItemSection = styled.section` - width: 100%; - height: 122px; - margin-top: 0.5rem; - cursor: pointer; -`; - -export const ItemRow = styled.div` - display: flex; - justify-content: center; - align-items: center; - text-align: center; - width: 100%; - height: 40px; - ${({ theme }) => theme.typo.button7}; - background-color: white; -`; - -export const Item = styled.div` - display: flex; - justify-content: center; - align-items: center; - width: 33.33%; - height: 40px; - border: ${({ theme }) => theme.border.strokeThin}; - &.active { - color: ${({ theme }) => theme.color.percentOrange}; - font-weight: 700; - } -`; diff --git a/src/pages/mainDetailPage/components/RegionButton/RegionButton.tsx b/src/pages/mainDetailPage/components/RegionButton/RegionButton.tsx deleted file mode 100644 index 2d26bcd1..00000000 --- a/src/pages/mainDetailPage/components/RegionButton/RegionButton.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import * as S from "./RegionButton.style"; - -interface RegionButtonProps { - selectedRegion: string; - setSelectedRegion: React.Dispatch>; -} - -const RegionButton = ({ - selectedRegion, - setSelectedRegion, -}: RegionButtonProps) => { - const regionList: string[] = [ - "전체", - "서울", - "부산", - "제주", - "경기", - "강원", - "경상", - "전라", - "충청", - ]; - - const registerRegion = (region: string): void => { - if (region) { - setSelectedRegion(region); - } - console.log(region); - }; - - return ( - <> - - - {regionList.slice(0, 3).map((region, index) => ( - registerRegion(region)} - key={index} - className={selectedRegion === region ? "active" : ""} - > - {region} - - ))} - - - {regionList.slice(3, 6).map((region, index) => ( - registerRegion(region)} - key={index} - className={selectedRegion === region ? "active" : ""} - > - {region} - - ))} - - - {regionList.slice(6).map((region, index) => ( - registerRegion(region)} - key={index} - className={selectedRegion === region ? "active" : ""} - > - {region} - - ))} - - - - ); -}; - -export default RegionButton; diff --git a/src/pages/mainDetailPage/components/festivalCarousel/FestivalCarousel.style.ts b/src/pages/mainDetailPage/components/festivalCarousel/FestivalCarousel.style.ts deleted file mode 100644 index ad59081d..00000000 --- a/src/pages/mainDetailPage/components/festivalCarousel/FestivalCarousel.style.ts +++ /dev/null @@ -1,164 +0,0 @@ -import { PiCaretLeftBold, PiCaretRightBold } from "react-icons/pi"; -import styled, { css } from "styled-components"; - -export const Container = styled.div<{ $height: number }>` - position: relative; - - width: 100%; - min-height: ${(props) => `${props.$height}px`}; - height: ${(props) => `${props.$height}px`}; - background-color: white; - display: flex; - align-items: center; - margin-top: 16px; - overflow: hidden; - cursor: grab; - - touch-action: pan-y; -`; - -export const SliderWrapper = styled.div` - width: 100%; - overflow: hidden; -`; - -export const SliderContainer = styled.div` - display: flex; - height: 100%; -`; - -export const ImageShadowWrapper = styled.div` - position: absolute; - top: 0; - width: 100%; - height: 90px; - z-index: 2; - background-image: linear-gradient(rgba(39, 50, 60, 0.5), rgba(39, 50, 60, 0)); -`; - -export const ItemWrapper = styled.div<{ - $height: number; -}>` - display: flex; - justify-content: center; - position: relative; - min-width: 351px; - min-height: ${(props) => `${props.$height}px`}; - height: ${(props) => `${props.$height}px`}; -`; - -export const Item = styled.div` - display: flex; - gap: 16px; - align-items: center; - padding: 0 20px; - border-radius: 12px; - border: 1px solid ${({ theme }) => theme.color.greyScale5}; - img { - width: 76px; - height: 88px; - object-fit: cover; - } - cursor: pointer; -`; - -export const ItemContent = styled.div` - width: 180px; - display: flex; - flex-direction: column; - padding: 14px 0; - gap: 8px; - height: 88px; - text-overflow: ellipsis; - white-space: nowrap; -`; - -export const Name = styled.div` - overflow: hidden; - text-overflow: ellipsis; - - ${({ theme }) => theme.typo.button4}; -`; -export const Period = styled.div` - text-overflow: ellipsis; - - font-size: 12px; - color: ${({ theme }) => theme.color.greyScale1}; - - span { - color: ${({ theme }) => theme.color.greyScale3}; - } -`; - -export const Place = styled.div` - font-size: 12px; - span { - color: ${({ theme }) => theme.color.greyScale3}; - } - text-overflow: ellipsis; -`; - -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: 16px; -`; - -export const RightButton = styled(Button)` - right: 16px; -`; - -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} -`; diff --git a/src/pages/mainDetailPage/components/festivalCarousel/FestivalCarousel.tsx b/src/pages/mainDetailPage/components/festivalCarousel/FestivalCarousel.tsx deleted file mode 100644 index 6c803611..00000000 --- a/src/pages/mainDetailPage/components/festivalCarousel/FestivalCarousel.tsx +++ /dev/null @@ -1,100 +0,0 @@ -import * as S from "./FestivalCarousel.style"; - -import { useAnimateCarousel } from "@/hooks/common/useAnimateCarousel"; -import { useCarouselSize } from "@/hooks/common/useCarouselSize"; -import { FestivalData } from "@/types/FestivalsData"; // FestivalData 인터페이스를 가져옵니다. - -interface CarouselProps { - festivals: FestivalData[]; - height?: number; - arrows?: boolean; - infinite?: boolean; - draggable?: boolean; - innerShadow?: boolean; -} - -const FestivalCarousel = ({ - festivals, - height = 300, - arrows = true, - infinite = false, - draggable = false, - innerShadow = false, -}: CarouselProps) => { - const { sliderRef } = useCarouselSize(); - const { - currentIndex, - getSliderStyle, - handleSliderNavigationClick, - handleSliderTransitionEnd, - handlerSliderMoueDown, - handleSliderTouchStart, - setIsPlay, - } = useAnimateCarousel({ - slideLength: festivals.length, - infinite, - slideWidth: 351, - }); - - const handleItemClick = (url: string | undefined) => { - window.open(url, "_blank"); - }; - - return ( - e.preventDefault()} - onMouseEnter={() => setIsPlay(false)} - onMouseLeave={() => setIsPlay(true)} - > - - - {innerShadow && } - {festivals.map((festival, i) => ( - - handleItemClick(festival?.link)}> - - - {festival?.name} - - 기간   {festival?.startDate} ~ - {festival?.endDate} - - - 장소   {festival?.location} - - - - - ))} - - {arrows && ( - <> - 0} - > - - - - - - - )} - - - ); -}; - -export default FestivalCarousel; diff --git a/src/pages/roomDetailPage/RoomDetail.tsx b/src/pages/roomDetailPage/RoomDetail.tsx index 10c18fb3..6c327d32 100644 --- a/src/pages/roomDetailPage/RoomDetail.tsx +++ b/src/pages/roomDetailPage/RoomDetail.tsx @@ -21,6 +21,7 @@ const RoomDetail = () => { const { data } = useRoomQuery(productId, isLoggedIn); const { rawData, discountRate } = data; + const { handleToast } = useToastConfig(); useEffect(() => { diff --git a/src/pages/searchFilterPage/SearchFilter.style.ts b/src/pages/searchFilterPage/SearchFilter.style.ts index cbe10f43..eabeea1f 100644 --- a/src/pages/searchFilterPage/SearchFilter.style.ts +++ b/src/pages/searchFilterPage/SearchFilter.style.ts @@ -1,11 +1,10 @@ -import styled from "styled-components"; - import ResetIcon from "@/assets/icons/ic_reset.svg?react"; +import styled from "styled-components"; export const FilterContainer = styled.div` width: 100%; - height: 100vh; + height: 100%; background-color: white; padding: 5rem 20px 0 20px; color: ${({ theme }) => theme.color.black}; diff --git a/src/pages/searchFilterPage/SearchFilter.tsx b/src/pages/searchFilterPage/SearchFilter.tsx index cbba440f..4d8697b4 100644 --- a/src/pages/searchFilterPage/SearchFilter.tsx +++ b/src/pages/searchFilterPage/SearchFilter.tsx @@ -1,3 +1,6 @@ +import { PATH } from "@/constants/path"; +import { useSearchFilterInfoStore } from "@/store/store"; +import { formatDateMonthAndDay } from "@/utils/dateFomaterMonthDay"; import { useState } from "react"; import { useNavigate } from "react-router-dom"; @@ -6,10 +9,6 @@ import PeopleCounter from "./components/peopleCounter/PeopleCounter"; import RegionModal from "./components/regionModal/RegionModal"; import * as S from "./SearchFilter.style"; -import { PATH } from "@/constants/path"; -import { useSearchFilterInfoStore } from "@/store/store"; -import { formatDateMonthAndDay } from "@/utils/dateFomaterMonthDay"; - const SearchFilter = () => { const searchInfo = useSearchFilterInfoStore((state) => state.searchInfo); const setSearchInfo = useSearchFilterInfoStore( diff --git a/src/pages/searchPage/Search.style.ts b/src/pages/searchPage/Search.style.ts index 1ed20154..ba56e6af 100644 --- a/src/pages/searchPage/Search.style.ts +++ b/src/pages/searchPage/Search.style.ts @@ -29,7 +29,6 @@ export const TopButtonCover = styled.div` display: flex; justify-content: flex-end; `; - export const TopButton = styled.div` margin-right: 20px; display: flex; diff --git a/src/pages/searchPage/Search.tsx b/src/pages/searchPage/Search.tsx index b51f25ed..8d6ae8e8 100644 --- a/src/pages/searchPage/Search.tsx +++ b/src/pages/searchPage/Search.tsx @@ -1,4 +1,5 @@ import { useInfiniteQuery } from "@tanstack/react-query"; +import { throttle } from "lodash-es"; import { useEffect, useState } from "react"; import SearchBar from "./components/searchBar/SearchBar"; @@ -65,10 +66,10 @@ const Search = () => { threshold: 0.5, }); - const handleScroll = () => { + const handleScroll = throttle(() => { const currentPosition = window.scrollY; setIsTopButtonVisible(currentPosition > 500); - }; + }, 100); useEffect(() => { window.addEventListener("scroll", handleScroll); diff --git a/src/pages/searchPage/components/filterModal/FilterModal.style.ts b/src/pages/searchPage/components/filterModal/FilterModal.style.ts index cc947a46..22f219b7 100644 --- a/src/pages/searchPage/components/filterModal/FilterModal.style.ts +++ b/src/pages/searchPage/components/filterModal/FilterModal.style.ts @@ -1,8 +1,7 @@ -import { motion } from "framer-motion"; -import styled from "styled-components"; - import CloseButton from "@/assets/icons/ic_close-button.svg?react"; import WarningIcon from "@/assets/icons/ic_warning.svg?react"; +import { motion } from "framer-motion"; +import styled from "styled-components"; export const ModalContainer = styled.div` display: flex; @@ -58,9 +57,6 @@ export const ModalFitlerName = styled.div` > span { display: inline-block; margin-right: 0.25rem; - &.active { - ${({ theme }) => theme.typo.button4} - } } &:hover { diff --git a/src/pages/searchPage/components/filterModal/FilterModal.tsx b/src/pages/searchPage/components/filterModal/FilterModal.tsx index c8dc891c..0b96faaf 100644 --- a/src/pages/searchPage/components/filterModal/FilterModal.tsx +++ b/src/pages/searchPage/components/filterModal/FilterModal.tsx @@ -1,10 +1,9 @@ +import { useSearchFilterInfoStore } from "@/store/store"; import { AnimatePresence } from "framer-motion"; import { forwardRef } from "react"; import * as S from "./FilterModal.style"; -import { useSearchFilterInfoStore } from "@/store/store"; - interface FilterModalProps { setIsModalOpen: React.Dispatch>; setIsModalTwoOpen: React.Dispatch>; @@ -55,7 +54,7 @@ const FilterModal = forwardRef( visible: { y: 0, opacity: 1, transition: { duration: 0.5 } }, exit: { y: "100vh", opacity: 0, transition: { duration: 0.2 } }, }; - console.log("searchinfosort", searchInfo.sorted); + return ( @@ -81,11 +80,7 @@ const FilterModal = forwardRef( > {id === 1 ? ( <> - - {name} - {" "} + {name}{" "} theme.color.black}; position: relative; + @media screen and (min-width: 568px) { + width: calc(50% - 8px); + } background-color: white; cursor: pointer; border-radius: 12px; @@ -15,10 +18,6 @@ export const ItemContainer = styled.div` object-fit: cover; border-radius: 12px 12px 0 0; } - - @media screen and (min-width: 568px) { - width: calc(50% - 8px); - } `; export const ItemContent = styled.div` diff --git a/src/pages/searchPage/components/searchItem/SearchItem.tsx b/src/pages/searchPage/components/searchItem/SearchItem.tsx index 4c846ec2..ef5ed5f0 100644 --- a/src/pages/searchPage/components/searchItem/SearchItem.tsx +++ b/src/pages/searchPage/components/searchItem/SearchItem.tsx @@ -9,25 +9,23 @@ import { ISearchList } from "@/types/searchList"; const SearchItem = ({ item }: { item: ISearchList }) => { const navigate = useNavigate(); - const calculatePercentage = (salePrice: number) => { const percentage = salePrice * 100; + const roundedPercentage = Math.round(percentage); return roundedPercentage; }; - const formatDateString = (dateString: string) => { const dateObject = parseISO(dateString); + const formattedDate = format(dateObject, "MM.dd"); return formattedDate; }; - const handleClickItem = () => { navigate(PATH.DETAIL_ROOM(item.id)); }; - return ( <> @@ -35,7 +33,9 @@ const SearchItem = ({ item }: { item: ISearchList }) => { - +
+ +
{item.reviewRate}
·
{item.hotelRate}
diff --git a/src/routes/lazy.ts b/src/routes/lazy.ts index 7d25a7a8..78ed8b78 100644 --- a/src/routes/lazy.ts +++ b/src/routes/lazy.ts @@ -62,8 +62,5 @@ export const SuccessPage = lazy( export const VerificationPage = lazy( () => import("@/pages/connectYanoljaPage/verificationPage/VerificationPage"), ); -export const MainDetail = lazy( - () => import("@/pages/mainDetailPage/MainDetail"), -); export const WishList = lazy(() => import("@/pages/wishListPage/WishList")); diff --git a/src/routes/router.tsx b/src/routes/router.tsx index 08859172..5fecf542 100644 --- a/src/routes/router.tsx +++ b/src/routes/router.tsx @@ -23,19 +23,6 @@ const AppRouter = () => { ), children: [ - { - path: "", - element: ( - - - - }> - - - - - ), - }, { path: "", element: ( @@ -363,19 +350,6 @@ const AppRouter = () => { }, ], }, - { - path: PATH.MAIN_DETAIL, - element: ( - - - - }> - - - - - ), - }, { path: PATH.WISHLIST, element: ( diff --git a/src/types/FestivalsData.ts b/src/types/FestivalsData.ts deleted file mode 100644 index 016bbdc7..00000000 --- a/src/types/FestivalsData.ts +++ /dev/null @@ -1,286 +0,0 @@ -import First1 from "@/assets/firstFestivalImages/First1.jpg"; -import First10 from "@/assets/firstFestivalImages/First10.jpg"; -import First11 from "@/assets/firstFestivalImages/First11.jpg"; -import First12 from "@/assets/firstFestivalImages/First12.jpg"; -import First13 from "@/assets/firstFestivalImages/First13.jpg"; -import First14 from "@/assets/firstFestivalImages/First14.jpg"; -import First15 from "@/assets/firstFestivalImages/First15.jpg"; -import First2 from "@/assets/firstFestivalImages/First2.jpg"; -import First3 from "@/assets/firstFestivalImages/First3.jpg"; -import First4 from "@/assets/firstFestivalImages/First4.jpg"; -import First5 from "@/assets/firstFestivalImages/First5.jpg"; -import First6 from "@/assets/firstFestivalImages/First6.jpg"; -import First7 from "@/assets/firstFestivalImages/First7.jpg"; -import First8 from "@/assets/firstFestivalImages/First8.jpg"; -import First9 from "@/assets/firstFestivalImages/First9.jpg"; -import Second1 from "@/assets/secondFestivalImages/Second1.jpg"; -import Second10 from "@/assets/secondFestivalImages/Second10.jpg"; -import Second11 from "@/assets/secondFestivalImages/Second11.jpg"; -import Second12 from "@/assets/secondFestivalImages/Second12.jpg"; -import Second13 from "@/assets/secondFestivalImages/Second13.jpg"; -import Second14 from "@/assets/secondFestivalImages/Second14.jpg"; -import Second15 from "@/assets/secondFestivalImages/Second15.jpg"; -import Second2 from "@/assets/secondFestivalImages/Second2.jpg"; -import Second3 from "@/assets/secondFestivalImages/Second3.jpg"; -import Second4 from "@/assets/secondFestivalImages/Second4.jpg"; -import Second5 from "@/assets/secondFestivalImages/Second5.jpg"; -import Second6 from "@/assets/secondFestivalImages/Second6.jpg"; -import Second7 from "@/assets/secondFestivalImages/Second7.jpg"; -import Second8 from "@/assets/secondFestivalImages/Second8.jpg"; -import Second9 from "@/assets/secondFestivalImages/Second9.jpg"; - -export interface FestivalData { - name?: string; - startDate?: string; - te?: string; - location?: string; - link?: string; - image?: string; - endDate?: string; -} - -export const FirstFestivals = [ - { - name: "BLOSSOM TOWER", - startDate: "2024.03.22", - endDate: "2024.04.14. (일)", - location: "서울", - link: "https://korean.visitkorea.or.kr/kfes/detail/fstvlDetail.do;jsessionid=D162DEFE52EF47FFD3CB91FE7A025673.instance2?cmsCntntsId=2814415&Flag=Y", - image: First1, - }, - { - name: "호수벚꽃축제", - startDate: "2024.03.27", - endDate: "2024.03.31. (일)", - location: "서울", - link: "https://korean.visitkorea.or.kr/kfes/detail/fstvlDetail.do?cmsCntntsId=1592898", - image: First2, - }, - { - name: "경주 대릉원돌담길 벚꽃축제", - startDate: "2024.04.06", - endDate: "2024.04.07. (일)", - location: "경상", - link: "https://korean.visitkorea.or.kr/kfes/detail/fstvlDetail.do?cmsCntntsId=2485128", - image: First3, - }, - { - name: "진해군항제", - startDate: "2024.03.23", - endDate: "2024.04.01. (월)", - location: "경상", - link: "https://www.changwon.go.kr/cwportal/depart/11063/11090/12962.web", - image: First4, - }, - { - name: "인천대공원 범시민 벚꽃축제", - startDate: "2024.04.13", - endDate: "2024.04.21. (일)", - location: "경기", - link: "https://korean.visitkorea.or.kr/kfes/detail/fstvlDetail.do?cmsCntntsId=527212", - image: First5, - }, - { - name: "개암동 벚꽃축제", - startDate: "2024.03.30", - endDate: "2024.03.31. (일)", - location: "전라", - link: "https://korean.visitkorea.or.kr/kfes/detail/fstvlDetail.do?cmsCntntsId=2588930", - image: First6, - }, - { - name: "고창 벚꽃축제", - startDate: "2024.03.29", - endDate: "2024.03.31. (일)", - location: "전라", - link: "https://korean.visitkorea.or.kr/kfes/detail/fstvlDetail.do?cmsCntntsId=2952761", - image: First7, - }, - { - name: "제주 한림공원 왕벚꽃축제", - startDate: "2023.03.24", - endDate: "2023.04.08. (토)", - location: "제주", - link: "https://www.visitjeju.net/kr/detail/view?contentsid=CNTS_200000000015367&menuId=DOM_000001718007000000", - image: First8, - }, - { - name: "전농로 왕벚꽃 축제", - startDate: "2024.03.22", - endDate: "2024.03.24. (일)", - location: "제주", - link: "https://www.jejusi.go.kr/vill/samdo1.do", - image: First9, - }, - { - name: "렛츠런파크 서울 벚꽃축제 '벚꽃야경'", - startDate: "2024.03.29", - endDate: "2024.04.21. (일)", - location: "경기", - link: "https://korean.visitkorea.or.kr/kfes/detail/fstvlDetail.do?cmsCntntsId=525883", - image: First10, - }, - { - name: "에덴벚꽃길 벚꽃축제", - startDate: "2024.04.06", - endDate: "2024.04.14. (일)", - location: "경기", - link: "https://korean.visitkorea.or.kr/kfes/detail/fstvlDetail.do?cmsCntntsId=2484272", - image: First11, - }, - { - name: "남이섬 벗(友)꽃놀자", - startDate: "2024.04.06", - endDate: "2024.04.21. (일)", - location: "강원", - link: "https://korean.visitkorea.or.kr/kfes/detail/fstvlDetail.do?cmsCntntsId=2593221", - image: First12, - }, - { - name: "강릉 경포벚꽃잔치", - startDate: "2023.03.31", - endDate: "2023.04.05. (수)", - location: "강원", - link: "https://www.gn.go.kr/tour/index.do#popup", - image: First13, - }, - { - name: "금산 보곡산골 산벚꽃 축제", - startDate: "2024.04.13", - endDate: "2024.04.21. (일)", - location: "충청", - link: "https://korean.visitkorea.or.kr/kfes/detail/fstvlDetail.do?cmsCntntsId=2950952", - image: First14, - }, - { - name: "보은 벚꽃길 축제", - startDate: "2024.03.29", - endDate: "2024.03.31. (일)", - location: "충청", - link: "https://korean.visitkorea.or.kr/kfes/detail/fstvlDetail.do?cmsCntntsId=3109655", - image: First15, - }, -]; - -export const SecondFestivals = [ - { - name: "정동야행", - startDate: "2024.05.24", - endDate: "2024.05.25. (토)", - location: "서울", - link: "https://korean.visitkorea.or.kr/kfes/detail/fstvlDetail.do?cmsCntntsId=2005233", - image: Second1, - }, - { - name: "서울서커스페스티벌", - startDate: "2024.05.04", - endDate: "2024.05.05. (일)", - location: "서울", - link: "https://korean.visitkorea.or.kr/detail/fes_detail.do?cotid=cdb6d0ed-d6dc-47fe-9f78-a34d1a958377", - image: Second2, - }, - { - name: "세계오르골페스티벌 & 유럽동화나라축제", - startDate: "2024.03.01", - endDate: "2024.05.31. (금)", - location: "경기", - link: "https://korean.visitkorea.or.kr/kfes/detail/fstvlDetail.do?cmsCntntsId=3108083", - image: Second3, - }, - { - name: "퍼스트가든 봄꽃축제 - 블루밍가든", - startDate: "2024.04.01", - endDate: "2024.05.31. (금)", - location: "경기", - link: "https://firstgarden.co.kr/firstgarden/", - image: Second4, - }, - { - name: "춘천마임축제", - startDate: "2024.05.26", - endDate: "2024.06.02. (일)", - location: "강원", - link: "https://korean.visitkorea.or.kr/kfes/detail/fstvlDetail.do?cmsCntntsId=506942", - image: Second5, - }, - { - name: "오크밸리 3D 라이팅쇼 '소나타오브라이트'", - startDate: "2022.01.01", - endDate: "2024.12.31. (화)", - location: "강원", - link: "https://oakvalley.co.kr/oak_new/star6.asp", - image: Second6, - }, - { - name: "포항국제불빛축제", - startDate: "2024.05.31", - endDate: "2024.06.02. (일)", - location: "경상", - link: "https://korean.visitkorea.or.kr/kfes/detail/fstvlDetail.do?cmsCntntsId=588175", - image: Second7, - }, - { - name: "밀양 아리랑대축제", - startDate: "2024.05.23", - endDate: "2024.05.26. (일)", - location: "경상", - link: "https://korean.visitkorea.or.kr/kfes/detail/fstvlDetail.do?cmsCntntsId=715421", - image: Second8, - }, - { - name: "광안리어방축제", - startDate: "2024.05.10", - endDate: "2024.05.12. (일)", - location: "부산", - link: "https://korean.visitkorea.or.kr/kfes/detail/fstvlDetail.do?cmsCntntsId=506545", - image: Second9, - }, - { - name: "고창청보리밭 축제", - startDate: "2024.04.20", - endDate: "2024.05.12. (일)", - location: "전라", - link: "https://www.gochang.go.kr/tour_old/index.gochang?menuCd=DOM_000000403005001000", - image: Second10, - }, - { - name: "보성다향대축제", - startDate: "2024.05.03", - endDate: "2024.05.07. (화)", - location: "전라", - link: "https://korean.visitkorea.or.kr/kfes/detail/fstvlDetail.do?cmsCntntsId=553299", - image: Second11, - }, - { - name: "웨이뷰 유채꽃 축제", - startDate: "2024.03.15", - endDate: "2024.05.31. (금)", - location: "제주", - link: "https://korean.visitkorea.or.kr/kfes/detail/fstvlDetail.do?fstvlCntntsId=3190e5fc-41c6-4887-b6be-311f30e64a23&cntntsNm=%EC%9B%A8%EC%9D%B4%EB%B7%B0%EC%9C%A0%EC%B1%84%EA%BD%83%EC%B6%95%EC%A0%9C", - image: Second12, - }, - { - name: "여름꽃 & 능소화축제", - startDate: "2024.05.15", - endDate: "2024.07.20. (토)", - location: "제주", - link: "https://korean.visitkorea.or.kr/kfes/detail/fstvlDetail.do?cmsCntntsId=2823399", - image: Second13, - }, - { - name: "음성품바축제", - startDate: "2024.05.22", - endDate: "2024.05.26. (일)", - location: "충청", - link: "https://korean.visitkorea.or.kr/kfes/detail/fstvlDetail.do?cmsCntntsId=141731", - image: Second14, - }, - { - name: "억만송이 봄꽃대향연 튤립 수선화 축제", - startDate: "2024.03.22", - endDate: "2024.05.26. (일)", - location: "충청", - link: "https://korean.visitkorea.or.kr/kfes/detail/fstvlDetail.do?cmsCntntsId=2810416", - image: Second15, - }, -]; diff --git a/src/types/saleSection.ts b/src/types/saleSection.ts index 44f04e64..03192e64 100644 --- a/src/types/saleSection.ts +++ b/src/types/saleSection.ts @@ -10,9 +10,6 @@ export interface LocaleItem { salePercentage: number; checkInDate: string; checkOutDate: string; - hotelRate: string; - roomThemeCount: number; - reviewRate: string; } export interface LocaleItemsType { diff --git a/src/types/searchList.ts b/src/types/searchList.ts index 2ed6112e..ab2a4fcf 100644 --- a/src/types/searchList.ts +++ b/src/types/searchList.ts @@ -10,5 +10,5 @@ export interface ISearchList { checkIn: string; checkOut: string; hotelRate: number; - reviewRate: string; + reviewRate: number; }