CLAP-446 QA 사항 반영 Tony.tsx 3차

src/components/common/EditInformation.vue

@@ -10,7 +10,7 @@
     <ModalView
       :isOpen="isWarnningModalVisible"
       :type="'warningType'"
-      @click="changePw"
+      @click="modalTarget === 'pw' ? changePw() : router.back()"
       @close="warningModalToggle">
       <template #header>정보가 저장되지 않았습니다</template>
       <template #body>수정 사항을 삭제하고 이동하시겠습니까?</template>
@@ -196,17 +196,33 @@ const validateName = () => {
     })
   }
 }
-const handleCancel = () => {
-  router.back()
-}
 
-const handlePwChange = () => {
+const checkChange = () => {
   if (
     selectedFile.value ||
     info.value.name != name.value ||
     info.value.notificationSettingInfo.kakaoWork != kakaoWorkCheck.value ||
     info.value.notificationSettingInfo.email != emailCheck.value
   ) {
+    return true
+  } else {
+    return false
+  }
+}
+
+const modalTarget = ref('')
+const handleCancel = () => {
+  if (checkChange()) {
+    modalTarget.value = 'cancel'
+    warningModalToggle()
+  } else {
+    router.back()
+  }
+}
+
+const handlePwChange = () => {
+  if (checkChange()) {
+    modalTarget.value = 'pw'
     warningModalToggle()
   } else {
     changePw()

src/components/common/ModalView.vue

@@ -72,7 +72,7 @@
               type="button"
               class="button-large-red"
               @click="confirmModal">
-              {{ type === 'inputType' ? '반려' : type === 'terminate' ? '종료' : '삭제' }}
+              {{ type === 'inputType' ? '반려' : type === 'terminate' ? '종료' : '확인' }}
             </button>
           </div>
         </div>

src/components/lists/ListCardTab.vue

@@ -3,11 +3,10 @@
     class="flex gap-2 items-center"
     :style="{ width: width ? `${width}px` : '' }"
     :class="width ? 'shrink-0' : 'grow'">
-    <div
-      v-if="profileImg"
-      class="w-6 h-6 rounded-full overflow-hidden">
-      <img :src="profileImg" />
-    </div>
+    <ImageContainer
+      v-if="profileImg !== undefined && content"
+      :size="24"
+      :url="profileImg" />
     <TaskStatus
       v-if="isStatus"
       :status="content as Status" />
@@ -23,9 +22,8 @@
 <script setup lang="ts">
 import type { ListCardProps, Status } from '@/types/common'
 import TaskStatus from '../common/TaskStatus.vue'
+import ImageContainer from '../common/ImageContainer.vue'
 
 const { content, width, isTextXs, profileImg, isStatus, isStatusCode, isTextBody } =
   defineProps<ListCardProps>()
 </script>
-
-<style scoped></style>

src/components/member-management/MemberManagementListCard.vue

@@ -21,7 +21,7 @@
         @click="toggleModal('delete')">
         삭제
       </button>
-      <div class="relative">
+      <div class="relative h-full max-h-[34px]">
         <button
           type="button"
           :class="

src/components/my-request/MyRequestListCard.vue

@@ -47,7 +47,7 @@ const myRequestTabList: ListCardProps[] = [
   { content: info.mainCategoryName, width: 80 },
   { content: info.categoryName, width: 80 },
   { content: info.title },
-  { content: info.processorName, width: 120, profileImg: info.processorImg },
+  { content: info.processorName, width: 120, profileImg: info.processorImg || '' },
   { content: info.taskStatus, width: 80, isStatus: true },
   { content: info.finishedAt ? formatDate(info.finishedAt) : '', width: 80 }
 ]

src/components/my-task/MyTaskListCard.vue

@@ -46,7 +46,7 @@ const myRequestTabList: ListCardProps[] = [
   { content: info.mainCategoryName, width: 80 },
   { content: info.categoryName, width: 80 },
   { content: info.title },
-  { content: info.requesterName, width: 120, profileImg: info.requesterImg },
+  { content: info.requesterName, width: 120, profileImg: info.requesterUrl || '' },
   { content: info.taskStatus, width: 80, isStatus: true },
   { content: info.finishedAt ? formatDate(info.finishedAt) : '', width: 80 }
 ]

src/components/request-approve/ManagerDropdown.vue

@@ -18,6 +18,7 @@
         @click="toggleDropdown">
         <div class="flex gap-2 items-center">
           <ImageContainer
+            v-if="isInvalidateState === 'manager' || modelValue?.imageUrl"
             :size="24"
             :url="modelValue?.imageUrl" />
           <p :class="{ 'text-disabled': !modelValue }">
@@ -44,7 +45,7 @@
               {{ option.nickname }}
             </p>
           </div>
-          <p class="text-primary1 text-xs">잔여 작업 : {{ option.remainingTasks }}</p>
+          <p class="text-primary1 text-xs font-semibold">잔여 작업 : {{ option.remainingTasks }}</p>
         </div>
       </div>
     </div>

src/components/request-history/RequestHistoryListCard.vue

@@ -46,8 +46,8 @@ const myRequestTabList: ListCardProps[] = [
   { content: info.mainCategoryName, width: 80 },
   { content: info.categoryName, width: 80 },
   { content: info.title },
-  { content: info.requesterName, width: 120, profileImg: info.requesterImg },
-  { content: info.processorName, width: 120, profileImg: info.processorImg },
+  { content: info.requesterName, width: 120, profileImg: info.requesterUrl || '' },
+  { content: info.processorName, width: 120, profileImg: info.processorUrl || '' },
   { content: info.taskStatus, width: 80, isStatus: true },
   { content: info.finishedAt ? formatDate(info.finishedAt) : '', width: 80 }
 ]

src/components/request-task/RequestTaskDropdown.vue

@@ -10,7 +10,7 @@
       class="relative flex">
       <div
         class="flex w-full h-11 items-center rounded p-4 border border-border-1"
-        :class="disabled ? 'bg-background-1 text-disabled' : 'bg-white cursor-pointer'"
+        :class="disabled ? 'bg-background-2 text-disabled' : 'bg-white cursor-pointer'"
         @click="!disabled && toggleDropdown()">
         <p :class="{ 'text-disabled': modelValue === placeholderText }">
           {{ modelValue || placeholderText }}

src/components/request-task/RequestTaskFileInputAfter.vue

@@ -32,7 +32,7 @@
         </div>
         <label
           for="file"
-          class="w-full h-8 flex items-center justify-center text-primary1 font-semibold gap-1 text-xs cursor-pointer shrink-0">
+          class="w-full h-8 flex items-center justify-center text-primary1 font-semibold gap-1 text-xs cursor-pointer shrink-0 hover:bg-background-2">
           <CommonIcons
             :name="plusIcon"
             :style="{ fill: '#7879eb' }" />

src/components/requested/RequestedListCard.vue

@@ -73,7 +73,7 @@ const requestedTabList: ListCardProps[] = [
   { content: info.mainCategoryName, width: 80 },
   { content: info.categoryName, width: 80 },
   { content: info.title },
-  { content: info.requesterName, width: 120, profileImg: info.requesterImg }
+  { content: info.requesterName, width: 120, profileImg: info.requesterUrl || '' }
 ]
 const router = useRouter()
 const queryClient = useQueryClient()

src/components/task-detail/TaskDetailHistoryChat.vue

@@ -39,7 +39,7 @@
               v-if="isClicked"
               @click="handleModal"
               :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 rounded',
+                'absolute shadow-custom bottom-0 w-20 h-7 flex items-center justify-center text-xs text-red-1 bg-white hover:bg-background-2 rounded',
                 isRequestor ? 'left-6' : 'right-6'
               ]">
               삭제

src/components/task-detail/TaskDetailHistoryFile.vue

@@ -37,6 +37,7 @@
           ]">
           <div
             v-if="history.details.commentFileDetails?.nickName === info.nickname"
+            ref="btnRef"
             class="relative cursor-pointer">
             <CommonIcons
               :name="menuDotIcon"
@@ -45,7 +46,7 @@
               v-if="isClicked"
               @click="handleModal"
               :class="[
-                'absolute shadow-custom bottom-0 w-20 h-[27px] rounded flex items-center justify-center text-xs text-red-1 bg-white hover:bg-background-1',
+                'absolute shadow-custom bottom-0 w-20 h-[27px] rounded flex items-center justify-center text-xs text-red-1 bg-white hover:bg-background-2',
                 isRequestor ? 'left-6' : 'right-6'
               ]">
               삭제
