Merge branch 'main' of http://192.168.0.251:3000/localnet/localhost-front

2025-03-06 09:50:56 +09:00 · 2025-03-06 09:50:56 +09:00 · 708309f6a0
commit 708309f6a0
parent 495fe5850a 5ae3d3bc75
50 changed files with 826 additions and 575 deletions
--- a/.env.dev
+++ b/.env.dev
@ -1,6 +1,6 @@
 VITE_DOMAIN = https://192.168.0.251:5173/
 # VITE_LOGIN_URL = http://localhost:10325/ms/
-# VITE_FILE_URL = http://localhost:10325/ms/
-VITE_API_URL = https://192.168.0.251:10325/api/
-VITE_TEST_URL = https://192.168.0.251:10325/test/
+VITE_SERVER = https://192.168.0.251:10300/
+VITE_API_URL = https://192.168.0.251:10300/api/
+VITE_TEST_URL = https://192.168.0.251:10300/test/
 VITE_KAKAO_MAP_KEY=6f092e8f45ee81186bb6d8408f66a492
--- a/.env.mine
+++ b/.env.mine
@ -1,6 +1,6 @@
 VITE_DOMAIN = http://localhost:5173/
 # VITE_LOGIN_URL = http://localhost:10325/ms/
-# VITE_FILE_URL = http://localhost:10325/ms/
+VITE_SERVER = http://localhost:10325/
 VITE_API_URL = http://localhost:10325/api/
 VITE_TEST_URL = http://localhost:10325/test/
 VITE_KAKAO_MAP_KEY=6f092e8f45ee81186bb6d8408f66a492
--- a/index.html
+++ b/index.html
@ -32,7 +32,6 @@

        <link rel="stylesheet" href="/css/font.css" />

-
        <!-- Icons -->
        <link rel="stylesheet" href="/vendor/fonts/boxicons.css" />
        <link rel="stylesheet" href="/vendor/fonts/fontawesome.css" />
--- a/41
+++ b/41
@ -0,0 +1,41 @@
+pipeline {
+    agent any
+    tools {
+        nodejs 'nodejs22' 
+    }
+    stages {
+        stage('Build'){
+            steps {
+                bat 'npm install'                                               
+                bat 'npm ci'                                                    
+                bat 'npm run build'                                             
+            }
+        }
+        stage('Deploy') {
+            steps {
+                // 로컬 Nginx 서버에 빌드 파일 배포
+                bat '''
+                    :: 루트경로 설정
+                    set NGINX_ROOT=C:\\nginx\\html
+
+                    :: 기존 빌드 삭제
+                    if exist "%NGINX_ROOT%\\dist" rmdir /s /q "%NGINX_ROOT%\\dist"
+
+                    :: 빌드 파일 복사
+                    xcopy /s /y dist\\* "%NGINX_ROOT%\\dist\\"
+                '''
+            }
+        }
+        stage('Restart Server!') {
+            steps {
+                // 로컬 Nginx 서버 재실행
+                bat '''
+                    net stop localnginx
+                    ping -n 5 127.0.0.1 > nul
+                    net start localnginx
+                    ping -n 5 127.0.0.1 > nul
+                '''
+            }
+        }
+    }
+}
--- a/package.json
+++ b/package.json
@ -6,7 +6,7 @@
    "scripts": {
        "dev": "vite --host 0.0.0.0 --mode dev",
        "mine": "vite --host 0.0.0.0 --mode mine",
-        "build": "vite build --mode prod",
+        "build": "vite build --mode dev",
        "preview": "vite preview",
        "lint": "eslint . --fix",
        "format": "prettier --write src/"
--- a/public/css/custom.css
+++ b/public/css/custom.css
@ -3,22 +3,33 @@

 /* 휴가 */

-.fc-daygrid-day-events {
-  max-height: 100px !important;
-  overflow-y: auto !important;
-}
+
 /* 이벤트 선 없게 */
 .fc-event {
  border: none;
 }
-/* 오전전반차 그래프 */
+/* 오전 반차 그래프 (왼쪽 절반) */
 .fc-daygrid-event.half-day-am {
-  width: calc(50% - 4px) !important;
+  width: 50% !important;
+  height: 8px !important;
+  border-radius: 2px !important;
+  font-size: 0px !important;
 }
-/* 오후반차 그래프프 */
+/* 오후 반차 그래프 (오른쪽 절반) */
 .fc-daygrid-event.half-day-pm {
-  width: calc(50% - 4px) !important;
-  margin-left: auto !important
+  width: 50% !important;
+  height: 8px !important;
+  margin-left: auto !important;
+  border-radius: 2px !important;
+  font-size: 0px !important;
+}
+/* 연차 그래프 (풀풀) */
+.fc-daygrid-event.full-day {
+  width: 100% !important;
+  height: 8px !important;
+  margin-left: auto !important;
+  border-radius: 2px !important;
+  font-size: 0px !important;
 }
 /* 공휴일,일요일 색상 */
 .fc-day-sun .fc-daygrid-day-number,
@ -39,8 +50,8 @@
 .flatpickr-calendar:after {
    display: none !important;
 }
- /* 기본 스타일은 그대로 두고, 데이트피커 인풋의 추가 스타일 정의 */
- .fc-toolbar-title {
+/* 기본 스타일은 그대로 두고, 데이트피커 인풋의 추가 스타일 정의 */
+.fc-toolbar-title {
  cursor: pointer;
 }
 /* 클릭 가능한 날짜 (오늘 + 미래) */
@ -84,7 +95,6 @@ opacity: 0.6; /* 흐려 보이게 */


 /* 본인 모달 */
-
 /* 닫기 버튼 */
 .close-btn {
  position: absolute;
@ -109,7 +119,6 @@ opacity: 0.6; /* 흐려 보이게 */


 /* 선물하기 모달 */
-
 /* 연차 개수 버튼 */
 .count-btn {
  font-size: 18px;
@ -127,7 +136,6 @@ opacity: 0.6; /* 흐려 보이게 */
  background: #cccccc;
  cursor: not-allowed;
 }
-
 /* 버튼 컨테이너 (우측 정렬) */
 .custom-button-container {
  display: flex;
@ -141,18 +149,17 @@ opacity: 0.6; /* 흐려 보이게 */
  padding: 10px; /* 크기 조정 */
  cursor: pointer; /* 클릭 가능하도록 변경 */
 }
-
 /* 아이콘 색상 변경 (기본) */
 .custom-button i {
  color: #282538; /* 기본 아이콘 색상 */
  font-size: 25px; /* 아이콘 크기 */
 }
-
 /* 버튼 호버 효과 */
 .custom-button:hover i {
  color: #ff0800; /* 호버 시 아이콘 색상 변경 */
 }

+
 .grayscaleImg {
  filter: grayscale(100%);
 }
--- a/public/img/mbti/enfj.png
+++ b/public/img/mbti/enfj.png
--- a/public/img/mbti/enfp.png
+++ b/public/img/mbti/enfp.png
--- a/public/img/mbti/entj.png
+++ b/public/img/mbti/entj.png
--- a/public/img/mbti/entp.png
+++ b/public/img/mbti/entp.png
--- a/public/img/mbti/esfj.png
+++ b/public/img/mbti/esfj.png
--- a/public/img/mbti/esfp.png
+++ b/public/img/mbti/esfp.png
--- a/public/img/mbti/est.png
+++ b/public/img/mbti/est.png
--- a/public/img/mbti/estp.png
+++ b/public/img/mbti/estp.png
--- a/public/img/mbti/infj.png
+++ b/public/img/mbti/infj.png
--- a/public/img/mbti/infp.png
+++ b/public/img/mbti/infp.png
--- a/public/img/mbti/intj.png
+++ b/public/img/mbti/intj.png
--- a/public/img/mbti/intp.png
+++ b/public/img/mbti/intp.png
--- a/public/img/mbti/isfj.png
+++ b/public/img/mbti/isfj.png
--- a/public/img/mbti/isfp.png
+++ b/public/img/mbti/isfp.png
--- a/public/img/mbti/istj.png
+++ b/public/img/mbti/istj.png
--- a/public/img/mbti/istp.png
+++ b/public/img/mbti/istp.png
--- a/public/js/main.js
+++ b/public/js/main.js
@ -7,12 +7,6 @@
    //-----------------
    let menu, animate;

-<<<<<<< HEAD
-var menu, animate;
-(function () {
-  // Initialize menu
-  //-----------------
-=======
    let layoutMenuEl = document.querySelectorAll('#layout-menu');
    layoutMenuEl.forEach(function (element) {
        menu = new Menu(element, {
@ -23,7 +17,6 @@ var menu, animate;
        window.Helpers.scrollToActive((animate = false));
        window.Helpers.mainMenu = menu;
    });
->>>>>>> board-comment

    // Initialize menu togglers and bind click on each
    let menuToggler = document.querySelectorAll('.layout-menu-toggle');
@ -118,5 +111,7 @@ var menu, animate;
    // If current layout is vertical and current window screen is > small

    // Auto update menu collapsed/expanded based on the themeConfig
-    window.Helpers.setCollapsed(true, false);
+    // 250304 pc 화면에서 메뉴바 고정을 위해 false 처리
+    window.Helpers.setCollapsed(false, false);
+    //window.Helpers.setCollapsed(true, false);
 })();
--- a/src/common/common.js
+++ b/src/common/common.js
@ -73,6 +73,14 @@ const common = {
            seconds: zeroFormat(date.getSeconds()),
        };
    },
+
+    isNotEmpty(obj) {
+        if (obj === null || obj === undefined) return false;
+        if (typeof obj === 'string' && obj.trim() === '') return false;
+        if ((Array.isArray(obj) || obj === Object(obj)) && Object.keys(obj).length === 0) return false;
+
+        return true;
+    },
 };

 export default {
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@ -11,43 +11,42 @@
            :isLike="!isLike"
            :isCommentPassword="isCommentPassword"
            :isCommentProfile="true"
-            @editClick="aaaa"
+            @editClick="handleEditClick"
            @deleteClick="$emit('deleteClick', comment)"
            @updateReaction="handleUpdateReaction"
-            />
-            <!-- <P>Commentpassssss: {{isCommentPassword}}</P> -->
-            <!-- :author="true" -->
+        />
        <!-- 댓글 비밀번호 입력창 (익명일 경우) -->
-        <div v-if="isCommentPassword === comment.commentId && unknown" class="mt-3 w-25 ms-auto">
+        <div v-if="currentPasswordCommentId === comment.commentId && unknown" class="mt-3 w-25 ms-auto">
            <div class="input-group">
                <input
                    type="password"
                    class="form-control"
-                    v-model="password"
+                    :value="password"
                    placeholder="비밀번호 입력"
+                    @input="$emit('update:password', $event.target.value.trim())"
                />
                <button class="btn btn-primary" @click="logPasswordAndEmit">확인</button>
            </div>
            <span v-if="passwordCommentAlert" class="invalid-feedback d-block text-start">{{ passwordCommentAlert }}</span>
        </div>
-        <!-- <p>authorId:{{ comment.authorId }}</p>
-        <p>코멘트 비교: {{comment.isCommentAuthor}}</p> -->
-

        <div class="mt-6">
            <template v-if="comment.isEditTextarea">
                <textarea v-model="localEditedContent" class="form-control"></textarea>
                <div class="mt-2 d-flex justify-content-end">
-                    <!-- <button class="btn btn-secondary me-2" @click="$emit('cancelEdit', comment)">취소</button> -->
-                    <!-- <button class="btn btn-primary" @click="submitEdit">수정</button> -->
                    <SaveBtn class="btn btn-primary" @click="submitEdit"></SaveBtn>
                </div>
            </template>
+
            <template v-else>
                <p class="m-0">{{ comment.content }}</p>
            </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"/>

@ -58,10 +57,6 @@
                :key="child.commentId"
                class="mt-8 pt-6 ps-10 border-top"
            >
-            <!-- <p>대댓글 데이터(JSON): {{ JSON.stringify(child, null, 2) }}</p> -->
-            <!-- <p>comment child: {{ comment.children }}</p> -->
-            <!-- :unknown="child.author === '익명'" -->
-            <p>child.isCommentPassword: {{ child.isCommentPassword }}</p>
                <BoardComment
                    :comment="child"
                    :unknown="child.author === '익명'"
@ -70,12 +65,17 @@
                    :isCommentProfile="true"
                    :isCommentAuthor="child.isCommentAuthor"
                    :isCommentPassword="isCommentPassword"
-                    @editClick="$emit('editClick', $event)"
+                    :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>
@ -114,20 +114,29 @@ const props = defineProps({
        type: Boolean,
        default: false
    },
+    isDeleted: {
+        type: Boolean,
+        default: false
+    },
    isCommentPassword: {
        type: Boolean,
        default: false,
    },
    passwordCommentAlert: {
        type: String,
-        default: false
-    }
+        default: ''
+    },
+    currentPasswordCommentId: {
+        type: Number
+    },
+    password:{
+        type: String
+    },
 });

 // emits 정의
-const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'submitEdit', 'cancelEdit']);
+const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'submitEdit', 'cancelEdit', 'update:password']);

