From a79a8bde73b244012c67f5c2c4349e4e20631411 Mon Sep 17 00:00:00 2001
From: khj0414 <khj0414@local-host.co.kr>
Date: Tue, 25 Mar 2025 15:21:12 +0900
Subject: [PATCH 01/12] =?UTF-8?q?=ED=88=AC=ED=91=9C=EC=A2=85=EB=A3=8C=20?=
 =?UTF-8?q?=EA=B0=80=EB=8A=A5=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/voteboard/voteCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/voteboard/voteCard.vue b/src/components/voteboard/voteCard.vue
index 4faed53..c987a79 100644
--- a/src/components/voteboard/voteCard.vue
+++ b/src/components/voteboard/voteCard.vue
@@ -126,7 +126,7 @@ watch(() => props.data.localVote.total_voted, () => {
 
 // 종료 체크 함수
 const checkVoteCompletion = () => {
-    if (props.data.localVote.total_votable === props.data.localVote.total_voted && props.data.localVote.LOCVOTDDT == '') {
+    if (props.data.localVote.total_votable === props.data.localVote.total_voted && props.data.localVote.LOCVOTDDT == null) {
         emit('voteEnded', { id: props.data.localVote.LOCVOTSEQ });
     }
 };

From 031c5f35c644ebbbf1cd0e8691c499317708f08c Mon Sep 17 00:00:00 2001
From: nevermoregb <nevermoregb@local-host.co.kr>
Date: Tue, 25 Mar 2025 16:14:11 +0900
Subject: [PATCH 02/12] =?UTF-8?q?=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=20maxlength=208=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComment.vue     | 2 +-
 src/components/board/BoardCommentArea.vue | 2 +-
 src/views/board/BoardView.vue             | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

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/views/board/BoardView.vue b/src/views/board/BoardView.vue
index afa527d..7b4e57e 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -30,6 +30,7 @@
                                         autocomplete="new-password"
                                         v-model="password"
                                         placeholder="비밀번호 입력"
+                                        maxlength="8"
                                         @input="
                                             password = password.replace(/\s/g, '');
                                             inputCheck();

From cf52ab8a1b2bb465337bbf42b0e6d43fd9432978 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Tue, 25 Mar 2025 17:43:24 +0900
Subject: [PATCH 03/12] =?UTF-8?q?=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=204?=
 =?UTF-8?q?=EC=9E=90=EB=A6=AC=20alert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/user/RegisterForm.vue | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/user/RegisterForm.vue b/src/components/user/RegisterForm.vue
index 655a329..aea85d2 100644
--- a/src/components/user/RegisterForm.vue
+++ b/src/components/user/RegisterForm.vue
@@ -38,6 +38,7 @@
                 @update:alert="passwordAlert = $event"
                 :value="password"
             />
+            <span v-if="passwordError" class="invalid-feedback d-block">{{ passwordError }}</span>
 
             <UserFormInput
                 title="비밀번호 확인"
@@ -180,6 +181,7 @@
     const id = ref('');
     const idError = ref('');
     const password = ref('');
+    const passwordError = ref('');
     const passwordcheck = ref('');
     const passwordcheckError = ref('');
     const pwhintRes = ref('');
@@ -199,6 +201,7 @@
     const idAlert = ref(false);
     const idErrorAlert = ref(false);
     const passwordAlert = ref(false);
+    const passwordErrorAlert = ref(false);
     const passwordcheckAlert = ref(false);
     const passwordcheckErrorAlert = ref(false); // 비밀번호 확인 오류 메시지
     const pwhintResAlert = ref(false);
@@ -328,11 +331,17 @@
         }
     };
 
+    watch(password, (newValue) => {
+        if (newValue.length >= 4) {
+            passwordErrorAlert.value = false;
+            passwordError.value = '';
+        }
+    });
+
 
     // 회원가입
     const handleSubmit = async () => {
         await checkColorDuplicate();
-
         idAlert.value = id.value.trim() === '';
         passwordAlert.value = password.value.trim() === '';
         passwordcheckAlert.value = passwordcheck.value.trim() === '';
@@ -342,6 +351,14 @@
         addressAlert.value = address.value.trim() === '';
         phoneAlert.value = phone.value.trim() === '';
 
+         // 비밀번호 길이 체크 로직 추가
+        if (password.value.length < 4) {
+            passwordErrorAlert.value = true;
+            passwordError.value = '비밀번호는 4자리 이상이어야 합니다.';
+        } else {
+            passwordError.value = '';
+        }
+
         if (!/^\d+$/.test(phone.value)) {
             phoneAlert.value = true;
         } else {
@@ -362,6 +379,7 @@
             idAlert.value ||
             idErrorAlert.value ||
             passwordAlert.value ||
+            passwordcErrorAlert.value ||
             passwordcheckAlert.value ||
             passwordcheckErrorAlert.value ||
             pwhintResAlert.value ||

From a391d677bda8ef0c44efb27a7a2968661c60a809 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Tue, 25 Mar 2025 17:43:46 +0900
Subject: [PATCH 04/12] =?UTF-8?q?=EC=9D=B4=EB=A6=84=20->=20=ED=94=84?=
 =?UTF-8?q?=EB=A1=9C=EC=A0=9D=ED=8A=B8=EB=AA=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/ProjectCard.vue        | 48 +++++++++++-----------
 src/components/projectlist/ProjectList.vue |  2 +-
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/components/list/ProjectCard.vue b/src/components/list/ProjectCard.vue
index 7574d64..79f714a 100644
--- a/src/components/list/ProjectCard.vue
+++ b/src/components/list/ProjectCard.vue
@@ -94,7 +94,7 @@
         <template #title> 프로젝트 수정 </template>
         <template #body>
             <FormInput
-                title="이름"
+                title="프로젝트명"
                 name="name"
                 :is-essential="true"
                 :is-alert="nameAlert"
@@ -538,30 +538,19 @@ const handleUpdate = async () => {
 
 // 주소를 좌표로 변환하는 함수
 const convertAddressToCoordinates = () => {
-    // kakao maps API가 로드되었는지 확인
-    if (window.kakao && window.kakao.maps) {
-        const geocoder = new window.kakao.maps.services.Geocoder();
-        geocoder.addressSearch(props.address, (result, status) => {
-            if (status === window.kakao.maps.services.Status.OK) {
-                coordinates.value = {
-                    lat: parseFloat(result[0].y),
-                    lng: parseFloat(result[0].x)
-                };
-            } else {
-                // 기본 좌표 설정 (본사)
-                coordinates.value = {
-                    lat: 37.2108651707078,
-                    lng: 127.089445559923
-                };
-            }
-        });
-    } else {
-        // 기본 좌표로 설정
-        coordinates.value = {
-            lat: 37.2108651707078,
-            lng: 127.089445559923
-        };
+    if (!window.kakao || !window.kakao.maps) {
+        return;
     }
+
+    const geocoder = new window.kakao.maps.services.Geocoder();
+    geocoder.addressSearch(props.address, (result, status) => {
+        if (status === window.kakao.maps.services.Status.OK) {
+            coordinates.value = {
+                lat: parseFloat(result[0].y),
+                lng: parseFloat(result[0].x)
+            };
+        }
+    });
 };
 
 const onLoadKakaoMap = (mapRef) => {
@@ -615,6 +604,17 @@ onMounted(async () => {
     if (endDateInput.value) {
         endInputElement = endDateInput.value.$el.querySelector('input[type="date"]');
     }
+
+    // Kakao Maps API 로드 확인
+    const checkKakaoMapsLoaded = () => {
+        if (window.kakao && window.kakao.maps) {
+            convertAddressToCoordinates();
+        } else {
+            setTimeout(checkKakaoMapsLoaded, 500);
+        }
+    };
+
+    checkKakaoMapsLoaded();
 });
 
 
diff --git a/src/components/projectlist/ProjectList.vue b/src/components/projectlist/ProjectList.vue
index ef0c1ce..feeae3a 100644
--- a/src/components/projectlist/ProjectList.vue
+++ b/src/components/projectlist/ProjectList.vue
@@ -37,7 +37,7 @@
             <template #title> 프로젝트 등록 </template>
             <template #body>
                 <FormInput
-                    title="이름"
+                    title="프로젝트명"
                     name="name"
                     :is-essential="true"
                     :is-alert="nameAlert"

From 0da0d604e0aa0793d9ae9885c9cf88131449f37f Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Tue, 25 Mar 2025 17:44:07 +0900
Subject: [PATCH 05/12] =?UTF-8?q?=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8=20?=
 =?UTF-8?q?=EC=B0=B8=EC=97=AC=EC=9D=B8=EC=9B=90=20=EB=A7=8E=EC=9D=80=20?=
 =?UTF-8?q?=EC=88=9C=20=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../commuters/CommuterProjectList.vue         | 32 +++++++++++++++----
 1 file changed, 26 insertions(+), 6 deletions(-)

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 @@
 <template>
     <div class="commuter-list">
-        <div v-for="post in project" :key="post.PROJCTSEQ"
+        <div
+            v-for="post in sortedProjects"
+            :key="post.PROJCTSEQ"
             class="border border-2 mt-3 card p-2"
             :style="`border-color: ${post.projctcolor} !important; color: ${post.projctcolor} !important;`"
             @dragover="allowDrop($event)"
-            @drop="handleDrop($event, post)">
+            @drop="handleDrop($event, post)"
+        >
             <p class="mb-1">
                 {{ post.PROJCTNAM }}
             </p>
             <div class="row gx-2">
-                <div v-for="commuter in commuters.filter(c => c.PROJCTNAM === post.PROJCTNAM)" :key="commuter.COMMUTCMT" class="col-4">
+                <div
+                    v-for="commuter in commuters.filter(c => c.PROJCTNAM === post.PROJCTNAM)"
+                    :key="commuter.COMMUTCMT"
+                    class="col-4"
+                >
                     <div class="ratio ratio-1x1">
-                        <img :src="`${baseUrl}upload/img/profile/${commuter.profile}`"
+                        <img
+                            :src="`${baseUrl}upload/img/profile/${commuter.profile}`"
                             alt="User Profile"
                             class="rounded-circle"
                             :class="isCurrentUser(commuter) ? 'cursor-pointer' : ''"
                             :draggable="isCurrentUser(commuter)"
                             @dragstart="isCurrentUser(commuter) ? dragStart($event, post) : null"
-                            @error="$event.target.src = '/img/icons/icon.png'">
+                            @error="$event.target.src = '/img/icons/icon.png'"
+                        >
                     </div>
                 </div>
             </div>
@@ -26,7 +35,7 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits } from 'vue';
+import { defineProps, defineEmits, computed } from 'vue';
 
 const props = defineProps({
     project: {
@@ -57,6 +66,15 @@ const props = defineProps({
 
 const emit = defineEmits(['drop', 'update:selectedProject', 'update:checkedInProject']);
 
+// 프로젝트 참여인원 순 정렬
+const sortedProjects = computed(() => {
+    const projectList = Array.isArray(props.project) ? props.project :
+                        Object.values(props.project || {});
+
+    return projectList
+        .filter(item => item && typeof item === 'object')
+        .sort((a, b) => (b.participant_count || 0) - (a.participant_count || 0));
+});
 // 현재 사용자 확인
 const isCurrentUser = (commuter) => {
     return props.user && commuter && commuter.MEMBERSEQ === props.user.id;
@@ -79,4 +97,6 @@ const handleDrop = (event, targetProject) => {
     event.preventDefault();
     emit('drop', { event, targetProject });
 };
+
+
 </script>

From 6abb6a532b3269426acc9d2755e9037c6327050c Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Tue, 25 Mar 2025 17:53:20 +0900
Subject: [PATCH 06/12] =?UTF-8?q?=ED=94=84=EC=A0=9D=20=EC=98=A4=EB=A5=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/ProjectCard.vue | 35 ++++++++++++++++-------------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/components/list/ProjectCard.vue b/src/components/list/ProjectCard.vue
index 79f714a..9ca03ea 100644
--- a/src/components/list/ProjectCard.vue
+++ b/src/components/list/ProjectCard.vue
@@ -292,25 +292,27 @@ const selectedUsers = ref({
 });
 
 
-    const startDateInput = ref(null);
-    const endDateInput = ref(null);
+const isKakaoMapLoaded = ref(false);
 
-    // DOM 요소에 직접 접근하기 위한 변수들
-    let startInputElement = null;
-    let endInputElement = null;
+const startDateInput = ref(null);
+const endDateInput = ref(null);
+
+// DOM 요소에 직접 접근하기 위한 변수들
+let startInputElement = null;
+let endInputElement = null;
 
 
-    const openStartDatePicker = () => {
-        if (startInputElement) {
-            startInputElement.showPicker();
-        }
-    };
+const openStartDatePicker = () => {
+    if (startInputElement) {
+        startInputElement.showPicker();
+    }
+};
 
-    const openEndDatePicker = () => {
-        if (endInputElement) {
-            endInputElement.showPicker();
-        }
-    };
+const openEndDatePicker = () => {
+    if (endInputElement) {
+        endInputElement.showPicker();
+    }
+};
 
 
 // 사용자 목록 업데이트 핸들러
@@ -607,7 +609,8 @@ onMounted(async () => {
 
     // Kakao Maps API 로드 확인
     const checkKakaoMapsLoaded = () => {
-        if (window.kakao && window.kakao.maps) {
+        if (window.kakao && window.kakao.maps && window.kakao.maps.services) {
+            isKakaoMapLoaded.value = true;
             convertAddressToCoordinates();
         } else {
             setTimeout(checkKakaoMapsLoaded, 500);

From 041a69a173c48e3456832ab02afffe65b6a0818e Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Tue, 25 Mar 2025 17:56:35 +0900
Subject: [PATCH 07/12] =?UTF-8?q?=EC=98=A4=EB=A5=98=20=ED=99=95=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/ProjectCard.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/list/ProjectCard.vue b/src/components/list/ProjectCard.vue
index 9ca03ea..c934007 100644
--- a/src/components/list/ProjectCard.vue
+++ b/src/components/list/ProjectCard.vue
@@ -540,7 +540,7 @@ const handleUpdate = async () => {
 
 // 주소를 좌표로 변환하는 함수
 const convertAddressToCoordinates = () => {
-    if (!window.kakao || !window.kakao.maps) {
+    if (typeof window.kakao === 'undefined' || typeof window.kakao.maps === 'undefined') {
         return;
     }
 

From 8328020eb329f8df391d588fd059ed72df341ccc Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Tue, 25 Mar 2025 18:03:48 +0900
Subject: [PATCH 08/12] =?UTF-8?q?=EC=98=A4=EB=A5=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/ProjectCard.vue | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/components/list/ProjectCard.vue b/src/components/list/ProjectCard.vue
index c934007..2796a88 100644
--- a/src/components/list/ProjectCard.vue
+++ b/src/components/list/ProjectCard.vue
@@ -540,7 +540,7 @@ const handleUpdate = async () => {
 
 // 주소를 좌표로 변환하는 함수
 const convertAddressToCoordinates = () => {
-    if (typeof window.kakao === 'undefined' || typeof window.kakao.maps === 'undefined') {
+    if (!window.kakao || !window.kakao.maps) {
         return;
     }
 
@@ -596,8 +596,6 @@ onMounted(async () => {
     await userStore.userInfo();
     user.value = userStore.user;
 
-    convertAddressToCoordinates();
-
     if (startDateInput.value) {
         // FormInput 내부 input 찾기
         startInputElement = startDateInput.value.$el.querySelector('input[type="date"]');
@@ -607,13 +605,9 @@ onMounted(async () => {
         endInputElement = endDateInput.value.$el.querySelector('input[type="date"]');
     }
 
-    // Kakao Maps API 로드 확인
     const checkKakaoMapsLoaded = () => {
         if (window.kakao && window.kakao.maps && window.kakao.maps.services) {
-            isKakaoMapLoaded.value = true;
             convertAddressToCoordinates();
-        } else {
-            setTimeout(checkKakaoMapsLoaded, 500);
         }
     };
 

From 6a4820628b0776d20cd9220835ad9dd1bc0bc49a Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Tue, 25 Mar 2025 18:12:26 +0900
Subject: [PATCH 09/12] =?UTF-8?q?=ED=98=B9=EC=8B=9C=EB=AA=B0=EB=9D=BC=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/projectlist/ProjectList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/projectlist/ProjectList.vue b/src/components/projectlist/ProjectList.vue
index feeae3a..467c9a6 100644
--- a/src/components/projectlist/ProjectList.vue
+++ b/src/components/projectlist/ProjectList.vue
@@ -14,7 +14,7 @@
         <div v-for="post in projectStore.projectList" :key="post.PROJCTSEQ">
             <ProjectCard
                 :title="post.PROJCTNAM"
-                :description="post.PROJCTDES"
+                :description="post.PROJCTDES ?? ''"
                 :strdate="post.PROJCTSTR"
                 :enddate="post.PROJCTEND"
                 :address="post.PROJCTARR"

From 921e140aa453a7a8d4802a415339cae89b2994c4 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Tue, 25 Mar 2025 18:38:45 +0900
Subject: [PATCH 10/12] =?UTF-8?q?datepicker=20=EA=B3=B5=ED=86=B5=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/commuters/CommuterCalendar.vue | 72 ++------------
 src/stores/useDatePicker.js                   | 95 +++++++++++++++++++
 2 files changed, 104 insertions(+), 63 deletions(-)
 create mode 100644 src/stores/useDatePicker.js

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();
         }
-    });
+    );
 });
 </script>
 
diff --git a/src/stores/useDatePicker.js b/src/stores/useDatePicker.js
new file mode 100644
index 0000000..46eef0f
--- /dev/null
+++ b/src/stores/useDatePicker.js
@@ -0,0 +1,95 @@
+/*
+    작성자 : 박지윤
+    작성일 : 2025-03-25
+    수정자 :
+    수정일 :
+    설명   : 달력 데이트 피커
+*/
+
+import { ref } from 'vue';
+import flatpickr from 'flatpickr';
+import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect/index';
+import 'flatpickr/dist/flatpickr.min.css';
+import 'flatpickr/dist/plugins/monthSelect/style.css';
+
+export function useDatePicker() {
+    let fpInstance = null;
+    const calendarDatepicker = ref(null);
+
+    const initDatePicker = (fullCalendarRef, onDateChange, options = {}) => {
+        // 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) {
+                // 선택한 달의 첫날로 달력을 이동
+                if (fullCalendarRef.value) {
+                    fullCalendarRef.value.getApi().gotoDate(dateStr + "-01");
+                }
+
+                const [year, month] = dateStr.split("-");
+
+                // onDateChange가 함수인 경우에만 호출
+                if (typeof onDateChange === 'function') {
+                    onDateChange(parseInt(year, 10), month, options);
+                }
+            },
+            onClose: function() {
+                if (calendarDatepicker.value) {
+                    calendarDatepicker.value.style.display = "none";
+                }
+            },
+            ...options
+        });
+
+        // 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';
+
+                fpInstance.open();
+            });
+        }
+    };
+
+    const closeDatePicker = () => {
+        if (fpInstance) {
+            fpInstance.close();
+        }
+    };
+
+    return {
+        initDatePicker,
+        closeDatePicker,
+        calendarDatepicker
+    };
+}

From 4f0bec0df3929859c829d3cf46e1839ee94090eb Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Tue, 25 Mar 2025 18:45:30 +0900
Subject: [PATCH 11/12] =?UTF-8?q?=EC=9C=84=EC=B9=98=20=ED=99=95=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/useDatePicker.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/stores/useDatePicker.js b/src/stores/useDatePicker.js
index 46eef0f..35121b5 100644
--- a/src/stores/useDatePicker.js
+++ b/src/stores/useDatePicker.js
@@ -68,8 +68,8 @@ export function useDatePicker() {
 
                 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.top = `${rect.bottom + window.scrollY}px !important;`;
+                dpEl.style.left = `${rect.left + window.scrollX}px !important;`;
                 dpEl.style.transform = 'translate(-50%, -50%)';
                 dpEl.style.zIndex = '9999';
                 dpEl.style.border = 'none';

From 4ff3aa8fa3835f71a59151a4547f36c941a1205e Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Tue, 25 Mar 2025 18:48:22 +0900
Subject: [PATCH 12/12] =?UTF-8?q?=EC=9C=84=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/stores/useDatePicker.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/stores/useDatePicker.js b/src/stores/useDatePicker.js
index 35121b5..46eef0f 100644
--- a/src/stores/useDatePicker.js
+++ b/src/stores/useDatePicker.js
@@ -68,8 +68,8 @@ export function useDatePicker() {
 
                 dpEl.style.display = 'block';
                 dpEl.style.position = 'fixed';
-                dpEl.style.top = `${rect.bottom + window.scrollY}px !important;`;
-                dpEl.style.left = `${rect.left + window.scrollX}px !important;`;
+                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';