Skip to content

Commit

Permalink
Merge pull request #381 from SCBJ-7/revert-375-revert-374-feature/#349-…
Browse files Browse the repository at this point in the history
…feat-main

Revert "Revert "Feature/#349 feat main""
  • Loading branch information
chaeminseok authored Jul 11, 2024
2 parents 255e869 + faf202f commit f663586
Show file tree
Hide file tree
Showing 71 changed files with 1,442 additions and 116 deletions.
2 changes: 1 addition & 1 deletion public/mockServiceWorker.js
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion src/apis/fetchMainItems.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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];
};
4 changes: 2 additions & 2 deletions src/apis/fetchSeachList.ts
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -36,7 +37,6 @@ export const fetchSearchList = async (
},
},
);
console.log("response data", response);
return response.data.data;
} catch (error) {
throw new Error("호텔 검색에 실패했습니다");
Expand Down
Binary file added src/assets/EventImages/firstMonth.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/EventImages/secondMonth.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/firstFestivalImages/First1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/firstFestivalImages/First10.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/firstFestivalImages/First11.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/firstFestivalImages/First12.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/firstFestivalImages/First13.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/firstFestivalImages/First14.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/firstFestivalImages/First15.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/firstFestivalImages/First2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/firstFestivalImages/First3.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/firstFestivalImages/First4.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/firstFestivalImages/First5.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/firstFestivalImages/First6.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/firstFestivalImages/First7.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/firstFestivalImages/First8.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/firstFestivalImages/First9.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/secondFestivalImages/Second1.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/secondFestivalImages/Second10.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/secondFestivalImages/Second11.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/secondFestivalImages/Second12.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/secondFestivalImages/Second13.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/secondFestivalImages/Second14.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/secondFestivalImages/Second15.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/secondFestivalImages/Second2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/secondFestivalImages/Second3.jpg
Binary file added src/assets/secondFestivalImages/Second4.jpg
Binary file added src/assets/secondFestivalImages/Second5.jpg
Binary file added src/assets/secondFestivalImages/Second6.jpg
Binary file added src/assets/secondFestivalImages/Second7.jpg
Binary file added src/assets/secondFestivalImages/Second8.jpg
Binary file added src/assets/secondFestivalImages/Second9.jpg
4 changes: 2 additions & 2 deletions src/components/carousel/Carousel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -39,7 +39,7 @@ const Carousel = ({
infinite,
slideWidth,
});

console.log("currentIndex", currentIndex);
return (
<S.CarouselContainer $height={height}>
<S.SliderWrapper>
Expand Down
18 changes: 14 additions & 4 deletions src/components/layout/header/HeaderTop.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = "성수기 숙소 예약 놓쳤다면?";
}
}

Expand All @@ -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;
Expand Down
1 change: 1 addition & 0 deletions src/constants/path.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
export const PATH = {
ROOT: "/",
MAIN_DETAIL: "/main-detail",
ALARM: "/alarm",
SEARCHLIST: "/search",
SEARCH_FILTER: "/search/filter",
Expand Down
1 change: 1 addition & 0 deletions src/hooks/common/useCarouselSize.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export const useCarouselSize = () => {

const parentWidth =
sliderRef.current.parentElement?.getBoundingClientRect().width ?? 0;
console.dir(sliderRef.current.parentElement);
setSlideWidth(parentWidth);
};

Expand Down
26 changes: 13 additions & 13 deletions src/pages/homePage/Home.style.ts
Original file line number Diff line number Diff line change
@@ -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"};
Expand All @@ -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`
Expand All @@ -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;
`;
68 changes: 44 additions & 24 deletions src/pages/homePage/Home.tsx
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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],
);
Expand All @@ -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}
Expand All @@ -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>
);
};
Expand Down
122 changes: 122 additions & 0 deletions src/pages/homePage/eventCarousel/EventCarousel.style.ts
Original file line number Diff line number Diff line change
@@ -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}
`;
Loading

0 comments on commit f663586

Please sign in to comment.