diff --git a/public/js/main.js b/public/js/main.js index b1dcbc9..c118e86 100644 --- a/public/js/main.js +++ b/public/js/main.js @@ -2,116 +2,121 @@ * Main */ -'use strict' +(function () { + // Initialize menu + //----------------- + let menu, animate; +<<<<<<< HEAD var menu, animate; (function () { // Initialize menu //----------------- +======= + let layoutMenuEl = document.querySelectorAll('#layout-menu'); + layoutMenuEl.forEach(function (element) { + menu = new Menu(element, { + orientation: 'vertical', + closeChildren: false, + }); + // Change parameter to true if you want scroll animation + window.Helpers.scrollToActive((animate = false)); + window.Helpers.mainMenu = menu; + }); +>>>>>>> board-comment - let layoutMenuEl = document.querySelectorAll('#layout-menu') - layoutMenuEl.forEach(function (element) { - menu = new Menu(element, { - orientation: 'vertical', - closeChildren: false, - }) - // Change parameter to true if you want scroll animation - window.Helpers.scrollToActive((animate = false)) - window.Helpers.mainMenu = menu - }) + // Initialize menu togglers and bind click on each + let menuToggler = document.querySelectorAll('.layout-menu-toggle'); + menuToggler.forEach(item => { + item.addEventListener('click', event => { + event.preventDefault(); + window.Helpers.toggleCollapsed(); + }); + }); - // Initialize menu togglers and bind click on each - let menuToggler = document.querySelectorAll('.layout-menu-toggle') - menuToggler.forEach((item) => { - item.addEventListener('click', (event) => { - event.preventDefault() - window.Helpers.toggleCollapsed() - }) - }) + // Display menu toggle (layout-menu-toggle) on hover with delay + let delay = function (elem, callback) { + let timeout = null; + elem.onmouseenter = function () { + // Set timeout to be a timer which will invoke callback after 300ms (not for small screen) + if (!Helpers.isSmallScreen()) { + timeout = setTimeout(callback, 300); + } else { + timeout = setTimeout(callback, 0); + } + }; - // Display menu toggle (layout-menu-toggle) on hover with delay - let delay = function (elem, callback) { - let timeout = null - elem.onmouseenter = function () { - // Set timeout to be a timer which will invoke callback after 300ms (not for small screen) - if (!Helpers.isSmallScreen()) { - timeout = setTimeout(callback, 300) - } else { - timeout = setTimeout(callback, 0) - } + elem.onmouseleave = function () { + // Clear any timers set to timeout + document.querySelector('.layout-menu-toggle').classList.remove('d-block'); + clearTimeout(timeout); + }; + }; + if (document.getElementById('layout-menu')) { + delay(document.getElementById('layout-menu'), function () { + // not for small screen + if (!Helpers.isSmallScreen()) { + document.querySelector('.layout-menu-toggle').classList.add('d-block'); + } + }); } - elem.onmouseleave = function () { - // Clear any timers set to timeout - document.querySelector('.layout-menu-toggle').classList.remove('d-block') - clearTimeout(timeout) + // Display in main menu when menu scrolls + let menuInnerContainer = document.getElementsByClassName('menu-inner'), + menuInnerShadow = document.getElementsByClassName('menu-inner-shadow')[0]; + if (menuInnerContainer.length > 0 && menuInnerShadow) { + menuInnerContainer[0].addEventListener('ps-scroll-y', function () { + if (this.querySelector('.ps__thumb-y').offsetTop) { + menuInnerShadow.style.display = 'block'; + } else { + menuInnerShadow.style.display = 'none'; + } + }); } - } - if (document.getElementById('layout-menu')) { - delay(document.getElementById('layout-menu'), function () { - // not for small screen - if (!Helpers.isSmallScreen()) { - document.querySelector('.layout-menu-toggle').classList.add('d-block') - } - }) - } - // Display in main menu when menu scrolls - let menuInnerContainer = document.getElementsByClassName('menu-inner'), - menuInnerShadow = document.getElementsByClassName('menu-inner-shadow')[0] - if (menuInnerContainer.length > 0 && menuInnerShadow) { - menuInnerContainer[0].addEventListener('ps-scroll-y', function () { - if (this.querySelector('.ps__thumb-y').offsetTop) { - menuInnerShadow.style.display = 'block' - } else { - menuInnerShadow.style.display = 'none' - } - }) - } + // Init helpers & misc + // -------------------- - // Init helpers & misc - // -------------------- + // Init BS Tooltip + const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')); + tooltipTriggerList.map(function (tooltipTriggerEl) { + return new bootstrap.Tooltip(tooltipTriggerEl); + }); - // Init BS Tooltip - const tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) - tooltipTriggerList.map(function (tooltipTriggerEl) { - return new bootstrap.Tooltip(tooltipTriggerEl) - }) + // Accordion active class + const accordionActiveFunction = function (e) { + if (e.type == 'show.bs.collapse' || e.type == 'show.bs.collapse') { + e.target.closest('.accordion-item').classList.add('active'); + } else { + e.target.closest('.accordion-item').classList.remove('active'); + } + }; - // Accordion active class - const accordionActiveFunction = function (e) { - if (e.type == 'show.bs.collapse' || e.type == 'show.bs.collapse') { - e.target.closest('.accordion-item').classList.add('active') - } else { - e.target.closest('.accordion-item').classList.remove('active') + const accordionTriggerList = [].slice.call(document.querySelectorAll('.accordion')); + const accordionList = accordionTriggerList.map(function (accordionTriggerEl) { + accordionTriggerEl.addEventListener('show.bs.collapse', accordionActiveFunction); + accordionTriggerEl.addEventListener('hide.bs.collapse', accordionActiveFunction); + }); + + // Auto update layout based on screen size + window.Helpers.setAutoUpdate(true); + + // Toggle Password Visibility + window.Helpers.initPasswordToggle(); + + // Speech To Text + window.Helpers.initSpeechToText(); + + // Manage menu expanded/collapsed with templateCustomizer & local storage + //------------------------------------------------------------------ + + // If current layout is horizontal OR current window screen is small (overlay menu) than return from here + if (window.Helpers.isSmallScreen()) { + return; } - } - const accordionTriggerList = [].slice.call(document.querySelectorAll('.accordion')) - const accordionList = accordionTriggerList.map(function (accordionTriggerEl) { - accordionTriggerEl.addEventListener('show.bs.collapse', accordionActiveFunction) - accordionTriggerEl.addEventListener('hide.bs.collapse', accordionActiveFunction) - }) + // If current layout is vertical and current window screen is > small - // Auto update layout based on screen size - window.Helpers.setAutoUpdate(true) - - // Toggle Password Visibility - window.Helpers.initPasswordToggle() - - // Speech To Text - window.Helpers.initSpeechToText() - - // Manage menu expanded/collapsed with templateCustomizer & local storage - //------------------------------------------------------------------ - - // If current layout is horizontal OR current window screen is small (overlay menu) than return from here - if (window.Helpers.isSmallScreen()) { - return - } - - // If current layout is vertical and current window screen is > small - - // Auto update menu collapsed/expanded based on the themeConfig - window.Helpers.setCollapsed(true, false) -})() + // Auto update menu collapsed/expanded based on the themeConfig + window.Helpers.setCollapsed(true, false); +})(); diff --git a/src/common/common.js b/src/common/common.js index e761219..5436651 100644 --- a/src/common/common.js +++ b/src/common/common.js @@ -15,35 +15,69 @@ import Quill from 'quill'; $common.변수 */ const common = { - // JSON 문자열로 Delta 타입을 변환 - contentToHtml(content) { - try { - if (content.startsWith('{') || content.startsWith('[')) { - // Delta 형식으로 변환 - const delta = JSON.parse(content); - const quill = new Quill(document.createElement('div')); - quill.setContents(delta); - return quill.root.innerHTML; // HTML 반환 - } - return content; // 이미 HTML일 경우 그대로 반환 - } catch (error) { - console.error('콘텐츠 변환 오류:', error); - return content; // 오류 발생 시 원본 반환 - } - }, - // Delta 타입을 JSON 문자열로 변환 - deltaAsJson(content) { - if (content && content.ops) { - return JSON.stringify(content.ops); // Delta 객체에서 ops 속성만 JSON 문자열로 변환 - } - console.error('잘못된 Delta 객체:', content); - return null; // Delta 객체가 아니거나 ops가 없을 경우 null 반환 - } + // JSON 문자열로 Delta 타입을 변환 + contentToHtml(content) { + try { + if (content.startsWith('{') || content.startsWith('[')) { + // Delta 형식으로 변환 + const delta = JSON.parse(content); + const quill = new Quill(document.createElement('div')); + quill.setContents(delta); + return quill.root.innerHTML; // HTML 반환 + } + return content; // 이미 HTML일 경우 그대로 반환 + } catch (error) { + console.error('콘텐츠 변환 오류:', error); + return content; // 오류 발생 시 원본 반환 + } + }, + // Delta 타입을 JSON 문자열로 변환 + deltaAsJson(content) { + if (content && content.ops) { + return JSON.stringify(content.ops); // Delta 객체에서 ops 속성만 JSON 문자열로 변환 + } + console.error('잘못된 Delta 객체:', content); + return null; // Delta 객체가 아니거나 ops가 없을 경우 null 반환 + }, -} + /** + * Date 타입 문자열 포멧팅 + * + * @param {string} dateStr + * @return + * 1. Date type 인 경우 예시 '25-02-24 12:02' + * 2. Date type 이 아닌 경우 입력값 리턴 + * + */ + dateFormatter(dateStr) { + const date = new Date(dateStr); + const dateCheck = date.getTime(); + + if (isNaN(dateCheck)) { + return dateStr; + } else { + const { year, month, day, hours, minutes } = this.formatDateTime(date); + return `${year}-${month}-${day} ${hours}:${minutes}`; + } + }, + + formatDateTime(date) { + const zeroFormat = num => (num < 10 ? `0${num}` : num); + + return { + year: date.getFullYear(), + month: zeroFormat(date.getMonth() + 1), + day: zeroFormat(date.getDate()), + hours: zeroFormat(date.getHours()), + minutes: zeroFormat(date.getMinutes()), + seconds: zeroFormat(date.getSeconds()), + }; + }, +}; export default { - install(app) { - app.config.globalProperties.$common = common; - } + install(app) { + app.config.globalProperties.$common = common; + app.provide('common', common); + }, }; 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/board/BoardComment.vue b/src/components/board/BoardComment.vue index 932c36f..2d0c784 100644 --- a/src/components/board/BoardComment.vue +++ b/src/components/board/BoardComment.vue @@ -2,18 +2,20 @@
+ /> +
@@ -27,7 +29,9 @@
{{ passwordCommentAlert }}
- +

authorId:{{ comment.authorId }}

+

코멘트 비교: {{comment.isCommentAuthor}}

+
- + 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 @@
  • - Profile Image + Profile Image
    • diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue index b322fa4..5919576 100644 --- a/src/views/board/BoardView.vue +++ b/src/views/board/BoardView.vue @@ -10,14 +10,14 @@ :boardId="currentBoardId" :profileName="profileName" :unknown="unknown" - :author="isAuthor" :views="views" :commentNum="commentNum" :date="formattedBoardDate" :isLike="false" + :isAuthor="isAuthor" @editClick="editClick" @deleteClick="deleteClick" - /> + />
      @@ -74,8 +74,14 @@ :likeClicked="likeClicked" :dislikeClicked="dislikeClicked" @updateReaction="handleUpdateReaction" - /> + />
      +

      현재 로그인한 사용자 ID: {{ currentUserId }}

      +

      게시글 작성자: {{ authorId }}

      +

      isAuthor 값: {{ isAuthor }}

      + + + @@ -97,7 +104,7 @@
      profileName.value === '익명'); const currentUserId = ref('김자바'); // 현재 로그인한 사용자 id const authorId = ref(null); // 작성자 id +======= +// const unknown = computed(() => profileName.value === '익명'); +const currentUserId = computed(() => userStore.user.id); // 현재 로그인한 사용자 id +const authorId = ref(''); // 작성자 id +>>>>>>> board-comment const isAuthor = computed(() => currentUserId.value === authorId.value); +// const isCommentAuthor = +const commentsWithAuthStatus = computed(() => { + const updatedComments = comments.value.map(comment => ({ + ...comment, + isCommentAuthor: comment.authorId === currentUserId.value + })); + // console.log("✅ commentsWithAuthStatus 업데이트됨:", updatedComments); + return updatedComments; +}); const password = ref(''); @@ -187,9 +211,12 @@ const fetchBoardDetails = async () => { const response = await axios.get(`board/${currentBoardId.value}`); const data = response.data.data; + console.log(data) + // API 응답 데이터 반영 // const boardDetail = data.boardDetail || {}; +<<<<<<< HEAD profileName.value = data.author || '익명'; // 익명확인하고 싶을때 @@ -198,6 +225,15 @@ const fetchBoardDetails = async () => { // 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부 authorId.value = data.author; +======= + profileName.value = data.author; + + // 익명확인하고 싶을때 + // profileName.value = '익명'; + + + authorId.value = data.authorId; //게시글 작성자 id +>>>>>>> board-comment boardTitle.value = data.title || '제목 없음'; boardContent.value = data.content || ''; date.value = data.date || ''; @@ -262,7 +298,7 @@ const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike }) } }; -// 댓글 목록 조회 (대댓글 포함) +// 댓글 목록 조회 const fetchComments = async (page = 1) => { try { // 댓글 @@ -273,11 +309,20 @@ const fetchComments = async (page = 1) => { } }); +<<<<<<< HEAD +======= + console.log(response.data.data) + +>>>>>>> board-comment const commentsList = response.data.data.list.map(comment => ({ commentId: comment.LOCCMTSEQ, // 댓글 ID boardId: comment.LOCBRDSEQ, parentId: comment.LOCCMTPNT, // 부모 ID author: comment.author || '익명', +<<<<<<< HEAD +======= + authorId: comment.authorId, +>>>>>>> board-comment content: comment.LOCCMTRPY, likeCount: comment.likeCount || 0, dislikeCount: comment.dislikeCount || 0, @@ -286,8 +331,6 @@ const fetchComments = async (page = 1) => { createdAtRaw: new Date(comment.LOCCMTRDT), // 정렬용 createdAt: formattedDate(comment.LOCCMTRDT), // 표시용 children: [], // 대댓글을 담을 배열 - // isCommentPassword: false, // 개별 댓글 비밀번호 입력 상태 - // isEditTextarea: false // 개별 댓글 수정 상태 })); for (const comment of commentsList) { @@ -297,7 +340,7 @@ const fetchComments = async (page = 1) => { params: { LOCCMTPNT: comment.commentId } }); - // console.log(`대댓글 데이터 (${comment.commentId}의 대댓글):`, replyResponse.data); + console.log(`대댓글 데이터 (${comment.commentId}의 대댓글):`, replyResponse.data); if (replyResponse.data.data) { comment.children = replyResponse.data.data.map(reply => ({ @@ -343,21 +386,22 @@ const fetchComments = async (page = 1) => { console.log('댓글 목록 불러오기 오류:', error); } }; -const isSubmitting = ref(false); +// const isSubmitting = ref(false); + // 댓글 작성 const handleCommentSubmit = async ({ comment, password }) => { - // if (unknown.value && !password) { - // passwordAlert.value = "익명 사용자는 비밀번호를 입력해야 합니다."; // UI에 메시지 표시 - // return; - // } + console.log('댓글') + //비밀번호 입력 안했을시 // if (!password) { - // passwordAlert.value = "비밀번호를 입력해야 합니다."; // UI에서 경고 표시 + // passwordAlert.value = "비밀번호를 입력해야 합니다."; // return; // } + // console.log('비밀번호 눌렀음') + // 중복 실행 방지 - if (isSubmitting.value) return; - isSubmitting.value = true; + // if (isSubmitting.value) return; + // isSubmitting.value = true; try { const response = await axios.post(`board/${currentBoardId.value}/comment`, { @@ -368,7 +412,7 @@ const handleCommentSubmit = async ({ comment, password }) => { }); if (response.status === 200) { - // console.log('댓글 작성 성공:', response.data.message); + console.log('댓글 작성 성공:', response.data.message); await fetchComments(); } else { console.log('댓글 작성 실패:', response.data.message); @@ -439,19 +483,28 @@ const deleteClick = (unknown) => { } }; -// 댓글 수정 버튼 클릭(대댓글 포함) +// 댓글 수정 버튼 클릭 const editComment = (comment) => { - if (comment.isEditTextarea) { - // 이미 수정창이 열려 있으면 닫기 - comment.isEditTextarea = false; + const targetComment = comments.value.find(c => c.commentId === comment.commentId); + + if (!targetComment) { return; } + // 수정 text창 열림, 닫힘 유무 + if (targetComment.isEditTextarea) { + targetComment.isEditTextarea = false; + } else { + targetComment.isEditTextarea = true; + } + + // 익명일때 if (unknown.value) { toggleCommentPassword(comment, "edit"); } else { comment.isEditTextarea = true; } +<<<<<<< HEAD // comments.value.forEach(c => { // c.isEditTextarea = false; @@ -463,10 +516,13 @@ const editComment = (comment) => { // } else { // comment.isEditTextarea = true; // } +======= +>>>>>>> board-comment } -// 댓글 삭제 버튼 클릭(대댓글 포함) -const deleteComment = (comment) => { +// 댓글 삭제 버튼 클릭 +const deleteComment = async (comment) => { + // 익명 사용자인 경우 if (unknown.value) { if (comment.isEditTextarea) { // 현재 수정 중이라면 수정 모드를 끄고, 삭제 비밀번호 입력창을 띄움 @@ -477,8 +533,8 @@ const deleteComment = (comment) => { toggleCommentPassword(comment, "delete"); } } else { - // 로그인 사용자 바로 삭제 - comments.value = comments.value.filter(c => c.commentId !== comment.commentId); + // 로그인 사용자인 경우 (바로 삭제) + deleteReplyComment(comment) } }; @@ -531,7 +587,7 @@ const submitPassword = async () => { } lastClickedButton.value = null; } else { - passwordAlert.value = "비밀번호가 일치하지 않습니다.????"; + passwordAlert.value = "비밀번호가 일치하지 않습니다."; } } catch (error) { // console.log("📌 전체 오류:", error); @@ -552,6 +608,7 @@ const submitPassword = async () => { // 댓글 삭제 (비밀번호 확인 후) const submitCommentPassword = async (comment, password) => { + if (!password) { passwordCommentAlert.value = "비밀번호를 입력해주세요."; return; @@ -564,12 +621,19 @@ const submitCommentPassword = async (comment, password) => { }); if (response.data.code === 200 && response.data.data === true) { + passwordCommentAlert.value = ""; comment.isCommentPassword = false; if (lastCommentClickedButton.value === "edit") { comment.isEditTextarea = true; +<<<<<<< HEAD +======= + passwordCommentAlert.value = ""; + +>>>>>>> board-comment // handleSubmitEdit(comment, comment.content); } else if (lastCommentClickedButton.value === "delete") { + passwordCommentAlert.value = ""; deleteReplyComment(comment) } @@ -631,7 +695,7 @@ const deleteReplyComment = async (comment) => { } }; -// 댓글 수정 확인 (대댓글 포함) +// 댓글 수정 확인 const handleSubmitEdit = async (comment, editedContent) => { try { const response = await axios.put(`board/comment/${comment.commentId}`, { @@ -640,8 +704,19 @@ const handleSubmitEdit = async (comment, editedContent) => { }); // 수정 성공 시 업데이트 +<<<<<<< HEAD comment.content = editedContent; comment.isEditTextarea = false; +======= + // comment.content = editedContent; + // comment.isEditTextarea = false; + if (response.status === 200) { + // 댓글 목록 새로고침 + await fetchComments(); + } else { + console.log("❌ 댓글 수정 실패:", response.data); + } +>>>>>>> board-comment } catch (error) { console.error("댓글 수정 중 오류 발생:", error); } @@ -650,7 +725,16 @@ const handleSubmitEdit = async (comment, editedContent) => { // 댓글 수정 취소 (대댓글 포함) const handleCancelEdit = (comment) => { console.log("BoardView.vue - 댓글 수정 취소:", comment); - comment.isEditTextarea = false; + + // 원본 comments 배열에서 동일한 comment 찾기 + const targetComment = comments.value.find(c => c.commentId === comment.commentId); + + if (targetComment) { + console.log("✅ 원본 데이터 찾음, 수정 취소 처리 가능"); + targetComment.isEditTextarea = false; + } else { + console.error("❌ 원본 데이터 찾을 수 없음, 수정 취소 실패"); + } }; // 페이지 변경 diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue index 5124a05..004c2a0 100644 --- a/src/views/vacation/VacationManagement.vue +++ b/src/views/vacation/VacationManagement.vue @@ -5,12 +5,16 @@
      - +
      + +
      -
      -
      - - -
      -
      +
      + +
      @@ -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,42 @@ 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', () => { + fpInstance.open(); + }); + } + }); }); // 연차 내역 API (초기 호출용) @@ -137,7 +179,6 @@ } } - // lastRemainingYear 값이 변경될 때마다 해당 연도의 연차 내역 재조회 watch(lastRemainingYear, async (newYear, oldYear) => { await fetchVacationHistory(newYear); }); @@ -156,27 +197,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 +252,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 +280,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 +311,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 +326,7 @@ return; } - // 내 휴가가 없는 날짜: 일반 선택/토글 처리 if (selectedDates.value.has(clickedDateStr)) { - console.log("일반 날짜 토글 off: 기존 선택 해제"); selectedDates.value.delete(clickedDateStr); updateCalendarEvents(); return; @@ -315,7 +334,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 +349,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 +365,7 @@ backgroundColor, classNames: [getVacationTypeClass(vac.LOCVACTYP)], saved: true, - memberSeq: vac.MEMBERSEQ, // 이벤트 소유자 정보 + memberSeq: vac.MEMBERSEQ, }; }) .filter((event) => event.start); @@ -368,18 +385,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 +407,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 +460,10 @@ diff --git a/src/views/wordDict/wordDict.vue b/src/views/wordDict/wordDict.vue index 3942ee7..3d71174 100644 --- a/src/views/wordDict/wordDict.vue +++ b/src/views/wordDict/wordDict.vue @@ -1,6 +1,5 @@