-const password = ref('');
 const localEditedContent = ref(props.comment.content);

 // 댓글 입력 창 토글
@ -154,8 +163,7 @@ const handleUpdateReaction = (reactionData) => {

 // 비밀번호 확인
 const logPasswordAndEmit = () => {
-    emit('submitPassword', props.comment, password.value);
-    password.value = "";
+    emit('submitPassword', props.comment, props.password);
 };

 watch(() => props.comment.isEditTextarea, (newVal) => {
@ -164,13 +172,26 @@ watch(() => props.comment.isEditTextarea, (newVal) => {
    }
 });

+// 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 aaaa = () => {
+const handleEditClick = () => {
    emit('editClick', props.comment);
 }

+const handleReplyEditClick = (comment) => {
+    emit('editClick', comment);
+}
+
 </script>
--- a/src/components/board/BoardCommentArea.vue
+++ b/src/components/board/BoardCommentArea.vue
@ -11,13 +11,9 @@
                </div> -->
                <!-- 텍스트박스 -->
                <div class="w-100">
-                    <textarea
-                        class="form-control"
-                        placeholder="댓글 달기"
-                        rows="3"
-                        v-model="comment"
-                    ></textarea>
+                    <textarea class="form-control" placeholder="댓글 달기" rows="3" 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>
            </div>

@ -26,12 +22,7 @@
                <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"
-                        />
+                        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" v-model="isCheck" />
                        <label class="form-check-label" for="inlineCheckbox1">익명</label>
                    </div>

@ -46,15 +37,13 @@
                            placeholder="비밀번호 입력"
                        />
                        <span v-if="passwordAlert" class="invalid-feedback d-block text-start ms-2">{{ passwordAlert }}</span>
+                        <span v-else class="invalid-feedback d-block text-start ms-2">{{ passwordAlert2 }}</span>
                    </div>
                </div>

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

 <script setup>
-import { ref, defineEmits, defineProps, computed, watch } from 'vue';
+import { ref, defineEmits, defineProps, watch, inject } from 'vue';
+import SaveBtn from '../button/SaveBtn.vue';

 const props = defineProps({
    unknown: {
@ -71,39 +61,68 @@ const props = defineProps({
    },
    parentId: {
        type: Number,
-        default: 0
+        default: 0,
    },
    passwordAlert: {
        type: String,
-        default: false
+        default: '',
    },
    commentAlert: {
        type: String,
-        default: false
-    }
+        default: '',
+    },
 });

+const $common = inject('common');
 const comment = ref('');
 const password = ref('');
-const isCheck = ref(props.unknown);
+const isCheck = ref(false);
+const textAlert = ref('');
+const passwordAlert2 = ref('');

 const emit = defineEmits(['submitComment']);
-const LOCBRDTYP = isCheck.value ? '300102' : null;
-function handleCommentSubmit() {
+
+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,  // 익명일 경우 '300102' 설정
+        LOCBRDTYP: isCheck.value ? '300102' : null, // 익명일 경우 '300102' 설정
    });
-}

-watch(() => props.passwordAlert, () => {
-    if (!props.passwordAlert) {
-        comment.value = '';
-        password.value = '';
+    // 제출 후 입력 필드 리셋
+    resetCommentForm();
+};
+
+// 입력 필드 리셋 함수 추가
+const resetCommentForm = () => {
+    comment.value = '';
+    password.value = '';
+    isCheck.value = false;
+};
+
+watch(
+    () => props.passwordAlert,
+    () => {
+        if (!props.passwordAlert) {
+            resetCommentForm();
+        }
    }
-});
-
-
+);
 </script>
+
--- a/src/components/board/BoardCommentList.vue
+++ b/src/components/board/BoardCommentList.vue
@ -10,16 +10,19 @@
                :comment="comment"
                :isCommentAuthor="comment.isCommentAuthor"
                :isEditTextarea="comment.isEditTextarea"
+                :isDeleted="isDeleted"
                :isCommentPassword="isCommentPassword" 
-                :passwordCommentAlert="passwordCommentAlert"
+                :passwordCommentAlert="passwordCommentAlert || ''"
+                :currentPasswordCommentId="currentPasswordCommentId"
+                :password="password"
                @editClick="handleEditClick"
                @deleteClick="handleDeleteClick"
                @submitPassword="submitPassword"
                @submitComment="submitComment"
-                @commentDeleted="handleCommentDeleted"
                @submitEdit="handleSubmitEdit"
                @cancelEdit="handleCancelEdit"
                @updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
+                @update:password="updatePassword"
            />
        </li>
    </ul>
@ -51,13 +54,23 @@ const props = defineProps({
        type: Boolean,
        default: false,
    },
+    isDeleted: {
+        type: Boolean,
+        default: false,
+    },
    passwordCommentAlert: {
        type: String,
-        default: false
-    }
+        default: ''
+    },
+    currentPasswordCommentId: {
+        type: Number
+    },
+    password:{
+        type: String
+    },
 });

