diff --git a/public/css/custom.css b/public/css/custom.css
index e9d477a..8127a4c 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -3,6 +3,9 @@
 
 /* 휴가 */
 
+.fc-daygrid-event {
+  pointer-events: none !important;
+}
 /* 이벤트 선 없게 */
 .fc-event {
   border: none;
diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue
index c7e9220..89fd3ad 100644
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@@ -16,7 +16,7 @@
             @updateReaction="handleUpdateReaction"
         />
         <!-- 댓글 비밀번호 입력창 (익명일 경우) -->
-        <div v-if="currentPasswordCommentId === comment.commentId && unknown" class="mt-3 w-25 ms-auto">
+        <div v-if="currentPasswordCommentId === comment.commentId && unknown && comment.author == '익명'" class="mt-3 w-25 ms-auto">
             <div class="input-group">
                 <input
                     type="password"
@@ -43,155 +43,133 @@
             </template>
         </div>
         <!-- <p>현재 isDeleted 값: {{ isDeleted }}</p> -->
-        
+
         <!-- <template v-if="isDeleted">
             <p class="m-0 text-muted">댓글이 삭제되었습니다.</p>
         </template> -->
-        <PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6"/>
-        <BoardCommentArea v-if="isComment" :unknown="unknown" @submitComment="submitComment"/>
+        <PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6" />
+        <BoardCommentArea v-if="isComment" :unknown="unknown" @submitComment="submitComment" :commnetId="comment.commentId" />
 
-        <!-- 대댓글 -->
-        <ul v-if="comment.children && comment.children.length" class="list-unstyled">
-            <li
-                v-for="child in comment.children"
-                :key="child.commentId"
-                class="mt-8 pt-6 ps-10 border-top"
-            >
-                <BoardComment
-                    :comment="child"
-                    :unknown="child.author === '익명'"
-                    :isPlusButton="false"
-                    :isLike="true"
-                    :isCommentProfile="true"
-                    :isCommentAuthor="child.isCommentAuthor"
-                    :isCommentPassword="isCommentPassword"
-                    :currentPasswordCommentId="currentPasswordCommentId"
-                    :passwordCommentAlert="passwordCommentAlert"
-                    :password="password"
-                    @editClick="handleReplyEditClick"
-                    @deleteClick="$emit('deleteClick', child)"
-                    @submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
-                    @cancelEdit="$emit('cancelEdit', child)"
-                    @submitComment="submitComment"
-                    @updateReaction="handleUpdateReaction"
-                    @submitPassword="$emit('submitPassword', child, password)"
-                    @update:password="$emit('update:password', $event)"
-                />
-            </li>
-        </ul>
+        <slot name="reply"></slot>
     </div>
 </template>
 
 <script setup>
-import { defineProps, defineEmits, ref, computed, watch } from 'vue';
-import BoardProfile from './BoardProfile.vue';
-import BoardCommentArea from './BoardCommentArea.vue';
-import PlusButton from '../button/PlusBtn.vue';
-import SaveBtn from '../button/SaveBtn.vue';
+    import { defineProps, defineEmits, ref, computed, watch } from 'vue';
+    import BoardProfile from './BoardProfile.vue';
+    import BoardCommentArea from './BoardCommentArea.vue';
+    import PlusButton from '../button/PlusBtn.vue';
+    import SaveBtn from '../button/SaveBtn.vue';
 
-const props = defineProps({
-    comment: {
-        type: Object,
-        required: true,
-    },
-    unknown: {
-        type: Boolean,
-        default: false,
-    },
-    isCommentAuthor: {
-        type: Boolean,
-        default: false,
-    },
-    isPlusButton: {
-        type: Boolean,
-        default: true,
-    },
-    isLike: {
-        type: Boolean,
-        default: false,
-    },
-    isEditTextarea: {
-        type: Boolean,
-        default: false
-    },
-    isDeleted: {
-        type: Boolean,
-        default: false
-    },
-    isCommentPassword: {
-        type: Boolean,
-        default: false,
-    },
-    passwordCommentAlert: {
-        type: String,
-        default: ''
-    },
-    currentPasswordCommentId: {
-        type: Number
-    },
-    password:{
-        type: String
-    },
-});
-
-// emits 정의
-const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'submitEdit', 'cancelEdit', 'update:password']);
-
-const localEditedContent = ref(props.comment.content);
-
-// 댓글 입력 창 토글
-const isComment = ref(false);
-const toggleComment = () => {
-    isComment.value = !isComment.value;
-};
-
-// 부모 컴포넌트에 대댓글 추가 요청
-const submitComment = (newComment) => {
-    emit('submitComment', { parentId: props.comment.commentId, ...newComment, LOCBRDTYP: newComment.LOCBRDTYP });
-    isComment.value = false;
-};
-
-// 좋아요, 싫어요
-const handleUpdateReaction = (reactionData) => {
-    emit('updateReaction', {
-        boardId: props.comment.boardId,
-        commentId: props.comment.commentId || reactionData.commentId,
-        ...reactionData,
+    const props = defineProps({
+        comment: {
+            type: Object,
+            required: true,
+        },
+        unknown: {
+            type: Boolean,
+            default: false,
+        },
+        isCommentAuthor: {
+            type: Boolean,
+            default: false,
+        },
+        isPlusButton: {
+            type: Boolean,
+            default: true,
+        },
+        isLike: {
+            type: Boolean,
+            default: false,
+        },
+        isEditTextarea: {
+            type: Boolean,
+            default: false,
+        },
+        isDeleted: {
+            type: Boolean,
+            default: false,
+        },
+        isCommentPassword: {
+            type: Boolean,
+            default: false,
+        },
+        passwordCommentAlert: {
+            type: String,
+            default: '',
+        },
+        currentPasswordCommentId: {
+            type: Number,
+        },
+        password: {
+            type: String,
+        },
     });
 
-};
+    // emits 정의
+    const emit = defineEmits([
+        'submitComment',
+        'updateReaction',
+        'editClick',
+        'deleteClick',
+        'submitPassword',
+        'submitEdit',
+        'cancelEdit',
+        'update:password',
+    ]);
 
-// 비밀번호 확인
-const logPasswordAndEmit = () => {
-    emit('submitPassword', props.comment, props.password);
-};
+    const localEditedContent = ref(props.comment.content);
 
-watch(() => props.comment.isEditTextarea, (newVal) => {
-    if (newVal) {
-        localEditedContent.value = props.comment.content;
-    }
-});
+    // 댓글 입력 창 토글
+    const isComment = ref(false);
+    const toggleComment = () => {
+        isComment.value = !isComment.value;
+    };
 
-// watch(() => props.comment.isDeleted, () => {
-//     console.log("BoardComment - isDeleted 상태 변경됨:", newVal);
+    // 부모 컴포넌트에 대댓글 추가 요청
+    const submitComment = newComment => {
+        emit('submitComment', { parentId: props.comment.commentId, ...newComment, LOCBRDTYP: newComment.LOCBRDTYP });
+        isComment.value = false;
+    };
 
-//     if (newVal) {
-//         localEditedContent.value = "댓글이 삭제되었습니다."; // UI 반영
-//         props.comment.isEditTextarea = false;
-//     }
-// });
+    // 좋아요, 싫어요
+    const handleUpdateReaction = reactionData => {
+        emit('updateReaction', {
+            boardId: props.comment.boardId,
+            commentId: props.comment.commentId || reactionData.commentId,
+            ...reactionData,
+        });
+    };
 
-// 수정버튼
-const submitEdit = () => {
-    emit('submitEdit', props.comment, localEditedContent.value);
-};
+    // 비밀번호 확인
+    const logPasswordAndEmit = () => {
+        emit('submitPassword', props.comment, props.password);
+    };
 
-const handleEditClick = () => {
-    emit('editClick', props.comment);
-}
+    watch(
+        () => props.comment.isEditTextarea,
+        newVal => {
+            if (newVal) {
+                localEditedContent.value = props.comment.content;
+            }
+        },
+    );
 
-const handleReplyEditClick = (comment) => {
-    emit('editClick', comment);
-}
+    // watch(() => props.comment.isDeleted, () => {
+    //     console.log("BoardComment - isDeleted 상태 변경됨:", newVal);
 
+    //     if (newVal) {
+    //         localEditedContent.value = "댓글이 삭제되었습니다."; // UI 반영
+    //         props.comment.isEditTextarea = false;
+    //     }
+    // });
+
+    // 수정버튼
+    const submitEdit = () => {
+        emit('submitEdit', props.comment, localEditedContent.value);
+    };
+
+    const handleEditClick = () => {
+        emit('editClick', props.comment);
+    };
 </script>
diff --git a/src/components/board/BoardCommentArea.vue b/src/components/board/BoardCommentArea.vue
index 283ce8b..b304795 100644
--- a/src/components/board/BoardCommentArea.vue
+++ b/src/components/board/BoardCommentArea.vue
@@ -11,7 +11,7 @@
                 </div> -->
                 <!-- 텍스트박스 -->
                 <div class="w-100">
-                    <textarea class="form-control" placeholder="댓글 달기" rows="3" v-model="comment"></textarea>
+                    <textarea class="form-control" placeholder="댓글 달기" rows="3" :maxlength="maxLength" v-model="comment"></textarea>
                     <span v-if="commentAlert" class="invalid-feedback d-block text-start ms-2">{{ commentAlert }}</span>
                     <span v-else class="invalid-feedback d-block text-start ms-2">{{ textAlert }}</span>
                 </div>
@@ -22,8 +22,8 @@
                 <div class="d-flex flex-wrap align-items-center">
                     <!-- 익명 체크박스 (익명게시판일 경우에만)-->
                     <div v-if="unknown" class="form-check form-check-inline mb-0 me-4">
-                        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" v-model="isCheck" />
-                        <label class="form-check-label" for="inlineCheckbox1">익명</label>
+                        <input class="form-check-input" type="checkbox" :id="`checkboxAnnonymous${commnetId}`" v-model="isCheck" />
+                        <label class="form-check-label" :for="`checkboxAnnonymous${commnetId}`">익명</label>
                     </div>
 
                     <!-- 비밀번호 입력 필드 (익명이 선택된 경우에만 표시) -->
@@ -51,78 +51,84 @@
 </template>
 
 <script setup>
-import { ref, defineEmits, defineProps, watch, inject } from 'vue';
-import SaveBtn from '../button/SaveBtn.vue';
+    import { ref, defineEmits, defineProps, watch, inject } from 'vue';
+    import SaveBtn from '../button/SaveBtn.vue';
 
-const props = defineProps({
-    unknown: {
-        type: Boolean,
-        default: true,
-    },
-    parentId: {
-        type: Number,
-        default: 0,
-    },
-    passwordAlert: {
-        type: String,
-        default: '',
-    },
-    commentAlert: {
-        type: String,
-        default: '',
-    },
-});
-
-const $common = inject('common');
-const comment = ref('');
-const password = ref('');
-const isCheck = ref(false);
-const textAlert = ref('');
-const passwordAlert2 = ref('');
-
-const emit = defineEmits(['submitComment']);
-
-const handleCommentSubmit = () => {
-    if (!$common.isNotEmpty(comment.value)) {
-        textAlert.value = '댓글을 입력하세요';
-        return false;
-    } else {
-        textAlert.value = '';
-    }
-
-    if (isCheck.value && !$common.isNotEmpty(password.value)) {
-        passwordAlert2.value = '비밀번호를 입력하세요';
-        return false;
-    } else {
-        passwordAlert2.value = '';
-    }
-
-    // 댓글 제출
-    emit('submitComment', {
-        comment: comment.value,
-        password: isCheck.value ? password.value : '',
-        isCheck: isCheck.value,
-        LOCBRDTYP: isCheck.value ? '300102' : null, // 익명일 경우 '300102' 설정
+    const props = defineProps({
+        unknown: {
+            type: Boolean,
+            default: true,
+        },
+        parentId: {
+            type: Number,
+            default: 0,
+        },
+        passwordAlert: {
+            type: String,
+            default: '',
+        },
+        commentAlert: {
+            type: String,
+            default: '',
+        },
+        maxLength: {
+            type: Number,
+            default: 500,
+        },
+        commnetId: {
+            type: Number,
+        },
     });
 
-    // 제출 후 입력 필드 리셋
-    resetCommentForm();
-};
+    const $common = inject('common');
+    const comment = ref('');
+    const password = ref('');
+    const isCheck = ref(false);
+    const textAlert = ref('');
+    const passwordAlert2 = ref('');
 
-// 입력 필드 리셋 함수 추가
-const resetCommentForm = () => {
-    comment.value = '';
-    password.value = '';
-    isCheck.value = false;
-};
+    const emit = defineEmits(['submitComment']);
 
-watch(
-    () => props.passwordAlert,
-    () => {
-        if (!props.passwordAlert) {
-            resetCommentForm();
+    const handleCommentSubmit = () => {
+        if (!$common.isNotEmpty(comment.value)) {
+            textAlert.value = '댓글을 입력하세요';
+            return false;
+        } else {
+            textAlert.value = '';
         }
-    }
-);
-</script>
 
+        if (isCheck.value && !$common.isNotEmpty(password.value)) {
+            passwordAlert2.value = '비밀번호를 입력하세요';
+            return false;
+        } else {
+            passwordAlert2.value = '';
+        }
+
+        // 댓글 제출
+        emit('submitComment', {
+            comment: comment.value,
+            password: isCheck.value ? password.value : '',
+            isCheck: isCheck.value,
+            LOCBRDTYP: isCheck.value ? '300102' : null, // 익명일 경우 '300102' 설정
+        });
+
+        // 제출 후 입력 필드 리셋
+        resetCommentForm();
+    };
+
+    // 입력 필드 리셋 함수 추가
+    const resetCommentForm = () => {
+        comment.value = '';
+        password.value = '';
+        isCheck.value = false;
+    };
+
+    watch(
+        () => props.passwordAlert,
+        () => {
+            if (!props.passwordAlert) {
+                resetCommentForm();
+            }
+        },
+    );
+</script>
diff --git a/src/components/board/BoardCommentList.vue b/src/components/board/BoardCommentList.vue
index 0987a4c..65091ae 100644
--- a/src/components/board/BoardCommentList.vue
+++ b/src/components/board/BoardCommentList.vue
@@ -1,17 +1,13 @@
 <template>
     <ul class="list-unstyled mt-10">
-        <li
-            v-for="comment in comments"
-            :key="comment.commentId"
-            class="mt-6 border-bottom pb-6"
-        >
+        <li v-for="comment in comments" :key="comment.commentId" class="mt-6 border-bottom pb-6">
             <BoardComment
                 :unknown="unknown"
                 :comment="comment"
                 :isCommentAuthor="comment.isCommentAuthor"
                 :isEditTextarea="comment.isEditTextarea"
                 :isDeleted="isDeleted"
-                :isCommentPassword="isCommentPassword" 
+                :isCommentPassword="isCommentPassword"
                 :passwordCommentAlert="passwordCommentAlert || ''"
                 :currentPasswordCommentId="currentPasswordCommentId"
                 :password="password"
@@ -21,104 +17,148 @@
                 @submitComment="submitComment"
                 @submitEdit="handleSubmitEdit"
                 @cancelEdit="handleCancelEdit"
-                @updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
+                @updateReaction="reactionData => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
                 @update:password="updatePassword"
-            />
+            >
+                <!-- 대댓글 -->
+                <template #reply>
+                    <ul v-if="comment.children && comment.children.length" class="list-unstyled">
+                        <li v-for="(child, index) in comment.children" :key="child.commentId" class="mt-8 pt-6 ps-10 border-top">
+                            <BoardComment
+                                :comment="child"
+                                :unknown="child.author === '익명'"
+                                :isPlusButton="false"
+                                :isLike="true"
+                                :isCommentProfile="true"
+                                :isCommentAuthor="child.isCommentAuthor"
+                                :isCommentPassword="isCommentPassword"
+                                :currentPasswordCommentId="currentPasswordCommentId"
+                                :passwordCommentAlert="passwordCommentAlert"
+                                :password="password"
+                                @editClick="handleReplyEditClick"
+                                @deleteClick="$emit('deleteClick', child)"
+                                @submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
+                                @cancelEdit="$emit('cancelEdit', child)"
+                                @submitComment="submitComment"
+                                @updateReaction="handleUpdateReaction"
+                                @submitPassword="$emit('submitPassword', child, password)"
+                                @update:password="$emit('update:password', $event)"
+                            />
+                        </li>
+                    </ul>
+                </template>
+            </BoardComment>
         </li>
     </ul>
 </template>
 
 <script setup>
-import { defineProps, defineEmits } from 'vue';
-import BoardComment from './BoardComment.vue'
+    import { defineProps, defineEmits } from 'vue';
+    import BoardComment from './BoardComment.vue';
 
-const props = defineProps({
-    comments: {
-        type: Array,
-        required: true,
-        default: () => []
-    },
-    unknown: {
-        type: Boolean,
-        default: true,
-    },
-    isCommentAuthor: {
-        type: Boolean,
-        default: false,
-    },
-    isCommentPassword: {
-        type: Boolean,
-        default: false,
-    },
-    isEditTextarea: {
-        type: Boolean,
-        default: false,
-    },
-    isDeleted: {
-        type: Boolean,
-        default: false,
-    },
-    passwordCommentAlert: {
-        type: String,
-        default: ''
-    },
-    currentPasswordCommentId: {
-        type: Number
-    },
-    password:{
-        type: String
-    },
-});
+    const props = defineProps({
+        comments: {
+            type: Array,
+            required: true,
+            default: () => [],
+        },
+        unknown: {
+            type: Boolean,
+            default: true,
+        },
+        isCommentAuthor: {
+            type: Boolean,
+            default: false,
+        },
+        isCommentPassword: {
+            type: Boolean,
+            default: false,
+        },
+        isEditTextarea: {
+            type: Boolean,
+            default: false,
+        },
+        isDeleted: {
+            type: Boolean,
+            default: false,
+        },
+        passwordCommentAlert: {
+            type: String,
+            default: '',
+        },
+        currentPasswordCommentId: {
+            type: Number,
+        },
+        password: {
+            type: String,
+        },
+        index: {
+            type: Number,
+        },
+    });
 
-const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'clearPassword','submitEdit', 'update:password']);
+    const emit = defineEmits([
+        'submitComment',
+        'updateReaction',
+        'editClick',
+        'deleteClick',
+        'submitPassword',
+        'clearPassword',
+        'submitEdit',
+        'update:password',
+    ]);
 
-const submitComment = (replyData) => {
-    emit('submitComment', replyData);
-};
-
-const handleUpdateReaction = (reactionData, commentId, boardId) => {
-    const updatedReactionData = {
-        ...reactionData,  
-        commentId: commentId || reactionData.commentId, 
-        boardId: boardId || reactionData.boardId,
+    const submitComment = replyData => {
+        emit('submitComment', replyData);
     };
 
-    emit('updateReaction', updatedReactionData);
-}
+    const handleUpdateReaction = (reactionData, commentId, boardId) => {
+        const updatedReactionData = {
+            ...reactionData,
+            commentId: commentId || reactionData.commentId,
+            boardId: boardId || reactionData.boardId,
+        };
 
-const submitPassword = (comment, password) => {
-    emit('submitPassword', comment, password);
-};
+        emit('updateReaction', updatedReactionData);
+    };
 
-const handleEditClick = (comment) => {
-    if (comment.parentId) {
-        emit('editClick', comment); // 대댓글
-    } else {
-        emit('editClick', comment); // 댓글
-    }
-};
+    const submitPassword = (comment, password) => {
+        emit('submitPassword', comment, password);
+    };
 
-const handleSubmitEdit = (comment, editedContent) => {
-    emit("submitEdit", comment, editedContent);
-};
+    const handleEditClick = comment => {
+        if (comment.parentId) {
+            emit('editClick', comment); // 대댓글
+        } else {
+            emit('editClick', comment); // 댓글
+        }
+    };
 
-const handleDeleteClick = (comment) => {
-    if (comment.parentId) {
-        emit('deleteClick', comment); // 대댓글 삭제
-    } else {
-        emit('deleteClick', comment); // 댓글 삭제
-    }
-};
+    const handleSubmitEdit = (comment, editedContent) => {
+        emit('submitEdit', comment, editedContent);
+    };
 
-const handleCancelEdit = (comment) => {
-    if (comment.parentId) {
-        emit('cancelEdit', comment); // 대댓글 수정 취소
-    } else {
-        emit('cancelEdit', comment); // 댓글 수정 취소
-    }
-};
+    const handleDeleteClick = comment => {
+        if (comment.parentId) {
+            emit('deleteClick', comment); // 대댓글 삭제
+        } else {
+            emit('deleteClick', comment); // 댓글 삭제
+        }
+    };
 
-const updatePassword = (newPassword) => {
-    emit('update:password', newPassword);
-};
+    const handleCancelEdit = comment => {
+        if (comment.parentId) {
+            emit('cancelEdit', comment); // 대댓글 수정 취소
+        } else {
+            emit('cancelEdit', comment); // 댓글 수정 취소
+        }
+    };
+
+    const updatePassword = newPassword => {
+        emit('update:password', newPassword);
+    };
+
+    const handleReplyEditClick = comment => {
+        emit('editClick', comment);
+    };
 </script>
diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index 87e08bc..b183865 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -40,7 +40,7 @@
     const defaultProfile = '/img/icons/icon.png';
 
     // 서버의 이미지 경로 (Vue 환경 변수 사용 가능)
-    const baseUrl = 'http://localhost:10325/'; // API 서버 URL
+    const baseUrl = import.meta.env.VITE_SERVER; // API 서버 URL
 
     // Props 정의
     const props = defineProps({
diff --git a/src/components/button/BoardRecommendBtn.vue b/src/components/button/BoardRecommendBtn.vue
index 8ffa805..3c951bd 100644
--- a/src/components/button/BoardRecommendBtn.vue
+++ b/src/components/button/BoardRecommendBtn.vue
@@ -1,124 +1,123 @@
 <template v-if="isRecommend">
-    <button class="btn btn-label-primary btn-icon" :class="{'clicked': likeClicked, 'big': bigBtn}" @click="handleLike">
+    <button class="btn btn-label-primary btn-icon" :class="{ clicked: likeClicked, big: bigBtn }" @click="handleLike">
         <i class="fa-regular fa-thumbs-up"></i> <span class="num">{{ likeCount }}</span>
     </button>
-    <button class="btn btn-label-danger btn-icon" :class="{'clicked': dislikeClicked, 'big': bigBtn}" @click="handleDislike">
+    <button class="btn btn-label-danger btn-icon" :class="{ clicked: dislikeClicked, big: bigBtn }" @click="handleDislike">
         <i class="fa-regular fa-thumbs-down"></i> <span class="num">{{ dislikeCount }}</span>
     </button>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+    import { ref, computed } from 'vue';
 
-const props = defineProps({
-    comment: {
-        type: Object,
-        default: () => ({}),
-    },
-    likeClicked : {
-        type : Boolean,
-        default : false,
-    },
-    dislikeClicked : {
-        type : Boolean,
-        default : false,
-    },
-    bigBtn : {
-        type :Boolean,
-        default : false,
-    },
-    isRecommend: {
-        type:Boolean,
-        default:true,
-    },
-    boardId: {
-        type: Number,
-        required: true,
-    },
-    commentId: {
-        type: [Number, null],
-        default: null,
-    },
-    likeCount: {
-        type: Number,
-        default: 0,
-    },
-    dislikeCount: {
-        type: Number,
-        default: 0,
-    },
-});
+    const props = defineProps({
+        comment: {
+            type: Object,
+            default: () => ({}),
+        },
+        likeClicked: {
+            type: Boolean,
+            default: false,
+        },
+        dislikeClicked: {
+            type: Boolean,
+            default: false,
+        },
+        bigBtn: {
+            type: Boolean,
+            default: false,
+        },
+        isRecommend: {
+            type: Boolean,
+            default: true,
+        },
+        boardId: {
+            type: Number,
+            required: true,
+        },
+        commentId: {
+            type: [Number, null],
+            default: null,
+        },
+        likeCount: {
+            type: Number,
+            default: 0,
+        },
+        dislikeCount: {
+            type: Number,
+            default: 0,
+        },
+    });
 
-const emit = defineEmits(['updateReaction']);
+    const emit = defineEmits(['updateReaction']);
 
-const likeClicked = ref(props.likeClicked);
-const dislikeClicked = ref(props.dislikeClicked);
-const likeCount = computed(() => props.comment?.likeCount ?? props.likeCount);
-const dislikeCount = computed(() => props.comment?.dislikeCount ?? props.dislikeCount);
+    const likeClicked = ref(props.likeClicked);
+    const dislikeClicked = ref(props.dislikeClicked);
+    const likeCount = computed(() => props.comment?.likeCount ?? props.likeCount);
+    const dislikeCount = computed(() => props.comment?.dislikeCount ?? props.dislikeCount);
 
-const handleLike = () => {
-    const isLike = !likeClicked.value;
-    const isDislike = false; 
+    const handleLike = () => {
+        const isLike = !likeClicked.value;
+        const isDislike = false;
 
-    emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
-    likeClicked.value = isLike;
-    dislikeClicked.value = false;
-};
+        emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
+        likeClicked.value = isLike;
+        dislikeClicked.value = false;
+    };
 
-const handleDislike = () => {
-    const isDislike = !dislikeClicked.value;
-    const isLike = false;
-
-    emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
-    dislikeClicked.value = isDislike;
-    likeClicked.value = false;
-};
+    const handleDislike = () => {
+        const isDislike = !dislikeClicked.value;
+        const isLike = false;
 
+        emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
+        dislikeClicked.value = isDislike;
+        likeClicked.value = false;
+    };
 </script>
 
 <style scoped>
-.btn + .btn {
-    margin-left: 5px;
-}
-
-.num {
-    margin-left: 5px;
-}
-
-.btn-label-danger.clicked {
-    background-color: #e6381a;
-}
-
-.btn-label-danger.clicked i,
-.btn-label-danger.clicked span {
-    color: #fff;
-}
-
-.btn-label-primary.clicked {
-    background-color: #5f61e6;
-}
-
-.btn-label-primary.clicked i,
-.btn-label-primary.clicked span  {
-    color : #fff;
-}
-
-.btn {
-    width: 55px;
-    height: 30px;
-}
-
-.btn.big {
-    width: 70px;
-    height: 70px;
-    font-size: 18px;
-}
-
-@media screen and  (max-width:450px) {
-    .btn {
-        width: 50px;
-        height: 20px;
-        font-size: 12px;
+    .btn + .btn {
+        margin-left: 5px;
+    }
+
+    .num {
+        margin-left: 5px;
+    }
+
+    .btn-label-danger.clicked {
+        background-color: #e6381a;
+    }
+
+    .btn-label-danger.clicked i,
+    .btn-label-danger.clicked span {
+        color: #fff;
+    }
+
+    .btn-label-primary.clicked {
+        background-color: #5f61e6;
+    }
+
+    .btn-label-primary.clicked i,
+    .btn-label-primary.clicked span {
+        color: #fff;
+    }
+
+    .btn {
+        width: 55px;
+        /* height: 30px; */
+    }
+
+    .btn.big {
+        width: 70px;
+        height: 70px;
+        font-size: 18px;
+    }
+
+    @media screen and (max-width: 450px) {
+        .btn {
+            width: 50px;
+            height: 20px;
+            font-size: 12px;
+        }
     }
-}
 </style>
diff --git a/src/components/modal/VacationModal.vue b/src/components/modal/VacationModal.vue
index 2592d53..59f0380 100644
--- a/src/components/modal/VacationModal.vue
+++ b/src/components/modal/VacationModal.vue
@@ -1,7 +1,7 @@
 <template>
     <div v-if="isOpen" class="vac-modal-dialog" @click.self="closeModal">
         <div class="vac-modal-content p-5 modal-scroll">
-            <h5 class="vac-modal-title">📅 내 연차 사용 내역</h5>
+            <h5 class="vac-modal-title">📅 내 연차 상세 내역</h5>
             <button class="close-btn" @click="closeModal">✖</button>
             <!-- 연차 목록 -->
             <div class="vac-modal-body" v-if="mergedVacations.length > 0">
@@ -26,8 +26,8 @@
                 </ol>
             </div>
             <!-- 연차 데이터 없음 -->
-            <p v-else class="text-sm-center mt-10 text-gray">
-                🚫 사용한 연차가 없습니다.
+            <p v-else class="text-sm-center mt-10 text-gray vac-modal-title">
+                🚫 연차 내역이 없습니다.
             </p>
         </div>
     </div>
@@ -58,19 +58,15 @@ const emit = defineEmits(["close"]);
 // 사용한 휴가(선물,연차사용)
 let globalCounter = 0;
 const usedVacations = computed(() => {
-    const result = [];
-    props.myVacations.forEach((v) => {
+    return props.myVacations.flatMap((v) => {
         const count = v.used_quota || 1;
-        for (let i = 0; i < count; i++) {
-            result.push({
-                ...v,
-                category: "used",
-                code: v.LOCVACTYP,
-                _expandIndex: globalCounter++,
-            });
-        }
+        return Array.from({ length: count }, (_, i) => ({
+            ...v,
+            category: "used",
+            code: v.LOCVACTYP,
+            _expandIndex: globalCounter++,
+        }));
     });
-    return result;
 });
 
 // 받은 휴가
@@ -114,7 +110,7 @@ const mergedVacations = computed(() => {
 
 // 모달 닫기
 const closeModal = () => {
-  emit("close");
+    emit("close");
 };
 </script>
 <style scoped>
diff --git a/src/components/vacation/ProfileList.vue b/src/components/vacation/ProfileList.vue
index 1d7b593..69262d7 100644
--- a/src/components/vacation/ProfileList.vue
+++ b/src/components/vacation/ProfileList.vue
@@ -69,12 +69,18 @@ nextTick(() => {
 });
 
 const sortedUserList = computed(() => {
-if (!employeeId.value) return userList.value;
-const myProfile = userList.value.find(user => user.MEMBERSEQ === employeeId.value);
-const otherUsers = userList.value.filter(user => user.MEMBERSEQ !== employeeId.value);
-return myProfile ? [myProfile, ...otherUsers] : userList.value;
+    if (!employeeId.value) return [];
+
+    // 관리자가 아닌 사용자만 필터링
+    const nonAdminUsers = userList.value.filter(user => user.MEMBERROL !== "ROLE_ADMIN");
+
+    const myProfile = nonAdminUsers.find(user => user.MEMBERSEQ === employeeId.value);
+    const otherUsers = nonAdminUsers.filter(user => user.MEMBERSEQ !== employeeId.value);
+
+    return myProfile ? [myProfile, ...otherUsers] : otherUsers;
 });
 
+
 const getUserProfileImage = (profilePath) =>
 profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
 
@@ -94,11 +100,11 @@ if (windowWidth.value >= 1650) {
     if (totalUsers <= 15) return "30px";
     return "20px";
 } else if (windowWidth.value >= 1024) {
-    if (totalUsers <= 10) return "35px";
+    if (totalUsers <= 10) return "40px";
     if (totalUsers <= 15) return "30px";
     return "20px";
 } else {
-    return "20px";
+    return "30px";
 }
 });
 
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index 5015bf6..10d9a31 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -92,6 +92,7 @@
                             :unknown="unknown"
                             :commentAlert="commentAlert"
                             :passwordAlert="passwordAlert"
+                            :maxLength="500"
                             @submitComment="handleCommentSubmit"
                         />
                     </div>
@@ -237,7 +238,6 @@
             const data = response.data.data;
 
             profileName.value = data.author || '익명';
-            console.log(data.author);
             authorId.value = data.authorId;
             boardTitle.value = data.title || '제목 없음';
             boardContent.value = data.content || '';
@@ -580,7 +580,7 @@
                 LOCBRDPWD: password.value,
                 LOCBRDSEQ: currentBoardId.value,
             });
-            console.log('response: ', response);
+
             if (response.data.code === 200 && response.data.data === true) {
                 password.value = '';
                 isPassword.value = false;
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index 4031c79..3374500 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -142,7 +142,7 @@ const calendarOptions = reactive({
     datesSet: handleMonthChange,
     events: calendarEvents,
 });
-// 캘린더 월 변경경
+// 캘린더 월 변경
 function handleMonthChange(viewInfo) {
     const currentDate = viewInfo.view.currentStart;
     const year = currentDate.getFullYear();
@@ -154,16 +154,17 @@ function handleDateClick(info) {
     const clickedDateStr = info.dateStr;
     const clickedDate = info.date;
     const todayStr = new Date().toISOString().split("T")[0];
+
     if (
         clickedDate.getDay() === 0 ||
         clickedDate.getDay() === 6 ||
         holidayDates.value.has(clickedDateStr) ||
         clickedDateStr < todayStr
-    ){
+    ) {
         return;
     }
     const isMyVacation = myVacations.value.some(vac => {
-        const vacDate = vac.date ? String(vac.date).substring(0, 10) : "";
+        const vacDate = vac.date ? vac.date.substring(0, 10) : "";
         return vacDate === clickedDateStr && !vac.receiverId;
     });
     if (isMyVacation) {
@@ -186,7 +187,6 @@ function handleDateClick(info) {
     selectedDates.value.set(clickedDateStr, type);
     halfDayType.value = null;
     updateCalendarEvents();
-    // 날짜 선택 후 반차버튼 초기화
     if (halfDayButtonsRef.value) {
         halfDayButtonsRef.value.resetHalfDay();
     }
@@ -266,15 +266,24 @@ const handleProfileClick = async (user) => {
 const fetchUserList = async () => {
     try {
         await userListStore.fetchUserList();
-        userList.value = userListStore.userList;
+
+        // "ROLE_ADMIN"을 제외하고 필터링
+        const filteredUsers = userListStore.userList.filter(user => user.MEMBERROL !== "ROLE_ADMIN");
+
+        // 필터링된 리스트를 userList에 반영
+        userList.value = [...filteredUsers];
+
         if (!userList.value.length) {
             console.warn("📌 사용자 목록이 비어 있음!");
             return;
         }
+
+        // 사용자별 색상 저장
         userColors.value = {};
         userList.value.forEach((user) => {
-        userColors.value[user.MEMBERSEQ] = user.usercolor;
+            userColors.value[user.MEMBERSEQ] = user.usercolor;
         });
+
     } catch (error) {
         console.error("📌 사용자 목록 불러오기 오류:", error);
     }
@@ -310,47 +319,57 @@ const filteredReceivedVacations = computed(() => {
     });
 });
 
-
-/* 휴가 변경사항 저장 */
+/* 휴가 저장 */
+// 휴가 변경사항 저장
 async function saveVacationChanges() {
     if (!hasChanges.value) return;
     const selectedDatesArray = Array.from(selectedDates.value);
-    const vacationsToAdd = selectedDatesArray
-        .filter(([date, type]) => type !== "delete")
-        .filter(([date, type]) =>
-            !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.date) return false;
-            const date = vac.date.split("T")[0];
-            return selectedDates.value.get(date) === "delete" && !vac.receiverId;
-        })
-        .map(vac => {
-            const id = vac.id;
-            return typeof id === "number" ? Number(id) : id;
-        });
-    try {
-        const response = await axios.post("vacation/batchUpdate", {
-            add: vacationsToAdd,
-            delete: vacationsToDelete
-        });
-        if (response.data && response.data.status === "OK") {
-            toastStore.onToast('휴가 변경 사항이 저장되었습니다.', 's');
-            await fetchVacationHistory(lastRemainingYear.value);
-            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();
-            updateCalendarEvents();
+    const vacationChangesByYear = selectedDatesArray.reduce((acc, [date, type]) => {
+        const year = date.split("-")[0]; // YYYY-MM-DD에서 YYYY 추출
+        if (!acc[year]) acc[year] = { add: [], delete: [] };
+        if (type !== "delete") {
+            acc[year].add.push({ date, type });
         } else {
-            toastStore.onToast('휴가 저장 중 오류가 발생했습니다.', 'e');
+            acc[year].delete.push(date);
         }
+        return acc;
+    }, {});
+    try {
+        for (const year of Object.keys(vacationChangesByYear)) {
+            const vacationsToAdd = vacationChangesByYear[year].add;
+            // 즉시 삭제 반영을 위해 삭제 대상 id 가져오기
+            const vacationsToDeleteForYear = myVacations.value
+                .filter(vac => {
+                    if (!vac.date) return false;
+                    const vacDate = vac.date.split("T")[0];
+                    return vacationChangesByYear[year].delete.includes(vacDate);
+                });
+            const vacationIdsToDelete = vacationsToDeleteForYear.map(vac => vac.id);
+            if (vacationsToAdd.length > 0 || vacationIdsToDelete.length > 0) {
+                const response = await axios.post("vacation/batchUpdate", {
+                    add: vacationsToAdd,
+                    delete: vacationIdsToDelete,
+                });
+                if (response.data && response.data.status === "OK") {
+                    toastStore.onToast(`휴가 변경 사항이 저장되었습니다.`, 's');
+                    // 즉시 삭제 반영: myVacations에서 해당 ID 삭제
+                    myVacations.value = myVacations.value.filter(vac => !vacationIdsToDelete.includes(vac.id));
+                    // 서버에서 최신 데이터 가져와 반영
+                    const updatedVacations = await fetchVacationHistory(year);
+                    if (updatedVacations) {
+                        myVacations.value = updatedVacations; // 최신 데이터 적용
+                    }
+                } else {
+                    toastStore.onToast(`휴가 변경 중 오류가 발생했습니다.`, 'e');
+                }
+            }
+        }
+        await fetchRemainingVacation();
+        selectedDates.value.clear();
+        updateCalendarEvents();
+        // 현재 보고 있는 연도의 데이터 새로고침
+        const currentDate = fullCalendarRef.value.getApi().getDate();
+        await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
     } catch (error) {
         console.error("🚨 휴가 변경 저장 실패:", error);
         toastStore.onToast('휴가 저장 요청에 실패했습니다.', 'e');
@@ -363,15 +382,17 @@ async function fetchVacationHistory(year) {
     try {
         const response = await axios.get(`vacation/history?year=${year}`);
         if (response.status === 200 && response.data) {
-            myVacations.value = response.data.data.usedVacations || [];
-            receivedVacations.value = response.data.data.receivedVacations || [];
-        } else {
-            console.warn("❌ 연차 내역을 불러오지 못했습니다.");
-            myVacations.value = [];
-            receivedVacations.value = [];
+            const newVacations = response.data.data.usedVacations || [];
+
+            const uniqueVacations = Array.from(
+                new Map([...myVacations.value, ...newVacations].map(v => [`${v.date}-${v.type}`, v]))
+                .values()
+            );
+
+            myVacations.value = uniqueVacations;
         }
     } catch (error) {
-        console.error("🚨 연차 데이터 불러오기 실패:", error);
+        console.error(`🚨 ${year}년 휴가 데이터 불러오기 실패:`, error);
     }
 }
 // 모든 사원 연차 내역 및 그래프화
@@ -462,16 +483,20 @@ function toggleHalfDay(type) {
 /* 페이지 이동 시 변경 사항 확인 */
 router.beforeEach((to, from, next) => {
     if (hasChanges.value) {
+        console.log('휴가!!!!!');
         const answer = window.confirm("저장하지 않은 변경 사항이 있습니다. 이동하시겠습니까?");
         if (!answer) {
             return next(false);
         }
     }
+    selectedDates.value.clear();
     next();
 });
 onBeforeUnmount(() => {
     window.removeEventListener("beforeunload", preventUnsavedChanges);
+
 });
+/* 새로고침 또는 페이지 종료 시 알림 */
 function preventUnsavedChanges(event) {
     if (hasChanges.value) {
         event.preventDefault();
@@ -480,8 +505,10 @@ function preventUnsavedChanges(event) {
 }
 
 /* watch */
-watch(lastRemainingYear, async (newYear, oldYear) => {
-    await fetchVacationHistory(newYear);
+watch(() => lastRemainingYear.value, async (newYear, oldYear) => {
+    if (newYear !== oldYear) {
+        await fetchVacationHistory(newYear);
+    }
 });
 // `selectedDates` 변경 시 반차 버튼 초기화
 watch(
@@ -533,6 +560,9 @@ onMounted(async () => {
                 altFormat: "F Y"
             })
         ],
+        onOpen: function() {
+            document.querySelector('.flatpickr-input').style.visibility = 'hidden';
+        },
         onChange: function(selectedDatesArr, dateStr) {
             // 선택한 달의 첫날로 달력을 이동
             fullCalendarRef.value.getApi().gotoDate(dateStr + "-01");
@@ -551,17 +581,17 @@ onMounted(async () => {
         if (titleEl) {
             titleEl.style.cursor = 'pointer';
             titleEl.addEventListener('click', () => {
-            const dpEl = calendarDatepicker.value;
-            dpEl.style.display = 'block';
-            dpEl.style.position = 'fixed';
-            dpEl.style.top = '25%';
-            dpEl.style.left = '50%';
-            dpEl.style.transform = 'translate(-50%, -50%)';
-            dpEl.style.zIndex = '9999';
-            dpEl.style.border = 'none';
-            dpEl.style.outline = 'none';
-            dpEl.style.backgroundColor = 'transparent';
-            fpInstance.open();
+                const dpEl = calendarDatepicker.value;
+                dpEl.style.display = 'block';
+                dpEl.style.position = 'fixed';
+                dpEl.style.top = '25%';
+                dpEl.style.left = '50%';
+                dpEl.style.transform = 'translate(-50%, -50%)';
+                dpEl.style.zIndex = '9999';
+                dpEl.style.border = 'none';
+                dpEl.style.outline = 'none';
+                dpEl.style.backgroundColor = 'transparent';
+                fpInstance.open();
             });
         }
     });