Merge pull request #34 from TaskFlow-CLAP/CLAP-134

CLAP-134 팀 작업 현황 페이지 UI 제작

Author: seorang42

package-lock.json

@@ -14,9 +14,11 @@
   },
   "dependencies": {
     "axios": "^1.7.9",
+    "chart.js": "^4.4.7",
     "js-cookie": "^3.0.5",
     "pinia": "^2.3.0",
     "vue": "^3.5.13",
+    "vue-chartjs": "^5.3.2",
     "vue-router": "^4.5.0",
     "vuedraggable": "^4.1.0"
   },

package.json

@@ -0,0 +1,27 @@
+<template>
+  <Pie
+    :data="teamData"
+    :options="options" />
+</template>
+
+<script setup lang="ts">
+import { Pie } from 'vue-chartjs'
+import { Chart as ChartJS, Title, Tooltip, Legend, ArcElement, Colors } from 'chart.js'
+ChartJS.register(Title, Tooltip, Legend, ArcElement, Colors)
+
+const { labels, series } = defineProps<{ labels: string[]; series: number[] }>()
+
+const teamData = {
+  labels,
+  datasets: [
+    {
+      data: series
+    }
+  ]
+}
+
+const options = {
+  responsive: true,
+  maintainAspectRatio: false
+}
+</script>

src/components/PieChart.vue

@@ -6,7 +6,9 @@
     <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" />
+        <CommonIcons
+          v-if="draggable"
+          :name="bentoIcon" />
       </div>
       <span class="text-xs text-body">{{ data.mainCategoryName }} - {{ data.categoryName }}</span>
     </div>
@@ -33,7 +35,7 @@ import type { TaskCardProps } from '@/types/manager'
 import CommonIcons from './common/CommonIcons.vue'
 import { statusAsColor } from '@/utils/statusAsColor'
 
