Clap-424 QA 반영사항 Moya

src/components/common/EditInformation.vue

@@ -179,11 +179,11 @@ const validateName = () => {
   const regex = /[!@#$%^&*(),.?":{}|<>\p{Emoji}]/gu
   isInvalid.value = regex.test(name.value)
   if (isInvalid.value == true) {
-    nameError.value = '이름에는 특수문자가 포함될 수 없습니다.'
+    nameError.value = '이름에는 특수문자가 포함될 수 없습니다'
   }
   if (name.value.length > 10 || name.value.length < 1) {
     isFull.value = true
-    nameError.value = '이름은 1글자 이상, 10글자이하만 가능합니다.'
+    nameError.value = '이름은 1글자 이상, 10글자이하만 가능합니다'
   } else {
     isFull.value = false
   }

src/components/common/ModalView.vue

@@ -32,13 +32,13 @@
               <slot name="body"></slot>
             </div>
           </div>
-
           <textarea
             v-if="type == 'inputType' || type === 'terminate'"
             v-model="textValue"
             :placeholder="
               type === 'terminate' ? '종료 사유를 입력해주세요' : '반려 사유를 입력해주세요'
             "
+            :class="{ 'border border-red-1 placeholder-red-500': isEmpty }"
             class="flex border w-full border-border-1 px-4 py-3 focus:outline-none resize-none h-[120px]" />
         </div>
 
@@ -86,10 +86,11 @@ import { onUnmounted, ref, watch } from 'vue'
 import CommonIcons from './CommonIcons.vue'
 import LoadingIcon from './LoadingIcon.vue'
 
-const { isOpen, type, modelValue } = defineProps<{
+const { isOpen, type, modelValue, isEmpty } = defineProps<{
   isOpen: boolean
   type?: string
   modelValue?: string
+  isEmpty?: boolean
 }>()
 
 const emit = defineEmits<{

src/components/member-management/MemberManagementAddByCsv.vue

@@ -5,6 +5,7 @@
       type="file"
       id="file"
       accept=".csv"
+      ref="fileInput"
       @change="handleFileUpload" />
     <label
       for="file"
@@ -15,40 +16,61 @@
       파일로 일괄 추가
     </label>
     <ModalView
-      :isOpen="isModalVisible"
+      :isOpen="isModalVisible === 'success'"
       :type="'successType'"
       @close="handleCancel">
       <template #header>회원이 추가되었습니다</template>
     </ModalView>
+    <ModalView
+      :isOpen="isModalVisible === 'error'"
+      :type="'failType'"
+      @close="handleCancel">
+      <template #header>회원 추가를 실패했습니다</template>
+      <template #body>{{ errorText }}</template>
+    </ModalView>
   </div>
 </template>
 
 <script setup lang="ts">
 import { addMemberAdminByCsv } from '@/api/admin'
 import { plusIcon } from '@/constants/iconPath'
 import { useMemberManagementParamsStore } from '@/stores/params'
+import { getErrorCSV } from '@/utils/getErorr'
 import { useQueryClient } from '@tanstack/vue-query'
 import { ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 import ModalView from '../common/ModalView.vue'
 
 const queryClient = useQueryClient()
-const isModalVisible = ref(false)
+const isModalVisible = ref('')
 const { params } = useMemberManagementParamsStore()
+const errorText = ref('')
+const fileInput = ref<HTMLInputElement | null>(null)
 
 const handleFileUpload = async (event: Event) => {
-  const target = event.target as HTMLInputElement
-  const file = target.files?.[0]
-  if (!file) return
-  const formData = new FormData()
-  formData.append('file', file)
-  await addMemberAdminByCsv(formData)
-  queryClient.invalidateQueries({ queryKey: ['member', { ...params }] })
-  isModalVisible.value = true
-  target.value = ''
+  try {
+    const target = event.target as HTMLInputElement
+    const file = target.files?.[0]
+    if (!file) return
+
+    const formData = new FormData()
+    formData.append('file', file)
+    await addMemberAdminByCsv(formData)
+
+    queryClient.invalidateQueries({ queryKey: ['member', { ...params }] })
+    isModalVisible.value = 'success'
+  } catch (error) {
+    errorText.value = getErrorCSV(error)
+    isModalVisible.value = 'error'
+  } finally {
+    if (fileInput.value) {
+      fileInput.value.value = ''
+    }
+  }
 }
 
 const handleCancel = () => {
-  isModalVisible.value = false
+  isModalVisible.value = ''
+  errorText.value = ''
 }
 </script>

src/components/member-management/MemberManagementList.vue

@@ -7,7 +7,9 @@
     <template #listCards>
       <MemberManagementListCard
         v-for="info in data?.content"
-        :key="info.memberId"
+        :key="
+          info.memberId + info.name + info.departmentName + info.departmentRole + info.isReviewer
+        "
         :info="info" />
       <NoContent v-if="data?.content.length === 0" />
     </template>
@@ -22,18 +24,18 @@
 </template>
 
 <script setup lang="ts">
+import { useMemberStore } from '@/stores/member'
 import { useMemberManagementParamsStore } from '@/stores/params'
 import type { MemberManagementResponse } from '@/types/admin'
 import { axiosInstance } from '@/utils/axios'
 import { useQuery } from '@tanstack/vue-query'
+import { storeToRefs } from 'pinia'
 import { computed } from 'vue'
 import ListContainer from '../lists/ListContainer.vue'
 import ListPagination from '../lists/ListPagination.vue'
 import NoContent from '../lists/NoContent.vue'
 import MemberManagementListBar from './MemberManagementListBar.vue'
 import MemberManagementListCard from './MemberManagementListCard.vue'
-import { useMemberStore } from '@/stores/member'
-import { storeToRefs } from 'pinia'
 
 const { params } = useMemberManagementParamsStore()
 const onPageChange = (value: number) => {

src/components/member-management/MemberManagementListCard.vue

@@ -50,19 +50,19 @@
 </template>
 
 <script setup lang="ts">
+import { useErrorStore } from '@/stores/error'
+import { useMemberStore } from '@/stores/member'
 import type { MemberManagementListData } from '@/types/admin'
 import type { ListCardProps, Role } from '@/types/common'
 import { axiosInstance } from '@/utils/axios'
 import { formatDate } from '@/utils/date'
 import { useQueryClient } from '@tanstack/vue-query'
+import { storeToRefs } from 'pinia'
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
+import ModalView from '../common/ModalView.vue'
 import ResultModal from '../common/ResultModal.vue'
 import ListCardTab from '../lists/ListCardTab.vue'
-import ModalView from '../common/ModalView.vue'
-import { useMemberStore } from '@/stores/member'
-import { storeToRefs } from 'pinia'
-import { useErrorStore } from '@/stores/error'
 
 const roleContent = (role: Role) => {
   return role === 'ROLE_USER' ? '사용자' : role === 'ROLE_MANAGER' ? '담당자' : '관리자'
@@ -108,10 +108,16 @@ const closeModal = () => {
 }
 
 const onMemberDelete = async (memberId: number) => {
-  await axiosInstance.delete(`/api/managements/members`, { data: { memberId } })
-  resultModalType.value = 'successType'
-  message.value = '회원을 삭제했습니다'
-  toggleModal('result')
+  try {
+    await axiosInstance.delete(`/api/managements/members`, { data: { memberId } })
+    resultModalType.value = 'successType'
+    message.value = '회원을 삭제했습니다'
+    toggleModal('result')
+  } catch {
+    resultModalType.value = 'failType'
+    message.value = '회원의 잔여작업이 존재합니다'
+    toggleModal('result')
+  }
 }
 
 const onMemberInvite = async (memberId: number) => {

src/components/request-approve/RequestApprove.vue

@@ -84,6 +84,7 @@ const subCategoryArr = ref<SubCategory[]>([])
 const afterSubCategoryArr = ref<SubCategory[]>([])
 const approveData = ref(INITIAL_REQUEST_APPROVE_DATA)
 const isInvalidate = ref('')
+const isApproving = ref(false)
 const isFirst = ref(true)
 
 const router = useRouter()
@@ -143,6 +144,7 @@ const handleCancel = () => {
 }
 
 const handleSubmit = async () => {
+  if (isApproving.value || isModalVisible.value) return
   if (!category1.value) {
     isInvalidate.value = 'category1'
     return
@@ -163,6 +165,7 @@ const handleSubmit = async () => {
     isInvalidate.value = ''
     return
   }
+  isApproving.value = true
 
   const requestData = {
     categoryId: category2.value.subCategoryId,
@@ -172,6 +175,7 @@ const handleSubmit = async () => {
       : null,
     labelId: approveData.value.label?.labelId || null
   }
+
   await postTaskApprove(requestId, requestData)
   isModalVisible.value = true
 }

src/components/request-task/ReRequestTask.vue

@@ -23,7 +23,7 @@
     <RequestTaskTextArea
       v-model="description"
       :is-invalidate="isInvalidate"
-      :placeholderText="'부가 정보를 입력해주세요'"
+      :placeholderText="'부가 설명을 입력해주세요'"
       :limit-length="200" />
     <RequestTaskFileInput
       v-model="file"

src/components/request-task/RequestTask.vue

@@ -23,7 +23,7 @@
     <RequestTaskTextArea
       v-model="description"
       :is-invalidate="isInvalidate"
-      :placeholderText="'부가 정보를 입력해주세요'"
+      :placeholderText="'부가 설명을 입력해주세요'"
       :limit-length="200" />
     <RequestTaskFileInput
       v-model="file"

src/components/request-task/RequestTaskDropdown.vue

@@ -21,7 +21,7 @@
       </div>
       <div
         v-if="dropdownOpen"
-        class="absolute w-full h-40 overflow-y-auto scrollbar-hide top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2">
+        class="absolute w-full max-h-40 overflow-y-auto scrollbar-hide top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2">
         <div
           v-for="option in options"
           :key="option"
@@ -36,10 +36,10 @@
 
 <script lang="ts" setup>
 import { dropdownIcon } from '@/constants/iconPath'
+import { useOutsideClick } from '@/hooks/useOutsideClick'
 import type { RequestTaskDropdownProps } from '@/types/user'
 import { ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
-import { useOutsideClick } from '@/hooks/useOutsideClick'
 
 const { placeholderText, options, labelName, modelValue, isLabel, disabled, isInvalidate } =
   defineProps<RequestTaskDropdownProps>()

src/components/request-task/RequestTaskFileInput.vue

@@ -63,17 +63,14 @@ 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)
       .map(file => {
-        const truncatedName = truncateFilename(file.name, 35)
-        const newFile = new File([file], truncatedName, { type: file.type })
+        const normalizedFileName = file.name.normalize('NFC')
+        const newFileName = normalizedFileName.slice(0, 18)
+        const newFile = new File([file], newFileName, { type: file.type })
         return newFile.size <= 5 * 1024 * 1024 ? newFile : null
       })
       .filter(file => file !== null) as File[]
@@ -98,8 +95,9 @@ const handleDrop = (event: DragEvent) => {
   if (files && files.length > 0) {
     const newFiles = Array.from(files)
       .map(file => {
-        const truncatedName = truncateFilename(file.name, 35)
-        const newFile = new File([file], truncatedName, { type: file.type })
+        const normalizedFileName = file.name.normalize('NFC')
+        const newFileName = normalizedFileName.slice(0, 18)
+        const newFile = new File([file], newFileName, { type: file.type })
         return newFile.size <= 5 * 1024 * 1024 ? newFile : null
       })
       .filter(file => file !== null) as File[]

src/components/request-task/RequestTaskInput.vue

@@ -25,12 +25,12 @@
       :disabled="isEdit"
       @input="updateValue(($event.target as HTMLInputElement).value)"
       :placeholder="placeholderText"
-      :class="`${isEdit ? 'text-gray-500' : ''} ${isInvalidate ? 'border-red-1' : 'border-border-1'}`"
-      :maxlength="labelName === '제목' ? 30 : undefined" />
+      :class="`${isEdit ? 'text-gray-1' : ''} ${isInvalidate ? 'border-red-1' : 'border-border-1'}`"
+      :maxlength="limitLength" />
     <p
       v-if="limitLength"
       class="absolute text-xs top-[calc(100%+4px)] w-full flex justify-end text-body">
-      ({{ inputLength }}/{{ limitLength }})
+      {{ inputLength }} / {{ limitLength }}
     </p>
   </div>
 </template>

src/components/task-detail/TaskDetailHistoryChat.vue

@@ -29,6 +29,7 @@
             isRequestor ? 'order-3 items-start' : 'order-1 items-end'
           ]">
           <div
+            ref="btnRef"
             v-if="history.details.commentDetails?.nickName === info.nickname"
             class="relative cursor-pointer h-full">
             <CommonIcons
@@ -63,6 +64,7 @@
 <script setup lang="ts">
 import { deleteComment } from '@/api/user'
 import { menuDotIcon } from '@/constants/iconPath'
+import { useOutsideClick } from '@/hooks/useOutsideClick'
 import { useMemberStore } from '@/stores/member'
 import type { TaskDetailHistoryChatProps } from '@/types/common'
 import { formatTimeShort } from '@/utils/date'
@@ -95,6 +97,9 @@ const closeModal = () => {
   isClicked.value = !isClicked.value
   isModalOpen.value = false
 }
+const closeMenuDot = () => {
+  isClicked.value = false
+}
 
 const deleteCommentText = async () => {
   isClicked.value = !isClicked.value
@@ -104,4 +109,6 @@ const deleteCommentText = async () => {
   }
   queryClient.invalidateQueries({ queryKey: ['historyData', taskId] })
 }
+
+const { htmlRef: btnRef } = useOutsideClick(() => closeMenuDot())
 </script>