수정본

frontend/src/hooks/useWebSocket.ts

@@ -1,4 +1,4 @@
-import { useEffect, useState, useCallback } from 'react'
+import { useEffect, useState, useCallback, useRef } from 'react'
 import { config } from '../config'
 
 interface WebSocketMessage {
@@ -10,40 +10,91 @@ export const useWebSocket = (clientId: string) => {
     const [socket, setSocket] = useState<WebSocket | null>(null)
     const [messages, setMessages] = useState<WebSocketMessage[]>([])
     const [connected, setConnected] = useState(false)
+    const reconnectTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+    const pingIntervalRef = useRef<NodeJS.Timeout | null>(null)
+    const reconnectAttemptsRef = useRef(0)
+    const mountedRef = useRef(true)
+    const baseDelay = 3000
 
-    useEffect(() => {
-        const ws = new WebSocket(`${config.wsBaseUrl}/ws/${clientId}`)
+    const connect = useCallback(() => {
+        if (!mountedRef.current) return
 
-        ws.onopen = () => {
-            console.log('WebSocket connected')
-            setConnected(true)
-        }
+        try {
+            const ws = new WebSocket(`${config.wsBaseUrl}/ws/${clientId}`)
 
-        ws.onmessage = (event) => {
-            try {
-                const message = JSON.parse(event.data) as WebSocketMessage
-                setMessages((prev: WebSocketMessage[]) => [...prev, message])
-            } catch (error) {
-                console.error('Failed to parse WebSocket message:', error)
+            ws.onopen = () => {
+                console.log('🔗 WebSocket connected')
+                setConnected(true)
+                reconnectAttemptsRef.current = 0
+
+                // 30초마다 ping 전송 (Nginx/프록시 타임아웃 방지)
+                pingIntervalRef.current = setInterval(() => {
+                    if (ws.readyState === WebSocket.OPEN) {
+                        ws.send(JSON.stringify({ type: 'ping' }))
+                    }
+                }, 30000)
             }
-        }
 
-        ws.onerror = (error) => {
-            console.error('WebSocket error:', error)
-        }
+            ws.onmessage = (event) => {
+                try {
+                    const message = JSON.parse(event.data) as WebSocketMessage
+                    if (message.type === 'pong') return
+                    setMessages((prev: WebSocketMessage[]) => [...prev, message])
+                } catch (error) {
+                    console.error('Failed to parse WebSocket message:', error)
+                }
+            }
 
-        ws.onclose = () => {
-            console.log('WebSocket disconnected')
-            setConnected(false)
-        }
+            ws.onerror = () => {
+                // onclose가 항상 뒤따르므로 여기서는 무시
+            }
 
-        setSocket(ws)
+            ws.onclose = () => {
+                console.log('🔌 WebSocket disconnected')
+                setConnected(false)
+                setSocket(null)
 
-        return () => {
-            ws.close()
+                if (pingIntervalRef.current) {
+                    clearInterval(pingIntervalRef.current)
+                    pingIntervalRef.current = null
+                }
+
+                // 지수 백오프 재연결 (최대 30초 간격, 무제한 재시도)
+                if (mountedRef.current) {
+                    const attempt = reconnectAttemptsRef.current
+                    const delay = Math.min(baseDelay * Math.pow(1.5, attempt), 30000)
+                    reconnectAttemptsRef.current += 1
+                    console.log(`🔄 Reconnecting WebSocket in ${(delay / 1000).toFixed(1)}s (attempt ${attempt + 1})...`)
+                    reconnectTimeoutRef.current = setTimeout(() => {
+                        connect()
+                    }, delay)
+                }
+            }
+
+            setSocket(ws)
+        } catch (error) {
+            console.error('Failed to create WebSocket:', error)
         }
     }, [clientId])
 
+    useEffect(() => {
+        mountedRef.current = true
+        connect()
+
+        return () => {
+            mountedRef.current = false
+            if (reconnectTimeoutRef.current) {
+                clearTimeout(reconnectTimeoutRef.current)
+            }
+            if (pingIntervalRef.current) {
+                clearInterval(pingIntervalRef.current)
+            }
+            if (socket) {
+                socket.close()
+            }
+        }
+    }, [connect])
+
     const sendMessage = useCallback((message: string) => {
         if (socket && connected) {
             socket.send(message)