From 758616a987bed20ca67ddba48cb0c48499ebd485 Mon Sep 17 00:00:00 2001
From: conteng <contemplation.person@gmail.com>
Date: Fri, 12 Apr 2024 00:28:07 +0900
Subject: [PATCH] =?UTF-8?q?[Feat]=20room=EC=9D=84=20=EB=8F=99=EC=A0=81=20?=
 =?UTF-8?q?=EB=9D=BC=EC=9A=B0=ED=8C=85=EC=97=90=EC=84=9C=20=EC=BF=BC?=
 =?UTF-8?q?=EB=A6=AC=EB=AC=B8=EC=9C=BC=EB=A1=9C=20=EB=9D=BC=EC=9A=B0?=
 =?UTF-8?q?=ED=8C=85=20=EB=B0=A9=EC=8B=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/main/PartyPreview.tsx       |  2 +-
 components/party/PartyCreate.tsx       |  2 +-
 components/party/PartyRoomListItem.tsx |  2 +-
 pages/party/room.tsx                   | 53 ++++++++++++++++++++++++++
 4 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 pages/party/room.tsx

diff --git a/components/main/PartyPreview.tsx b/components/main/PartyPreview.tsx
index 766c00f9d..25da85000 100644
--- a/components/main/PartyPreview.tsx
+++ b/components/main/PartyPreview.tsx
@@ -8,7 +8,7 @@ export default function PartyPreview() {
   const router = useRouter();
 
   const movePartyRoom = (roomId: number) => {
-    router.push(`/party/${roomId}`);
+    router.push(`/party/room?id=${roomId}`);
   };
   return (
     <div>
diff --git a/components/party/PartyCreate.tsx b/components/party/PartyCreate.tsx
index 9e8863614..54063623d 100644
--- a/components/party/PartyCreate.tsx
+++ b/components/party/PartyCreate.tsx
@@ -154,7 +154,7 @@ function DetailCustomization({
       errorMessage
         ? await Promise.reject(new Error(errorMessage))
         : await instance.post('/party/rooms', partyForm).then(({ data }) => {
-            router.push(`/party/${data.roomId}`);
+            router.push(`/party/room?id=${data.roomId}`);
           });
     } catch (e) {
       setSnackBar({
diff --git a/components/party/PartyRoomListItem.tsx b/components/party/PartyRoomListItem.tsx
index 9b0c647fa..9c67526e6 100644
--- a/components/party/PartyRoomListItem.tsx
+++ b/components/party/PartyRoomListItem.tsx
@@ -14,7 +14,7 @@ export default function PartyRoomListItem({ room }: { room: PartyRoom }) {
   return (
     <li key={room.roomId}>
       <Link
-        href={`/party/${room.roomId}`}
+        href={`/party/room?id=${room.roomId}`}
         className={`${styles.roomWrap} ${
           room.status !== 'OPEN' ? styles.transparent : ''
         }`}
diff --git a/pages/party/room.tsx b/pages/party/room.tsx
new file mode 100644
index 000000000..4146eff7f
--- /dev/null
+++ b/pages/party/room.tsx
@@ -0,0 +1,53 @@
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { PartyRoomDetail } from 'types/partyTypes';
+import { instance } from 'utils/axios';
+import PartyDetailCommentBox from 'components/party/roomDetail/PartyDetailContentCommentBox';
+import PartyDetailProfile from 'components/party/roomDetail/PartyDetailProfile';
+import PartyDetailTitleBox from 'components/party/roomDetail/PartyDetailTitleBox';
+import usePartyColorMode from 'hooks/party/usePartyColorMode';
+import styles from 'styles/party/PartyDetailRoom.module.scss';
+
+export default function PartyDetailPage() {
+  const roomId = useRouter().query.id;
+  const router = useRouter();
+  const [partyRoomDetail, setPartyRoomDetail] = useState<
+    PartyRoomDetail | undefined
+  >(undefined);
+
+  useEffect(() => {
+    fetchRoomDetail();
+  }, []);
+
+  const fetchRoomDetail = () => {
+    instance
+      .get(`/party/rooms/${roomId}`)
+      .then(({ data }) => {
+        setPartyRoomDetail(data);
+      })
+      .catch(() => {
+        alert('방 정보를 불러오는데 실패했습니다.');
+        router.push('/party');
+      });
+  };
+
+  usePartyColorMode('PARTY-MAIN');
+
+  return partyRoomDetail && partyRoomDetail.status !== 'HIDDEN' ? (
+    <div className={styles.detailPage}>
+      <PartyDetailTitleBox {...partyRoomDetail} />
+      <PartyDetailProfile
+        partyRoomDetail={partyRoomDetail}
+        fetchRoomDetail={fetchRoomDetail}
+      />
+      <PartyDetailCommentBox
+        partyRoomDetail={partyRoomDetail}
+        fetchRoomDetail={fetchRoomDetail}
+      />
+    </div>
+  ) : partyRoomDetail === undefined ? (
+    <div>loading...</div>
+  ) : (
+    <div>방이 존재하지 않습니다.</div>
+  );
+}