-const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'clearPassword']);
+const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'clearPassword','submitEdit', 'update:password']);

 const submitComment = (replyData) => {
    emit('submitComment', replyData);
@ -78,7 +91,11 @@ const submitPassword = (comment, password) => {
 };

 const handleEditClick = (comment) => {
-    emit('editClick', comment);
+    if (comment.parentId) {
+        emit('editClick', comment); // 대댓글
+    } else {
+        emit('editClick', comment); // 댓글
+    }
 };

 const handleSubmitEdit = (comment, editedContent) => {
@ -100,4 +117,8 @@ const handleCancelEdit = (comment) => {
        emit('cancelEdit', comment); // 댓글 수정 취소
    }
 };
+
+const updatePassword = (newPassword) => {
+    emit('update:password', newPassword);
+};
 </script>
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@ -2,8 +2,9 @@
    <div class="d-flex align-items-center flex-wrap">
        <div class="d-flex align-items-center">
            <div v-if="!unknown" class="avatar me-2">
-                <img src="/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
+                <img :src="getProfileImage(profilePath)" alt="Avatar" class="rounded-circle" />
            </div>
+
            <div class="me-2">
                <h6 class="mb-0">{{ profileName }}</h6>
                <div class="profile-detail">
@ -22,8 +23,7 @@
        <!-- 버튼 영역 -->
        <div class="ms-auto text-end">
            <!-- 수정, 삭제 버튼 -->
-            <!-- <template v-if="isAuthor || showDetail"> -->
-            <template v-if="unknown || isCommentAuthor || isAuthor">
+            <template v-if="!isDeletedComment && (unknown || isCommentAuthor || isAuthor)">
                <EditButton @click.stop="editClick" />
                <DeleteButton @click.stop="deleteClick" />
            </template>
@ -34,18 +34,23 @@
                :boardId="boardId"
                :comment="comment"
                @updateReaction="handleUpdateReaction"
-            >
-            </BoardRecommendBtn>
+            />
        </div>
    </div>
 </template>

 <script setup>
-import { ref, defineProps, defineEmits } from 'vue';
+import { computed, defineProps, defineEmits } from 'vue';
 import DeleteButton from '../button/DeleteBtn.vue';
 import EditButton from '../button/EditBtn.vue';
 import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';

+// 기본 프로필 이미지 경로
+const defaultProfile = "/img/icons/icon.png";
+
+// 서버의 이미지 경로 (Vue 환경 변수 사용 가능)
+const baseUrl = "http://localhost:10325/"; // API 서버 URL
+
 // Props 정의
 const props = defineProps({
    comment: {
@ -64,6 +69,10 @@ const props = defineProps({
        type: String,
        default: '',
    },
+    profilePath: {
+        type: String,
+        default: '',
+    },
    unknown: {
        type: Boolean,
        default: true,
@ -72,16 +81,15 @@ const props = defineProps({
        type: Boolean,
        default: true,
    },
-    // 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부
    isAuthor: {
        type: Boolean,
        default: false,
    },
-    isCommentAuthor: Boolean,  // 댓글 작성자인지 여부
-    isCommentProfile: Boolean, // 현재 컴포넌트가 댓글용인지 여부
+    isCommentAuthor: Boolean,
+    isCommentProfile: Boolean,
    date: {
        type: String,
-        required: true,
+        required: '',
    },
    views: {
        type: Number,
@ -99,6 +107,11 @@ const props = defineProps({

 const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);

+const isDeletedComment = computed(() => {
+    return props.comment?.content === '삭제된 댓글입니다' &&
+           props.comment?.updateAtRaw !== props.comment?.createdAtRaw;
+});
+
 // 수정
 const editClick = () => {
    emit('editClick', { ...props.comment, unknown: props.unknown });
@ -109,38 +122,19 @@ const deleteClick = () => {
    emit('deleteClick', { ...props.comment, unknown: props.unknown });
 };

+// 좋아요/싫어요 업데이트
 const handleUpdateReaction = (reactionData) => {
    emit("updateReaction", {
        boardId: props.boardId,
-        commentId:  props.comment?.commentId,
+        commentId: props.comment?.commentId,
        ...reactionData,
    });
 };

-
+// 프로필 이미지 경로 설정
+const getProfileImage = (profilePath) => {
+    return profilePath && profilePath.trim()
+      ? `${baseUrl}upload/img/profile/${profilePath}`
+      : defaultProfile;
+  };
 </script>
-
-<style scoped>
-.profile-detail span ~ span {
-    margin-left: 5px;
-}
-
-.ms-auto button + button {
-    margin-left: 5px;
-}
-
-.btn.author {
-    height: 30px;
-}
-
-@media screen and (max-width: 450px) {
-    .btn-area {
-        margin-top: 10px;
-        width: 100%;
-    }
-
-    .btn.author {
-        height: 30px;
-    }
-}
-</style>
--- a/src/components/button/BoardRecommendBtn.vue
+++ b/src/components/button/BoardRecommendBtn.vue
@ -13,7 +13,7 @@ import { ref, computed } from 'vue';
 const props = defineProps({
    comment: {
        type: Object,
-        required: true,
+        default: () => ({}),
    },
    likeClicked : {
        type : Boolean,
@ -36,7 +36,7 @@ const props = defineProps({
        required: true,
    },
    commentId: {
-        type: Number,
+        type: [Number, null],
        default: null,
    },
    likeCount: {
--- a/src/components/button/EditBtn.vue
+++ b/src/components/button/EditBtn.vue
@ -1,13 +1,30 @@
 <template>
-    <button class="btn btn-label-primary btn-icon">
-      <i class="bx bx-edit-alt"></i>
+    <button class="btn btn-label-primary btn-icon" @click="toggleText">
+      <i :class="buttonClass"></i>
    </button>
 </template>

-<script>
-export default {
-    name: 'EditButton',
-    methods: {
-      },
-    };
+<script setup>
+import { ref, defineProps } from 'vue';
+
+const props = defineProps({
+  isToggleEnabled: {
+      type: Boolean,
+      default: false,
+  },
+});
+
+const buttonClass = ref("bx bx-edit-alt");
+
+const toggleText = () => {
+  if (props.isToggleEnabled) {
+    buttonClass.value = buttonClass.value === "bx bx-edit-alt" ? "bx bx-x" : "bx bx-edit-alt";
+  }
+};
+
+const resetButton = () => {
+    buttonClass.value = "bx bx-edit-alt";
+};
+
+defineExpose({ resetButton });
 </script>
--- a/src/components/button/HalfDayButtons.vue
+++ b/src/components/button/HalfDayButtons.vue
@ -20,7 +20,8 @@

      <!-- 저장 버튼 -->
      <div class="save-button-container">
-        <button class="btn btn-success" @click="addVacationRequests" :disabled="isDisabled">
+        <button class="btn btn-success" @click="addVacationRequests"
+                :class="{ active: !isDisabled, disabled: isDisabled }">
          ✔
        </button>
      </div>
@ -28,26 +29,28 @@
 </template>

 <script setup>
-import { defineEmits, ref, defineProps } from "vue";
+import { defineEmits, ref, defineProps, watch } from "vue";

 const props = defineProps({
-  isDisabled: Boolean
+  isDisabled: Boolean,
+  selectedDate: String // 날짜 선택 값을 props로 받음
 });

 const emit = defineEmits(["toggleHalfDay", "addVacationRequests", "resetHalfDay"]);
 const halfDayType = ref(null);

 const toggleHalfDay = (type) => {
-  halfDayType.value = type;
-
+  halfDayType.value = halfDayType.value === type ? null : type;
  emit("toggleHalfDay", halfDayType.value);
-
-  // ✅ 버튼 클릭 후 1초 후 자동 비활성화
-  setTimeout(() => {
-    halfDayType.value = null;
-  }, 1000);
 };

+// `selectedDate`가 변경되면 반차 선택 초기화
+watch(() => props.selectedDate, (newDate) => {
+  if (newDate) {
+    resetHalfDay();
+  }
+});
+
 // 날짜 선택 후 반차 버튼 상태 초기화
 const resetHalfDay = () => {
  halfDayType.value = null;
@ -89,24 +92,24 @@ defineExpose({ resetHalfDay });

 /* 선택된 (눌린) 버튼 */
 .btn.active {
-  border: 3px solid #fff; /* 흰색 테두리 강조 */
+  border: 3px solid #ff0000; /* 붉은색 테두리 적용 */
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
  transform: scale(1.1);
 }

 /* AM 버튼 (선택된 상태) */
 .btn-warning.active {
-  background-color: #ffca2c !important; /* 진한 노란색 */
+  background-color: #ffca2c !important;
  color: black;
 }

 /* PM 버튼 (선택된 상태) */
 .btn-info.active {
-  background-color: #0b5ed7 !important; /* 진한 파란색 */
+  background-color: #0b5ed7 !important;
  color: white;
 }

-/* ✔ 버튼 */
+/* ✔ 버튼 기본 (비활성화일 때 기본 녹색) */
 .btn-success {
  font-size: 24px;
  width: 50px;
@ -116,18 +119,26 @@ defineExpose({ resetHalfDay });
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
+  background-color: #871919 !important;
+  color: white;
 }

-/* ✔ 버튼 마우스 오버 */
-.btn-success:hover {
-  background-color: #198754;
-  box-shadow: 0px 4px 10px rgba(25, 135, 84, 0.4);
+/* ✔ 버튼 활성화 */
+.btn-success.active {
+  background-color: #ff0000 !important;
+  color: white !important;
+  border: 3px solid #eb9f9f !important;
+  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
  transform: scale(1.1);
 }

-/* ✔ 버튼 클릭 */
-.btn-success:active {
-  transform: scale(0.95);
-  box-shadow: 0px 2px 5px rgba(25, 135, 84, 0.2);
+/* ✔ 버튼 비활성화 */
+.btn-success.disabled {
+  background-color: #bbb8b8 !important;
+  color: white !important;
+  cursor: not-allowed !important;
+  box-shadow: none;
+  transform: none;
+  opacity: 0.5;
 }
 </style>
--- a/src/components/button/WriteBtn.vue
+++ b/src/components/button/WriteBtn.vue
@ -1,9 +1,30 @@
 <template>
-    <button class="btn btn-label-primary btn-icon float-end">
-        <i class="bx bx-edit"></i>
+    <button class="btn btn-label-primary btn-icon float-end" @click="toggleText">
+        <i :class="buttonClass"></i>
    </button>
 </template>

 <script setup>
+import { ref, defineProps, defineExpose } from 'vue';

-</script>
+const props = defineProps({
+    isToggleEnabled: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const buttonClass = ref("bx bx-edit");
+
+const toggleText = () => {
+    if (props.isToggleEnabled) {
+        buttonClass.value = buttonClass.value === "bx bx-edit" ? "bx bx-x" : "bx bx-edit";
+    }
+};
+
+const resetButton = () => {
+    buttonClass.value = "bx bx-edit";
+};
+
+defineExpose({ resetButton });
+</script>
--- a/src/components/input/FormFile.vue
+++ b/src/components/input/FormFile.vue
@ -1,11 +1,12 @@
 <template>
    <div class="mb-4 row">
-        <label :for="name" class="col-md-2 col-form-label">{{ title }}</label>
+        <label :for="inputId" class="col-md-2 col-form-label">{{ title }}</label>
        <div class="col-md-10">
            <input
                class="form-control"
                type="file"
-                :id="name"
+                :id="inputId"
+                ref="fileInput"
                @change="changeHandler"
                multiple
            />
@ -21,7 +22,7 @@ import { ref ,computed} from 'vue';
 import { fileMsg } from '@/common/msgEnum';

 // Props
-const prop = defineProps({
+const props = defineProps({
    title: {
        type: String,
        default: '라벨',
@ -29,7 +30,7 @@ const prop = defineProps({
    },
    name: {
        type: String,
-        default: 'nameplz',
+        default: 'fileInput',
        required: true,
    },
    isAlert: {
@ -38,12 +39,13 @@ const prop = defineProps({
        required: false,
    },
 });
+const inputId = computed(() => props.name || 'defaultFileInput');

 const emits = defineEmits(['update:data', 'update:isValid']);

 const MAX_TOTAL_SIZE = 5 * 1024 * 1024; // 5MB
 const MAX_FILE_COUNT = 5; // 최대 파일 개수
-const ALLOWED_FILE_TYPES = ['image/jpeg', 'image/png', 'application/pdf']; // 허용된 파일 유형
+const ALLOWED_FILE_TYPES = []; // 모든 파일을 허용

 const showError = ref(false);
 const fileMsgKey = ref(''); // 에러 메시지 키
@ -51,9 +53,12 @@ const fileMsgKey = ref(''); // 에러 메시지 키
 const changeHandler = (event) => {
    const files = Array.from(event.target.files);
    const totalSize = files.reduce((sum, file) => sum + file.size, 0);
-    const invalidFiles = files.filter(file => !ALLOWED_FILE_TYPES.includes(file.type));

-    // 파일 검증 로직
+    // ALLOWED_FILE_TYPES가 비어있으면 모든 파일 허용
+    const invalidFiles = ALLOWED_FILE_TYPES.length > 0
+        ? files.filter(file => !ALLOWED_FILE_TYPES.includes(file.type))
+        : [];
+
    if (totalSize > MAX_TOTAL_SIZE) {
        showError.value = true;
        fileMsgKey.value = 'FileMaxSizeMsg';
--- a/src/components/input/FormInput.vue
+++ b/src/components/input/FormInput.vue
@ -15,6 +15,7 @@
                :disabled="disabled"
                :min="min"
                @focusout="$emit('focusout', modelValue)"
+                @input="handleInput"
            />
            <div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">
                {{ title }}을 확인해주세요.
@ -92,11 +93,6 @@ const inputValue = ref(props.modelValue);
 // 부모로 데이터 업데이트
 watch(inputValue, (newValue) => {
    emits('update:modelValue', newValue);
-
-    // 값이 입력될 때 `alert`를 false로 설정
-    if (newValue.trim() !== '') {
-        emits('update:alert', false);
-    }
 });

 // 초기값 동기화
@ -106,6 +102,13 @@ watch(() => props.modelValue, (newValue) => {
    }
 });

+const handleInput = (event) => {
+    const newValue = event.target.value.slice(0, props.maxlength);
+
+    if (newValue.trim() !== '') {
+        emits('update:alert', false);
+    }
+};

 </script>

--- a/src/components/input/FormSelect.vue
+++ b/src/components/input/FormSelect.vue
@ -4,19 +4,30 @@
            {{ title }}
            <span :class="isEssential ? 'link-danger' : 'none'">*</span>
        </label>
-        <div :class="isRow ? 'col-md-10' : 'col-md-12'">
-            <select class="form-select" :id="name" v-model="selectData" :disabled="disabled">
-                <option v-for="(item, i) in data" :key="i" :value="isCommon ? item.value : i">
+        <div :class="isRow ? 'col-md-10' : 'col-md-12'" class="d-flex gap-2 align-items-center">
+            <select class="form-select" :id="name" v-model="selectData" :disabled="disabled" :style="isColor ? { color: selected } : {}">
+                <option v-for="(item, i) in data" :key="i" :value="isCommon ? item.value : i" :style="isColor ? { color: item.label } : {}">
                    {{ isCommon ? item.label : item }}
                </option>
            </select>
+
+            <div v-if="isColor && selected"
+                    class="w-px-40 h-px-30"
+                    :style="{backgroundColor: selected}">
+            </div>
+
+            <img v-if="isMbti && selected"
+                role="img"
+                class="w-px-30 h-px-40"
+                :src="`/img/mbti/${selected.toLowerCase()}.png`"
+                alt="MBTI image"/>
        </div>
        <div v-if="isAlert" class="invalid-feedback">{{ title }}을 확인해주세요.</div>
    </div>
 </template>

 <script setup>
-import { ref, watch } from 'vue';
+import { computed, ref, watch } from 'vue';

 const props = defineProps({
    title: {
@ -67,7 +78,17 @@ const props = defineProps({
    disabled: {
        type: Boolean,
        default: false
-    }
+    },
+    isColor: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
+    isMbti: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
 });

 const emit = defineEmits(['update:data']);
@ -93,4 +114,13 @@ watch(() => props.data, (newData) => {
 watch(selectData, (newValue) => {
    emit('update:data', newValue);
 });
-</script>
+
+
+const selected = computed(() => {
+    const selectedItem = props.data.find(item =>
+        props.isCommon ? item.value === selectData.value : props.data.indexOf(item) === selectData.value
+    );
+    return selectedItem ? selectedItem.label : null;
+});
+
+</script>
--- a/src/components/list/ProjectCard.vue
+++ b/src/components/list/ProjectCard.vue
@ -38,7 +38,7 @@
                    <div class="ms-12 position-relative">
                        {{ address }} {{ addressdtail }}
                        <!-- 팝오버 -->
-                        <div v-if="isPopoverVisible" class="position-absolute w-100 map text-end">
+                        <div v-if="isPopoverVisible" class="position-absolute map ">
                            <button type="button" class="btn-close popover-close" @click.stop="isPopoverVisible = !isPopoverVisible"></button>
                            <div class="card">
                                <div class="card-body p-1">
@ -46,8 +46,7 @@
                                        v-if="coordinates"
                                        :lat="coordinates.lat"
                                        :lng="coordinates.lng"
-                                        :draggable="false"
-                                        class="w-100 h-px-200"
+                                        class="w-px-200 h-px-200"
                                    >
                                        <KakaoMapMarker
                                            :lat="coordinates.lat"
@ -310,6 +309,18 @@ const closeEditModal = () => {
    isEditModalOpen.value = false;
 };

+// 변경된 내용 있는지 확인
+const hasChanges = computed(() => {
+    return selectedProject.value.PROJCTNAM !== props.title ||
+        selectedProject.value.PROJCTSTR !== props.strdate ||
+        selectedProject.value.PROJCTEND !== props.enddate ||
+        selectedProject.value.PROJCTZIP !== props.addressZip ||
+        selectedProject.value.PROJCTARR !== props.address ||
+        selectedProject.value.PROJCTDTL !== props.addressdtail ||
+        selectedProject.value.PROJCTDES !== props.description ||
+        selectedProject.value.PROJCTCOL !== props.projctCol;
+});
+
 // 프로젝트 수정
 const handleUpdate = () => {
    nameAlert.value = selectedProject.value.PROJCTNAM.trim() === '';
@ -318,6 +329,11 @@ const handleUpdate = () => {
        return;
    }

+    if (!hasChanges.value) {
+        toastStore.onToast('변경된 내용이 없습니다.', 'e');
+        return;
+    }
+
    $api.patch('project/update', {
        projctSeq: selectedProject.value.PROJCTSEQ,
        projctNam: selectedProject.value.PROJCTNAM,
@ -336,7 +352,6 @@ const handleUpdate = () => {
            closeEditModal();
            // 상위 컴포넌트에 업데이트 알림
            emit('update');
-            window.location.reload()
        }
    });
 };
--- a/src/components/projectlist/ProjectList.vue
+++ b/src/components/projectlist/ProjectList.vue
@ -49,6 +49,7 @@
                    :is-essential="true"
                    :is-label="true"
                    :is-common="true"
+                    :is-color="true"
                    :data="colorList"
                    @update:data="color = $event"
                />
@ -100,7 +101,7 @@
    import { computed, ref, watch, onMounted, inject } from 'vue';
    import SearchBar from '@c/search/SearchBar.vue';
    import ProjectCard from '@c/list/ProjectCard.vue';
-    import CategoryBtn from '@c/category/CategoryBtn.vue';
+    import CategoryBtn from '@/components/category/CategoryBtn.vue';
    import WriteBtn from '@c/button/WriteBtn.vue';
    import CenterModal from '@c/modal/CenterModal.vue';
    import FormSelect from '@c/input/FormSelect.vue';
--- a/src/components/user/FindPassword.vue
+++ b/src/components/user/FindPassword.vue
@ -68,20 +68,21 @@
            :is-alert="passwordcheckAlert"
            @update:data="passwordcheck = $event"
            @update:alert="passwordcheckAlert = $event"
-            @blur="checkPw"
+            @input="checkPw"
            :value="passwordcheck"
        />
        <span v-if="passwordcheckError" class="invalid-feedback d-block">{{ passwordcheckError }}</span>

-        <div class="d-grid gap-2 mt-5 mb-5">
-            <SaveBtn @click="handleNewPassword" />
-            <p v-if="pwErrMsg" class="invalid-feedback d-block mb-0">{{ pwErrMsg }}</p>
+        <div class="d-flex gap-2 mt-7 mb-3">
+                <BackBtn class=" w-50" @click="handleback"/>
+                <SaveBtn class="w-50" @click="handleNewPassword" />
        </div>
+        <p v-if="pwErrMsg" class="invalid-feedback d-block mb-0">{{ pwErrMsg }}</p>
    </div>
 </template>

 <script setup>
-    import { ref } from 'vue';
+    import { ref, watch } from 'vue';
    import $api from '@api';
    import commonApi from '@/common/commonApi';
    import { useRouter } from 'vue-router';
@ -112,7 +113,7 @@

    const passwordAlert = ref(false);
    const passwordcheckAlert = ref(false);
-    const passwordcheckErrorAlert = ref(false);
+    const passwordMismatch = ref(false);

    const { pwhintList } = commonApi({
        loadPwhint: true,
@ -127,6 +128,13 @@
        router.push('/login');
    }

+    // 비밀번호와 비밀번호 확인이 변경될 때마다 유효성 검사
+    watch([password, passwordcheck], () => {
+        if (passwordcheck.value !== '') {
+            checkPw();
+        }
+    });
+
    // 아이디, 생년월일, 비밀번호 힌트, 답변이 일치하는 member 재설정 input 보이기
    const handleSubmit = async () => {
        userCheckMsg.value = '';
@ -153,13 +161,13 @@
        }
    };

-    const checkPw = async () => {
+    const checkPw = () => {
        if (password.value !== passwordcheck.value) {
            passwordcheckError.value = '비밀번호가 일치하지 않습니다.';
-            passwordcheckErrorAlert.value = true;
+            passwordMismatch.value = true;
        } else {
            passwordcheckError.value = '';
-            passwordcheckErrorAlert.value = false;
+            passwordMismatch.value = false;
        }
    };

@ -168,8 +176,10 @@
        pwErrMsg.value = '';
        passwordAlert.value = password.value.trim() === '';
        passwordcheckAlert.value = passwordcheck.value.trim() === '';
+
        checkPw();
-        if (passwordAlert.value || passwordcheckAlert.value || passwordcheckErrorAlert.value) {
+
+        if (passwordAlert.value || passwordcheckAlert.value || passwordMismatch.value) {
            return;
        }

@ -192,6 +202,5 @@
            toastStore.onToast('비밀번호가 재설정 되었습니다.', 's');
            router.push('/login');
        }
-
    };
 </script>
--- a/src/components/user/RegisterForm.vue
+++ b/src/components/user/RegisterForm.vue
@ -92,6 +92,7 @@
                    :is-row="false"
                    :is-label="true"
                    :is-common="true"
+                    :is-color="true"
                    :data="colorList"
                    @update:data="color = $event"
                    class="w-50"
@ -118,6 +119,7 @@
                    :is-row="false"
                    :is-label="true"
                    :is-common="true"
+                    :is-mbti="true"
                    :data="mbtiList"
                    @update:data="mbti = $event"
                    class="w-50"
--- a/src/components/user/UserList.vue
+++ b/src/components/user/UserList.vue
@ -1,7 +1,7 @@
 <template>
    <ul class="list-unstyled users-list d-flex align-items-center gap-1">
        <li
-            v-for="(user, index) in userList"
+            v-for="(user, index) in sortedUserList"
            :key="index"
            class="avatar pull-up"
            :class="{ 'opacity-100': isUserDisabled(user) }"
@ -25,7 +25,7 @@
 </template>

 <script setup>
-import { onMounted, ref, nextTick } from 'vue';
+import { onMounted, ref, nextTick, computed } from 'vue';
 import { useUserStore } from '@s/userList';
 import $api from '@api';

@ -41,6 +41,19 @@ const props = defineProps({
    }
 });

+// 활성화된 회원을 앞으로 정렬하는 computed 속성
+const sortedUserList = computed(() => {
+    return [...userList.value].sort((a, b) => {
+        const aDisabled = isUserDisabled(a);
+        const bDisabled = isUserDisabled(b);
+
+        // 활성화된 사용자가 먼저 오도록 정렬
+        if (!aDisabled && bDisabled) return -1;
+        if (aDisabled && !bDisabled) return 1;
+        return 0;
+    });
+});
+
 // 사용자의 프로젝트 참여 상태 확인
 const fetchProjectParticipation = async () => {
    if (props.projctSeq) {
@ -79,25 +92,31 @@ const isUserDisabled = (user) => {

 // 클릭 시 활성화/비활성화 및 DB 업데이트
 const toggleDisable = async (index) => {
-    const user = userList.value[index];
+    const user = sortedUserList.value[index];
    if (user) {
        const newParticipationStatus = props.projctSeq
            ? user.PROJCTYON === '1'
            : !user.disabled;
-
        if (props.projctSeq) {
            const response = await $api.patch('project/updateYon', {
                memberSeq: user.MEMBERSEQ,
                projctSeq: props.projctSeq,
                projctYon: newParticipationStatus ? '0' : '1'
            });
-
            if (response.status === 200) {
-                user.PROJCTYON = newParticipationStatus ? '0' : '1';
+                // 원래 userList에서 해당 사용자를 찾아 업데이트
+                const originalIndex = userList.value.findIndex(u => u.MEMBERSEQ === user.MEMBERSEQ);
+                if (originalIndex !== -1) {
+                    userList.value[originalIndex].PROJCTYON = newParticipationStatus ? '0' : '1';
+                }
            }
        } else {
-            user.disabled = newParticipationStatus;
-            emitUserListUpdate();
+            // 원래 userList에서 해당 사용자를 찾아 업데이트
+            const originalIndex = userList.value.findIndex(u => u.MEMBERSEQ === user.MEMBERSEQ);
+            if (originalIndex !== -1) {
+                userList.value[originalIndex].disabled = newParticipationStatus;
+                emitUserListUpdate();
+            }
        }
    }
 };
--- a/src/components/wordDict/DictCard.vue
+++ b/src/components/wordDict/DictCard.vue
@ -18,7 +18,6 @@
                type="checkbox" 
                class="form-check-input admin-chk"
                :name="item.WRDDICSEQ" 
-                id=""
                @change="toggleCheck($event)"
            >
            <div class="d-flex align-ite-center">
@ -66,7 +65,7 @@
        </div>

        <div class="edit-btn" v-if="userStore.user.role !== 'ROLE_ADMIN'">
-            <EditBtn @click="writeStore.toggleItem(item.WRDDICSEQ)" />
+            <EditBtn ref="writeButton" @click="writeStore.toggleItem(item.WRDDICSEQ)" :isToggleEnabled="true"/>
        </div>
    </li>
 </template>
@ -74,7 +73,7 @@
 <script setup>
 import axios from "@api";
 import { useToastStore } from '@s/toastStore';
-import { ref, toRefs, getCurrentInstance, } from 'vue';
+import { getCurrentInstance, ref } from 'vue';
 import EditBtn from '@/components/button/EditBtn.vue';
 import $api from '@api';
 import DictWrite from './DictWrite.vue';
@ -82,6 +81,7 @@ import { useUserInfoStore } from '@s/useUserInfoStore';
 import { useWriteVisibleStore } from '@s/writeVisible';

 const writeStore = useWriteVisibleStore();
+const writeButton = ref(null);

 // 유저 구분
 const userStore = useUserInfoStore();
@ -103,68 +103,12 @@ const props = defineProps({
    }
 });

-// 카테고리
-// const localCateList = ref([...props.cateList]);
-// 선택 카테고리
-// const selectedCategory = ref('');
-
 // cateList emit
 const emit = defineEmits(['update:cateList','refreshWordList', 'updateChecked']);

-// 글 수정 상태
-// const isWriteVisible = ref(false);
-
-
-// 글 수정 toggle
-// const toggleWriteVisible = () => {
-//     isWriteVisible.value = !isWriteVisible.value;
-// };
-
-//카테고리 등록 수정
-// const addCategory = (data) => {
-//     try {
-//         const lastCategory = localCateList.value.length > 0 
-//             ? localCateList.value[localCateList.value.length - 1] 
-//             : null;
-//         const newValue = lastCategory ? lastCategory.value + 1 : 600101;
-
-//         // // console.log('lastCategory', lastCategory);
-//         // // console.log('newValue', newValue);
-
-//         axios.post('worddict/insertCategory', {
-//             CMNCODNAM: data
-//         }).then(res => {
-//             if(res.data.data === 1){
-//                 toastStore.onToast('카테고리가 추가 등록 되었습니다.', 's');
-//                 const newCategory = { label: data, value: newValue };
-//                 localCateList.value = [newCategory, ...localCateList.value];
-//                 selectedCategory.value = newCategory.value;
-
-//                 // // console.log('newCategory', newCategory);
-//                 // // console.log('localCateList.value', localCateList.value);
-//                 // // console.log('selectedCategory.value', selectedCategory.value);
-                
-//                 // // 부모에게 전달
-//                 emit('update:cateList', localCateList.value);
-//             } else if(res.data.message == '이미 존재하는 카테고리명입니다.') {
-//                 toastStore.onToast(res.data.message, 'e');
-//             }
-//         }).catch(err => {
-//             console.error('카테고리 추가 중 오류:', err);
-//         });
-//     } catch (err) {
-//         console.error('카테고리 추가 함수 오류:', err);
-//     }
-// }
-

 // 용어집 수정
 const editWord = (data) => {
-    // console.log('📌 수정할 데이터:', data);
-    // console.log('📌 수정할 데이터:', data.id);
-    // console.log('📌 수정할 데이터:', data.category);
-    // console.log('📌 수정할 데이터:', data.title);
-    // console.log('📌 수정할 데이터:', $common.deltaAsJson(data.content));

    if (!data.id) {
        console.error('❌ 수정할 데이터의 ID가 없습니다.');
@ -181,8 +125,10 @@ const editWord = (data) => {
    .then((res) => {
        if (res.data.data === 1) {
            toastStore.onToast('✅ 용어가 수정되었습니다.', 's');
-            // isWriteVisible.value = false;
            writeStore.closeAll();
+            if (writeButton.value) {
+                writeButton.value.resetButton();
+            }
            emit('refreshWordList');
        } else {
            console.warn('⚠️ 서버 응답이 예상과 다릅니다:', res.data);
@ -216,10 +162,13 @@ const toggleCheck = (event) => {
 </script>

 <style scoped>
-/* 동그란 테두리 설정 */
+.avatar {
+    cursor: default;
+}
+
 .user-avatar {
-    border: 3px solid; /* 테두리 */
-    padding: 0.1px; /* 테두리와 이미지 사이의 간격 */
+    border: 3px solid;
+    padding: 0.1px;
 }

 .edit-btn {
--- a/src/components/wordDict/DictWrite.vue
+++ b/src/components/wordDict/DictWrite.vue
@ -29,11 +29,6 @@
                    @focusout="handleCategoryFocusout(addCategory)"
                />
            </div>
-            <!-- <div class="col-2 btn-margin">
-                <button class="btn btn-primary btn-icon" @click="saveInput">
-                    <i class="bx bx-check"></i>
-                </button>
-            </div> -->
        </div>
    </div>
    <div class="dict-w">
@ -65,14 +60,6 @@ import QEditor from '@/components/editor/QEditor.vue';
 import FormInput from '@/components/input/FormInput.vue';
 import FormSelect from '@/components/input/FormSelect.vue';
 import PlusBtn from '../button/PlusBtn.vue';
-// import { clearConfig } from 'dompurify';
-// import { useUserInfoStore } from '@s/useUserInfoStore';
-
-// 유저 구분
-// const userStore = useUserInfoStore();
-
-// 유저 상태에 따른 disabled
-// const isDisabled = computed(() => userStore.user.role !== 'ROLE_ADMIN');

 const emit = defineEmits(['close','addCategory','addWord']);

@ -133,20 +120,6 @@ const toggleInput = () => {
    showInput.value = !showInput.value;
 };

-
-// 카테고리 저장
-// const saveInput = () => {
-//     if(addCategory.value == ''){
-//         addCategoryAlert.value = true;
-//         return;
-//     }else {
-//         addCategoryAlert.value = false;
-//     }
-//     console.log('입력값 저장됨!',addCategory.value);
-//     emit('addCategory', addCategory.value);
-//     showInput.value = false;
-// };
-
 const onChange = (newValue) => {
    selectCategory.value = newValue.target.value;
 };
@ -199,11 +172,9 @@ const handleCategoryFocusout = (value) => {
    const valueTrim = value.trim();

    const existingCategory = props.dataList.find(item => item.label === valueTrim);
-    // console.log('existingCategory', existingCategory);
    
    // 카테고리 입력시 공백
    if(valueTrim == ''){
-        //alert('공백 ㄴㄴ');
        addCategoryAlert.value = true;
        
        // 공백시 강제 focus
--- a/src/layouts/NormalLayout.vue
+++ b/src/layouts/NormalLayout.vue
@ -32,17 +32,17 @@

    window.isDarkStyle = window.Helpers.isDarkStyle();

-const loadScript = src => {
-    const script = document.createElement('script');
-    script.src = src;
-    script.type = 'text/javascript';
-    script.async = true;
-    document.body.appendChild(script);
-};
-nextTick(async () => {
-    await wait(200);
-    loadScript('/vendor/js/menu.js');
-    // loadScript('/js/main.js');
-});
+    const loadScript = src => {
+        const script = document.createElement('script');
+        script.src = src;
+        script.type = 'text/javascript';
+        script.async = true;
+        document.body.appendChild(script);
+    };
+    nextTick(async () => {
+        await wait(200);
+        loadScript('/vendor/js/menu.js');
+        loadScript('/js/main.js');
+    });
 </script>
 <style></style>
--- a/src/layouts/TheMenu.vue
+++ b/src/layouts/TheMenu.vue
@ -23,9 +23,10 @@
                <span class="app-brand-text demo menu-text fw-bold ms-2">LOCALNET</span>
            </a>

-            <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
+            <!-- 메뉴 토글바 -->
+            <!-- <a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
                <i class="bx bx-chevron-left bx-sm d-flex align-items-center justify-content-center"></i>
-            </a>
+            </a> -->
        </div>

        <div class="menu-inner-shadow"></div>
--- a/src/layouts/TheTop.vue
+++ b/src/layouts/TheTop.vue
@ -241,7 +241,7 @@

    const user = ref(null);
    //const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
-    const baseUrl = import.meta.env.BASE_URL;
+    const baseUrl = import.meta.env.VITE_SERVER;

    const authStore = useAuthStore();
    const userStore = useUserInfoStore();
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@ -18,8 +18,8 @@
                            <option value="50">50개씩</option>
                        </select>

-                         <!-- 셀렉트 박스 -->
-                         <select class="form-select w-25 w-md-100" v-model="selectedOrder" @change="handleSortChange">
+                        <!-- 셀렉트 박스 -->
+                        <select class="form-select w-25 w-md-100" v-model="selectedOrder" @change="handleSortChange">
                            <option value="date">최신날짜</option>
                            <option value="views">조회수</option>
                        </select>
@ -59,8 +59,9 @@
                                    <td class="text-center">공지</td>
                                    <td class="cursor-pointer">
                                        📌 {{ notice.title }}
+                                        <span v-if="notice.commentCount" class="comment-count">[ {{ notice.commentCount }} ]</span>
                                        <i v-if="notice.img" class="bi bi-image me-1"></i>
-                                        <i v-if="notice.hasAttachment" class="bi bi-paperclip"></i>
+                                        <i v-if="Array.isArray(notice.hasAttachment) && notice.hasAttachment.length > 0" class="bi bi-paperclip"></i>
                                        <span v-if="isNewPost(notice.rawDate)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
                                    </td>
                                    <td class="text-center">{{ notice.author }}</td>
@ -76,8 +77,9 @@
                                <td class="text-center">{{ post.id }}</td>
                                <td class="cursor-pointer">
                                    {{ post.title }}
+                                    <span v-if="post.commentCount" class="comment-count">[ {{ post.commentCount }} ]</span>
                                    <i v-if="post.img" class="bi bi-image me-1"></i>
-                                    <i v-if="post.hasAttachment" class="bi bi-paperclip"></i>
+                                    <i v-if="Array.isArray(post.hasAttachment) && post.hasAttachment.length > 0" class="bi bi-paperclip"></i>
                                    <span v-if="isNewPost(post.rawDate)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
                                </td>
                                <td class="text-center">{{ post.author }}</td>
@ -195,11 +197,7 @@ const fetchGeneralPosts = async (page = 1) => {
        });

        if (data?.data) {
-            // console.log(data)
-            const totalPosts = data.data.total; // 전체 게시물 개수 받아오기
-
-            // console.log('📌 API 응답 데이터:', data.data);
-
+            const totalPosts = data.data.total;
            generalList.value = data.data.list.map((post, index) => ({
                realId: post.id,
                id: totalPosts - ((page - 1) * selectedSize.value) - index,
@ -208,8 +206,9 @@ const fetchGeneralPosts = async (page = 1) => {
                rawDate: post.date,
                date: formatDate(post.date), // 날짜 변환 적용
                views: post.cnt || 0,
-                hasAttachment: post.hasAttachment || false,
-                img: post.firstImageUrl || null
+                hasAttachment: post.hasAttachment,
+                img: post.firstImageUrl || null,
+                commentCount : post.commentCount
            }));

            pagination.value = {
@ -248,8 +247,9 @@ const fetchNoticePosts = async () => {
                date: formatDate(post.date),
                rawDate: post.date,
                views: post.cnt || 0,
-                hasAttachment: post.hasAttachment || false,
-                img: post.firstImageUrl || null
+                hasAttachment: post.hasAttachment,
+                img: post.firstImageUrl || null,
+                commentCount : post.commentCount
            }));
        }
    } catch (error) {
@ -289,4 +289,12 @@ onMounted(() => {
            width: 100% !important;
        }
    }
+    /* 댓글 개수 스타일 */
+.comment-count {
+  font-size: 0.9rem; /* 글씨 크기 증가 */
+  font-weight: bold;
+  color: #ff5733; /* 강조 색상 (붉은 계열) */
+  border-radius: 4px; /* 둥근 모서리 */
+  padding: 2px 6px; /* 내부 패딩 */
+}
 </style>
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@ -17,46 +17,35 @@
                                :isAuthor="isAuthor"
                                @editClick="editClick"
                                @deleteClick="deleteClick"
-                                />
-
-                            <!-- 비밀번호 입력창 (익명일 경우) -->
-                            <div v-if="isPassword && unknown" class="mt-3 w-25 ms-auto">
-                                <div class="input-group">
-                                    <input
-                                        type="password"
-                                        class="form-control"
-                                        v-model="password"
-                                        placeholder="비밀번호 입력"
-                                    />
-                                    <button class="btn btn-primary" @click="submitPassword">확인</button>
-                                </div>
-                                <span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span>
-                            </div>
+                            />
                        </div>
                    </div>
+
                    <!-- 게시글 내용 -->
                    <div class="card-body">
-
                        <div class="d-flex justify-content-between align-items-center flex-wrap mb-6 gap-2">
                            <!-- 제목 섹션 -->
                            <div class="me-1">
                                <h5 class="mb-4">{{ boardTitle }}</h5>
                            </div>

-                            <!-- 첨부파일 섹션 -->
-                            <div v-if="attachment" class="btn-group">
+                            <!-- 첨부파일 다운로드 버튼 -->
+                            <div v-if="attachments.length" class="btn-group">
                                <button type="button" class="btn btn-label-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                                    <i class="fa-solid fa-download me-2"></i>
-                                    첨부파일
-                                    <!-- (<span class="attachment-num">{{ dropdownItems.length }}</span>) -->
+                                    첨부파일 ({{ attachments.length }}개)
                                </button>
-                                <!-- <ul class="dropdown-menu">
-                                    <li v-for="(item, index) in dropdownItems" :key="index">
-                                        <a class="dropdown-item" href="javascript:void(0);">
-                                            {{ item.label }}
+                                <ul class="dropdown-menu">
+                                    <li v-for="(attachment, index) in attachments" :key="index">
+                                        <a
+                                            class="dropdown-item"
+                                            href="#"
+                                            @click.prevent="downloadFile(attachment)"
+                                        >
+                                            {{ attachment.originalName }}.{{ attachment.extension }}
                                        </a>
                                    </li>
-                                </ul> -->
+                                </ul>
                            </div>
                        </div>

@ -74,21 +63,8 @@
                                :likeClicked="likeClicked"
                                :dislikeClicked="dislikeClicked"
                                @updateReaction="handleUpdateReaction"
-                                />
+                            />
                        </div>
-                        <!-- <p>현재 로그인한 사용자 ID: {{ currentUserId }}</p>
-                        <p>게시글 작성자: {{ authorId }}</p>
-                        <p>isAuthor 값: {{ isAuthor }}</p> -->
-                        <!-- <p>use이미지:{{userStore.user.img}}</p> -->
-                        <!-- <img :src="`http://localhost:10325/upload/img/profile/${userStore.user.profile}`" alt="Profile Image" class="w-px-40 h-auto rounded-circle"/> -->
-
-
-                        <!-- 첨부파일 목록 -->
-                        <!-- <ul v-if="attachments.length" class="attachments mt-4 list-unstyled">
-                            <li v-for="(attachment, index) in attachments" :key="index" class="mb-2">
-                                <a :href="attachment.url" target="_blank" class="text-decoration-none">{{ attachment.name }}</a>
-                            </li>
-                        </ul> -->

                        <!-- 댓글 입력 영역 -->
                        <BoardCommentArea
@ -98,7 +74,6 @@
                            :passwordAlert="passwordAlert"
                            @submitComment="handleCommentSubmit"
                        />
-                        <!-- <BoardCommentArea :profileName="profileName" :unknown="unknown" /> -->
                    </div>

                    <!-- 댓글 목록 -->
@ -106,9 +81,12 @@
                        <BoardCommentList
                            :unknown="unknown"
                            :comments="commentsWithAuthStatus"
-                            :isCommentPassword="Boolean(isCommentPassword)"
+                            :isCommentPassword="isCommentPassword"
                            :isEditTextarea="isEditTextarea"
+                            :isDeleted="isDeleted"
                            :passwordCommentAlert="passwordCommentAlert"
+                            :currentPasswordCommentId="currentPasswordCommentId"
+                            :password="password"
                            @editClick="editComment"
                            @deleteClick="deleteComment"
                            @updateReaction="handleCommentReaction"
@ -117,6 +95,7 @@
                            @commentDeleted="handleCommentDeleted"
                            @cancelEdit="handleCancelEdit"
                            @submitEdit="handleSubmitEdit"
+                            @update:password="updatePassword"
                        />
                        <Pagination
                            v-if="pagination.pages"
@ -173,20 +152,50 @@ const commentsWithAuthStatus = computed(() => {
            isCommentAuthor: reply.authorId === currentUserId.value,
        }))
    }));
-    // console.log("✅ commentsWithAuthStatus 업데이트됨:", updatedComments);
    return updatedComments;
 });

+const attachments = ref([]);
+// 첨부파일 다운로드 URL 생성
+const downloadFile = async (attachment) => {
+    try {
+        const response = await axios.get(`board/download`, {
+            params: { path: attachment.path },
+            responseType: 'blob'
+        });
+
+        // Blob에서 파일 다운로드 링크 생성
+        const url = window.URL.createObjectURL(new Blob([response.data]));
+        const link = document.createElement('a');
+        link.href = url;
+        link.setAttribute('download', attachment.originalName + '.' + attachment.extension);
+        document.body.appendChild(link);
+        link.click();
+        link.remove();
+        window.URL.revokeObjectURL(url);
+    } catch (error) {
+        console.error('파일 다운로드 오류:', error);
+        alert('파일 다운로드 중 오류가 발생했습니다.');
+    }
+};
+
+

 const password = ref('');
 const passwordAlert = ref("");
 const passwordCommentAlert = ref("");
 const isPassword = ref(false);
 const isCommentPassword = ref(false);
+const currentPasswordCommentId = ref(null);
 const lastClickedButton = ref("");
 const lastCommentClickedButton = ref("");
 const isEditTextarea = ref(false);
-const commentAlert = ref('')
+const isDeleted = ref(true);
+const commentAlert = ref('');
+
+const updatePassword = (newPassword) => {
+    password.value = newPassword;
+};

 const pagination = ref({
    currentPage: 1,
@ -210,21 +219,10 @@ const fetchBoardDetails = async () => {
        const response = await axios.get(`board/${currentBoardId.value}`);
        const data = response.data.data;

-        // console.log(data)
-
-        // API 응답 데이터 반영
-        // const boardDetail = data.boardDetail || {};

        profileName.value = data.author || '익명';

-        // 익명확인하고 싶을때
-        // profileName.value = '익명';
-
-        // console.log("📌 게시글 작성자:", profileName.value); // 작성자 이름 출력
-        // console.log("🔍 익명 여부 (unknown.value):", unknown.value); // 익명 여부 확인
-
-
-        authorId.value = data.authorId; //게시글 작성자 id
+        authorId.value = data.authorId;
        boardTitle.value = data.title || '제목 없음';
        boardContent.value = data.content || '';
        date.value = data.date || '';
@ -233,6 +231,7 @@ const fetchBoardDetails = async () => {
        dislikes.value = data.dislikeCount || 0;
        attachment.value = data.hasAttachment || null;
        commentNum.value = data.commentCount || 0;
+        attachments.value = data.attachments || [];

    } catch (error) {
        alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
@ -245,7 +244,6 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
        await axios.post(`/board/${boardId}/${commentId}/reaction`, {
            LOCBRDSEQ: boardId, // 게시글 id
            LOCCMTSEQ: commentId, //댓글 id
-            // MEMBERSEQ: 1, // 멤버아이디 지금은 1 나중에 수정해야함
            LOCGOBGOD: isLike ? 'T' : 'F',
            LOCGOBBAD: isDislike ? 'T' : 'F'
        });
@ -258,13 +256,9 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =

        likeClicked.value = isLike;
        dislikeClicked.value = isDislike;
-        // console.log(updatedData)
-
-        // console.log("갱신된 데이터:", updatedData);

    } catch (error) {
        alert('오류가 발생했습니다.');
-        // console.log('반응을 업데이트하는 중 오류가 발생했습니다.');
    }
 };

@ -281,13 +275,10 @@ const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike })
            LOCGOBBAD: isDislike ? 'T' : 'F'
        });

-        // console.log("댓글 좋아요 API 응답 데이터:", response.data);
-
        await fetchComments();

    } catch (error) {
        alert('오류가 발생했습니다.');
-        // console.log('댓글 반응을 업데이트하는 중 오류 발생');
    }
 };

@ -301,9 +292,6 @@ const fetchComments = async (page  = 1) => {
                page
            }
        });
-
-        // console.log(response.data.data)
-
        const commentsList = response.data.data.list.map(comment => ({
            commentId: comment.LOCCMTSEQ, // 댓글 ID
            boardId: comment.LOCBRDSEQ,
@ -318,8 +306,12 @@ const fetchComments = async (page  = 1) => {
            createdAtRaw: new Date(comment.LOCCMTRDT), // 정렬용
            createdAt: formattedDate(comment.LOCCMTRDT), // 표시용
            children: [], // 대댓글을 담을 배열
+            updateAtRaw: comment.LOCCMTUDT,
+
        }));

+        commentsList.sort((a, b) => b.createdAtRaw - a.createdAtRaw);
+
        for (const comment of commentsList) {
            if (!comment.commentId) continue;

@ -327,8 +319,6 @@ const fetchComments = async (page  = 1) => {
                params: { LOCCMTPNT: comment.commentId }
            });

-            // console.log(`대댓글 데이터 (${comment.commentId}의 대댓글):`, replyResponse.data);
-
            if (replyResponse.data.data) {
                comment.children = replyResponse.data.data.map(reply => ({
                    author: reply.author || '익명',
@ -368,23 +358,19 @@ const fetchComments = async (page  = 1) => {
            navigateLastPage: response.data.data.navigateLastPage // 페이지네이션에서 마지막 페이지 번호
        };

-        // console.log("📌 댓글 목록:", comments.value);
-

    } catch (error) {
        alert('오류가 발생했습니다.');
-        // alert('댓글 목록 불러오기 오류:', error);
    }
 };

 // 댓글 작성
-const handleCommentSubmit = async (data, isCheck) => {
+const handleCommentSubmit = async (data) => {
    if (!data) {
-        console.error("handleCommentSubmit: data가 undefined입니다.");
        return;
    }

-    const { comment, password } = data;
+    const { comment, password, isCheck } = data;

    if (!comment || comment.trim() === "") {
        commentAlert.value = '댓글을 입력해주세요.';
@ -404,25 +390,22 @@ const handleCommentSubmit = async (data, isCheck) => {
            LOCCMTRPY: comment,
            LOCCMTPWD: isCheck ? password : '',
            LOCCMTPNT: 1,
-            LOCBRDTYP: unknown.value ? "300102" : null
+            LOCBRDTYP: isCheck ? "300102" : null
        });

        if (response.status === 200) {
-            // console.log('댓글 작성 성공:', response.data.message);
            passwordAlert.value = '';
            commentAlert.value = '';
            await fetchComments();
        } else {
-            // console.error('댓글 작성 실패:', response.data.message);
            alert("댓글 작성을 실패했습니다.")
        }
    } catch (error) {
-        // console.error('댓글 작성 중 오류 발생:', error);
        alert("오류가 발생했습니다.")
    }
 };

-// 대댓글 추가 (부모 `BoardCommentList`로부터 이벤트 받아서 처리)
+// 대댓글 추가
 const handleCommentReply = async (reply) => {
    try {
        const response = await axios.post(`board/${currentBoardId.value}/comment`, {
@ -434,22 +417,17 @@ const handleCommentReply = async (reply) => {
        });

        if (response.status === 200) {
-            if (response.data.code === 200) {  // 서버 응답 코드도 확인
-                // console.log('대댓글 작성 성공:', response.data);
-                await fetchComments();  // 댓글 목록 새로고침
+            if (response.data.code === 200) {
+                await fetchComments();
            } else {
-                // console.log('대댓글 작성 실패 - 서버 응답:', response.data);
                alert('대댓글 작성을 실패했습니다.');
            }
        }
    } catch (error) {
-        // console.error('대댓글 작성 중 오류 발생:', error);
        if (error.response) {
-            // console.error('서버 응답 에러:', error.response.data);
            alert("오류가 발생했습니다.");
        }
        alert("오류가 발생했습니다.");
-
    }
 }

@ -486,45 +464,69 @@ const findCommentById = (commentId, commentsList) => {
    return null;
 };

-// 댓글 수정 버튼 클릭
+// 댓글 수정(대댓글 포함)
 const editComment = (comment) => {
+    password.value = '';
+    passwordCommentAlert.value = '';
+    currentPasswordCommentId.value = null;

-    // 부모 또는 대댓글을 찾아서 가져오기
    const targetComment = findCommentById(comment.commentId, comments.value);

    if (!targetComment) {
        return;
    }

-    // 댓글 작성자가 현재 로그인한 사용자와 동일한지 확인
    const isMyComment = comment.authorId === currentUserId.value;
    const isAnonymous = comment.author === "익명";

    if (isMyComment) {
-        // 본인 댓글이면 바로 수정 모드 활성화
-        targetComment.isEditTextarea = true;
-    } else if (isAnonymous) {
-        // 익명 댓글이면 비밀번호 입력창 띄우기
-        toggleCommentPassword(comment, "edit");
+        if (targetComment.isEditTextarea) {
+            // 수정창이 열려 있는 상태에서 다시 수정 버튼을 누르면 초기화
+            targetComment.isEditTextarea = false;
+            currentPasswordCommentId.value = comment.commentId;
+        } else {
+            // 다른 모든 댓글의 수정창 닫기
+            closeAllEditTextareas();

+            // 현재 댓글만 수정 모드 활성화
+            targetComment.isEditTextarea = true;
+        }
+    } else if (isAnonymous) {
+        if (currentPasswordCommentId.value === comment.commentId) {
+            // 이미 비밀번호 입력 중이면 유지
+            return;
+        } else {
+            // 다른 모든 댓글의 수정창 닫기
+            closeAllEditTextareas();
+
+            // 비밀번호 입력
+            targetComment.isEditTextarea = false;
+            toggleCommentPassword(comment, "edit");
+        }
    } else {
-        // console.log("다른 사용자 댓글 - 수정 불가");
        alert("수정이 불가능합니다");
    }
 }

+// 모든 댓글의 수정 창 닫기
+const closeAllEditTextareas = () => {
+    comments.value.forEach(comment => {
+        comment.isEditTextarea = false;
+        comment.children.forEach(reply => {
+            reply.isEditTextarea = false;
+        });
+    });
+};
+
 // 댓글 삭제 버튼 클릭
 const deleteComment = async (comment) => {
-    // 익명 사용자인 경우
    const isMyComment = comment.authorId === currentUserId.value;

    if (unknown.value && !isMyComment) {
        if (comment.isEditTextarea) {
-            // 현재 수정 중이라면 수정 모드를 끄고, 삭제 비밀번호 입력창을 띄움
            comment.isEditTextarea = false;
            comment.isCommentPassword = true;
        } else {
-            // 수정 중이 아니면 기존의 삭제 비밀번호 입력창을 띄우는 로직 실행
            toggleCommentPassword(comment, "delete");
        }
    } else {
@ -532,19 +534,21 @@ const deleteComment = async (comment) => {
    }
 };

-// 익명 비밀번호 창 토글
+// 익명 댓글 비밀번호 창 토글
 const toggleCommentPassword = (comment, button) => {
-    if (lastCommentClickedButton.value === button && isCommentPassword.value === comment.commentId) {
-        isCommentPassword.value = false; // 비밀번호 창 닫기
+    if (lastCommentClickedButton.value === button && currentPasswordCommentId.value === comment.commentId) {
+        currentPasswordCommentId.value = null; // 비밀번호 창 닫기
+        password.value = '';
+        passwordCommentAlert.value = '';
    } else {
-        isCommentPassword.value = comment.commentId; // 비밀번호 창 열기
+        currentPasswordCommentId.value = comment.commentId; // 비밀번호 창 열기
+        password.value = '';
+        passwordCommentAlert.value = '';
    }

    lastCommentClickedButton.value = button;
 };

-
-
 const togglePassword = (button) => {
    if (lastClickedButton.value === button) {
        isPassword.value = !isPassword.value;
@ -556,16 +560,15 @@ const togglePassword = (button) => {

 // 게시글 비밀번호 제출
 const submitPassword = async () => {
-    if (!password.value) {
+    if (!password.value.trim()) {
        passwordAlert.value = "비밀번호를 입력해주세요.";
        return;
    }
-    // console.log("📌 요청 시작: submitPassword 실행됨");

    try {
        const response = await axios.post(`board/${currentBoardId.value}/password`, {
            LOCBRDPWD: password.value,
-            LOCBRDSEQ: 288, // 나중에 현재 게시글 ID 사용해야함
+            LOCBRDSEQ: 288,
        });

        if (response.data.code === 200 && response.data.data === true) {
@ -582,8 +585,6 @@ const submitPassword = async () => {
            passwordAlert.value = "비밀번호가 일치하지 않습니다.";
        }
    } catch (error) {
-        // console.log("📌 전체 오류:", error);
-
        if (error.response) {
            if (error.response.status === 401) {
                passwordAlert.value = "비밀번호가 일치하지 않습니다.";
@ -598,34 +599,40 @@ const submitPassword = async () => {
    }
 };

-// 댓글 삭제 (비밀번호 확인 후)
+// 댓글 (비밀번호 확인 후)
 const submitCommentPassword = async (comment, password) => {
-
-    // console.log("비밀번호 :", password);
-    // console.log("댓글 ID:", comment.commentId);
-
    if (!password) {
        passwordCommentAlert.value = "비밀번호를 입력해주세요.";
        return;
    }

+    const targetComment = findCommentById(comment.commentId, comments.value);
+
    try {
-        // console.log('서버로 비밀번호 확인 요청')
        const response = await axios.post(`board/comment/${comment.commentId}/password`, {
            LOCCMTPWD: password,
            LOCCMTSEQ: comment.commentId,
        });
-        // console.log("✅ 서버 응답 데이터:", response.data);

        if (response.data.code === 200 && response.data.data === true) {
            passwordCommentAlert.value = "";
            comment.isCommentPassword = false;

+            // 수정
            if (lastCommentClickedButton.value === "edit") {
-                comment.isEditTextarea = true;
-                passwordCommentAlert.value = "";

-                // handleSubmitEdit(comment, comment.content);
+                if (targetComment) {
+                    // 다른 모든 댓글의 수정 창 닫기
+                    closeAllEditTextareas();
+
+                    targetComment.isEditTextarea = true;
+                    passwordCommentAlert.value = "";
+                    currentPasswordCommentId.value = null;
+
+                } else {
+                    alert("수정 취소를 실패했습니다.");
+                }
+            //삭제
            } else if (lastCommentClickedButton.value === "delete") {
                passwordCommentAlert.value = "";

@ -633,14 +640,12 @@ const submitCommentPassword = async (comment, password) => {
            }
            lastCommentClickedButton.value = null;
        } else {
-            // console.log("❌ 비밀번호가 틀림");
            passwordCommentAlert.value = "비밀번호가 일치하지 않습니다.";
        }
    } catch (error) {
-        // console.log("🚨 서버 요청 중 오류 발생:", error.response?.data || error);
-        // if (error.response?.status === 401) {
-        //     console.log("❌ 401 오류: 인증 실패 (비밀번호 불일치)");
-        // }
+        if (error.response?.status === 401) {
+            passwordCommentAlert.value = "비밀번호가 일치하지 않습니다";
+        }
        passwordCommentAlert.value = "비밀번호가 일치하지 않습니다";
    }
 };
@ -672,24 +677,30 @@ const deletePost = async () => {
 // 댓글 삭제 (대댓글 포함)
 const deleteReplyComment = async (comment) => {
    if (!confirm("정말 이 댓글을 삭제하시겠습니까?")) return;
-    // console.log("댓글 ID:", comment);
+
+    const targetComment = findCommentById(comment.commentId, comments.value);
+
+    // console.log('잘되니?',comment)

    try {
        const response = await axios.delete(`board/comment/${comment.commentId}`, {
            data: { LOCCMTSEQ: comment.commentId }
        });

-        // console.log("서버 응답:", response.data);
-
        if (response.data.code === 200) {
-            // console.log("댓글 삭제 성공!");
            await fetchComments();
+
+            if (targetComment) {
+                // console.log('타겟',targetComment)
+                // ✅ 댓글 내용만 "삭제된 댓글입니다."로 변경하고, 구조는 유지
+                targetComment.content = "댓글이 삭제되었습니다.";
+                targetComment.author = "알 수 없음";  // 익명 처리
+                targetComment.isDeleted = true;  // ✅ 삭제 상태를 추가
+            }
        } else {
-            // console.log("댓글 삭제 실패:", response.data.message);
            alert("댓글 삭제에 실패했습니다.");
        }
    } catch (error) {
-        // console.log("댓글 삭제 중 오류 발생:", error);
        alert("댓글 삭제 중 오류가 발생했습니다.");
    }
 };
@ -702,9 +713,6 @@ const handleSubmitEdit = async (comment, editedContent) => {
            LOCCMTRPY: editedContent
        });

-        // 수정 성공 시 업데이트
-        // comment.content = editedContent;
-        // comment.isEditTextarea = false; f
        if (response.status === 200) {

            const targetComment = findCommentById(comment.commentId, comments.value);
@ -712,15 +720,12 @@ const handleSubmitEdit = async (comment, editedContent) => {
                targetComment.content = editedContent; // 댓글 내용 업데이트
                targetComment.isEditTextarea = false; // 수정 모드 닫기
            } else {
-                // console.warn("❌ 수정할 댓글을 찾을 수 없음");
                alert("수정할 댓글을 찾을 수 없습니다.");
            }
        } else {
-            // console.log("❌ 댓글 수정 실패:", response.data);
            alert("댓글 수정 실패했습니다.");
        }
    } catch (error) {
-        // console.error("댓글 수정 중 오류 발생:", error);
        alert("댓글 수정 중 오류 발생했습니다.");
    }
 };
@ -730,10 +735,8 @@ const handleCancelEdit = (comment) => {
    const targetComment = findCommentById(comment.commentId, comments.value);

    if (targetComment) {
-        // console.log("✅ 원본 데이터 찾음, 수정 취소 처리 가능:", targetComment);
        targetComment.isEditTextarea = false;
    } else {
-        // console.error("❌ 원본 데이터 찾을 수 없음, 수정 취소 실패");
        alert("수정 취소를 실패했습니다.");
    }
 };
@ -756,7 +759,7 @@ const handleCommentDeleted = (deletedCommentId) => {
        return;
    }

-    // 2대댓글 삭제
+    // 대댓글 삭제
    for (let parent of comments.value) {
        const childIndex = parent.children.findIndex(child => child.commentId === deletedCommentId);
        if (childIndex !== -1) {
@ -764,11 +767,8 @@ const handleCommentDeleted = (deletedCommentId) => {
            return;
        }
    }
-
-    // console.error("❌ 삭제할 댓글을 찾을 수 없음:", deletedCommentId);
 };

-
 // 날짜
 const formattedDate = (dateString) => {
    if (!dateString) return "날짜 없음";
--- a/src/views/board/BoardWrite.vue
+++ b/src/views/board/BoardWrite.vue
@ -15,6 +15,8 @@
                        :is-essential="true"
                        :is-alert="titleAlert"
                        v-model="title"
+                        @update:alert="titleAlert = $event"
+                        @input="validateTitle"
                    />

                    <!-- 카테고리 선택 -->
@ -32,16 +34,19 @@
                                    :id="`category-${index}`"
                                    :value="category.CMNCODVAL"
                                    v-model="categoryValue"
+                                    @change="categoryAlert = false"
                                />
                                <label class="form-check-label" :for="`category-${index}`">
                                    {{ category.CMNCODNAM }}
                                </label>
                            </div>
                        </div>
-                        <div class="invalid-feedback" :class="categoryAlert ? 'display-block' : ''">카테고리를 선택해주세요.</div>
+                        <div class="invalid-feedback" :class="categoryAlert ? 'd-block' : 'd-none'">
+                            카테고리를 선택해주세요.
+                        </div>
                    </div>

-                    <!-- 비밀번호 필드 -->
+                    <!-- 비밀번호 필드 (익명게시판 선택 시 활성화) -->
                    <div v-if="categoryValue === 300102" class="mb-4">
                        <FormInput
                            title="비밀번호"
@ -50,26 +55,42 @@
                            :is-essential="true"
                            :is-alert="passwordAlert"
                            v-model="password"
+                            @update:alert="passwordAlert = $event"
+                            @input="validatePassword"
                        />
                    </div>

+                    <!-- 첨부파일 업로드 -->
                    <FormFile
                        title="첨부파일"
                        name="files"
                        :is-alert="attachFilesAlert"
-                        @update:data="attachFiles = $event"
+                        @update:data="handleFileUpload"
                        @update:isValid="isFileValid = $event"
                    />

+                    <!-- 실시간 반영된 파일 개수 표시 -->
+                    <p class="text-muted mt-1">첨부파일: {{ fileCount }} / 5개</p>
+                    <p v-if="fileError" class="text-danger">{{ fileError }}</p>
+
+                    <ul class="list-group mt-2" v-if="attachFiles.length">
+                        <li v-for="(file, index) in attachFiles" :key="index" class="list-group-item d-flex justify-content-between align-items-center">
+                            {{ file.name }}
+                            <button class="close-btn" @click="removeFile(index)">✖</button>
+                        </li>
+                    </ul>
+
+                    <!-- 내용 입력 (에디터) -->
                    <div class="mb-4">
-                        <label for="html5-tel-input" class="col-md-2 col-form-label">
-                            내용
-                            <span class="text-danger">*</span>
-                            <div class="invalid-feedback" :class="contentAlert ? 'display-block' : ''">내용을 확인해주세요.</div>
+                        <label class="col-md-2 col-form-label">
+                            내용 <span class="text-danger">*</span>
                        </label>
                        <div class="col-md-12">
                            <QEditor @update:data="content = $event" />
                        </div>
+                        <div class="invalid-feedback mt-1" :class="contentAlert ? 'd-block' : 'd-none'">
+                            내용을 입력해주세요.
+                        </div>
                    </div>

                    <div class="mb-4 d-flex justify-content-end">
@ -83,23 +104,22 @@
 </template>

 <script setup>
+import { ref, onMounted, getCurrentInstance, watch, computed } from 'vue';
 import QEditor from '@c/editor/QEditor.vue';
 import FormInput from '@c/input/FormInput.vue';
 import FormFile from '@c/input/FormFile.vue';
-import { getCurrentInstance, ref, onMounted } from 'vue';
+import SaveButton from '@c/button/SaveBtn.vue';
+import BackButton from '@c/button/BackBtn.vue';
+import { useToastStore } from '@s/toastStore';
 import router from '@/router';
 import axios from '@api';
-import SaveButton from '@c/button/SaveBtn.vue';
-import BackButton from '@c/button/BackBtn.vue'
-import { useToastStore } from '@s/toastStore';

 const toastStore = useToastStore();
 const categoryList = ref([]);
 const title = ref('');
 const password = ref('');
 const categoryValue = ref(null);
-const content = ref('');
-const attachFiles = ref(null);
+const content = ref({ ops: [] });
 const isFileValid = ref(true);

 const titleAlert = ref(false);
@ -108,17 +128,18 @@ const contentAlert = ref(false);
 const categoryAlert = ref(false);
 const attachFilesAlert = ref(false);

-const { appContext } = getCurrentInstance();
-const $common = appContext.config.globalProperties.$common;
+const attachFiles = ref([]);
+const maxFiles = 5;
+const maxSize = 10 * 1024 * 1024;
+const fileError = ref('');

 const fetchCategories = async () => {
    try {
        const response = await axios.get('board/categories');
        categoryList.value = response.data.data;
-        // "자유" 카테고리 찾기 (CMNCODNAM이 '자유'인 것 선택)
        const freeCategory = categoryList.value.find(category => category.CMNCODNAM === '자유');
        if (freeCategory) {
-            categoryValue.value = freeCategory.CMNCODVAL; // 기본 선택값 설정
+            categoryValue.value = freeCategory.CMNCODVAL;
        }
    } catch (error) {
        console.error('카테고리 불러오기 오류:', error);
@ -129,15 +150,67 @@ onMounted(() => {
    fetchCategories();
 });

-const goList = () => {
-    router.push('/board');
+const fileCount = computed(() => attachFiles.value.length);
+
+const handleFileUpload = (files) => {
+    const validFiles = files.filter(file => file.size <= maxSize);
+    if (files.some(file => file.size > maxSize)) {
+        fileError.value = '파일 크기가 10MB를 초과할 수 없습니다.';
+        return;
+    }
+    if (attachFiles.value.length + validFiles.length > maxFiles) {
+        fileError.value = `최대 ${maxFiles}개의 파일만 업로드할 수 있습니다.`;
+        return;
+    }
+    fileError.value = '';
+    attachFiles.value = [...attachFiles.value, ...validFiles].slice(0, maxFiles);
 };

+const removeFile = (index) => {
+    attachFiles.value.splice(index, 1);
+    if (attachFiles.value.length <= maxFiles) {
+        fileError.value = '';
+    }
+};
+
+watch(attachFiles, () => {
+    isFileValid.value = attachFiles.value.length <= maxFiles;
+});
+
+const validateTitle = () => {
+    titleAlert.value = title.value.trim().length === 0;
+};
+
+const validatePassword = () => {
+    if (categoryValue.value === 300102) {
+        password.value = password.value.replace(/\s/g, ''); // 공백 제거
+        passwordAlert.value = password.value.length === 0;
+    } else {
+        passwordAlert.value = false;
+    }
+};
+
+const validateContent = () => {
+    if (!content.value?.ops?.length) {
+        contentAlert.value = true;
+        return;
+    }
+
+    // 이미지 포함 여부 확인
+    const hasImage = content.value.ops.some(op => op.insert && typeof op.insert === 'object' && op.insert.image);
+    // 텍스트 포함 여부 확인
+    const hasText = content.value.ops.some(op => typeof op.insert === 'string' && op.insert.trim().length > 0);
+
+    // 텍스트 또는 이미지가 하나라도 있으면 유효한 내용
+    contentAlert.value = !(hasText || hasImage);
+};
+
+/** 글쓰기 */
 const write = async () => {
-    titleAlert.value = !title.value;
-    passwordAlert.value = categoryValue.value === 300102 && !password.value;
-    contentAlert.value = !content.value;
-    categoryAlert.value = !categoryValue.value;
+    validateTitle();
+    validatePassword();
+    validateContent();
+    categoryAlert.value = categoryValue.value == null;

    if (titleAlert.value || passwordAlert.value || contentAlert.value || categoryAlert.value || !isFileValid.value) {
        return;
@ -146,16 +219,17 @@ const write = async () => {
    try {
        const boardData = {
            LOCBRDTTL: title.value,
-            LOCBRDCON: $common.deltaAsJson(content.value),
+            LOCBRDCON: JSON.stringify(content.value), // Delta 포맷을 JSON으로 변환
            LOCBRDPWD: categoryValue.value === 300102 ? password.value : null,
            LOCBRDTYP: categoryValue.value
        };

        const { data: boardResponse } = await axios.post('board', boardData);
        const boardId = boardResponse.data;
-
+        // 첨부파일 업로드 (비동기 병렬 처리)
        if (attachFiles.value && attachFiles.value.length > 0) {
-            for (const file of attachFiles.value) {
+            await Promise.all(attachFiles.value.map(async (file) => {
+                console.log(file);
                const formData = new FormData();
                const fileNameWithoutExt = file.name.replace(/\.[^/.]+$/, '');

@ -163,15 +237,12 @@ const write = async () => {
                formData.append('CMNFLEORG', fileNameWithoutExt);
                formData.append('CMNFLEEXT', file.name.split('.').pop());
                formData.append('CMNFLESIZ', file.size);
-                formData.append('CMNFLEPAT', 'boardfile');
-                formData.append('file', file);
+                formData.append('file', file); // 📌 실제 파일 추가

-                await axios.post(`board/${boardId}/attachments`, formData, {
-                    headers: {
-                        'Content-Type': 'multipart/form-data',
-                    },
-                });
-            }
+                await axios.post(`board/${boardId}/attachments`, formData,
+                    { isFormData : true }
+                );
+            }));
        }

        toastStore.onToast('게시물이 작성되었습니다.', 's');
@ -181,4 +252,14 @@ const write = async () => {
        toastStore.onToast('게시물 작성 중 오류가 발생했습니다.', 'e');
    }
 };
+
+/** 목록으로 이동 */
+const goList = () => {
+    router.push('/board');
+};
+
+/** `content` 변경 감지하여 자동 유효성 검사 실행 */
+watch(content, () => {
+    validateContent();
+});
 </script>
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@ -7,9 +7,11 @@
            <div class="sidebar-content">
              <div class="sidebar-actions text-center my-3">
                <HalfDayButtons
-                  @toggleHalfDay="toggleHalfDay"
-                  @addVacationRequests="saveVacationChanges"
-                  :isDisabled="!hasChanges"
+                    ref="halfDayButtonsRef"
+                    @toggleHalfDay="toggleHalfDay"
+                    @addVacationRequests="saveVacationChanges"
+                    :isDisabled="!hasChanges"
+                    :selectedDate="selectedDate"
                />
              </div>
              <ProfileList
@ -58,28 +60,31 @@
    </div>
  </template>

-  <script setup>
-  import { reactive, ref, onMounted, nextTick, computed, watch } from "vue";
-  import axios from "@api";
-  import FullCalendar from "@fullcalendar/vue3";
-  import dayGridPlugin from "@fullcalendar/daygrid";
-  import interactionPlugin from "@fullcalendar/interaction";
-  // Flatpickr 및 MonthSelect 플러그인 임포트
-  import flatpickr from "flatpickr";
-  import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect/index";
-  import "flatpickr/dist/flatpickr.min.css";
-  import "flatpickr/dist/plugins/monthSelect/style.css";
+<script setup>
+import { reactive, ref, onMounted, nextTick, computed, watch, onBeforeUnmount  } from "vue";
+import axios from "@api";
+import FullCalendar from "@fullcalendar/vue3";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import interactionPlugin from "@fullcalendar/interaction";
+// Flatpickr 및 MonthSelect 플러그인 임포트
+import flatpickr from "flatpickr";
+import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect/index";
+import "flatpickr/dist/flatpickr.min.css";
+import "flatpickr/dist/plugins/monthSelect/style.css";

-  import "@/assets/css/app-calendar.css";
-  import "bootstrap-icons/font/bootstrap-icons.css";
-  import HalfDayButtons from "@c/button/HalfDayButtons.vue";
-  import ProfileList from "@c/vacation/ProfileList.vue";
-  import VacationModal from "@c/modal/VacationModal.vue";
-  import VacationGrantModal from "@c/modal/VacationGrantModal.vue";
-  import { useUserStore } from "@s/userList";
-  import { useUserInfoStore } from "@s/useUserInfoStore";
-  import { fetchHolidays } from "@c/calendar/holiday.js";
-  import { useToastStore } from '@s/toastStore';
+import "@/assets/css/app-calendar.css";
+import "bootstrap-icons/font/bootstrap-icons.css";
+import HalfDayButtons from "@c/button/HalfDayButtons.vue";
+import ProfileList from "@c/vacation/ProfileList.vue";
+import VacationModal from "@c/modal/VacationModal.vue";
+import VacationGrantModal from "@c/modal/VacationGrantModal.vue";
+import { useUserStore } from "@s/userList";
+import { useUserInfoStore } from "@s/useUserInfoStore";
+import { fetchHolidays } from "@c/calendar/holiday.js";
+import { useToastStore } from '@s/toastStore';
+import { useRouter } from "vue-router";
+
+const router = useRouter();

  const toastStore = useToastStore();
  const userStore = useUserInfoStore();
@ -90,7 +95,7 @@
  const receivedVacations = ref([]);
  const isModalOpen = ref(false);
  const remainingVacationData = ref({});
-
+  const selectedDate = ref(null);
  const lastRemainingYear = ref(new Date().getFullYear());
  const lastRemainingMonth = ref(String(new Date().getMonth() + 1).padStart(2, "0"));
  const isGrantModalOpen = ref(false);
@ -106,6 +111,39 @@
  const fetchedEvents = ref([]);
  const halfDayButtonsRef = ref(null);

+  // 페이지 이동 시 변경 사항 확인
+router.beforeEach((to, from, next) => {
+  if (hasChanges.value) {
+    const answer = window.confirm("저장하지 않은 변경 사항이 있습니다. 이동하시겠습니까?");
+    if (!answer) {
+      return next(false); // 이동 취소
+    }
+  }
+  next();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("beforeunload", preventUnsavedChanges);
+});
+
+function preventUnsavedChanges(event) {
+  if (hasChanges.value) {
+    event.preventDefault();
+    event.returnValue = ""; // 대부분의 브라우저에서 경고 메시지 표시됨
+  }
+}
+
+// `selectedDates` 변경 시 반차 버튼 초기화
+watch(
+  () => Array.from(selectedDates.value.keys()), // 선택된 날짜 리스트 감시
+  (newKeys) => {
+    if (halfDayButtonsRef.value) {
+      halfDayButtonsRef.value.resetHalfDay();
+    }
+  },
+  { deep: true }
+);
+
  // 데이트피커 인풋 ref
  const calendarDatepicker = ref(null);
  let fpInstance = null;
@ -192,6 +230,7 @@ function handleDateClick(info) {
    await fetchRemainingVacation();
    const currentYear = new Date().getFullYear();
    await fetchVacationHistory(currentYear);
+    window.addEventListener("beforeunload", preventUnsavedChanges);

    // Flatpickr 초기화 (달 선택 모드)
    fpInstance = flatpickr(calendarDatepicker.value, {
--- a/src/views/wordDict/wordDict.vue
+++ b/src/views/wordDict/wordDict.vue
@ -13,8 +13,7 @@

            <!-- 단어 갯수, 작성하기 -->
            <div class="mt-4">
-                단어 : {{ total }}
-                <WriteButton @click="writeStore.toggleItem(999999)" />
+                <WriteButton ref="writeButton" @click="writeStore.toggleItem(999999)" :isToggleEnabled="true"/>
            </div>

            <!-- ㄱ ㄴ ㄷ ㄹ -->
@ -67,7 +66,7 @@
 </template>

 <script setup>
-    import { ref, watchEffect, computed, onMounted, getCurrentInstance, toRaw } from 'vue';
+    import { ref, computed, onMounted, getCurrentInstance, toRaw } from 'vue';
    import axios from '@api';
    import SearchBar from '@c/search/SearchBar.vue';
    import WriteButton from '@c/button/WriteBtn.vue';
@ -77,14 +76,11 @@
    import DictAlphabetFilter from '@/components/wordDict/DictAlphabetFilter.vue';
    import commonApi from '@/common/commonApi';
    import { useToastStore } from '@s/toastStore';
-    import { useUserInfoStore } from '@s/useUserInfoStore';
    import { useWriteVisibleStore } from '@s/writeVisible';

    // 작성창 구분
    const writeStore = useWriteVisibleStore();
-
-    // 유저 구분
-    // const userStore = useUserInfoStore();
+    const writeButton = ref(null);

    const { appContext } = getCurrentInstance();
    const $common = appContext.config.globalProperties.$common;
@ -107,7 +103,6 @@
    });

    const selectedCategory = ref('');
-    const selectCategory = ref('');

    // 체크박스 체크된 갯수
    const checkedItems = ref([]);
@ -121,9 +116,6 @@
    // 검색
    const searchText = ref('');

-    // 작성
-    // const isWriteVisible = ref(false);
-
    // 데이터 로드
    onMounted(() => {
        getwordList();
@ -168,34 +160,8 @@
    // 카테고리 선택
    const handleSelectedCategoryChange = (category) => {
        selectedCategory.value = category;
-        getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value)
+        getwordList(searchText.value, selectedAlphabet.value, selectedCategory.value);
    }
-
-    // 작성 toggle
-    // const toggleWriteForm = () => {
-    //     isWriteVisible.value = !isWriteVisible.value;
-    // };
-
-    //카테고리 등록
-    // const addCategory = (data) =>{
-        // const lastCategory = cateList.value[cateList.value.length - 1];
-        // const newValue = lastCategory  ? lastCategory.value + 1 : 600101;
-        // const newCategory = { label: data, value: newValue };
-        //         cateList.value = [newCategory, ...cateList.value];
-        //         selectedCategory.value = newCategory.value;
-        //// axios.post('worddict/insertCategory',{
-        ////     CMNCODNAM: data
-        //// }).then(res => {
-        ////     if(res.data.data == '1'){
-        ////         toastStore.onToast('카테고리가 추가 등록 되었습니다.', 's');
-        ////         const newCategory = { label: data, value: newValue };
-        ////         cateList.value = [newCategory, ...cateList.value];
-        ////         selectedCategory.value = newCategory.value;
-        ////     } else if(res.data.message == '이미 존재하는 카테고리명입니다.') {
-        ////         toastStore.onToast(res.data.message, 'e');
-        ////     }
-        //// })
-    // }
    
    // 용어집 등록
    const addWord = (wordData, data) => {
@ -208,9 +174,9 @@
            category = existingCategory.label == '' ? wordData.category : existingCategory.value;
        } else {
            //카테고리 없을시 카테고리 와 용어 둘다 저장
-            // console.log('카테고리 없음');
            const lastCategory = cateList.value[cateList.value.length - 1];
            category = lastCategory ? lastCategory.value + 1 : 600101;
+            
        }
        sendWordRequest(category, wordData, data, !existingCategory);
    };
@ -227,8 +193,10 @@
            axios.post('worddict/insertWord', payload).then(res => {
                if (res.data.status === 'OK') {
                    toastStore.onToast('용어가 등록 되었습니다.', 's');
-                    // isWriteVisible.value = false;
                    writeStore.closeAll();
+                    if (writeButton.value) {
+                        writeButton.value.resetButton();
+                    }
                    getwordList();
                    const newCategory = { label: data, value: category };
                    cateList.value = [newCategory, ...cateList.value];
@ -238,8 +206,10 @@
            axios.post('worddict/insertWord', payload).then(res => {
                if (res.data.status === 'OK') {
                    toastStore.onToast('용어가 등록 되었습니다.', 's');
-                    // isWriteVisible.value = false;
                    writeStore.closeAll();
+                    if (writeButton.value) {
+                        writeButton.value.resetButton();
+                    }
                    getwordList();
                }
            });
@ -256,16 +226,12 @@
            checkedItems.value = checkedItems.value.filter(item => item !== id);
            checkedNames.value = checkedNames.value.filter(item => item !== name);
        }
-
-        // 콘솔에 현재 체크된 name 값 출력
-        // console.log("현재 체크된 name 값:", checkedNames.value);
    };

    const isAnyChecked = computed(() => checkedItems.value.length > 0);

    // 용어집 삭제
    const deleteCheckedItems = () => {
-        // console.log("현재 체크된 name 값:", Object.values(checkedNames.value));

        axios.patch('worddict/deleteword', {
            idList: Object.values(checkedNames.value)
@ -273,7 +239,6 @@
        .then(res => {
            if (res.data.status == 'OK') {
                toastStore.onToast('용어 삭제가 완료되었습니다.', 's');
-                // isWriteVisible.value = false;
                writeStore.closeAll();
                getwordList();

@ -283,7 +248,6 @@
            }
        })
        .catch(error => {
-            // console.error('삭제 요청 중 오류 발생:', error);
            toastStore.onToast('오류가 발생했습니다. 다시 시도해주세요.', 'e');
        });