Merge branch 'dev' of https://github.com/catchroom/FE_CatchRoom into …

…feature/#180

app/layout.tsx

@@ -7,6 +7,8 @@ import RootTemplate from '@/components/common/layoutTemplate/RootTemplate';
 import Script from 'next/script';
 import ToastAlertComponent from '@/components/common/toastAlert';
 
+// import { LocalizationProvider } from '@mui/x-date-pickers';
+// import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
 const inter = Inter({ subsets: ['latin'] });
 
 export const metadata: Metadata = {

app/order/complete/detail/page.tsx

@@ -32,7 +32,7 @@ const page = () => {
   return (
     <>
       <Header title="상세보기" showCloseButton showBorder />
-      <div className="flex flex-col container mx-auto w-full px-5 pt-4 pb-[6.5rem]  bg-bg">
+      <div className="flex flex-col container mx-auto w-full px-5 pt-4 pb-[6.5rem] mt-14 bg-bg">
         <ReservationSummary
           reservationNumber={reservationNumber}
           accommodationName={accommodationName}

app/order/page.tsx

@@ -20,7 +20,7 @@ const page = () => {
   return (
     <>
       <Header title="구매하기" showBackButton showBorder />
-      <div className="flex flex-col container mx-auto w-full px-5 py-6">
+      <div className="flex flex-col container mt-10 mx-auto w-full px-5 py-6">
         <ProductDetails
           accommodationName={accommodationName}
           roomName={roomName}

app/search-result/layout.tsx → app/search-result/(noSortBtn)/layout.tsx

@@ -26,14 +26,17 @@ const filters = [
   { id: 'guests', label: guestsLabel },
 ];
 
-const Searchlayout = ({ children }: { children: ReactNode }) => {
+const Searchlayout = ({
+  children,
+}: {
+  children: ReactNode;
+  showProductListControls?: boolean;
+}) => {
   return (
     <>
       <Header title="검색 결과" showBackButton showHomeButton />
       <FilterBar filters={filters} />
-      <main className="w-full absolute h-[calc(100vh-120px)]  ">
-        {children}
-      </main>
+      <main className="w-full absolute h-full mt-20 ">{children}</main>
     </>
   );
 };

app/search-result/map/page.tsx → app/search-result/(noSortBtn)/map/page.tsx

@@ -18,6 +18,13 @@ const markersData = [
     discountRate: 20,
     catchType: true,
   },
+  {
+    latitude: 33.51876726662839,
+    longitude: 126.51808833334624,
+    price: 220000,
+    discountRate: 30,
+    catchType: false,
+  },
 ];
 
 const page = () => {

app/search-result/(sortBtn)/layout.tsx

@@ -0,0 +1,48 @@
+import Header from '@/components/common/header';
+import FilterBar from '@/components/search-result/filterBar';
+import ProductListControls from '@/components/search-result/list/productListControls';
+import React, { ReactNode } from 'react';
+
+const locations = ['서울', '제주'];
+const checkInDate = '12.1';
+const checkOutDate = '12.2';
+const accommodationType = '호텔';
+const adultsCount = 2;
+
+const dayOfWeekIn = '목';
+const dayOfWeekOut = '금';
+
+const locationLabel =
+  locations.length > 1
+    ? `${locations[0]} 외 ${locations.length - 1}건`
+    : locations[0];
+const datesLabel = `${checkInDate} ${dayOfWeekIn} ~ ${checkOutDate} ${dayOfWeekOut}`;
+const accommodationLabel = accommodationType;
+const guestsLabel = `성인 ${adultsCount}명`;
+
+const filters = [
+  { id: 'location', label: locationLabel },
+  { id: 'date', label: datesLabel },
+  { id: 'accommodation', label: accommodationLabel },
+  { id: 'guests', label: guestsLabel },
+];
+
+const Searchlayout = ({
+  children,
+}: {
+  children: ReactNode;
+  showProductListControls?: boolean;
+}) => {
+  return (
+    <>
+      <Header title="검색 결과" showBackButton showHomeButton />
+      <FilterBar filters={filters} />
+      <ProductListControls />
+      <main className="w-full absolute h-[calc(100vh-200px)] top-[200px] overflow-y-auto ">
+        {children}
+      </main>
+    </>
+  );
+};
+
+export default Searchlayout;

app/search-result/list/page.tsx → app/search-result/(sortBtn)/list/page.tsx

@@ -1,7 +1,7 @@
 'use client';
 import CatchItemContainer from '@/components/catchSale/catchItemContainer';
-import ProductListControls from '@/components/search-result/list/productListControls';
 import ToggleViewButton from '@/components/search-result/toggleViewButton';
+import Link from 'next/link';
 import React, { useState } from 'react';
 
 const Page = () => {
@@ -13,10 +13,14 @@ const Page = () => {
 
   return (
     <div className="w-full flex flex-col">
-      <ProductListControls />
       <CatchItemContainer />
-      <div className="fixed bottom-10 left-1/2 transform -translate-x-1/2 z-20">
-        <ToggleViewButton currentView={currentView} onViewChange={toggleView} />
+      <div className="fixed bottom-10 left-1/2 transform -translate-x-1/2 z-10">
+        <Link href="/search-result/map" passHref>
+          <ToggleViewButton
+            currentView={currentView}
+            onViewChange={toggleView}
+          />
+        </Link>
       </div>
     </div>
   );

app/search-result/no-results/page.tsx → app/search-result/(sortBtn)/no-results/page.tsx

@@ -1,11 +1,9 @@
-import ProductListControls from '@/components/search-result/list/productListControls';
 import NoResults from '@/components/search-result/noResults';
 import React from 'react';
 
 const page = () => {
   return (
     <div className="w-full flex flex-col">
-      <ProductListControls />
       <NoResults />
     </div>
   );

atoms/calendar/calendarAtoms.ts

@@ -0,0 +1,15 @@
+import { DateRange } from 'react-day-picker';
+import { atom } from 'recoil';
+
+export const singleDate = atom<Date | undefined>({
+  key: 'singleDate',
+  default: undefined,
+});
+
+export const rangeDate = atom<DateRange | undefined>({
+  key: 'rangeDate',
+  default: {
+    from: undefined,
+    to: undefined,
+  },
+});

atoms/search-detail/checkbox.ts

@@ -0,0 +1,11 @@
+import { atom } from 'recoil';
+
+export const adultCountState = atom<number>({
+  key: 'adultCountState',
+  default: 2,
+});
+
+export const childCountState = atom<number>({
+  key: 'childCountState',
+  default: 0,
+});

components/catchSale/catchItemContainer/index.tsx

@@ -5,7 +5,7 @@ import CatchSpecialComponent from '@/components/common/catchComponent';
 const CatchItemContainer = () => {
   return (
     <div className=" overflow-y-hidden">
-      <div className="w-full flex flex-col gap-12 p-6 pt-1">
+      <div className="w-full flex flex-col gap-12 px-6">
         {ITEMS_INFO.roomItems.map((item) => {
           return (
             <CatchSpecialComponent

components/common/bottomSheetsWithOutCloseBtn/index.tsx

@@ -14,9 +14,9 @@ import {
   outerMoreBottomSheetsControl,
 } from '@/atoms/commons/outerBottomSheetsControl';
 import DropdownButton from '../sheetsButtons/dropdownButton';
-import CalendarButton from '../sheetsButtons/calendarButton';
+import TimePickerButton from '../sheetsButtons/calendarButton';
 import MoreButton from '../sheetsButtons/moreButton';
-
+import SortOptionsButton from '@/components/search-result/list/sortOptionsButton';
 /**
  * @function BottomSheetsWithoutCloseBtn - bottom sheets component입니다. 모달 대체용으로 사용합니다.
  * @param children - 모달 내부에 들어갈 컴포넌트입니다. (필수)
@@ -37,7 +37,7 @@ const BottomSheetsWithoutCloseBtn = ({
 }: {
   children: ReactNode;
   title?: string;
-  buttonSelect?: 'dropdown' | 'calendar' | 'more';
+  buttonSelect?: 'dropdown' | 'timePicker' | 'more' | 'sortOptions';
   outerControl?: boolean;
   outerControlAtom?: 'default' | 'datePicker' | 'more';
 }) => {
@@ -79,8 +79,9 @@ const BottomSheetsWithoutCloseBtn = ({
 
   const ButtonsComponentsObjects: Record<string, React.JSX.Element> = {
     dropdown: <DropdownButton name={title as string} fn={modalOpen} />,
-    calendar: <CalendarButton name={title as string} fn={modalOpen} />,
+    timePicker: <TimePickerButton name={title as string} fn={modalOpen} />,
     more: <MoreButton fn={modalOpen} />,
+    sortOptions: <SortOptionsButton name={title} fn={modalOpen} />,
   };
 
   return (

components/common/calendar/custom-styles.css

@@ -0,0 +1,98 @@
+/*------------------- 기본 스타일 초기화 -------------------*/
+
+/* 1. 전체 margin값 제거 및 강조효과 제거 */
+.rdp {
+  margin: 0;
+  --rdp-outline: 2px solid #fff;
+}
+
+/* 2. 크기 조정 */
+.rdp-table {
+  max-width: 440px;
+  width: 100%;
+  margin-top: 30px;
+}
+.rdp-caption_start {
+  width: 100%;
+}
+.rdp-tbody {
+  margin-bottom: 40px;
+}
+.rdp-months {
+  padding: 30px 0 30px 0;
+}
+
+/*------------------- 커스텀 스타일 적용 -------------------*/
+
+/* 1. 달력 table 정렬 및 크기수정 */
+tr {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  margin-bottom: 10px;
+}
+.rpd-row > :last-child {
+  margin-bottom: 10px;
+}
+
+th {
+  width: 40px;
+}
+
+/* 2. 요일 색상 및 폰트 수정  */
+.rdp-head_cell {
+  font-size: 16px;
+  font-weight: 400;
+
+  color: #717680;
+}
+
+/* 3. 오늘 날짜 표시효과 추가 */
+.rdp-day_today::before {
+  content: '';
+
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+
+  transform: translate(-50%, -50%);
+  width: 5px;
+  height: 5px;
+
+  background-color: #ff3478;
+  border-radius: 50%;
+}
+.rdp-day_today:not(.rdp-day_outside) {
+  font-weight: 400;
+}
+
+/* 4-1. 선택된 날짜 (single-picker)*/
+.rdp-day_selected,
+.rdp-day_selected:hover {
+  background-color: #ff3478;
+}
+
+/* 4-2. 선택된 날짜 (range-picker) */
+/* 첫 날짜 */
+.rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {
+  border-radius: 20px;
+}
+
+/* 중간 날짜들 */
+.rdp-button_reset.rdp-button.rdp-day.rdp-day_selected.rdp-day_range_middle {
+  border-radius: 20px;
+  background-color: #ffebf1;
+
+  color: black;
+}
+
+/* 마지막 날짜 */
+.rdp:not([dir='rtl']) .rdp-day_range_end:not(.rdp-day_range_start) {
+  border-radius: 20px;
+}
+
+/* 5. 버튼 취소 후 남아있는 selected 배경 white로 제거 */
+.rdp-button:hover:not([disabled]):not(.rdp-day_selected) {
+  background-color: white;
+}