[fix]: auth 관리 로직 변경, useChat 로직 변경

src/App.tsx

@@ -1,49 +1,47 @@
 import { useEffect } from 'react';
 import { RootRouter } from './router/RootRouter';
-import { setUserAuth } from './stores/useAuthStore';
+import { setUserAuth, useAuthStore } from './stores/useAuthStore';
 import { showiOSInfo } from './webview/utils';
-
-const AUTH_UPDATE_EVENT = 'authUpdate';
+import { useSocket } from './hooks/socket/useSocket';
 
 if (!window.handleIosWebviewToken) {
   window.handleIosWebviewToken = (token, uuid) => {
     showiOSInfo(`token:${token},uuid:${uuid}`);
     if (token) {
       setUserAuth(token, uuid);
-      window.dispatchEvent(
-        new CustomEvent(AUTH_UPDATE_EVENT, {
-          detail: { token, uuid },
-        })
-      );
       return 'success';
     }
     return 'fail';
   };
 }
 
 function App() {
+  const token = useAuthStore((state) => state.accessToken);
+  const { socket } = useSocket();
+
   useEffect(() => {
     const handleAuthUpdate = (event: CustomEvent) => {
-      const { token, uuid } = event.detail;
-      console.log('Auth updated:', token, uuid);
+      console.log('Auth updated:', event.detail);
+      if (socket) {
+        socket.disconnect();
+        socket.connect();
+      }
     };
 
-    window.addEventListener(
-      AUTH_UPDATE_EVENT,
-      handleAuthUpdate as EventListener
-    );
+    window.addEventListener('auth-update', handleAuthUpdate as EventListener);
 
     if (window.webkit?.messageHandlers.webviewInit) {
       window.webkit.messageHandlers.webviewInit.postMessage('webviewReady');
     }
 
     return () => {
       window.removeEventListener(
-        AUTH_UPDATE_EVENT,
+        'auth-update',
         handleAuthUpdate as EventListener
       );
     };
-  }, []);
+  }, [socket, token]);
+
   return <RootRouter />;
 }
 

src/hooks/useChat.ts

@@ -15,8 +15,8 @@ export const useChat = (chatRoomId: string) => {
   });
 
   const [messages, setMessages] = useState<ChatMessage[]>([]);
-
   const hasSetupListeners = useRef(false);
+  const isProcessing = useRef(false);
 
   useEffect(() => {
     if (previousMessages?.data) {
@@ -25,72 +25,79 @@ export const useChat = (chatRoomId: string) => {
   }, [previousMessages]);
 
   useEffect(() => {
-    if (!socket || !chatRoomId || hasSetupListeners.current) return;
-
-    const joinRoom = () => {
-      if (chatRoomId) {
-        console.log('joinRoom', chatRoomId);
-        socket.emit('join', { chatRoomId });
-      }
-    };
-
-    const handleConnect = () => {
-      console.log('CONNECT');
-      joinRoom();
-    };
-
     const handleReceiveMessage = (msg: ChatMessage) => {
-      console.log(msg);
+      console.log('Received message:', msg);
       setMessages((prevMessages) => {
-        // 중복 메시지 방지
         const isDuplicate = prevMessages.some(
           (prevMsg) => prevMsg.chatMessageId === msg.chatMessageId
         );
-        if (isDuplicate) return prevMessages;
+        const isSameUser = prevMessages.some(
+          (prevMsg) => prevMsg.user === msg.user
+        );
+        if (isDuplicate || isSameUser) {
+          console.log('Duplicate message or Same user detected');
+          return prevMessages;
+        }
         return [...prevMessages, msg];
       });
     };
-    socket.off('connect', handleConnect);
-    socket.off('receive', handleReceiveMessage);
-    socket.off('exception');
 
-    socket.on('connect', handleConnect);
-    socket.on('receive', handleReceiveMessage);
-    socket.on('exception', (message) => console.log('Exception:', message));
+    const handleConnect = () => {
+      console.log('Socket connected');
+      if (chatRoomId) {
+        console.log('Joining room:', chatRoomId);
+        socket?.emit('join', { chatRoomId });
+      }
+    };
+
+    const handleException = (error: unknown) => {
+      console.error('Socket exception:', error);
+    };
 
-    hasSetupListeners.current = true;
+    if (socket && chatRoomId && !hasSetupListeners.current) {
+      socket.off('connect', handleConnect);
+      socket.off('receive', handleReceiveMessage);
+      socket.off('exception', handleException);
 
-    if (socket.connected) {
-      joinRoom();
+      socket.on('connect', handleConnect);
+      socket.on('receive', handleReceiveMessage);
+      socket.on('exception', handleException);
+
+      hasSetupListeners.current = true;
+
+      if (socket.connected) {
+        handleConnect();
+      }
     }
 
     return () => {
-      socket.off('connect', handleConnect);
-      socket.off('receive', handleReceiveMessage);
-      socket.off('exception');
-      hasSetupListeners.current = false;
+      if (socket) {
+        socket.off('connect', handleConnect);
+        socket.off('receive', handleReceiveMessage);
+        socket.off('exception', handleException);
+        hasSetupListeners.current = false;
+      }
     };
   }, [socket, chatRoomId]);
 
   const sendMessage = useCallback(
     (message: object) => {
-      if (!socket?.connected || !message) return;
-
-      // 메시지 전송 중 상태 관리
-      let isProcessing = false;
-
-      if (isProcessing) return;
+      if (!socket?.connected || !message || isProcessing.current) return;
 
       try {
-        isProcessing = true;
-        console.log('sendMessage', message);
+        isProcessing.current = true;
+        console.log('Sending message:', message);
+
         socket.emit('send', message, () => {
-          // 서버로부터 응답을 받으면 처리 완료
-          isProcessing = false;
+          isProcessing.current = false;
         });
+
+        setTimeout(() => {
+          isProcessing.current = false;
+        }, 5000);
       } catch (error) {
         console.error('Failed to send message:', error);
-        isProcessing = false;
+        isProcessing.current = false;
       }
     },
     [socket]

src/stores/useAuthStore.ts

@@ -1,26 +1,33 @@
 import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
+import { persist, createJSONStorage } from 'zustand/middleware';
 
-interface IAuthStore {
-  accessToken: string;
-  uuid: string;
+interface AuthState {
+  accessToken: string | null;
+  uuid: string | null;
   setAuth: (token: string, uuid: string) => void;
 }
 
-export const useAuthStore = create(
-  persist<IAuthStore>(
+export const useAuthStore = create<AuthState>()(
+  persist(
     (set) => ({
-      accessToken: '',
-      uuid: '',
-      setAuth: (token, uuid) => set({ accessToken: token, uuid }),
+      accessToken: null,
+      uuid: null,
+      setAuth: (token, uuid) => {
+        set({ accessToken: token, uuid });
+        window.dispatchEvent(
+          new CustomEvent('auth-update', {
+            detail: { token, uuid },
+          })
+        );
+      },
     }),
     {
       name: 'auth-storage',
+      storage: createJSONStorage(() => localStorage),
     }
   )
 );
 
-export const setUserAuth = (accessToken: string, uuid: string) =>
-  useAuthStore.getState().setAuth(accessToken, uuid);
-
-export const logout = useAuthStore.persist.clearStorage;
+export const setUserAuth = (token: string, uuid: string) => {
+  useAuthStore.getState().setAuth(token, uuid);
+};