Merge pull request #185 from TaskFlow-CLAP/CLAP-412

CLAP-412 오류 수정 Tony.tsx

Author: seorang42

src/assets/styles.css

@@ -99,7 +99,7 @@ body {
   @apply flex justify-center items-center w-full h-8 px-2 border-b border-border-1 relative text-xs cursor-pointer;
 }
 .filter-dropdown-option-list {
-  @apply w-full max-h-[160px] overflow-y-scroll absolute left-0 top-[calc(100%+8px)] shadow-custom p-2 flex flex-col gap-2 rounded bg-white cursor-auto;
+  @apply w-full max-h-[160px] overflow-y-auto scrollbar-hide absolute left-0 top-[calc(100%+8px)] shadow-custom p-2 flex flex-col gap-2 rounded bg-white cursor-auto;
 }
 .filter-dropdown-option {
   @apply text-xs p-2 rounded text-center cursor-pointer;
@@ -117,7 +117,7 @@ body {
   @apply flex w-full h-11 items-center rounded p-4 bg-white border border-border-1 cursor-pointer;
 }
 .request-task-dropdown-option-list {
-  @apply absolute w-full h-40 overflow-y-auto top-[52px] flex flex-col gap-2 p-2 bg-white rounded z-10 shadow-custom;
+  @apply 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-custom;
 }
 .request-task-dropdown-option {
   @apply w-full flex items-center h-11 p-2 rounded hover:bg-background-2 cursor-pointer;
@@ -140,7 +140,7 @@ body {
   @apply flex w-full h-10 items-center text-sm rounded pl-4 pr-3 bg-white border border-border-1 cursor-pointer;
 }
 .task-detail-dropdown-option-list {
-  @apply absolute w-full h-40 overflow-y-auto top-11 flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2;
+  @apply absolute w-full h-40 overflow-y-auto scrollbar-hide top-11 flex flex-col gap-2 p-2 bg-white rounded z-10 shadow border-t border-t-border-2;
 }
 .task-detail-dropdown-option {
   @apply w-full flex items-center h-10 p-2 rounded hover:bg-background-2 cursor-pointer;

src/components/common/ModalView.vue

@@ -27,7 +27,7 @@
             </div>
 
             <div
-              v-if="type != 'inputType' && $slots.header"
+              v-if="type != 'inputType' && $slots.body"
               class="flex text-sm font-semibold text-body justify-center whitespace-pre-wrap text-center">
               <slot name="body"></slot>
             </div>

src/components/lists/ListContainer.vue

@@ -3,7 +3,7 @@
     <div class="w-full flex flex-col grow overflow-hidden">
       <slot name="listBar" />
 
-      <div class="grow overflow-y-auto">
+      <div class="grow overflow-y-auto scrollbar-hide">
         <slot name="listCards" />
       </div>
     </div>

src/components/member-management/MemberManagementListCard.vue

@@ -58,6 +58,9 @@ import { useRouter } from 'vue-router'
 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' ? '담당자' : '관리자'
@@ -84,7 +87,14 @@ const isModalVisible = ref({
 })
 const resultModalType = ref('')
 const message = ref('')
+const memberStore = useMemberStore()
+const { info: myInfo } = storeToRefs(memberStore)
+const { setError } = useErrorStore()
 const toggleModal = (key: keyof typeof isModalVisible.value) => {
+  if (key === 'delete' && info.nickname === myInfo.value.nickname) {
+    setError('자신의 계정은\n삭제할 수 없습니다')
+    return
+  }
   isModalVisible.value = Object.fromEntries(
     Object.keys(isModalVisible.value).map(k => [k, k === key])
   ) as typeof isModalVisible.value

src/components/request-approve/DueDateInput.vue

@@ -2,7 +2,8 @@
   <input
     :type="inputType"
     :value="modelValue"
-    class="w-full border border-gray-300 rounded px-3 py-2 cursor-pointer focus:outline-none text-center"
+    class="w-full border border-border-1 rounded px-3 py-2 cursor-pointer focus:outline-none text-center"
+    :class="isInvalidate ? 'border-red-1' : 'border-border-1'"
     :min="inputType === 'date' ? minValue : undefined"
     @focus="e => (e.target as HTMLInputElement).showPicker()"
     @input="updateValue(($event.target as HTMLInputElement).value)" />
@@ -12,7 +13,7 @@
 import type { DueDateInputProps } from '@/types/common'
 import { computed, defineEmits, defineProps, onMounted } from 'vue'
 
-const { modelValue, inputType } = defineProps<DueDateInputProps>()
+const { modelValue, inputType, isInvalidate } = defineProps<DueDateInputProps>()
 
 const emit = defineEmits(['update:modelValue'])
 

src/components/request-approve/LabelDropdown.vue

@@ -16,7 +16,7 @@
       </div>
       <div
         v-if="dropdownOpen"
-        class="absolute w-full h-40 overflow-y-auto 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 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 labelArr"
           :key="option.labelId"

src/components/request-approve/ManagerDropdown.vue

@@ -14,6 +14,7 @@
       class="relative flex">
       <div
         class="request-task-dropdown"
+        :class="isInvalidateState ? '!border-red-1' : ''"
         @click="toggleDropdown">
         <div class="flex gap-2 items-center">
           <ImageContainer

src/components/request-approve/RequestApprove.vue

@@ -10,18 +10,18 @@
       v-model="category1"
       :options="mainCategoryArr"
       :label-name="'1차 카테고리'"
-      :isInvalidate="isInvalidate"
+      :isInvalidate="isInvalidate === 'category1' ? 'category' : ''"
       :isDisabled="false" />
     <CategoryDropDown
       v-model="category2"
       :options="afterSubCategoryArr"
       :label-name="'2차 카테고리'"
-      :is-invalidate="isInvalidate"
+      :isInvalidate="isInvalidate === 'category2' ? 'category' : ''"
       :isDisabled="!category1" />
     <ManagerDropdown
       v-model="approveData.processor"
       :placeholderText="'담당자를 선택해주세요'"
-      :is-invalidate="isInvalidate" />
+      :is-invalidate="isInvalidate === 'manager' ? 'manager' : ''" />
     <div class="flex flex-col gap-2">
       <div class="flex gap-2">
         <p class="text-body text-xs font-semibold">마감기한</p>
@@ -40,10 +40,12 @@
       <div class="flex w-full justify-center gap-6">
         <DueDateInput
           v-model="approveData.dueDate"
-          inputType="date" />
+          inputType="date"
+          :is-invalidate="isInvalidate === 'date' ? 'date' : ''" />
         <DueDateInput
           v-model="approveData.dueTime"
-          inputType="time" />
+          inputType="time"
+          :is-invalidate="isInvalidate === 'date' ? 'date' : ''" />
       </div>
     </div>
     <LabelDropdown
@@ -141,8 +143,12 @@ const handleCancel = () => {
 }
 
 const handleSubmit = async () => {
-  if (!category1.value || !category2.value) {
-    isInvalidate.value = 'category'
+  if (!category1.value) {
+    isInvalidate.value = 'category1'
+    return
+  }
+  if (!category2.value) {
+    isInvalidate.value = 'category2'
     return
   }
   if (!approveData.value.processor?.memberId) {

src/components/request-task/CategoryDropDown.vue

@@ -17,8 +17,8 @@
       ref="htmlRef"
       class="relative flex">
       <div
-        class="flex w-full h-11 items-center rounded p-4 border border-border-1"
-        :class="isDisabled ? 'bg-background-2 cursor-default' : 'bg-white cursor-pointer'"
+        class="flex w-full h-11 items-center rounded p-4 border"
+        :class="`${isDisabled ? 'bg-background-2 cursor-default' : 'bg-white cursor-pointer'} ${isInvalidate ? 'border-red-1' : 'border-border-1'}`"
         @click="toggleDropdown">
         <p :class="{ 'text-disabled': !modelValue?.name }">
           {{ modelValue?.name ?? labelName + '를 선택해주세요' }}
@@ -29,7 +29,7 @@
       </div>
       <div
         v-if="dropdownOpen"
-        class="absolute w-full max-h-40 overflow-y-auto 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="'subCategoryId' in option ? option.subCategoryId : option.mainCategoryId"

src/components/request-task/ReRequestTask.vue

@@ -19,7 +19,7 @@
       :placeholderText="'제목을 입력해주세요'"
       :label-name="'제목'"
       :limit-length="30"
-      :is-invalidate="isInvalidate" />
+      :is-invalidate="isInvalidate === 'input' ? 'input' : ''" />
     <RequestTaskTextArea
       v-model="description"
       :is-invalidate="isInvalidate"