From a091751404ad6b29076b1151c2cd0be488383484 Mon Sep 17 00:00:00 2001
From: VictoryJu <kob0805@naver.com>
Date: Thu, 19 Sep 2024 02:17:36 +0900
Subject: [PATCH] =?UTF-8?q?[fix]:=20useSocket=20=EC=97=90=EC=84=9C=20useCh?=
 =?UTF-8?q?at=20=EB=A1=9C=EC=A7=81=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/socket/useSocket.ts        | 44 ++++----------------------
 src/hooks/useChat.ts                 | 47 ++++++++++++++++++++++++++++
 src/pages/Chat/ChatRoom/ChatRoom.tsx |  5 ++-
 src/pages/Chat/ChatRoom/index.tsx    | 13 ++++++++
 4 files changed, 68 insertions(+), 41 deletions(-)
 create mode 100644 src/hooks/useChat.ts
 create mode 100644 src/pages/Chat/ChatRoom/index.tsx

diff --git a/src/hooks/socket/useSocket.ts b/src/hooks/socket/useSocket.ts
index 445366b..fdba985 100644
--- a/src/hooks/socket/useSocket.ts
+++ b/src/hooks/socket/useSocket.ts
@@ -1,8 +1,6 @@
 import { useAuthStore } from '@/stores/useAuthStore';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo } from 'react';
 import { io } from 'socket.io-client';
-import { ChatMessage } from '../api/types/chat';
-import { useChatRoomMessages } from '../api/useChat';
 
 const MAX_ACK_TIME = 10000;
 const INITIAL_RETRY = 3;
@@ -10,18 +8,10 @@ const INITIAL_RETRY = 3;
 /**
  *
  * @param path 소켓 url path
- * @param chatRoomId 현재 접속한 채팅방의 id
- * @returns socket: 소켓 객체 | messages: 채팅방 메세지 | sendMessage: 메세지 보내는 함수|
+ * @returns socket: 소켓 객체
  */
-export const useSocket = (path: 'chat' = 'chat', chatRoomId: string) => {
+export const useSocket = (path: 'chat' = 'chat') => {
   const token = useAuthStore((state) => state.accessToken);
-  const { data: previousMessages } = useChatRoomMessages({
-    chatRoomId,
-  });
-
-  const [messages, setMessages] = useState<ChatMessage[]>(
-    previousMessages ? previousMessages.data : []
-  );
 
   const socket = useMemo(() => {
     if (!token) return null;
@@ -32,37 +22,15 @@ export const useSocket = (path: 'chat' = 'chat', chatRoomId: string) => {
       },
       ackTimeout: MAX_ACK_TIME,
       retries: INITIAL_RETRY,
-      autoConnect: false,
       port: 5000,
     });
   }, [token, path]);
 
   useEffect(() => {
-    if (!socket) return;
-    socket.connect();
-    socket.emit('join', chatRoomId);
-
-    const handleReceiveMessage = (msg: ChatMessage[]) => {
-      setMessages((prevMessages) => [...prevMessages, ...msg]);
-    };
-
-    socket.on('receive', handleReceiveMessage);
-
     return () => {
-      socket.off('receive', handleReceiveMessage);
-      socket.disconnect();
+      if (socket) socket.disconnect();
     };
-  }, [chatRoomId, socket]);
-
-  const sendMessage = useCallback(
-    (message: object, senderUuid: string) => {
-      if (socket) {
-        const socketUniqueId = `${socket.id}-${senderUuid}`;
-        socket.emit('send', message, socketUniqueId);
-      }
-    },
-    [socket]
-  );
+  }, [socket]);
 
-  return { socket, messages, sendMessage };
+  return { socket };
 };
diff --git a/src/hooks/useChat.ts b/src/hooks/useChat.ts
new file mode 100644
index 0000000..0b616f9
--- /dev/null
+++ b/src/hooks/useChat.ts
@@ -0,0 +1,47 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useChatRoomMessages } from './api/useChat';
+import { ChatMessage } from './api/types/chat';
+import { useSocket } from './socket/useSocket';
+
+/**
+ *
+ * @param chatRoomId 현재 접속한 채팅방의 id
+ * @returns messages: 채팅방 메세지 | sendMessage: 메세지 보내는 함수
+ */
+export const useChat = (chatRoomId: string) => {
+  const { socket } = useSocket();
+  const { data: previousMessages } = useChatRoomMessages({
+    chatRoomId,
+  });
+
+  const [messages, setMessages] = useState<ChatMessage[]>(
+    previousMessages?.data || []
+  );
+
+  useEffect(() => {
+    if (!socket) return;
+    socket.emit('join', chatRoomId);
+
+    const handleReceiveMessage = (msg: ChatMessage[]) => {
+      setMessages((prevMessages) => [...prevMessages, ...msg]);
+    };
+
+    socket.on('receive', handleReceiveMessage);
+
+    return () => {
+      socket.off('receive', handleReceiveMessage);
+    };
+  }, [chatRoomId, socket]);
+
+  const sendMessage = useCallback(
+    (message: object, senderUuid: string) => {
+      if (socket) {
+        const socketUniqueId = `${socket.id}-${senderUuid}`;
+        socket.emit('send', message, socketUniqueId);
+      }
+    },
+    [socket]
+  );
+
+  return { messages, sendMessage };
+};
diff --git a/src/pages/Chat/ChatRoom/ChatRoom.tsx b/src/pages/Chat/ChatRoom/ChatRoom.tsx
index c6de8ae..fde5684 100644
--- a/src/pages/Chat/ChatRoom/ChatRoom.tsx
+++ b/src/pages/Chat/ChatRoom/ChatRoom.tsx
@@ -3,9 +3,9 @@ import ArrowLeftTailIcon from '@/icons/icon/ArrowLeftTail';
 import DotsVerticalIcon from '@/icons/icon/DotsVertical';
 import { useLocation, useNavigate } from 'react-router';
 import { useState } from 'react';
-import { useSocket } from '@/hooks/socket/useSocket';
 import { useAuthStore } from '@/stores/useAuthStore';
 import { UploadIcon, CameraIcon } from '@/icons/icon';
+import { useChat } from '@/hooks/useChat';
 
 type ChatMessageType = 'TEXT' | 'IMAGE' | 'VIDEO';
 
@@ -17,8 +17,7 @@ const ChatRoom = () => {
 
   const [chatMessageContent, setChatMessageContent] = useState('');
 
-  const { messages, sendMessage } = useSocket('chat', chatRoomId);
-  console.log(messages);
+  const { messages, sendMessage } = useChat(chatRoomId);
 
   const [chatMessageType, setChatMessageType] =
     useState<ChatMessageType>('TEXT');
diff --git a/src/pages/Chat/ChatRoom/index.tsx b/src/pages/Chat/ChatRoom/index.tsx
new file mode 100644
index 0000000..c123bce
--- /dev/null
+++ b/src/pages/Chat/ChatRoom/index.tsx
@@ -0,0 +1,13 @@
+import { Suspense } from 'react';
+import ChatRoom from './ChatRoom';
+import LoadingSpinner from '@/pages/Loading/LoadingSpinner';
+
+const ChatRoomPage = () => {
+  return (
+    <Suspense fallback={<LoadingSpinner />}>
+      <ChatRoom />
+    </Suspense>
+  );
+};
+
+export default ChatRoomPage;