CLAP-298 요청 수정 재요청 API 연결

src/api/admin.ts

@@ -26,7 +26,6 @@ export const deleteCategoryAdmin = async (id: number) => {
 }
 
 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,5 +1,6 @@
 import type { Status } from '@/types/common'
 import type { RequestApprovePostTypes } from '@/types/manager'
+import type { userInfo } from '@/types/user'
 import { axiosInstance, formDataAxiosInstance } from '@/utils/axios'
 
 export const postTaskRequest = async (formdata: FormData) => {
@@ -53,21 +54,26 @@ export const getHistory = async (taskID: number) => {
 }
 
 export const postComment = async (taskID: number, content: string) => {
-  const response = await axiosInstance.post(`/api/comment/${taskID}`, { content })
+  const response = await axiosInstance.post(`/api/comments/${taskID}`, { content })
   return response.data
 }
 
 export const postCommentAttachment = async (taskID: number, formdata: FormData) => {
-  const response = await formDataAxiosInstance.post(`/api/comment/attachment/${taskID}`, formdata)
+  const response = await formDataAxiosInstance.post(`/api/comments/attachment/${taskID}`, formdata)
   return response.data
 }
 
 export const patchComment = async (commentId: number, content: string) => {
-  const response = await axiosInstance.patch(`/api/comment/${commentId}`, { content })
+  const response = await axiosInstance.patch(`/api/comments/${commentId}`, { content })
   return response.data
 }
 
 export const deleteComment = async (commentId: number) => {
-  const response = await axiosInstance.delete(`/api/comment/${commentId}`)
+  const response = await axiosInstance.delete(`/api/comments/${commentId}`)
+  return response.data
+}
+
+export const patchTaskRequest = async (taskId: string, formdata: FormData) => {
+  const response = await formDataAxiosInstance.patch(`/api/tasks/${taskId}`, formdata)
   return response.data
 }

src/assets/styles.css

@@ -11,7 +11,7 @@
 
 body {
   font-family: 'SUIT-Variable', sans-serif;
-  color: #18181B;
+  color: #18181b;
 }
 
 .shadow-custom {

src/components/request-task/ReRequestTask.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="w-full flex flex-col gap-y-6">
+    <CategoryDropDown
+      v-model="category1"
+      :options="mainCategoryArr"
+      :label-name="'1차 카테고리'"
+      :placeholderText="'1차 카테고리를 선택해주세요'"
+      :isDisabled="false" />
+    <CategoryDropDown
+      v-model="category2"
+      :options="afterSubCategoryArr"
+      :label-name="'2차 카테고리'"
+      :placeholderText="'2차 카테고리를 선택해주세요'"
+      :isDisabled="!category1" />
+    <RequestTaskInput
+      v-model="title"
+      :placeholderText="'제목을 입력해주세요'"
+      :label-name="'제목'"
+      :is-invalidate="isInvalidate" />
+    <RequestTaskTextArea
+      v-model="description"
+      :placeholderText="'부가 정보를 입력해주세요'" />
+    <RequestTaskFileInput v-model="file" />
+    <FormButtonContainer
+      :handleCancel="handleCancel"
+      :handleSubmit="handleSubmit"
+      cancelText="취소"
+      submitText="요청" />
+    <ModalView
+      :isOpen="isModalVisible"
+      :type="'successType'"
+      @close="handleCancel">
+      <template #header>작업이 요청되었습니다</template>
+    </ModalView>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { getMainCategory, getSubCategory } from '@/api/common'
+import { getTaskDetailUser, patchTaskRequest, postTaskRequest } from '@/api/user'
+import type { Category, SubCategory } from '@/types/common'
+import type { AttachmentResponse } from '@/types/user'
+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'
+import RequestTaskTextArea from './RequestTaskTextArea.vue'
+
+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<Category[]>([])
+const subCategoryArr = ref<SubCategory[]>([])
+const afterSubCategoryArr = ref<SubCategory[]>([])
+const initFileArr = ref<AttachmentResponse[]>([])
+const isFirst = ref(true)
+
+const { id, reqType } = defineProps<{ id: string; reqType: string }>()
+console.log(reqType, id, '가져온 값')
+
+const router = useRouter()
+
+const handleCancel = () => {
+  router.back()
+}
+
+onMounted(async () => {
+  mainCategoryArr.value = await getMainCategory()
+  subCategoryArr.value = await getSubCategory()
+  afterSubCategoryArr.value = await getSubCategory()
+  const data = await getTaskDetailUser(Number(id))
+  console.log(data, '데이터')
+  const selected = mainCategoryArr.value.find(ct => ct.name === data.mainCategoryName) || null
+  category1.value = selected
+  category2.value = subCategoryArr.value.find(ct => ct.name === data.categoryName) || null
+  afterSubCategoryArr.value = subCategoryArr.value.filter(
+    subCategory => subCategory.mainCategoryId === selected?.id
+  )
+  title.value = data.title
+  description.value = data.description
+  file.value = data.attachmentResponses.map((attachment: AttachmentResponse) => {
+    return new File([attachment.fileUrl], attachment.fileName, { type: 'application/pdf' })
+  })
+  initFileArr.value = data.attachmentResponses
+})
+
+watch(category1, async newValue => {
+  if (isFirst.value) {
+    isFirst.value = false
+  } else {
+    category2.value = null
+  }
+  afterSubCategoryArr.value = subCategoryArr.value.filter(
+    subCategory => subCategory.mainCategoryId === newValue?.id
+  )
+})
+
+const handleSubmit = async () => {
+  if (!category2.value) {
+    isInvalidate.value = 'category'
+    return
+  } else if (!title.value) {
+    isInvalidate.value = 'input'
+    return
+  }
+  const formData = new FormData()
+
+  const attachmentsToDelete = initFileArr.value
+    .filter(initFile => !file.value?.some(f => f.name === initFile.fileName))
+    .map(initFile => initFile.fileId)
+
+  const taskInfo = {
+    categoryId: category2.value.id,
+    title: title.value,
+    description: description.value
+  }
+
+  const taskInfoEdit = {
+    ...taskInfo,
+    attachmentsToDelete: attachmentsToDelete
+  }
+
+  console.log(taskInfoEdit, '뭘 삭제할건지')
+
+  const jsonTaskInfo = JSON.stringify(taskInfoEdit)
+  const newBlob = new Blob([jsonTaskInfo], { type: 'application/json' })
+  formData.append('taskInfo', newBlob)
+
+  if (file.value && file.value.length > 0 && reqType === 'edit') {
+    const newFiles = file.value.filter(
+      f => !initFileArr.value.some(initFile => initFile.fileName === f.name)
+    )
+    newFiles.forEach(f => {
+      console.log('첨부 파일:', f)
+      formData.append('attachment', f)
+    })
+  } else {
+    file.value?.forEach(f => {
+      console.log('첨부 파일:', f)
+      formData.append('attachment', f)
+    })
+  }
+
+  try {
+    if (reqType === 're') {
+      await postTaskRequest(formData)
+    } else {
+      await patchTaskRequest(id, formData)
+    }
+    isModalVisible.value = true
+  } catch (error) {
+    console.error('요청 실패:', error)
+  }
+}
+</script>

src/components/task-detail/TaskDetail.vue

@@ -6,7 +6,7 @@
         :is-approved="data?.taskStatus !== 'REQUESTED'"
         :close-task-detail="closeTaskDetail"
         :id="data?.taskId || 0"
-        :isProcessor="data?.processorNickName === info.nickname || info.memberRole === 'ROLE_'"
+        :isProcessor="data?.processorNickName === info.nickname || info.role === 'ROLE_MANAGER'"
         :isRequestor="data?.requesterNickName === info.nickname" />
       <div
         class="w-full flex gap-6"
@@ -43,12 +43,11 @@ const { closeTaskDetail, selectedId } = defineProps<TaskDetailProps>()
 
 const memberStore = useMemberStore()
 const { info } = storeToRefs(memberStore)
-console.log(info, '인포')
 
 const { data } = useQuery<TaskDetailDatas>({
   queryKey: ['taskDetailUser', selectedId],
   queryFn:
-    info.value.memberRole === 'ROLE_USER'
+    info.value.role === 'ROLE_USER'
       ? () => getTaskDetailUser(selectedId)
       : () => getTaskDetailManager(selectedId)
 })
@@ -57,6 +56,4 @@ const { data: historyData } = useQuery<TaskDetailHistoryData>({
   queryKey: ['historyData', selectedId],
   queryFn: () => getHistory(selectedId)
 })
-
-console.log(historyData.value, '가져온 히스ㅇ토리', selectedId, '선택된 id')
 </script>

src/components/task-detail/TaskDetailHistoryChat.vue

@@ -33,10 +33,10 @@
         <div
           v-if="isClicked"
           @click="deleteCommentText"
-            :class="[
+          :class="[
             'absolute shadow-custom bottom-0 w-20 h-7 flex items-center justify-center text-xs text-red-1 bg-white hover:bg-background-1',
             isProcessor ? 'right-6' : 'left-6'
-            ]">
+          ]">
           삭제
         </div>
       </div>
