폼 눌러도 달력 나오게

public/css/custom.css

@@ -520,6 +520,24 @@
 
 /* project list */
 
+.hidden-start-input {
+    position: absolute;
+    top: 103%;
+    left: 20%;
+    width: 100%;
+    height: 40px;
+    opacity: 0;
+}
+
+.hidden-end-input {
+    position: absolute;
+    top: 113.3%;
+    left: 20%;
+    width: 100%;
+    height: 40px;
+    opacity: 0;
+}
+
 .map {
     top: -160px;
     left: -5px;

src/components/list/ProjectCard.vue

@@ -130,6 +130,8 @@
                 </div>
             </div>
 
+        <!-- 시작일 -->
+        <div class="date-picker-wrapper" @click="focusStartDateInput">
             <FormInput
                 title="시작일"
                 type="date"
@@ -138,7 +140,11 @@
                 :modelValue="selectedProject.PROJCTSTR"
                 @update:modelValue="selectedProject.PROJCTSTR = $event"
             />
+            <input ref="startDateInput" type="date" v-model="selectedProject.PROJCTSTR" class="hidden-start-input">
+        </div>
 
+        <!-- 종료일 -->
+        <div class="date-picker-wrapper" @click="focusEndDateInput">
             <FormInput
                 title="종료일"
                 type="date"
@@ -147,6 +153,8 @@
                 :modelValue="selectedProject.PROJCTEND"
                 @update:modelValue="selectedProject.PROJCTEND = $event"
             />
+            <input ref="endDateInput" type="date" v-model="selectedProject.PROJCTEND" class="hidden-end-input">
+        </div>
 
             <FormInput
                 title="설명"
@@ -199,6 +207,31 @@ const toastStore = useToastStore();
 const userStore = useUserInfoStore();
 const projectStore = useProjectStore();
 
+const startDateInput = ref(null);
+const endDateInput = ref(null);
+
+const focusStartDateInput = () => {
+    nextTick(() => {
+        if (startDateInput.value) {
+            startDateInput.value.focus();
+            setTimeout(() => {
+                startDateInput.value.showPicker?.();
+            }, 50);
+        }
+    });
+};
+
+const focusEndDateInput = () => {
+    nextTick(() => {
+        if (endDateInput.value) {
+            endDateInput.value.focus();
+            setTimeout(() => {
+                endDateInput.value.showPicker?.();
+            }, 50);
+        }
+    });
+};
+
 // Props 정의
 const props = defineProps({
     title: {
@@ -548,3 +581,13 @@ onMounted(async () => {
 
 
 </script>
+<style>
+.hidden-date-input {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    height: 40px;
+    opacity: 0;
+}
+</style>

src/components/projectlist/ProjectList.vue

@@ -69,6 +69,7 @@
                     </div>
                 </div>
 
+                <div class="date-picker-wrapper" @click="focusStartDateInput">
                     <FormInput
                         title="시작 일"
                         name="startDay"
@@ -77,15 +78,20 @@
                         :modelValue="startDay"
                         v-model="startDay"
                     />
+                    <input ref="startDateInput" type="date" v-model="startDay" class="hidden-start-input">
+                </div>
 
+                <div class="date-picker-wrapper" @click="focusEndDateInput">
                     <FormInput
                         title="종료 일"
-                    :type="'date'"
                         name="endDay"
+                        :type="'date'"
                         :modelValue="endDay"
-                    :min = "startDay"
+                        :min="startDay"
                         @update:modelValue="endDay = $event"
                     />
+                    <input ref="endDateInput" type="date" v-model="endDay" class="hidden-end-input">
+                </div>
 
                 <FormInput
                     title="설명"
@@ -161,6 +167,31 @@
     const nameAlert = ref(false);
     const addressAlert = ref(false);
 
+    const startDateInput = ref(null);
+    const endDateInput = ref(null);
+
+    const focusStartDateInput = () => {
+        nextTick(() => {
+            if (startDateInput.value) {
+                startDateInput.value.focus();
+                setTimeout(() => {
+                    startDateInput.value.showPicker?.();
+                }, 50);
+            }
+        });
+    };
+
+    const focusEndDateInput = () => {
+        nextTick(() => {
+            if (endDateInput.value) {
+                endDateInput.value.focus();
+                setTimeout(() => {
+                    endDateInput.value.showPicker?.();
+                }, 50);
+            }
+        });
+    };
+
     const addressData = ref({
         postcode: '',
         address: '',

src/views/voteboard/voteboardWrite.vue

@@ -235,14 +235,9 @@ const goList = () => {
 .item-input {
     max-width: 200px;
 }
-.date-picker-wrapper {
-    position: relative;
-    display: inline-block;
-    width: 100%;
-}
 .hidden-date-input {
     position: absolute;
-    top: 31.5%;
+    top: 28.5%;
     left: 17%;
     width: 100%;
     opacity: 0;