qa

frontend/src/remote.jsx

@@ -26,13 +26,16 @@ export default function RemoteControl() {
         socket.on('connect', () => {
             console.log('시그널링 서버 연결됨. 직원 등록 중...');
             socket.emit('register', EMPLOYEE_ID);
+            socket.emit('requestDisplays', employeeId)
         });
 
-        socket.on('availableDisplays', ({ displays }) => {
+
+        socket.on('responseDisplays', ({ displays }) => {
             setDisplays(displays);
             if (displays.length > 0 && !selectedDisplay) {
                 setSelectedDisplay(displays[0].id);
             }
+            console.log(displays);
         });
 
         socket.on('webrtcSignal', async (data) => {
@@ -50,11 +53,31 @@ export default function RemoteControl() {
             }
         });
 
+        socket.on('offer', async (data) => {
+            console.log('offer', data);
+            peerConnectionRef.current = new RTCPeerConnection({
+                iceServers: [{urls: 'stun:stun.l.google.com:19302'}]
+            });
+            await peerConnectionRef.current.setRemoteDescription(new RTCSessionDescription(data.offer));
+            const answer = await peerConnectionRef.current.createAnswer();
+            await peerConnectionRef.current.setLocalDescription(answer);
+
+            socket.emit('answer', {
+                targetId: data.targetId,
+                type: 'answer',
+                answer
+            });
+        })
+
         socket.on('error', async ( data ) => {
             alert(`Error: ${data}`);
             setStatus('disconnected');
         });
 
+        socket.on('requestControl', async (data) => {
+            console.log(data)
+        })
+
         return () => {
             socket.disconnect();
         };
@@ -62,47 +85,50 @@ export default function RemoteControl() {
 
     // ▶️ 연결 시작
     const startControl = async () => {
-
-        if (!employeeId) return;
-
-        setStatus('connecting');
-        const pc = new RTCPeerConnection({
-            iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
-        });
-        peerConnectionRef.current = pc;
-
-        pc.ontrack = (event) => {
-            console.log(event)
-            if (videoRef.current) {
-                videoRef.current.srcObject = event.streams[0];
-            }
-        };
-
-        pc.onicecandidate = (event) => {
-            if (event.candidate && socketRef.current) {
-                socketRef.current.emit('webrtcSignal', {
-                    targetId: employeeId,
-                    type: 'icecandidate',
-                    candidate: event.candidate
-            });
-            }
-        };
-
-        try {
-            const offer = await pc.createOffer({ offerToReceiveVideo: true });
-            await pc.setLocalDescription(offer);
-
-
         socketRef.current.emit('requestControl', {
             targetId: employeeId,
-                offer: offer,
             displayId: selectedDisplay
         });
-        } catch (err) {
-            setStatus('disconnected');
-            console.error('연결 실패:', err);
-            setStatus('disconnected');
-        }
+        // if (!employeeId) return;
+        //
+        // setStatus('connecting');
+        // const pc = new RTCPeerConnection({
+        //     iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
+        // });
+        // peerConnectionRef.current = pc;
+        //
+        // pc.ontrack = (event) => {
+        //     console.log(event)
+        //     if (videoRef.current) {
+        //         videoRef.current.srcObject = event.streams[0];
+        //     }
+        // };
+        //
+        // pc.onicecandidate = (event) => {
+        //     if (event.candidate && socketRef.current) {
+        //         socketRef.current.emit('webrtcSignal', {
+        //             targetId: employeeId,
+        //             type: 'icecandidate',
+        //             candidate: event.candidate
+        //     });
+        //     }
+        // };
+        //
+        // try {
+        //     const offer = await pc.createOffer({ offerToReceiveVideo: true });
+        //     await pc.setLocalDescription(offer);
+        //
+        //
+        //     socketRef.current.emit('requestControl', {
+        //         targetId: employeeId,
+        //         offer: offer,
+        //         displayId: selectedDisplay
+        //     });
+        // } catch (err) {
+        //     setStatus('disconnected');
+        //     console.error('연결 실패:', err);
+        //     setStatus('disconnected');
+        // }
     };
 
     // 🖱️ 입력 이벤트 전달
@@ -165,7 +191,7 @@ export default function RemoteControl() {
                         />
                     </div>
 
-                    {displays.length > 0 && (
+                    {displays != null && (
                         <div style={{ marginBottom: '16px' }}>
                             <label style={{ fontSize: '18px', marginRight: '10px' }}>모니터 선택:</label>
                             <select