@@ -73,7 +73,9 @@ const clickMenuDot = async () => {
 
 const deleteCommentText = async () => {
   isClicked.value = !isClicked.value
-  await deleteComment(history.historyId)
+  if (history.details.commentDetails?.commentId !== undefined) {
+    await deleteComment(history.details.commentDetails.commentId)
+  }
   queryClient.invalidateQueries({ queryKey: ['historyData', taskId] })
 }
 </script>

src/components/task-detail/TaskDetailLeft.vue

@@ -14,7 +14,9 @@
     </div>
     <div>
       <p class="task-detail">부가 설명</p>
-      <p class="px-6 py-4 bg-primary2 rounded-lg font-normal min-h-[120px]">{{ data.description }}</p>
+      <p class="px-6 py-4 bg-primary2 rounded-lg font-normal min-h-[120px]">
+        {{ data.description }}
+      </p>
     </div>
     <div>
       <p class="task-detail">첨부 파일</p>

src/components/task-detail/TaskDetailTopBar.vue

@@ -3,12 +3,14 @@
     <div class="flex gap-4 text-sm font-bold pb-6">
       <div
         v-if="isApproved && isRequestor"
+        @click="router.push(`/task-request?requestType=re&id=${id}`)"
         class="flex gap-1 items-center cursor-pointer">
         <CommonIcons :name="reRequestIcon" />
         <p class="text-body">재요청</p>
       </div>
       <div
         v-if="!isApproved && isRequestor"
+        @click="router.push(`/task-request?requestType=edit&id=${id}`)"
         class="flex gap-1 items-center cursor-pointer">
         <CommonIcons :name="modificationIcon" />
         <p class="text-primary1">요청 수정</p>
@@ -77,6 +79,4 @@ const ApproveTask = () => {
   toggleModal('approve')
   router.push(`/request-approve/${id}`)
 }
-
-console.log(isProcessor, '이즈 프로세서 값')
 </script>

src/components/task-detail/TaskStatusList.vue

@@ -114,8 +114,7 @@ const changeStatus = async (newStatus: Status) => {
     return
   }
   try {
-    const res = await patchChangeStatus(taskId || 0, newStatus)
-    console.log(res, '상태 바꾸기')
+    await patchChangeStatus(taskId || 0, newStatus)
     queryClient.invalidateQueries({ queryKey: ['historyData', taskId] })
   } catch (error) {
     console.error('Failed to update status:', error)

src/components/user-manage/UserRegistration.vue

@@ -69,9 +69,7 @@ const handleCancel = () => {
 }
 
 const handleSubmit = async () => {
-  console.log(userRegistrationForm.value)
   const formData = { ...userRegistrationForm.value, role: 'ROLE_USER', departmentId: 1 }
-  console.log(formData, '요청정보')
   await addMemberAdmin(formData)
   isModalVisible.value = true
 }

src/layout/TheView.vue

@@ -10,27 +10,22 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 
 import TaskDetail from '@/components/task-detail/TaskDetail.vue'
-import { useRoute } from 'vue-router'
 
 const route = useRoute()
 const selectedID = ref(route.query.taskId || null)
-const handleModal = (id: string | null) => {
-  selectedID.value = id
-}
 
 watch(
   () => route.query.taskId,
-  newTaskID => {
-    selectedID.value = newTaskID || null
+  newTaskId => {
+    selectedID.value = newTaskId
   }
 )
 
-onMounted(() => {
-  if (route.query.taskId) {
-    selectedID.value = route.query.taskId
-  }
-})
+const handleModal = (id: string | null) => {
+  selectedID.value = id
+}
 </script>

src/types/user.ts

@@ -99,13 +99,15 @@ export interface TaskDetails {
 }
 
 export interface CommentDetails {
+  commentId: number
   nickName: string
   profileImageUrl: string
   isModified: boolean
   comment: string
 }
 
 export interface CommentFileDetails {
+  commentId: number
   nickName: string
   profileImageUrl: string
   isModified: boolean