From edf09138c3d8841b98625abedcf6fe0294ada13d Mon Sep 17 00:00:00 2001 From: hayoung123 <67357426+hayoung123@users.noreply.github.com> Date: Tue, 1 Jun 2021 12:39:36 +0900 Subject: [PATCH] =?UTF-8?q?[#42]=EC=A1=B0=EA=B1=B4=EC=97=90=20=EB=94=B0?= =?UTF-8?q?=EB=A5=B8=20=EC=98=88=EC=95=BD=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EB=A7=81=ED=81=AC=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/header/form/FormGuest.tsx | 21 ++++++++++---- .../header/form/calendar/calendarDateFn.tsx | 3 ++ .../src/components/util/ConditionalLink.tsx | 12 ++++++++ FE/airbnb/src/recoil/headerAtom.ts | 18 ++++++++++++ FE/airbnb/src/util/api.ts | 29 ++++++++++++------- FE/airbnb/src/util/util.js | 6 ++++ 6 files changed, 74 insertions(+), 15 deletions(-) create mode 100644 FE/airbnb/src/components/util/ConditionalLink.tsx create mode 100644 FE/airbnb/src/util/util.js diff --git a/FE/airbnb/src/components/header/form/FormGuest.tsx b/FE/airbnb/src/components/header/form/FormGuest.tsx index 2b3b843b5..bb395b099 100644 --- a/FE/airbnb/src/components/header/form/FormGuest.tsx +++ b/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(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 ( {isShowDeleteBtn && } -
- - {isFormOpened &&
검색
} -
+ +
+ + {isFormOpened &&
검색
} +
+ {open && } diff --git a/FE/airbnb/src/components/header/form/calendar/calendarDateFn.tsx b/FE/airbnb/src/components/header/form/calendar/calendarDateFn.tsx index 7a7c43b3b..a0e18058f 100644 --- a/FE/airbnb/src/components/header/form/calendar/calendarDateFn.tsx +++ b/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); diff --git a/FE/airbnb/src/components/util/ConditionalLink.tsx b/FE/airbnb/src/components/util/ConditionalLink.tsx new file mode 100644 index 000000000..080b1cd3e --- /dev/null +++ b/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 ? {children} : <>{children}; + +export default ConditionalLink; diff --git a/FE/airbnb/src/recoil/headerAtom.ts b/FE/airbnb/src/recoil/headerAtom.ts index d93c0676e..ad7d846e9 100644 --- a/FE/airbnb/src/recoil/headerAtom.ts +++ b/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({ key: 'tabSelectedState', @@ -40,3 +42,19 @@ export const guestState = atom({ 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 }; + }, +}); diff --git a/FE/airbnb/src/util/api.ts b/FE/airbnb/src/util/api.ts index 83d657db8..df16f674f 100644 --- a/FE/airbnb/src/util/api.ts +++ b/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; }, }; diff --git a/FE/airbnb/src/util/util.js b/FE/airbnb/src/util/util.js new file mode 100644 index 000000000..6cc9c9967 --- /dev/null +++ b/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);