From 787ef7ec391f8300f8120b2d4455d0d1b179412a Mon Sep 17 00:00:00 2001
From: sunglitter <kds0284@gmail.com>
Date: Fri, 6 Dec 2024 03:15:26 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=B1=84=ED=8C=85=EB=B0=A9=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20=EB=82=B4=20URL=EC=97=90=EC=84=9C=20=EC=B1=84?=
 =?UTF-8?q?=ED=8C=85=EB=B0=A9=20ID=20=EC=B6=94=EC=B6=9C=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?(#28)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- URL 파싱을 통해 채팅방 ID를 추출하는 기능 구현
- 채팅방 삭제 버튼 클릭 시 API 호출로 삭제 처리
- 삭제 완료 후 모달 닫기 및 상태 업데이트 로직 추가
---
 .../pages/community/modal/ChatRoomModal.tsx   | 37 ++++++++++++++++---
 1 file changed, 31 insertions(+), 6 deletions(-)

diff --git a/src/components/pages/community/modal/ChatRoomModal.tsx b/src/components/pages/community/modal/ChatRoomModal.tsx
index f9c75f5..baf60e7 100644
--- a/src/components/pages/community/modal/ChatRoomModal.tsx
+++ b/src/components/pages/community/modal/ChatRoomModal.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import ChatRoom from '../../../common/ChatRoom'; // 채팅방 컴포넌트
 import {
@@ -6,7 +6,8 @@ import {
   WebSocketService,
 } from '../../../../utils/webSocket';
 import { FaTrashAlt } from 'react-icons/fa';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { deleteChatRoom } from '../api/chatApi';
 
 interface ChatRoomModalProps {
   chatRoomId: string;
@@ -14,7 +15,6 @@ interface ChatRoomModalProps {
   isOpen: boolean;
   onClose: () => void;
   webSocketService: WebSocketService;
-  onDelete?: () => void;
   isAdminPage: boolean; // 관리자 페이지 여부를 나타내는 프롭
 }
 
@@ -23,13 +23,37 @@ const ChatRoomModal: React.FC<ChatRoomModalProps> = ({
   onClose,
   chatRoomId,
   chatRoomTitle,
-  onDelete,
   isAdminPage = false,
 }) => {
+  const navigate = useNavigate();
   const location = useLocation();
 
   const isChatAdminPage = isAdminPage || location.pathname === '/admin/chat';
 
+  // URL 상태 반영
+  useEffect(() => {
+    if (isOpen) {
+      navigate(`?roomId=${chatRoomId}`, { replace: true });
+    } else {
+      navigate(-1); // 원래 페이지로 돌아감
+    }
+  }, [isOpen, chatRoomId, navigate]);
+
+  const handleDelete = async () => {
+    try {
+      const urlParams = new URLSearchParams(window.location.search);
+      const roomId = urlParams.get('roomId');
+      if (roomId) {
+        await deleteChatRoom(parseInt(roomId)); // 채팅방 삭제 API 호출
+        alert('채팅방이 성공적으로 삭제되었습니다.');
+        onClose(); // 모달 닫기
+      }
+    } catch (error) {
+      console.error('채팅방 삭제 실패:', error);
+      alert('채팅방을 삭제할 수 없습니다.');
+    }
+  };
+
   if (!isOpen) return null;
 
   return (
@@ -40,7 +64,7 @@ const ChatRoomModal: React.FC<ChatRoomModalProps> = ({
           <HeaderButtons>
             {/* 삭제 버튼: 관리자 채팅방 관리 페이지에서만 보이도록 조건부 렌더링 */}
             {isChatAdminPage && (
-              <DeleteButton onClick={onDelete}>
+              <DeleteButton onClick={handleDelete}>
                 <FaTrashAlt />
               </DeleteButton>
             )}
@@ -49,7 +73,8 @@ const ChatRoomModal: React.FC<ChatRoomModalProps> = ({
         </ModalHeader>
         <ModalContent>
           <ChatRoom
-            chatRoomId={chatRoomId}
+            chatRoomId={parseInt(chatRoomId, 10)}
+            chatMembers={[]}
             webSocketService={webSocketService}
             isAdmin={isAdminPage}
           />