Clap-248 담당자 요청 승인 API 연결

src/components/request-approve/DueDateInput.vue

@@ -1,14 +1,20 @@
 <template>
   <input
     :type="inputType"
-    :v-model="modelValue"
+    :value="modelValue"
     class="w-full border border-gray-300 rounded px-3 py-2 cursor-pointer focus:outline-none text-center text-black"
-    @focus="e => (e.target as HTMLInputElement).showPicker()" />
+    @focus="e => (e.target as HTMLInputElement).showPicker()"
+    @input="updateValue(($event.target as HTMLInputElement).value)" />
 </template>
 
 <script lang="ts" setup>
 import type { DueDateInputProps } from '@/types/common'
-import { defineProps } from 'vue'
+import { defineEmits, defineProps } from 'vue'
 
 const { modelValue, inputType } = defineProps<DueDateInputProps>()
+const emit = defineEmits(['update:modelValue'])
+
+const updateValue = (value: string) => {
+  emit('update:modelValue', value)
+}
 </script>

src/components/request-approve/LabelDropdown.vue

@@ -0,0 +1,49 @@
+<template>
+  <div>
+    <div class="text-xs mb-2 text-body font-bold">구분</div>
+    <div class="relative flex text-base">
+      <div
+        class="flex w-full h-11 items-center rounded p-4 bg-white border border-border-1 cursor-pointer text-black"
+        @click="toggleDropdown">
+        <p :class="{ 'text-disabled': !modelValue }">
+          {{ modelValue?.labelName || placeholderText }}
+        </p>
+        <CommonIcons
+          :name="dropdownIcon"
+          :class="['ml-auto', { 'rotate-180': dropdownOpen }]" />
+      </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 text-black">
+        <div
+          v-for="option in options"
+          :key="option.labelId"
+          class="w-full flex items-center h-11 p-2 rounded hover:bg-background-2 cursor-pointer"
+          @click="selectOption(option)">
+          {{ option.labelName }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { dropdownIcon } from '@/constants/iconPath'
+import type { LabelDataTypes } from '@/types/common'
+import type { LabelDropdownProps } from '@/types/user'
+import { ref } from 'vue'
+import CommonIcons from '../common/CommonIcons.vue'
+
+const { options, modelValue, placeholderText } = defineProps<LabelDropdownProps>()
+const emit = defineEmits(['update:modelValue'])
+const dropdownOpen = ref(false)
+
+const toggleDropdown = () => {
+  dropdownOpen.value = !dropdownOpen.value
+}
+
+const selectOption = (option: LabelDataTypes) => {
+  emit('update:modelValue', option)
+  dropdownOpen.value = false
+}
+</script>