[#42]조건에 따른 예약 페이지 링크처리

FE/airbnb/src/components/header/form/FormGuest.tsx

@@ -6,8 +6,10 @@ import { MouseEvent, useEffect, useRef } from 'react';
 import useToggle from '../../../hooks/useToggle';
 import FormGuestToggle from './guestToggle/FormGuestToggle';
 import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
-import { guestState, isFormOpenedState } from '../../../recoil/headerAtom';
+import { guestState, isFormOpenedState, reserveInfoSelector } from '../../../recoil/headerAtom';
 import { ReactComponent as DeleteBtn } from '../../../assets/svg/Property 1=x-circle.svg';
+import { Link } from 'react-router-dom';
+import ConditionalLink from '../../util/ConditionalLink';
 
 const FormGuest = () => {
   const clickRef = useRef<HTMLDivElement>(null);
@@ -18,6 +20,7 @@ const FormGuest = () => {
   const [isFormOpened, setIsFormOpened] = useRecoilState(isFormOpenedState);
   const totalCount = Object.values(guestCount).reduce((acc, cur) => acc + cur);
   const isShowDeleteBtn = totalCount !== 0 && open;
+  const reserveInfo = useRecoilValue(reserveInfoSelector);
 
   useEffect(() => {
     if (open) setIsFormOpened(true);
@@ -40,16 +43,24 @@ const FormGuest = () => {
     resetGuestCount();
   };
 
+  const handleSubmitClick = (e: MouseEvent): void => {
+    e.stopPropagation();
+  };
+
+  const linkCondition = Object.values(reserveInfo).filter((v) => !v).length === 0;
+
   return (
     <StyledFormGuestWrapper>
       <StyledFormGuest ref={clickRef} isFormOpened={isFormOpened}>
         <HoverBlock color='gray4' className='hover__guest' dataKey='guest' isModal={open}>
           <FormColumn title='인원' description={getGuestDesc()} />
           {isShowDeleteBtn && <DeleteBtn onClick={handleDeleteClick} />}
-          <div className='search-icon'>
-            <IoSearch />
-            {isFormOpened && <div className='search'>검색</div>}
-          </div>
+          <ConditionalLink to='/reserve' condition={linkCondition}>
+            <div className='search-icon' onClick={handleSubmitClick}>
+              <IoSearch />
+              {isFormOpened && <div className='search'>검색</div>}
+            </div>
+          </ConditionalLink>
         </HoverBlock>
       </StyledFormGuest>
       {open && <FormGuestToggle toggleRef={toggleRef} />}

FE/airbnb/src/components/header/form/calendar/calendarDateFn.tsx

@@ -1,4 +1,5 @@
 import { calendarDateType, dayType } from '../../../../recoil/calendarAtom';
+import { pipe } from '../../../../util/util';
 
 export const getMonthData = ({ year, month, todayDate }: calendarDateType): dayType[][] => {
   const { year: todayYear, month: todayMonth, date: todayDay } = todayDate;
@@ -47,3 +48,5 @@ export const dateToString = (date: date | void): string => {
   if (day < 10) newDay = '0' + day;
   return `${year}-${newMonth}-${newDay}`;
 };
+
+export const timeToDate = pipe(getDateByTime, dateToString);

FE/airbnb/src/components/util/ConditionalLink.tsx

@@ -0,0 +1,12 @@
+import { Link } from 'react-router-dom';
+
+interface Props {
+  children: any;
+  to: string;
+  condition: boolean;
+}
+
+const ConditionalLink = ({ children, to, condition }: Props) =>
+  !!condition && to ? <Link to={to}>{children}</Link> : <>{children}</>;
+
+export default ConditionalLink;

FE/airbnb/src/recoil/headerAtom.ts

@@ -1,5 +1,7 @@
 import { atom, selector } from 'recoil';
+import { timeToDate } from '../components/header/form/calendar/calendarDateFn';
 import { guestStateType } from '../components/header/form/guestToggle/guestType';
+import { selectDateState } from './calendarAtom';
 
 export const tabSelectedState = atom<boolean[]>({
   key: 'tabSelectedState',
@@ -40,3 +42,19 @@ export const guestState = atom<guestStateType>({
   key: 'guestState',
   default: { adult: 0, child: 0, infants: 0 },
 });
+
+export const reserveInfoSelector = selector({
+  key: 'reserveInformation',
+  get: ({ get }) => {
+    const address = get(locationState);
+    const selectDateData = get(selectDateState);
+    const checkIn = timeToDate(selectDateData.checkIn);
+    const checkOut = timeToDate(selectDateData.checkOut);
+    const priceData = get(priceState);
+    const minCharge = priceData.min;
+    const maxCharge = priceData.max;
+    const guestData = get(guestState);
+    const guests = Object.values(guestData).reduce((acc, cur) => acc + cur);
+    return { address, checkIn, checkOut, minCharge, maxCharge, guests };
+  },
+});

FE/airbnb/src/util/api.ts

@@ -1,23 +1,32 @@
 import { dateToString, getDateByTime } from '../components/header/form/calendar/calendarDateFn';
 
+interface reserveInfoType {
+  address: string;
+  checkIn: number;
+  checkOut: number;
+  minCharge: number;
+  maxCharge: number;
+  guests: number;
+}
+
 interface apiType {
   url: string;
-  getRooms: (
-    checkIn: number,
-    checkOut: number,
-    minCharge: number,
-    maxCharge: number,
-    guests: number,
-    location?: string
-  ) => string;
+  getRooms: ({
+    address,
+    checkIn,
+    checkOut,
+    minCharge,
+    maxCharge,
+    guests,
+  }: reserveInfoType) => string;
 }
 export const API: apiType = {
   url: 'http://13.125.35.62',
-  getRooms: (checkIn, checkOut, minCharge, maxCharge, guests, location) => {
+  getRooms: ({ address, checkIn, checkOut, minCharge, maxCharge, guests }) => {
     const url = API.url;
     const checkInDate = dateToString(getDateByTime(checkIn));
     const checkOutDate = dateToString(getDateByTime(checkOut));
-    const query = `check_in=${checkInDate}&check_out=${checkOutDate}&min_charge=${minCharge}&max_charge=${maxCharge}&guests=${guests}`;
+    const query = `address=${address}&check_in=${checkInDate}&check_out=${checkOutDate}&min_charge=${minCharge}&max_charge=${maxCharge}&guests=${guests}`;
     return url + '/accommodations?' + query;
   },
 };

FE/airbnb/src/util/util.js

@@ -0,0 +1,6 @@
+const go = (arg, ...fns) => fns.reduce((res, fn) => fn(res), arg);
+
+export const pipe =
+  (fn, ...fns) =>
+  (...args) =>
+    go(fn(...args), ...fns);