From 9d477956fe14107dae3ee8bf71fcc1492f91f830 Mon Sep 17 00:00:00 2001
From: echo <play3step@naver.com>
Date: Sat, 24 Aug 2024 01:53:43 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=9B=B9=EC=86=8C=EC=BC=93=20=EC=97=B0?=
 =?UTF-8?q?=EA=B2=B0=20=ED=85=8C=EC=8A=A4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/EditPage.jsx | 73 ++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 71 insertions(+), 2 deletions(-)

diff --git a/src/pages/EditPage.jsx b/src/pages/EditPage.jsx
index 0f31bf8..d56ae60 100644
--- a/src/pages/EditPage.jsx
+++ b/src/pages/EditPage.jsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Canvas } from '@react-three/fiber';
 import { FullScreen, useFullScreenHandle } from 'react-full-screen';
 import { useParams } from 'react-router-dom';
@@ -25,6 +25,8 @@ import useHistory from '../hooks/EditPage/Handlers/useHistory';
 import ControllerItem from '../components/EditPage/ItemListBox/3D/ControllerItem';
 import { ProjectInfo } from '../store/projectState';
 
+export const WEBSOCKET_URL = process.env.REACT_APP_WEBSOCKET_URL;
+
 function EditPage() {
   const {
     selectedId,
@@ -57,6 +59,71 @@ function EditPage() {
   const fullScreenHandle = useFullScreenHandle();
   const isFullScreen = fullScreenHandle.active;
 
+  const [socket, setSocket] = useState(null);
+
+  useEffect(() => {
+    // WebSocket 연결
+    const ws = new WebSocket(WEBSOCKET_URL);
+
+    ws.onopen = () => {
+      console.log('Connected to WebSocket');
+
+      const enterMessage = JSON.stringify({
+        saveType: 'enter',
+        roomId: code,
+      });
+      ws.send(enterMessage);
+    };
+
+    ws.onmessage = (event) => {
+      const message = JSON.parse(event.data);
+      console.log('Received:', message);
+    };
+
+    ws.onerror = (error) => {
+      console.error('WebSocket Error:', error);
+    };
+
+    ws.onclose = () => {
+      console.log('WebSocket connection closed');
+    };
+
+    setSocket(ws);
+
+    // 컴포넌트가 언마운트될 때 WebSocket 닫기
+    return () => {
+      ws.close();
+    };
+  }, []);
+
+  const sendRectangleData = () => {
+    if (socket && socket.readyState === WebSocket.OPEN) {
+      const rectangleData = {
+        saveType: 'saveRectangle',
+        editType: '0',
+        deleteType: '0',
+        roomId: code,
+        rectangle: {
+          projectId: 123,
+          pageId: 1,
+          id: 'rect1',
+          x: 100,
+          y: 150,
+          width: 200,
+          height: 100,
+          fill: '#ff0000',
+          type: 'rectangle',
+        },
+      };
+
+      // 서버에 데이터 전송
+      socket.send(JSON.stringify(rectangleData));
+      console.log('Rectangle data sent:', rectangleData);
+    } else {
+      console.error('WebSocket is not open');
+    }
+  };
+
   const toggleFullScreen = () => {
     fullScreenHandle.enter();
   };
@@ -172,7 +239,9 @@ function EditPage() {
         imgValue={imgValue}
         addSlide={addSlide}
       />
-
+      <button type="button" onClick={sendRectangleData}>
+        버튼
+      </button>
       <CanvasContainer>
         <FullScreen handle={fullScreenHandle}>
           <div>