🐛 [fix] TaskDetail 열려 있을 때 드래그 되는 현상 수정

Author: seorang42

src/components/common/TaskCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full max-w-80 border-l-8 bg-white py-4 pl-4 pr-4 flex flex-col gap-6 rounded-lg shadow-custom hover:bg-background-2 cursor-pointer"
+    class="w-full max-w-80 border-l-8 bg-white p-4 flex flex-col gap-6 rounded-lg shadow-custom hover:bg-background-2 cursor-pointer"
     :class="borderLeft"
     @click="handleModal(data.taskId)">
     <div class="flex flex-col gap-1">
@@ -54,6 +54,7 @@ import ImageContainer from './ImageContainer.vue'
 import TaskDetail from '../task-detail/TaskDetail.vue'
 
 const { data } = defineProps<{ data: TaskCardProps; draggable?: boolean }>()
+const emit = defineEmits(['toggleModal'])
 const selectedID = ref<number | null>(null)
 
 const borderLeft = computed(() => {
@@ -63,6 +64,7 @@ const borderLeft = computed(() => {
 const handleModal = (id: number | null) => {
   if (id) document.body.style.overflow = 'hidden'
   else document.body.style.overflow = ''
+  emit('toggleModal')
   selectedID.value = id
 }
 </script>

src/components/task-board/TaskBoard.vue

@@ -34,12 +34,14 @@
           group="taskList"
           item-key="task"
           class="flex flex-col gap-4 h-full"
-          @change="event => onListChange(event, 'IN_PROGRESS')">
+          @change="event => onListChange(event, 'IN_PROGRESS')"
+          :disabled="isDetailOpen">
           <template #item="{ element }">
             <div>
               <TaskCard
                 :key="element.taskId"
                 :data="element"
+                @toggle-modal="isDetailOpen = !isDetailOpen"
                 draggable />
             </div>
           </template>
@@ -61,12 +63,14 @@
           group="taskList"
           item-key="task"
           class="flex flex-col gap-4 h-full"
-          @change="event => onListChange(event, 'IN_REVIEWING')">
+          @change="event => onListChange(event, 'IN_REVIEWING')"
+          :disabled="isDetailOpen">
           <template #item="{ element }">
             <div>
               <TaskCard
                 :key="element.taskId"
                 :data="element"
+                @toggle-modal="isDetailOpen = !isDetailOpen"
                 draggable />
             </div>
           </template>
@@ -88,12 +92,14 @@
           group="taskList"
           item-key="task"
           class="flex flex-col gap-4 h-full"
-          @change="event => onListChange(event, 'COMPLETED')">
+          @change="event => onListChange(event, 'COMPLETED')"
+          :disabled="isDetailOpen">
           <template #item="{ element }">
             <div>
               <TaskCard
                 :key="element.taskId"
                 :data="element"
+                @toggle-modal="isDetailOpen = !isDetailOpen"
                 draggable />
             </div>
           </template>
@@ -110,7 +116,7 @@ import type { Status } from '@/types/common'
 import type { DraggableEvent, TaskCardList } from '@/types/manager'
 import { axiosInstance } from '@/utils/axios'
 import { useQuery, useQueryClient } from '@tanstack/vue-query'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import draggableComponent from 'vuedraggable'
 import { storeToRefs } from 'pinia'
 import { useParseParams } from '@/hooks/useParseParams'
@@ -183,4 +189,6 @@ const { data } = useQuery<TaskCardList>({
 const tasksInProgress = computed(() => [...(data.value?.tasksInProgress || [])])
 const tasksInReviewing = computed(() => [...(data.value?.tasksInReviewing || [])])
 const tasksCompleted = computed(() => [...(data.value?.tasksCompleted || [])])
+
+const isDetailOpen = ref(false)
 </script>