날짜 폼만 눌러도 나오게

src/views/voteboard/voteboardWrite.vue

@@ -20,16 +20,22 @@
                             v-model="title"
                             @keyup="ValidHandler('title')"
                             />
-                            <form-input
-                            title="종료날짜"
-                            name="endDate"
-                            type="datetime-local"
-                            :is-essential="true"
-                            :is-alert="endDateAlert"
-                            v-model="endDate"
-                            :min="today"
-                            @change="ValidHandlerendDate"
-                            />
+                            <div class="date-picker-container" @click="focusDateInput">
+                                <form-input
+                                    title="종료날짜"
+                                    name="endDate"
+                                    type="datetime-local"
+                                    :is-essential="true"
+                                    :is-alert="endDateAlert"
+                                    v-model="endDate"
+                                    :min="today"
+                                    @change="ValidHandlerendDate"
+                                />
+                            </div>
+
+                            <!-- 숨겨진 input 태그를 사용하여 강제로 포커스 -->
+                            <input ref="dateInput" type="datetime-local" v-model="endDate" class="hidden-date-input">
+
                             <!-- 항목 입력 반복 -->
                             <div v-for="(item, index) in itemList" :key="index">
                                 <form-input
@@ -124,6 +130,16 @@ const userListTotal = ref(0);
 const addvoteitem = ref(false);
 const addvotemulti= ref(false);
 
+const dateInput = ref(null);
+
+const focusDateInput = () => {
+    if (dateInput.value) {
+        dateInput.value.showPicker(); // 달력 자동 열기 (일부 브라우저에서 지원)
+        dateInput.value.focus(); // 포커스 이동
+    }
+};
+
+
 const userSet = ({ userList, userTotal }) => {
     activeUserList.value = userList;
     userListTotal.value = userTotal;
@@ -219,5 +235,17 @@ 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%;
+    left: 17%;
+    width: 100%;
+    opacity: 0;
+    pointer-events: none;
+}
 </style>