Clap-409 수정요구 Moya

src/api/admin.ts

@@ -46,6 +46,6 @@ export const getMemberDetailAdmin = async (id: string) => {
 }
 
 export const updateMemberAdmin = async (id: string, data: UserUpdateValue) => {
-  const response = await axiosInstance.post(`api/managements/members/${id}`, data)
+  const response = await axiosInstance.patch(`api/managements/members/${id}`, data)
   return response.data
 }

src/components/common/LoadingIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg
+    class="animate-spin"
+    xmlns="http://www.w3.org/2000/svg"
+    width="64"
+    height="64"
+    viewBox="0 0 64 64"
+    fill="none">
+    <path
+      opacity="0.2"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M31.9999 50.6667C34.4513 50.6667 36.8786 50.1839 39.1433 49.2458C41.4081 48.3077 43.4659 46.9327 45.1992 45.1994C46.9326 43.466 48.3076 41.4082 49.2457 39.1435C50.1838 36.8787 50.6666 34.4514 50.6666 32C50.6666 29.5487 50.1838 27.1214 49.2457 24.8566C48.3076 22.5919 46.9326 20.5341 45.1992 18.8007C43.4659 17.0674 41.4081 15.6924 39.1433 14.7543C36.8786 13.8162 34.4513 13.3334 31.9999 13.3334C27.0492 13.3334 22.3013 15.3 18.8006 18.8007C15.2999 22.3014 13.3333 27.0493 13.3333 32C13.3333 36.9507 15.2999 41.6987 18.8006 45.1994C22.3013 48.7 27.0492 50.6667 31.9999 50.6667ZM31.9999 58.6667C46.7279 58.6667 58.6666 46.728 58.6666 32C58.6666 17.272 46.7279 5.33337 31.9999 5.33337C17.2719 5.33337 5.33325 17.272 5.33325 32C5.33325 46.728 17.2719 58.6667 31.9999 58.6667Z"
+      fill="#18181B" />
+    <path
+      d="M5.33325 32C5.33325 17.272 17.2719 5.33337 31.9999 5.33337V13.3334C27.0492 13.3334 22.3013 15.3 18.8006 18.8007C15.2999 22.3014 13.3333 27.0493 13.3333 32H5.33325Z"
+      fill="#71717A" />
+  </svg>
+</template>

src/components/common/ModalView.vue

@@ -19,7 +19,7 @@
             <CommonIcons
               v-if="type == 'warningType'"
               :name="warningIcon" />
-
+            <LoadingIcon v-if="type == 'loadingType'" />
             <div
               v-if="$slots.header"
               class="flex text-2xl font-semibold justify-center whitespace-pre-wrap text-center">
@@ -84,6 +84,7 @@ import { failIcon, successIcon, warningIcon } from '@/constants/iconPath'
 import { preventEnter } from '@/utils/preventEnter'
 import { onUnmounted, ref, watch } from 'vue'
 import CommonIcons from './CommonIcons.vue'
