diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue index 2a6a469..fa13318 100644 --- a/src/components/board/BoardComment.vue +++ b/src/components/board/BoardComment.vue @@ -24,7 +24,7 @@ class="form-control" :value="password" autocomplete="new-password" - maxlength="4" + maxlength="8" placeholder="비밀번호 입력" @input="filterInput" /> diff --git a/src/components/board/BoardCommentArea.vue b/src/components/board/BoardCommentArea.vue index 57f65ec..ed522cf 100644 --- a/src/components/board/BoardCommentArea.vue +++ b/src/components/board/BoardCommentArea.vue @@ -57,7 +57,7 @@ autocomplete="new-password" v-model="password" placeholder="비밀번호" - maxlength="4" + maxlength="8" @input=" password = password.replace(/\s/g, ''); clearAlert('password'); diff --git a/src/components/commuters/CommuterCalendar.vue b/src/components/commuters/CommuterCalendar.vue index b4c9b15..c0300a7 100644 --- a/src/components/commuters/CommuterCalendar.vue +++ b/src/components/commuters/CommuterCalendar.vue @@ -90,9 +90,9 @@ import { useProjectStore } from '@/stores/useProjectStore'; import CommuterBtn from '@c/commuters/CommuterBtn.vue'; import CommuterProjectList from '@c/commuters/CommuterProjectList.vue'; import BackBtn from '@c/button/BackBtn.vue'; -import flatpickr from 'flatpickr'; -import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect/index'; -import 'flatpickr/dist/plugins/monthSelect/style.css'; +import { useDatePicker } from '@/stores/useDatePicker'; + +const datePickerStore = useDatePicker(); const baseUrl = $api.defaults.baseURL.replace(/api\/$/, ''); const user = ref({}); @@ -115,7 +115,6 @@ const commuters = ref([]); const monthlyCommuters = ref([]); const calendarDatepicker = ref(null); -let fpInstance = null; // 출퇴근 컴포넌트 이벤트 핸들러 const handleWorkTimeUpdate = () => { @@ -390,7 +389,6 @@ const selectedDateCommuters = computed(() => { commuter.COMMUTDAY === eventDate.value ); }); - onMounted(async () => { await fetchData(); await userStore.userInfo(); @@ -407,65 +405,13 @@ onMounted(async () => { checkedInProject.value = storedProject; } - nextTick(() => { - // 달력 데이트피커를 위한 input 요소 동적 생성 - const datePickerInput = document.createElement('input'); - datePickerInput.type = 'text'; - datePickerInput.style.display = 'none'; - document.body.appendChild(datePickerInput); - calendarDatepicker.value = datePickerInput; - - // Flatpickr 초기화 (달 선택) - fpInstance = flatpickr(calendarDatepicker.value, { - dateFormat: "Y-m", - plugins: [ - new monthSelectPlugin({ - shorthand: true, - dateFormat: "Y-m", - altFormat: "F Y" - }) - ], - onOpen: function() { - document.querySelector('.flatpickr-input').style.visibility = 'hidden'; - }, - onChange: function(selectedDatesArr, dateStr) { - // 선택한 달의 첫날로 달력을 이동 - fullCalendarRef.value.getApi().gotoDate(dateStr + "-01"); - const [year, month] = dateStr.split("-"); - lastRemainingYear.value = parseInt(year, 10); - lastRemainingMonth.value = month; - loadCalendarData(lastRemainingYear.value, lastRemainingMonth.value); - }, - onClose: function() { - calendarDatepicker.value.style.display = "none"; - } - }); - - // FullCalendar 년월월(.fc-toolbar-title) 클릭 시 데이트피커 열기 - const titleEl = document.querySelector('.fc-toolbar-title'); - if (titleEl) { - titleEl.style.cursor = 'pointer'; - titleEl.addEventListener('click', () => { - const rect = titleEl.getBoundingClientRect(); - const dpEl = calendarDatepicker.value; - - dpEl.style.display = 'block'; - dpEl.style.position = 'fixed'; - dpEl.style.top = `${rect.bottom + window.scrollY}px`; - dpEl.style.left = `${rect.left + window.scrollX}px`; - dpEl.style.transform = 'translate(-50%, -50%)'; - dpEl.style.zIndex = '9999'; - dpEl.style.border = 'none'; - dpEl.style.outline = 'none'; - dpEl.style.backgroundColor = 'transparent'; - // 제목의 중앙 아래에 위치하도록 계산 - // 또는 CSS transform 사용 - // dpEl.style.setProperty('--left-position', `${rect.left + window.scrollX}px`); - // dpEl.style.transform = 'translateX(-50%)'; - fpInstance.open(); - }); + datePickerStore.initDatePicker( + fullCalendarRef, + async (year, month, options) => { + // 데이터 다시 불러오기 + await fetchData(); } - }); + ); }); diff --git a/src/components/commuters/CommuterProjectList.vue b/src/components/commuters/CommuterProjectList.vue index 5de64a0..83fbcd2 100644 --- a/src/components/commuters/CommuterProjectList.vue +++ b/src/components/commuters/CommuterProjectList.vue @@ -1,23 +1,32 @@ diff --git a/src/components/list/ProjectCard.vue b/src/components/list/ProjectCard.vue index 7574d64..2796a88 100644 --- a/src/components/list/ProjectCard.vue +++ b/src/components/list/ProjectCard.vue @@ -94,7 +94,7 @@