Merge pull request #304 from catchroom/feature/#116

🎨 style : 반응형 적용 및 세부 디자인 수정
catchroom · Jan 28, 2024 · 267434e · 267434e
2 parents 9fda739 + d06b529
commit 267434e
Show file tree

Hide file tree

Showing 18 changed files with 67 additions and 81 deletions.
diff --git a/components/catchItems/header/bottomHeader/index.tsx b/components/catchItems/header/bottomHeader/index.tsx
@@ -46,7 +46,9 @@ const BottomHeader = () => {
 
   return (
     <div className="flex items-center justify-between w-full h-[4.75rem] p-5 border-border-sub border-t text-xl text-p1 font-semibold">
-      <p className="text-t2 font-bold">총 {totalSize}건</p>
+      <p className="font-bold text-t4 md:text-t4 lg:text-t2">
+        총 {totalSize}건
+      </p>
       <div className="flex gap-1">
         <RegionBottomSheet buttonStyle="dropdown" usePinIcon={true} />
         <BottomSheetsWithoutCloseBtn

diff --git a/components/catchItems/header/middleHeader/index.tsx b/components/catchItems/header/middleHeader/index.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 const MiddleHeader = () => {
   return (
     <div className="py-3 ">
-      <div className="flex px-5 gap-3 items-center justify-between text-xl text-p1 font-semibold">
+      <div className="flex px-5 items-center justify-between text-xl text-p1 font-semibold">
         <WeekCalendar />
       </div>
     </div>

diff --git a/components/common/catchComponent/index.tsx b/components/common/catchComponent/index.tsx
@@ -63,23 +63,23 @@ const CatchSpecialComponent = ({
   };
 
   const truncateString = (str: string) => {
-    if (str.length > 13) return str.substring(0, 10) + '...';
+    if (str.length > 12) return str.substring(0, 10) + '...';
     else return str;
   };
 
   return (
-    <div className="relative w-full h-36">
+    <div className="relative w-full">
       <div className="flex cursor-pointer" onClick={pageHandler}>
         {/* 숙소 이미지 및 캐치특가 */}
-        <div className="relative flex flex-shrink-0 w-[120px] max-w-[120px] overflow-hidden rounded-md mr-4">
+        <div className="relative flex flex-shrink-0 w-[80px] sm:w-[80px] acc:w-[100px] lg:w-[120px] max-w-[120px] overflow-hidden rounded-md mr-4">
           {catchType ? (
             <div className="absolute flex items-center z-[4] px-2 ml-2 mt-2 rounded-full bg-main text-p2 text-white font-medium">
               캐치 특가
             </div>
           ) : (
             ''
           )}
-          <div className="relative w-32 flex-shrink-0">
+          <div className="relative w-32 ">
             {image ? (
               <Image
                 src={image}
@@ -105,29 +105,29 @@ const CatchSpecialComponent = ({
 
         {/* 숙소정보 */}
         <div className="flex-grow flex-col">
-          <div className="mb-3 truncate">
-            <div className="flex items-center gap-1 text-t3 font-semibold">
+          <div className="truncate mb-1 md:mb-1 lg:mb-3 ">
+            <div className="flex items-center gap-1 font-semibold text-t4 sm:text-t4 md:text-t4 lg:text-t3  ">
               <CalendarIcon />
               {checkInString} - {checkOutString}
             </div>
-            <div className=" flex flex-col items-start mt-3 gap-3 ">
-              <div className="text-t1 font-bold leading-none ">
+            <div className=" flex flex-col items-start mt-1">
+              <div className="font-bold  text-p2 sm:text-p2 md:text-t2 lg:text-t1 ">
                 {truncateString(accommodationName)}
               </div>
-              <div className="text-t1 font-bold leading-none text-text-sub break-keep">
+              <div className="font-bold text-p2 text-text-sub sm:text-p2 md:text-t2 lg:text-t1">
                 {truncateString(roomName!)}
               </div>
             </div>
           </div>
-          <div className="flex flex-col items-start lg:items-end">
+          <div className="flex flex-col items-start sm:items-end acc:items-end">
             <div className="flex flex-wrap text-p2 text-gray-600">
               <p className="line-through">
                 구매가&nbsp;{originalPrice?.toLocaleString('us-EN')}원
               </p>
             </div>
             <div className="flex flex-wrap items-center">
               <p className="text-t1 text-main font-semibold">{discountRate}%</p>
-              <p className=" text-t1 font-bold ml-2 lg:text-h5">
+              <p className="text-t1 font-bold ml-2 ">
                 {sellPrice?.toLocaleString('us-EN')}원
               </p>
             </div>

diff --git a/components/common/checkInDateComponent/index.tsx b/components/common/checkInDateComponent/index.tsx
@@ -20,14 +20,14 @@ const CheckInDateComponent = ({
   return (
     <div className="relative flex lg:flex-row lg:flex-wrap md:flex-col sm:flex-col md:items-start sm:items-start md:px-5 md:py-4 sm:px-5 sm:py-4 w-full lg:h-[5.625rem] md:h-[157px] sm:h-[157px] mt-2 lg:items-center lg:justify-around bg-surface-gray rounded-[4px]">
       <div className="lg:text-center md:text-start sm:text-start">
-        <div className="text-t3 font-medium text-gray-600">체크인</div>
+        <div className="text-t3 font-medium text-gray-600 mb-1">체크인</div>
         <div className="text-p1 font-semibold text-gray-800">
           {checkInString} {CHECKIN_TIME}
         </div>
       </div>
       <div className="absolute h-[37px] w-[1px] lg:bg-gray-400 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 lg:block md:hidden sm:hidden" />
       <div className="lg:text-center  md:text-start lg:mt-0 md:mt-[29px] sm:text-start sm:mt-[29px]">
-        <div className="text-t3 font-medium text-gray-600">체크아웃</div>
+        <div className="text-t3 font-medium text-gray-600 mb-1">체크아웃</div>
         <div className="text-p1 font-semibold text-gray-800">
           {checkOutString} {CHECKOUT_TIME}
         </div>

diff --git a/components/common/heartButton/index.test.tsx b/components/common/heartButton/index.test.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen, waitFor } from '@testing-library/react';
+import { mockAnimationsApi } from 'jsdom-testing-mocks';
+import HeartButton from '.';
+
+mockAnimationsApi();
+
+describe('heartButton', () => {
+  it('버튼을 클릭하면 하트가 변경되는지 테스트', async () => {
+    const user = userEvent.setup();
+    let isButtonActive = true;
+
+    const stateHandler = () => {
+      isButtonActive = !isButtonActive;
+    };
+    render(
+      <HeartButton
+        isButtonActive={isButtonActive}
+        stateHandler={stateHandler}
+        data-testid="heart-button"
+      />,
+    );
+
+    const button = screen.getByTestId('heart-button');
+    await user.click(button);
+
+    await waitFor(() => {
+      const content = screen.getByTestId('fullHeartIcon');
+      expect(content).toBeVisible();
+    });
+  });
+});
diff --git a/components/common/heartButton/index.tsx b/components/common/heartButton/index.tsx
@@ -23,7 +23,7 @@ const HeartButton = ({
 }: HeartButtonPropsType) => {
   return (
     <div className="flex items-center justify-center">
-      <button onClick={stateHandler}>
+      <button onClick={stateHandler} data-testid="heart-button">
         {!isButtonActive ? (
           <EmptyHeartIcon
             width={width}

diff --git a/components/common/searchBtmSheets/calendar/index.tsx b/components/common/searchBtmSheets/calendar/index.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { useRecoilState } from 'recoil';
 import { SEARCH_DEFAULT } from '@/constants/search-detail';
 import BottomSheets from '@/components/common/bottomSheets';
@@ -21,26 +21,6 @@ const CalendarBottomSheet = ({
     useRecoilState<boolean>(isAllDayCheckedState);
   const [range] = useRecoilState(rangeDate);
 
-  useEffect(() => {
-    const debounce = setTimeout(() => {
-      if (range && range.from && range.to)
-        // fetch(range.from) 등등 api에 사용 예정
-        console.log(
-          '디바운스된 날짜 :',
-          format(range.from, 'yyyy-MM-dd', {
-            locale: ko,
-          }),
-          format(range.to, 'yyyy-MM-dd', {
-            locale: ko,
-          }),
-        );
-    }, 500);
-
-    return () => {
-      clearTimeout(debounce);
-    };
-  }, [range]);
-
   const handleDateSelectAll = () => {
     setIsCalendarChecked(!isCalendarChecked);
   };

diff --git a/components/common/searchBtmSheets/customer/index.tsx b/components/common/searchBtmSheets/customer/index.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React, { useEffect } from 'react';
+import React from 'react';
 import {
   adultCountState,
   childCountState,
@@ -17,17 +17,6 @@ const CustomerBottomSheet = ({
   const [adultCount] = useRecoilState(adultCountState);
   const [childCount] = useRecoilState(childCountState);
 
-  useEffect(() => {
-    const debounce = setTimeout(() => {
-      // fetch(adultCount,childCount) 등등 api에 사용 예정
-      console.log('디바운스된 성인, 아동 수 :', adultCount, ', ', childCount);
-    }, 500);
-
-    return () => {
-      clearTimeout(debounce);
-    };
-  }, [adultCount, childCount]);
-
   return (
     <>
       {SEARCH_DEFAULT.props.map((prop, index) => {

diff --git a/components/common/searchBtmSheets/region/index.tsx b/components/common/searchBtmSheets/region/index.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React, { useEffect } from 'react';
+import React from 'react';
 import BottomSheets from '@/components/common/bottomSheets';
 import CheckBoxComponent from '@/components/common/checkBox';
 import { REGION_NAMES, SEARCH_DEFAULT } from '@/constants/search-detail';
@@ -28,17 +28,6 @@ const RegionBottomSheet = ({
   const [regionBtnBlArr, setRegionBtnBlArr] =
     useRecoilState<boolean[]>(regionBooleanIndex);
 
-  useEffect(() => {
-    const debounce = setTimeout(() => {
-      // fetch(regionBtnIdx) 등등 api에 사용 예정
-      console.log('디바운스된 지역들 :', regionBtnIdx);
-    }, 500);
-
-    return () => {
-      clearTimeout(debounce);
-    };
-  }, [regionBtnIdx]);
-
   const handleRegionSelectAll = () => {
     setIsRegionChecked(!isRegionChecked);
     const allIndexes = Array.from(

diff --git a/components/common/searchBtmSheets/room/index.tsx b/components/common/searchBtmSheets/room/index.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { ROOM_CATEGORIES, SEARCH_DEFAULT } from '@/constants/search-detail';
 import BottomSheets from '@/components/common/bottomSheets';
 import CheckBoxComponent from '@/components/common/checkBox';
@@ -21,17 +21,6 @@ const RoomBottomSheet = ({
   const [isRoomBtnSelected, setIsRoomBtnSelected] =
     useRecoilState<boolean[]>(roomBooleanIndex);
 
-  useEffect(() => {
-    const debounce = setTimeout(() => {
-      // fetch(roomBtnIdx) 등등 api에 사용 예정
-      console.log('디바운스된 숙소유형 :', roomBtnIdx);
-    }, 500);
-
-    return () => {
-      clearTimeout(debounce);
-    };
-  }, [roomBtnIdx]);
-
   const handleRoomSelectAll = () => {
     setIsRoomChecked(!isRoomChecked);
     const allIndexes = Array.from(

diff --git a/components/common/sheetsButtons/dropdownButton/index.tsx b/components/common/sheetsButtons/dropdownButton/index.tsx
@@ -17,7 +17,7 @@ const DropdownButton = ({
     <button
       onClick={fn}
       type="button"
-      className="flex items-center gap-2 h-[2.25rem] bg-white rounded-full border border-border-sub px-3 py-2 text-t3 font-semibold"
+      className="flex items-center justify-between gap-2 h-[2.25rem] bg-white rounded-full border border-border-sub px-3 py-2 text-t3 font-semibold text-clip overflow-hidden"
     >
       {useLocationIcon && <MapPinSmFillIcon />}
       {name}

diff --git a/components/common/sheetsButtons/saleButton/index.tsx b/components/common/sheetsButtons/saleButton/index.tsx
@@ -54,10 +54,10 @@ const SaleButton = ({
         placeholder="Button"
         onClick={handleBtnClick}
         type={type}
-        className="flex gap-1 p-3 rounded-3xl font-pretend bg-main text-t2 font-bold text-white"
+        className="flex gap-1 p-3 rounded-3xl font-pretend bg-main text-t2 font-medium text-white"
       >
         <Image src="/svg/plus.svg" width={24} height={24} alt="플러스 아이콘" />
-        {name}
+        <div className="mr-[5px]">{name}</div>
       </Button>
     </>
   );

diff --git a/components/common/weekCalendar/index.tsx b/components/common/weekCalendar/index.tsx
@@ -28,7 +28,7 @@ const WeekCalendar = () => {
     const isSelected = date.getDate() === selectedDate.getDate();
 
     const buttonClasses = `
-      relative flex flex-col items-center font-semibold
+      relative flex flex-col items-center font-bold
       ${isToday ? 'justify-start' : ''}
       ${isSixDaysLater ? 'justify-end' : ''}
     `;
@@ -44,7 +44,7 @@ const WeekCalendar = () => {
         )}
         <p className="text-text-sub mt-[6px] mb-1">{dayNames[date.getDay()]}</p>
         <p
-          className={`rounded-full flex items-center justify-center w-[2rem] h-[2rem] font-extrabold 
+          className={`rounded-full flex items-center justify-center w-[2rem] h-[2rem] font-bold 
       ${isSelected ? 'bg-black text-white' : ''}`}
         >
           {date.getDate()}

diff --git a/components/home/catch/catchContainer/index.tsx b/components/home/catch/catchContainer/index.tsx
@@ -17,7 +17,7 @@ const CatchContainer = () => {
         </h2>
         <span
           onClick={handleViewAllBtnClick}
-          className="underline decoration-solid cursor-pointer text-text-sub lg:text-p2 md:text-[12px] sm:text-[12px] "
+          className="underline decoration-solid cursor-pointer text-text-sub lg:text-p2 md:text-[12px] sm:text-t3 "
         >
           전체보기
         </span>

diff --git a/components/home/catch/catchItem/index.tsx b/components/home/catch/catchItem/index.tsx
@@ -119,7 +119,7 @@ const CatchItem = ({
         />
       </div>
       <div
-        className="flex flex-col gap-1 p-5 bg-surface"
+        className="flex flex-col gap-1 p-5 bg-surface rounded-b-lg"
         onClick={handleItemClick}
       >
         <div className="flex justify-between">

diff --git a/components/home/deadLineItems/index.tsx b/components/home/deadLineItems/index.tsx
@@ -74,7 +74,7 @@ const CheckInComponent = () => {
             {isBtnLoading ? '불러오는 중..' : '전체보기'}
           </Button>
         </div>
-        <div className="absolute inset-x-0 bottom-0 z-10 h-[130px] rounded-lg bg-gradient-to-t from-[#ffffffbd] to-transparent" />
+        <div className="absolute inset-x-0 bottom-0 z-10 sm:h-[160px] acc:h-[150px] lg:h-[130px] rounded-lg bg-gradient-to-t from-[#ffffffbd] to-transparent" />
       </div>
     </div>
   );

diff --git a/public/svgComponent/fullHeart.tsx b/public/svgComponent/fullHeart.tsx
@@ -12,6 +12,7 @@ const FullHeartIcon: React.FC<FullHeartIconProps> = ({width=24, height=24}) => (
     viewBox="0 0 24 24"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
+    data-testid="fullHeartIcon"
   >
     <path
       fillRule="evenodd"

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -28,8 +28,11 @@ const config: Config = withMT({
     },
 
     screens: {
+      xs: '280px',
       sm: '290px',
       md: '320px',
+      lmd: '325px',
+      acc: '341px',
       lg: '390px',
       xl: '433px',
       home: '768px',