머지

2025-02-18 14:30:14 +09:00 · 2025-02-18 14:30:14 +09:00 · 2c28645488
commit 2c28645488
parent 922b7e0904
4 changed files with 161 additions and 94 deletions
--- a/src/components/modal/VacationModal.vue
+++ b/src/components/modal/VacationModal.vue
@ -13,13 +13,21 @@
                class="vacation-item"
            >
                <span v-if="vacation.type === 'used'" class="vacation-index">
-                {{ totalUsedVacationCount - usedVacations.findIndex(v => v.date === vacation.date) }} )
+                {{ 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>
+                <span
+                    :style="{ color: userColors[vacation.senderId || vacation.receiverId] || '#000' }"
+                    class="vacation-date"
+                >
+                    {{ formatDate(vacation.date) }}
+                    <span class="vacation-type">
+                        ({{ vacation.halfDay ? '반차' : '풀 연차' }})
+                        <span v-if="vacation.senderId"> (보낸 연차)</span>
+                    </span>
+                </span>
            </li>
            </ol>
        </div>
@ -57,113 +65,123 @@
    const totalUsedVacationCount = computed(() => props.myVacations.length);

    // ✅ 사용한 연차 + 받은 연차 통합 후 내림차순 정렬
-    const usedVacations = computed(() => props.myVacations.map(v => ({ ...v, type: "used" })));
-    const receivedVacations = computed(() => props.receivedVacations
-        .filter(v => !v.senderId) // ✅ 보낸 사람이 있는 경우 리스트에서 제외
-        .map(v => ({ ...v, type: "received" }))
+    const usedVacations = computed(() =>
+        props.myVacations.map(v => ({ ...v, type: "used" }))
    );

-    const mergedVacations = computed(() => {
-    return [...usedVacations.value, ...receivedVacations.value].sort(
-        (a, b) => new Date(b.date) - new Date(a.date)
+    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)
+        );
    });

    // ✅ 날짜 형식 변환 (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;
+    }

-<style scoped>
-/* 모달 스타일 */
-.modal-dialog {
-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);
+    }

-/* 스크롤 가능한 모달 */
-.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);
-}
+    /* 닫기 버튼 */
+    .close-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: none;
+    border: none;
+    font-size: 18px;
+    cursor: pointer;
+    font-weight: bold;
+    }

-/* 닫기 버튼 */
-.close-btn {
-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;
+    }

-/* 리스트 기본 스타일 */
-.vacation-list {
-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;
+    }

-/* 리스트 아이템 */
-.vacation-item {
-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;
+    }

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

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

-/* "+" 파란색 */
-.plus-symbol {
-color: blue;
-font-weight: bold;
-margin-right: 8px;
-}
+    /* 날짜 스타일 */
+    .vacation-date {
+    font-size: 16px;
+    color: #333;
+    }

-/* 날짜 스타일 */
-.vacation-date {
-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;
-}
-</style>
+    /* 연차 데이터 없음 */
+    .no-data {
+    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/BoardCommentArea.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 (pageNum  = 1) => {
    try {
        const response = await axios.get(`board/${currentBoardId.value}/comments`, {
-            params: { LOCBRDSEQ: currentBoardId.value }
+            params: {
+                LOCBRDSEQ: currentBoardId.value,
+                pageNum: pageNum
+            }
        });
        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 || [];