From 8b56ce4e428659a2805c1b0074623a8bccab8564 Mon Sep 17 00:00:00 2001
From: Dang <wheodnjs2@naver.com>
Date: Tue, 18 Feb 2025 14:26:24 +0900
Subject: [PATCH 1/5] =?UTF-8?q?=EC=9E=91=EC=97=85=20=EB=82=B4=EC=9A=A9=20?=
 =?UTF-8?q?=EC=84=A4=EB=AA=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/wordDict/DictCard.vue  | 13 +++++++------
 src/components/wordDict/DictWrite.vue |  7 ++++++-
 src/views/wordDict/wordDict.vue       |  1 +
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/components/wordDict/DictCard.vue b/src/components/wordDict/DictCard.vue
index 8004a55..36825f5 100644
--- a/src/components/wordDict/DictCard.vue
+++ b/src/components/wordDict/DictCard.vue
@@ -87,7 +87,7 @@ const localCateList = ref([...props.cateList]);
 const selectedCategory = ref('');
 
 // cateList emit
-const emit = defineEmits(['update:cateList']);
+const emit = defineEmits(['update:cateList','refreshWordList']);
 
 // 글 수정 상태
 const isWriteVisible = ref(false);
@@ -126,6 +126,7 @@ const addCategory = (data) => {
     }
 }
 
