Merge branch 'main' into project-list

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;
+  width: 50% !important;
-  margin-left: auto !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%);
 }

src/components/board/BoardComment.vue

@@ -11,35 +11,29 @@
             :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>
@@ -58,10 +52,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 +60,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>
@@ -120,14 +115,19 @@ const props = defineProps({
     },
     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 +154,8 @@ const handleUpdateReaction = (reactionData) => {
 
 // 비밀번호 확인
 const logPasswordAndEmit = () => {
-    emit('submitPassword', props.comment, password.value);
+    console.log('비밀번호 확인',props.password)
-    password.value = "";
+    emit('submitPassword', props.comment, props.password);
 };
 
 watch(() => props.comment.isEditTextarea, (newVal) => {
@@ -169,8 +169,12 @@ const submitEdit = () => {
     emit('submitEdit', props.comment, localEditedContent.value);
 };
 
-const aaaa = () => {
+const handleEditClick = () => {
     emit('editClick', props.comment);
 }
 
+const handleReplyEditClick = (comment) => {
+    emit('editClick', comment);
+}
+
 </script>

src/components/board/BoardCommentArea.vue

@@ -51,10 +51,7 @@
 
                 <!-- 답변 쓰기 버튼 -->
                 <div class="ms-auto mt-3 mt-md-0">
-                    <button class="btn btn-primary" @click="handleCommentSubmit">
+                    <SaveBtn class="btn btn-primary" @click="handleCommentSubmit"></SaveBtn>
-                        <!-- <i class="icon-base bx bx-check"></i> -->
-                        확인
-                    </button>
                 </div>
             </div>
         </div>
@@ -63,6 +60,7 @@
 
 <script setup>
 import { ref, defineEmits, defineProps, computed, watch } from 'vue';
+import SaveBtn from '../button/SaveBtn.vue';
 
 const props = defineProps({
     unknown: {
@@ -75,11 +73,11 @@ const props = defineProps({
     },
     passwordAlert: {
         type: String,
-        default: false
+        default: ''
     },
     commentAlert: {
         type: String,
-        default: false
+        default: ''
     }
 });
 

src/components/board/BoardCommentList.vue

@@ -11,15 +11,17 @@
                 :isCommentAuthor="comment.isCommentAuthor"
                 :isEditTextarea="comment.isEditTextarea"
                 :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>
@@ -53,11 +55,17 @@ const props = defineProps({
     },
     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 +86,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 +112,8 @@ const handleCancelEdit = (comment) => {
         emit('cancelEdit', comment); // 댓글 수정 취소
     }
 };
+
+const updatePassword = (newPassword) => {
+    emit('update:password', newPassword);
+};
 </script>

src/components/board/BoardProfile.vue

@@ -4,6 +4,7 @@
             <div v-if="!unknown" class="avatar me-2">
                 <img src="/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
             </div>
+            
             <div class="me-2">
                 <h6 class="mb-0">{{ profileName }}</h6>
                 <div class="profile-detail">
@@ -81,7 +82,7 @@ const props = defineProps({
     isCommentProfile: Boolean, // 현재 컴포넌트가 댓글용인지 여부
     date: {
         type: String,
-        required: true,
+        required: '',
     },
     views: {
         type: Number,
@@ -117,6 +118,10 @@ const handleUpdateReaction = (reactionData) => {
     });
 };
 
+const getProfileImage = (profilePath) => {
+    return profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
+};
+
 
 </script>
 

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: {

src/components/button/HalfDayButtons.vue

@@ -28,10 +28,11 @@
 </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"]);
@@ -39,15 +40,16 @@ const halfDayType = ref(null);
 
 const toggleHalfDay = (type) => {
   halfDayType.value = 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,20 +91,20 @@ defineExpose({ resetHalfDay });
 
 /* 선택된 (눌린) 버튼 */
 .btn.active {
-  border: 3px solid #fff; /* 흰색 테두리 강조 */
+  border: 3px solid #fff;
   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;
 }
 

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

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'">
+        <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">
+            <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">
+                <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);
 });
+
+
+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>

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

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"

src/views/board/BoardList.vue

@@ -195,10 +195,7 @@ const fetchGeneralPosts = async (page = 1) => {
         });
 
         if (data?.data) {
-            // console.log(data)
+            const totalPosts = data.data.total;
-            const totalPosts = data.data.total; // 전체 게시물 개수 받아오기
-
-            // console.log('📌 API 응답 데이터:', data.data);
 
             generalList.value = data.data.list.map((post, index) => ({
                 realId: post.id,

src/views/board/BoardView.vue

@@ -27,6 +27,7 @@
                                         class="form-control"
                                         v-model="password"
                                         placeholder="비밀번호 입력"
+                                        @input="password = password.replace(/\s/g, '')"
                                     />
                                     <button class="btn btn-primary" @click="submitPassword">확인</button>
                                 </div>
@@ -76,12 +77,6 @@
                                 @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">
@@ -98,7 +93,6 @@
                             :passwordAlert="passwordAlert"
                             @submitComment="handleCommentSubmit"
                         />
-                        <!-- <BoardCommentArea :profileName="profileName" :unknown="unknown" /> -->
                     </div>
 
                     <!-- 댓글 목록 -->
@@ -106,9 +100,11 @@
                         <BoardCommentList
                             :unknown="unknown"
                             :comments="commentsWithAuthStatus"
-                            :isCommentPassword="Boolean(isCommentPassword)"
+                            :isCommentPassword="isCommentPassword"
                             :isEditTextarea="isEditTextarea"
                             :passwordCommentAlert="passwordCommentAlert"
+                            :currentPasswordCommentId="currentPasswordCommentId"
+                            :password="password"
                             @editClick="editComment"
                             @deleteClick="deleteComment"
                             @updateReaction="handleCommentReaction"
@@ -117,6 +113,7 @@
                             @commentDeleted="handleCommentDeleted"
                             @cancelEdit="handleCancelEdit"
                             @submitEdit="handleSubmitEdit"
+                            @update:password="updatePassword"
                         />
                         <Pagination
                             v-if="pagination.pages"
@@ -173,7 +170,6 @@ const commentsWithAuthStatus = computed(() => {
             isCommentAuthor: reply.authorId === currentUserId.value,
         }))
     }));
-    // console.log("✅ commentsWithAuthStatus 업데이트됨:", updatedComments);
     return updatedComments;
 });
 
@@ -183,10 +179,15 @@ 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 commentAlert = ref('');
+
+const updatePassword = (newPassword) => {
+    password.value = newPassword;
+};
 
 const pagination = ref({
     currentPage: 1,
@@ -210,20 +211,12 @@ 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
         boardTitle.value = data.title || '제목 없음';
         boardContent.value = data.content || '';
@@ -245,7 +238,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 +250,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 +269,10 @@ const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike })
             LOCGOBBAD: isDislike ? 'T' : 'F'
         });
 
-        // console.log("댓글 좋아요 API 응답 데이터:", response.data);
-
         await fetchComments();
 
     } catch (error) {
         alert('오류가 발생했습니다.');
-        // console.log('댓글 반응을 업데이트하는 중 오류 발생');
     }
 };
 
