Merge pull request #142 from hw-coconote/feat/HC-227

[Fix] HC-227 스레드 fix
hw-coconote · Oct 29, 2024 · 0bc92df · 0bc92df
2 parents 7291a84 + 4465c31
commit 0bc92df
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 23 deletions.
diff --git a/src/assets/css/thread.scss b/src/assets/css/thread.scss
@@ -142,9 +142,6 @@
     z-index: 2;
     border-radius: 5px;
   }
-  .more-btn-file:hover {
-    background: red;
-  }
 
   .tcd-drop-area {
     position: absolute;

diff --git a/src/components/thread/ThreadComponent.vue b/src/components/thread/ThreadComponent.vue
@@ -27,6 +27,7 @@
           :deleteFile="deleteFile" :createAndAddTag="createAndAddTag" :tagList="tagList" :addTag="addTag"
           :removeTag="removeTag" :addTagFilter="addTagFilter" :removeTagFilter="removeTagFilter" :tagFilter="tagFilter"
           :commentIn="commentIn"
+          draggable="true" @dragover.prevent
           :isDifferentMember="index === 0 || message.memberId != filteredMessages.slice().reverse()[index - 1].memberId || (index > 0 && this.isDifferentDay(message.createdTime, filteredMessages.slice().reverse()[index - 1].createdTime))" />
       </div>
       <v-skeleton-loader v-if="currentBottomPage > 0" type="list-item-avatar, paragraph"></v-skeleton-loader>
@@ -95,7 +96,7 @@
     <div class="input-group" @dragover.prevent @drop="handleDrop">
       <div class="image-group">
         <div v-for="(file, index) in fileList" :key="index" style="position: relative;">
-          <button class="more-btn-file" type="button" @click="deleteImage(index)">삭제</button>
+          <button class="more-btn-file" type="button" @click="deleteImage(index)"><v-icon color="error">mdi-trash-can</v-icon></button>
           <img :src="file.imageUrl" @error="e => e.target.src = require('@/assets/images/file.png')"
             style="height: 120px; width: 120px; object-fit: cover; border-radius:5px;">
           <p class="custom-contents">{{ file.name }}</p>
@@ -968,7 +969,7 @@ export default {
 }
 .container {
   padding: 0 0 0 24px;
-  height: 100%;
+  height: 100vh;
 }
 
 .list-group {
@@ -1090,10 +1091,12 @@ textarea:focus {
   z-index: 2;
   border-radius: 5px;
 }
-.more-btn-file:hover{
+.more-btn-file:hover {
   background: red;
+  
 }
+
 </style>
-<style lang="scss">
+<!-- <style lang="scss">
 @import "@/assets/css/thread.scss";
-</style>
+</style> -->
diff --git a/src/components/thread/ThreadLineComponent.vue b/src/components/thread/ThreadLineComponent.vue
@@ -40,22 +40,25 @@
             <div class="more-tag" v-if="isTagMenuVisible" :style="{ [tagMenuPosition]: '25px' }" tabindex="0">
               <div 
               v-for="(tag,index) in filteredTagList" 
-              :key="index" class="tag-list" 
-              :class="{ 'active': index === focusedIndex }" 
+              :key="index" 
+              class="tag-list" 
               @click="addT(tag.id)"
+              :class="{ 'active': index === focusedIndex }" 
               ref="tagRefs"
               >
                 <strong class="tag" :style="{ backgroundColor: tag.color }">{{tag.name}}</strong>
               </div>
-              <strong 
+
+              <!-- <strong 
                 class="tag-create" 
                 :class="{ 'active': focusedIndex === filteredTagList.length }"
                 @click="createTag"
                 ref="createTagRef"
               >
                 + Create "{{tagName}}"
-              </strong>
-              <span class="tag-create" @click="createTag">태그 생성 : "{{tagName}}"</span>
+              </strong> -->
+
+              <span class="tag-create" @click="createTag" :class="{ 'active': focusedIndex === filteredTagList.length }" ref="createTagRef">태그 생성 : "{{tagName}}"</span>
             </div>
           </div>
         </div>
@@ -64,11 +67,11 @@
       <!-- 내용 -->
       <div class="content-group">
         <!-- 내용 태그 -->
-        <div v-if="(isTagMenuVisible || (thread.tags && thread.tags.length!=0)) && !isDifferentMember" class="tag-group">
+        <!-- <div v-if="(isTagMenuVisible || (thread.tags && thread.tags.length!=0)) && !isDifferentMember" class="tag-group">
           <div class="tag-container" v-for="(tag,index) in thread.tags" :key="index" >
             <button @click="addRemoveTagFilter(tag)"><strong class="tag" :style="{ backgroundColor: tag.color }">{{tag.name}}</strong></button>
             <button class="delete-tag" @click="deleteTag(tag.id,tag.threadTagId)">x</button>
-          </div>
+          </div> 
           <div class="hash-btn">
             <button @click="toggleTagMenu">#</button>
           </div>
@@ -104,8 +107,8 @@
               </strong>
             </div>
           </div>
-        </div>
-        <div v-if="!isUpdate" class="content" v-html="formattedContent"></div>
+        </div> 
+        <div v-if="!isUpdate" class="content" v-html="formattedContent"></div>-->
         <div v-if="isUpdate" class="update-group">
           <textarea
             type="text"
@@ -136,18 +139,25 @@
                   v-if="isTagMenuVisible"
                   type="text"
                   class="tag-input"
-                  placeholder="tags"
+                  placeholder="태그를 입력해주세요"
                   v-model="tagName"
-                  v-on:keypress.enter="createTag"
                   v-on:input="adjustWidth"
+                  @keydown="tagHandleKeydown"
                   ref="tagInput"
                   :style="{ width: inputWidth + 'px'}"
                 >
-                <div class="more-tag" v-if="isTagMenuVisible" :style="{ [tagMenuPosition]: '25px' }">
-                  <div v-for="(tag,index) in filteredTagList" :key="index" class="tag-list" @click="addT(tag.id)">
+                <div class="more-tag" v-if="isTagMenuVisible" :style="{ [tagMenuPosition]: '25px' }" tabindex="0">
+                  <div 
+                  v-for="(tag,index) in filteredTagList" 
+                  :key="index" 
+                  class="tag-list" 
+                  @click="addT(tag.id)"
+                  :class="{ 'active': index === focusedIndex }" 
+                  ref="tagRefs"
+                  >
                     <strong class="tag" :style="{ backgroundColor: tag.color }">{{tag.name}}</strong>
                   </div>
-                  <span class="tag-create" @click="createTag">태그 생성 :  "{{tagName}}"</span>
+                  <span class="tag-create" @click="createTag" :class="{ 'active': focusedIndex === filteredTagList.length }" ref="createTagRef">태그 생성 : "{{tagName}}"</span>
                 </div>
               </div>
             </div>
@@ -356,7 +366,7 @@ import axios from '@/services/axios';
         const screenHeight = window.innerHeight;
         const buttonPosition = event.target.getBoundingClientRect().bottom;
 
-        this.tagMenuPosition = (screenHeight / 1.9 > buttonPosition) ? 'top' : 'bottom';
+        this.tagMenuPosition = (screenHeight / 1.7 > buttonPosition) ? 'top' : 'bottom';
 
         this.$nextTick(() => {
           if (this.isTagMenuVisible) {
@@ -453,6 +463,7 @@ import axios from '@/services/axios';
   };
 </script>
 
+<style scoped>
 .more-btn {
   display: none;
   position: absolute;
@@ -711,6 +722,7 @@ textarea:focus {
   background-color: #e0e0e0; /* 포커스된 Create 태그의 배경 색 */
 }
 </style>
+
 <style lang="scss">
 @import "@/assets/css/thread.scss";
 </style>