fix: Rooms API 복구

src/api/rooms/postCloseRoom.ts

@@ -0,0 +1,20 @@
+import { apiClient } from '../index';
+
+export interface PostCloseRoomResponse {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  data: {
+    roomId: number;
+  };
+}
+
+export async function postCloseRoom(roomId: number | string): Promise<PostCloseRoomResponse> {
+  try {
+    const response = await apiClient.post<PostCloseRoomResponse>(`/rooms/${roomId}/close`);
+    return response.data;
+  } catch (error) {
+    console.error('방 닫기 API 오류:', error);
+    throw error;
+  }
+}

src/api/rooms/postJoinRoom.ts

@@ -0,0 +1,28 @@
+import { apiClient } from '../index';
+
+export interface PostJoinRoomRequest {
+  type: 'join' | 'cancel';
+}
+
+export interface PostJoinRoomResponse {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  data: {
+    roomId: number;
+    type: string;
+  };
+}
+
+export async function postJoinRoom(
+  roomId: number | string,
+  type: 'join' | 'cancel',
+): Promise<PostJoinRoomResponse> {
+  try {
+    const response = await apiClient.post<PostJoinRoomResponse>(`/rooms/${roomId}/join`, { type });
+    return response.data;
+  } catch (error) {
+    console.error('방 참여/취소 API 오류:', error);
+    throw error;
+  }
+}

src/pages/groupDetail/GroupDetail.styled.ts

@@ -225,4 +225,5 @@ export const BottomButton = styled.button`
   font-weight: ${typography.fontWeight.semibold};
   border: none;
   z-index: 10;
+  cursor: pointer;
 `;

src/pages/groupDetail/GroupDetail.tsx

@@ -39,6 +39,8 @@ import {
   type RoomDetailResponse,
   type RecommendRoom,
 } from '@/api/rooms/getRoomDetail';
+import { postJoinRoom } from '@/api/rooms/postJoinRoom';
+import { postCloseRoom } from '@/api/rooms/postCloseRoom';
 import type { Group } from '@/components/group/MyGroupBox';
 
 const GroupDetail = () => {
@@ -49,6 +51,8 @@ const GroupDetail = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  const [isJoining, setIsJoining] = useState<boolean | null>(null);
+
   const handleBackButton = () => {
     navigate(-1);
   };
@@ -106,6 +110,12 @@ const GroupDetail = () => {
     fetchRoomDetail();
   }, [roomId]);
 
+  useEffect(() => {
+    if (roomData) {
+      setIsJoining(roomData.isJoining);
+    }
+  }, [roomData]);
+
   if (isLoading) {
     return <div>로딩 중...</div>;
   }
@@ -142,6 +152,23 @@ const GroupDetail = () => {
     navigate(`/group/detail/${roomId}`);
   };
 
+  const handleBottomButtonClick = async () => {
+    if (roomData.isHost) {
+      try {
+        await postCloseRoom(Number(roomId));
+      } catch {
+        alert('네트워크 오류 또는 서버 오류');
+      }
+      return;
+    }
+    const type = isJoining ? 'cancel' : 'join';
+    try {
+      await postJoinRoom(Number(roomId), type);
+    } catch {
+      alert('네트워크 오류 또는 서버 오류');
+    }
+  };
+
   return (
     <Wrapper>
       <TopBackground genre={category}>
@@ -217,7 +244,9 @@ const GroupDetail = () => {
           ))}
         </GroupCardBox>
       </RecommendSection>
-      <BottomButton>참여하기</BottomButton>
+      <BottomButton onClick={handleBottomButtonClick}>
+        {roomData.isHost ? '모집 마감하기' : isJoining ? '참여 취소하기' : '참여하기'}
+      </BottomButton>
     </Wrapper>
   );
 };