♻️ [refactor] 피그마와 UI 일치화 작업 및 최종 수정사항 반영

Author: seorang42

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/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/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-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/task-detail/TaskDetailDropdown.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/TaskDetailHistoryChat.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/TaskDetailHistoryFile.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[]>([])