+import LoadingIcon from './LoadingIcon.vue'
 
 const { isOpen, type, modelValue } = defineProps<{
   isOpen: boolean

src/components/request-approve/RequestApprove.vue

@@ -157,7 +157,6 @@ const handleSubmit = async () => {
     isInvalidate.value = ''
     return
   }
-  console.log(isTimeFilled.value, isTimeComplete.value, isDueDateValid.value)
 
   const requestData = {
     categoryId: category2.value.subCategoryId,

src/components/request-task/ReRequestTask.vue

@@ -25,7 +25,9 @@
       :is-invalidate="isInvalidate"
       :placeholderText="'부가 정보를 입력해주세요'"
       :limit-length="200" />
-    <RequestTaskFileInput v-model="file" />
+    <RequestTaskFileInput
+      v-model="file"
+      :isEdit="true" />
     <FormButtonContainer
       :handleCancel="handleCancel"
       :handleSubmit="handleSubmit"

src/components/request-task/RequestTask.vue

@@ -25,7 +25,9 @@
       :is-invalidate="isInvalidate"
       :placeholderText="'부가 정보를 입력해주세요'"
       :limit-length="200" />
-    <RequestTaskFileInput v-model="file" />
+    <RequestTaskFileInput
+      v-model="file"
+      :isUploading="isUploading" />
     <FormButtonContainer
       :handleCancel="handleCancel"
       :handleSubmit="handleSubmit"
@@ -38,11 +40,10 @@
       <template #header>작업이 요청되었습니다</template>
     </ModalView>
     <ModalView
-      :isOpen="isModalVisible === 'fail'"
-      :type="'failType'"
-      @close="handleCancel">
-      <template #header>작업요청을 실패했습니다</template>
-      <template #body>잠시후 시도해주세요</template>
+      :isOpen="isModalVisible === 'loading'"
+      type="loadingType">
+      <template #header>작업을 요청 중입니다...</template>
+      <template #body>잠시만 기다려주세요</template>
     </ModalView>
   </div>
 </template>
@@ -66,9 +67,11 @@ const category2 = ref<SubCategory | null>(null)
 const title = ref('')
 const description = ref('')
 const file = ref(null as File[] | null)
+
 const isInvalidate = ref('')
 const isModalVisible = ref('')
 const isSubmitting = ref(false)
+const isUploading = ref(false)
 
 const mainCategoryArr = ref<Category[]>([])
 const subCategoryArr = ref<SubCategory[]>([])
@@ -127,6 +130,8 @@ const handleSubmit = async () => {
   }
 
   isSubmitting.value = true
+  isUploading.value = true
+  isModalVisible.value = 'loading'
 
   const formData = new FormData()
   const taskInfo = {
@@ -144,5 +149,6 @@ const handleSubmit = async () => {
   await postTaskRequest(formData)
   isModalVisible.value = 'success'
   isSubmitting.value = false
+  isUploading.value = false
 }
 </script>

src/components/request-task/RequestTaskFileInput.vue

@@ -10,6 +10,7 @@
     <label v-if="hasFiles">
       <RequestTaskFileInputAfter
         :files="modelValue"
+        :isEdit
         :removeFile="removeFile" />
     </label>
     <div
@@ -50,6 +51,7 @@ import RequestTaskFileInputAfter from './RequestTaskFileInputAfter.vue'
 
 const { modelValue } = defineProps<{
   modelValue: File[] | null
+  isEdit?: boolean
 }>()
 const emit = defineEmits(['update:modelValue'])
 
@@ -61,10 +63,21 @@ const handleModal = () => {
   isModalVisible.value = !isModalVisible.value
 }
 
+const truncateFilename = (name: string, maxLength: number) => {
+  return [...name].slice(0, maxLength).join('')
+}
+
 const handleFileUpload = (event: Event) => {
   const target = event.target as HTMLInputElement
   if (target.files && target.files.length > 0) {
-    const newFiles = Array.from(target.files).filter(file => file.size <= 5 * 1024 * 1024)
+    const newFiles = Array.from(target.files)
+      .map(file => {
+        const truncatedName = truncateFilename(file.name, 35)
+        const newFile = new File([file], truncatedName, { type: file.type })
+        return newFile.size <= 5 * 1024 * 1024 ? newFile : null
+      })
+      .filter(file => file !== null) as File[]
+
     if (newFiles.length !== target.files.length) {
       handleModal()
       return
@@ -83,7 +96,13 @@ const handleDrop = (event: DragEvent) => {
   isDragging.value = false
   const files = event.dataTransfer?.files
   if (files && files.length > 0) {
-    const newFiles = Array.from(files).filter(file => file.size <= 5 * 1024 * 1024)
+    const newFiles = Array.from(files)
+      .map(file => {
+        const truncatedName = truncateFilename(file.name, 35)
+        const newFile = new File([file], truncatedName, { type: file.type })
+        return newFile.size <= 5 * 1024 * 1024 ? newFile : null
+      })
+      .filter(file => file !== null) as File[]
     if (newFiles.length !== files.length) {
       handleModal()
       return

src/components/request-task/RequestTaskFileInputAfter.vue

@@ -19,7 +19,7 @@
           class="flex w-full justify-between items-center h-8 text-xs border-b border-b-border-2 px-4 shrink-0">
           <p class="flex truncate mr-3">{{ file.name }}</p>
           <div class="flex gap-6">
-            <p class="w-[60px]">{{ formatFileSize(file.size) }}</p>
+            <p class="w-[60px]">{{ isEdit ? file.size : formatFileSize(file.size) }}</p>
             <p class="w-36">{{ new Date().toLocaleString() }}</p>
             <div class="w-10 flex items-center justify-center cursor-pointer">
               <CommonIcons
@@ -47,5 +47,5 @@ import type { RequestTaskFileInputProps } from '@/types/user'
 import { formatFileSize } from '@/utils/unit'
 import CommonIcons from '../common/CommonIcons.vue'
 
-const { files, removeFile } = defineProps<RequestTaskFileInputProps>()
+const { files, removeFile, isEdit } = defineProps<RequestTaskFileInputProps>()
 </script>

src/components/task-detail/TaskDetailHistory.vue

@@ -5,6 +5,7 @@
       :history="historyData"
       :taskId="taskId"
       :requestor-name="requestorName" />
+
     <div class="flex flex-col w-full items-center mt-8 gap-[22px]">
       <div
         class="flex w-full flex-col items-center gap-[22px]"

src/components/task-detail/TaskDetailHistoryChat.vue

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

src/components/task-detail/TaskDetailHistoryInput.vue

@@ -34,6 +34,7 @@
         @click="sendMessage" />
     </button>
   </div>
+  <p class="text-xs mt-1.5">({{ inputLength }}/{{ 254 }})</p>
   <ModalView
     :is-open="isModalVisible"
     type="failType"
@@ -74,6 +75,7 @@ const isPossible = computed(
 )
 
 const isSendable = computed(() => isPossible.value && messageText.value.trim() !== '')
+const inputLength = computed(() => messageText.value.length)
 
 const placeHolderText = computed(() => {
   if (history.length === 0) {

src/components/task-detail/TaskDetailTopBar.vue

@@ -24,7 +24,7 @@
       </div>
       <div
         @click="toggleModal('cancel')"
-        v-if="!isApproved && (isRequestor || isReviewer)"
+        v-if="!isApproved && isRequestor"
         class="flex gap-1 items-center cursor-pointer p-1 hover:bg-background-2 rounded">
         <CommonIcons :name="cancelIcon" />
         <p class="text-red-1">요청 취소</p>
@@ -99,7 +99,6 @@ const finishCancel = async () => {
   await queryClient.refetchQueries({
     queryKey: ['myRequest']
   })
-
   toggleModal('success')
   closeTaskDetail()
 }

src/components/user-manage/UserUpdate.vue

@@ -8,6 +8,7 @@
     </ModalView>
     <RequestTaskInput
       v-model="userRegistrationForm.name"
+      :is-invalidate="isInvalidate"
       :placeholderText="'회원의 이름을 입력해주세요'"
       :labelName="'이름'" />
     <RequestTaskInput
@@ -113,8 +114,23 @@ const handleCancel = async () => {
   router.back()
 }
 
+const usernameRegex = /^[a-z]{3,10}\.[a-z]{1,5}$/
+const emailRegex = /^@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)+$/
+
 const handleSubmit = async () => {
   try {
+    if (!userRegistrationForm.value.name) {
+      isInvalidate.value = 'nameEmpty'
+      return
+    }
+    if (!usernameRegex.test(userRegistrationForm.value.nickname)) {
+      isInvalidate.value = 'wrongNickname'
+      return
+    }
+    if (!emailRegex.test(userRegistrationForm.value.email)) {
+      isInvalidate.value = 'wrongEmail'
+      return
+    }
     if (typeof userId.value === 'string') {
       const userData = {
         role: RoleTypeMapping[userRegistrationForm.value.role],
@@ -123,6 +139,7 @@ const handleSubmit = async () => {
         departmentId: userRegistrationForm.value.departmentId,
         departmentRole: userRegistrationForm.value.departmentRole
       }
+
       await updateMemberAdmin(userId.value, userData)
       isModalVisible.value = true
     }

src/types/user.ts

@@ -38,6 +38,7 @@ export interface RequestTaskInputProps {
 export interface RequestTaskFileInputProps {
   files: File[] | null
   removeFile: (index: number) => void
+  isEdit?: boolean
 }
 
 export interface RequestTaskTextAreaProps {