From e27425d773a5d3e9a70416250262176d3f26fe9f Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Sat, 22 Feb 2025 17:54:54 +0900
Subject: [PATCH 01/12] =?UTF-8?q?=EA=B2=8C=EC=8B=9C=EB=AC=BC=20=EC=97=86?=
 =?UTF-8?q?=EC=9D=84=20=EB=95=8C=20=EB=A9=98=ED=8A=B8=20=EB=B3=80=EA=B2=BD?=
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 4975995..6841e08 100644
--- a/src/components/projectlist/ProjectList.vue
+++ b/src/components/projectlist/ProjectList.vue
@@ -8,7 +8,7 @@
     <!-- 프로젝트 목록 -->
     <div class="mt-4">
         <div v-if="projectList.length === 0" class="text-center">
-            <p class="text-muted mt-4">게시물이 없습니다.</p>
+            <p class="text-muted mt-4">등록된 프로젝트가 없습니다.</p>
         </div>
 
         <div v-for="post in projectList" :key="post.PROJCTSEQ" @click="openEditModal(post)" class="cursor-pointer">

From 09e79cb6904fb67c0de1207dbbd232dec58f054b Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Mon, 24 Feb 2025 13:58:48 +0900
Subject: [PATCH 02/12] =?UTF-8?q?=ED=9C=B4=EA=B0=80=20=EC=84=A0=ED=83=9D?=
 =?UTF-8?q?=20=ED=99=9C=EC=84=B1=ED=99=94=20=EC=88=98=EC=A0=95=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/vacation/VacationManagement.vue | 261 ++++++++++++----------
 1 file changed, 140 insertions(+), 121 deletions(-)

diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index a9b56e4..5124a05 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -4,29 +4,29 @@
         <div class="row g-0">
           <!-- Sidebar: 사이드바 영역 -->
           <div class="col-3 app-calendar-sidebar border-end" id="app-calendar-sidebar">
-            <!-- 모달들은 화면 오버레이로 동작하므로 사이드바 내부에 두어도 무방 -->
-            <VacationModal
-              v-if="isModalOpen"
-              :isOpen="isModalOpen"
-              :myVacations="filteredMyVacations"
-              :receivedVacations="filteredReceivedVacations"
-              :userColors="userColors"
-              @close="isModalOpen = false"
-            />
-            <VacationGrantModal
-              v-if="isGrantModalOpen"
-              :isOpen="isGrantModalOpen"
-              :targetUser="selectedUser"
-              :remainingQuota="remainingVacationData[selectedUser?.MEMBERSEQ] || 0"
-              @close="isGrantModalOpen = false"
-              @updateVacation="fetchRemainingVacation"
-            />
             <div class="sidebar-content">
               <!-- 사원 프로필 리스트 -->
               <ProfileList
                 @profileClick="handleProfileClick"
                 :remainingVacationData="remainingVacationData"
               />
+              <!-- 모달들은 화면 오버레이로 동작하므로 사이드바 내부에 두어도 무방 -->
+              <VacationModal
+                v-if="isModalOpen"
+                :isOpen="isModalOpen"
+                :myVacations="filteredMyVacations"
+                :receivedVacations="filteredReceivedVacations"
+                :userColors="userColors"
+                @close="isModalOpen = false"
+              />
+              <VacationGrantModal
+                v-if="isGrantModalOpen"
+                :isOpen="isGrantModalOpen"
+                :targetUser="selectedUser"
+                :remainingQuota="remainingVacationData[selectedUser?.MEMBERSEQ] || 0"
+                @close="isGrantModalOpen = false"
+                @updateVacation="fetchRemainingVacation"
+              />
             </div>
             <div class="sidebar-actions text-center my-3">
               <!-- 액션 버튼 -->
@@ -54,7 +54,6 @@
     </div>
   </template>
 
-
   <script setup>
   import { reactive, ref, onMounted, nextTick, computed, watch } from "vue";
   import axios from "@api";
@@ -76,11 +75,11 @@
   const userListStore = useUserStore();
   const userList = ref([]);
   const userColors = ref({});
-  const myVacations = ref([]); // 전체 "사용한 연차" 목록
+  const myVacations = ref([]); // 전체 "사용한 연차" 목록 (로그인한 사원의 휴가만)
   const receivedVacations = ref([]); // 전체 "받은 연차" 목록
   const isModalOpen = ref(false);
   const remainingVacationData = ref({});
-
+  const modalYear  = ref(new Date().getFullYear());
   const lastRemainingYear = ref(new Date().getFullYear());
   const lastRemainingMonth = ref(String(new Date().getMonth() + 1).padStart(2, "0"));
   const isGrantModalOpen = ref(false);
@@ -95,6 +94,9 @@
   const holidayDates = ref(new Set());
   const fetchedEvents = ref([]);
 