@@ -79,6 +80,7 @@ import { computed, defineProps, ref } from 'vue'
 import CommonIcons from '../common/CommonIcons.vue'
 import ImageContainer from '../common/ImageContainer.vue'
 import ModalView from '../common/ModalView.vue'
+import { useOutsideClick } from '@/hooks/useOutsideClick'
 
 const { history, requestorName, taskId } = defineProps<TaskDetailHistoryChatProps>()
 
@@ -103,11 +105,16 @@ const closeModal = () => {
   isClicked.value = !isClicked.value
   isModalOpen.value = false
 }
+const closeMenuDot = () => {
+  isClicked.value = false
+}
 const deleteCommentFile = async () => {
   isClicked.value = !isClicked.value
   if (history.details.commentFileDetails?.commentId !== undefined) {
     await deleteComment(history.details.commentFileDetails?.commentId)
   }
   queryClient.invalidateQueries({ queryKey: ['historyData', taskId] })
 }
+
+const { htmlRef: btnRef } = useOutsideClick(() => closeMenuDot())
 </script>

src/components/task-detail/TaskDetailManagerDropdown.vue

@@ -7,6 +7,7 @@
       @click="toggleDropdown">
       <div class="flex gap-2 items-center">
         <ImageContainer
+          v-if="modelValue.nickname"
           :url="modelValue?.imageUrl"
           :size="20" />
         <p :class="['text-sm', { 'text-disabled': !modelValue?.nickname }]">
