Clap-260 요청 세부 사항 우측 관련 API, 히스토리 조회 API 연결

src/api/admin.ts

@@ -1,19 +1,19 @@
-import type { NewLabelTypes } from '@/types/admin'
+import type { NewLabelTypes, UserRegistrationProps } from '@/types/admin'
 import type { LabelDataTypes } from '@/types/common'
 import { axiosInstance } from '@/utils/axios'
 
 export const deleteLabelAdmin = async (id: number) => {
-  const response = await axiosInstance.delete(`/api/management/labels/${id}`)
+  const response = await axiosInstance.delete(`/api/managements/labels/${id}`)
   return response.data
 }
 
 export const postAddLabelAdmin = async (newLabel: NewLabelTypes) => {
-  const response = await axiosInstance.post('/api/management/labels', newLabel)
+  const response = await axiosInstance.post('/api/managements/labels', newLabel)
   return response.data
 }
 
 export const patchLabelAdmin = async (editLabel: LabelDataTypes) => {
-  const response = await axiosInstance.patch(`/api/management/labels/${editLabel.labelId}`, {
+  const response = await axiosInstance.patch(`/api/managements/labels/${editLabel.labelId}`, {
     labelName: editLabel.labelName,
     labelColor: editLabel.labelColor
   })
@@ -24,3 +24,9 @@ export const deleteCategoryAdmin = async (id: number) => {
   const response = await axiosInstance.delete(`/api/managements/categories/${id}`)
   return response.data
 }
+
+export const addMemberAdmin = async (memberData: UserRegistrationProps) => {
+  console.log(memberData, '요청 데이터')
+  const response = await axiosInstance.post('/api/managements/members', memberData)
+  return response.data
+}

src/api/user.ts

@@ -1,3 +1,4 @@
+import type { Status } from '@/types/common'
 import type { RequestApprovePostTypes } from '@/types/manager'
 import { axiosInstance, formDataAxiosInstance } from '@/utils/axios'
 
@@ -30,3 +31,23 @@ export const getManager = async () => {
   const response = await axiosInstance.get('/api/managers')
   return response.data
 }
+
+export const changeProcessor = async (taskID: number, processorId: number) => {
+  const response = await axiosInstance.patch(`/api/tasks/${taskID}/processor`, { processorId })
+  return response.data
+}
+
+export const patchChangeStatus = async (taskID: number, status: Status) => {
+  const response = await axiosInstance.patch(`/api/tasks/${taskID}/status`, status)
+  return response.data
+}
+
+export const changeLabel = async (taskID: number, labelId: number) => {
+  const response = await axiosInstance.patch(`/api/tasks/${taskID}/label`, { labelId })
+  return response.data
+}
+
+export const getHistory = async (taskID: number) => {
+  const response = await axiosInstance.get(`/api/tasks/${taskID}/histories`)
+  return response.data
+}

src/assets/styles.css

@@ -110,7 +110,7 @@ body {
   @apply flex w-full h-11 items-center rounded p-4 bg-white border border-border-1 cursor-pointer text-black;
 }
 .request-task-dropdown-option-list {
-  @apply absolute w-full h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2 text-black;
+  @apply absolute w-full h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow-custom text-black;
 }
 .request-task-dropdown-option {
   @apply w-full flex items-center h-11 p-2 rounded hover:bg-background-2 cursor-pointer;
@@ -138,3 +138,6 @@ body {
 .task-detail-dropdown-option {
   @apply w-full flex items-center h-10 p-2 rounded hover:bg-background-2 cursor-pointer;
 }
+.task-detail-manager-dropdown {
+  @apply flex w-full h-10 items-center rounded p-4 bg-white border border-border-1 cursor-pointer text-black;
+}

src/components/TopBar.vue

@@ -31,13 +31,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import CommonIcons from './common/CommonIcons.vue'
-import SideBar from './SideBar.vue'
+import { useMemberStore } from '@/stores/member'
+import { storeToRefs } from 'pinia'
+import { onMounted, ref } from 'vue'
 import { hamburgerIcon } from '../constants/iconPath'
+import CommonIcons from './common/CommonIcons.vue'
 import NotificationIcon from './icons/NotificationIcon.vue'
-import { storeToRefs } from 'pinia'
-import { useMemberStore } from '@/stores/member'
+import SideBar from './top-bar/SideBar.vue'
 
 const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)

src/components/my-task/MyTaskListCard.vue

@@ -2,22 +2,35 @@
   <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 { MyTaskListData } from '@/types/manager'
 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: MyTaskListData }>()
+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/request-history/RequestHistoryListCard.vue

@@ -2,22 +2,35 @@
   <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 { RequestHistoryListData } from '@/types/manager'
 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: RequestHistoryListData }>()
+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/request-task/RequestTask.vue

@@ -42,6 +42,7 @@ import type { Category, SubCategory } from '@/types/common'
 import { onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import FormButtonContainer from '../common/FormButtonContainer.vue'
+import ModalView from '../ModalView.vue'
 import CategoryDropDown from './CategoryDropDown.vue'
 import RequestTaskFileInput from './RequestTaskFileInput.vue'
 import RequestTaskInput from './RequestTaskInput.vue'
@@ -87,7 +88,6 @@ const handleCancel = () => {
 const handleSubmit = async () => {
   if (!category1.value || !category2.value) {
     isInvalidate.value = 'category'
-    console.log(isInvalidate.value, '변경됨')
     return
   } else if (!title.value) {
     isInvalidate.value = 'input'
@@ -110,8 +110,8 @@ const handleSubmit = async () => {
     file.value.forEach(f => formData.append('attachment', f))
   }
   try {
-    const res = await postTaskRequest(formData)
-    console.error('요청 성공:', res)
+    await postTaskRequest(formData)
+    isModalVisible.value = true
   } catch (error) {
     console.error('요청 실패:', error)
   }

src/components/requested/RequestedListCard.vue

@@ -19,6 +19,11 @@
         class="button-medium-default">
         거부
       </button>
+      <button
+        @click="toggleModal('reject')"
+        class="button-medium-default">
+        거부
+      </button>
     </div>
   </div>
 
@@ -47,13 +52,13 @@
 <script setup lang="ts">
 import type { ListCardProps } from '@/types/common'
 import type { RequestedListData } from '@/types/manager'
-import { formatDate } from '@/utils/date'
-import ModalView from '../ModalView.vue'
-import { ref } from 'vue'
 import { axiosInstance } from '@/utils/axios'
+import { formatDate } from '@/utils/date'
 import { useQueryClient } from '@tanstack/vue-query'
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ListCardTab from '../lists/ListCardTab.vue'
+import ModalView from '../ModalView.vue'
 
 const { info } = defineProps<{ info: RequestedListData }>()
 const requestedTabList: ListCardProps[] = [

src/components/task-detail/TaskDetail.vue

@@ -1,43 +1,56 @@
 <template>
-  <div class="fixed inset-0 bg-black bg-opacity-15 flex justify-center items-center z-50">
+  <div class="fixed inset-0 bg-black bg-opacity-15 flex justify-center items-center z-50 p-12">
     <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" />
+        :id="data?.taskId || 0"
+        :isProcessor="data?.processorNickName === info.nickname" />
       <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" />
+            :historyData="historyData?.histories || []"
+            :is-approved="isApproved" />
         </div>
         <div class="w-[1px] bg-border-1"></div>
-        <TaskDetailRight :data />
+        <TaskDetailRight
+          :data
+          :isProcessor="data?.processorNickName === info.nickname" />
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { getTaskDetailManager } from '@/api/user'
-import * as taskDetailData from '@/datas/taskdetail'
-import type { TaskDetailDatas, TaskDetailProps } from '@/types/user'
+import { getHistory, getTaskDetailManager } from '@/api/user'
+import { useMemberStore } from '@/stores/member'
+import type { TaskDetailDatas, TaskDetailHistoryProps, TaskDetailProps } from '@/types/user'
 import { useQuery } from '@tanstack/vue-query'
+import { storeToRefs } from 'pinia'
 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 } = taskDetailData
 const { isApproved, closeTaskDetail, selectedId } = defineProps<TaskDetailProps>()
 
+const memberStore = useMemberStore()
+const { info } = storeToRefs(memberStore)
+
 const { data } = useQuery<TaskDetailDatas>({
   queryKey: ['taskDetailUser', selectedId],
   queryFn: () => getTaskDetailManager(selectedId)
 })
+
+const { data: historyData } = useQuery<TaskDetailHistoryProps>({
+  queryKey: ['historyData', selectedId],
+  queryFn: () => getHistory(selectedId)
+})
+
+console.log(historyData.value, '가져온 히스ㅇ토리', selectedId, '선택된 id')
 </script>

src/components/task-detail/TaskDetailHistory.vue

@@ -1,33 +1,33 @@
 <template>
   <div>
     <p class="task-detail">히스토리</p>
-    <TaskDetailHistoryInput :history="history" />
+    <TaskDetailHistoryInput :history="historyData" />
     <div class="flex flex-col w-full items-center gap-6 mt-8">
       <div
         class="flex w-full flex-col items-center gap-6"
-        v-for="item in history"
-        :key="item.name">
+        v-for="item in historyData"
+        :key="item.historyId">
         <div
-          class="flex w-[150px] h-7 items-center justify-center bg-primary1 rounded-xl text-white text-xs font-bold">
+          class="flex px-4 h-7 items-center justify-center bg-primary1 rounded-full text-white text-xs font-bold">
           {{ formatDateWithDay(item.date) }}
         </div>
         <div class="flex w-full gap-1 justify-center text-body text-sm">
-          <p>{{ HistoryMessageBefore[item.TaskHistoryType] }}</p>
+          <p>{{ HistoryMessageBefore[item.taskHistoryType] }}</p>
           <p
-            v-if="item.TaskHistoryType === 'STATUS_SWITCHED'"
+            v-if="item.taskHistoryType === 'STATUS_SWITCHED'"
             class="text-primary1">
-            {{ item.details.taskStatus }}
+            {{ item.details.taskDetails?.value }}
           </p>
           <p
             v-else-if="
-              item.TaskHistoryType === 'PROCESSOR_CHANGED' ||
-              item.TaskHistoryType === 'PROCESSOR_ASSIGNED'
+              item.taskHistoryType === 'PROCESSOR_CHANGED' ||
+              item.taskHistoryType === 'PROCESSOR_ASSIGNED'
             "
             class="text-primary1">
-            {{ item.name }}
+            {{ item.details.taskDetails?.value }}
           </p>
-          <TaskDetailHistoryChat v-else-if="item.TaskHistoryType === 'COMMENT'" />
-          <p>{{ HistoryMessageAfter[item.TaskHistoryType] }}</p>
+          <TaskDetailHistoryChat v-else-if="item.taskHistoryType === 'COMMENT'" />
+          <p>{{ HistoryMessageAfter[item.taskHistoryType] }}</p>
         </div>
       </div>
     </div>
@@ -36,10 +36,11 @@
 
 <script setup lang="ts">
 import { HistoryMessageAfter, HistoryMessageBefore } from '@/constants/user'
-import type { TaskDetailHistoryProps } from '@/types/user'
+import type { TaskHistory } from '@/types/user'
 import { formatDateWithDay } from '@/utils/date'
 import TaskDetailHistoryChat from './TaskDetailHistoryChat.vue'
 import TaskDetailHistoryInput from './TaskDetailHistoryInput.vue'
 
-const { history } = defineProps<{ history: TaskDetailHistoryProps[] }>()
+const { historyData } = defineProps<{ historyData: TaskHistory[] }>()
+console.log(historyData, '가져온 히스토리')
 </script>

src/components/task-detail/TaskDetailHistoryInput.vue

@@ -2,18 +2,18 @@
   <div
     :class="[
       'w-full flex gap-3 px-6 py-4 border border-border-1 items-center',
-      { 'bg-background-2': !isPossible }
+      { 'bg-background-2': isPossible }
     ]">
     <input
       class="w-full h-8 focus:outline-none"
       type="text"
       :placeholder="placeHolderText"
-      :disabled="!isPossible" />
+      :disabled="isPossible" />
     <input
       class="hidden"
       type="file"
       id="file"
-      :disabled="!isPossible"
+      :disabled="isPossible"
       multiple
       @change="handleFileUpload" />
     <label
@@ -30,11 +30,11 @@
 
 <script setup lang="ts">
 import { clipIcon, sendIcon } from '@/constants/iconPath'
-import type { TaskDetailHistoryProps } from '@/types/user'
+import type { TaskHistory } from '@/types/user'
 import { ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 
-const { history } = defineProps<{ history: TaskDetailHistoryProps[] }>()
+const { history } = defineProps<{ history: TaskHistory[] }>()
 const isPossible = ref(history.length === 0)
 const placeHolderText = ref(isPossible?.value ? '텍스트를 입력' : '요청 승인 후 작성할 수 있습니다')