From 7d70aef38d462afe4e63f908be77e9facd60f4c5 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Thu, 20 Mar 2025 16:02:50 +0900
Subject: [PATCH] =?UTF-8?q?=ED=8F=BC=20=EB=88=8C=EB=9F=AC=EB=8F=84=20?=
 =?UTF-8?q?=EB=8B=AC=EB=A0=A5=20=EB=82=98=EC=98=A4=EA=B2=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/custom.css                      | 18 +++++++
 src/components/list/ProjectCard.vue        | 43 +++++++++++++++
 src/components/projectlist/ProjectList.vue | 63 ++++++++++++++++------
 src/views/voteboard/voteboardWrite.vue     |  7 +--
 4 files changed, 109 insertions(+), 22 deletions(-)

diff --git a/public/css/custom.css b/public/css/custom.css
index 9d906e2..8ac0b53 100644
--- a/public/css/custom.css
+++ b/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;
diff --git a/src/components/list/ProjectCard.vue b/src/components/list/ProjectCard.vue
index b25f050..61a4dcf 100644
--- a/src/components/list/ProjectCard.vue
+++ b/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>
diff --git a/src/components/projectlist/ProjectList.vue b/src/components/projectlist/ProjectList.vue
index 6742113..4aef41a 100644
--- a/src/components/projectlist/ProjectList.vue
+++ b/src/components/projectlist/ProjectList.vue
@@ -69,23 +69,29 @@
                     </div>
                 </div>
 
-                <FormInput
-                    title="시작 일"
-                    name="startDay"
-                    :type="'date'"
-                    :is-essential="true"
-                    :modelValue="startDay"
-                    v-model="startDay"
-                />
+                <div class="date-picker-wrapper" @click="focusStartDateInput">
+                    <FormInput
+                        title="시작 일"
+                        name="startDay"
+                        :type="'date'"
+                        :is-essential="true"
+                        :modelValue="startDay"
+                        v-model="startDay"
+                    />
+                    <input ref="startDateInput" type="date" v-model="startDay" class="hidden-start-input">
+                </div>
 
-                <FormInput
-                    title="종료 일"
-                    :type="'date'"
-                    name="endDay"
-                    :modelValue="endDay"
-                    :min = "startDay"
-                    @update:modelValue="endDay = $event"
-                />
+                <div class="date-picker-wrapper" @click="focusEndDateInput">
+                    <FormInput
+                        title="종료 일"
+                        name="endDay"
+                        :type="'date'"
+                        :modelValue="endDay"
+                        :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: '',
diff --git a/src/views/voteboard/voteboardWrite.vue b/src/views/voteboard/voteboardWrite.vue
index 65fba45..98c55cb 100644
--- a/src/views/voteboard/voteboardWrite.vue
+++ b/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;