diff --git a/FE/airbnb/src/components/reserveRoomList/reserveForm/ReserveBtn.tsx b/FE/airbnb/src/components/reserveRoomList/reserveForm/ReserveBtn.tsx new file mode 100644 index 000000000..a0e8d4481 --- /dev/null +++ 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 예약하기; +}; + +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 index c837076e5..b57c66cb2 100644 --- 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 ( - - + + + +
예약 확정 전에는 요금이 청구되지 않습니다.
+ ); @@ -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 index 586693427..168865e6e 100644 --- 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 ( - +
-
+
체크인
{checkInDate}
-
+
체크아웃
{checkOutDate}
-
인원
-
게스트 {totalGuest}명
+
+
인원
+
게스트 {totalGuest}명
+
); @@ -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 new file mode 100644 index 000000000..1b354f7e5 --- /dev/null +++ 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 ( + + +
+
+ ￦{chargePerNight.toLocaleString()} x {betweenDays}박 +
+
￦{totalPrice.toLocaleString()}
+
+
+
청소비
+
￦{cleanCharge.toLocaleString()}
+
+
+
서비스 수수료
+
￦{serviceCharge.toLocaleString()}
+
+
+
숙박세와 수수료
+
￦{taxCharge.toLocaleString()}
+
+ + +
+
총 합계
+
￦{totalCharge.toLocaleString()}
+
+ + + ); +}; + +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; + } +`;