[feat] 모바일 채팅방 나가기 설정

re-Duck · Dec 18, 2023 · 0b3b777 · 0b3b777
1 parent 1d7347f
commit 0b3b777
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/client/src/components/Chat/chat-room.tsx b/client/src/components/Chat/chat-room.tsx
@@ -31,13 +31,15 @@ interface IChatRoom {
   chatList: IChatMessage[];
   setChatList: React.Dispatch<React.SetStateAction<IChatMessage[]>>;
   handleSendMessage: (chatMessage: string) => void;
+  handleDisconnect: () => void;
 }
 
 export default function ChatRoom({
   roomInfo,
   chatList,
   setChatList,
   handleSendMessage,
+  handleDisconnect,
 }: IChatRoom) {
   const user = useSelector((state: IReduxState) => state.auth);
 
@@ -134,7 +136,8 @@ export default function ChatRoom({
             icon="eva:arrow-ios-back-outline"
             fontSize={28}
             color="black"
-            className="absolute left-0 top-1.5"
+            className="absolute left-0 top-1.5 hover:cursor-pointer"
+            onClick={handleDisconnect}
           />
           <p>{roomName}</p>
         </div>

diff --git a/client/src/pages/chat/index.tsx b/client/src/pages/chat/index.tsx
@@ -66,7 +66,6 @@ export default function Chatroom() {
           headers
         );
         setSubId(subscription.id);
-        setOpenChat(true);
       };
       client.connect(headers, connect_callback);
     } else if (client && client.connected) {
@@ -78,12 +77,15 @@ export default function Chatroom() {
       setSubId(subscription.id);
     }
     setSelectedRoom({ roomId, roomName });
+    setOpenChat(true);
   };
 
   const handleDisconnect = () => {
     const client = clientRef.current;
     if (client && client.connected) {
       client.unsubscribe(subId, headers);
+      setOpenChat(false);
+      setSelectedRoom({ roomId: '', roomName: '' });
     }
   };
 
@@ -157,6 +159,7 @@ export default function Chatroom() {
             chatList={chatList}
             setChatList={setChatList}
             handleSendMessage={handleSendMessage}
+            handleDisconnect={handleDisconnect}
           />
         )}
       </div>