@@ -302,8 +287,6 @@ const fetchComments = async (page  = 1) => {
             }
         });
 
-        // console.log(response.data.data)
-
         const commentsList = response.data.data.list.map(comment => ({
             commentId: comment.LOCCMTSEQ, // 댓글 ID
             boardId: comment.LOCBRDSEQ,
@@ -320,6 +303,8 @@ const fetchComments = async (page  = 1) => {
             children: [], // 대댓글을 담을 배열
         }));
 
+        commentsList.sort((a, b) => b.createdAtRaw - a.createdAtRaw);
+
         for (const comment of commentsList) {
             if (!comment.commentId) continue;
 
@@ -327,8 +312,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 +351,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 +383,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 +410,17 @@ const handleCommentReply = async (reply) => {
         });
 
         if (response.status === 200) {
-            if (response.data.code === 200) {  // 서버 응답 코드도 확인
+            if (response.data.code === 200) {
-                // console.log('대댓글 작성 성공:', response.data);
+                await fetchComments();
-                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 +457,41 @@ 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 = !targetComment.isEditTextarea;
-        targetComment.isEditTextarea = true;
+        lastCommentClickedButton.value = "edit";
     } else if (isAnonymous) {
-        // 익명 댓글이면 비밀번호 입력창 띄우기
+        if (targetComment.isEditTextarea) return;
         toggleCommentPassword(comment, "edit");
-
     } else {
-        // console.log("다른 사용자 댓글 - 수정 불가");
         alert("수정이 불가능합니다");
     }
 }
 
 // 댓글 삭제 버튼 클릭
 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 +499,21 @@ const deleteComment = async (comment) => {
     }
 };
 
-// 익명 비밀번호 창 토글
+// 익명 댓글 비밀번호 창 토글
 const toggleCommentPassword = (comment, button) => {
-    if (lastCommentClickedButton.value === button && isCommentPassword.value === comment.commentId) {
+    if (lastCommentClickedButton.value === button && currentPasswordCommentId.value === comment.commentId) {
-        isCommentPassword.value = false; // 비밀번호 창 닫기
+        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 +525,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 +550,6 @@ const submitPassword = async () => {
             passwordAlert.value = "비밀번호가 일치하지 않습니다.";
         }
     } catch (error) {
-        // console.log("📌 전체 오류:", error);
-
         if (error.response) {
             if (error.response.status === 401) {
                 passwordAlert.value = "비밀번호가 일치하지 않습니다.";
@@ -598,34 +564,38 @@ 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) {
+                    //여기서 input 창 닫혀야함
+                    targetComment.isEditTextarea = true;
+                    passwordCommentAlert.value = "";
+                    currentPasswordCommentId.value = null;
+
+                } else {
+                    alert("수정 취소를 실패했습니다.");
+                }
+            //삭제
             } else if (lastCommentClickedButton.value === "delete") {
                 passwordCommentAlert.value = "";
 
@@ -633,14 +603,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) {
-        // if (error.response?.status === 401) {
+            passwordCommentAlert.value = "비밀번호가 일치하지 않습니다";
-        //     console.log("❌ 401 오류: 인증 실패 (비밀번호 불일치)");
+        }
-        // }
         passwordCommentAlert.value = "비밀번호가 일치하지 않습니다";
     }
 };
@@ -672,24 +640,18 @@ const deletePost = async () => {
 // 댓글 삭제 (대댓글 포함)
 const deleteReplyComment = async (comment) => {
     if (!confirm("정말 이 댓글을 삭제하시겠습니까?")) return;
-    // console.log("댓글 ID:", 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();
         } else {
-            // console.log("댓글 삭제 실패:", response.data.message);
             alert("댓글 삭제에 실패했습니다.");
         }
     } catch (error) {
-        // console.log("댓글 삭제 중 오류 발생:", error);
         alert("댓글 삭제 중 오류가 발생했습니다.");
     }
 };
@@ -702,9 +664,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 +671,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 +686,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 +710,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 +718,8 @@ const handleCommentDeleted = (deletedCommentId) => {
             return;
         }
     }