+  // 추가: 토글 상태 변수 (필요 시 사용 가능)
+  const toggledDates = ref(new Set());
+
   const calendarOptions = reactive({
     plugins: [dayGridPlugin, interactionPlugin],
     initialView: "dayGridMonth",
@@ -113,24 +115,32 @@
   onMounted(async () => {
     await userStore.userInfo();
     await fetchRemainingVacation();
+    // 초기 vacation history도 가져오기
+    const currentYear = new Date().getFullYear();
+    await fetchVacationHistory(currentYear);
   });
 
-  // lastRemainingYear 값이 변경될 때마다 해당 연도의 연차 내역을 재조회
-    watch(lastRemainingYear, async (newYear, oldYear) => {
+  // 연차 내역 API (초기 호출용)
+  async function fetchVacationHistory(year) {
     try {
-        const response = await axios.get(`vacation/history?year=${newYear}`);
-        if (response.status === 200 && response.data) {
+      const response = await axios.get(`vacation/history?year=${year}`);
+      if (response.status === 200 && response.data) {
         myVacations.value = response.data.data.usedVacations || [];
         receivedVacations.value = response.data.data.receivedVacations || [];
-        } else {
+      } else {
         console.warn("❌ 연차 내역을 불러오지 못했습니다.");
         myVacations.value = [];
         receivedVacations.value = [];
-        }
+      }
     } catch (error) {
-        console.error("🚨 연차 데이터 불러오기 실패:", error);
+      console.error("🚨 연차 데이터 불러오기 실패:", error);
     }
-    });
+  }
+
+  // lastRemainingYear 값이 변경될 때마다 해당 연도의 연차 내역 재조회
+  watch(lastRemainingYear, async (newYear, oldYear) => {
+    await fetchVacationHistory(newYear);
+  });
 
   const fetchRemainingVacation = async () => {
     try {
@@ -147,42 +157,31 @@
   };
 
   // 프로필 클릭 시 연차 내역 가져오기
-// 프로필 클릭 시 연차 내역 가져오기
-const handleProfileClick = async (user) => {
-  try {
-    // 이미 모달이 열려있다면 토글하여 닫음
-    if (isModalOpen.value) {
+  const handleProfileClick = async (user) => {
+    try {
+      if (isModalOpen.value) {
         isModalOpen.value = false;
         return;
-    }
-    if (user.MEMBERSEQ === userStore.user.id) {
-      const year = new Date().getFullYear(); // 현재 연도
-      // 연도 파라미터를 전달하여 전체 연도의 연차 내역을 조회
-      const response = await axios.get(`vacation/history?year=${year}`);
-      if (response.status === 200 && response.data) {
-        myVacations.value = response.data.data.usedVacations || [];
-        receivedVacations.value = response.data.data.receivedVacations || [];
+      }
+      if (isGrantModalOpen.value) {
+        isGrantModalOpen.value = false;
+        return;
+      }
+      if (user.MEMBERSEQ === userStore.user.id) {
+        const year = new Date().getFullYear();
+        await fetchVacationHistory(year);
         isModalOpen.value = true;
-        // 모달을 열 때 기준 연도 갱신
         lastRemainingYear.value = year;
         isGrantModalOpen.value = false;
       } else {
-        console.warn("❌ 연차 내역을 불러오지 못했습니다.");
+        selectedUser.value = user;
+        isGrantModalOpen.value = true;
+        isModalOpen.value = false;
       }
-    } else {
-      // 이미 모달이 열려있다면 토글하여 닫음
-        if (isGrantModalOpen.value) {
-            isGrantModalOpen.value = false;
-            return;
-        }
-      selectedUser.value = user;
-      isGrantModalOpen.value = true;
-      isModalOpen.value = false;
+    } catch (error) {
+      console.error("🚨 연차 데이터 불러오기 실패:", error);
     }
-  } catch (error) {
-    console.error("🚨 연차 데이터 불러오기 실패:", error);
-  }
-};
+  };
 
   const fetchUserList = async () => {
     try {
@@ -221,30 +220,29 @@ const handleProfileClick = async (user) => {
     return vacationCodeMap.value[typeCode] || "기타";
   };
 
-  // computed: lastRemainingYear과과 일치하는 항목만 필터링
-const filteredMyVacations = computed(() => {
-  const filtered = myVacations.value.filter(vac => {
-    // vac.date가 없으면 vac.LOCVACUDT를 사용하도록 함
-    const dateStr = vac.date || vac.LOCVACUDT;
-    const year = dateStr ? dateStr.split("T")[0].substring(0, 4) : null;
-    console.log("vacation year:", year, "lastRemainingYear:", lastRemainingYear.value);
-    return year === String(lastRemainingYear.value);
+  // computed: lastRemainingYear과 일치하는 항목만 필터링
+  const filteredMyVacations = computed(() => {
+    const filtered = myVacations.value.filter(vac => {
+      const dateStr = vac.date || vac.LOCVACUDT;
+      const year = dateStr ? dateStr.split("T")[0].substring(0, 4) : null;
+      console.log("vacation year:", year, "lastRemainingYear:", lastRemainingYear.value);
+      return year === String(lastRemainingYear.value);
+    });
+    console.log("filteredMyVacations:", filtered);
+    return filtered;
   });
-  console.log("filteredMyVacations:", filtered);
-  return filtered;
-});
 
-const filteredReceivedVacations = computed(() => {
-  return receivedVacations.value.filter(vac => {
-    const dateStr = vac.date || vac.LOCVACUDT;
-    const year = dateStr ? dateStr.split("T")[0].substring(0, 4) : null;
-    console.log("vacation year:", year, "lastRemainingYear:", lastRemainingYear.value);
-    return dateStr && year === String(lastRemainingYear.value);
+  const filteredReceivedVacations = computed(() => {
+    return receivedVacations.value.filter(vac => {
+      const dateStr = vac.date || vac.LOCVACUDT;
+      const year = dateStr ? dateStr.split("T")[0].substring(0, 4) : null;
+      console.log("vacation year:", year, "lastRemainingYear:", lastRemainingYear.value);
+      return dateStr && year === String(lastRemainingYear.value);
+    });
   });
-});
-
 
   function updateCalendarEvents() {
+    // selectedDates에서 "delete"가 아닌 경우에 대해 이벤트 생성
     const selectedEvents = Array.from(selectedDates.value)
       .filter(([date, type]) => type !== "delete")
       .map(([date, type]) => ({
@@ -255,12 +253,18 @@ const filteredReceivedVacations = computed(() => {
         display: "background",
         classNames: [getVacationTypeClass(type), "selected-event"]
       }));
+
+    // fetchedEvents에서, 만약 해당 날짜가 "delete" 상태라면
+    // 로그인한 사용자의(내) 이벤트만 제거하고, 다른 사용자의 이벤트는 그대로 둠.
     const filteredFetchedEvents = fetchedEvents.value.filter(event => {
-      if (event.saved) {
-        return selectedDates.value.get(event.start) !== "delete";
+      if (event.saved && selectedDates.value.get(event.start) === "delete") {
+        if (event.memberSeq === userStore.user.id) {
+          return false;
+        }
       }
       return true;
     });
+
     calendarEvents.value = [...filteredFetchedEvents, ...selectedEvents];
   }
 
@@ -274,6 +278,7 @@ const filteredReceivedVacations = computed(() => {
     const clickedDateStr = info.dateStr;
     const clickedDate = info.date;
     const todayStr = new Date().toISOString().split("T")[0];
+
     if (
       clickedDate.getDay() === 0 ||
       clickedDate.getDay() === 6 ||
@@ -282,22 +287,36 @@ const filteredReceivedVacations = computed(() => {
     ) {
       return;
     }
+    // 내 휴가 여부: LOCVACUDT의 앞 10자가 clickedDateStr과 같고, LOCVACRMM가 없거나 빈 문자열인 경우
+    const isMyVacation = myVacations.value.some(vac => {
+      const vacDate = vac.date ? String(vac.date).substring(0, 10) : "";
+      return vacDate === clickedDateStr &&
+             (!vac.LOCVACRMM || String(vac.LOCVACRMM).trim() === "");
+    });
+
+    if (isMyVacation) {
+      // 내 휴가인 경우: selectedDates에 "delete" 상태를 토글 (내 이벤트만 영향을 줌)
+      if (selectedDates.value.get(clickedDateStr) === "delete") {
+        selectedDates.value.delete(clickedDateStr);
+      } else {
+        selectedDates.value.set(clickedDateStr, "delete");
+      }
+      updateCalendarEvents();
+      return;
+    }
+
+    // 내 휴가가 없는 날짜: 일반 선택/토글 처리
     if (selectedDates.value.has(clickedDateStr)) {
+      console.log("일반 날짜 토글 off: 기존 선택 해제");
       selectedDates.value.delete(clickedDateStr);
       updateCalendarEvents();
       return;
     }
-    const unsentVacation = myVacations.value.find(
-      (vac) => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(clickedDateStr) && !vac.LOCVACRMM
-    );
-    if (unsentVacation) {
-      selectedDates.value.set(clickedDateStr, "delete");
-    } else {
-      const type = halfDayType.value
-        ? (halfDayType.value === "AM" ? "700101" : "700102")
-        : "700103";
-      selectedDates.value.set(clickedDateStr, type);
-    }
+    const type = halfDayType.value
+      ? (halfDayType.value === "AM" ? "700101" : "700102")
+      : "700103";
+    console.log("일반 날짜 토글 on: 선택 및 타입", type);
+    selectedDates.value.set(clickedDateStr, type);
     halfDayType.value = null;
     updateCalendarEvents();
   }
@@ -307,43 +326,42 @@ const filteredReceivedVacations = computed(() => {
   }
 
   async function fetchVacationData(year, month) {
-  try {
-    const response = await axios.get(`vacation/list/${year}/${month}`);
-    if (response.status === 200) {
-      const vacationList = response.data;
-      // 모달이 열려 있더라도 전달받은 연도가 기존 lastRemainingYear 다르면 업데이트
-      if (lastRemainingYear.value !== year) {
-        myVacations.value = vacationList.filter(
-          (vac) => vac.MEMBERSEQ === userStore.user.id
-        );
-        lastRemainingYear.value = year;
-        // modalMonth는 그대로 유지 (월은 모달 업데이트 조건에서 제외)
+    try {
+      const response = await axios.get(`vacation/list/${year}/${month}`);
+      if (response.status === 200) {
+        const vacationList = response.data;
+        if (lastRemainingYear.value !== year) {
+          // 로그인한 사원의 휴가만 저장
+          myVacations.value = vacationList.filter(
+            (vac) => vac.MEMBERSEQ === userStore.user.id
+          );
+          lastRemainingYear.value = year;
+        }
+        const events = vacationList
+          .filter((vac) => !vac.LOCVACRMM)
+          .map((vac) => {
+            let dateStr = vac.LOCVACUDT ? vac.LOCVACUDT.split("T")[0] : "";
+            let backgroundColor = userColors.value[vac.MEMBERSEQ] || "#FFFFFF";
+            return {
+              title: getVacationType(vac.LOCVACTYP),
+              start: dateStr,
+              backgroundColor,
+              classNames: [getVacationTypeClass(vac.LOCVACTYP)],
+              saved: true,
+              memberSeq: vac.MEMBERSEQ,  // 이벤트 소유자 정보
+            };
+          })
+          .filter((event) => event.start);
+        return events;
+      } else {
+        console.warn("📌 휴가 데이터를 불러오지 못함");
+        return [];
       }
-      // 캘린더 이벤트 매핑
-      const events = vacationList
-        .filter((vac) => !vac.LOCVACRMM)
-        .map((vac) => {
-          let dateStr = vac.LOCVACUDT ? vac.LOCVACUDT.split("T")[0] : "";
-          let backgroundColor = userColors.value[vac.MEMBERSEQ] || "#FFFFFF";
-          return {
-            title: getVacationType(vac.LOCVACTYP),
-            start: dateStr,
-            backgroundColor,
-            classNames: [getVacationTypeClass(vac.LOCVACTYP)],
-            saved: true,
-          };
-        })
-        .filter((event) => event.start);
-      return events;
-    } else {
-      console.warn("📌 휴가 데이터를 불러오지 못함");
+    } catch (error) {
+      console.error("Error fetching vacation data:", error);
       return [];
     }
-  } catch (error) {
-    console.error("Error fetching vacation data:", error);
-    return [];
   }
-}
 
   async function saveVacationChanges() {
     const selectedDatesArray = Array.from(selectedDates.value);
@@ -416,6 +434,7 @@ const filteredReceivedVacations = computed(() => {
     const today = new Date();
     const year = today.getFullYear();
     const month = String(today.getMonth() + 1).padStart(2, "0");
+    await fetchVacationData(year, month);
     await loadCalendarData(year, month);
   });
   </script>

From 447d3807534c1317b20f0c0ae148f23b11ddef32 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Mon, 24 Feb 2025 14:54:41 +0900
Subject: [PATCH 03/12] =?UTF-8?q?kakao=20map=20api=20key=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.dev | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.env.dev b/.env.dev
index 99081c1..f608ba3 100644
--- a/.env.dev
+++ b/.env.dev
@@ -2,4 +2,5 @@ VITE_DOMAIN = http://localhost:5173/
 # VITE_LOGIN_URL = http://localhost:10325/ms/
 # VITE_FILE_URL = http://localhost:10325/ms/
 # VITE_API_URL = http://localhost:10325/api/
-VITE_API_URL = http://localhost:10325/test/
\ No newline at end of file
+VITE_API_URL = http://localhost:10325/test/
+VITE_KAKAO_MAP_KEY=6f092e8f45ee81186bb6d8408f66a492
\ No newline at end of file

From b4bde4313301dc1b08f5a545b2ea5a3651cda1fb Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Mon, 24 Feb 2025 14:54:58 +0900
Subject: [PATCH 04/12] =?UTF-8?q?kakao-maps=20=EB=9D=BC=EC=9D=B4=EB=B8=8C?=
 =?UTF-8?q?=EB=9F=AC=EB=A6=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json | 18 +++++++++++++++++-
 package.json      |  3 ++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index a398f1c..8e2f1c1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -30,7 +30,8 @@
         "vite-plugin-mkcert": "^1.17.6",
         "vue": "^3.5.13",
         "vue-flatpickr-component": "^11.0.5",
-        "vue-router": "^4.4.5"
+        "vue-router": "^4.4.5",
+        "vue3-kakao-maps": "^2.3.10"
       },
       "devDependencies": {
         "@eslint/js": "^9.14.0",
@@ -2544,6 +2545,12 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/kakao.maps.d.ts": {
+      "version": "0.1.40",
+      "resolved": "https://registry.npmjs.org/kakao.maps.d.ts/-/kakao.maps.d.ts-0.1.40.tgz",
+      "integrity": "sha512-nX69MB1ok04epe3OqS+/tEeWBbU31GSQbvDPJmQRRltzzqn6t4jBsO5v1nzalUjCKzwcH2CptOc767NZ7Hbu3g==",
+      "license": "MIT"
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "dev": true,
@@ -4142,6 +4149,15 @@
       "version": "6.6.4",
       "license": "MIT"
     },
+    "node_modules/vue3-kakao-maps": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/vue3-kakao-maps/-/vue3-kakao-maps-2.3.10.tgz",
+      "integrity": "sha512-vzzxvdw1ZtyID4clA/LFg++Qf1uTq49ksnL3ejqbp/rB+WVRrulSQ0ja+L929VFehbQY628lJPsp9KwxC6VrNA==",
+      "license": "MIT",
+      "dependencies": {
+        "kakao.maps.d.ts": "^0.1.39"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "dev": true,
diff --git a/package.json b/package.json
index 52c9503..2b5c030 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,8 @@
     "vite-plugin-mkcert": "^1.17.6",
     "vue": "^3.5.13",
     "vue-flatpickr-component": "^11.0.5",
-    "vue-router": "^4.4.5"
+    "vue-router": "^4.4.5",
+    "vue3-kakao-maps": "^2.3.10"
   },
   "devDependencies": {
     "@eslint/js": "^9.14.0",

From efa23d871f917eea2a4b89c7924305daef6702a0 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Mon, 24 Feb 2025 14:55:16 +0900
Subject: [PATCH 05/12] =?UTF-8?q?=EC=B9=B4=EC=B9=B4=EC=98=A4=20=EB=A7=B5?=
 =?UTF-8?q?=20=EC=82=AC=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/main.js b/src/main.js
index 05f6a5c..ccdad3b 100644
--- a/src/main.js
+++ b/src/main.js
@@ -6,10 +6,15 @@ import router from '@/router'
 import dayjs from '@p/dayjs'
 import ToastModal from '@c/modal/ToastModal.vue';
 import common from '@/common/common.js'
-   
+import { useKakao } from 'vue3-kakao-maps/@utils'
+
 const pinia = createPinia()
 pinia.use(piniaPersist)
 
+const kakaoApiKey = import.meta.env.VITE_KAKAO_MAP_KEY;
+
+useKakao(kakaoApiKey, ['services'])
+
 const app = createApp(App)
 app.use(router)
     .use(pinia)

From cd5d52557593682d155a8c451248430c3b76bc49 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Mon, 24 Feb 2025 14:55:36 +0900
Subject: [PATCH 06/12] =?UTF-8?q?=ED=94=84=EB=A1=9C=EC=A0=9D=ED=8A=B8=20?=
 =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=EC=A7=80=EB=8F=84=20=EA=B4=80=EB=A0=A8=20?=
 =?UTF-8?q?css=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/css/custom.css | 59 +++++++++++++++++++++++++++++++++++++------
 1 file changed, 51 insertions(+), 8 deletions(-)

diff --git a/public/css/custom.css b/public/css/custom.css
index c4bb01d..17633c9 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -44,13 +44,56 @@
   margin-right: auto;
 }
 
-  .grayscaleImg {
-    filter: grayscale(100%);
-  }
+.grayscaleImg {
+  filter: grayscale(100%);
+}
   
-  
-   /* scrollbar 안보이게 */
-  .scrollbar-none {
-    scrollbar-width: none; 
+/* scrollbar 안보이게 */
+.scrollbar-none {
+  scrollbar-width: none; 
+}
+
+/* project list */
+
+.map {
+  top: -160px;
+  left: -5px; 
+}
+
+@keyframes sparkle {
+  0% {
+    color: #ffcc00;
   }
-  
\ No newline at end of file
+  50% {
+    color: red;
+  }
+  100% {
+    color: #ffcc00;
+  }
+}
+
+.bxs-map {
+  animation: sparkle 1s infinite; /* 1초마다 반복 */
+}
+
+.popover-close {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  z-index: 2;
+  background-color: #fff !important;
+  border-radius: 0.5rem;
+  opacity: 1;
+  padding: 0.635rem;
+  box-shadow: 0 0.125rem 0.25rem rgba(161, 172, 184, 0.4);
+  transition: all 0.23s ease 0.1s;
+  transform: translate(23px, -25px);
+}
+
+.popover-close:hover  {
+  opacity: 1;
+  outline: none;
+  transform: translate(20px, -20px);
+}
+
+/* project list end */
\ No newline at end of file

From 99d95cf5a1ac490ad3fa4bb0606a6f855d889719 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Mon, 24 Feb 2025 14:55:55 +0900
Subject: [PATCH 07/12] =?UTF-8?q?=EC=A3=BC=EC=86=8C=20=EC=A7=80=EB=8F=84?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/ProjectCard.vue        | 96 ++++++++++++++++++----
 src/components/projectlist/ProjectList.vue |  7 +-
 2 files changed, 85 insertions(+), 18 deletions(-)

diff --git a/src/components/list/ProjectCard.vue b/src/components/list/ProjectCard.vue
index 25195a1..4ee953d 100644
--- a/src/components/list/ProjectCard.vue
+++ b/src/components/list/ProjectCard.vue
@@ -26,25 +26,57 @@
                 </div>
                 <!-- 주소 -->
                 <div class="d-flex flex-column flex-sm-row align-items-center pb-2">
-                    <i class="bx bxs-map"></i>
-                    <div class="ms-2">주소</div>
-                    <div class="ms-12">{{ address }}</div>
+                    <div class="d-flex" @click.stop="isPopoverVisible = !isPopoverVisible">
+                        <i
+                            class="bx bxs-map cursor-pointer"
+                            ref="mapIconRef"
+                        ></i>
+                        <div class="ms-2">주소</div>
+                    </div>
+                    <div class="ms-12 position-relative">
+                        {{ address }} {{ addressdtail }}
+                        <!-- 팝오버 -->
+                        <div
+                        v-if="isPopoverVisible"
+                        class="position-absolute w-100 map text-end"
+                        >
+                        <button type="button" class="btn-close popover-close" @click.stop="isPopoverVisible = !isPopoverVisible"></button>
+                            <div class="card">
+                                <div class="card-body p-1">
+                                    <KakaoMap
+                                        v-if="coordinates"
+                                        :lat="coordinates.lat"
+                                        :lng="coordinates.lng"
+                                        :draggable="false"
+                                        class="w-100 h-px-200"
+                                        >
+                                        <KakaoMapMarker
+                                            :lat="coordinates.lat"
+                                            :lng="coordinates.lng"
+                                        />
+                                    </KakaoMap>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                     <button type="button" class="btn ms-auto text-white" :style="`background-color: ${projctCol} !important;`" @click.stop="openModal">log</button>
                 </div>
             </div>
         </div>
     </div>
-    <CenterModal :display="isModalOpen" @close="closeModal" >
+    <CenterModal :display="isModalOpen" @close="closeModal">
         <template #title> Log </template>
         <template #body>
-            <div class="border border-3 rounded p-5 ms-4 mt-2" v-if="logData">
+            <div class="ms-4 mt-2 border p-3" v-if="logData">
                 <p class="mb-1">{{ logData.createDate }}</p>
-                <strong class="">[{{ logData.creator }}] 프로젝트 등록</strong>
+                <strong>[{{ logData.creator }}] 프로젝트 등록</strong>
             </div>
 
-            <div class="border border-3 rounded p-5 ms-4 mt-2" v-if="logData?.updateDate">
-                <p class="mb-1">{{ logData.updateDate }}</p>
-                <strong>[{{ logData.updater }}] 프로젝트 수정</strong>
+            <div class="log-item" v-if="logData?.updateDate">
+                <div class="ms-4 mt-2 border p-3">
+                    <p class="mb-1">{{ logData.updateDate }}</p>
+                    <strong>[{{ logData.updater }}] 프로젝트 수정</strong>
+                </div>
             </div>
 
         </template>
@@ -55,10 +87,11 @@
 </template>
 
 <script setup>
-import { defineProps, ref } from 'vue';
+import { defineProps, onMounted, ref } from 'vue';
 import UserList from '@c/user/UserList.vue';
 import CenterModal from '@c/modal/CenterModal.vue';
 import $api from '@api';
+import { KakaoMap, KakaoMapMarker } from 'vue3-kakao-maps';
 
 // Props 정의
 const props = defineProps({
@@ -83,6 +116,10 @@ const props = defineProps({
         type: String,
         required: true,
     },
+    addressdtail: {
+        type: String,
+        required: true,
+    },
     projctSeq: {
         type: Number,
         required: false
@@ -98,13 +135,13 @@ defineEmits(['click']);
 const isModalOpen = ref(false);
 const logData = ref(null);
 
+const isPopoverVisible = ref(false);
+const mapIconRef = ref(null);
+const coordinates = ref(null);
+
 const fetchLogData = async () => {
-    try {
-        const response = await $api.get(`project/log/${props.projctSeq}`);
-        logData.value = response.data.data.length > 0 ? response.data.data[0] : {};
-    } catch (error) {
-        console.error('로그 정보 조회 실패:', error);
-    }
+    const response = await $api.get(`project/log/${props.projctSeq}`);
+    logData.value = response.data.data.length > 0 ? response.data.data[0] : {};
 };
 
 const openModal = async () => {
@@ -116,5 +153,32 @@ const closeModal = () => {
     isModalOpen.value = false;
 };
 
+
+// 주소를 좌표로 변환하는 함수
+const convertAddressToCoordinates = () => {
+    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
+            };
+        }
+    });
+};
+
+// 컴포넌트 마운트 시 주소 변환
+onMounted(() => {
+    convertAddressToCoordinates();
+});
+
+
 </script>
 
diff --git a/src/components/projectlist/ProjectList.vue b/src/components/projectlist/ProjectList.vue
index 6841e08..9157c79 100644
--- a/src/components/projectlist/ProjectList.vue
+++ b/src/components/projectlist/ProjectList.vue
@@ -17,7 +17,8 @@
                 :description="post.PROJCTDES"
                 :strdate="post.PROJCTSTR"
                 :enddate="post.PROJCTEND"
-                :address="post.PROJCTARR + ' ' + post.PROJCTDTL"
+                :address="post.PROJCTARR"
+                :addressdtail="post.PROJCTDTL"
                 :projctSeq="post.PROJCTSEQ"
                 :projctCol="post.projctcolor"
             />
@@ -258,6 +259,7 @@ const handleAddressUpdate = addressData => {
     postcode.value = addressData.postcode;
 };
 
+// 프로젝트 등록
 const handleCreate = async () => {
     nameAlert.value = name.value.trim() === '';
     addressAlert.value = address.value.trim() === '';
@@ -330,6 +332,7 @@ const updateAddress = (addressData) => {
     };
 };
 
+// 프로젝트 수정
 const handleUpdate = () => {
     if (!hasChanges.value) {
         toastStore.onToast('변경된 내용이 없습니다.', 'e');
@@ -345,7 +348,7 @@ const handleUpdate = () => {
         projctZip: selectedProject.value.PROJCTZIP,
         projctStr: selectedProject.value.PROJCTSTR,
         projctEnd: selectedProject.value.PROJCTEND || null,
-        projctDes: selectedProject.value.PROJCTDES,
+        projctDes: selectedProject.value.PROJCTDES || null,
         projctUmb: user.value.name,
         originalColor: originalColor.value === selectedProject.value.PROJCTCOL ? null : originalColor.value
     }).then(res => {

From 10692e9ddda69cd29d5b02fa84289930a49f1ed7 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Mon, 24 Feb 2025 15:25:17 +0900
Subject: [PATCH 08/12] =?UTF-8?q?=EC=97=94=ED=84=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/user/LoginForm.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/user/LoginForm.vue b/src/components/user/LoginForm.vue
index 90b4859..caea1af 100644
--- a/src/components/user/LoginForm.vue
+++ b/src/components/user/LoginForm.vue
@@ -1,4 +1,5 @@
 <template>
+    <form @submit.prevent="handleSubmit">
         <div class="col-xl-12">
             <UserFormInput title="아이디" name="id" :is-alert="idAlert" :useInputGroup="true" @update:data="handleIdChange" :value="id" />
 
@@ -12,7 +13,7 @@
             />
 
             <div class="d-grid gap-2 mt-7 mb-5">
-                <button type="submit" @click="handleSubmit" class="btn btn-primary">로그인</button>
+                <button type="submit" class="btn btn-primary">로그인</button>
                 <p v-if="errorMessage" class="invalid-feedback d-block mb-0">{{ errorMessage }}</p>
             </div>
 
@@ -25,6 +26,7 @@
                 <RouterLink class="text-dark fw-bold" to="/pw">비밀번호 찾기</RouterLink>
             </div>
         </div>
+    </form>
 </template>
 
 <script setup>

From 55e5ebc2b32eeeb965e9462b8a6a3b6b81a6760f Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Mon, 24 Feb 2025 15:26:45 +0900
Subject: [PATCH 09/12] map

---
 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 4ee953d..8e1b6c4 100644
--- a/src/components/list/ProjectCard.vue
+++ b/src/components/list/ProjectCard.vue
@@ -39,6 +39,7 @@
                         <div
                         v-if="isPopoverVisible"
                         class="position-absolute w-100 map text-end"
+                        @click.stop
                         >
                         <button type="button" class="btn-close popover-close" @click.stop="isPopoverVisible = !isPopoverVisible"></button>
                             <div class="card">
@@ -47,7 +48,6 @@
                                         v-if="coordinates"
                                         :lat="coordinates.lat"
                                         :lng="coordinates.lng"
-                                        :draggable="false"
                                         class="w-100 h-px-200"
                                         >
                                         <KakaoMapMarker

From efbeee855ad53ac5263190c757ab2515da888e8d Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Mon, 24 Feb 2025 15:29:32 +0900
Subject: [PATCH 10/12] =?UTF-8?q?=ED=9C=B4=EA=B0=80=EA=B4=80=EB=A6=AC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/vacation/ProfileList.vue   |   2 +-
 src/views/vacation/VacationManagement.vue | 150 +++++++++++++---------
 2 files changed, 93 insertions(+), 59 deletions(-)

diff --git a/src/components/vacation/ProfileList.vue b/src/components/vacation/ProfileList.vue
index fb483c4..9e06036 100644
--- a/src/components/vacation/ProfileList.vue
+++ b/src/components/vacation/ProfileList.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="card-body d-flex justify-content-center">
+    <div class="card-body d-flex justify-content-center m-n5">
       <ul class="list-unstyled d-flex flex-wrap align-items-center gap-2 mb-0 mt-2">
         <li
           v-for="(user, index) in sortedUserList"
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index 5124a05..3de6452 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -5,12 +5,16 @@
           <!-- Sidebar: 사이드바 영역 -->
           <div class="col-3 app-calendar-sidebar border-end" id="app-calendar-sidebar">
             <div class="sidebar-content">
-              <!-- 사원 프로필 리스트 -->
+              <div class="sidebar-actions text-center my-3">
+                <HalfDayButtons
+                  @toggleHalfDay="toggleHalfDay"
+                  @addVacationRequests="saveVacationChanges"
+                />
+              </div>
               <ProfileList
                 @profileClick="handleProfileClick"
                 :remainingVacationData="remainingVacationData"
               />
-              <!-- 모달들은 화면 오버레이로 동작하므로 사이드바 내부에 두어도 무방 -->
               <VacationModal
                 v-if="isModalOpen"
                 :isOpen="isModalOpen"
@@ -28,24 +32,23 @@
                 @updateVacation="fetchRemainingVacation"
               />
             </div>
-            <div class="sidebar-actions text-center my-3">
-              <!-- 액션 버튼 -->
-              <HalfDayButtons
-                @toggleHalfDay="toggleHalfDay"
-                @addVacationRequests="saveVacationChanges"
-              />
-            </div>
           </div>
 
           <!-- Main Content: 캘린더 영역 -->
           <div class="col app-calendar-content">
             <div class="card shadow-none border-0">
-              <div class="card-body pb-0">
+              <div class="card-body pb-0" style="position: relative;">
                 <full-calendar
                   ref="fullCalendarRef"
                   :options="calendarOptions"
                   class="flatpickr-calendar-only"
                 />
+                <!-- 숨겨진 데이트피커 인풋 -->
+                <input
+                  ref="calendarDatepicker"
+                  type="text"
+                  style="display: none; position: absolute;"
+                />
               </div>
             </div>
           </div>
@@ -60,7 +63,12 @@
   import FullCalendar from "@fullcalendar/vue3";
   import dayGridPlugin from "@fullcalendar/daygrid";
   import interactionPlugin from "@fullcalendar/interaction";
+  // Flatpickr 및 MonthSelect 플러그인 임포트
+  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";
+
   import "@/assets/css/app-calendar.css";
   import "bootstrap-icons/font/bootstrap-icons.css";
   import HalfDayButtons from "@c/button/HalfDayButtons.vue";
@@ -75,11 +83,11 @@
   const userListStore = useUserStore();
   const userList = ref([]);
   const userColors = ref({});
-  const myVacations = ref([]); // 전체 "사용한 연차" 목록 (로그인한 사원의 휴가만)
-  const receivedVacations = ref([]); // 전체 "받은 연차" 목록
+  const myVacations = ref([]); // 로그인한 사원의 휴가
+  const receivedVacations = ref([]);
   const isModalOpen = ref(false);
   const remainingVacationData = ref({});
-  const modalYear  = ref(new Date().getFullYear());
+
   const lastRemainingYear = ref(new Date().getFullYear());
   const lastRemainingMonth = ref(String(new Date().getMonth() + 1).padStart(2, "0"));
   const isGrantModalOpen = ref(false);
@@ -94,8 +102,9 @@
   const holidayDates = ref(new Set());
   const fetchedEvents = ref([]);
 
-  // 추가: 토글 상태 변수 (필요 시 사용 가능)
-  const toggledDates = ref(new Set());
+  // 데이트피커 인풋 ref
+  const calendarDatepicker = ref(null);
+  let fpInstance = null;
 
   const calendarOptions = reactive({
     plugins: [dayGridPlugin, interactionPlugin],
@@ -115,9 +124,51 @@
   onMounted(async () => {
     await userStore.userInfo();
     await fetchRemainingVacation();
-    // 초기 vacation history도 가져오기
     const currentYear = new Date().getFullYear();
     await fetchVacationHistory(currentYear);
+
+    // Flatpickr 초기화 (달 선택 모드)
+    fpInstance = flatpickr(calendarDatepicker.value, {
+      dateFormat: "Y-m",
+      plugins: [
+        new monthSelectPlugin({
+          shorthand: true,
+          dateFormat: "Y-m",
+          altFormat: "F Y"
+        })
+      ],
+      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) 클릭 시 데이트피커 열기
+    nextTick(() => {
+      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 = 'none';
+          dpEl.style.position = 'absolute';
+          dpEl.style.top = (rect.bottom + window.scrollY -120) + 'px';
+        //   dpEl.style.left = (rect.left) + 'px';
+          dpEl.style.width = '0px'; // 원하는 크기로 조정
+          dpEl.style.fontSize = '0.9em';
+          fpInstance.open();
+        });
+      }
+    });
   });
 
   // 연차 내역 API (초기 호출용)
@@ -137,7 +188,6 @@
     }
   }
 
-  // lastRemainingYear 값이 변경될 때마다 해당 연도의 연차 내역 재조회
   watch(lastRemainingYear, async (newYear, oldYear) => {
     await fetchVacationHistory(newYear);
   });
@@ -156,27 +206,18 @@
     }
   };
 
-  // 프로필 클릭 시 연차 내역 가져오기
   const handleProfileClick = async (user) => {
     try {
-      if (isModalOpen.value) {
-        isModalOpen.value = false;
-        return;
-      }
-      if (isGrantModalOpen.value) {
-        isGrantModalOpen.value = false;
-        return;
-      }
+      // 열린 모달이 있으면 모두 닫음 후 새 모달 열기
+      isModalOpen.value = false;
+      isGrantModalOpen.value = false;
       if (user.MEMBERSEQ === userStore.user.id) {
-        const year = new Date().getFullYear();
-        await fetchVacationHistory(year);
+        const displayedYear = lastRemainingYear.value;
+        await fetchVacationHistory(displayedYear);
         isModalOpen.value = true;
-        lastRemainingYear.value = year;
-        isGrantModalOpen.value = false;
       } else {
         selectedUser.value = user;
         isGrantModalOpen.value = true;
-        isModalOpen.value = false;
       }
     } catch (error) {
       console.error("🚨 연차 데이터 불러오기 실패:", error);
@@ -220,29 +261,23 @@
     return vacationCodeMap.value[typeCode] || "기타";
   };
 
-  // computed: lastRemainingYear과 일치하는 항목만 필터링
   const filteredMyVacations = computed(() => {
-    const filtered = myVacations.value.filter(vac => {
-      const dateStr = vac.date || vac.LOCVACUDT;
+    return myVacations.value.filter(vac => {
+      const dateStr = vac.date;
       const year = dateStr ? dateStr.split("T")[0].substring(0, 4) : null;
-      console.log("vacation year:", year, "lastRemainingYear:", lastRemainingYear.value);
       return year === String(lastRemainingYear.value);
     });
-    console.log("filteredMyVacations:", filtered);
-    return filtered;
   });
 
   const filteredReceivedVacations = computed(() => {
     return receivedVacations.value.filter(vac => {
-      const dateStr = vac.date || vac.LOCVACUDT;
+      const dateStr = vac.date;
       const year = dateStr ? dateStr.split("T")[0].substring(0, 4) : null;
-      console.log("vacation year:", year, "lastRemainingYear:", lastRemainingYear.value);
       return dateStr && year === String(lastRemainingYear.value);
     });
   });
 
   function updateCalendarEvents() {
-    // selectedDates에서 "delete"가 아닌 경우에 대해 이벤트 생성
     const selectedEvents = Array.from(selectedDates.value)
       .filter(([date, type]) => type !== "delete")
       .map(([date, type]) => ({
@@ -254,8 +289,6 @@
         classNames: [getVacationTypeClass(type), "selected-event"]
       }));
 
-    // fetchedEvents에서, 만약 해당 날짜가 "delete" 상태라면
-    // 로그인한 사용자의(내) 이벤트만 제거하고, 다른 사용자의 이벤트는 그대로 둠.
     const filteredFetchedEvents = fetchedEvents.value.filter(event => {
       if (event.saved && selectedDates.value.get(event.start) === "delete") {
         if (event.memberSeq === userStore.user.id) {
@@ -287,15 +320,12 @@
     ) {
       return;
     }
-    // 내 휴가 여부: LOCVACUDT의 앞 10자가 clickedDateStr과 같고, LOCVACRMM가 없거나 빈 문자열인 경우
     const isMyVacation = myVacations.value.some(vac => {
       const vacDate = vac.date ? String(vac.date).substring(0, 10) : "";
-      return vacDate === clickedDateStr &&
-             (!vac.LOCVACRMM || String(vac.LOCVACRMM).trim() === "");
+      return vacDate === clickedDateStr && !vac.receiverId;
     });
 
     if (isMyVacation) {
-      // 내 휴가인 경우: selectedDates에 "delete" 상태를 토글 (내 이벤트만 영향을 줌)
       if (selectedDates.value.get(clickedDateStr) === "delete") {
         selectedDates.value.delete(clickedDateStr);
       } else {
@@ -305,9 +335,7 @@
       return;
     }
 
-    // 내 휴가가 없는 날짜: 일반 선택/토글 처리
     if (selectedDates.value.has(clickedDateStr)) {
-      console.log("일반 날짜 토글 off: 기존 선택 해제");
       selectedDates.value.delete(clickedDateStr);
       updateCalendarEvents();
       return;
@@ -315,7 +343,6 @@
     const type = halfDayType.value
       ? (halfDayType.value === "AM" ? "700101" : "700102")
       : "700103";
-    console.log("일반 날짜 토글 on: 선택 및 타입", type);
     selectedDates.value.set(clickedDateStr, type);
     halfDayType.value = null;
     updateCalendarEvents();
@@ -331,7 +358,6 @@
       if (response.status === 200) {
         const vacationList = response.data;
         if (lastRemainingYear.value !== year) {
-          // 로그인한 사원의 휴가만 저장
           myVacations.value = vacationList.filter(
             (vac) => vac.MEMBERSEQ === userStore.user.id
           );
@@ -348,7 +374,7 @@
               backgroundColor,
               classNames: [getVacationTypeClass(vac.LOCVACTYP)],
               saved: true,
-              memberSeq: vac.MEMBERSEQ,  // 이벤트 소유자 정보
+              memberSeq: vac.MEMBERSEQ,
             };
           })
           .filter((event) => event.start);
@@ -368,18 +394,18 @@
     const vacationsToAdd = selectedDatesArray
       .filter(([date, type]) => type !== "delete")
       .filter(([date, type]) =>
-        !myVacations.value.some(vac => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(date)) ||
-        myVacations.value.some(vac => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(date) && vac.LOCVACRMM)
+        !myVacations.value.some(vac => vac.date && vac.date.startsWith(date)) ||
+        myVacations.value.some(vac => vac.date && vac.date.startsWith(date) && vac.receiverId)
       )
       .map(([date, type]) => ({ date, type }));
     const vacationsToDelete = myVacations.value
       .filter(vac => {
-        if (!vac.LOCVACUDT) return false;
-        const date = vac.LOCVACUDT.split("T")[0];
-        return selectedDates.value.get(date) === "delete" && !vac.LOCVACRMM;
+        if (!vac.date) return false;
+        const date = vac.date.split("T")[0];
+        return selectedDates.value.get(date) === "delete" && !vac.receiverId;
       })
       .map(vac => {
-        const id = vac.LOCVACSEQ;
+        const id = vac.id;
         return typeof id === "number" ? Number(id) : id;
       });
     try {
@@ -390,6 +416,9 @@
       if (response.data && response.data.status === "OK") {
         alert("✅ 휴가 변경 사항이 저장되었습니다.");
         await fetchRemainingVacation();
+        if (isModalOpen.value) {
+          await fetchVacationHistory(lastRemainingYear.value);
+        }
         const currentDate = fullCalendarRef.value.getApi().getDate();
         await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
         selectedDates.value.clear();
@@ -440,5 +469,10 @@
   </script>
 
   <style>
-  /* 스타일 정의 */
+  /* 기본 스타일은 그대로 두고, 데이트피커 인풋의 추가 스타일 정의 */
+  .fc-toolbar-title {
+    cursor: pointer;
+  }
+
+  /* 데이트피커 인풋은 Flatpickr에서 동적으로 스타일 적용됨 */
   </style>

From d4682bc362458b16bb4aeb439570e0cd6e144f5e Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Mon, 24 Feb 2025 15:44:47 +0900
Subject: [PATCH 11/12] =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EB=86=92=EC=9D=B4=20=EC=84=A4=EC=A0=95=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/TheTop.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/TheTop.vue b/src/layouts/TheTop.vue
index 9957c39..9d219e8 100644
--- a/src/layouts/TheTop.vue
+++ b/src/layouts/TheTop.vue
@@ -152,7 +152,7 @@
                 <!-- User -->
                 <li class="nav-item navbar-dropdown dropdown-user dropdown">
                     <a class="nav-link dropdown-toggle hide-arrow p-0" href="javascript:void(0);" data-bs-toggle="dropdown">
-                        <img v-if="user" :src="`${baseUrl}upload/img/profile/${user.profile}`" alt="Profile Image" class="w-px-40 h-auto rounded-circle" @error="$event.target.src = '/img/icons/icon.png'"/>
+                        <img v-if="user" :src="`${baseUrl}upload/img/profile/${user.profile}`" alt="Profile Image" class="w-px-40 h-px-40 rounded-circle" @error="$event.target.src = '/img/icons/icon.png'"/>
                     </a>
                     <ul class="dropdown-menu dropdown-menu-end">
                         <li>

From b0735cfec054ca2681a86fb152cf3f07baabea6e Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Tue, 25 Feb 2025 12:29:35 +0900
Subject: [PATCH 12/12] =?UTF-8?q?=ED=9C=B4=EA=B0=80=EA=B4=80=EB=A6=AC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EA=B3=B5=ED=86=B5=ED=8F=AC?=
 =?UTF-8?q?=EB=A7=B7=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/axios-interceptor.js           |  2 +-
 src/common/formattedDate.js               | 13 +++++++++++++
 src/components/modal/VacationModal.vue    |  9 +--------
 src/views/vacation/VacationManagement.vue |  9 ---------
 vite.config.js                            | 12 ++++++------
 5 files changed, 21 insertions(+), 24 deletions(-)
 create mode 100644 src/common/formattedDate.js

diff --git a/src/common/axios-interceptor.js b/src/common/axios-interceptor.js
index c4163dd..a6ae5a1 100644
--- a/src/common/axios-interceptor.js
+++ b/src/common/axios-interceptor.js
@@ -3,7 +3,7 @@ import { useRoute } from 'vue-router';
 import { useToastStore } from '@s/toastStore';
 
 const $api = axios.create({
-    baseURL: 'https://192.168.0.251:10325/api/',
+    baseURL: 'http://localhost:10325/api/',
     timeout: 300000,
     withCredentials: true,
 });
diff --git a/src/common/formattedDate.js b/src/common/formattedDate.js
new file mode 100644
index 0000000..01956d6
--- /dev/null
+++ b/src/common/formattedDate.js
@@ -0,0 +1,13 @@
+/** 날짜 포맷1 (YYYY-MM-DD HH:MM) */
+export const formattedDate = (dateString) => {
+    if (!dateString) return "날짜 없음";
+    const dateObj = new Date(dateString);
+    return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')} ${String(dateObj.getHours()).padStart(2, '0')}:${String(dateObj.getMinutes()).padStart(2, '0')}`;
+};
+
+/** 날짜 포맷2 (YYYY-MM-DD) */
+export const formatDate = (dateString) => {
+    if (!dateString) return "날짜 없음";
+    const dateObj = new Date(dateString);
+    return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')}`;
+};
diff --git a/src/components/modal/VacationModal.vue b/src/components/modal/VacationModal.vue
index c8e22f2..d57e482 100644
--- a/src/components/modal/VacationModal.vue
+++ b/src/components/modal/VacationModal.vue
@@ -41,6 +41,7 @@
 
 <script setup>
 import { defineProps, defineEmits, computed } from "vue";
+import { formatDate } from '@/common/formattedDate.js';
 
 const props = defineProps({
   isOpen: Boolean,
@@ -130,14 +131,6 @@ const mergedVacations = computed(() => {
   return all;
 });
 
-/** 날짜 포맷 (YYYY-MM-DD) */
-const formatDate = (dateString) => {
-  if (!dateString) return "";
-  // 만약 dateString이 "YYYY-MM-DD" 형식이라면 그대로 반환
-  // 혹은 "YYYY-MM-DD..." 라면 앞 10자만 잘라 반환
-  return dateString.substring(0, 10);
-};
-
 
 /** 모달 닫기 */
 const closeModal = () => {
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index 3de6452..004c2a0 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -156,15 +156,6 @@
       if (titleEl) {
         titleEl.style.cursor = 'pointer';
         titleEl.addEventListener('click', () => {
-          // 제목 바로 아래에 데이트피커를 배치
-          const rect = titleEl.getBoundingClientRect();
-          const dpEl = calendarDatepicker.value;
-          dpEl.style.display = 'none';
-          dpEl.style.position = 'absolute';
-          dpEl.style.top = (rect.bottom + window.scrollY -120) + 'px';
-        //   dpEl.style.left = (rect.left) + 'px';
-          dpEl.style.width = '0px'; // 원하는 크기로 조정
-          dpEl.style.fontSize = '0.9em';
           fpInstance.open();
         });
       }
diff --git a/vite.config.js b/vite.config.js
index 6d58ffd..feace45 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -2,7 +2,7 @@ import { fileURLToPath, URL } from 'node:url';
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import vueDevTools from 'vite-plugin-vue-devtools';
-import mkcert from 'vite-plugin-mkcert';
+//import mkcert from 'vite-plugin-mkcert';
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -10,11 +10,11 @@ export default defineConfig({
         vue(),
         vueDevTools(),
         // 자신의 로컬 서버에 연결하려면 이부분 주석처리
-        mkcert({
-            // SSL 키 등록
-            keyFile: '/localhost-key.pem',
-            certFile: '/localhost.pem',
-        }),
+        // mkcert({
+        //     // SSL 키 등록
+        //     keyFile: '/localhost-key.pem',
+        //     certFile: '/localhost.pem',
+        // }),
     ],
     resolve: {
         alias: {