-const { data } = defineProps<{ data: TaskCardProps }>()
+const { data } = defineProps<{ data: TaskCardProps; draggable?: boolean }>()
 
 const borderLeft = computed(() => {
   return `border-${statusAsColor(data.taskStatus as Status)}-1`

src/components/TaskCard.vue

@@ -0,0 +1,29 @@
+import { useTeamBoardParamsStore } from '@/stores/params'
+
+export const useTeamBoardParamsChange = () => {
+  const { params } = useTeamBoardParamsStore()
+
+  const onArrayChange = <Value extends number | string>(array: Value[], value: Value) => {
+    return array.includes(value) ? array.filter(el => el !== value) : [...array, value]
+  }
+
+  const onOrderChange = (value: string) => {
+    params.order = value
+  }
+  const onTitleChange = (value: string) => {
+    params.title = value
+  }
+  const onMainChange = (value: number) => {
+    params.mainCategoryId = onArrayChange(params.mainCategoryId, value)
+  }
+  const onSubChange = (value: number) => {
+    params.categoryId = onArrayChange(params.categoryId, value)
+  }
+
+  return {
+    onOrderChange,
+    onTitleChange,
+    onMainChange,
+    onSubChange
+  }
+}

src/components/hooks/useTeamBoardParamsChange.ts

@@ -0,0 +1,39 @@
+<template>
+  <div class="flex flex-col gap-3">
+    <span class="text-xl font-bold text-black">현재 작업 비율</span>
+    <div class="flex flex-col gap-4">
+      <div class="flex justify-between items-center">
+        <div class="flex items-center gap-3">
+          <span class="text-xs font-bold text-body">진행 중 {{ teamSummary.inProgress }}건</span>
+          <div class="w-[1px] h-[10px] bg-body" />
+          <span class="text-xs font-bold text-body"
+            >완료 대기 {{ teamSummary.pendingCompletion }}건</span
+          >
+        </div>
+        <span class="text-xs font-bold text-primary1">총 {{ teamSummary.totalTasks }}건</span>
+      </div>
+      <div
+        class="w-full h-[360px] rounded-lg bg-primary2 shadow-custom overflow-y-scroll items-center p-6 gap-4">
+        <PieChart
+          :labels="chartLabels"
+          :series="chartSeries" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PieChart from '../PieChart.vue'
+
+const { teamSummary, teamData } = defineProps<{
+  teamSummary: {
+    inProgress: number
+    pendingCompletion: number
+    totalTasks: number
+  }
+  teamData: { name: string; tasks: number }[]
+}>()
+
+const chartSeries = teamData.map(member => member.tasks)
+const chartLabels = teamData.map(member => member.name)
+</script>

src/components/team-board/CurrentTaskRatio.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="grow overflow-y-scroll p-6">
+    <div class="grid grid-cols-3 gap-12">
+      <CurrentTaskRatio
+        :team-summary="teamSummary"
+        :team-data="teamData" />
+      <TeamBoardCard
+        v-for="member in DUMMY_TEAM_MEMBERS_LIST"
+        :key="member.name"
+        :name="member.name"
+        :department="member.department"
+        :task-status-summary="member.taskStatusSummary"
+        :tasks="member.tasks" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DUMMY_TEAM_MEMBERS_LIST } from '@/datas/dummy'
+import TeamBoardCard from './TeamBoardCard.vue'
+import CurrentTaskRatio from './CurrentTaskRatio.vue'
+
+const getSummaryCount = (key: 'inProgress' | 'pendingCompletion' | 'totalTasks') => {
+  let count = 0
+  DUMMY_TEAM_MEMBERS_LIST.forEach(el => (count += el.taskStatusSummary[key]))
+  return count
+}
+const teamSummary = {
+  inProgress: getSummaryCount('inProgress'),
+  pendingCompletion: getSummaryCount('pendingCompletion'),
+  totalTasks: getSummaryCount('totalTasks')
+}
+
+const teamData = DUMMY_TEAM_MEMBERS_LIST.map(el => ({
+  name: el.name,
+  tasks: el.taskStatusSummary.totalTasks
+}))
+</script>

src/components/team-board/TeamBoard.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="flex justify-between items-center">
+      <div class="flex items-center gap-2">
+        <div class="w-6 h-6 rounded-full overflow-hidden">
+          <img src="https://picsum.photos/24" />
+        </div>
+        <span class="text-black">{{ name }}</span>
+      </div>
+      <span class="text-xs font-bold text-body">{{ department }}</span>
+    </div>
+    <div class="flex justify-between items-center">
+      <div class="flex items-center gap-3">
+        <span class="text-xs font-bold text-body"
+          >진행 중 {{ taskStatusSummary.inProgress }}건</span
+        >
+        <div class="w-[1px] h-[10px] bg-body" />
+        <span class="text-xs font-bold text-body"
+          >완료 대기 {{ taskStatusSummary.pendingCompletion }}건</span
+        >
+      </div>
+      <span class="text-xs font-bold text-primary1">총 {{ taskStatusSummary.totalTasks }}건</span>
+    </div>
+    <div
+      class="w-full h-[360px] rounded-lg bg-primary2 shadow-custom overflow-y-scroll flex flex-col items-center p-6 gap-4">
+      <TaskCard
+        v-for="task in tasks"
+        :key="task.taskId"
+        :data="task" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { TeamBoardCardProps } from '@/types/manager'
+import TaskCard from '../TaskCard.vue'
+
+const { name, department, taskStatusSummary, tasks } = defineProps<TeamBoardCardProps>()
+</script>

src/components/team-board/TeamBoardCard.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="flex gap-4">
+    <FilterDropdown
+      title="정렬"
+      :option-list="[
+        { value: 'CONTRIBUTION', content: '기여도순' },
+        { value: 'NAME', content: '이름순' }
+      ]"
+      :value="params.order"
+      @update:value="onParamsChange.onOrderChange" />
+    <FilterInput
+      title="제목"
+      :value="''"
+      @update:value="onParamsChange.onTitleChange" />
+    <FilterCategory
+      :category-list="DUMMY_CATEGORY_LIST"
+      :main="params.mainCategoryId"
+      :sub="params.categoryId"
+      @update:main="onParamsChange.onMainChange"
+      @update:sub="onParamsChange.onSubChange" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { DUMMY_CATEGORY_LIST } from '@/datas/dummy'
+import FilterCategory from '../filters/FilterCategory.vue'
+import FilterDropdown from '../filters/FilterDropdown.vue'
+import FilterInput from '../filters/FilterInput.vue'
+import { useTeamBoardParamsStore } from '@/stores/params'
+import { useTeamBoardParamsChange } from '../hooks/useTeamBoardParamsChange'
+
+const { params } = useTeamBoardParamsStore()
+
+const onParamsChange = useTeamBoardParamsChange()
+</script>