+
 // 용어집 수정
 const editWord = (data) => {
     console.log('📌 수정할 데이터:', data);
@@ -142,15 +143,15 @@ const editWord = (data) => {
 
     axios.patch('worddict/updateWord', {
         WRDDICSEQ: data.id,
-        WRDDICCAT: 600104,
+        WRDDICCAT: data.category,
         WRDDICTTL: data.title,
-        WRDDICRIK: $common.deltaAsJson(data.content),
+        WRDDICCON: $common.deltaAsJson(data.content),
     })
     .then((res) => {
-        if (res.data.data === '1') {
+        if (res.data.data === 1) {
             toastStore.onToast('✅ 용어가 수정되었습니다.', 's');
-            isWriteVisible.value = false; // 성공 시에만 닫기
-            // getwordList(); // 목록 갱신
+            isWriteVisible.value = false;
+            emit('refreshWordList');
         } else {
             console.warn('⚠️ 서버 응답이 예상과 다릅니다:', res.data);
             toastStore.onToast('용어 수정이 정상적으로 처리되지 않았습니다.', 'e');
diff --git a/src/components/wordDict/DictWrite.vue b/src/components/wordDict/DictWrite.vue
index b6dd169..65bdceb 100644
--- a/src/components/wordDict/DictWrite.vue
+++ b/src/components/wordDict/DictWrite.vue
@@ -73,6 +73,11 @@ const addCategoryAlert = ref(false);
 //선택 카테고리
 const selectCategory = ref('');
 
+// 카테고리 상태
+const selectedCategory = computed(() => 
+    selectCategory.value === '' ? props.formValue : selectCategory.value
+);
+
 const props = defineProps({
     dataList: {
         type: Array,
@@ -133,7 +138,7 @@ const saveWord = () => {
     const wordData = {
         id: props.NumValue || null,
         title: wordTitle.value,
-        category: selectCategory.value,
+        category: selectedCategory.value,
         content: content.value,
     };
 
diff --git a/src/views/wordDict/wordDict.vue b/src/views/wordDict/wordDict.vue
index 9e083fe..68a060b 100644
--- a/src/views/wordDict/wordDict.vue
+++ b/src/views/wordDict/wordDict.vue
@@ -49,6 +49,7 @@
             :key="item.WRDDICSEQ"
             :item="item"
             :cateList="cateList"
+            @refreshWordList="getwordList"
         />
     </ul>
 

From 2c28645488112b1c03d1fea534b590fa776b1ecf Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Tue, 18 Feb 2025 14:30:14 +0900
Subject: [PATCH 2/5] =?UTF-8?q?=EB=A8=B8=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/modal/VacationModal.vue    | 198 ++++++++++++----------
 src/views/board/BoardList.vue             |   2 +
 src/views/board/BoardView.vue             |  54 +++++-
 src/views/vacation/VacationManagement.vue |   1 +
 4 files changed, 161 insertions(+), 94 deletions(-)

diff --git a/src/components/modal/VacationModal.vue b/src/components/modal/VacationModal.vue
index d60da1a..e1b705b 100644
--- 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>
diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index a5e4135..34740d2 100644
--- 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,
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index b6c68f4..2eb5e83 100644
--- 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 "날짜 없음";
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index 86e1346..bfb72c6 100644
--- 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 || [];

From 8c29873731718d2a70a4782869532e8721e85d6d Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Tue, 18 Feb 2025 14:46:20 +0900
Subject: [PATCH 3/5] =?UTF-8?q?=EB=A8=B8=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardCommentArea.vue |  50 +++++-
 src/components/modal/VacationModal.vue    | 195 +++++++++++-----------
 src/views/board/BoardView.vue             |   4 +-
 3 files changed, 142 insertions(+), 107 deletions(-)

diff --git a/src/components/board/BoardCommentArea.vue b/src/components/board/BoardCommentArea.vue
index e408ffe..db85f1d 100644
--- 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>
diff --git a/src/components/modal/VacationModal.vue b/src/components/modal/VacationModal.vue
index e1b705b..fd27de0 100644
--- a/src/components/modal/VacationModal.vue
+++ b/src/components/modal/VacationModal.vue
@@ -1,49 +1,41 @@
 <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>
+            <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 class="vacation-type">
-                        ({{ vacation.halfDay ? '반차' : '풀 연차' }})
-                        <span v-if="vacation.senderId"> (보낸 연차)</span>
-                    </span>
-                </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>
-    </template>
+</template>
 
-    <script setup>
-    import { defineProps, defineEmits, computed } from "vue";
+<script setup>
+import { defineProps, defineEmits, computed } from "vue";
 
-    const props = defineProps({
+const props = defineProps({
     isOpen: Boolean,
     myVacations: {
         type: Array,
@@ -57,50 +49,57 @@
         type: Object,
         default: () => ({}),
     },
-    });
+});
 
-    const emit = defineEmits(["close"]);
+const emit = defineEmits(["close"]);
 
-    // ✅ 사용한 연차 개수
-    const totalUsedVacationCount = computed(() => props.myVacations.length);
+// ✅ 사용한 연차 + 받은 연차 통합 후 내림차순 정렬
+const usedVacations = computed(() =>
+    props.myVacations.map(v => ({ ...v, type: "used" }))
+);
 
-    // ✅ 사용한 연차 + 받은 연차 통합 후 내림차순 정렬
-    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 receivedVacations = computed(() =>
-        props.receivedVacations.map(v => ({ ...v, type: "received" }))
-    );
+// ✅ 연차 개수 반영된 인덱스 반환 (누적 합산)
+const getVacationIndex = (index) => {
+    let count = 0;
+    for (let i = 0; i <= index; i++) {
+        const v = mergedVacations.value[i];
+        count += v.used_quota; // 누적하여 더함
+    }
+    return count;
+};
 
-    // ✅ 정확한 정렬 및 리스트 병합
-    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 형식
+};
 
-    // ✅ 날짜 형식 변환 (YYYY-MM-DD)
-    const formatDate = (dateString) => {
-        const date = new Date(dateString);
-        return date.toISOString().split("T")[0]; // YYYY-MM-DD 형식
-    };
+const closeModal = () => {
+    emit("close");
+};
+</script>
 
-    const closeModal = () => {
-        emit("close");
-    };
-    </script>
-
-    <style scoped>
-    /* 모달 스타일 */
-    .modal-dialog {
+<style scoped>
+/* 모달 스타일 */
+.modal-dialog {
     display: flex;
     justify-content: center;
     align-items: center;
-    }
+}
 
-    /* 스크롤 가능한 모달 */
-    .modal-content {
+/* 스크롤 가능한 모달 */
+.modal-content {
     max-height: 60vh;
     overflow-y: auto;
     padding: 20px;
@@ -108,10 +107,10 @@
     background: white;
     border-radius: 8px;
     box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-    }
+}
 
-    /* 닫기 버튼 */
-    .close-btn {
+/* 닫기 버튼 */
+.close-btn {
     position: absolute;
     top: 10px;
     right: 10px;
@@ -120,17 +119,17 @@
     font-size: 18px;
     cursor: pointer;
     font-weight: bold;
-    }
+}
 
-    /* 리스트 기본 스타일 */
-    .vacation-list {
+/* 리스트 기본 스타일 */
+.vacation-list {
     list-style-type: none;
     padding-left: 0;
     margin-top: 15px;
-    }
+}
 
-    /* 리스트 아이템 */
-    .vacation-item {
+/* 리스트 아이템 */
+.vacation-item {
     display: flex;
     align-items: center;
     font-size: 16px;
@@ -139,49 +138,49 @@
     padding: 5px 10px;
     border-radius: 5px;
     background: #f9f9f9;
-    }
+}
 
-    /* 인덱스 (연차 사용 개수) */
-    .vacation-index {
+/* 인덱스 (연차 사용 개수) */
+.vacation-index {
     font-weight: bold;
     font-size: 16px;
     margin-right: 8px;
     color: #333;
-    }
+}
 
-    /* "-" 빨간색 */
-    .minus-symbol {
+/* "-" 빨간색 */
+.minus-symbol {
     color: red;
     font-weight: bold;
     margin-right: 8px;
-    }
+}
 
-    /* "+" 파란색 */
-    plus-symbol {
+/* "+" 파란색 */
+.plus-symbol {
     color: blue;
     font-weight: bold;
     margin-right: 8px;
-    }
+}
 
-    /* 날짜 스타일 */
-    .vacation-date {
+/* 날짜 스타일 */
+.vacation-date {
     font-size: 16px;
     color: #333;
-    }
+}
 
-    /* 연차 유형 스타일 */
-    .vacation-type {
+/* 연차 유형 스타일 */
+.vacation-type {
     font-size: 14px;
     font-weight: normal;
     color: gray;
     margin-left: 5px;
-    }
+}
 
-    /* 연차 데이터 없음 */
-    .no-data {
+/* 연차 데이터 없음 */
+.no-data {
     text-align: center;
     font-size: 14px;
     color: gray;
     margin-top: 10px;
-    }
-    </style>
+}
+</style>
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index 2eb5e83..2559318 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -221,12 +221,12 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
 };
 
 // 댓글 목록 조회
-const fetchComments = async (pageNum  = 1) => {
+const fetchComments = async (page  = 1) => {
     try {
         const response = await axios.get(`board/${currentBoardId.value}/comments`, {
             params: {
                 LOCBRDSEQ: currentBoardId.value,
-                pageNum: pageNum
+                page
             }
         });
         console.log("목록 API 응답 데이터:", response.data);

From 6f436579410797c3d94efcd1afa8e9c019ceab9a Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Tue, 18 Feb 2025 15:04:25 +0900
Subject: [PATCH 4/5] =?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=EB=AF=B8=EC=99=84=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/ProjectCard.vue     |  2 +-
 src/components/list/ProjectCardList.vue | 27 ++++++++++++++++---------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/components/list/ProjectCard.vue b/src/components/list/ProjectCard.vue
index a690309..7ea65c0 100644
--- 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 정의
diff --git a/src/components/list/ProjectCardList.vue b/src/components/list/ProjectCardList.vue
index 0f7a36f..6f65d9f 100644
--- 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');

From 1daafb3c758dfd3caeb45f1ce676702844a52474 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Tue, 18 Feb 2025 15:46:11 +0900
Subject: [PATCH 5/5] =?UTF-8?q?=EC=A3=BC=EC=84=9D=20=ED=92=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/axios-interceptor.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/axios-interceptor.js b/src/common/axios-interceptor.js
index 2706750..c4163dd 100644
--- 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) {