[#44] 예약 폼 UI

codesquad-members-2021 · Jun 2, 2021 · 40721e1 · 40721e1
1 parent d4ddc9a
commit 40721e1
Show file tree

Hide file tree

Showing 4 changed files with 171 additions and 29 deletions.
diff --git a/FE/airbnb/src/components/reserveRoomList/reserveForm/ReserveBtn.tsx b/FE/airbnb/src/components/reserveRoomList/reserveForm/ReserveBtn.tsx
@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+
+interface Props {
+  className: string;
+}
+
+const ReserveBtn = ({ className }: Props) => {
+  return <StyledReserveBtn className={className}>예약하기</StyledReserveBtn>;
+};
+
+export default ReserveBtn;
+
+const StyledReserveBtn = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 55px;
+  border: none;
+  border-radius: 10px;
+  background-color: ${({ theme }) => theme.colors.black};
+  color: ${({ theme }) => theme.colors.white};
+  font-weight: 700;
+`;
diff --git a/FE/airbnb/src/components/reserveRoomList/reserveForm/ReserveForm.tsx b/FE/airbnb/src/components/reserveRoomList/reserveForm/ReserveForm.tsx
@@ -1,34 +1,28 @@
-import { useRecoilValue } from 'recoil';
 import styled from 'styled-components';
-import { selectDateState } from '../../../recoil/calendarAtom';
-import { getBetweenDays } from '../../header/form/calendar/calendarDateFn';
 import { roomType } from '../roomType';
+import ReserveBtn from './ReserveBtn';
 import ReserveFormHeader from './ReserveFormHeader';
 import ReserveFormInfo from './ReserveFormInfo';
+import ReserveFromPrice from './ReserveFromPrice';
 interface Props {
   roomData: roomType;
 }
 
 const ReserveForm = ({ roomData }: Props) => {
-  const selectDate = useRecoilValue(selectDateState);
   const { chargePerNight } = roomData;
 
-  const getCleanCharge = (totalPrice: number): number => Math.floor(totalPrice * 0.03);
-  const getServiceCharge = (totalPrice: number): number => Math.floor(totalPrice * 0.15);
-  const getTaxCharge = (totalPrice: number): number => Math.floor(totalPrice * 0.01);
-
-  const betweenDays = getBetweenDays(selectDate.checkIn, selectDate.checkOut);
-  const totalPrice = chargePerNight * betweenDays;
-
-  const cleanCharge = getCleanCharge(totalPrice);
-  const serviceCharge = getServiceCharge(totalPrice);
-  const taxCharge = getTaxCharge(totalPrice);
-
   return (
     <StyledReserveFormWrapper>
       <StyledReserveForm>
-        <ReserveFormHeader className='header' chargePerNight={chargePerNight} review={127} />
-        <ReserveFormInfo />
+        <ReserveFormHeader
+          className='reserve__header'
+          chargePerNight={chargePerNight}
+          review={127}
+        />
+        <ReserveFormInfo className='reserve__info' />
+        <ReserveBtn className='reserve__btn' />
+        <div className='reserve__warn'>예약 확정 전에는 요금이 청구되지 않습니다.</div>
+        <ReserveFromPrice chargePerNight={chargePerNight} />
       </StyledReserveForm>
     </StyledReserveFormWrapper>
   );
@@ -45,10 +39,23 @@ const StyledReserveFormWrapper = styled.div`
 `;
 
 const StyledReserveForm = styled.div`
-  padding: 24px;
+  padding: 36px 24px;
   width: 400px;
-  height: 500px;
+  height: 525px;
   background-color: ${({ theme }) => theme.colors.white};
   border-radius: 10px;
   box-shadow: 0px 4px 10px rgba(51, 51, 51, 0.1), 0px 0px 4px rgba(51, 51, 51, 0.05);
+  .reserve__header {
+    margin-bottom: 1.5rem;
+  }
+  .reserve__info,
+  .reserve__btn,
+  .reserve__warn {
+    margin-bottom: 1rem;
+  }
+  .reserve__warn {
+    text-align: center;
+    font-size: ${({ theme }) => theme.fontSize.small};
+    color: ${({ theme }) => theme.colors.gray3};
+  }
 `;
diff --git a/FE/airbnb/src/components/reserveRoomList/reserveForm/ReserveFormInfo.tsx b/FE/airbnb/src/components/reserveRoomList/reserveForm/ReserveFormInfo.tsx
@@ -4,9 +4,11 @@ import { selectDateState } from '../../../recoil/calendarAtom';
 import { guestState } from '../../../recoil/headerAtom';
 import { getDateByTime } from '../../header/form/calendar/calendarDateFn';
 
-interface Props {}
+interface Props {
+  className?: string;
+}
 
-const ReserveFormInfo = (props: Props) => {
+const ReserveFormInfo = ({ className }: Props) => {
   const selectDate = useRecoilValue(selectDateState);
   const guestDate = useRecoilValue(guestState);
 
@@ -21,20 +23,22 @@ const ReserveFormInfo = (props: Props) => {
   const totalGuest = Object.values(guestDate).reduce((acc, cur) => acc + cur);
 
   return (
-    <StyledReserveFormInfo>
+    <StyledReserveFormInfo className={className}>
       <div className='reserve-form__column'>
-        <div className='reserve-form__date'>
+        <div className='reserve-form__date reserve-form__item'>
           <div className='reserve-form__title'>체크인</div>
           <div className='reserve-form__info'>{checkInDate}</div>
         </div>
-        <div className='reserve-form__date'>
+        <div className='reserve-form__date reserve-form__item'>
           <div className='reserve-form__title'>체크아웃</div>
           <div className='reserve-form__info'>{checkOutDate}</div>
         </div>
       </div>
       <div className='reserve-form__column'>
-        <div className='reserve-form__title'>인원</div>
-        <div className='reserve-form__info'>게스트 {totalGuest}명</div>
+        <div className='reserve-form__item'>
+          <div className='reserve-form__title'>인원</div>
+          <div className='reserve-form__info'>게스트 {totalGuest}명</div>
+        </div>
       </div>
     </StyledReserveFormInfo>
   );
@@ -43,11 +47,31 @@ const ReserveFormInfo = (props: Props) => {
 export default ReserveFormInfo;
 
 const StyledReserveFormInfo = styled.div`
-  .reserve-form__date,
+  border-radius: 10px;
   .reserve-form__column {
-    padding: 1rem;
+    display: flex;
+    align-items: center;
   }
+  .reserve-form__item {
+    padding: 8px;
+    .reserve-form__title {
+      font-size: ${({ theme }) => theme.fontSize.small};
+      font-weight: 700;
+    }
+    .reserve-form__info {
+      color: ${({ theme }) => theme.colors.gray2};
+    }
+  }
+  border: ${({ theme }) => `1px solid ${theme.colors.gray4}`};
   .reserve-form__column:first-child {
-    display: flex;
+  }
+  .reserve-form__date {
+    flex: 1;
+  }
+  .reserve-form__date:first-child {
+    border-right: ${({ theme }) => `1px solid ${theme.colors.gray4}`};
+  }
+  .reserve-form__column:last-child {
+    border-top: ${({ theme }) => `1px solid ${theme.colors.gray4}`};
   }
 `;
diff --git a/FE/airbnb/src/components/reserveRoomList/reserveForm/ReserveFromPrice.tsx b/FE/airbnb/src/components/reserveRoomList/reserveForm/ReserveFromPrice.tsx
@@ -0,0 +1,87 @@
+import { useRecoilValue } from 'recoil';
+import styled from 'styled-components';
+import { selectDateState } from '../../../recoil/calendarAtom';
+import { getBetweenDays } from '../../header/form/calendar/calendarDateFn';
+
+interface Props {
+  chargePerNight: number;
+}
+
+const ReserveFromPrice = ({ chargePerNight }: Props) => {
+  const selectDate = useRecoilValue(selectDateState);
+
+  const getCleanCharge = (totalPrice: number): number => Math.floor(totalPrice * 0.03);
+  const getServiceCharge = (totalPrice: number): number => Math.floor(totalPrice * 0.15);
+  const getTaxCharge = (totalPrice: number): number => Math.floor(totalPrice * 0.01);
+
+  const betweenDays = getBetweenDays(selectDate.checkIn, selectDate.checkOut);
+  const totalPrice = chargePerNight * betweenDays;
+
+  const cleanCharge = getCleanCharge(totalPrice);
+  const serviceCharge = getServiceCharge(totalPrice);
+  const taxCharge = getTaxCharge(totalPrice);
+
+  const totalCharge = totalPrice + cleanCharge + serviceCharge + taxCharge;
+
+  return (
+    <StyledReservePriceWrapper>
+      <StyledReserveFormPrice>
+        <div className='reserve-price__column'>
+          <div className='reserve-price__title'>
+            ￦{chargePerNight.toLocaleString()} x {betweenDays}박
+          </div>
+          <div className='reserve-price__price'>￦{totalPrice.toLocaleString()}</div>
+        </div>
+        <div className='reserve-price__column'>
+          <div className='reserve-price__title'>청소비</div>
+          <div className='reserve-price__price'>￦{cleanCharge.toLocaleString()}</div>
+        </div>
+        <div className='reserve-price__column'>
+          <div className='reserve-price__title'>서비스 수수료</div>
+          <div className='reserve-price__price'>￦{serviceCharge.toLocaleString()}</div>
+        </div>
+        <div className='reserve-price__column'>
+          <div className='reserve-price__title'>숙박세와 수수료</div>
+          <div className='reserve-price__price'>￦{taxCharge.toLocaleString()}</div>
+        </div>
+      </StyledReserveFormPrice>
+      <StyledReserveCharge>
+        <div className='reserve-price__column'>
+          <div className='reserve-price__title'>총 합계</div>
+          <div className='reserve-price__price'>￦{totalCharge.toLocaleString()}</div>
+        </div>
+      </StyledReserveCharge>
+    </StyledReservePriceWrapper>
+  );
+};
+
+export default ReserveFromPrice;
+
+const StyledReservePriceWrapper = styled.div`
+  .reserve-price__column {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+  }
+  .reserve-price__title {
+    text-decoration: underline;
+  }
+`;
+
+const StyledReserveFormPrice = styled.div`
+  padding-bottom: 1rem;
+  border-bottom: ${({ theme }) => `2px solid ${theme.colors.gray5}`};
+  margin-bottom: 1rem;
+`;
+
+const StyledReserveCharge = styled.div`
+  font-weight: 700;
+  .reserve-price__column {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+  }
+  .reserve-price__title {
+    text-decoration: underline;
+  }
+`;