From b52ccbec49b2646fa6abef10b071d60d96143e0c Mon Sep 17 00:00:00 2001 From: sseho Date: Tue, 29 Oct 2024 15:29:49 +0900 Subject: [PATCH 1/4] =?UTF-8?q?[Feat]=20HC-228=20=EC=8A=A4=EB=A0=88?= =?UTF-8?q?=EB=93=9C=20=EB=93=9C=EB=9E=98=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/thread/ThreadComponent.vue | 167 ++++++++++++---------- 1 file changed, 89 insertions(+), 78 deletions(-) diff --git a/src/components/thread/ThreadComponent.vue b/src/components/thread/ThreadComponent.vue index 5335044..a941750 100644 --- a/src/components/thread/ThreadComponent.vue +++ b/src/components/thread/ThreadComponent.vue @@ -27,7 +27,12 @@ :deleteFile="deleteFile" :createAndAddTag="createAndAddTag" :tagList="tagList" :addTag="addTag" :removeTag="removeTag" :addTagFilter="addTagFilter" :removeTagFilter="removeTagFilter" :tagFilter="tagFilter" :commentIn="commentIn" - draggable="true" @dragover.prevent + :class="{ + dragging: draggingId === message.id, + }" + draggable="true" + @dragstart="tcdShareDragStart($event, 'thread', message)" + @dragend="handleDragEnd" :isDifferentMember="index === 0 || message.memberId != filteredMessages.slice().reverse()[index - 1].memberId || (index > 0 && this.isDifferentDay(message.createdTime, filteredMessages.slice().reverse()[index - 1].createdTime))" /> @@ -174,13 +179,14 @@ export default { // drag 용 tcdDroppedData: null, draggingId: null, + canvasList: [], }; }, watch: { getAllTcdState: { handler(newVal) { console.error("tcd 값 감지. thread >>>> ", newVal); - if(newVal.isDragStatus){ + if(newVal.isDragStatus && newVal.dragStartPage != "thread"){ this.tcdDroppedData = newVal; // 드래그 데이터 저장 }else{ this.tcdDroppedData = null; @@ -624,54 +630,7 @@ export default { }); this.files = null; }, - async handleDrop(event) { - event.preventDefault(); - console.error("@@@@@@@ handleDrop",event) - const droppedData = event.dataTransfer.getData("items"); - - // 드롭된 데이터 로그 출력 - console.log("드롭된 데이터(raw):", droppedData); - - // 드롭된 데이터가 유효한지 확인합니다. - if (droppedData && droppedData.trim() !== "") { - try { - const parsedData = JSON.parse(droppedData); - console.log("드롭된 데이터(parsed)222222222222:", parsedData); - - if (Array.isArray(parsedData) && parsedData.length > 0) { - this.dragedFile = parsedData[0]; // 배열의 첫 번째 항목 사용 - - if (this.dragedFile.type === "drive") { - if(this.dragedFile.driveType =="file"){ - console.log("드롭된 파일 ID:", this.dragedFile.fileId); - // 파일 업로드나 추가 작업을 수행할 로직 작성 - parsedData.map(dragedFile =>this.fileList.push({ - fileId: dragedFile.fileId, - name: dragedFile.fileName, - imageUrl: dragedFile.fileUrl - })); - }else{ - alert("드라이브에서는 [파일]만 drop할 수 있습니다.") - } - } - } else if(parsedData?.type === "canvas"){ - console.error("캔버스 파일 드롭"); - } else if(parsedData?.type === "thread"){ - alert("쓰레드 끼리는 drop 할 수 없습니다.") - } else { - alert("옳지 않은 drop 방식 입니다."); - } - } catch (error) { - console.error("JSON 파싱 오류:", error); - } - } else { - console.log("드롭된 데이터가 없습니다."); - } - - this.tcdDroppedData = null; - }, - - + async getTopMessageList() { try { let params = { @@ -924,41 +883,93 @@ export default { } }, - - // drag drop 용도 - tcdShareDragStart(event, type, item) { - console.error("thread drag 시작", event, type, item); - this.draggingId = item.id; // 드래그 시작 시 아이템 ID 저장 - event.dataTransfer.effectAllowed = "move"; - - let tcdSharedData = item; - if (tcdSharedData != null) { - tcdSharedData.type = "thread"; - console.error(tcdSharedData); - - const dataToTransfer = JSON.stringify(tcdSharedData); - event.dataTransfer.setData("items", dataToTransfer); - // this.draggedType = type; - - // 드래그 시작 시 전송할 데이터 로그 출력 - console.error("드래그 시작 - 전송할 데이터 thread:", dataToTransfer); - const setInfoObj = { - isDragStatus: true, - dragStartPage: "thread", - result: dataToTransfer, + async handleDrop(event) { + event.preventDefault(); + console.error("@@@@@@@ handleDrop",event) + const droppedData = event.dataTransfer.getData("items"); + + // 드롭된 데이터 로그 출력 + console.log("드롭된 데이터(raw):", droppedData); + + // 드롭된 데이터가 유효한지 확인합니다. + if (droppedData && droppedData.trim() !== "") { + try { + const parsedData = JSON.parse(droppedData); + console.log("드롭된 데이터(parsed)222222222222:", parsedData); + + if (Array.isArray(parsedData) && parsedData.length > 0) { + + this.dragedFile = parsedData[0]; // 배열의 첫 번째 항목 사용 + + if (this.dragedFile.type === "drive") { + if(this.dragedFile.driveType =="file"){ + console.log("드롭된 파일 ID:", this.dragedFile.fileId); + // 파일 업로드나 추가 작업을 수행할 로직 작성 + parsedData.map(dragedFile =>this.fileList.push({ + fileId: dragedFile.fileId, + name: dragedFile.fileName, + imageUrl: dragedFile.fileUrl + })); + }else{ + alert("드라이브에서는 [파일]만 drop할 수 있습니다.") + } + } + } else if(parsedData?.type === "canvas"){ + console.log("캔버스 파일 드롭"); + this.canvasList.push(parsedData); + console.log("this.canvasList: ",this.canvasList); + + } else if(parsedData?.type === "thread"){ + alert("쓰레드 끼리는 drop 할 수 없습니다.") + } else { + alert("옳지 않은 drop 방식 입니다."); } - this.$store.dispatch("setTcdStateAllDataActions", setInfoObj); + } catch (error) { + console.error("JSON 파싱 오류:", error); } - }, - handleDragEnd() { - this.draggingId = null; + } else { + console.log("드롭된 데이터가 없습니다."); + } + this.tcdDroppedData = null; + }, + + // drag drop 용도 + tcdShareDragStart(event, type, item) { + console.error("thread drag 시작", event, type, item); + this.draggingId = item.id; // 드래그 시작 시 아이템 ID 저장 + event.dataTransfer.effectAllowed = "move"; + + let tcdSharedData = item; + if (tcdSharedData != null) { + tcdSharedData.type = "thread"; + console.error(tcdSharedData); + + const dataToTransfer = JSON.stringify(tcdSharedData); + event.dataTransfer.setData("items", dataToTransfer); + // this.draggedType = type; + + // 드래그 시작 시 전송할 데이터 로그 출력 + console.error("드래그 시작 - 전송할 데이터 thread:", dataToTransfer); const setInfoObj = { - isDragStatus: false, + isDragStatus: true, dragStartPage: "thread", + result: dataToTransfer, } this.$store.dispatch("setTcdStateAllDataActions", setInfoObj); - }, + } + }, + handleDragEnd() { + console.log("드래그 종료"); + + this.draggingId = null; + + const setInfoObj = { + isDragStatus: false, + dragStartPage: "thread", + } + this.$store.dispatch("setTcdStateAllDataActions", setInfoObj); + }, }, }; From eba6b8d010401a24135a412838dd0134a18f7e0f Mon Sep 17 00:00:00 2001 From: sseho Date: Tue, 29 Oct 2024 16:25:47 +0900 Subject: [PATCH 2/4] =?UTF-8?q?[Feat]=20HC-228=20=EC=BA=94=EB=B2=84?= =?UTF-8?q?=EC=8A=A4=20=EB=93=9C=EB=9E=98=EA=B7=B8=20to=20=EC=8A=A4?= =?UTF-8?q?=EB=A0=88=EB=93=9C=20=EB=94=94=EC=9E=90=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/css/thread.scss | 1 + src/components/thread/ThreadComponent.vue | 41 +++++++++++++++++++++-- 2 files changed, 39 insertions(+), 3 deletions(-) diff --git a/src/assets/css/thread.scss b/src/assets/css/thread.scss index 3015237..81ba41b 100644 --- a/src/assets/css/thread.scss +++ b/src/assets/css/thread.scss @@ -249,6 +249,7 @@ } .nickName { font-size: 12px; + font-weight: 700; display: flex; align-items: center; } diff --git a/src/components/thread/ThreadComponent.vue b/src/components/thread/ThreadComponent.vue index a941750..406de5c 100644 --- a/src/components/thread/ThreadComponent.vue +++ b/src/components/thread/ThreadComponent.vue @@ -40,6 +40,13 @@
+
+
+ mdi-file-document +
{{canvas.title}}
+
캔버스
+
+
@@ -121,7 +123,7 @@ @keydown="handleKeydown" ref="textarea"/>
@@ -435,6 +437,8 @@ export default { createdTime: recv.createdTime, files: recv.files, memberId: recv.memberId, + canvasId: recv.canvasId, + canvasTitle: recv.canvasTitle, }); } @@ -523,7 +527,7 @@ export default { async sendMessage() { if(!this.ws) return // 메시지가 비어있거나 공백 문자만 포함된 경우 - if (!this.message.trim() && this.fileList.length === 0) { + if (!this.message.trim() && this.fileList.length === 0 && this.canvasList.length === 0) { return; // 함수 종료 } const authToken = localStorage.getItem('accessToken'); @@ -565,6 +569,8 @@ export default { senderId: this.sender, parentId: (this.parentThread ? this.parentThread.id : null), content: this.message, + canvasId: (this.canvasList[0] ? this.canvasList[0].id: null), + canvasTitle: (this.canvasList[0] ? this.canvasList[0].title: null), workspaceId: this.workspaceId, files: this.filesRes?.map(file => ({ fileId: file.id, fileName: file.fileName, fileURL: file.fileUrl })) }) @@ -578,6 +584,7 @@ export default { this.fileList = []; this.uploadProgress = []; this.filesRes = null; + this.canvasList=[]; }, async getPresignedURL() { const reqFiles = this.fileList.map(file => ({ fileName: file.name, fileSize: file.size })) @@ -923,6 +930,7 @@ export default { } } else if(parsedData?.type === "canvas"){ console.log("캔버스 파일 드롭"); + this.canvasList=[]; this.canvasList.push(parsedData); console.log("this.canvasList: ",this.canvasList); diff --git a/src/components/thread/ThreadLineComponent.vue b/src/components/thread/ThreadLineComponent.vue index 5c87895..1d874f7 100644 --- a/src/components/thread/ThreadLineComponent.vue +++ b/src/components/thread/ThreadLineComponent.vue @@ -166,6 +166,15 @@
+ +
+
+ mdi-file-document +
{{thread.canvasTitle}}
+
캔버스
+
+
+
@@ -721,6 +730,30 @@ textarea:focus { .tag-create.active { background-color: #e0e0e0; /* 포커스된 Create 태그의 배경 색 */ } +.canvas{ + display: flex; + flex-direction: row; + width: 200px; + height: 70px; + justify-content: center; + align-items: center; + justify-content: space-evenly; + border: 1px solid; + border-radius: 5px; + gap: 5px; +} +.title2 { + font-size: 12px; + font-weight: 700; + display: flex; + align-items: center; +} +.subtitle { + color: #aaa; + font-size: 10px; + display: flex; + align-items: center; +}