Merge remote-tracking branch 'origin/dev' into dev

Author: jeongyeon0208

src/main/java/com/example/dto/MouseDTO.java

@@ -6,6 +6,7 @@
 public class MouseDTO {
 
     String name;
+    String type;
     int x;
     int y;
 }

src/main/java/com/example/service/NodeServiceImpl.java

@@ -80,13 +80,14 @@ public void DeleteNodeByIdAndUser(Long nodeId, User user) {
         // nodeId 로 node 찾기
         Node findNode = findNodeById(nodeId);
 
-        imageService.deleteS3Image(findNode.getImageURL());
 
         // node 생성자 인지 확인
-        if (!findNode.getUser().equals(user)) {
+        if (!projectUserService.checkProjectUserExists(findNode.getProject(), user)) {
             throw new GeneralException(ErrorStatus.NODE_INVALID_USER);
         }
         else {
+            imageService.deleteS3Image(findNode.getImageURL());
+
             Node parentNode = findNode.getParentNode();
             // 부모노드가 있는 경우
             if (parentNode!=null) {

src/main/resources/static/css/style.css

@@ -50,6 +50,7 @@ body, html {
   border-radius: 50%; /* 원형으로 만들기 */
   pointer-events: none; /* 클릭 이벤트 차단 */
   z-index: 1000; /* 다른 요소 위에 표시 */
+  transition: transform 0.1s linear;
 }
 .cursor span {
   position: relative;

src/main/resources/static/index.html

@@ -1021,6 +1021,9 @@ <h3>Sign-Up</h3>
                     // 노드의 위치를 새로운 좌표로 업데이트
                     nodeElement.style.left = `${nodeData.x}px`;
                     nodeElement.style.top = `${nodeData.y}px`;
+
+                    // 선 업데이트
+                    updateLine(nodeElement);
                 } else {
                     console.error(`Node with ID ${nodeData.nodeId} not found.`);
                 }
@@ -1029,25 +1032,35 @@ <h3>Sign-Up</h3>
             // WebSocket을 통해 마우스 좌표 수신
             stompClient.subscribe(`/topic/mouse/${projectId}`, function (message) {
                 const mouseData = JSON.parse(message.body);
-                const { name, x, y } = mouseData;
-
-                // 커서 요소가 이미 존재하는지 확인
-                if (!userCursors[name]) {
-                    // 커서 요소 생성
-                    const cursorElement = document.createElement('div');
-                    cursorElement.className = 'cursor';
-                    cursorElement.style.position = 'absolute';
-                    cursorElement.innerHTML = `<span>${name}</span>`;
-                    document.body.appendChild(cursorElement);
-
-                    // 사용자 커서 저장
-                    userCursors[name] = cursorElement;
+
+                if (mouseData.type === "disconnect") {
+                    const { name } = mouseData; // mouseData에서 name 가져오기
+                    if (userCursors[name]) {
+                        userCursors[name].remove(); // DOM 요소 삭제
+                        delete userCursors[name]; // userCursors에서 제거
+                    }
                 }
+                else{
+                    const { name, x, y } = mouseData;
+
+                    // 커서 요소가 이미 존재하는지 확인
+                    if (!userCursors[name]) {
+                        // 커서 요소 생성
+                        const cursorElement = document.createElement('div');
+                        cursorElement.className = 'cursor';
+                        cursorElement.style.position = 'absolute';
+                        cursorElement.innerHTML = `<span>${name}</span>`;
+                        document.body.appendChild(cursorElement);
+
+                        // 사용자 커서 저장
+                        userCursors[name] = cursorElement;
+                    }
 
-                // 커서 위치 업데이트
-                const cursorElement = userCursors[name];
-                cursorElement.style.left = `${x}px`;
-                cursorElement.style.top = `${y}px`;
+                    // 커서 위치 업데이트
+                    const cursorElement = userCursors[name];
+                    cursorElement.style.left = `${x}px`;
+                    cursorElement.style.top = `${y}px`;
+                }
             });
 
             // 노드 삭제 이벤트 구독
@@ -1063,7 +1076,10 @@ <h3>Sign-Up</h3>
                 }
 
                 if(document.getElementById(`node-${nodeID}`)){
-                    deleteNode(nodeID); // 해당 노드를 삭제하는 함수 호출
+                    document.getElementById(`node-${nodeID}`)?.remove();
+                    document.getElementById(`path-${nodeID}`)?.remove();
+                    upadteNodeCheck();
+                    console.log("Node deleted successfully.");
                 }
             });
 
@@ -1076,12 +1092,44 @@ <h3>Sign-Up</h3>
             const mouseData = {
                 name: currentUserName, // 사용자 이름 추가
                 x: event.clientX + window.scrollX,
-                y: event.clientY + window.scrollY
+                y: event.clientY + window.scrollY,
+                type: "connect"
             };
             stompClient.send(`/app/mouse/${CurrentProjectId}`, {}, JSON.stringify(mouseData));
         }
     });
 
+    document.addEventListener("visibilitychange", function () {
+        if (document.visibilityState === "hidden") {
+            // 사용자가 페이지를 벗어남
+            const mouseData = {
+                type: "disconnect",
+                name: currentUserName,
+                projectId: CurrentProjectId,
+            };
+            stompClient.send(`/app/mouse/${CurrentProjectId}`, {}, JSON.stringify(mouseData));
+        } else if (document.visibilityState === "visible") {
+            // 사용자가 페이지로 돌아옴
+            const mouseData = {
+                type: "connect", // 재접속 메시지
+                name: currentUserName,
+                x: window.scrollX,
+                y: window.scrollY,
+                projectId: CurrentProjectId,
+            };
+            stompClient.send(`/app/mouse/${CurrentProjectId}`, {}, JSON.stringify(mouseData));
+        }
+    });
+
+    window.addEventListener("beforeunload", function () {
+        const mouseData = {
+            type: "disconnect",
+            name: currentUserName,
+            projectId: CurrentProjectId,
+        };
+        stompClient.send(`/app/mouse/${CurrentProjectId}`, {}, JSON.stringify(mouseData));
+    });
+
     //드래그 가능한 기능을 추가하는 함수 - nodeForm에 대해 적용되어있음
     function makeDraggable(element) {
         let offsetX, offsetY;