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 @@ + +
+ +
+ +
+ +
{ + 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 () => { + 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 @@ - +
+ + +
- +
+ + +
{ + 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;