-
-    // console.error("❌ 삭제할 댓글을 찾을 수 없음:", deletedCommentId);
 };
 
-
 // 날짜
 const formattedDate = (dateString) => {
     if (!dateString) return "날짜 없음";

src/views/board/BoardWrite.vue

@@ -9,12 +9,15 @@
 
             <div class="col-xl-12">
                 <div class="card-body">
+                    <!-- 제목 입력 -->
                     <FormInput
                         title="제목"
                         name="title"
                         :is-essential="true"
                         :is-alert="titleAlert"
                         v-model="title"
+                        @update:alert="titleAlert = $event"
+                        @input="validateTitle"
                     />
 
                     <!-- 카테고리 선택 -->
@@ -32,16 +35,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,6 +56,8 @@
                             :is-essential="true"
                             :is-alert="passwordAlert"
                             v-model="password"
+                            @update:alert="passwordAlert = $event"
+                            @input="validatePassword"
                         />
                     </div>
 
@@ -61,14 +69,16 @@
                         @update:isValid="isFileValid = $event"
                     />
 
+                    <!-- 내용 입력 (에디터) -->
                     <div class="mb-4">
-                        <label for="html5-tel-input" class="col-md-2 col-form-label">
+                        <label class="col-md-2 col-form-label">
-                            내용
+                            내용 <span class="text-danger">*</span>
-                            <span class="text-danger">*</span>
-                            <div class="invalid-feedback" :class="contentAlert ? 'display-block' : ''">내용을 확인해주세요.</div>
                         </label>
                         <div class="col-md-12">
-                            <QEditor @update:data="content = $event" />
+                            <QEditor @update:data="updateContent" />
+                        </div>
+                        <div class="invalid-feedback mt-1" :class="contentAlert ? 'd-block' : 'd-none'">
+                            내용을 입력해주세요.
                         </div>
                     </div>
 
@@ -115,10 +125,9 @@ 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 +138,44 @@ onMounted(() => {
     fetchCategories();
 });
 
+// 제목 유효성 검사: 공백만 입력하면 경고 유지, 문자 포함 시 정상
+const validateTitle = () => {
+    titleAlert.value = title.value.trim().length === 0;
+};
+
+// 비밀번호 유효성 검사: 공백 입력 방지
+const validatePassword = () => {
+    password.value = password.value.replace(/\s/g, ""); // 공백 제거
+    passwordAlert.value = password.value.length === 0;
+};
+
+// 에디터에서 업데이트된 데이터를 반영하는 함수
+const updateContent = (data) => {
+    let rawText = '';
+
+    if (typeof data === 'object' && data.ops) {
+        rawText = data.ops.map(op => (typeof op.insert === 'string' ? op.insert : '')).join('').trim();
+    } else if (typeof data === 'string') {
+        rawText = data.replace(/(<([^>]+)>)/gi, "").trim();
+    } else {
+        rawText = '';
+    }
+
+    content.value = rawText.length > 0 ? data : "";
+    contentAlert.value = rawText.length === 0;
+};
+
+/** 페이지 이동 (목록으로 이동) */
 const goList = () => {
     router.push('/board');
 };
 
 const write = async () => {
-    titleAlert.value = !title.value;
+    validateTitle();
-    passwordAlert.value = categoryValue.value === 300102 && !password.value;
+    validatePassword();
-    contentAlert.value = !content.value;
+
     categoryAlert.value = !categoryValue.value;
+    contentAlert.value = content.value.length === 0;
 
     if (titleAlert.value || passwordAlert.value || contentAlert.value || categoryAlert.value || !isFileValid.value) {
         return;
@@ -154,26 +192,6 @@ const write = async () => {
         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) {
-                const formData = new FormData();
-                const fileNameWithoutExt = file.name.replace(/\.[^/.]+$/, '');
-
-                formData.append('CMNBRDSEQ', boardId);
-                formData.append('CMNFLEORG', fileNameWithoutExt);
-                formData.append('CMNFLEEXT', file.name.split('.').pop());
-                formData.append('CMNFLESIZ', file.size);
-                formData.append('CMNFLEPAT', 'boardfile');
-                formData.append('file', file);
-
-                await axios.post(`board/${boardId}/attachments`, formData, {
-                    headers: {
-                        'Content-Type': 'multipart/form-data',
-                    },
-                });
-            }
-        }
-
         toastStore.onToast('게시물이 작성되었습니다.', 's');
         goList();
     } catch (error) {

src/views/vacation/VacationManagement.vue

@@ -7,9 +7,11 @@
             <div class="sidebar-content">
               <div class="sidebar-actions text-center my-3">
                 <HalfDayButtons
-                  @toggleHalfDay="toggleHalfDay"
+                    ref="halfDayButtonsRef"
-                  @addVacationRequests="saveVacationChanges"
+                    @toggleHalfDay="toggleHalfDay"
-                  :isDisabled="!hasChanges"
+                    @addVacationRequests="saveVacationChanges"
+                    :isDisabled="!hasChanges"
+                    :selectedDate="selectedDate"
                 />
               </div>
               <ProfileList
@@ -58,28 +60,31 @@
     </div>
   </template>
 
-  <script setup>
+<script setup>
-  import { reactive, ref, onMounted, nextTick, computed, watch } from "vue";
+import { reactive, ref, onMounted, nextTick, computed, watch, onBeforeUnmount  } from "vue";
-  import axios from "@api";
+import axios from "@api";
-  import FullCalendar from "@fullcalendar/vue3";
+import FullCalendar from "@fullcalendar/vue3";
-  import dayGridPlugin from "@fullcalendar/daygrid";
+import dayGridPlugin from "@fullcalendar/daygrid";
-  import interactionPlugin from "@fullcalendar/interaction";
+import interactionPlugin from "@fullcalendar/interaction";
-  // Flatpickr 및 MonthSelect 플러그인 임포트
+// Flatpickr 및 MonthSelect 플러그인 임포트
-  import flatpickr from "flatpickr";
+import flatpickr from "flatpickr";
-  import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect/index";
+import monthSelectPlugin from "flatpickr/dist/plugins/monthSelect/index";
-  import "flatpickr/dist/flatpickr.min.css";
+import "flatpickr/dist/flatpickr.min.css";
-  import "flatpickr/dist/plugins/monthSelect/style.css";
+import "flatpickr/dist/plugins/monthSelect/style.css";
 
-  import "@/assets/css/app-calendar.css";
+import "@/assets/css/app-calendar.css";
-  import "bootstrap-icons/font/bootstrap-icons.css";
+import "bootstrap-icons/font/bootstrap-icons.css";
-  import HalfDayButtons from "@c/button/HalfDayButtons.vue";
+import HalfDayButtons from "@c/button/HalfDayButtons.vue";
-  import ProfileList from "@c/vacation/ProfileList.vue";
+import ProfileList from "@c/vacation/ProfileList.vue";
-  import VacationModal from "@c/modal/VacationModal.vue";
+import VacationModal from "@c/modal/VacationModal.vue";
-  import VacationGrantModal from "@c/modal/VacationGrantModal.vue";
+import VacationGrantModal from "@c/modal/VacationGrantModal.vue";
-  import { useUserStore } from "@s/userList";
+import { useUserStore } from "@s/userList";
-  import { useUserInfoStore } from "@s/useUserInfoStore";
+import { useUserInfoStore } from "@s/useUserInfoStore";
-  import { fetchHolidays } from "@c/calendar/holiday.js";
+import { fetchHolidays } from "@c/calendar/holiday.js";
-  import { useToastStore } from '@s/toastStore';
+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, {