diff --git a/FE/airbnb/src/App.tsx b/FE/airbnb/src/App.tsx index 142e9b379..fba4bb3d5 100644 --- a/FE/airbnb/src/App.tsx +++ b/FE/airbnb/src/App.tsx @@ -5,6 +5,8 @@ import MainPage from './pages/MainPage'; import ReservePage from './pages/ReservePage'; import { Suspense } from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; +import { useRecoilValue } from 'recoil'; +import { reserveInfoSelector } from './recoil/headerAtom'; declare global { interface Window { @@ -13,7 +15,6 @@ declare global { } function App() { - console.log('app'); return ( @@ -21,7 +22,7 @@ function App() { - + diff --git a/FE/airbnb/src/components/header/form/FormGuest.tsx b/FE/airbnb/src/components/header/form/FormGuest.tsx index bb395b099..8b8ff4525 100644 --- a/FE/airbnb/src/components/header/form/FormGuest.tsx +++ b/FE/airbnb/src/components/header/form/FormGuest.tsx @@ -10,6 +10,7 @@ import { guestState, isFormOpenedState, reserveInfoSelector } from '../../../rec import { ReactComponent as DeleteBtn } from '../../../assets/svg/Property 1=x-circle.svg'; import { Link } from 'react-router-dom'; import ConditionalLink from '../../util/ConditionalLink'; +import { reserveInfoType, clientReserveAPI } from '../../../util/api'; const FormGuest = () => { const clickRef = useRef(null); @@ -44,18 +45,20 @@ const FormGuest = () => { }; const handleSubmitClick = (e: MouseEvent): void => { + console.log(reserveInfo); e.stopPropagation(); }; - const linkCondition = Object.values(reserveInfo).filter((v) => !v).length === 0; - + const linkCondition = + Object.values(reserveInfo as reserveInfoType).filter((v) => !v).length === 0; + const linkURL = clientReserveAPI(reserveInfo as reserveInfoType); return ( {isShowDeleteBtn && } - +
{isFormOpened &&
검색
} diff --git a/FE/airbnb/src/components/header/form/calendar/calendarDateFn.tsx b/FE/airbnb/src/components/header/form/calendar/calendarDateFn.tsx index a0e18058f..2b79451b3 100644 --- a/FE/airbnb/src/components/header/form/calendar/calendarDateFn.tsx +++ b/FE/airbnb/src/components/header/form/calendar/calendarDateFn.tsx @@ -49,4 +49,11 @@ export const dateToString = (date: date | void): string => { return `${year}-${newMonth}-${newDay}`; }; +const stringToDate = (date: string): date => { + const [year, month, day] = date.split('-').map((v) => +v); + return { year, month, day }; +}; + export const timeToDate = pipe(getDateByTime, dateToString); + +export const dateToTime = pipe(stringToDate, getTimes); diff --git a/FE/airbnb/src/components/reserveHeader/ReserveForm.tsx b/FE/airbnb/src/components/reserveHeader/ReserveForm.tsx index 883de5d85..15e6c8192 100644 --- a/FE/airbnb/src/components/reserveHeader/ReserveForm.tsx +++ b/FE/airbnb/src/components/reserveHeader/ReserveForm.tsx @@ -1,5 +1,7 @@ import { useRef } from 'react'; +import { useRecoilValue } from 'recoil'; import styled from 'styled-components'; +import { reserveInfoSelector } from '../../recoil/headerAtom'; import FormCheckIn from '../header/form/FormCheckIn'; import FormCheckOut from '../header/form/FormCheckOut'; import FormGuest from '../header/form/FormGuest'; @@ -9,6 +11,8 @@ interface Props {} const ReserveForm = (props: Props) => { const checkOutRef = useRef(null); + const reserveInfo = useRecoilValue(reserveInfoSelector); + console.log(reserveInfo); return ( diff --git a/FE/airbnb/src/pages/ReservePage.tsx b/FE/airbnb/src/pages/ReservePage.tsx index 4351fb0fe..64e3aaa81 100644 --- a/FE/airbnb/src/pages/ReservePage.tsx +++ b/FE/airbnb/src/pages/ReservePage.tsx @@ -1,14 +1,31 @@ -import { useRecoilValue } from 'recoil'; +import { useEffect } from 'react'; +import { useRecoilValue, useSetRecoilState } from 'recoil'; import styled from 'styled-components'; import Map from '../components/map/Map'; import ReserveHeader from '../components/reserveHeader/ReserveHeader'; import ReserveRoomList from '../components/reserveRoomList/ReserveRoomList'; -import { getRoomsSelector } from '../recoil/reserveRoomAtom'; +import { reserveInfoSelector } from '../recoil/headerAtom'; interface Props {} const ReservePage = ({}: Props) => { - // const data = useRecoilValue(getRoomsSelector); + const setReserveInfoSelector = useSetRecoilState(reserveInfoSelector); + useEffect(() => { + const [encodedAddress, checkIn, checkOut, minCharge, maxCharge, adult, child, infants] = + window.location.search.split('&').map((v) => v.split('=')[1]); + const address = decodeURI(encodedAddress); + const reserveInfoSelector = { + address, + checkIn: +checkIn, + checkOut: +checkOut, + minCharge: +minCharge, + maxCharge: +maxCharge, + adult: +adult, + child: +child, + infants: +infants, + }; + setReserveInfoSelector(reserveInfoSelector); + }, []); return ( diff --git a/FE/airbnb/src/recoil/headerAtom.ts b/FE/airbnb/src/recoil/headerAtom.ts index ad7d846e9..27068e787 100644 --- a/FE/airbnb/src/recoil/headerAtom.ts +++ b/FE/airbnb/src/recoil/headerAtom.ts @@ -1,5 +1,4 @@ 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'; @@ -43,18 +42,47 @@ export const guestState = atom({ default: { adult: 0, child: 0, infants: 0 }, }); +interface reserveInfoType { + address: string; + checkIn: number; + checkOut: number; + minCharge: number; + maxCharge: number; + adult: number; + child: number; + infants: number; +} +interface reserveQeuryType { + address: string; + checkIn: number | null; + checkOut: number | null; + minCharge: number; + maxCharge: number; + guests: guestStateType; +} + export const reserveInfoSelector = selector({ key: 'reserveInformation', - get: ({ get }) => { + get: ({ get }): reserveQeuryType => { const address = get(locationState); const selectDateData = get(selectDateState); - const checkIn = timeToDate(selectDateData.checkIn); - const checkOut = timeToDate(selectDateData.checkOut); + const checkIn = selectDateData.checkIn; + const checkOut = 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); + const guests = get(guestState); return { address, checkIn, checkOut, minCharge, maxCharge, guests }; }, + set: ({ set }, newState): void => { + const { address, checkIn, checkOut, minCharge, maxCharge, adult, child, infants } = + newState as reserveInfoType; + const date = { checkIn, checkOut }; + const price = { min: minCharge, max: maxCharge }; + const guests = { adult, child, infants }; + set(locationState, address); + set(selectDateState, date); + set(priceState, price); + set(guestState, guests); + }, }); diff --git a/FE/airbnb/src/util/api.ts b/FE/airbnb/src/util/api.ts index df16f674f..737922fe9 100644 --- a/FE/airbnb/src/util/api.ts +++ b/FE/airbnb/src/util/api.ts @@ -1,12 +1,13 @@ -import { dateToString, getDateByTime } from '../components/header/form/calendar/calendarDateFn'; +import { timeToDate } from '../components/header/form/calendar/calendarDateFn'; +import { guestStateType } from '../components/header/form/guestToggle/guestType'; -interface reserveInfoType { +export interface reserveInfoType { address: string; - checkIn: number; - checkOut: number; + checkIn: number | null; + checkOut: number | null; minCharge: number; maxCharge: number; - guests: number; + guests: guestStateType; } interface apiType { @@ -23,10 +24,23 @@ interface apiType { export const API: apiType = { url: 'http://13.125.35.62', getRooms: ({ address, checkIn, checkOut, minCharge, maxCharge, guests }) => { - const url = API.url; - const checkInDate = dateToString(getDateByTime(checkIn)); - const checkOutDate = dateToString(getDateByTime(checkOut)); - const query = `address=${address}&check_in=${checkInDate}&check_out=${checkOutDate}&min_charge=${minCharge}&max_charge=${maxCharge}&guests=${guests}`; - return url + '/accommodations?' + query; + const checkInDate = timeToDate(checkIn); + const checkOutDate = timeToDate(checkOut); + const guestNumber = Object.values(guests).reduce((acc, cur) => acc + cur); + const query = `address=${address}&check_in=${checkInDate}&check_out=${checkOutDate}&min_charge=${minCharge}&max_charge=${maxCharge}&guests=${guestNumber}`; + return '/accommodations?' + query; }, }; + +export const clientReserveAPI = ({ + address, + checkIn, + checkOut, + minCharge, + maxCharge, + guests, +}: reserveInfoType): string => { + const { adult, child, infants } = guests; + const query = `address=${address}&check_in=${checkIn}&check_out=${checkOut}&min_charge=${minCharge}&max_charge=${maxCharge}&adult=${adult}&child=${child}&infants=${infants}`; + return `/accommodations?` + query; +}; diff --git a/FE/airbnb/src/util/util.js b/FE/airbnb/src/util/util.js index 6cc9c9967..d1c77545e 100644 --- a/FE/airbnb/src/util/util.js +++ b/FE/airbnb/src/util/util.js @@ -4,3 +4,13 @@ export const pipe = (fn, ...fns) => (...args) => go(fn(...args), ...fns); + +export const getUrlParams = () => { + var params = {}; + + window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (str, key, value) { + params[key] = value; + }); + + return params; +};