@@ -50,7 +51,7 @@ import ImageContainer from '../common/ImageContainer.vue'
 
 const { modelValue } = defineProps<{ modelValue: ManagerTypes; taskId: number }>()
 const emit = defineEmits(['update:modelValue'])
-console.log(modelValue,'현재 담당자' )
+console.log(modelValue, '현재 담당자')
 
 const dropdownOpen = ref(false)
 const managerArr = ref<ManagerTypes[]>([])

src/components/top-bar/ProfileModal.vue

@@ -2,15 +2,15 @@
   <div
     v-if="isOpen"
     @click.stop
-    class="absolute w-60 bg-white right-6 top-[calc(100%+16px)] rounded-lg shadow-custom overflow-hidden">
+    class="absolute w-52 bg-white right-6 top-[calc(100%+16px)] rounded-lg shadow-custom overflow-hidden">
     <div
-      class="flex items-center justify-center relative px-6 py-8 border-b bg-primary2 border-border-2">
+      class="flex items-center justify-center relative px-6 pt-8 pb-6 border-b bg-primary2 border-border-2">
       <div class="flex flex-col items-center justify-center gap-6">
         <ImageContainer
           :url="info.profileImageUrl"
           :size="96" />
         <div>
-          <div class="flex flex-col justify-center items-center w-[172px]">
+          <div class="flex flex-col justify-center items-center w-full">
             <p class="text-xs text-body font-semibold">{{ name }}</p>
 
             <p>{{ nickname }}</p>
@@ -21,13 +21,13 @@
     <button
       @click="handleEdit"
       type="button"
-      class="flex w-full py-4 px-6 text-sm font-semibold border-b border-border-2 hover:bg-background-2">
+      class="flex w-full py-3.5 px-6 text-sm border-b border-border-2 hover:bg-background-2">
       내 정보 수정
     </button>
     <button
       @click="handleLogout"
       type="button"
-      class="flex w-full py-4 px-6 text-sm text-red-1 font-semibold hover:bg-background-2">
+      class="flex w-full py-3.5 px-6 text-sm text-red-1 font-semibold hover:bg-background-2">
       로그아웃
     </button>
   </div>

src/components/user-manage/DepartmentDropDown.vue

@@ -28,7 +28,9 @@
           class="w-full flex items-center h-11 p-2 rounded hover:bg-background-2 cursor-pointer justify-between"
           @click="selectOption(department)">
           <p>{{ department.name }}</p>
-          <p :class="[department.isManager ? 'text-primary1' : 'text-body', 'text-xs']">
+          <p
+            class="font-semibold"
+            :class="[department.isManager ? 'text-primary1' : 'text-body', 'text-xs']">
             {{ department.isManager ? '담당자 권한 O' : '담당자 권한 X' }}
           </p>
         </div>

src/types/manager.ts

@@ -7,7 +7,7 @@ export interface RequestedListData {
   mainCategoryName: string
   categoryName: string
   title: string
-  requesterImg: string
+  requesterUrl?: string
   requesterName: string
 }
 
@@ -18,9 +18,9 @@ export interface RequestHistoryListData {
   mainCategoryName: string
   categoryName: string
   title: string
-  requesterImg: string
+  requesterUrl?: string
   requesterName: string
-  processorImg?: string
+  processorUrl?: string
   processorName?: string
   taskStatus: string
   finishedAt?: string
@@ -57,7 +57,7 @@ export interface MyTaskListData {
   mainCategoryName: string
   categoryName: string
   title: string
-  requesterImg: string
+  requesterUrl?: string
   requesterName: string
   taskStatus: string
   finishedAt?: string

src/types/user.ts

@@ -133,12 +133,6 @@ export interface ManagerInfoTypes {
   totalAssignedTasks: number
 }
 
-export interface TaskDetailDropdownProps {
-  options: string[]
-  modelValue: string
-  processor: ManagerInfoTypes
-}
-
 export interface TaskDetailRightProps {
   taskDetail: TaskDetailDatas
 }