[#42] mordal 포탈 구현

codesquad-members-2021 · Jun 2, 2021 · b8d0dd4 · b8d0dd4
1 parent fcd4579
commit b8d0dd4
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 24 deletions.
diff --git a/FE/airbnb/public/index.html b/FE/airbnb/public/index.html
@@ -13,5 +13,6 @@
   </head>
   <body>
     <div id="root"></div>
+    <div id="modal"></div>
   </body>
 </html>
diff --git 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 (
-    <StyledReserveRoom onClick={handleClick}>
+    <StyledReserveRoom ref={clickRef}>
       <div className='room__img'>
         <img src={photo} alt='' />
       </div>
@@ -34,7 +33,7 @@ const ReserveRoom = ({ roomData }: Props) => {
           <ReserveRoomPrice roomData={roomData} />
         </div>
       </div>
-      {open && <ReserveForm roomData={roomData} />}
+      {open && <ReserveForm toggleRef={toggleRef} roomData={roomData} />}
     </StyledReserveRoom>
   );
 };

diff --git a/FE/airbnb/src/components/reserveRoomList/reserveForm/ReserveForm.tsx b/FE/airbnb/src/components/reserveRoomList/reserveForm/ReserveForm.tsx
@@ -1,40 +1,53 @@
+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<HTMLDivElement>;
   roomData: roomType;
 }
 
-const ReserveForm = ({ roomData }: Props) => {
+const ReserveForm = ({ toggleRef, roomData }: Props) => {
   const { chargePerNight } = roomData;
-
+  const portalElement: HTMLDivElement | null = document.querySelector('#modal');
   return (
-    <StyledReserveFormWrapper>
-      <StyledReserveForm>
-        <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>
+    portalElement &&
+    createPortal(
+      <StyledReserveFormWrapper>
+        <StyledReserveForm ref={toggleRef}>
+          <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>,
+      portalElement
+    )
   );
 };
 
 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);
 `;
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,5 +13,6 @@ @@
       </head>
       <body>
         <div id="root"></div>
+        <div id="modal"></div>
       </body>
     </html>