Clap-233 작업 상세조회, 사용자 상세조회 api 연결

src/api/user.ts

@@ -4,3 +4,13 @@ export const postTaskRequest = async (formdata: FormData) => {
   const response = await formDataAxiosInstance.post('/api/tasks', formdata)
   return response.data
 }
+
+export const getTaskDetailUser = async (id: number) => {
+  const response = await formDataAxiosInstance.get(`/api/tasks/${id}/requests/details`)
+  return response.data
+}
+
+export const getTaskDetailManager = async (id: number) => {
+  const response = await formDataAxiosInstance.get(`/api/tasks/${id}/details`)
+  return response.data
+}

src/components/TaskStatus.vue

@@ -28,5 +28,3 @@ const bgColor = computed(() => {
   return isActive ? `bg-${statusAsColor(status)}-1` : `bg-${statusAsColor(status)}-2`
 })
 </script>
-
-<style scoped></style>

src/components/my-request/MyRequestListCard.vue

@@ -2,22 +2,36 @@
   <div class="list-card">
     <ListCardTab
       v-for="tab in myRequestTabList"
+      @click="handleModal(info.taskId)"
       :key="tab.content"
       :content="tab.content"
       :width="tab.width"
       :is-text-xs="tab.isTextXs"
       :profile-img="tab.profileImg"
       :is-status="tab.isStatus" />
   </div>
+  <TaskDetail
+    v-if="selectedID"
+    :is-approved="info.taskStatus !== 'REQUESTED'"
+    :selected-id="selectedID"
+    :close-task-detail="() => handleModal(null)" />
 </template>
 
 <script setup lang="ts">
 import type { ListCardProps } from '@/types/common'
-import ListCardTab from '../lists/ListCardTab.vue'
 import type { MyRequestListData } from '@/types/user'
 import { formatDate } from '@/utils/date'
+import { ref } from 'vue'
+import ListCardTab from '../lists/ListCardTab.vue'
+import TaskDetail from '../task-detail/TaskDetail.vue'
 
 const { info } = defineProps<{ info: MyRequestListData }>()
