[test]:socket connected

PBTP · Nov 5, 2024 · e7c0dac · e7c0dac
1 parent 6d049b8
commit e7c0dac
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/src/hooks/useChat.ts b/src/hooks/useChat.ts
@@ -9,6 +9,7 @@ import { useSocket } from './socket/useSocket';
  * @returns messages: 채팅방 메세지 | sendMessage: 메세지 보내는 함수
  */
 export const useChat = (chatRoomId: string) => {
+  const [isConnected, setIsConnected] = useState(false);
   const { socket } = useSocket();
   const { data: previousMessages } = useChatRoomMessages({
     chatRoomId,
@@ -47,11 +48,13 @@ export const useChat = (chatRoomId: string) => {
       if (chatRoomId) {
         console.log('Joining room:', chatRoomId);
         socket?.emit('join', { chatRoomId });
+        setIsConnected(true);
       }
     };
 
     const handleException = (error: unknown) => {
       console.error('Socket exception:', error);
+      setIsConnected(false);
     };
 
     if (socket && chatRoomId && !hasSetupListeners.current) {
@@ -103,5 +106,5 @@ export const useChat = (chatRoomId: string) => {
     [socket]
   );
 
-  return { messages, sendMessage };
+  return { messages, sendMessage, isConnected };
 };
diff --git a/src/pages/Chat/ChatRoom/ChatRoom.tsx b/src/pages/Chat/ChatRoom/ChatRoom.tsx
@@ -21,7 +21,7 @@ const ChatRoom = () => {
   const messageEndRef = useRef<HTMLDivElement>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
-  const { messages, sendMessage } = useChat(chatRoomId);
+  const { messages, sendMessage, isConnected } = useChat(chatRoomId);
 
   const [chatMessageType, setChatMessageType] =
     useState<ChatMessageType>('TEXT');
@@ -62,7 +62,9 @@ const ChatRoom = () => {
           width={24}
           height={24}
         />
-        <div className={styles.ChatRoomTitle}> {storeName} </div>
+        <div className={styles.ChatRoomTitle}>
+          {storeName} {isConnected ? '연결' : '미연결'}
+        </div>
         <DotsVerticalIcon width={24} height={24} />
       </div>
       <div className={styles.ChatRoomWrapper}>