머지

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">
+                    <button class="btn btn-primary" @click="handleCommentSubmit">
-                        <i class="icon-base bx bx-check"></i>
+                        <!-- <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>

src/components/modal/VacationModal.vue

@@ -7,13 +7,9 @@
             <!-- 연차 사용 및 받은 연차 리스트 -->
             <div class="modal-body" v-if="mergedVacations.length > 0">
                 <ol class="vacation-list">
-            <li
+                    <li v-for="(vacation, index) in mergedVacations" :key="index" class="vacation-item">
-                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) }})
+                            {{ getVacationIndex(index) }})
                         </span>
                         <span :class="vacation.type === 'used' ? 'minus-symbol' : 'plus-symbol'">
                             {{ vacation.type === 'used' ? '-' : '+' }}
@@ -23,10 +19,6 @@
                             class="vacation-date"
                         >
                             {{ formatDate(vacation.date) }}
-                    <span class="vacation-type">
-                        ({{ vacation.halfDay ? '반차' : '풀 연차' }})
-                        <span v-if="vacation.senderId"> (보낸 연차)</span>
-                    </span>
                         </span>
                     </li>
                 </ol>
@@ -61,9 +53,6 @@
 
 const emit = defineEmits(["close"]);
 
-    // ✅ 사용한 연차 개수
-    const totalUsedVacationCount = computed(() => props.myVacations.length);
-
 // ✅ 사용한 연차 + 받은 연차 통합 후 내림차순 정렬
 const usedVacations = computed(() =>
     props.myVacations.map(v => ({ ...v, type: "used" }))
@@ -80,6 +69,16 @@
     );
 });
 
+// ✅ 연차 개수 반영된 인덱스 반환 (누적 합산)
+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);
@@ -157,7 +156,7 @@
 }
 
 /* "+" 파란색 */
-    plus-symbol {
+.plus-symbol {
     color: blue;
     font-weight: bold;
     margin-right: 8px;

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);