Skip to content

Commit

Permalink
Merge pull request #291 from catchroom/feature/#289
Browse files Browse the repository at this point in the history 
🎨 style : 메인 홈 반응형 적용
  • Loading branch information
@moana16
moana16 authored Jan 27, 2024
2 parents 0c984ae + 2a3d7ed commit 99fde0b
Show file tree
Hide file tree
Showing 10 changed files with 131 additions and 65 deletions.
2 changes: 1 addition & 1 deletion app/home/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import React from 'react';

const page = async () => {
return (
<div className="flex flex-col w-full h-full px-5 mt-5 items-center bg-primary">
<div className="flex flex-col w-full h-full px-5 mt-5 items-center bg-primary md:px-4 sm:px-3">
<Header />
{/* 검색바 컴포넌트 */}
<SearchBar />
Expand Down
14 changes: 9 additions & 5 deletions components/common/footer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ import Link from 'next/link';
const Footer = () => {
return (
<div className="flex flex-col gap-3 mt-10 pb-20">
<div className="flex flex-col text-text-sub text-p3 ">
<h1 className="pb-1 font-bold text-p1">캐치룸</h1>
<div className="flex flex-col text-text-sub text-p3 md:text-p4 sm:text-p4 ">
<h1 className="pb-1 font-bold text-p1 md:text-p3 sm:text-p3">캐치룸</h1>
<p>
<span className="font-bold">주소</span> 서울특별시 강남구 테헤란로
108길 42
Expand All @@ -20,7 +20,7 @@ const Footer = () => {
09:00 - 18:00 <br /> (점심시간 12:00 - 13:00)
</p>
</div>
<div className="flex gap-[19px] text-text-secondary underline decoration-solid text-p2">
<div className="flex gap-[19px] text-text-secondary underline decoration-solid text-p2 md:text-[11px] sm:text-[11px]">
<Link href="https://team4989faq.oopy.io/">
<p>FAQ</p>
</Link>
Expand All @@ -30,9 +30,13 @@ const Footer = () => {
<Link href="/mypage/dashboard/terms">
<p className="cursor-pointer">서비스 이용약관</p>
</Link>
<Image src={yanolja} alt="야놀자 로고" />
<Image
src={yanolja}
alt="야놀자 로고"
className="md:w-[54px] md:h-[16px] sm:w-[54px] sm:h-[16px]"
/>
</div>
<div className="text-t4 text-text-sub">
<div className="text-t4 text-text-sub md:text-p4 sm:text-p4">
(주)야놀자는 통신판매중개자로서 통신판매의 당사자가 아니며 상품의 예약,
이용 및 환불 등과 관련한 의무와 책임은 각 판매자에게 있습니다.
</div>
Expand Down
6 changes: 3 additions & 3 deletions components/home/catch/catchContainer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,18 @@ const CatchContainer = () => {
return (
<div className="w-full mt-12">
<div className="flex items-center justify-between font-bold">
<h2 className="text-h4">
<h2 className="text-h4 md:text-t1 sm:text-t1">
캐치특가 숙소 <span className="text-main">50%~</span>
</h2>
<span
onClick={handleViewAllBtnClick}
className="underline decoration-solid cursor-pointer text-text-sub text-p2"
className="underline decoration-solid cursor-pointer text-text-sub text-p2 md:text-[12px] sm:text-[12px] "
>
전체보기
</span>
</div>

<p className="mt-1 text-p1 text-text-sub">
<p className="mt-1 text-p1 text-text-sub md:text-p2 sm:text-p2">
구매가 대비 50% 이상 할인된 숙소
</p>
<CatchSwiper />
Expand Down
44 changes: 34 additions & 10 deletions components/home/catch/catchItem/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,24 @@ const CatchItem = ({

const id = productId!.toString();

const [screenSize, setScreenSize] = useState('l');

useEffect(() => {
window.scrollTo(0, 0);
const checkScreenSize = () => {
if (window.innerWidth >= 390) setScreenSize('l');
else if (window.innerHeight >= 320 && window.innerWidth < 390)
setScreenSize('m');
else setScreenSize('s');
};

// 초기 화면 크기 체크
checkScreenSize();

// 창 크기 변경 시 이벤트 리스너 추가
window.addEventListener('resize', checkScreenSize);
}, []);

useEffect(() => {
setIsBtnActive(userZimState);
}, [userZimState]);
Expand Down Expand Up @@ -59,39 +77,45 @@ const CatchItem = ({

return (
<div className="flex flex-col relative w-full mt-5 rounded-lg border border-gray-200 cursor-pointer">
<div className="absolute flex top-[12px] left-4 bg-black gap-1 p-[10px] rounded-3xl items-center z-10">
<div className="absolute flex top-[12px] left-4 bg-black gap-1 p-[10px] rounded-3xl items-center z-10 md:p-1.5 sm:p-1.5 md:text-t4 sm:text-t4">
<White />
<span className="text-white">{region}</span>
</div>
<div className="absolute flex top-[12px] h-[40px] right-4 justify-center items-center z-10">
<div className="absolute flex top-[12px] right-4 justify-center items-center z-10">
{data?.userIdentity === 'BUYER' ? (
<div className="relative ">
<Image
src="/Ellipse-22.svg"
width={40}
height={40}
width={screenSize === 'l' ? 40 : 28}
height={screenSize === 'l' ? 40 : 28}
className="md:w-[28px] md:h-[28px] sm:w-[28px] sm:h-[28px]"
alt="찜하기 버튼"
/>
<div className="absolute bottom-1/2 right-1/2 translate-y-1/2 translate-x-1/2 cursor-pointer">
<HeartButton
isButtonActive={isBtnActive}
stateHandler={activeHandler}
whiteStroke={true}
width={screenSize === 'l' ? 24 : 16}
height={screenSize === 'l' ? 24 : 16}
/>
</div>
</div>
) : (
''
)}
</div>
<div className="h-[184px] relative" onClick={handleItemClick}>
<div
className="h-[184px] md:h-[138px] sm:h-[138px] relative"
onClick={handleItemClick}
>
<Image
src={image!}
alt="숙소이미지"
fill={true}
sizes="(max-width: 480px) 364px, (max-width: 390px) 240px, 240px"
priority
className="rounded-t-xl"
className="rounded-t-xl "
/>
</div>
<div
Expand All @@ -101,21 +125,21 @@ const CatchItem = ({
<div className="flex justify-between">
<div className="flex">
<CalendarIcon />
<p className="text-p2 ml-1 text-black font-semibold">
<p className="text-p2 ml-1 text-black font-semibold md:text-t4 sm:text-t4">
{checkInString} - {checkOutString}
</p>
</div>
<p className="line-through text-p2 text-text-sub">
<p className="line-through text-p2 text-text-sub md:text-[11px] sm:text-[11px]">
구매가 {originalPrice?.toLocaleString()}
</p>
</div>
<div className="flex justify-between font-bold">
<div className="text-h5">
<div className="text-h5 md:text-t3 md:font-semibold sm:text-t3 sm:font-semibold">
{accommodationName.length > 7
? `${accommodationName.substring(0, 7)}...`
: accommodationName}
</div>
<div className="text-t1">
<div className="text-t1 md:text-p2 sm:text-p2">
<span className="text-main text-p1 mr-1">{discountRate}%</span>
{sellPrice?.toLocaleString()}원
</div>
Expand Down
54 changes: 27 additions & 27 deletions components/home/catch/catchSkeletonUI/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ const CatchSkeletonUI = () => {
role="status"
className="space-y-8 animate-pulse sm:w-80 md:w-80 md:space-y-0 rtl:space-x-reverse md:items-center border border-gray-200 mt-5 rounded"
>
<div className="flex items-center justify-center w-full h-[184px] bg-gray-300 rounded dark:bg-gray-700">
<div className="flex items-center justify-center w-full h-[184px] bg-gray-300 rounded dark:bg-gray-700 md:w-[240px] sm:w-[240px] md:h-[138px] sm:h-[138px]">
<svg
className="w-10 h-[184px] text-gray-200 dark:text-gray-600"
aria-hidden="true"
Expand All @@ -37,25 +37,25 @@ const CatchSkeletonUI = () => {
<path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
</svg>
</div>
<div className="w-ful p-5 ">
<div className="w-ful p-5 md:w-[240px] sm:w-[240px] md:p-1 sm:p-1">
<div className="flex justify-between mb-1">
<div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[157px] mb-4"></div>
<div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[93px] mb-4"></div>
<div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[157px] md:w-[120px] sm:w-[120px] mb-4"></div>
<div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[93px] md:w-[60px] sm:w-[60px] mb-4"></div>
</div>
<div className="flex justify-between">
<div className="h-3.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[104px] mb-4"></div>
<div className="h-3.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[104px] mb-4 md:w-[70px] sm:w-[70px]"></div>

<div className="h-3 bg-gray-200 rounded-full dark:bg-gray-700 w-[110px] mb-4"></div>
<div className="h-3 bg-gray-200 rounded-full dark:bg-gray-700 w-[110px] mb-4 md:w-[90px] sm:w-92px]"></div>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
<div
role="status"
className="space-y-8 animate-pulse sm:w-80 md:w-80 md:space-y-0 rtl:space-x-reverse md:items-center border border-gray-200 mt-5"
className="space-y-8 animate-pulse sm:w-80 md:w-80 md:space-y-0 rtl:space-x-reverse md:items-center border border-gray-200 mt-5 rounded"
>
<div className="flex items-center justify-center w-full h-[184px] bg-gray-300 rounded dark:bg-gray-700">
<div className="flex items-center justify-center w-full h-[184px] bg-gray-300 rounded dark:bg-gray-700 md:w-[240px] sm:w-[240px] md:h-[138px] sm:h-[138px]">
<svg
className="w-10 h-[184px] text-gray-200 dark:text-gray-600"
aria-hidden="true"
Expand All @@ -66,25 +66,25 @@ const CatchSkeletonUI = () => {
<path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
</svg>
</div>
<div className="w-ful p-5 ">
<div className="w-ful p-5 md:w-[240px] sm:w-[240px] md:p-1 sm:p-1">
<div className="flex justify-between mb-1">
<div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[157px] mb-4"></div>
<div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[93px] mb-4"></div>
<div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[157px] md:w-[120px] sm:w-[120px] mb-4"></div>
<div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[93px] md:w-[60px] sm:w-[60px] mb-4"></div>
</div>
<div className="flex justify-between">
<div className="h-3.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[104px] mb-4"></div>
<div className="h-3.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[104px] mb-4 md:w-[70px] sm:w-[70px]"></div>

<div className="h-3 bg-gray-200 rounded-full dark:bg-gray-700 w-[110px] mb-4"></div>
<div className="h-3 bg-gray-200 rounded-full dark:bg-gray-700 w-[110px] mb-4 md:w-[90px] sm:w-92px]"></div>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
<div
role="status"
className="space-y-8 animate-pulse sm:w-80 md:w-80 md:space-y-0 rtl:space-x-reverse md:items-center border border-gray-200 mt-5"
className="space-y-8 animate-pulse sm:w-80 md:w-80 md:space-y-0 rtl:space-x-reverse md:items-center border border-gray-200 mt-5 rounded"
>
<div className="flex items-center justify-center w-full h-[184px] bg-gray-300 rounded dark:bg-gray-700">
<div className="flex items-center justify-center w-full h-[184px] bg-gray-300 rounded dark:bg-gray-700 md:w-[240px] sm:w-[240px] md:h-[138px] sm:h-[138px]">
<svg
className="w-10 h-[184px] text-gray-200 dark:text-gray-600"
aria-hidden="true"
Expand All @@ -95,25 +95,25 @@ const CatchSkeletonUI = () => {
<path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
</svg>
</div>
<div className="w-ful p-5 ">
<div className="w-ful p-5 md:w-[240px] sm:w-[240px] md:p-1 sm:p-1">
<div className="flex justify-between mb-1">
<div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[157px] mb-4"></div>
<div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[93px] mb-4"></div>
<div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[157px] md:w-[120px] sm:w-[120px] mb-4"></div>
<div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[93px] md:w-[60px] sm:w-[60px] mb-4"></div>
</div>
<div className="flex justify-between">
<div className="h-3.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[104px] mb-4"></div>
<div className="h-3.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[104px] mb-4 md:w-[70px] sm:w-[70px]"></div>

<div className="h-3 bg-gray-200 rounded-full dark:bg-gray-700 w-[110px] mb-4"></div>
<div className="h-3 bg-gray-200 rounded-full dark:bg-gray-700 w-[110px] mb-4 md:w-[90px] sm:w-92px]"></div>
</div>
</div>
</div>
</SwiperSlide>
<SwiperSlide>
<div
role="status"
className="space-y-8 animate-pulse sm:w-80 md:w-80 md:space-y-0 rtl:space-x-reverse md:items-center border border-gray-200 mt-5"
className="space-y-8 animate-pulse sm:w-80 md:w-80 md:space-y-0 rtl:space-x-reverse md:items-center border border-gray-200 mt-5 rounded"
>
<div className="flex items-center justify-center w-full h-[184px] bg-gray-300 rounded dark:bg-gray-700">
<div className="flex items-center justify-center w-full h-[184px] bg-gray-300 rounded dark:bg-gray-700 md:w-[240px] sm:w-[240px] md:h-[138px] sm:h-[138px]">
<svg
className="w-10 h-[184px] text-gray-200 dark:text-gray-600"
aria-hidden="true"
Expand All @@ -124,15 +124,15 @@ const CatchSkeletonUI = () => {
<path d="M18 0H2a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-5.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm4.376 10.481A1 1 0 0 1 16 15H4a1 1 0 0 1-.895-1.447l3.5-7A1 1 0 0 1 7.468 6a.965.965 0 0 1 .9.5l2.775 4.757 1.546-1.887a1 1 0 0 1 1.618.1l2.541 4a1 1 0 0 1 .028 1.011Z" />
</svg>
</div>
<div className="w-ful p-5 ">
<div className="w-ful p-5 md:w-[240px] sm:w-[240px] md:p-1 sm:p-1">
<div className="flex justify-between mb-1">
<div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[157px] mb-4"></div>
<div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[93px] mb-4"></div>
<div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[157px] md:w-[120px] sm:w-[120px] mb-4"></div>
<div className="h-2.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[93px] md:w-[60px] sm:w-[60px] mb-4"></div>
</div>
<div className="flex justify-between">
<div className="h-3.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[104px] mb-4"></div>
<div className="h-3.5 bg-gray-200 rounded-full dark:bg-gray-700 w-[104px] mb-4 md:w-[70px] sm:w-[70px]"></div>

<div className="h-3 bg-gray-200 rounded-full dark:bg-gray-700 w-[110px] mb-4"></div>
<div className="h-3 bg-gray-200 rounded-full dark:bg-gray-700 w-[110px] mb-4 md:w-[90px] sm:w-92px]"></div>
</div>
</div>
</div>
Expand Down
23 changes: 19 additions & 4 deletions components/home/header/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,34 @@
'use client';
import Logo from '@/public/svgComponent/logo';
import React from 'react';
import React, { useEffect, useState } from 'react';

const Header = () => {
const [screenSize, setScreenSize] = useState('l');

useEffect(() => {
const checkScreenSize = () => {
if (window.innerWidth >= 390) setScreenSize('l');
else if (window.innerHeight >= 320 && window.innerWidth < 390)
setScreenSize('m');
else setScreenSize('s');
};
checkScreenSize();
window.addEventListener('resize', checkScreenSize);
}, []);
return (
<div className="w-full mt-14 mb-14">
<h1 className="font-bold text-h1">초특가 숙박권</h1>
<h1 className="text-text-primary font-bold text-h1">빠르게 캐치하자!</h1>
<div className="mt-4 text-text-sub text-t2 flex-col">
<div className="mt-4 text-text-sub text-t2 flex-col md:text-t3 sm:text-t3">
<div className="flex items-center">
<div className="inline-block">
<Logo />
<Logo
width={screenSize !== 'l' ? 39 : 48}
height={screenSize !== 'l' ? 13 : 15}
/>
</div>
<p>은 무료 취소가 불가능한 야놀자 숙박권을</p>
</div>

<p>간편하게 거래할 수 있는 중개 플랫폼입니다.</p>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions components/home/review/reviewContainer/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ const ReviewContainer = () => {
return (
<div className="w-full mt-16">
<div className="flex justify-between my-3">
<h1 className="text-h4 font-bold">이용후기</h1>
<h1 className="text-h4 font-bold md:text-t1 sm:text-t1">이용후기</h1>
<span
onClick={handleClickViewAllBtn}
className="underline decoration-solid cursor-pointer text-t3 text-text-sub"
className="underline decoration-solid cursor-pointer text-t3 text-text-sub md:text-[12px] sm:text-[12px]"
>
전체보기
</span>
Expand Down
12 changes: 8 additions & 4 deletions components/home/review/reviewItem/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const ReviewItem = ({
}: ReviewItemType) => {
return (
<div className="flex rounded-md bg-white w-full h-[140px]">
<div className="relative w-[110px] h-[140px] flex-shrink-0">
<div className="relative w-[110px] h-[140px] flex-shrink-0 md:w-[88px] md:h-[124px] sm:w-[88px] sm:h-[124px]">
<Image
src={image}
fill
Expand All @@ -25,9 +25,13 @@ const ReviewItem = ({
/>
</div>
<div className="flex flex-col py-5 pl-5 pr-6">
<p className="text-t2 font-bold">{productName}</p>
<p className="mt-2 text-t3 line-clamp-2 max-w-[140px]">{content}</p>
<p className="mt-3 text-t4 text-text-sub">
<p className="text-t2 font-bold md:text-p2 sm:text-p2">
{productName}
</p>
<p className="mt-2 text-t3 line-clamp-2 max-w-[140px] md:text-p4 sm:text-p4">
{content}
</p>
<p className="mt-3 text-t4 text-text-sub md:text-p4 sm:text-p4">
{userName} • {date}
</p>
</div>
Expand Down
Loading

0 comments on commit 99fde0b

Please sign in to comment.