[#42] 라우터 적용 및 쿼리에서 데이터 가져와서 setting

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,15 +15,14 @@ declare global {
 }
 
 function App() {
-  console.log('app');
   return (
     <ThemeProvider theme={theme}>
       <StyledApp>
         <Router>
           <Route exact={true} path='/'>
             <MainPage />
           </Route>
-          <Route path='/reserve'>
+          <Route path='/accommodations'>
             <Suspense fallback='loading'>
               <ReservePage />
             </Suspense>

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<HTMLDivElement>(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 (
     <StyledFormGuestWrapper>
       <StyledFormGuest ref={clickRef} isFormOpened={isFormOpened}>
         <HoverBlock color='gray4' className='hover__guest' dataKey='guest' isModal={open}>
           <FormColumn title='인원' description={getGuestDesc()} />
           {isShowDeleteBtn && <DeleteBtn onClick={handleDeleteClick} />}
-          <ConditionalLink to='/reserve' condition={linkCondition}>
+          <ConditionalLink to={linkURL} condition={linkCondition}>
             <div className='search-icon' onClick={handleSubmitClick}>
               <IoSearch />
               {isFormOpened && <div className='search'>검색</div>}

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);

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<HTMLDivElement>(null);
+  const reserveInfo = useRecoilValue(reserveInfoSelector);
+  console.log(reserveInfo);
   return (
     <StyledReserveForm>
       <FormCheckIn checkOutRef={checkOutRef} />

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 (
     <StyledReservePage>
       <ReserveHeader />

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<guestStateType>({
   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);
+  },
 });

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;
+};

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;
+};