Merge pull request #145 from TaskFlow-CLAP/CLAP-354

Clap-354 오류사항 Moya

Author: Minkyu0424

src/api/user.ts

@@ -38,7 +38,7 @@ export const changeProcessor = async (taskID: number, processorId: number) => {
 }
 
 export const patchChangeStatus = async (taskID: number, status: Status) => {
-  const response = await axiosInstance.patch(`/api/tasks/${taskID}/status`, { status })
+  const response = await axiosInstance.patch(`/api/tasks/${taskID}/status`, { taskStatus: status })
   return response.data
 }
 

src/components/common/ModalView.vue

@@ -14,7 +14,7 @@
               v-if="type == 'successType'"
               :name="successIcon" />
             <CommonIcons
-              v-if="type == 'failType' || type == 'inputType'"
+              v-if="type == 'failType' || type == 'inputType' || type === 'terminate'"
               :name="failIcon" />
             <CommonIcons
               v-if="type == 'warningType'"
@@ -32,9 +32,11 @@
           </div>
 
           <textarea
-            v-if="type == 'inputType'"
+            v-if="type == 'inputType' || type === 'terminate'"
             v-model="textValue"
-            placeholder="반려 사유를 입력해주세요"
+            :placeholder="
+              type === 'terminate' ? '종료 사유를 입력해주세요' : '반려 사유를 입력해주세요'
+            "
             class="flex border w-full border-border-1 px-4 py-3 focus:outline-none resize-none h-[120px]" />
         </div>
 
@@ -56,7 +58,7 @@
 
         <div
           class="flex items-center gap-6"
-          v-if="type == 'warningType' || type == 'inputType'">
+          v-if="type == 'warningType' || type == 'inputType' || type === 'terminate'">
           <button
             type="button"
             class="button-large-default"
@@ -67,7 +69,7 @@
             type="button"
             class="button-large-red"
             @click="confirmModal">
-            {{ type === 'inputType' ? '반려' : '삭제' }}
+            {{ type === 'inputType' ? '반려' : type === 'terminate' ? '종료' : '삭제' }}
           </button>
         </div>
       </div>

src/components/request-approve/DueDateInput.vue

@@ -2,19 +2,25 @@
   <input
     :type="inputType"
     :value="modelValue"
-    :min="new Date().toISOString().split('T')[0]"
     class="w-full border border-gray-300 rounded px-3 py-2 cursor-pointer focus:outline-none text-center"
+    :min="inputType === 'date' ? minValue : undefined"
     @focus="e => (e.target as HTMLInputElement).showPicker()"
     @input="updateValue(($event.target as HTMLInputElement).value)" />
 </template>
 
 <script lang="ts" setup>
 import type { DueDateInputProps } from '@/types/common'
-import { defineEmits, defineProps, onMounted } from 'vue'
+import { computed, defineEmits, defineProps, onMounted } from 'vue'
 
 const { modelValue, inputType } = defineProps<DueDateInputProps>()
 
 const emit = defineEmits(['update:modelValue'])
+
+const minValue = computed(() => {
+  const now = new Date()
+  return now.toISOString().split('T')[0]
+})
+
 const updateValue = (value: string) => {
   emit('update:modelValue', value)
 }

src/components/request-approve/RequestApprove.vue

@@ -23,22 +23,26 @@
       :placeholderText="'담당자를 선택해주세요'"
       :is-invalidate="isInvalidate" />
     <div class="flex flex-col gap-2">
-      <div class="flex gap-1">
+      <div class="flex gap-2">
         <p class="text-body text-xs font-bold">마감기한</p>
         <p
-          v-if="isInvalidate === 'date'"
+          v-if="!isDueDateValid && approveData.dueDate && approveData.dueTime"
+          class="text-red-1 text-xs">
+          현재 시간 이후로 설정해주세요
+        </p>
+        <p
+          v-else-if="isInvalidate === 'date'"
           class="text-red-1 text-xs">
           기한정보를 모두 입력하세요
         </p>
       </div>
