🐛 [fix] Input Validation Border 통일

Author: seorang42

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/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 + '를 선택해주세요' }}

src/components/request-task/ReRequestTask.vue

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

src/components/request-task/RequestTask.vue

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

src/components/request-task/RequestTaskInput.vue

@@ -12,12 +12,12 @@
       <p v-if="isInvalidateState === 'wrongNickname'">잘못된 형식의 아이디입니다</p>
     </div>
     <input
-      class="w-full h-11 border border-border-1 px-4 focus:outline-none rounded"
+      class="w-full h-11 border px-4 focus:outline-none rounded"
       :value="modelValue"
       :disabled="isEdit"
       @input="updateValue(($event.target as HTMLInputElement).value)"
       :placeholder="placeholderText"
-      :class="{ 'text-gray-500': isEdit }"
+      :class="`${isEdit ? 'text-gray-500' : ''} ${isInvalidate ? 'border-red-1' : 'border-border-1'}`"
       :maxlength="labelName === '제목' ? 30 : undefined" />
   </div>
 </template>

src/types/common.ts

@@ -61,6 +61,7 @@ export type Role = 'ROLE_USER' | 'ROLE_MANAGER' | 'ROLE_ADMIN'
 export interface DueDateInputProps {
   modelValue: string | null
   inputType: string
+  isInvalidate?: string
 }
 
 export interface FormButtonProps {