diff --git a/api/room.ts b/api/room.ts
index 14cd6c0..473e8ff 100644
--- a/api/room.ts
+++ b/api/room.ts
@@ -42,3 +42,12 @@ export const getRoom = async (id: string) => {
     },
   });
 };
+
+export const deleteRoom = async (id: string) => {
+  return fetchData<RoomSearch>(`/api/v1/rooms/${id}?id=${id}`, {
+    method: 'DELETE',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+};
diff --git a/components/Modal/Modal.module.scss b/components/Modal/Modal.module.scss
index 863cd9c..c373ed5 100644
--- a/components/Modal/Modal.module.scss
+++ b/components/Modal/Modal.module.scss
@@ -9,7 +9,7 @@
 }
 
 .overlay {
-  @apply bg-[rgba(0,0,0,0.2)] w-full h-full fixed top-0 z-[1000];
+  @apply bg-[rgba(0,0,0,0.2)] w-full h-full fixed top-0 z-[1000] max-w-[440px] min-w-[320px];
 }
 
 .full {
diff --git a/pages/room/[id].tsx b/pages/room/[id].tsx
index 8c0bc5f..7e12b6e 100644
--- a/pages/room/[id].tsx
+++ b/pages/room/[id].tsx
@@ -14,52 +14,63 @@ import ReceiptBadge from '@/public/icons/receipt-badge.svg';
 import Badge from '@/components/Badge/Badge';
 import Like from '@/public/icons/like.svg';
 import MyImageSvg from '@/components/ImageSvg/ImageSvg';
-import { fetchFurnishings, getRoom } from '@/api/room';
-import { Option } from '@/components/Select/Select';
+import { deleteRoom, fetchFurnishings, getRoom } from '@/api/room';
+import useModal from '@/hooks/useModal';
+import { useSession } from 'next-auth/react';
 import styles from './room.module.scss';
 
-const RoomDetailLayout = ({ children }: any) => {
-  const [showModal, setShowModal] = React.useState(false);
+// const RoomDetailLayout = ({ children }: any) => {
+//   const router = useRouter();
+//   const { id } = router.query;
 
-  const handleButtonClick = () => {
-    window.history.back();
-  };
+//   const { openModal, closeModal } = useModal();
 
-  const showDeleteModal = () => {
-    setShowModal(true);
-  };
+//   const handleButtonClick = () => {
+//     window.history.back();
+//   };
 
-  const handleDeleteRoom = () => {
-    alert('삭제 레츠고,,,,');
-    setShowModal(false);
-  };
+//   const removeRoom = async () => {
+//     if (typeof id === 'string') {
+//       await deleteRoom(id);
+//     }
+//   };
 
-  return (
-    <>
-      <Header
-        type="back"
-        bgColor="white"
-        handleButtonClick={handleButtonClick}
-        right="delete"
-        handleSecondButtonClick={showDeleteModal}
-      />
-      <div className="mx-auto mt-[54px]">{children}</div>
-      {showModal && (
-        <ModalBox
-          title="Delete this post?"
-          content="You will not be able to restore this post."
-          buttonType="both"
-          buttonName="Cancel"
-          buttonName2="Delete"
-          handleClose={() => setShowModal(false)}
-          handleSecondButton={handleDeleteRoom}
-        />
-      )}
-    </>
-  );
-};
+//   const showDeleteModal = () => {
+//     openModal({
+//       props: {
+//         title: 'Delete this post?',
+//         content: 'You will not be able to restore this post.',
+//         buttonType: 'both',
+//         buttonName: 'Cancel',
+//         buttonName2: 'Delete',
+//         hasCloseButton: true,
+//         handleClose: () => {
+//           closeModal();
+//         },
+//         handleSecondButton: async () => {
+//           await removeRoom();
+//           router.push('/');
+//           closeModal();
+//         },
+//       },
+//     });
+//   };
 
-const Page = () => {
+//   return (
+//     <>
+//       <Header
+//         type="back"
+//         bgColor="white"
+//         handleButtonClick={handleButtonClick}
+//         right="delete"
+//         handleSecondButtonClick={showDeleteModal}
+//       />
+//       <div className="mx-auto mt-[54px]">{children}</div>
+//     </>
+//   );
+// };
+
+export default function RoomDetail() {
   const router = useRouter();
   const { id } = router.query;
 
@@ -74,13 +85,6 @@ const Page = () => {
 
   const roomType = room?.roomInfo.roomType === ROOM_TYPE.ONE_ROOM ? '1bed flats' : '';
 
-  const fetchRoom = async () => {
-    if (id && typeof id === 'string') {
-      const data = await getRoom(id);
-      setRoom(data);
-    }
-  };
-
   const [furnishings, setFurnishings] = useState<Furnishing[]>([]);
 
   const getFurnishings = async () => {
@@ -153,153 +157,198 @@ const Page = () => {
     );
   }, [room?.maintenance]);
 
+  const { openModal, closeModal } = useModal();
+
+  const handleButtonClick = () => {
+    window.history.back();
+  };
+
+  const removeRoom = async () => {
+    if (typeof id === 'string') {
+      await deleteRoom(id);
+    }
+  };
+
+  const session = useSession();
+  const email = session?.data?.user?.email;
+
+  const showDeleteModal = () => {
+    openModal({
+      props: {
+        title: 'Delete this post?',
+        content: 'You will not be able to restore this post.',
+        buttonType: 'both',
+        buttonName: 'Cancel',
+        buttonName2: 'Delete',
+        hasCloseButton: true,
+        handleClose: () => {
+          closeModal();
+        },
+        handleSecondButton: async () => {
+          await removeRoom();
+          router.push('/');
+          closeModal();
+        },
+      },
+    });
+  };
+
   return (
-    <div>
-      {room && (
-        <>
-          <div className="font-pretendard w-full mb-[71px]">
-            {room.imageFiles.length > 0 ? (
-              <Swiper
-                effect="coverflow"
-                slidesPerView={1}
-                loop
-                className="mySwiper !mx-[-20px] h-[240px] relative"
-                onSlideChangeTransitionEnd={(event) => handleSlideChange(event.realIndex)}
-              >
-                {room.imageFiles.map((image, idx) => (
-                  <SwiperSlide className={styles['swiper-slide']} key={`room-image-${idx}`}>
-                    <img src={image.path} alt={`room-${idx}`} />
-                  </SwiperSlide>
-                ))}
-                <div className={styles.tag}>
-                  {currentSlide + 1}/{room.imageFiles.length}
+    <>
+      <Header
+        type="back"
+        bgColor="white"
+        handleButtonClick={handleButtonClick}
+        right={email === room?.user.email ? 'delete' : undefined}
+        handleSecondButtonClick={showDeleteModal}
+      />
+      <div className="mx-auto mt-[54px]">
+        {room && (
+          <>
+            <div className="font-pretendard w-full mb-[71px]">
+              {room.imageFiles.length > 0 ? (
+                <Swiper
+                  effect="coverflow"
+                  slidesPerView={1}
+                  loop
+                  className="mySwiper !mx-[-20px] h-[240px] relative"
+                  onSlideChangeTransitionEnd={(event) => handleSlideChange(event.realIndex)}
+                >
+                  {room.imageFiles.map((image, idx) => (
+                    <SwiperSlide className={styles['swiper-slide']} key={`room-image-${idx}`}>
+                      <img src={image.path} alt={`room-${idx}`} />
+                    </SwiperSlide>
+                  ))}
+                  <div className={styles.tag}>
+                    {currentSlide + 1}/{room.imageFiles.length}
+                  </div>
+                </Swiper>
+              ) : (
+                <div
+                  className="!mx-[-20px] h-[240px] relative bg-cover"
+                  style={{ backgroundImage: `url(/images/thumb.png)` }}
+                />
+              )}
+              <div className="flex py-[20px]" onClick={toggleShowDetail}>
+                <MyImageSvg imageUrl={room.user.imageUrl || '/images/thumb.png'} />
+                <div className="ml-[12px]">
+                  <div className="text-[16px] text-g7 font-semibold">{room.user.firstName}</div>
+                  <div className="text-a2 text-[12px]">
+                    {age} years old
+                    <span className="text-g3">&nbsp;|&nbsp;</span>
+                    {room.user.gender}
+                  </div>
                 </div>
-              </Swiper>
-            ) : (
-              <div
-                className="!mx-[-20px] h-[240px] relative bg-cover"
-                style={{ backgroundImage: `url(/images/thumb.png)` }}
-              />
-            )}
-            <div className="flex py-[20px]" onClick={toggleShowDetail}>
-              <MyImageSvg imageUrl={room.user.imageUrl || '/images/thumb.png'} />
-              <div className="ml-[12px]">
-                <div className="text-[16px] text-g7 font-semibold">{room.user.firstName}</div>
-                <div className="text-a2 text-[12px]">
-                  {age} years old
-                  <span className="text-g3">&nbsp;|&nbsp;</span>
-                  {room.user.gender}
+                <Space />
+                <div className="flex items-center">
+                  <ArrowDown />
                 </div>
               </div>
-              <Space />
-              <div className="flex items-center">
-                <ArrowDown />
-              </div>
-            </div>
-            {isShowDetail && <div className="pb-[20px] text-g6">{room.user.description}</div>}
-            <hr />
-            <div className="font-pretendard text-[14px] text-g6 py-[20px]">
-              <div className="flex items-center">
-                <Pin className="mr-[12px]" />
-                {room.location.name}, {room.location.upperLocation?.name}
-              </div>
-              <div className="flex items-center">
-                <Calendar className="mr-[12px]" />
-                From {formatDate(room.availableDate)}
-              </div>
-            </div>
-            <hr />
-            <div className="py-[20px]">
-              <HomeBadge />
-              <p className="font-semibold text-g7 pt-[12px]">{roomType}</p>
-              <div className="text-g5 text-[14px] flex items-center gap-[6px]">
-                {room.roomInfo.bedrooms} bedrooms
-                <Dot className="fill-g5 stroke-[1.5px]" />
-                {room.roomInfo.bathrooms} bathrooms
-                <Dot className="fill-g5 stroke-[1.5px]" />
-                {room.roomInfo.roommates} housemates in total
-              </div>
-            </div>
-            <hr />
-            <div className="py-[20px]">
-              <ReceiptBadge />
-              <div className="flex flex-col gap-y-[8px] text-[16px] pt-[12px]">
-                <div className="flex">
-                  Deposit
-                  <Space />
-                  <span className="font-semibold">&#8361; {formatPrice(room.deposit.amount)} / month</span>
+              {isShowDetail && <div className="pb-[20px] text-g6">{room.user.description}</div>}
+              <hr />
+              <div className="font-pretendard text-[14px] text-g6 py-[20px]">
+                <div className="flex items-center">
+                  <Pin className="mr-[12px]" />
+                  {room.location.name}, {room.location.upperLocation?.name}
                 </div>
-                <div className="flex">
-                  Maintenance fee
-                  <Space />
-                  <span className="font-semibold">
-                    {room.maintenance.maintenanceFee.amount ? formatPrice(room.maintenance.maintenanceFee.amount) : 0} /
-                    month
-                  </span>
+                <div className="flex items-center">
+                  <Calendar className="mr-[12px]" />
+                  From {formatDate(room.availableDate)}
                 </div>
               </div>
-              <p className="test-[14px] text-a2">Included</p>
-              <div className="flex pt-[8px] gap-[4px]">
-                {includeServices &&
-                  includeServices.map((item, idx) => <Badge text={item} key={`maintenance-fee-${idx}`} />)}
+              <hr />
+              <div className="py-[20px]">
+                <HomeBadge />
+                <p className="font-semibold text-g7 pt-[12px]">{roomType}</p>
+                <div className="text-g5 text-[14px] flex items-center gap-[6px]">
+                  {room.roomInfo.bedrooms} bedrooms
+                  <Dot className="fill-g5 stroke-[1.5px]" />
+                  {room.roomInfo.bathrooms} bathrooms
+                  <Dot className="fill-g5 stroke-[1.5px]" />
+                  {room.roomInfo.roommates} housemates in total
+                </div>
               </div>
-            </div>
-            <hr />
-            {room.furnishingsData && room.furnishingsData?.length > 0 && (
+              <hr />
               <div className="py-[20px]">
-                <p className="text-g7 font-semibold text-[18px]">Furnishing</p>
-                <div className="flex pt-[8px] gap-[4px] whitespace-nowrap overflow-x-auto">
-                  {room.furnishingsData.map((item, idx) => (
-                    <Badge text={item} type="flat" key={`furnishing-${idx}`} />
-                  ))}
+                <ReceiptBadge />
+                <div className="flex flex-col gap-y-[8px] text-[16px] pt-[12px]">
+                  <div className="flex">
+                    Deposit
+                    <Space />
+                    <span className="font-semibold">&#8361; {formatPrice(room.deposit.amount)} / month</span>
+                  </div>
+                  <div className="flex">
+                    Maintenance fee
+                    <Space />
+                    <span className="font-semibold">
+                      {room.maintenance.maintenanceFee.amount ? formatPrice(room.maintenance.maintenanceFee.amount) : 0}{' '}
+                      / month
+                    </span>
+                  </div>
+                </div>
+                <p className="test-[14px] text-a2">Included</p>
+                <div className="flex pt-[8px] gap-[4px]">
+                  {includeServices &&
+                    includeServices.map((item, idx) => <Badge text={item} key={`maintenance-fee-${idx}`} />)}
                 </div>
               </div>
-            )}
-            <hr />
-            <div className="py-[20px]">
-              <p className="text-g7 font-semibold text-[18px]">About the house</p>
-              <div className="flex pt-[8px] text-[16px] text-g5">{room.description}</div>
-            </div>
-            <div className="py-[20px] flex items-center bg-g1 mx-[-20px]">
-              <div className="px-[20px]">
-                <span className="text-[14px] text-g6 mr-[8px]">Do you want to report this post?</span>
-                <span className="text-[16px] text-r1 underline font-semibold" onClick={showReporting}>
-                  Report
-                </span>
+              <hr />
+              {room.furnishingsData && room.furnishingsData?.length > 0 && (
+                <div className="py-[20px]">
+                  <p className="text-g7 font-semibold text-[18px]">Furnishing</p>
+                  <div className="flex pt-[8px] gap-[4px] whitespace-nowrap overflow-x-auto">
+                    {room.furnishingsData.map((item, idx) => (
+                      <Badge text={item} type="flat" key={`furnishing-${idx}`} />
+                    ))}
+                  </div>
+                </div>
+              )}
+              <hr />
+              <div className="py-[20px]">
+                <p className="text-g7 font-semibold text-[18px]">About the house</p>
+                <div className="flex pt-[8px] text-[16px] text-g5">{room.description}</div>
+              </div>
+              <div className="py-[20px] flex items-center bg-g1 mx-[-20px]">
+                <div className="px-[20px]">
+                  <span className="text-[14px] text-g6 mr-[8px]">Do you want to report this post?</span>
+                  <span className="text-[16px] text-r1 underline font-semibold" onClick={showReporting}>
+                    Report
+                  </span>
+                </div>
               </div>
             </div>
-          </div>
-          <div className="fixed bottom-0 w-full overflow-x-hidden left-[50%] translate-x-[-50%] max-w-max bg-g0 h-[71px] flex justify-center border-t-[1px] border-g2">
-            <div className="flex items-center">
-              <Like className="stroke-g7 stroke-[1.5px] m-[8px]" />
-              <span className="text-[20px] font-semibold">&#8361; {formatPrice(room.deposit.amount)}&nbsp;</span>
-              <span>/ month</span>
-              <div className="h-[40px] font-medium text-[14px] ml-[12px]">
-                <Button height="40px">Start a chat</Button>
+            <div className="fixed bottom-0 w-full overflow-x-hidden left-[50%] translate-x-[-50%] max-w-max bg-g0 h-[71px] flex justify-center border-t-[1px] border-g2">
+              <div className="flex items-center">
+                <Like className="stroke-g7 stroke-[1.5px] m-[8px]" />
+                <span className="text-[20px] font-semibold">&#8361; {formatPrice(room.deposit.amount)}&nbsp;</span>
+                <span>/ month</span>
+                <div className="h-[40px] font-medium text-[14px] ml-[12px]">
+                  <Button height="40px">Start a chat</Button>
+                </div>
               </div>
             </div>
-          </div>
-        </>
-      )}
-      {showReport && (
-        <ModalBox
-          title="Why are you reporting?"
-          content="This wan't be shared with the reported user"
-          buttonType="wrapper"
-          buttonName=""
-          buttonNames={['Not a real place', 'Inappropriate content', 'Incorrect information', 'Suspected scammer']}
-          handleClose={() => setShowReport(false)}
-          handleReport={handleReport}
-        />
-      )}
-    </div>
-  );
-};
-
-export default function RoomDetail() {
-  return (
-    <RoomDetailLayout>
-      <Page />
-    </RoomDetailLayout>
+          </>
+        )}
+        {showReport && (
+          <ModalBox
+            title="Why are you reporting?"
+            content="This wan't be shared with the reported user"
+            buttonType="wrapper"
+            buttonName=""
+            buttonNames={['Not a real place', 'Inappropriate content', 'Incorrect information', 'Suspected scammer']}
+            handleClose={() => setShowReport(false)}
+            handleReport={handleReport}
+          />
+        )}
+      </div>
+    </>
   );
 }
+
+// export default function RoomDetail() {
+//   return (
+//     <RoomDetailLayout>
+//       <Page />
+//     </RoomDetailLayout>
+//   );
+// }