board-comment 다시머지지

src/components/board/BoardProfile.vue

@@ -61,7 +61,7 @@ const props = defineProps({
     },
     profileName: {
         type: String,
-        default: null,
+        default: '익명',
     },
     unknown: {
         type: Boolean,

src/views/board/BoardList.vue

@@ -61,7 +61,7 @@
                                         📌 {{ notice.title }}
                                         <i v-if="notice.img" class="bi bi-image me-1"></i>
                                         <i v-if="notice.hasAttachment" class="bi bi-paperclip"></i>
-                                        <span v-if="isNewPost(notice.date)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
+                                        <span v-if="isNewPost(notice.rawDate)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
                                     </td>
                                     <td class="text-center">{{ notice.author }}</td>
                                     <td class="text-center">{{ notice.date }}</td>
@@ -78,7 +78,7 @@
                                     {{ post.title }}
                                     <i v-if="post.img" class="bi bi-image me-1"></i>
                                     <i v-if="post.hasAttachment" class="bi bi-paperclip"></i>
-                                    <span v-if="isNewPost(post.date)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
+                                    <span v-if="isNewPost(post.rawDate)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
                                 </td>
                                 <td class="text-center">{{ post.author }}</td>
                                 <td class="text-center">{{ post.date }}</td>
@@ -199,6 +199,7 @@ const fetchGeneralPosts = async (page = 1) => {
                 id: totalPosts - ((page - 1) * selectedSize.value) - index,
                 title: post.title,
                 author: post.author || '익명',
+                rawDate: post.date,
                 date: formatDate(post.date), // 날짜 변환 적용
                 views: post.cnt || 0,
                 hasAttachment: post.hasAttachment || false,
@@ -239,6 +240,7 @@ const fetchNoticePosts = async () => {
                 title: post.title,
                 author: post.author || '관리자',
                 date: formatDate(post.date),
+                rawDate: post.date,
                 views: post.cnt || 0,
                 hasAttachment: post.hasAttachment || false,
                 img: post.firstImageUrl || null

src/views/board/BoardView.vue

@@ -149,7 +149,7 @@ const comments = ref([]);
 const route = useRoute();
 const router = useRouter();
 const currentBoardId = ref(Number(route.params.id));
-const unknown = computed(() => profileName.value === null);
+const unknown = computed(() => profileName.value === '익명');
 const currentUserId = ref('김자바'); // 현재 로그인한 사용자 id
 const authorId = ref(null); // 작성자 id
 
@@ -190,7 +190,7 @@ const fetchBoardDetails = async () => {
         // API 응답 데이터 반영
         // const boardDetail = data.boardDetail || {};
 
-        profileName.value = data.author || null;
+        profileName.value = data.author || '익명';
 
         // 익명확인하고 싶을때
         // profileName.value = 'null;
@@ -277,7 +277,7 @@ const fetchComments = async (page  = 1) => {
             commentId: comment.LOCCMTSEQ, // 댓글 ID
             boardId: comment.LOCBRDSEQ,
             parentId: comment.LOCCMTPNT, // 부모 ID
-            author: comment.author || null,
+            author: comment.author || '익명',
             content: comment.LOCCMTRPY,
             likeCount: comment.likeCount || 0,
             dislikeCount: comment.dislikeCount || 0,

src/views/vacation/VacationManagement.vue

@@ -10,11 +10,12 @@
                   :remainingVacationData="remainingVacationData"
                 />
                 <div class="card-body w-75 p-3 align-self-center">
+                  <!-- 모달에 필터링된 연차 목록 전달 -->
                   <VacationModal
                     v-if="isModalOpen"
                     :isOpen="isModalOpen"
-                    :myVacations="myVacations"
+                    :myVacations="filteredMyVacations"
-                    :receivedVacations="receivedVacations"
+                    :receivedVacations="filteredReceivedVacations"
                     :userColors="userColors"
                     @close="isModalOpen = false"
                   />
@@ -46,46 +47,47 @@
   </template>
 
   <script setup>
+  import { reactive, ref, onMounted, nextTick, computed } from "vue";
+  import axios from "@api";
   import FullCalendar from "@fullcalendar/vue3";
   import dayGridPlugin from "@fullcalendar/daygrid";
   import interactionPlugin from "@fullcalendar/interaction";
   import "flatpickr/dist/flatpickr.min.css";
   import "@/assets/css/app-calendar.css";
-import { reactive, ref, onMounted, nextTick } from "vue";
-import axios from "@api";
   import "bootstrap-icons/font/bootstrap-icons.css";
   import HalfDayButtons from "@c/button/HalfDayButtons.vue";
   import ProfileList from "@c/vacation/ProfileList.vue";
-import { useUserStore } from "@s/userList";
+  import VacationModal from "@c/modal/VacationModal.vue";
-import VacationModal from "@c/modal/VacationModal.vue"
-import { useUserInfoStore } from "@s/useUserInfoStore";
   import VacationGrantModal from "@c/modal/VacationGrantModal.vue";
+  import { useUserStore } from "@s/userList";
+  import { useUserInfoStore } from "@s/useUserInfoStore";
   import { fetchHolidays } from "@c/calendar/holiday.js";
 
   const userStore = useUserInfoStore();
   const userListStore = useUserStore();
   const userList = ref([]);
   const userColors = ref({});
-const myVacations = ref([]); // 내가 사용한 연차 목록
+  const myVacations = ref([]); // 전체 "사용한 연차" 목록
-const receivedVacations = ref([]); // 내가 받은 연차 목록
+  const receivedVacations = ref([]); // 전체 "받은 연차" 목록
   const isModalOpen = ref(false);
   const remainingVacationData = ref({});
+  // 모달을 열 때 기준 연도 (모달에 표시할 연도)
+  const modalYear  = ref(new Date().getFullYear());
+  const modalMonth = ref(String(new Date().getMonth() + 1).padStart(2, "0"));
+  const lastRemainingYear = ref(new Date().getFullYear());
 
   const isGrantModalOpen = ref(false);
   const selectedUser = ref(null);
 
-// FullCalendar 관련 참조 및 데이터
+  // FullCalendar 관련
   const fullCalendarRef = ref(null);
-const calendarEvents = ref([]); // 최종적으로 FullCalendar에 표시할 이벤트 (API 이벤트 + 선택 이벤트)
+  const calendarEvents = ref([]);
-const selectedDates = ref(new Map()); // 사용자가 클릭한 날짜 및 타입
+  const selectedDates = ref(new Map());
   const halfDayType = ref(null);
-const vacationCodeMap = ref({}); // 휴가 코드명 저장용
+  const vacationCodeMap = ref({});
-
-// 공휴일 날짜(YYYY-MM-DD 형식)를 저장 (클릭 불가 처리용)
   const holidayDates = ref(new Set());
-const fetchedEvents = ref([]); // API에서 불러온 이벤트 (휴가, 공휴일)
+  const fetchedEvents = ref([]);
 
-// FullCalendar 옵션 객체 (events에 calendarEvents를 지정)
   const calendarOptions = reactive({
     plugins: [dayGridPlugin, interactionPlugin],
     initialView: "dayGridMonth",
@@ -124,21 +126,21 @@ const fetchRemainingVacation = async () => {
   const handleProfileClick = async (user) => {
     try {
       if (user.MEMBERSEQ === userStore.user.id) {
-      // 내 프로필을 클릭한 경우
         const response = await axios.get(`vacation/history`);
-
         if (response.status === 200 && response.data) {
           myVacations.value = response.data.data.usedVacations || [];
           receivedVacations.value = response.data.data.receivedVacations || [];
-        isModalOpen.value = true; // 내 연차 모달 열기
+          isModalOpen.value = true;
+          // 모달을 열 때 기준 연도와 기준 월 갱신
+          modalYear.value = new Date().getFullYear();
+          modalMonth.value = String(new Date().getMonth() + 1).padStart(2, "0");
           isGrantModalOpen.value = false;
         } else {
           console.warn("❌ 연차 내역을 불러오지 못했습니다.");
         }
       } else {
-      // 다른 사람의 프로필을 클릭한 경우
         selectedUser.value = user;
-      isGrantModalOpen.value = true; // 연차 부여 모달 열기
+        isGrantModalOpen.value = true;
         isModalOpen.value = false;
       }
     } catch (error) {
@@ -150,12 +152,10 @@ const fetchUserList = async () => {
     try {
       await userListStore.fetchUserList();
       userList.value = userListStore.userList;
-
       if (!userList.value.length) {
         console.warn("📌 사용자 목록이 비어 있음!");
         return;
       }
-
       userColors.value = {};
       userList.value.forEach((user) => {
         userColors.value[user.MEMBERSEQ] = user.usercolor || "#FFFFFF";
@@ -169,9 +169,8 @@ const fetchVacationCodes = async () => {
     try {
       const response = await axios.get("vacation/codes");
       if (response.status === 200 && response.data) {
-      // 배열을 객체 형태로 변환
         vacationCodeMap.value = response.data.data.reduce((acc, item) => {
-        acc[item.code] = item.name; // code를 key로, name을 value로 설정
+          acc[item.code] = item.name;
           return acc;
         }, {});
       } else {
@@ -182,29 +181,47 @@ const fetchVacationCodes = async () => {
     }
   };
 
-// 🔹 typeCode를 통해 code명 반환
   const getVacationType = (typeCode) => {
     return vacationCodeMap.value[typeCode] || "기타";
   };
 
+  // computed: modalYear와 일치하는 항목만 필터링
+  const filteredMyVacations = computed(() => {
+  const filtered = myVacations.value.filter(vac => {
+    console.log(vac)
+    const year = vac.date ? vac.date.split("T")[0].substring(0, 4) : null;
+    console.log("vacation year:", year, "modalYear:", modalYear.value);
+    return year === String(modalYear.value);
+  });
+  console.log("filteredMyVacations:", filtered);
+  return filtered;
+});
+
+const filteredReceivedVacations = computed(() => {
+  return receivedVacations.value.filter(vac => {
+    console.log(
+      vac.date,
+      vac.date ? vac.date.split("T")[0].substring(0, 4) : null,
+      modalYear.value
+    );
+    return vac.date && vac.date.split("T")[0].substring(0, 4) === String(modalYear.value);
+  });
+});
+
 
   function updateCalendarEvents() {
-  // 신규 선택한 연차(추가 대상): type이 "delete"가 아닌 항목
     const selectedEvents = Array.from(selectedDates.value)
       .filter(([date, type]) => type !== "delete")
       .map(([date, type]) => ({
         title: getVacationType(type),
         start: date,
         backgroundColor: "rgb(113 212 243 / 76%)",
-      textColor: "#fff", // 흰색 텍스트
+        textColor: "#fff",
         display: "background",
         classNames: [getVacationTypeClass(type), "selected-event"]
       }));
-
-  // 기존 백엔드에서 불러온 저장된 연차 이벤트 중,
-  // 해당 날짜가 삭제 대상으로 표시되어 있으면 제거
     const filteredFetchedEvents = fetchedEvents.value.filter(event => {
-    if (event.saved) { // saved 플래그가 있는 이벤트는 저장된 연차
+      if (event.saved) {
         return selectedDates.value.get(event.start) !== "delete";
       }
       return true;
@@ -212,26 +229,16 @@ function updateCalendarEvents() {
     calendarEvents.value = [...filteredFetchedEvents, ...selectedEvents];
   }
 
-/**
- * ✅ 반차 유형에 따라 클래스명 지정 (색상 변경 없이 영역만 조정)
- */
   const getVacationTypeClass = (type) => {
-  if (type === "700101") return "half-day-am"; // 오전반차 → 왼쪽 절반
+    if (type === "700101") return "half-day-am";
-  if (type === "700102") return "half-day-pm"; // 오후반차 → 오른쪽 절반
+    if (type === "700102") return "half-day-pm";
-  return "full-day"; // 연차 → 전체 배경
+    return "full-day";
   };
 
-/**
- * 날짜 클릭 이벤트
- * - 주말(토, 일)과 공휴일은 클릭되지 않음
- * - 클릭 시 해당 날짜를 selectedDates에 추가 또는 제거한 후 updateCalendarEvents() 호출
- */
   function handleDateClick(info) {
-  const clickedDateStr = info.dateStr; // "YYYY-MM-DD" 형식
+    const clickedDateStr = info.dateStr;
     const clickedDate = info.date;
     const todayStr = new Date().toISOString().split("T")[0];
-
-  // 주말, 공휴일, 오늘 이전 날짜는 클릭 불가
     if (
       clickedDate.getDay() === 0 ||
       clickedDate.getDay() === 6 ||
@@ -240,68 +247,58 @@ function updateCalendarEvents() {
     ) {
       return;
     }
-
-  // 토글: 이미 선택된 날짜라면 해제
     if (selectedDates.value.has(clickedDateStr)) {
       selectedDates.value.delete(clickedDateStr);
       updateCalendarEvents();
       return;
     }
-
-  // 저장된(보낸사람 없는) 연차가 있는지 확인
     const unsentVacation = myVacations.value.find(
       (vac) => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(clickedDateStr) && !vac.LOCVACRMM
     );
-
     if (unsentVacation) {
-    // 기존 저장된 연차가 있다면, 클릭 시 "delete" 플래그 지정 (즉, 숨김 처리)
       selectedDates.value.set(clickedDateStr, "delete");
     } else {
-    // 그렇지 않으면 신규 연차 추가: halfDayType 값에 따라 결정
       const type = halfDayType.value
         ? (halfDayType.value === "AM" ? "700101" : "700102")
         : "700103";
       selectedDates.value.set(clickedDateStr, type);
     }
-
     halfDayType.value = null;
     updateCalendarEvents();
   }
 
-/**
- * 오전/오후 반차 버튼 토글
- */
   function toggleHalfDay(type) {
     halfDayType.value = halfDayType.value === type ? null : type;
   }
 
-/**
- * 백엔드에서 휴가 데이터를 가져와 이벤트로 변환
- */
   async function fetchVacationData(year, month) {
   try {
     const response = await axios.get(`vacation/list/${year}/${month}`);
     if (response.status === 200) {
       const vacationList = response.data;
-      // 내 연차 데이터 업데이트 (사용자 본인의 연차만)
+      // 모달이 열려 있더라도 전달받은 연도가 기존 modalYear와 다르면 업데이트
+      if (modalYear.value !== year) {
         myVacations.value = vacationList.filter(
           (vac) => vac.MEMBERSEQ === userStore.user.id
         );
-      // 기존 저장된 연차 이벤트에 saved 플래그 추가
+        modalYear.value = year;
+        // modalMonth는 그대로 유지 (월은 모달 업데이트 조건에서 제외)
+      }
+      // 캘린더 이벤트 매핑
       const events = vacationList
-        .filter((vac) => !vac.LOCVACRMM) // 보낸사람이 없는(저장된) 연차
+        .filter((vac) => !vac.LOCVACRMM)
         .map((vac) => {
-          let dateStr = vac.LOCVACUDT.split("T")[0];
+          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, // saved 플래그 추가
+            saved: true,
           };
         })
-        .filter((event) => event !== null);
+        .filter((event) => event.start);
       return events;
     } else {
       console.warn("📌 휴가 데이터를 불러오지 못함");
@@ -313,34 +310,25 @@ halfDayType.value = halfDayType.value === type ? null : type;
   }
 }
 
-/**
- * 휴가 요청 추가 (선택된 날짜를 백엔드로 전송)
- */
   async function saveVacationChanges() {
-  // 추가할 연차: selectedDates 항목 중 type이 "delete"가 아닌 경우
     const selectedDatesArray = Array.from(selectedDates.value);
     const vacationsToAdd = selectedDatesArray
       .filter(([date, type]) => type !== "delete")
       .filter(([date, type]) =>
-      // 기존 데이터에 없거나, 기존 데이터에 있더라도 보낸사람(LOCVACRMM)이 있는 경우 추가
+        !myVacations.value.some(vac => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(date)) ||
-      !myVacations.value.some(vac => vac.LOCVACUDT.startsWith(date)) ||
+        myVacations.value.some(vac => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(date) && vac.LOCVACRMM)
-      myVacations.value.some(vac => vac.LOCVACUDT.startsWith(date) && vac.LOCVACRMM)
       )
       .map(([date, type]) => ({ date, type }));
-
-  // 삭제할 연차: 기존 데이터 중 보낸사람이 없는 항목에서,
-  // 해당 날짜가 "delete"로 지정되었거나 선택되지 않은 경우
     const vacationsToDelete = myVacations.value
       .filter(vac => {
+        if (!vac.LOCVACUDT) return false;
         const date = vac.LOCVACUDT.split("T")[0];
-    // 오직 해당 날짜가 "delete"로 선택된 경우만 삭제 대상으로 처리
         return selectedDates.value.get(date) === "delete" && !vac.LOCVACRMM;
       })
       .map(vac => {
         const id = vac.LOCVACSEQ;
         return typeof id === "number" ? Number(id) : id;
       });
-
     try {
       const response = await axios.post("vacation/batchUpdate", {
         add: vacationsToAdd,
@@ -351,7 +339,6 @@ halfDayType.value = halfDayType.value === type ? null : type;
         await fetchRemainingVacation();
         const currentDate = fullCalendarRef.value.getApi().getDate();
         await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
-      // 초기화: 선택한 날짜 해제
         selectedDates.value.clear();
         updateCalendarEvents();
       } else {
@@ -363,9 +350,6 @@ halfDayType.value = halfDayType.value === type ? null : type;
     }
   }
 
-/**
- * 달력 월 변경 시 호출 (FullCalendar의 datesSet 옵션)
- */
   function handleMonthChange(viewInfo) {
     const currentDate = viewInfo.view.currentStart;
     const year = currentDate.getFullYear();
@@ -373,16 +357,16 @@ const month = String(currentDate.getMonth() + 1).padStart(2, "0");
     loadCalendarData(year, month);
   }
 
-/**
- * 지정한 월의 데이터를 로드 (휴가, 공휴일 데이터를 병렬 요청)
- */
   async function loadCalendarData(year, month) {
+    if (lastRemainingYear.value !== year) {
+      await fetchRemainingVacation();
+      lastRemainingYear.value = year;
+    }
     fetchedEvents.value = [];
     const [vacationEvents, holidayEvents] = await Promise.all([
       fetchVacationData(year, month),
       fetchHolidays(year, month),
     ]);
-// 클릭 불가 처리를 위해 공휴일 날짜 Set 업데이트
     holidayDates.value = new Set(holidayEvents.map((event) => event.start));
     fetchedEvents.value = [...vacationEvents, ...holidayEvents];
     updateCalendarEvents();
@@ -390,9 +374,8 @@ await nextTick();
     fullCalendarRef.value.getApi().refetchEvents();
   }
 
-// 컴포넌트 마운트 시 현재 달의 데이터 로드
   onMounted(async () => {
-await fetchUserList(); // 사용자 목록 먼저 불러오기
+    await fetchUserList();
     await fetchVacationCodes();
     const today = new Date();
     const year = today.getFullYear();
@@ -402,5 +385,5 @@ await loadCalendarData(year, month);
   </script>
 
   <style>
-
+  /* 스타일 정의 */
   </style>