Merge pull request #56 from hw-coconote/feat/HC-172-canvas

Feat/hc 172 canvas

package.json

@@ -16,6 +16,7 @@
     "@tiptap/core": "^2.7.2",
     "@tiptap/extension-collaboration": "^2.7.2",
     "@tiptap/extension-color": "^2.7.2",
+    "@tiptap/extension-image": "^2.8.0",
     "@tiptap/extension-text-style": "^2.7.2",
     "@tiptap/pm": "^2.7.2",
     "@tiptap/starter-kit": "^2.7.2",

src/components/canvas/CanvasDetailComponent.vue

@@ -54,6 +54,7 @@ export default {
   },
   computed: {
     ...mapGetters([
+      "getChannelId",
       "getBlockFeId",
       "getBlockFeIdIndex",
       "getTargetBlockPrevFeId",
@@ -135,12 +136,16 @@ export default {
           },
         };
         if (block.content != null) {
-          tempBlockObj.content = [
-            {
-              type: "text",
-              text: block.content == null ? "" : block.content,
-            },
-          ];
+          if (block.type == "image") {
+            tempBlockObj.attrs.src = block.content;
+          } else {
+            tempBlockObj.content = [
+              {
+                type: "text",
+                text: block.content,
+              },
+            ];
+          }
         }
 
         blockToEditorContentArr.push(tempBlockObj);
@@ -171,7 +176,7 @@ export default {
     recvMessage(recv) {
       if (recv.type === "CANVAS") {
         const blockJson = JSON.parse(recv.message);
-        // console.log("blockJson", blockJson);
+        console.error("blockJson >> ", blockJson);
         if (this.activeBlockId == blockJson.feId) {
           // if (this.member == blockJson.member) {
           console.log(
@@ -279,7 +284,7 @@ export default {
     // tiptabEditor method
     deleteBlock(blockFeId) {
       const prevBlockId = this.$store.getters.getTargetBlockPrevFeId(blockFeId); //삭제전 prev block id 검색
-      console.log("prevBlockId :: ", prevBlockId)
+      console.log("prevBlockId :: ", prevBlockId);
       this.deleteBlockTargetFeIdActions(blockFeId).then((isDeleteBlock) => {
         console.log("isDeleteBlock :: ", isDeleteBlock);
         if (isDeleteBlock) {
@@ -289,12 +294,14 @@ export default {
             canvasId: this.canvasId,
             prevBlockId: prevBlockId,
             parentBlockId: null,
-            contents: "z",
+            contents: "",
             type: "paragraph", //삭제여서 타입 관계 X
             feId: blockFeId,
             member: this.sender, // 현재 접속한 user ⭐ 추후 변경
           };
 
+          console.log(this.message);
+
           this.sendMessage();
         }
       });
@@ -315,12 +322,12 @@ export default {
       const blockMethod = this.checkBlockMethod(blockFeId, blockContent);
       this.message = {
         method: blockMethod,
-        canvasId: this.canvasId,
+        feId: blockFeId, // block id
         prevBlockId: previousId,
-        parentBlockId: parentId,
+        canvasId: this.canvasId,
+        // parentBlockId: parentId,
         contents: blockContent,
         type: blockElType,
-        feId: blockFeId,
         member: this.sender, // 현재 접속한 user ⭐ 추후 변경
       };
 
@@ -338,12 +345,71 @@ export default {
         return "create";
       }
     },
+    changeOrderBlock(changeOrderObj) {
+      const { prevBlockId, nextBlockId, feId, contents, parentBlockId } =
+        changeOrderObj;
+      console.log(
+        "changeOrderBlock >> ",
+        prevBlockId,
+        nextBlockId,
+        feId,
+        contents,
+        parentBlockId
+      );
+
+      this.activeBlockId = feId;
+
+      this.message = {
+        canvasId: this.canvasId,
+        method: "changeOrder",
+        ...changeOrderObj,
+        member: this.sender, // 현재 접속한 user ⭐ 추후 변경
+      };
 
-    changeCanvasName() {
+      this.sendMessage();
+    },
+    async changeCanvasName() {
       console.error(this.room.title);
+      const params = {
+        title: this.room.title,
+        parentCanvasId: null,
+        canvasId: this.canvasId,
+        channelId: this.getChannelId,
+      };
+      try {
+        const response = await axios.patch(
+          `${process.env.VUE_APP_API_BASE_URL}/canvas/${this.canvasId}`,
+          params
+        );
+        console.log(response);
+        const updateCanvasTitle = response.data.result.title;
+        this.room.title = updateCanvasTitle;
+        this.updateName();
+      } catch (error) {
+        console.log(error);
+      }
     },
-    deleteCanvas() {
+    updateName() {
+      const obj = {
+        name: this.room.title,
+      };
+      this.$emit("updateName", obj); // 변경된 값을 부모에게 전달
+    },
+    async deleteCanvas() {
       console.log("canvas 삭제 예정");
+      try {
+        const response = await axios.delete(
+          `${process.env.VUE_APP_API_BASE_URL}/canvas/${this.canvasId}`
+        );
+        console.log(response);
+        const obj = {
+          method: "deleteCanvas",
+          canvasId: this.canvasId
+        };
+        this.$emit("updateName", obj); // 변경된 값을 부모에게 전달
+      } catch (error) {
+        console.log(error);
+      }
     },
   },
   beforeUnmount() {
@@ -370,4 +436,7 @@ export default {
     }
   }
 }
+.image-upload-container {
+  margin: 10px 0;
+}
 </style>

src/components/canvas/CanvasListComponent.vue

@@ -4,6 +4,7 @@
       prepend-icon="mdi-note-text-outline"
       v-for="item in chatrooms"
       :key="item.id"
+      :data-id="item.id"
       @click="changeCanvasId(item.id)"
     >
       {{ item.title }}
@@ -27,18 +28,27 @@ import axios from "axios";
 
 export default {
   name: "CanvasListComponent",
+  props: {
+    canvasUpdateObj: Object, // 부모로부터 전달받은 값 사용
+  },
+  watch: {
+    // canvasName의 변화를 감지
+    canvasUpdateObj(obj) {
+      this.onCanvasInfoChanged(obj);
+    },
+  },
   created() {
     this.channelId = this.$route.params.channelId;
-    console.error()
-    if(this.channelId == "" || this.channelId == undefined){
-      alert("잘못된 접근입니다.")
-      return false
+    if (this.channelId == "" || this.channelId == undefined) {
+      alert("잘못된 접근입니다.");
+      return false;
     }
     this.findAllRoom();
   },
   data() {
     return {
       canvasName: "",
+      canvasIdInList: null,
       channelId: null,
       chatrooms: [],
     };
@@ -51,7 +61,7 @@ export default {
         )
         .then((response) => {
           this.chatrooms = response.data.result.content;
-          if(this.chatrooms.length > 0){
+          if (this.chatrooms.length > 0) {
             this.changeCanvasId(response.data.result.content[0].id); // 첫번째 id 자동선택
           }
         });
@@ -78,12 +88,36 @@ export default {
       }
     },
     changeCanvasId(canvasId) {
-      const sender = "테스트유저 "+ Date.now() ;
+      const sender = "테스트유저 " + Date.now();
       if (sender) {
-        console.log("changeCanvasId!!",canvasId)
+        console.log("changeCanvasId!!", canvasId);
+        this.canvasIdInList = canvasId;
         this.$emit("updateCanvasId", canvasId);
       }
     },
+    onCanvasInfoChanged(obj) {
+      // 캔버스 정보가 변경되었을 때 실행할 로직
+      console.log("obj >> ", obj);
+      if (obj.name) {
+        const targetCanvas = this.chatrooms.find(
+          (item) => item.id === this.canvasIdInList
+        );
+
+        if (targetCanvas) {
+          targetCanvas.title = obj.name; // 리스트 항목의 title을 업데이트
+        }
+      } else if (obj.method && obj.method == "deleteCanvas") {
+        const targetIndex = this.chatrooms.findIndex(
+          (item) => item.id === obj.canvasId
+        );
+
+        if (targetIndex !== -1) {
+          // 해당 인덱스의 항목을 배열에서 삭제
+          this.chatrooms.splice(targetIndex, 1);
+          console.log(`Canvas ID ${obj.canvasId}가 목록에서 삭제되었습니다.`);
+        }
+      }
+    },
   },
 };
 </script>