[Feat] room을 동적 라우팅에서 쿼리문으로 라우팅 방식 변경

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>

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({

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 : ''
         }`}

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>
+  );
+}