refactor: modify upload section

src/app/(modules)/upload/[videoId]/page.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { useRouter, useParams } from 'next/navigation';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Loader2, TrendingUp, ArrowUp, ArrowDown } from 'lucide-react';
@@ -25,9 +25,14 @@ export default function VideoProcessingPage() {
   const [statusMessage, setStatusMessage] = useState('Initializing...');
   const [error, setError] = useState<string | null>(null);
 
+  const wsRef = useRef<WebSocket | null>(null);
+
   const connectWebSocket = useCallback(
     (vid: string) => {
+      if (wsRef.current) return wsRef.current;
+
       const ws = new WebSocket(`${WS_URL}/ws/${vid}`);
+      wsRef.current = ws;
 
       ws.onmessage = async (event) => {
         const data = JSON.parse(event.data);
@@ -60,9 +65,14 @@ export default function VideoProcessingPage() {
 
       ws.onerror = () => {
         setStatusMessage('Connection lost. Reconnecting...');
+        wsRef.current = null;
         setTimeout(() => connectWebSocket(vid), 3000);
       };
 
+      ws.onclose = () => {
+        wsRef.current = null;
+      };
+
       return ws;
     },
     [router],
@@ -72,10 +82,14 @@ export default function VideoProcessingPage() {
     const storedSession = sessionService.loadSession();
     setSession(storedSession);
 
+    let isMounted = true;
+
     const checkStatus = async () => {
       try {
         const statusData = await videoService.getVideoStatus(videoId);
 
+        if (!isMounted) return;
+
         if (statusData.status === 'completed') {
           router.replace(`/results/${videoId}`);
           return;
@@ -94,14 +108,24 @@ export default function VideoProcessingPage() {
         setIsLoading(false);
       } catch (err) {
         console.error('Status check failed:', err);
-        setError('Failed to connect to server.');
-        setIsLoading(false);
+        if (isMounted) {
+          setError('Failed to connect to server.');
+          setIsLoading(false);
+        }
       }
     };
 
     if (videoId) {
       checkStatus();
     }
+
+    return () => {
+      isMounted = false;
+      if (wsRef.current) {
+        wsRef.current.close();
+        wsRef.current = null;
+      }
+    };
   }, [videoId, router, connectWebSocket]);
 
   if (isLoading) {