From b8d0dd49a507b8559cd7c20d98149641c771be1f Mon Sep 17 00:00:00 2001 From: hayoung123 <67357426+hayoung123@users.noreply.github.com> Date: Thu, 3 Jun 2021 01:46:05 +0900 Subject: [PATCH] =?UTF-8?q?[#42]=20mordal=20=ED=8F=AC=ED=83=88=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/airbnb/public/index.html | 1 + .../reserveRoomList/ReserveRoom.tsx | 15 +++---- .../reserveForm/ReserveForm.tsx | 45 ++++++++++++------- 3 files changed, 37 insertions(+), 24 deletions(-) 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); `;