+const selectedID = ref<number | null>(null)
+
+const handleModal = (id: number | null) => {
+  selectedID.value = id
+}
+
 const myRequestTabList: ListCardProps[] = [
   { content: info.taskCode, width: 120, isTextXs: true },
   { content: formatDate(info.requestedAt), width: 80 },

src/components/my-task/MyTaskFilterBar.vue

@@ -41,7 +41,7 @@ import { useRequestParamsStore } from '@/stores/params'
 import { PAGE_SIZE_LIST, TASK_STATUS_LIST, TERM_LIST } from '@/constants/common'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 import { useQuery } from '@tanstack/vue-query'
-import {axiosInstance} from '@/utils/axios'
+import { axiosInstance } from '@/utils/axios'
 
 const store = useRequestParamsStore()
 store.$reset()

src/components/request-task/CategoryDropDown.vue

@@ -41,7 +41,7 @@
 
 <script lang="ts" setup>
 import { dropdownIcon } from '@/constants/iconPath'
-import type { CategoryDropdownProps, MainCategoryTypes, SubCategoryTypes } from '@/types/common'
+import type { Category, CategoryDropdownProps } from '@/types/common'
 import { computed, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 
@@ -58,7 +58,7 @@ const toggleDropdown = () => {
   dropdownOpen.value = !dropdownOpen.value
 }
 
-const selectOption = (option: MainCategoryTypes | SubCategoryTypes) => {
+const selectOption = (option: Category) => {
   emit('update:modelValue', option)
   dropdownOpen.value = false
 }

src/components/request-task/RequestTask.vue

@@ -38,7 +38,7 @@
 <script lang="ts" setup>
 import { getMainCategory, getSubCategory } from '@/api/common'
 import { postTaskRequest } from '@/api/user'
-import type { MainCategoryTypes, SubCategoryTypes } from '@/types/common'
+import type { Category, SubCategory } from '@/types/common'
 import { onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import FormButtonContainer from '../common/FormButtonContainer.vue'
@@ -48,18 +48,18 @@ import RequestTaskFileInput from './RequestTaskFileInput.vue'
 import RequestTaskInput from './RequestTaskInput.vue'
 import RequestTaskTextArea from './RequestTaskTextArea.vue'
 
-const category1 = ref<MainCategoryTypes | null>(null)
-const category2 = ref<MainCategoryTypes | null>(null)
+const category1 = ref<Category | null>(null)
+const category2 = ref<Category | null>(null)
 
 const title = ref('')
 const description = ref('')
 const file = ref(null as File[] | null)
 const isInvalidate = ref('')
 const isModalVisible = ref(false)
 
-const mainCategoryArr = ref<MainCategoryTypes[]>([])
-const subCategoryArr = ref<SubCategoryTypes[]>([])
-const afterSubCategoryArr = ref<SubCategoryTypes[]>([])
+const mainCategoryArr = ref<Category[]>([])
+const subCategoryArr = ref<SubCategory[]>([])
+const afterSubCategoryArr = ref<SubCategory[]>([])
 
 onMounted(async () => {
   mainCategoryArr.value = await getMainCategory()

src/components/requested/RequestedFilterBar.vue

@@ -35,7 +35,7 @@ import { PAGE_SIZE_LIST, TERM_LIST } from '@/constants/common'
 import { useRequestParamsStore } from '@/stores/params'
 import { useRequestParamsChange } from '../hooks/useRequestParamsChange'
 import { useQuery } from '@tanstack/vue-query'
-import {axiosInstance} from '@/utils/axios'
+import { axiosInstance } from '@/utils/axios'
 
 const store = useRequestParamsStore()
 store.$reset()

src/components/task-board/TaskBoardFilterBar.vue

@@ -29,7 +29,7 @@ import FilterInput from '../filters/FilterInput.vue'
 import { DUMMY_DIVISION_LIST } from '@/datas/dummy'
 import { useTaskBoardParamsStore } from '@/stores/params'
 import { useQuery } from '@tanstack/vue-query'
-import {axiosInstance} from '@/utils/axios'
+import { axiosInstance } from '@/utils/axios'
 
 const { params } = useTaskBoardParamsStore()
 

src/components/task-detail/TaskDetail.vue

@@ -1,36 +1,43 @@
 <template>
-  <div
-    class="flex flex-col overflow-y-auto rounded-lg w-full max-w-[1200px] min-w-[1024px] bg-white p-6">
-    <TaskDetailTopBar
-      :is-manager="isManager"
-      :is-approved="isApproved"
-      :close-task-detail="closeTaskDetail" />
-    <div class="w-full flex gap-6">
-      <div class="w-full h-[718px] flex flex-col gap-y-8 overflow-y-auto scrollbar-hide">
-        <TaskDetailLeft :task-detail="DUMMY_TASK_DETAIL" />
-        <div class="w-full border-border-1 border"></div>
-        <TaskDetailHistory
-          :history="DUMMY_TASK_DETAIL_HISTORY"
-          :is-approved="false"
-          :is-manager="false" />
+  <div class="fixed inset-0 bg-black bg-opacity-15 flex justify-center items-center z-50">
+    <div
+      class="flex flex-col overflow-y-auto rounded-lg w-full max-w-[1200px] min-w-[1024px] bg-white p-6">
+      <TaskDetailTopBar
+        :is-approved="isApproved"
+        :close-task-detail="closeTaskDetail"
+        :id="data?.taskId || 0" />
+      <div
+        class="w-full flex gap-6"
+        v-if="data">
+        <div class="w-full h-[718px] flex flex-col gap-y-8 overflow-y-auto scrollbar-hide">
+          <TaskDetailLeft :data="data" />
+          <div class="w-full border-[0.5px] border-border-1"></div>
+          <TaskDetailHistory
+            :history="DUMMY_TASK_DETAIL_HISTORY"
+            :is-approved="false" />
+        </div>
+        <div class="w-[1px] bg-border-1"></div>
+        <TaskDetailRight :data />
       </div>
-      <div class="w-[1px] bg-border-1"></div>
-      <TaskDetailRight
-        :task-detail="DUMMY_TASK_DETAIL"
-        :is-manager="true" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { getTaskDetailManager } from '@/api/user'
 import * as taskDetailData from '@/datas/taskdetail'
-import type { TaskDetailProps } from '@/types/user'
+import type { TaskDetailDatas, TaskDetailProps } from '@/types/user'
+import { useQuery } from '@tanstack/vue-query'
 import TaskDetailHistory from './TaskDetailHistory.vue'
 import TaskDetailLeft from './TaskDetailLeft.vue'
 import TaskDetailRight from './TaskDetailRight.vue'
 import TaskDetailTopBar from './TaskDetailTopBar.vue'
 
-const { DUMMY_TASK_DETAIL_HISTORY, DUMMY_TASK_DETAIL } = taskDetailData
+const { DUMMY_TASK_DETAIL_HISTORY } = taskDetailData
+const { isApproved, closeTaskDetail, selectedId } = defineProps<TaskDetailProps>()
 
-const { isManager, isApproved, closeTaskDetail } = defineProps<TaskDetailProps>()
+const { data } = useQuery<TaskDetailDatas>({
+  queryKey: ['taskDetailUser', selectedId],
+  queryFn: () => getTaskDetailManager(selectedId)
+})
 </script>

src/components/task-detail/TaskDetailFiles.vue

@@ -18,7 +18,7 @@
         class="flex w-full justify-between items-center h-8 text-xs border-b border-b-border-2 text-black px-4 shrink-0">
         <p class="flex truncate mr-3">{{ file.fileName }}</p>
         <div class="flex gap-6">
-          <p class="w-[60px]">{{ formatFileSize(Number(file.fileSize)) }}</p>
+          <p class="w-[60px]">{{ file.fileSize }}</p>
           <p class="w-36">{{ new Date().toLocaleString() }}</p>
           <div class="w-10 flex items-center justify-center cursor-pointer">
             <CommonIcons
@@ -35,11 +35,16 @@
 <script lang="ts" setup>
 import { downloadIcon } from '@/constants/iconPath'
 import type { AttachmentResponse } from '@/types/user'
-import { formatFileSize } from '@/utils/unit'
 import CommonIcons from '../common/CommonIcons.vue'
 
 const { files } = defineProps<{ files: AttachmentResponse[] }>()
+
 const downloadFile = (file: AttachmentResponse) => {
-  console.log('향후 파일 다운 로직 추가', file)
+  const link = document.createElement('a')
+  link.href = file.fileUrl
+  link.download = file.fileName
+  document.body.appendChild(link)
+  link.click()
+  document.body.removeChild(link)
 }
 </script>

src/components/task-detail/TaskDetailLeft.vue

@@ -2,31 +2,31 @@
   <div class="flex-grow flex flex-col gap-6">
     <div>
       <p class="task-detail">1차 카테고리</p>
-      <p>{{ taskDetail.mainCategoryName }}</p>
+      <p>{{ data.mainCategoryName }}</p>
     </div>
     <div>
       <p class="task-detail">2차 카테고리</p>
-      <p>{{ taskDetail.categoryName }}</p>
+      <p>{{ data.categoryName }}</p>
     </div>
     <div>
       <p class="task-detail">제목</p>
-      <p>{{ taskDetail.title }}</p>
+      <p>{{ data.title }}</p>
     </div>
     <div>
       <p class="task-detail">부가 설명</p>
-      <p class="px-6 py-4 bg-primary2 rounded-lg font-normal">{{ taskDetail.description }}</p>
+      <p class="px-6 py-4 bg-primary2 rounded-lg font-normal">{{ data.description }}</p>
     </div>
     <div>
       <p class="task-detail">첨부 파일</p>
-      <TaskDetailFiles :files="taskDetail.attachmentResponse" />
+      <TaskDetailFiles :files="data.attachmentResponses" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import type { TaskDetailDatas } from '@/types/user'
 import TaskDetailFiles from './TaskDetailFiles.vue'
-const { taskDetail } = defineProps<{ taskDetail: TaskDetailDatas }>()
+const { data } = defineProps<{
+  data: TaskDetailDatas
+}>()
 </script>
-
-<style scoped></style>

src/components/task-detail/TaskDetailRight.vue

@@ -1,36 +1,43 @@
 <template>
-  <div class="w-60 flex flex-col gap-y-6 pb-6 text-black">
+  <div class="min-w-60 flex flex-col gap-y-6 pb-6 text-black">
     <div>
       <p class="task-detail">ID</p>
-      <p class="text-sm text-black">{{ taskDetail.taskId || '-' }}</p>
+      <p class="text-sm text-black">{{ data.taskId || '-' }}</p>
     </div>
     <div>
       <p class="task-detail">요청일</p>
-      <p class="text-sm text-black">{{ formatDate(taskDetail.requestedAt) }}</p>
+      <p class="text-sm text-black">{{ formatDate(data.requestedAt) }}</p>
     </div>
     <div>
       <p class="task-detail">종료일</p>
-      <p class="text-sm text-black">{{ formatDate(taskDetail.finishedAt) || '-' }}</p>
+      <p class="text-sm text-black">
+        {{ (data.finishedAt && formatDate(data.finishedAt)) || '-' }}
+      </p>
     </div>
     <div>
       <p class="task-detail">상태</p>
-      <div class="w-fit">
-        <TaskStatus :status="taskDetail.taskStatus" />
+      <div
+        v-if="data.taskStatus === 'REQUESTED'"
+        class="w-fit">
+        <TaskStatus :status="data.taskStatus" />
+      </div>
+      <div v-else>
+        <TaskStatusList :status="data.taskStatus" />
       </div>
     </div>
     <div>
       <p class="task-detail">요청자</p>
       <div class="flex gap-2">
         <img
-          :src="taskDetail.requesterImageUrl"
+          :src="data.requesterImageUrl || '/images/mockProfile.jpg'"
           class="rounded-full overflow-hidden w-5 h-5"
           alt="requesterImg" />
-        <p class="text-sm text-black">{{ taskDetail.requesterNickName }}</p>
+        <p class="text-sm text-black">{{ data.requesterNickName }}</p>
       </div>
     </div>
     <div>
       <p class="task-detail">처리자</p>
-      <div v-if="isManager">
+      <div v-if="isManager && data.processorNickName">
         <TaskDetailDropdown
           v-model="processor"
           :options="DUMMY_REQUEST_PROCESSORS"
@@ -40,44 +47,50 @@
         v-else
         class="flex gap-2">
         <img
-          v-if="taskDetail.processorImageUrl"
-          :src="taskDetail.processorImageUrl"
+          v-if="data.processorNickName"
+          :src="data.processorImageUrl || '/images/mockProfile.jpg'"
           class="rounded-full overflow-hidden w-5 h-5"
           alt="processorImg" />
-        <p class="text-sm text-black">{{ taskDetail.processorNickName || '-' }}</p>
+        <p class="text-sm text-black">{{ data.processorNickName || '-' }}</p>
       </div>
     </div>
-    <div v-if="isManager">
+    <div v-if="isManager && data.dueDate">
       <p class="task-detail">마감기한</p>
       <div class="w-full flex justify-between items-center">
-        <p class="text-sm text-black">{{ taskDetail.dueDate || '-' }}까지</p>
+        <p class="text-sm text-black">{{ data.dueDate || '-' }}까지</p>
         <p class="text-primary1 text-xs font-bold">변경</p>
       </div>
       <p class="text-red-1 text-xs font-bold">3일 전</p>
     </div>
-    <div v-if="isManager">
+    <div v-if="isManager && data.labelName">
       <p class="task-detail">구분</p>
       <TaskDetailLabelDropdown
         v-model="labeling"
         :options="DUMMY_TASK_LABELS"
-        :processor="taskDetail.labelName" />
+        :processor="data.labelName" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { DUMMY_PROCESSOR, DUMMY_REQUEST_PROCESSORS, DUMMY_TASK_LABELS } from '@/datas/taskdetail'
-import type { TaskDetailRightProps } from '@/types/user'
+import { useMemberStore } from '@/stores/member'
+import type { TaskDetailDatas } from '@/types/user'
 import { formatDate } from '@/utils/date'
-import { defineProps, ref } from 'vue'
+import { storeToRefs } from 'pinia'
+import { computed, defineProps, ref } from 'vue'
 import TaskStatus from '../TaskStatus.vue'
 import TaskDetailDropdown from './TaskDetailDropdown.vue'
 import TaskDetailLabelDropdown from './TaskDetailLabelDropdown.vue'
+import TaskStatusList from './TaskStatusList.vue'
 
-const { taskDetail, isManager } = defineProps<TaskDetailRightProps>()
+const memberStore = useMemberStore()
+const { info } = storeToRefs(memberStore)
+const isManager = computed(() => info.value.memberName === data.processorNickName)
+
+const { data } = defineProps<{ data: TaskDetailDatas }>()
+console.log(data, '가져온 데이터')
 
 const processor = ref(DUMMY_PROCESSOR.nickName)
 const labeling = ref(DUMMY_TASK_LABELS[0].labelName)
 </script>
-
-<script setup lang="ts"></script>