Merge pull request #29 from TaskFlow-CLAP/CLAP-127

CLAP-127 작업 보드 페이지 초기 UI 제작

Author: seorang42

package-lock.json

@@ -17,12 +17,14 @@
     "js-cookie": "^3.0.5",
     "pinia": "^2.3.0",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@tsconfig/node22": "^22.0.0",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^22.10.2",
+    "@types/sortablejs": "^1.15.8",
     "@typescript-eslint/eslint-plugin": "^8.20.0",
     "@typescript-eslint/parser": "^8.20.0",
     "@vitejs/plugin-vue": "^5.2.1",

package.json

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
 import TopMenu from './components/TopMenu.vue'
 import TheView from './layout/TheView.vue'
 </script>

src/App.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    class="w-full max-w-80 border-l-8 bg-white py-4 pl-6 pr-4 flex flex-col gap-6 rounded-lg shadow-custom hover:bg-background-2"
+    :class="borderLeft"
+    @click="onTaskClick">
+    <div class="flex flex-col gap-1">
+      <div class="flex justify-between items-center gap-4">
+        <span class="text-black">{{ data.title }}</span>
+        <CommonIcons :name="bentoIcon" />
+      </div>
+      <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">{{ data.taskCode }}</span>
+      <div class="flex flex-col gap-1 items-end">
+        <span class="text-xs font-bold text-body">{{ data.requesterDepartment }}</span>
+        <div class="flex items-center gap-1">
+          <div class="w-4 h-4 rounded-full bg-background-1 overflow-hidden">
+            <img :src="data.requesterImageUrl" />
+          </div>
+          <span class="text-xs font-bold text-black">{{ data.requesterNickName }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { bentoIcon } from '@/constants/iconPath'
+import type { Status } from '@/types/common'
+import { computed } from 'vue'
+import type { TaskCardProps } from '@/types/manager'
+import CommonIcons from './common/CommonIcons.vue'
+import { statusAsColor } from '@/utils/statusAsColor'
+
+const { data } = defineProps<{ data: TaskCardProps }>()
+
+const borderLeft = computed(() => {
+  return `border-${statusAsColor(data.taskStatus as Status)}-1`
+})
+
+const onTaskClick = () => {
+  console.log('clicked')
+}
+</script>

src/components/TaskCard.vue

@@ -4,35 +4,27 @@
     :class="bgColor">
     <span
       class="text-xs font-bold"
-      :class="textColor"
-      >{{ status }}</span
-    >
+      :class="textColor">
+      {{ status }}
+    </span>
   </div>
 </template>
 
 <script setup lang="ts">
+import type { Status } from '@/types/common'
+import { statusAsColor } from '@/utils/statusAsColor'
 import { computed } from 'vue'
 
 const { status, isActive } = defineProps<{
-  status?: string
+  status: Status
   isActive?: boolean
 }>()
 
-const defaultColor = {
-  요청: 'gray',
-  '진행 중': 'blue',
-  '검토 중': 'orange',
-  완료: 'green',
-  종료: 'red'
-}
-
-const key = status as keyof typeof defaultColor
-
 const textColor = computed(() => {
-  return isActive ? 'text-white' : `text-${defaultColor[key]}-1`
+  return isActive ? 'text-white' : `text-${statusAsColor(status)}-1`
 })
 const bgColor = computed(() => {
-  return isActive ? `bg-${defaultColor[key]}-1` : `bg-${defaultColor[key]}-2`
+  return isActive ? `bg-${statusAsColor(status)}-1` : `bg-${statusAsColor(status)}-2`
 })
 </script>
 

src/components/TaskStatus.vue

@@ -10,7 +10,7 @@
     </div>
     <TaskStatus
       v-if="isStatus"
-      :status="content" />
+      :status="content as Status" />
     <span
       v-else
       class="text-black"
@@ -21,7 +21,7 @@
 </template>
 
 <script setup lang="ts">
-import type { ListCardProps } from '@/types/common'
+import type { ListCardProps, Status } from '@/types/common'
 import TaskStatus from '../TaskStatus.vue'
 
 const { content, width, isTextXs, profileImg, isStatus } = defineProps<ListCardProps>()

src/components/lists/ListCardTab.vue

@@ -1,5 +1,5 @@
 import type { Category } from '@/types/common'
-import type { RequestedListData, RequestHistoryListData } from '@/types/manager'
+import type { RequestedListData, RequestHistoryListData, TaskCardList } from '@/types/manager'
 import type { MyRequestListData } from '@/types/user'
 
 export const DUMMY_CATEGORY_LIST: Category[] = [
@@ -745,3 +745,54 @@ export const DUMMY_REQUEST_HISTORY_LIST_DATA: RequestHistoryListData[] = [
     finishedAt: '2025.01.11'
   }
 ]
+
+export const DUMMY_TASK_CARD_LIST: TaskCardList = {
+  tasksInProgress: [
+    {
+      taskId: 0,
+      taskCode: 'string',
+      mainCategoryName: 'string',
+      categoryName: 'string',
+      title: 'string',
+      requesterNickName: 'string',
+      requesterImageUrl: 'string',
+      requesterDepartment: 'string',
+      processorOrder: 0,
+      taskStatus: '진행 중',
+      createdAt: '2025-01-28T09:34:00.128Z'
+    }
+  ],
+  tasksPendingComplete: [
+    {
+      taskId: 0,
+      taskCode: 'string',
+      mainCategoryName: 'string',
+      categoryName: 'string',
+      title: 'string',
+      requesterNickName: 'string',
+      requesterImageUrl: 'string',
+      requesterDepartment: 'string',
+      processorOrder: 0,
+      taskStatus: '검토 중',
+      createdAt: '2025-01-28T09:34:00.128Z'
+    }
+  ],
+  tasksCompleted: [
+    {
+      taskId: 0,
+      taskCode: 'string',
+      mainCategoryName: 'string',
+      categoryName: 'string',
+      title: 'string',
+      requesterNickName: 'string',
+      requesterImageUrl: 'string',
+      requesterDepartment: 'string',
+      processorOrder: 0,
+      taskStatus: '완료',
+      createdAt: '2025-01-28T09:34:00.128Z'
+    }
+  ],
+  hasNext: true,
+  isFirst: true,
+  isLast: true
+}

src/datas/dummy.ts

@@ -46,6 +46,11 @@ const router = createRouter({
       path: '/request-history',
       name: 'RequestHistory',
       component: () => import('../views/RequestHistory.vue')
+    },
+    {
+      path: '/task-board',
+      name: 'TaskBoard',
+      component: () => import('../views/TaskBoardView.vue')
     }
   ]
 })

src/router/index.ts

@@ -44,3 +44,5 @@ export interface ListBarTabProps {
   currentOrderRequest?: { sortBy: string; sortDirection: 'DESC' | 'ASC' }
   justifyCenter?: boolean
 }
+
+export type Status = '요청' | '진행 중' | '검토 중' | '완료' | '종료'

src/types/common.ts

@@ -22,3 +22,26 @@ export interface RequestHistoryListData {
   taskStatus: string
   finishedAt?: string
 }
+
+export interface TaskCardProps {
+  taskId: number
+  taskCode: string
+  mainCategoryName: string
+  categoryName: string
+  title: string
+  requesterNickName: string
+  requesterImageUrl: string
+  requesterDepartment: string
+  processorOrder: number
+  taskStatus: string
+  createdAt: string
+}
+
+export interface TaskCardList {
+  tasksInProgress: TaskCardProps[]
+  tasksPendingComplete: TaskCardProps[]
+  tasksCompleted: TaskCardProps[]
+  hasNext: boolean
+  isFirst: boolean
+  isLast: boolean
+}