[#42] map 스켈레톤 UI css 시도

FE/airbnb/src/App.tsx

@@ -21,9 +21,7 @@ function App() {
             <MainPage />
           </Route>
           <Route path='/accommodations'>
-            <Suspense fallback='loading'>
-              <ReservePage />
-            </Suspense>
+            <ReservePage />
           </Route>
         </Router>
       </StyledApp>

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

@@ -8,7 +8,6 @@ import FormGuestToggle from './guestToggle/FormGuestToggle';
 import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil';
 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';
 import { reserveInfoType, clientReserveAPI } from '../../../util/api';
 
@@ -45,7 +44,6 @@ const FormGuest = () => {
   };
 
   const handleSubmitClick = (e: MouseEvent): void => {
-    console.log(reserveInfo);
     e.stopPropagation();
   };
 

FE/airbnb/src/components/reservePageSkeleton/MapSkeleton.tsx

@@ -0,0 +1,38 @@
+import styled from 'styled-components';
+
+interface Props {}
+
+const MapSkeleton = (props: Props) => {
+  return <StyledMapSkeleton className='skeleton-screen'>loading</StyledMapSkeleton>;
+};
+
+export default MapSkeleton;
+
+const StyledMapSkeleton = styled.div`
+  background-color: #f2f2f2;
+  position: absolute;
+  right: 0;
+  width: 50%;
+  height: 100%;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(to right, #f2f2f2, #ddd, #f2f2f2);
+    animation: loading 1s infinite linear;
+  }
+
+  @keyframes loading {
+    0% {
+      transform: translateX(0);
+    }
+    50%,
+    100% {
+      transform: translateX(460px);
+    }
+  }
+`;

FE/airbnb/src/components/reservePageSkeleton/ReserveSkeleton.tsx

@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+interface Props {}
+
+const ReserveSkeleton = (props: Props) => {
+  return (
+    <StyledReserveSkeleton>
+      <div className='skeleton__img'></div>
+      <div className='skeleton__desc'>
+        <div className='skeleton__info'></div>
+        <div className='skeleton__price'></div>
+      </div>
+    </StyledReserveSkeleton>
+  );
+};
+
+export default ReserveSkeleton;
+
+const StyledReserveSkeleton = styled.div`
+  .skeleton__img,
+  .skeleton__info,
+  .skeleton__price {
+    background-color: f2f2f2;
+  }
+`;

FE/airbnb/src/components/reserveRoomList/ReserveRoomList.tsx

@@ -14,6 +14,7 @@ const ReserveRoomList = ({ className }: Props) => {
   const reserveRoomList =
     roomsData &&
     roomsData.map((roomData, idx) => <ReserveRoom key={roomData.id + idx} roomData={roomData} />);
+  // const reserveRoomList = roomsData && roomsData.map((roomData, idx) => <ReserveSkeleton />);
   return (
     <StyledReserveRoomList className={className}>
       <div className='data__info'>

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

@@ -7,6 +7,6 @@ interface Props {
 }
 
 const ConditionalLink = ({ children, to, condition }: Props) =>
-  !!condition && to ? <Link to={to}>{children}</Link> : <>{children}</>;
+  condition && to ? <Link to={to}>{children}</Link> : <>{children}</>;
 
 export default ConditionalLink;

FE/airbnb/src/pages/ReservePage.tsx

@@ -1,8 +1,9 @@
-import { useEffect } from 'react';
+import { Suspense, useEffect } from 'react';
 import { useRecoilValue, useRecoilState } from 'recoil';
 import styled from 'styled-components';
 import Map from '../components/map/Map';
 import ReserveHeader from '../components/reserveHeader/ReserveHeader';
+import MapSkeleton from '../components/reservePageSkeleton/MapSkeleton';
 import ReserveRoomList from '../components/reserveRoomList/ReserveRoomList';
 import { reserveInfoSelector } from '../recoil/headerAtom';
 import { getRoomsSelector } from '../recoil/reserveRoomAtom';
@@ -11,8 +12,6 @@ interface Props {}
 
 const ReservePage = ({}: Props) => {
   const [reserveInfo, setReserveInfo] = useRecoilState(reserveInfoSelector);
-  const roomsData = useRecoilValue(getRoomsSelector);
-  console.log(roomsData);
   useEffect(() => {
     const [encodedAddress, checkIn, checkOut, minCharge, maxCharge, adult, child, infants] =
       getQueryValue(window.location.search);
@@ -35,8 +34,12 @@ const ReservePage = ({}: Props) => {
   return (
     <StyledReservePage>
       <ReserveHeader />
-      <ReserveRoomList className='rooms' />
-      <Map className='map' />
+      <Suspense fallback=''>
+        <ReserveRoomList className='rooms' />
+      </Suspense>
+      <Suspense fallback={<MapSkeleton />}>
+        <Map className='map' />
+      </Suspense>
     </StyledReservePage>
   );
 };

FE/airbnb/src/recoil/reserveRoomAtom.ts

@@ -1,6 +1,7 @@
 import { atom, selector } from 'recoil';
 import { roomType } from '../components/reserveRoomList/roomType';
 import { serverAPI } from '../util/api';
+import { delay } from '../util/util';
 import { reserveInfoSelector, reserveQueryType } from './headerAtom';
 import { roomData } from './roomSampleData';
 
@@ -20,7 +21,8 @@ export const getRoomsSelector = selector({
     if (isUndefined(reserveInfo)) return null;
     const response = await fetch(serverAPI.getRooms(reserveInfo));
     const data = await response.json();
-    return data;
+
+    return delay(1000, data);
   },
 });
 

FE/airbnb/src/util/util.js

@@ -14,3 +14,6 @@ export const getUrlParams = () => {
 
   return params;
 };
+
+export const delay = (time, value = '') =>
+  new Promise((resolve) => setTimeout(() => resolve(value), time));