Merge pull request #176 from TaskFlow-CLAP/CLAP-400

Clap-400 수정요구 Moya

Author: Minkyu0424

src/components/common/EditInformation.vue

@@ -126,15 +126,16 @@
 </template>
 
 <script lang="ts" setup>
+import { patchEditInfo } from '@/api/common'
+import { ALLOWED_FILE_EXTENSIONS } from '@/constants/common'
 import { useMemberStore } from '@/stores/member'
 import { storeToRefs } from 'pinia'
 import { nextTick, ref, watchEffect } from 'vue'
 import { useRouter } from 'vue-router'
-import ModalView from './ModalView.vue'
-import { patchEditInfo } from '@/api/common'
 import FormButtonContainer from './FormButtonContainer.vue'
 import FormCheckbox from './FormCheckbox.vue'
 import ImageContainer from './ImageContainer.vue'
+import ModalView from './ModalView.vue'
 const router = useRouter()
 
 const memberStore = useMemberStore()
@@ -222,26 +223,16 @@ const handleFileUpload = (event: Event) => {
   if (target.files && target.files[0]) {
     const file = target.files[0]
 
-    const allowedMimeTypes = [
-      'image/jpeg',
-      'image/pjpeg',
-      'image/png',
-      'image/gif',
-      'image/bmp',
-      'image/x-windows-bmp'
-    ]
-    const allowedExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp']
-
     const fileName = file.name.toLowerCase()
     const fileExtension = fileName.split('.').pop()
 
-    if (!fileExtension || !allowedExtensions.includes(fileExtension)) {
+    if (!fileExtension || !ALLOWED_FILE_EXTENSIONS.includes(fileExtension)) {
       failHeader.value = '지원하지 않는 파일입니다'
       failBody.value = 'jpg, jpeg, png, gif, bmp 파일만 업로드 가능합니다'
       failModalToggle()
       return
     }
-    if (!allowedMimeTypes.includes(file.type)) {
+    if (!ALLOWED_FILE_EXTENSIONS.includes(file.type)) {
       failHeader.value = '파일 타입을 확인해주세요'
       failBody.value = '파일 타입과 확장자명이 일치해야합니다'
       failModalToggle()

src/components/common/ModalView.vue

@@ -81,9 +81,9 @@
 
 <script setup lang="ts">
 import { failIcon, successIcon, warningIcon } from '@/constants/iconPath'
-import { preventEnter } from '@/utils/preventEnter'
 import { onUnmounted, ref, watch } from 'vue'
 import CommonIcons from './CommonIcons.vue'
+import { preventEnter } from '@/utils/preventEnter'
 
 const { isOpen, type, modelValue } = defineProps<{
   isOpen: boolean
@@ -116,7 +116,6 @@ watch(
   () => isOpen,
   () => {
     if (isOpen) {
-      textValue.value = ''
       document.body.style.overflow = 'hidden'
       window.addEventListener('keydown', preventEnter)
     } else {

src/components/request-approve/RequestApprove.vue

@@ -153,7 +153,7 @@ const handleSubmit = async () => {
   const requestData = {
     categoryId: category2.value.subCategoryId,
     processorId: approveData.value.processor.memberId,
-    dueDate: isTimeFilled.value
+    dueDate: !isTimeFilled.value
       ? convertToISO(approveData.value.dueDate, approveData.value.dueTime)
       : null,
     labelId: approveData.value.label?.labelId || null

src/components/request-task/ReRequestTask.vue

@@ -28,18 +28,18 @@
       :handleCancel="handleCancel"
       :handleSubmit="handleSubmit"
       cancelText="취소"
-      submitText="수정" />
+      :submitText="statusText" />
     <ModalView
       :isOpen="isModalVisible === 'success'"
       :type="'successType'"
       @close="handleCancel">
-      <template #header>작업이 수정되었습니다</template>
+      <template #header>작업이 {{ statusText }}되었습니다</template>
     </ModalView>
     <ModalView
       :isOpen="isModalVisible === 'fail'"
       :type="'failType'"
       @close="handleCancel">
-      <template #header>작업요청을 실패했습니다</template>
+      <template #header>작업{{ statusText }}을 실패했습니다</template>
       <template #body>잠시후 시도해주세요</template>
     </ModalView>
   </div>
@@ -50,7 +50,7 @@ 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 { computed, onMounted, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import FormButtonContainer from '../common/FormButtonContainer.vue'
 import ModalView from '../common/ModalView.vue'
@@ -61,6 +61,9 @@ import RequestTaskTextArea from './RequestTaskTextArea.vue'
 
 const category1 = ref<Category | null>(null)
 const category2 = ref<SubCategory | null>(null)
+const statusText = computed(() => {
+  return reqType === 'edit' ? '수정' : '요청'
+})
 
 const title = ref('')
 const description = ref('')
@@ -129,6 +132,8 @@ const handleSubmit = async () => {
   }
   const formData = new FormData()
 
+  isSubmitting.value = true
+
   const attachmentsToDelete = initFileArr.value
     .filter(initFile => !file.value?.some(f => f.name === initFile.fileName))
     .map(initFile => initFile.fileId)

src/components/request-task/RequestTaskFileInput.vue

@@ -7,9 +7,7 @@
       id="file"
       multiple
       @change="handleFileUpload" />
-    <label
-      v-if="hasFiles"
-      for="file">
+    <label v-if="hasFiles">
       <RequestTaskFileInputAfter
         :files="modelValue"
         :removeFile="removeFile" />

src/components/requested/RequestedListCard.vue

@@ -109,7 +109,7 @@ const rejectRequest = async () => {
     return
   }
   try {
-    await axiosInstance.patch(`/api/tasks/${info.taskId}/terminate`, rejectReason)
+    await axiosInstance.patch(`/api/tasks/${info.taskId}/terminate`, {reason: rejectReason.value})
     toggleModal('success')
   } catch {
     toggleModal('fail')

src/components/task-detail/TaskDetail.vue

@@ -36,11 +36,11 @@ import { useMemberStore } from '@/stores/member'
 import type { TaskDetailDatas, TaskDetailHistoryData, TaskDetailProps } from '@/types/user'
 import { useQuery } from '@tanstack/vue-query'
 import { storeToRefs } from 'pinia'
+import { onMounted, onUnmounted } from 'vue'
 import TaskDetailHistory from './TaskDetailHistory.vue'
 import TaskDetailLeft from './TaskDetailLeft.vue'
 import TaskDetailRight from './TaskDetailRight.vue'
 import TaskDetailTopBar from './TaskDetailTopBar.vue'
-import { onMounted, onUnmounted } from 'vue'
 
 const { closeTaskDetail, selectedId } = defineProps<TaskDetailProps>()
 
@@ -52,7 +52,8 @@ const { data } = useQuery<TaskDetailDatas>({
   queryFn:
     info.value.role === 'ROLE_USER'
       ? () => getTaskDetailUser(selectedId)
-      : () => getTaskDetailManager(selectedId)
+      : () => getTaskDetailManager(selectedId),
+  refetchOnMount: true
 })
 
 const { data: historyData } = useQuery<TaskDetailHistoryData>({

src/components/task-detail/TaskDetailHistory.vue

@@ -40,9 +40,7 @@
           </div>
           <div class="flex w-full flex-col items-center">
             <TaskDetailHistoryChat
-              v-if="
-                item.taskHistoryType === 'COMMENT' || item.taskHistoryType === 'TASK_TERMINATED'
-              "
+              v-if="item.taskHistoryType === 'COMMENT'"
               :history="item"
               :requestor-name="requestorName"
               :task-id="taskId" />

src/components/task-detail/TaskDetailHistoryChat.vue

@@ -21,7 +21,7 @@
             'flex max-w-[400px] flex-wrap px-4 py-3 text-base rounded-lg font-normal',
             isRequestor ? 'bg-background-2' : 'bg-primary2'
           ]">
-          {{ history.details.commentDetails?.comment || history.details.taskDetails?.value }}
+          {{ history.details.commentDetails?.comment }}
         </p>
         <div
           :class="[

src/components/task-detail/TaskDetailHistoryInput.vue

@@ -34,6 +34,13 @@
         @click="sendMessage" />
     </button>
   </div>
+  <ModalView
+    :is-open="isModalVisible"
+    type="failType"
+    @close="handleModal">
+    <template #header>파일 전송을 실패했습니다</template>
+    <template #body>최대 파일의 용량은 5mb까지 가능합니다</template>
+  </ModalView>
 </template>
 
 <script setup lang="ts">
@@ -45,6 +52,7 @@ import { useQueryClient } from '@tanstack/vue-query'
 import { storeToRefs } from 'pinia'
 import { computed, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
+import ModalView from '../common/ModalView.vue'
 
 const { history, taskId, requestorName } = defineProps<{
   history: TaskHistory[]
@@ -57,6 +65,7 @@ const queryClient = useQueryClient()
 
 const messageText = ref('')
 const isComposing = ref(false)
+const isModalVisible = ref(false)
 
 const isPossible = computed(
   () =>
@@ -78,12 +87,15 @@ const placeHolderText = computed(() => {
 
 const sendMessage = async () => {
   if (!isPossible.value || !messageText.value.trim()) return
-
   await postComment(taskId, messageText.value)
   queryClient.invalidateQueries({ queryKey: ['historyData', taskId] })
   messageText.value = ''
 }
 
+const handleModal = () => {
+  isModalVisible.value = !isModalVisible.value
+}
+
 const handleEnterKey = () => {
   if (!isComposing.value) {
     sendMessage()
@@ -94,6 +106,13 @@ const handleFileUpload = async (event: Event) => {
   const target = event.target as HTMLInputElement
   const file = target.files?.[0]
   if (!file) return
+
+  if (file.size > 5 * 1024 * 1024) {
+    handleModal()
+    target.value = ''
+    return
+  }
+
   const formData = new FormData()
   formData.append('attachment', file)
   await postCommentAttachment(taskId, formData)