diff --git a/FE/airbnb/public/index.html b/FE/airbnb/public/index.html index d16d1a6f2..0f2f85fde 100644 --- a/FE/airbnb/public/index.html +++ b/FE/airbnb/public/index.html @@ -13,5 +13,6 @@
+ diff --git a/FE/airbnb/src/components/reserveRoomList/ReserveRoom.tsx b/FE/airbnb/src/components/reserveRoomList/ReserveRoom.tsx index 6481f2db4..cd47f08bc 100644 --- a/FE/airbnb/src/components/reserveRoomList/ReserveRoom.tsx +++ b/FE/airbnb/src/components/reserveRoomList/ReserveRoom.tsx @@ -5,22 +5,21 @@ import { roomType } from './roomType'; import ReserveRoomGrade from './ReserveRoomGrade'; import ReserveRoomPrice from './ReserveRoomPrice'; import ReserveForm from './reserveForm/ReserveForm'; -import { useState } from 'react'; +import { useRef } from 'react'; +import useToggle from '../../hooks/useToggle'; interface Props { roomData: roomType; } const ReserveRoom = ({ roomData }: Props) => { - const [open, setOpen] = useState(false); const { photo } = roomData; - - const handleClick = () => { - setOpen(true); - }; + const clickRef = useRef(null); + const toggleRef = useRef(null); + const { open } = useToggle({ clickRef, toggleRef }); return ( - +
@@ -34,7 +33,7 @@ const ReserveRoom = ({ roomData }: Props) => { - {open && } + {open && } ); }; diff --git a/FE/airbnb/src/components/reserveRoomList/reserveForm/ReserveForm.tsx b/FE/airbnb/src/components/reserveRoomList/reserveForm/ReserveForm.tsx index b57c66cb2..612227160 100644 --- a/FE/airbnb/src/components/reserveRoomList/reserveForm/ReserveForm.tsx +++ b/FE/airbnb/src/components/reserveRoomList/reserveForm/ReserveForm.tsx @@ -1,30 +1,39 @@ +import { RefObject } from 'react'; import styled from 'styled-components'; import { roomType } from '../roomType'; import ReserveBtn from './ReserveBtn'; import ReserveFormHeader from './ReserveFormHeader'; import ReserveFormInfo from './ReserveFormInfo'; import ReserveFromPrice from './ReserveFromPrice'; +import { createPortal } from 'react-dom'; +import usePortal from '../../../hooks/usePortal'; + interface Props { + toggleRef: RefObject; roomData: roomType; } -const ReserveForm = ({ roomData }: Props) => { +const ReserveForm = ({ toggleRef, roomData }: Props) => { const { chargePerNight } = roomData; - + const portalElement: HTMLDivElement | null = document.querySelector('#modal'); return ( - - - - - -
예약 확정 전에는 요금이 청구되지 않습니다.
- - - + portalElement && + createPortal( + + + + + +
예약 확정 전에는 요금이 청구되지 않습니다.
+ + + , + portalElement + ) ); }; @@ -32,9 +41,13 @@ export default ReserveForm; const StyledReserveFormWrapper = styled.div` z-index: 10; - position: absolute; + position: fixed; + top: 0; width: 100%; height: 100%; + display: flex; + align-items: center; + justify-content: center; background-color: rgba(0, 0, 0, 0.3); `;