+
       <div class="flex w-full justify-center gap-6">
         <DueDateInput
           v-model="approveData.dueDate"
-          :is-invalidate="isInvalidate"
           inputType="date" />
         <DueDateInput
           v-model="approveData.dueTime"
-          :is-invalidate="isInvalidate"
           inputType="time" />
       </div>
     </div>
@@ -58,15 +62,15 @@ import { getMainCategory, getSubCategory } from '@/api/common'
 import { getTaskDetailUser, postTaskApprove } from '@/api/user'
 import { INITIAL_REQUEST_APPROVE_DATA } from '@/constants/manager'
 import type { Category, SubCategory } from '@/types/common'
-import { convertToISO } from '@/utils/date'
-import { onMounted, ref, watch } from 'vue'
+import { convertToISO, isAfterNow } from '@/utils/date'
+import { computed, onMounted, ref, watch } from 'vue'
 import { onBeforeRouteLeave, useRouter } from 'vue-router'
 import FormButtonContainer from '../common/FormButtonContainer.vue'
+import ModalView from '../common/ModalView.vue'
 import CategoryDropDown from '../request-task/CategoryDropDown.vue'
 import DueDateInput from './DueDateInput.vue'
 import LabelDropdown from './LabelDropdown.vue'
 import ManagerDropdown from './ManagerDropdown.vue'
-import ModalView from '../common/ModalView.vue'
 
 const isModalVisible = ref(false)
 const category1 = ref<Category | null>(null)
@@ -75,7 +79,6 @@ const mainCategoryArr = ref<Category[]>([])
 const subCategoryArr = ref<SubCategory[]>([])
 const afterSubCategoryArr = ref<SubCategory[]>([])
 const approveData = ref(INITIAL_REQUEST_APPROVE_DATA)
-
 const isInvalidate = ref('')
 const isFirst = ref(true)
 
@@ -85,6 +88,21 @@ const requestId = Array.isArray(route.query.requestId)
   ? Number(route.query.requestId[0])
   : Number(route.query.requestId)
 
