Merge branch 'main' into wordDict

2025-02-20 09:20:57 +09:00 · 2025-02-20 09:20:57 +09:00 · d6883c3a34
commit d6883c3a34
parent 8b56ce4e42 1daafb3c75
10 changed files with 259 additions and 154 deletions
--- a/src/common/axios-interceptor.js
+++ b/src/common/axios-interceptor.js
@ -37,7 +37,7 @@ $api.interceptors.response.use(
    },
    function (error) {
        const toastStore = useToastStore();
-        //const currentPage = error.config.headers['X-Page-Route'];
+        const currentPage = error.config.headers['X-Page-Route'];
        // 오류 응답 처리
        if (error.response) {
            switch (error.response.status) {
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@ -68,7 +68,7 @@
 <script setup>
 import { defineProps, defineEmits, ref } from 'vue';
 import BoardProfile from './BoardProfile.vue';
-import BoardCommentArea from './BoardComentArea.vue';
+import BoardCommentArea from './BoardCommentArea.vue';
 import PlusButton from '../button/PlusBtn.vue';

 const props = defineProps({
--- a/src/components/board/BoardCommentArea.vue
+++ b/src/components/board/BoardCommentArea.vue
@ -5,7 +5,7 @@
            <div class="d-flex justify-content-start align-items-top">
                <!-- 프로필섹션 -->
                <div class="avatar-wrapper">
-                    <div class="avatar me-4">
+                    <div v-if="!unknown" class="avatar me-4">
                        <img src="/img/avatars/11.png" alt="Avatar" class="rounded-circle">
                    </div>
                </div>
@ -13,8 +13,9 @@
                <div class="w-100">
                    <textarea
                        class="form-control"
-                        placeholder="주제에 대한 생각을 자유롭게 댓글로 표현해 주세요. &#13;&#10;여러분의 다양한 의견을 기다립니다."
+                        placeholder="댓글 달기"
                        rows="3"
+                        v-model="comment"
                    ></textarea>
                </div>
            </div>
@ -23,7 +24,7 @@
            <div class="d-flex justify-content-between flex-wrap mt-4">
                <div class="d-flex flex-wrap align-items-center">
                    <!-- 익명 체크박스 (익명게시판일 경우에만)-->
-                    <div class="form-check form-check-inline mb-0 me-4">
+                    <div v-if="unknown" class="form-check form-check-inline mb-0 me-4">
                        <input
                            class="form-check-input"
                            type="checkbox"
@ -40,15 +41,16 @@
                            type="password"
                            id="basic-default-password"
                            class="form-control flex-grow-1"
-                            placeholder=""
+                            v-model="password"
                        />
                    </div>
                </div>

                <!-- 답변 쓰기 버튼 -->
                <div class="ms-auto mt-3 mt-md-0">
-                    <button class="btn btn-primary">
-                        <i class="icon-base bx bx-check"></i>
+                    <button class="btn btn-primary" @click="handleCommentSubmit">
+                        <!-- <i class="icon-base bx bx-check"></i> -->
+                        확인
                    </button>
                </div>
            </div>
@ -57,6 +59,40 @@
 </template>

 <script setup>
-import { ref } from 'vue';
+import { ref, defineEmits, defineProps, computed, watch } from 'vue';
+
+const props = defineProps({
+    unknown: {
+        type: Boolean,
+        default: true,
+    },
+    parentId: {
+        type: Number,
+        default: 0
+    }
+});
+
+const comment = ref('');
+const password = ref('');
 const isCheck = ref(false);
+
+const emit = defineEmits(['submitComment']);
+
+watch(() => props.unknown, (newVal) => {
+    if (!newVal) {
+        isCheck.value = false;
+    }
+});
+
+function handleCommentSubmit() {
+    emit('submitComment', {
+        comment: comment.value,
+        password: password.value,
+    });
+
+    comment.value = '';
+    password.value = '';
+}
+
+
 </script>
--- a/src/components/list/ProjectCard.vue
+++ b/src/components/list/ProjectCard.vue
@ -63,7 +63,7 @@
 <script setup>
 import { defineProps, ref } from 'vue';
 import UserList from '@c/user/UserList.vue';
-import CenterModal from '../modal/CenterModal.vue';
+import CenterModal from '@c/modal/CenterModal.vue';
 import $api from '@api';

 // Props 정의
--- a/src/components/list/ProjectCardList.vue
+++ b/src/components/list/ProjectCardList.vue
@ -34,7 +34,7 @@
                    :is-label="true"
                    :is-common="true"
                    :data="allColors"
-                    v-model="selectedProject.projctcolor"
+                    v-model="selectedProject.PROJCTCOL"
                />

                <FormInput
@ -85,19 +85,23 @@
    import FormInput from '@c/input/FormInput.vue';
    import FormSelect from '@c/input/FormSelect.vue';
    import commonApi from '@/common/commonApi';
-    import ArrInput from '../input/ArrInput.vue';
+    import ArrInput from '@c/input/ArrInput.vue';
    import { useUserInfoStore } from '@/stores/useUserInfoStore';
+    import { useToastStore } from '@s/toastStore';
+
+    const toastStore = useToastStore();

    const projectList = ref([]);
    const isModalOpen = ref(false);
+    let originalColor = ref('');

    const userStore = useUserInfoStore();
    const user = ref(null);

    const nameAlert = ref(false);
    const selectedProject = ref({
+        PROJCTSEQ:'',
        PROJCTNAM: '',
-        projctcolor: '',
        PROJCTSTR: '',
        PROJCTEND: '',
        PROJCTZIP: '',
@ -105,6 +109,7 @@
        PROJCTDTL: '',
        PROJCTDES: '',
        PROJCTCOL: '',
+        projctcolor:'',
    });

    const { colorList } = commonApi({
@ -124,13 +129,14 @@
    const getProjectList = () => {
        $api.get('project/select').then(res => {
            projectList.value = res.data.data.projectList;
-            console.log(projectList.value);
        });
 };


    const openModal = (post) => {
        isModalOpen.value = true;
+
+        originalColor.value = post.PROJCTCOL;
        selectedProject.value = { ...post };
    };

@ -156,20 +162,23 @@
        };
    };

-    console.log(projectList.PROJCTSEQ)
-
    const handleSubmit = () => {
+
+        console.log(selectedProject.value.PROJCTCOL)
+        console.log(originalColor.value)
+
        $api.patch('project/update', {
-            projctSeq: projectList.PROJCTSEQ,
+            projctSeq: selectedProject.value.PROJCTSEQ,
            projctNam: selectedProject.value.PROJCTNAM,
-            projctCol: selectedProject.value.projctcolor,
+            projctCol: selectedProject.value.PROJCTCOL,
            projctArr: selectedProject.value.PROJCTARR,
            projctDtl: selectedProject.value.PROJCTDTL,
            projctZip: selectedProject.value.PROJCTZIP,
            projctStr: selectedProject.value.PROJCTSTR,
-            projctEnd: selectedProject.value.PROJCTEND,
+            projctEnd: selectedProject.value.PROJCTEND || null,
            projctDes: selectedProject.value.PROJCTDES,
            projctUmb: user.value.name,
+            originalColor: originalColor.value === selectedProject.value.PROJCTCOL ? null : originalColor.value
        }).then(res => {
            if (res.status === 200) {
                toastStore.onToast('수정이 완료 되었습니다.', 's');
--- a/src/components/modal/VacationGrantModal.vue
+++ b/src/components/modal/VacationGrantModal.vue
@ -8,13 +8,13 @@
          <p>해당 직원에게 부여할 연차 개수를 선택하세요. (남은 개수: {{ availableQuota }}개)</p>

          <div class="vacation-control">
-            <button @click="decreaseCount" :disabled="grantCount <= 0" class="count-btn">-</button>
+            <button @click="decreaseCount" :disabled="grantCount < 2" class="count-btn">-</button>
            <span class="grant-count">{{ grantCount }}</span>
            <button @click="increaseCount" :disabled="grantCount >= availableQuota" class="count-btn">+</button>
          </div>

          <button class="gift-btn" @click="saveVacationGrant" :disabled="grantCount === 0">
-            <i class="bx bx-gift"></i> <!-- 선물상자 아이콘 -->
+            <i class="bx bx-gift"></i>
          </button>
        </div>
      </div>
@ -26,65 +26,60 @@
  import axios from "@api";

  const props = defineProps({
-    isOpen: Boolean, // 모달 상태
-    targetUser: Object, // 선택한 사용자 정보
+    isOpen: Boolean,
+    targetUser: Object,
  });

  const emit = defineEmits(["close", "updateVacation"]);
  const grantCount = ref(0);
-  const maxQuota = 2; // 1년에 보낼 수 있는 최대 개수
-  const sentCount = ref(0); // 현재까지 보낸 개수
-  const availableQuota = ref(2); // 남은 개수
+  const maxQuota = 2;
+  const sentCount = ref(0);
+  const availableQuota = ref(2);

-  // ✅ 해당 사용자에게 이미 보낸 연차 개수 조회
  const fetchSentVacationCount = async () => {
    try {
      const payload = { receiverId: props.targetUser.MEMBERSEQ };
-
-      const response = await axios.get(`vacation/sent`,{ params: payload });
-      console.log(response.data.data[0].count)
-        sentCount.value = response.data.data[0].count || 0; // 이미 보낸 개수
-        availableQuota.value = Math.max(maxQuota - sentCount.value, 0); // 남은 개수 (0 이하 방지)
-        console.log(`✅ 보낸 개수: ${sentCount.value}, 남은 개수: ${availableQuota.value}`);
+      const response = await axios.get("vacation/sent", { params: payload });
+      sentCount.value = response.data.data[0].count || 0;
+      availableQuota.value = Math.max(maxQuota - sentCount.value, 0);
+      grantCount.value = availableQuota.value; // ✅ 남은 개수로 기본값 설정
    } catch (error) {
      console.error("🚨 연차 전송 기록 조회 실패:", error);
      availableQuota.value = maxQuota;
+      grantCount.value = maxQuota; // 기본값 설정
    }
  };

-  // ✅ 연차 개수 증가
  const increaseCount = () => {
    if (grantCount.value < availableQuota.value) {
      grantCount.value++;
    }
  };

-  // ✅ 연차 개수 감소
  const decreaseCount = () => {
    if (grantCount.value > 0) {
      grantCount.value--;
    }
  };

-  // ✅ 연차 부여 저장 요청 (saveVacations API 호출)
  const saveVacationGrant = async () => {
    try {
      const payload = [
        {
-          date: new Date().toISOString().split("T")[0], // 오늘 날짜
-          type: "700103", // 연차 코드
-          senderId: props.targetUser.senderId, // 보내는 사람 ID
-          receiverId: props.targetUser.MEMBERSEQ, // 받는 사람 ID
-          count: grantCount.value, // 부여 개수
+          date: new Date().toISOString().split("T")[0],
+          type: "700103",
+          senderId: props.targetUser.senderId,
+          receiverId: props.targetUser.MEMBERSEQ,
+          count: grantCount.value,
        },
      ];

-      const response = await axios.post("vacation/save", payload);
-
+      const response = await axios.post("vacation", payload);
+        console.log(response)
      if (response.data && response.data.status === "OK") {
        alert("✅ 연차가 부여되었습니다.");
-        await fetchSentVacationCount(); // ✅ 보낸 개수 업데이트
-        emit("updateVacation"); // ✅ 연차 정보 갱신 요청
+        await fetchSentVacationCount();
+        emit("updateVacation");
        closeModal();
      } else {
        alert("🚨 연차 추가 중 오류가 발생했습니다.");
@ -95,36 +90,30 @@
    }
  };

-  // ✅ 모달 닫기
  const closeModal = () => {
    emit("close");
  };

-  // ✅ 모달이 열릴 때 초기 값 설정 및 보낸 개수 조회
  watch(
    () => props.isOpen,
    async (newVal) => {
      if (newVal && props.targetUser && props.targetUser.MEMBERSEQ) {
        console.log("🟢 모달이 열렸습니다. 데이터를 로드합니다.");
-        grantCount.value = 0; // 초기화
-        await fetchSentVacationCount(); // 보낸 개수 불러오기
+        await fetchSentVacationCount();
      }
    }
  );

-  // ✅ targetUser가 변경될 때도 fetchSentVacationCount 호출
  watch(
    () => props.targetUser,
    async (newUser) => {
      if (newUser && newUser.MEMBERSEQ) {
-        console.log(`🔄 새로운 대상(${newUser.name})이 선택되었습니다.`);
        await fetchSentVacationCount();
      }
    },
    { deep: true }
  );

-  // ✅ 컴포넌트가 마운트될 때도 보낸 개수 불러오기
  onMounted(async () => {
    if (props.isOpen && props.targetUser && props.targetUser.MEMBERSEQ) {
      await fetchSentVacationCount();
@ -132,6 +121,7 @@
  });
  </script>

+
  <style scoped>

  /* 모달 본문 */
--- a/src/components/modal/VacationModal.vue
+++ b/src/components/modal/VacationModal.vue
@ -1,165 +1,186 @@
 <template>
-<div v-if="isOpen" class="modal-dialog" @click.self="closeModal">
-    <div class="modal-content modal-scroll">
-    <h5 class="modal-title">📅 내 연차 사용 내역</h5>
-    <button class="close-btn" @click="closeModal">✖</button>
+    <div v-if="isOpen" class="modal-dialog" @click.self="closeModal">
+        <div class="modal-content modal-scroll">
+            <h5 class="modal-title">📅 내 연차 사용 내역</h5>
+            <button class="close-btn" @click="closeModal">✖</button>

-    <!-- 연차 사용 및 받은 연차 리스트 -->
-    <div class="modal-body" v-if="mergedVacations.length > 0">
-        <ol class="vacation-list">
-        <li
-            v-for="(vacation, index) in mergedVacations"
-            :key="index"
-            class="vacation-item"
-        >
-            <span v-if="vacation.type === 'used'" class="vacation-index">
-            {{ totalUsedVacationCount - usedVacations.findIndex(v => v.date === vacation.date) }})
-            </span>
-            <span :class="vacation.type === 'used' ? 'minus-symbol' : 'plus-symbol'">
-            {{ vacation.type === 'used' ? '-' : '+' }}
-            </span>
-            <span :style="{ color: userColors[vacation.senderId || vacation.receiverId] || '#000' }"
-                class="vacation-date">{{ formatDate(vacation.date) }}</span>
-        </li>
-        </ol>
-    </div>
+            <!-- 연차 사용 및 받은 연차 리스트 -->
+            <div class="modal-body" v-if="mergedVacations.length > 0">
+                <ol class="vacation-list">
+                    <li v-for="(vacation, index) in mergedVacations" :key="index" class="vacation-item">
+                        <span v-if="vacation.type === 'used'" class="vacation-index">
+                            {{ getVacationIndex(index) }})
+                        </span>
+                        <span :class="vacation.type === 'used' ? 'minus-symbol' : 'plus-symbol'">
+                            {{ vacation.type === 'used' ? '-' : '+' }}
+                        </span>
+                        <span
+                            :style="{ color: userColors[vacation.senderId || vacation.receiverId] || '#000' }"
+                            class="vacation-date"
+                        >
+                            {{ formatDate(vacation.date) }}
+                        </span>
+                    </li>
+                </ol>
+            </div>

-    <!-- 연차 데이터 없음 -->
-    <p v-if="mergedVacations.length === 0" class="no-data">
-        🚫 사용한 연차가 없습니다.
-    </p>
+            <!-- 연차 데이터 없음 -->
+            <p v-if="mergedVacations.length === 0" class="no-data">
+                🚫 사용한 연차가 없습니다.
+            </p>
+        </div>
    </div>
-</div>
 </template>

 <script setup>
 import { defineProps, defineEmits, computed } from "vue";

 const props = defineProps({
-isOpen: Boolean,
-myVacations: {
-    type: Array,
-    default: () => [],
-},
-receivedVacations: {
-    type: Array,
-    default: () => [],
-},
-userColors: {
-    type: Object,
-    default: () => ({}),
-},
+    isOpen: Boolean,
+    myVacations: {
+        type: Array,
+        default: () => [],
+    },
+    receivedVacations: {
+        type: Array,
+        default: () => [],
+    },
+    userColors: {
+        type: Object,
+        default: () => ({}),
+    },
 });

 const emit = defineEmits(["close"]);

-// ✅ 사용한 연차 개수
-const totalUsedVacationCount = computed(() => props.myVacations.length);
-
 // ✅ 사용한 연차 + 받은 연차 통합 후 내림차순 정렬
-const usedVacations = computed(() => props.myVacations.map(v => ({ ...v, type: "used" })));
-const receivedVacations = computed(() => props.receivedVacations.map(v => ({ ...v, type: "received" })));
-
-const mergedVacations = computed(() => {
-return [...usedVacations.value, ...receivedVacations.value].sort(
-    (a, b) => new Date(b.date) - new Date(a.date)
+const usedVacations = computed(() =>
+    props.myVacations.map(v => ({ ...v, type: "used" }))
 );
+
+const receivedVacations = computed(() =>
+    props.receivedVacations.map(v => ({ ...v, type: "received" }))
+);
+
+// ✅ 정확한 정렬 및 리스트 병합
+const mergedVacations = computed(() => {
+    return [...usedVacations.value, ...receivedVacations.value].sort(
+        (a, b) => new Date(b.date) - new Date(a.date)
+    );
 });

+// ✅ 연차 개수 반영된 인덱스 반환 (누적 합산)
+const getVacationIndex = (index) => {
+    let count = 0;
+    for (let i = 0; i <= index; i++) {
+        const v = mergedVacations.value[i];
+        count += v.used_quota; // 누적하여 더함
+    }
+    return count;
+};
+
 // ✅ 날짜 형식 변환 (YYYY-MM-DD)
 const formatDate = (dateString) => {
-const date = new Date(dateString);
-return date.toISOString().split("T")[0]; // YYYY-MM-DD 형식
+    const date = new Date(dateString);
+    return date.toISOString().split("T")[0]; // YYYY-MM-DD 형식
 };

 const closeModal = () => {
-emit("close");
+    emit("close");
 };
 </script>

 <style scoped>
 /* 모달 스타일 */
 .modal-dialog {
-display: flex;
-justify-content: center;
-align-items: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }

 /* 스크롤 가능한 모달 */
 .modal-content {
-max-height: 60vh;
-overflow-y: auto;
-padding: 20px;
-width: 75%;
-background: white;
-border-radius: 8px;
-box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+    max-height: 60vh;
+    overflow-y: auto;
+    padding: 20px;
+    width: 75%;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
 }

 /* 닫기 버튼 */
 .close-btn {
-position: absolute;
-top: 10px;
-right: 10px;
-background: none;
-border: none;
-font-size: 18px;
-cursor: pointer;
-font-weight: bold;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: none;
+    border: none;
+    font-size: 18px;
+    cursor: pointer;
+    font-weight: bold;
 }

 /* 리스트 기본 스타일 */
 .vacation-list {
-list-style-type: none;
-padding-left: 0;
-margin-top: 15px;
+    list-style-type: none;
+    padding-left: 0;
+    margin-top: 15px;
 }

 /* 리스트 아이템 */
 .vacation-item {
-display: flex;
-align-items: center;
-font-size: 16px;
-font-weight: bold;
-margin-bottom: 8px;
-padding: 5px 10px;
-border-radius: 5px;
-background: #f9f9f9;
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: bold;
+    margin-bottom: 8px;
+    padding: 5px 10px;
+    border-radius: 5px;
+    background: #f9f9f9;
 }

 /* 인덱스 (연차 사용 개수) */
 .vacation-index {
-font-weight: bold;
-font-size: 16px;
-margin-right: 8px;
-color: #333;
+    font-weight: bold;
+    font-size: 16px;
+    margin-right: 8px;
+    color: #333;
 }

 /* "-" 빨간색 */
 .minus-symbol {
-color: red;
-font-weight: bold;
-margin-right: 8px;
+    color: red;
+    font-weight: bold;
+    margin-right: 8px;
 }

 /* "+" 파란색 */
 .plus-symbol {
-color: blue;
-font-weight: bold;
-margin-right: 8px;
+    color: blue;
+    font-weight: bold;
+    margin-right: 8px;
 }

 /* 날짜 스타일 */
 .vacation-date {
-font-size: 16px;
-color: #333;
+    font-size: 16px;
+    color: #333;
+}
+
+/* 연차 유형 스타일 */
+.vacation-type {
+    font-size: 14px;
+    font-weight: normal;
+    color: gray;
+    margin-left: 5px;
 }

 /* 연차 데이터 없음 */
 .no-data {
-text-align: center;
-font-size: 14px;
-color: gray;
-margin-top: 10px;
+    text-align: center;
+    font-size: 14px;
+    color: gray;
+    margin-top: 10px;
 }
 </style>
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@ -190,6 +190,8 @@ const fetchGeneralPosts = async (page = 1) => {
            console.log(data)
            const totalPosts = data.data.total; // 전체 게시물 개수 받아오기

+            console.log('📌 API 응답 데이터:', data.data);
+
            generalList.value = data.data.list.map((post, index) => ({
                realId: post.id,
                id: totalPosts - ((page - 1) * selectedSize.value) - index,
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@ -94,7 +94,11 @@
                            @updateReaction="handleUpdateReaction"
                            @submitComment="handleCommentReply"
                        />
-                        <Pagination/>
+                        <Pagination
+                            v-if="pagination.pages"
+                            v-bind="pagination"
+                            @update:currentPage="handlePageChange"
+                        />
                    </div>
                </div>
            </div>
@ -103,7 +107,7 @@
 </template>

 <script setup>
-import BoardCommentArea from '@c/board/BoardComentArea.vue';
+import BoardCommentArea from '@/components/board/BoardCommentArea.vue';
 import BoardProfile from '@c/board/BoardProfile.vue';
 import BoardCommentList from '@c/board/BoardCommentList.vue';
 import BoardRecommendBtn from '@c/button/BoardRecommendBtn.vue';
@ -141,6 +145,21 @@ const passwordAlert = ref("");
 const isPassword = ref(false);
 const lastClickedButton = ref("");

+const pagination = ref({
+    currentPage: 1,
+    pages: 1,
+    prePage: 0,
+    nextPage: 1,
+    isFirstPage: true,
+    isLastPage: false,
+    hasPreviousPage: false,
+    hasNextPage: false,
+    navigatePages: 10,
+    navigatepageNums: [1],
+    navigateFirstPage: 1,
+    navigateLastPage: 1
+});
+

 // 게시물 상세 데이터 불러오기
 const fetchBoardDetails = async () => {
@ -202,10 +221,13 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
 };

 // 댓글 목록 조회
-const fetchComments = async () => {
+const fetchComments = async (page  = 1) => {
    try {
        const response = await axios.get(`board/${currentBoardId.value}/comments`, {
-            params: { LOCBRDSEQ: currentBoardId.value }
+            params: {
+                LOCBRDSEQ: currentBoardId.value,
+                page
+            }
        });
        console.log("목록 API 응답 데이터:", response.data);

@ -240,6 +262,22 @@ const fetchComments = async () => {

        // console.log("변환된 comments 데이터:", comments.value);

+        pagination.value = {
+            ...pagination.value,
+            currentPage: response.data.data.pageNum,  // 현재 페이지 번호
+            pages: response.data.data.pages,  // 전체 페이지 수
+            prePage: response.data.data.prePage, // 이전 페이지
+            nextPage: response.data.data.nextPage, // 다음 페이지
+            isFirstPage: response.data.data.isFirstPage, // 첫 페이지 여부
+            isLastPage: response.data.data.isLastPage, // 마지막 페이지 여부
+            hasPreviousPage: response.data.data.hasPreviousPage, // 이전 페이지 존재 여부
+            hasNextPage: response.data.data.hasNextPage, // 다음 페이지 존재 여부
+            navigatePages: response.data.data.navigatePages, // 몇 개의 페이지 버튼을 보여줄 것인지
+            navigatepageNums: response.data.data.navigatepageNums, // 실제 페이지 번호 목록
+            navigateFirstPage: response.data.data.navigateFirstPage, // 페이지네이션에서 첫 페이지 번호
+            navigateLastPage: response.data.data.navigateLastPage // 페이지네이션에서 마지막 페이지 번호
+        };
+
    } catch (error) {
        console.error('댓글 목록 불러오기 오류:', error);
    }
@ -372,6 +410,14 @@ const deletePost = async () => {
    }
 };

+// 페이지 변경
+const handlePageChange = (page) => {
+    if (page !== pagination.value.currentPage) {
+        pagination.value.currentPage = page;
+        fetchComments(page);
+    }
+};
+
 // 날짜
 const formattedDate = (dateString) => {
    if (!dateString) return "날짜 없음";
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@ -99,6 +99,7 @@ const handleProfileClick = async (user) => {
    if (user.MEMBERSEQ === userStore.user.id) {
      // 내 프로필을 클릭한 경우
      const response = await axios.get(`vacation/history`);
+      console.log(response)

      if (response.status === 200 && response.data) {
        myVacations.value = response.data.data.usedVacations || [];