♻️ [refactor] : TaskCard 위치 변경 및 props 간소화

Author: seorang42

src/components/task-board/TaskCard.vue src/components/TaskCard.vuesrc/components/task-board/TaskCard.vue renamed to src/components/TaskCard.vue

@@ -5,20 +5,20 @@
     @click="onTaskClick">
     <div class="flex flex-col gap-1">
       <div class="flex justify-between items-center gap-4">
-        <span class="text-black">{{ title }}</span>
+        <span class="text-black">{{ data.title }}</span>
         <CommonIcons :name="bentoIcon" />
       </div>
-      <span class="text-xs text-body">{{ mainCategoryName }} - {{ categoryName }}</span>
+      <span class="text-xs text-body">{{ data.mainCategoryName }} - {{ data.categoryName }}</span>
     </div>
     <div class="flex justify-between items-end">
-      <span class="text-xs font-bold text-black">{{ taskCode }}</span>
+      <span class="text-xs font-bold text-black">{{ data.taskCode }}</span>
       <div class="flex flex-col gap-1 items-end">
-        <span class="text-xs font-bold text-body">{{ requesterTeam }}</span>
+        <span class="text-xs font-bold text-body">{{ data.requesterTeam }}</span>
         <div class="flex items-center gap-1">
           <div class="w-4 h-4 rounded-full bg-background-1 overflow-hidden">
-            <img :src="requesterImg" />
+            <img :src="data.requesterImg" />
           </div>
-          <span class="text-xs font-bold text-black">{{ requesterName }}</span>
+          <span class="text-xs font-bold text-black">{{ data.requesterName }}</span>
         </div>
       </div>
     </div>
@@ -27,14 +27,13 @@
 
 <script setup lang="ts">
 import { bentoIcon } from '@/constants/iconPath'
-import CommonIcons from '../common/CommonIcons.vue'
 import type { Status } from '@/types/common'
 import { computed } from 'vue'
 import { statusAsColor } from '@/utils/statusAsColor'
 import type { TaskCardProps } from '@/types/manager'
+import CommonIcons from './common/CommonIcons.vue'
 
-const { title, mainCategoryName, categoryName, taskCode, requesterName, requesterTeam, status } =
-  defineProps<TaskCardProps>()
+const { data } = defineProps<{ data: TaskCardProps }>()
 
 const borderLeft = computed(() => {
   return `border-${statusAsColor(status as Status)}-1`

src/views/TaskBoardView.vue

@@ -28,14 +28,7 @@
           <template #item="{ element }">
             <TaskCard
               :key="element.taskId"
-              :title="element.title"
-              :main-category-name="element.mainCategoryName"
-              :category-name="element.categoryName"
-              :task-code="element.taskCode"
-              :requester-team="element.requesterTeam"
-              :requester-img="element.requesterImg"
-              :requester-name="element.requesterName"
-              :status="status.taskStatus" />
+              :data="element" />
           </template>
         </draggableComponent>
       </div>
@@ -44,12 +37,12 @@
 </template>
 
 <script setup lang="ts">
-import TaskCard from '@/components/task-board/TaskCard.vue'
 import TitleBar from '@/components/TitleBar.vue'
 import { DUMMY_TASK_CARD_LIST } from '@/datas/dummy'
 import { ref } from 'vue'
 import draggableComponent from 'vuedraggable'
 import type { SortableEvent } from 'sortablejs'
+import TaskCard from '@/components/TaskCard.vue'
 
 const cardList = ref(DUMMY_TASK_CARD_LIST)