+const isTimeFilled = computed(() => {
+  return (
+    (approveData.value.dueDate && !approveData.value.dueTime) ||
+    (!approveData.value.dueDate && approveData.value.dueTime)
+  )
+})
+
+const isTimeComplete = computed(() => {
+  return approveData.value.dueDate && approveData.value.dueTime
+})
+
+const isDueDateValid = computed(() => {
+  return isAfterNow(approveData.value.dueDate, approveData.value.dueTime)
+})
+
 onBeforeRouteLeave((to, from, next) => {
   approveData.value = INITIAL_REQUEST_APPROVE_DATA
   next()
@@ -103,11 +121,8 @@ onMounted(async () => {
 })
 
 watch(category1, async newValue => {
-  if (isFirst.value) {
-    isFirst.value = false
-  } else {
-    category2.value = null
-  }
+  if (isFirst.value) isFirst.value = false
+  else category2.value = null
   afterSubCategoryArr.value = subCategoryArr.value.filter(
     subCategory => subCategory.mainCategoryId === newValue?.id
   )
@@ -127,21 +142,22 @@ const handleSubmit = async () => {
     isInvalidate.value = 'manager'
     return
   }
-  if (
-    (approveData.value.dueDate && !approveData.value.dueTime) ||
-    (!approveData.value.dueDate && approveData.value.dueTime)
-  ) {
+  if (isTimeFilled.value) {
     isInvalidate.value = 'date'
     return
   }
-
+  if (isTimeComplete.value && !isDueDateValid.value) {
+    isInvalidate.value = ''
+    return
+  }
   const requestData = {
     categoryId: category2.value.id,
     processorId: approveData.value.processor.memberId,
-    dueDate: convertToISO(approveData.value.dueDate, approveData.value.dueTime),
+    dueDate: isTimeFilled.value
+      ? convertToISO(approveData.value.dueDate, approveData.value.dueTime)
+      : null,
     labelId: approveData.value.label?.labelId || null
   }
-
   try {
     await postTaskApprove(requestId, requestData)
     isModalVisible.value = true

src/components/request-task/ReRequestTask.vue

@@ -21,6 +21,7 @@
       :is-invalidate="isInvalidate" />
     <RequestTaskTextArea
       v-model="description"
+      :is-invalidate="isInvalidate"
       :placeholderText="'부가 정보를 입력해주세요'" />
     <RequestTaskFileInput v-model="file" />
     <FormButtonContainer
@@ -45,11 +46,11 @@ 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 '../common/ModalView.vue'
 import CategoryDropDown from './CategoryDropDown.vue'
 import RequestTaskFileInput from './RequestTaskFileInput.vue'
 import RequestTaskInput from './RequestTaskInput.vue'
 import RequestTaskTextArea from './RequestTaskTextArea.vue'
-import ModalView from '../common/ModalView.vue'
 
 const category1 = ref<Category | null>(null)
 const category2 = ref<Category | null>(null)
@@ -110,6 +111,12 @@ const handleSubmit = async () => {
   } else if (!title.value) {
     isInvalidate.value = 'input'
     return
+  } else if (title.value.length > 30) {
+    isInvalidate.value = 'title'
+    return
+  } else if (description.value.length > 200) {
+    isInvalidate.value = 'description'
+    return
   }
   const formData = new FormData()
 

src/components/request-task/RequestTask.vue

@@ -21,6 +21,7 @@
       :is-invalidate="isInvalidate" />
     <RequestTaskTextArea
       v-model="description"
+      :is-invalidate="isInvalidate"
       :placeholderText="'부가 정보를 입력해주세요'" />
     <RequestTaskFileInput v-model="file" />
     <FormButtonContainer
@@ -44,11 +45,11 @@ 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 '../common/ModalView.vue'
 import CategoryDropDown from './CategoryDropDown.vue'
 import RequestTaskFileInput from './RequestTaskFileInput.vue'
 import RequestTaskInput from './RequestTaskInput.vue'
 import RequestTaskTextArea from './RequestTaskTextArea.vue'
-import ModalView from '../common/ModalView.vue'
 
 const category1 = ref<Category | null>(null)
 const category2 = ref<Category | null>(null)
@@ -101,6 +102,12 @@ const handleSubmit = async () => {
   } else if (!title.value) {
     isInvalidate.value = 'input'
     return
+  } else if (title.value.length > 30) {
+    isInvalidate.value = 'title'
+    return
+  } else if (description.value.length > 200) {
+    isInvalidate.value = 'description'
+    return
   }
   const formData = new FormData()
   const taskInfo = {

src/components/request-task/RequestTaskDropdown.vue

@@ -1,12 +1,8 @@
 <template>
   <div>
-    <div class="flex text-xs gap-x-1 mb-2">
+    <div class="flex text-xs text-red-1 gap-x-1 mb-2">
       <p class="text-body font-bold">{{ labelName }}</p>
-      <p
-        v-if="!isLabel"
-        class="text-red-1">
-        *
-      </p>
+      <p v-if="!isLabel">*</p>
     </div>
     <div class="relative flex">
       <div

src/components/request-task/RequestTaskFileInput.vue

@@ -7,14 +7,25 @@
       id="file"
       multiple
       @change="handleFileUpload" />
-    <RequestTaskFileInputAfter
+    <label
       v-if="hasFiles"
-      :files="modelValue"
-      :removeFile="removeFile" />
+      for="file">
+      <RequestTaskFileInputAfter
+        :files="modelValue"
+        :removeFile="removeFile" />
+    </label>
     <div
       v-else
-      class="w-full h-32 flex flex-col gap-4 items-center justify-center mt-2 rounded py-[31px] bg-white border-2 border-border-1 border-dashed">
-      <div class="text-sm text-disabled font-bold">첨부할 파일을 끌어 놓으세요</div>
+      :class="[
+        'w-full h-32 flex flex-col gap-4 items-center justify-center mt-2 rounded py-[31px] bg-white border-2 border-dashed',
+        isDragging ? 'border-primary1' : 'border-border-1'
+      ]"
+      @dragover.prevent="isDragging = true"
+      @dragleave.prevent="isDragging = false"
+      @drop.prevent="handleDrop">
+      <div :class="['text-sm font-bold', isDragging ? 'text-primary1' : 'text-disabled']">
+        첨부할 파일을 끌어 놓으세요
+      </div>
       <label
         for="file"
         class="button-medium-primary">
@@ -36,15 +47,16 @@
 import CommonIcons from '@/components/common/CommonIcons.vue'
 import { uploadIcon } from '@/constants/iconPath'
 import { computed, ref } from 'vue'
-import RequestTaskFileInputAfter from './RequestTaskFileInputAfter.vue'
 import ModalView from '../common/ModalView.vue'
+import RequestTaskFileInputAfter from './RequestTaskFileInputAfter.vue'
 
 const { modelValue } = defineProps<{
   modelValue: File[] | null
 }>()
 const emit = defineEmits(['update:modelValue'])
 
 const hasFiles = computed(() => modelValue && modelValue.length > 0)
+const isDragging = ref(false)
 const isModalVisible = ref(false)
 
 const handleModal = () => {
@@ -68,6 +80,23 @@ const handleFileUpload = (event: Event) => {
   }
 }
 
+const handleDrop = (event: DragEvent) => {
+  const files = event.dataTransfer?.files
+  if (files && files.length > 0) {
+    const newFiles = Array.from(files).filter(file => file.size <= 5 * 1024 * 1024)
+    if (newFiles.length !== files.length) {
+      handleModal()
+      return
+    }
+    const updatedFiles = modelValue ? [...modelValue, ...newFiles] : newFiles
+    if (updatedFiles.length > 5) {
+      handleModal()
+      return
+    }
+    emit('update:modelValue', updatedFiles.length === 1 ? [updatedFiles[0]] : updatedFiles)
+  }
+}
+
 const removeFile = (index: number) => {
   if (modelValue) {
     const updatedFiles = [...modelValue]

src/components/request-task/RequestTaskFileInputAfter.vue

@@ -7,7 +7,7 @@
         <div class="flex gap-6">
           <p class="w-[60px]">용량</p>
           <p class="w-36">최종 업로드 시각</p>
-          <p class="w-10">다운로드</p>
+          <p class="w-10">파일삭제</p>
         </div>
       </div>
       <div

src/components/request-task/RequestTaskInput.vue

@@ -1,17 +1,11 @@
 <template>
   <div class="relative w-full">
-    <div class="text-xs flex gap-x-1 mb-2">
+    <div class="text-xs flex gap-x-1 mb-2 text-red-1">
       <p class="text-body font-bold">{{ labelName }}</p>
-      <p
-        v-if="!isNotRequired"
-        class="text-red-1">
-        *
-      </p>
-      <p
-        v-if="isInvalidateState === 'input'"
-        class="text-red-1 text-xs">
-        {{ labelName }}을 입력해주세요
-      </p>
+      <p v-if="!isNotRequired">*</p>
+      <p v-if="isInvalidateState === 'input'">{{ labelName }}을 입력해주세요</p>
+      <p v-if="isInvalidateState === 'duplicate'">회원아이디가 중복되었습니다</p>
+      <p v-if="isInvalidateState === 'title'">제목은 30자 이내로 적어주세요</p>
     </div>
     <input
       class="w-full h-11 border border-border-1 px-4 focus:outline-none rounded"
@@ -21,7 +15,6 @@
       :placeholder="placeholderText"
       :class="{ 'text-gray-500': isEdit }"
       :maxlength="labelName === '제목' ? 30 : undefined" />
-
     <p
       v-if="isInvalidateState === 'code'"
       class="text-red-1 text-xs absolute top-[calc(100%+4px)]">