From 521bb8ded44bc295e247ceeb528c43ce1f8bfee9 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 20 Feb 2025 09:19:04 +0900
Subject: [PATCH 1/7] =?UTF-8?q?click=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20.stop?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/user/UserList.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/user/UserList.vue b/src/components/user/UserList.vue
index c5a1779..835c7ff 100644
--- a/src/components/user/UserList.vue
+++ b/src/components/user/UserList.vue
@@ -5,7 +5,7 @@
             :key="index"
             class="avatar pull-up"
             :class="{ 'opacity-100': isUserDisabled(user) }"
-            @click="toggleDisable(index)"
+            @click.stop="toggleDisable(index)"
             data-bs-toggle="tooltip"
             data-popup="tooltip-custom"
             data-bs-placement="top"

From 7c784464a16073595e910a0e8ef34a322e0e71d3 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 20 Feb 2025 09:19:52 +0900
Subject: [PATCH 2/7] =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=A1=9C=EC=A7=81=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/components/list/ProjectCard.vue b/src/components/list/ProjectCard.vue
index 7ea65c0..25195a1 100644
--- a/src/components/list/ProjectCard.vue
+++ b/src/components/list/ProjectCard.vue
@@ -34,23 +34,17 @@
             </div>
         </div>
     </div>
-    <CenterModal :display="isModalOpen" @close="closeModal">
+    <CenterModal :display="isModalOpen" @close="closeModal" >
         <template #title> Log </template>
         <template #body>
-            <div class="ms-4 mt-2" v-if="logData">
+            <div class="border border-3 rounded p-5 ms-4 mt-2" v-if="logData">
                 <p class="mb-1">{{ logData.createDate }}</p>
                 <strong class="">[{{ logData.creator }}] 프로젝트 등록</strong>
             </div>
 
-            <div class="log-item" v-if="logData?.updateDate">
-                <div class="d-flex align-items-center">
-                    <i class="bx bx-edit me-2"></i>
-                    <strong>수정 정보</strong>
-                </div>
-                <div class="ms-4 mt-2">
-                    <p class="mb-1">{{ logData.updateDate }}</p>
-                    <p class="mb-0 text-muted">[{{ logData.updater }}] 프로젝트 수정</p>
-                </div>
+            <div class="border border-3 rounded p-5 ms-4 mt-2" v-if="logData?.updateDate">
+                <p class="mb-1">{{ logData.updateDate }}</p>
+                <strong>[{{ logData.updater }}] 프로젝트 수정</strong>
             </div>
 
         </template>
diff --git a/src/components/list/ProjectCardList.vue b/src/components/list/ProjectCardList.vue
index 6f65d9f..9b6094b 100644
--- a/src/components/list/ProjectCardList.vue
+++ b/src/components/list/ProjectCardList.vue
@@ -34,7 +34,8 @@
                     :is-label="true"
                     :is-common="true"
                     :data="allColors"
-                    v-model="selectedProject.PROJCTCOL"
+                    :value="selectedProject.PROJCTCOL"
+                    @update:data="selectedProject.PROJCTCOL = $event"
                 />
 
                 <FormInput
@@ -77,7 +78,7 @@
 </template>
 
 <script setup>
-    import { computed, ref } from 'vue';
+    import { computed, ref, watch } from 'vue';
     import ProjectCard from './ProjectCard.vue';
     import { onMounted } from 'vue';
     import $api from '@api';
@@ -130,14 +131,17 @@
         $api.get('project/select').then(res => {
             projectList.value = res.data.data.projectList;
         });
-};
+    };
 
 
     const openModal = (post) => {
         isModalOpen.value = true;
 
-        originalColor.value = post.PROJCTCOL;
+        // 여기에 기존 값 넣기
         selectedProject.value = { ...post };
+
+        // 기존 색상 넣어두기
+        originalColor.value = post.PROJCTCOL;
     };
 
     const closeModal = () => {
@@ -160,13 +164,11 @@
             PROJCTARR: addressData.address,
             PROJCTDTL: addressData.detailAddress
         };
-    };
+};
+
 
     const handleSubmit = () => {
 
-        console.log(selectedProject.value.PROJCTCOL)
-        console.log(originalColor.value)
-
         $api.patch('project/update', {
             projctSeq: selectedProject.value.PROJCTSEQ,
             projctNam: selectedProject.value.PROJCTNAM,

From 8e20066b87cf87b5ba2451eca04cc8e84d9e168e Mon Sep 17 00:00:00 2001
From: Dang <wheodnjs2@naver.com>
Date: Thu, 20 Feb 2025 14:19:35 +0900
Subject: [PATCH 3/7] =?UTF-8?q?=EC=9A=A9=EC=96=B4=EC=A7=91=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/FormInput.vue            |  5 ++
 src/components/input/FormSelect.vue           |  6 +-
 .../wordDict/DictAlphabetFilter.vue           |  3 +
 src/components/wordDict/DictCard.vue          | 36 ++++++++-
 src/components/wordDict/DictWrite.vue         | 27 +++++--
 src/views/wordDict/wordDict.vue               | 81 ++++++++++++++-----
 6 files changed, 128 insertions(+), 30 deletions(-)

diff --git a/src/components/input/FormInput.vue b/src/components/input/FormInput.vue
index 731824c..904d89f 100644
--- a/src/components/input/FormInput.vue
+++ b/src/components/input/FormInput.vue
@@ -12,6 +12,7 @@
                 v-model="inputValue"
                 :maxLength="maxlength"
                 :placeholder="title"
+                :disabled="disabled"
             />
             <div class="invalid-feedback" :class="isAlert ? 'display-block' : ''">
                 {{ title }}을 확인해주세요.
@@ -60,6 +61,10 @@ const props = defineProps({
         default: true,
         required: false,
     },
+    disabled: {
+        type: Boolean,
+        default: false,
+    }
 });
 
 // Emits 정의
diff --git a/src/components/input/FormSelect.vue b/src/components/input/FormSelect.vue
index 04b88f6..1115ea7 100644
--- a/src/components/input/FormSelect.vue
+++ b/src/components/input/FormSelect.vue
@@ -5,7 +5,7 @@
             <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">
+            <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">
                     {{ isCommon ? item.label : item }}
                 </option>
@@ -63,6 +63,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
         required: false,
+    },
+    disabled: {
+        type: Boolean,
+        default: false
     }
 });
 
diff --git a/src/components/wordDict/DictAlphabetFilter.vue b/src/components/wordDict/DictAlphabetFilter.vue
index c0cc2ca..feed26e 100644
--- a/src/components/wordDict/DictAlphabetFilter.vue
+++ b/src/components/wordDict/DictAlphabetFilter.vue
@@ -43,6 +43,9 @@ const selectAlphabet = (alphabet) => {
 </script>
 
 <style scoped>
+.btn {
+    min-width: 56px;
+}
 
 @media (max-width: 768px) {
     .alphabet-list {
diff --git a/src/components/wordDict/DictCard.vue b/src/components/wordDict/DictCard.vue
index 36825f5..4c2ac0b 100644
--- a/src/components/wordDict/DictCard.vue
+++ b/src/components/wordDict/DictCard.vue
@@ -13,7 +13,15 @@
         />
 
         <div v-else>
-            <div class="d-flex align-items-center">
+            <input 
+                v-if="userStore.user.role == 'ROLE_ADMIN'"
+                type="checkbox" 
+                class="form-check-input admin-chk"
+                :name="item.WRDDICSEQ" 
+                id=""
+                @change="toggleCheck($event)"
+            >
+            <div class="d-flex align-ite-center">
                 <div class="w-100 d-flex align-items-center">
                     <span class="btn btn-primary pe-none">{{ item.category }}</span>
                     <strong class="mx-2 w-75">{{ item.WRDDICTTL }}</strong>
@@ -34,7 +42,10 @@
                     </div>
                 </div>
             </div>
-            <div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
+            <div 
+                v-if="item.author.createdAt !== item.lastEditor.updatedAt" 
+                class="d-flex justify-content-between flex-wrap gap-2 mb-2"
+            >
                 <div class="d-flex flex-wrap align-items-center mb-50">
                     <div class="avatar avatar-sm me-2">
                         <img
@@ -64,6 +75,11 @@ import EditBtn from '@/components/button/EditBtn.vue';
 import $api from '@api';
 import DictWrite from './DictWrite.vue';
 
+import { useUserInfoStore } from '@s/useUserInfoStore';
+
+// 유저 구분
+const userStore = useUserInfoStore();
+
 const toastStore = useToastStore();
 
 const { appContext } = getCurrentInstance();
@@ -87,7 +103,7 @@ const localCateList = ref([...props.cateList]);
 const selectedCategory = ref('');
 
 // cateList emit
-const emit = defineEmits(['update:cateList','refreshWordList']);
+const emit = defineEmits(['update:cateList','refreshWordList', 'updateChecked']);
 
 // 글 수정 상태
 const isWriteVisible = ref(false);
@@ -171,6 +187,12 @@ const formatDate = (dateString) => new Date(dateString).toLocaleString();
 // 프로필 이미지
 const getProfileImage = (imagePath) =>
     imagePath ? `${baseUrl}upload/img/profile/${imagePath}` : '/img/avatars/default-Profile.jpg';
+
+
+// 체크 상태 변경 시 부모로 전달
+const toggleCheck = (event) => {
+    emit('updateChecked', event.target.checked, props.item.WRDDICSEQ, event.target.name);
+};
 </script>
 
 <style scoped>
@@ -185,4 +207,12 @@ const getProfileImage = (imagePath) =>
     right: 0.7rem;
     top: 1.2rem;
 }
+
+
+.admin-chk {
+    position: absolute;
+    left: -0.5rem;
+    top: -0.5rem;
+    --bs-form-check-bg: #fff;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/wordDict/DictWrite.vue b/src/components/wordDict/DictWrite.vue
index 65bdceb..12d057c 100644
--- a/src/components/wordDict/DictWrite.vue
+++ b/src/components/wordDict/DictWrite.vue
@@ -10,10 +10,11 @@
                     @update:data="selectCategory = $event"
                     @change="onChange"
                     :value="formValue"
+                    :disabled="isDisabled"
                 />
             </div>
             <div class="col-2 btn-margin">
-                <PlusBtn @click="toggleInput"/>
+                <PlusBtn v-if="userStore.user.role == 'ROLE_ADMIN'" @click="toggleInput"/>
             </div>
         </div>
         
@@ -37,6 +38,7 @@
             :is-alert="wordTitleAlert"
             :modelValue="titleValue"
             @update:modelValue="wordTitle = $event"
+            :disabled="isDisabled"
         />
     </div>
     <div>
@@ -56,6 +58,13 @@ 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 { useUserInfoStore } from '@s/useUserInfoStore';
+
+// 유저 구분
+const userStore = useUserInfoStore();
+
+// 유저 상태에 따른 disabled
+const isDisabled = computed(() => userStore.user.role !== 'ROLE_ADMIN');
 
 const emit = defineEmits(['close','addCategory','addWord']);
 
@@ -73,6 +82,11 @@ const addCategoryAlert = ref(false);
 //선택 카테고리
 const selectCategory = ref('');
 
+// 제목 상태
+const computedTitle = computed(() => 
+    wordTitle.value === '' ? props.titleValue : wordTitle.value
+);
+
 // 카테고리 상태
 const selectedCategory = computed(() => 
     selectCategory.value === '' ? props.formValue : selectCategory.value
@@ -104,15 +118,18 @@ 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;
+    // showInput.value = false;
 };
 
 const onChange = (newValue) => {
@@ -122,9 +139,9 @@ const onChange = (newValue) => {
 //용어 등록
 const saveWord = () => {
     //validation
-
+    
     // 용어 체크
-    if(wordTitle.value == ''){
+    if(computedTitle.value == '' || computedTitle.length == 0){
         wordTitleAlert.value = true;
         return;
     }
@@ -137,7 +154,7 @@ const saveWord = () => {
 
     const wordData = {
         id: props.NumValue || null,
-        title: wordTitle.value,
+        title: computedTitle.value,
         category: selectedCategory.value,
         content: content.value,
     };
diff --git a/src/views/wordDict/wordDict.vue b/src/views/wordDict/wordDict.vue
index 68a060b..d027485 100644
--- a/src/views/wordDict/wordDict.vue
+++ b/src/views/wordDict/wordDict.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="container-xxl flex-grow-1 container-p-y">
-
+        <!-- {{ userStore.user.role  == 'ROLE_ADMIN' ? '관리자' : '일반인'}} -->
         <div class="card p-5">
             <!-- 타이틀, 검색 -->
             <div class="row">
@@ -34,32 +34,37 @@
             </div>
         </div>
 
-<!-- 용어 리스트 -->
-<div class="mt-10">
-    <!-- 로딩 중일 때 -->
-    <div v-if="loading">로딩 중...</div>
+        <!-- 용어 리스트 -->
+        <div class="mt-10">
+            <!-- 로딩 중일 때 -->
+            <div v-if="loading">로딩 중...</div>
 
-    <!-- 에러 메시지 -->
-    <div v-if="error" class="error">{{ error }}</div>
+            <!-- 에러 메시지 -->
+            <div v-if="error" class="error">{{ error }}</div>
 
-    <!-- 단어 목록 -->
-    <ul v-if="total > 0" class="px-0 list-unstyled">
-        <DictCard
-            v-for="item in wordList"
-            :key="item.WRDDICSEQ"
-            :item="item"
-            :cateList="cateList"
-            @refreshWordList="getwordList"
-        />
-    </ul>
+            <!-- 단어 목록 -->
+            <ul v-if="total > 0" class="px-0 list-unstyled">
+                <DictCard
+                    v-for="item in wordList"
+                    :key="item.WRDDICSEQ"
+                    :item="item"
+                    :cateList="cateList"
+                    @refreshWordList="getwordList"
+                    @updateChecked="updateCheckedItems"
+                />
+            </ul>
 
-    <!-- 데이터가 없을 때 -->
-    <div v-else-if="!loading && !error" class="card p-5 text-center">용어집의 용어가 없습니다.</div>
+            <!-- 데이터가 없을 때 -->
+            <div v-else-if="!loading && !error" class="card p-5 text-center">용어집의 용어가 없습니다.</div>
 
-</div>
+        </div>
 
     </div>
 
+    <button v-if="isAnyChecked" class="btn btn-danger admin-del-btn">
+        <i class="bx bx-trash"></i>
+    </button>
+
 </template>
 
 <script setup>
@@ -73,6 +78,10 @@
     import DictAlphabetFilter from '@/components/wordDict/DictAlphabetFilter.vue';
     import commonApi from '@/common/commonApi';
     import { useToastStore } from '@s/toastStore';
+    import { useUserInfoStore } from '@s/useUserInfoStore';
+
+    // 유저 구분
+    const userStore = useUserInfoStore();
 
     const { appContext } = getCurrentInstance();
     const $common = appContext.config.globalProperties.$common;
@@ -97,6 +106,11 @@
     const selectedCategory = ref('');
     const selectCategory = ref('');
 
+    // 체크박스 체크된 갯수
+    const checkedItems = ref([]);
+    // 체크박스의 name
+    const checkedNames = ref([]); 
+
 
     //선택된 알파벳
     const selectedAlphabet = ref('');
@@ -163,7 +177,6 @@
     const addCategory = (data) =>{
         const lastCategory = cateList.value[cateList.value.length - 1];
         const newValue = lastCategory  ? lastCategory.value + 1 : 600101;
-
         axios.post('worddict/insertCategory',{
             CMNCODNAM: data
         }).then(res => {
@@ -172,6 +185,8 @@
                 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');
             }
         })
     }
@@ -190,10 +205,34 @@
         })
     };
 
+    // 체크 상태 업데이트
+    const updateCheckedItems = (checked, id, name) => {
+        if (checked) {
+            checkedItems.value.push(id);
+            checkedNames.value.push(name);
+        } else {
+            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);
+
 </script>
 
 <style scoped>
 
+.admin-del-btn {
+    position: fixed;
+    right: 1.5rem;
+    bottom: 1.5rem;
+    width: 3rem;
+    height: 3rem;
+}
+
 .error {
     color: red;
     font-weight: bold;

From 4175ecd290e07bd514b905403aaa1f69701b8d24 Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 20 Feb 2025 15:16:50 +0900
Subject: [PATCH 4/7] =?UTF-8?q?=EA=B2=80=EC=83=89=20,=20=EC=B9=B4=ED=85=8C?=
 =?UTF-8?q?=EA=B3=A0=EB=A6=AC=20=EB=B3=84=20=EB=82=98=EC=98=A4=EA=B2=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/ProjectCardList.vue    | 192 ---------
 src/components/projectlist/ProjectList.vue | 477 +++++++++++++++------
 2 files changed, 338 insertions(+), 331 deletions(-)
 delete mode 100644 src/components/list/ProjectCardList.vue

diff --git a/src/components/list/ProjectCardList.vue b/src/components/list/ProjectCardList.vue
deleted file mode 100644
index 9b6094b..0000000
--- a/src/components/list/ProjectCardList.vue
+++ /dev/null
@@ -1,192 +0,0 @@
-<template>
-    <div class="mt-4">
-        <div v-if="projectList.length === 0" class="text-center">
-            <p class="text-muted mt-4">게시물이 없습니다.</p>
-        </div>
-
-        <div v-for="post in projectList" :key="post.PROJCTSEQ" @click="openModal(post)" class="cursor-pointer">
-            <ProjectCard
-                :title="post.PROJCTNAM"
-                :description="post.PROJCTDES"
-                :strdate="post.PROJCTSTR"
-                :enddate="post.PROJCTEND"
-                :address="post.PROJCTARR + ' ' + post.PROJCTDTL"
-                :projctSeq="post.PROJCTSEQ"
-                :projctCol="post.projctcolor"
-            />
-        </div>
-
-        <CenterModal :display="isModalOpen" @close="closeModal">
-            <template #title> 프로젝트 수정 </template>
-            <template #body>
-                <FormInput
-                    title="이름"
-                    name="name"
-                    :is-essential="true"
-                    :is-alert="nameAlert"
-                    v-model="selectedProject.PROJCTNAM"
-                />
-
-                <FormSelect
-                    title="컬러"
-                    name="color"
-                    :is-essential="true"
-                    :is-label="true"
-                    :is-common="true"
-                    :data="allColors"
-                    :value="selectedProject.PROJCTCOL"
-                    @update:data="selectedProject.PROJCTCOL = $event"
-                />
-
-                <FormInput
-                    title="시작일"
-                    type="date"
-                    name="startDay"
-                    v-model="selectedProject.PROJCTSTR"
-                    :is-essential="true"
-                />
-
-                <FormInput
-                    title="종료일"
-                    type="date"
-                    name="endDay"
-                    v-model="selectedProject.PROJCTEND"
-                />
-
-                <FormInput
-                    title="설명"
-                    name="description"
-                    v-model="selectedProject.PROJCTDES"
-                />
-
-                <ArrInput
-                    title="주소"
-                    name="address"
-                    :is-essential="true"
-                    :is-row="true"
-                    v-model="selectedProject"
-                    @update:data="updateAddress"
-                />
-
-            </template>
-            <template #footer>
-                <button class="btn btn-secondary" @click="closeModal">Close</button>
-                <button class="btn btn-primary" @click="handleSubmit">Save</button>
-            </template>
-        </CenterModal>
-    </div>
-</template>
-
-<script setup>
-    import { computed, ref, watch } from 'vue';
-    import ProjectCard from './ProjectCard.vue';
-    import { onMounted } from 'vue';
-    import $api from '@api';
-    import CenterModal from '@c/modal/CenterModal.vue';
-    import FormInput from '@c/input/FormInput.vue';
-    import FormSelect from '@c/input/FormSelect.vue';
-    import commonApi from '@/common/commonApi';
-    import ArrInput from '@c/input/ArrInput.vue';
-    import { useUserInfoStore } from '@/stores/useUserInfoStore';
-    import { useToastStore } from '@s/toastStore';
-
-    const toastStore = useToastStore();
-
-    const projectList = ref([]);
-    const isModalOpen = ref(false);
-    let originalColor = ref('');
-
-    const userStore = useUserInfoStore();
-    const user = ref(null);
-
-    const nameAlert = ref(false);
-    const selectedProject = ref({
-        PROJCTSEQ:'',
-        PROJCTNAM: '',
-        PROJCTSTR: '',
-        PROJCTEND: '',
-        PROJCTZIP: '',
-        PROJCTARR: '',
-        PROJCTDTL: '',
-        PROJCTDES: '',
-        PROJCTCOL: '',
-        projctcolor:'',
-    });
-
-    const { colorList } = commonApi({
-        loadColor: true,
-        colorType: 'YNP',
-    });
-
-
-    onMounted(async () => {
-        getProjectList();
-
-        await userStore.userInfo(); // 로그인한 사용자 정보
-        user.value = userStore.user;
-    });
-
-    // 프로젝트 목록 불러오기
-    const getProjectList = () => {
-        $api.get('project/select').then(res => {
-            projectList.value = res.data.data.projectList;
-        });
-    };
-
-
-    const openModal = (post) => {
-        isModalOpen.value = true;
-
-        // 여기에 기존 값 넣기
-        selectedProject.value = { ...post };
-
-        // 기존 색상 넣어두기
-        originalColor.value = post.PROJCTCOL;
-    };
-
-    const closeModal = () => {
-        isModalOpen.value = false;
-    };
-
-    // 현재 프로젝트 색상 + 사용하지 않은 색상
-    const allColors = computed(() => {
-        // 기존 색상 추가
-        const existingColor = { value: selectedProject.value.PROJCTCOL, label: selectedProject.value.projctcolor };
-
-        // colorList에 기존 색상을 추가
-        return [existingColor, ...colorList.value];
-    });
-
-    const updateAddress = (addressData) => {
-        selectedProject.value = {
-            ...selectedProject.value,
-            PROJCTZIP: addressData.postcode,
-            PROJCTARR: addressData.address,
-            PROJCTDTL: addressData.detailAddress
-        };
-};
-
-
-    const handleSubmit = () => {
-
-        $api.patch('project/update', {
-            projctSeq: selectedProject.value.PROJCTSEQ,
-            projctNam: selectedProject.value.PROJCTNAM,
-            projctCol: selectedProject.value.PROJCTCOL,
-            projctArr: selectedProject.value.PROJCTARR,
-            projctDtl: selectedProject.value.PROJCTDTL,
-            projctZip: selectedProject.value.PROJCTZIP,
-            projctStr: selectedProject.value.PROJCTSTR,
-            projctEnd: selectedProject.value.PROJCTEND || null,
-            projctDes: selectedProject.value.PROJCTDES,
-            projctUmb: user.value.name,
-            originalColor: originalColor.value === selectedProject.value.PROJCTCOL ? null : originalColor.value
-        }).then(res => {
-            if (res.status === 200) {
-                toastStore.onToast('수정이 완료 되었습니다.', 's');
-                closeModal();
-                location.reload();
-            }
-        })
-    };
-</script>
diff --git a/src/components/projectlist/ProjectList.vue b/src/components/projectlist/ProjectList.vue
index 812fc9c..14675d7 100644
--- a/src/components/projectlist/ProjectList.vue
+++ b/src/components/projectlist/ProjectList.vue
@@ -1,163 +1,362 @@
 <template>
-    <SearchBar />
+    <SearchBar @update:data="search"/>
     <div class="d-flex align-items-center">
-        <CategoryBtn :lists="yearCategory" v-model:selectedCategory="selectedCategory" />
-        <WriteBtn class="mt-2 ms-auto" @click="openModal" />
-        <CenterModal :display="isModalOpen" @close="closeModal">
-            <template #title> 프로젝트 등록 </template>
-            <template #body>
-                <FormInput
-                    title="이름"
-                    name="name"
-                    :is-essential="true"
-                    :is-alert="nameAlert"
-                    @update:modelValue="name = $event"
-                />
-
-                <FormSelect
-                    title="컬러"
-                    name="color"
-                    :is-essential="true"
-                    :is-label="true"
-                    :is-common="true"
-                    :data="colorList"
-                    @update:data="color = $event"
-                />
-
-                <FormInput
-                    title="시작 일"
-                    type="date"
-                    name="startDay"
-                    v-model="startDay"
-                    :is-essential="true"
-                />
-
-                <FormInput
-                    title="종료 일"
-                    name="endDay"
-                    :type="'date'"
-                    @update:modelValue="endDay = $event"
-                />
-
-                <FormInput
-                    title="설명"
-                    name="description"
-                    @update:modelValue="description = $event"
-                />
-
-                <ArrInput
-                    title="주소"
-                    name="address"
-                    :isEssential="true"
-                    :is-row="true"
-                    :is-alert="addressAlert"
-                    @update:data="handleAddressUpdate"
-                    @update:alert="addressAlert = $event"
-                />
-            </template>
-            <template #footer>
-                <button class="btn btn-secondary" @click="closeModal">Close</button>
-                <button class="btn btn-primary" @click="handleSubmit">Save</button>
-            </template>
-        </CenterModal>
+        <CategoryBtn :lists="yearCategory" @update:data="selectedCategory = $event" />
+        <WriteBtn class="mt-2 ms-auto" @click="openCreateModal" />
     </div>
-    <ProjectCardList :category="selectedCategory" />
+
+    <!-- 프로젝트 목록 -->
+    <div class="mt-4">
+        <div v-if="projectList.length === 0" class="text-center">
+            <p class="text-muted mt-4">게시물이 없습니다.</p>
+        </div>
+
+        <div v-for="post in projectList" :key="post.PROJCTSEQ" @click="openEditModal(post)" class="cursor-pointer">
+            <ProjectCard
+                :title="post.PROJCTNAM"
+                :description="post.PROJCTDES"
+                :strdate="post.PROJCTSTR"
+                :enddate="post.PROJCTEND"
+                :address="post.PROJCTARR + ' ' + post.PROJCTDTL"
+                :projctSeq="post.PROJCTSEQ"
+                :projctCol="post.projctcolor"
+            />
+        </div>
+    </div>
+
+    <!-- 등록 모달 -->
+    <CenterModal :display="isCreateModalOpen" @close="closeCreateModal">
+        <template #title> 프로젝트 등록 </template>
+        <template #body>
+            <FormInput
+                title="이름"
+                name="name"
+                :is-essential="true"
+                :is-alert="nameAlert"
+                @update:modelValue="name = $event"
+            />
+
+            <FormSelect
+                title="컬러"
+                name="color"
+                :is-essential="true"
+                :is-label="true"
+                :is-common="true"
+                :data="colorList"
+                @update:data="color = $event"
+            />
+
+            <FormInput
+                title="시작 일"
+                type="date"
+                name="startDay"
+                v-model="startDay"
+                :is-essential="true"
+            />
+
+            <FormInput
+                title="종료 일"
+                name="endDay"
+                :type="'date'"
+                @update:modelValue="endDay = $event"
+            />
+
+            <FormInput
+                title="설명"
+                name="description"
+                @update:modelValue="description = $event"
+            />
+
+            <ArrInput
+                title="주소"
+                name="address"
+                :isEssential="true"
+                :is-row="true"
+                :is-alert="addressAlert"
+                @update:data="handleAddressUpdate"
+                @update:alert="addressAlert = $event"
+            />
+        </template>
+        <template #footer>
+            <BackButton @click="closeCreateModal" />
+            <SaveButton @click="handleCreate" />
+        </template>
+    </CenterModal>
+
+    <!-- 수정 모달 -->
+    <CenterModal :display="isEditModalOpen" @close="closeEditModal">
+        <template #title> 프로젝트 수정 </template>
+        <template #body>
+            <FormInput
+                title="이름"
+                name="name"
+                :is-essential="true"
+                :is-alert="nameAlert"
+                :modelValue="selectedProject.PROJCTNAM"
+                @update:modelValue="selectedProject.PROJCTNAM = $event"
+            />
+
+            <FormSelect
+                title="컬러"
+                name="color"
+                :is-essential="true"
+                :is-label="true"
+                :is-common="true"
+                :data="allColors"
+                :value="selectedProject.PROJCTCOL"
+                @update:data="selectedProject.PROJCTCOL = $event"
+            />
+
+            <FormInput
+                title="시작일"
+                type="date"
+                name="startDay"
+                :is-essential="true"
+                :modelValue="selectedProject.PROJCTSTR"
+                @update:modelValue="selectedProject.PROJCTSTR = $event"
+            />
+
+            <FormInput
+                title="종료일"
+                type="date"
+                name="endDay"
+                :modelValue="selectedProject.PROJCTEND"
+                @update:modelValue="selectedProject.PROJCTEND = $event"
+            />
+
+            <FormInput
+                title="설명"
+                name="description"
+                :modelValue="selectedProject.PROJCTDES"
+                @update:modelValue="selectedProject.PROJCTDES = $event"
+            />
+
+            <ArrInput
+                title="주소"
+                name="address"
+                :is-essential="true"
+                :is-row="true"
+                :modelValue="selectedProject"
+                @update:data="updateAddress"
+            />
+        </template>
+        <template #footer>
+            <BackButton @click="closeEditModal" />
+            <SaveButton @click="handleUpdate" />
+        </template>
+    </CenterModal>
 </template>
 
 <script setup>
-    import SearchBar from '@c/search/SearchBar.vue';
-    import ProjectCardList from '@c/list/ProjectCardList.vue';
-    import CategoryBtn from '@c/category/CategoryBtn.vue';
-    import commonApi from '@/common/commonApi';
-    import { inject, onMounted, ref } from 'vue';
-    import WriteBtn from '@c/button/WriteBtn.vue';
-    import CenterModal from '@c/modal/CenterModal.vue';
-    import FormSelect from '@c/input/FormSelect.vue';
-    import FormInput from '@c/input/FormInput.vue';
-    import ArrInput from '@c/input/ArrInput.vue';
-    import { useToastStore } from '@s/toastStore';
-    import $api from '@api';
-    import { useUserInfoStore } from '@/stores/useUserInfoStore';
+import { computed, inject, ref, watch, onMounted } from 'vue';
+import SearchBar from '@c/search/SearchBar.vue';
+import ProjectCard from '@c/list/ProjectCard.vue';
+import CategoryBtn from '@c/category/CategoryBtn.vue';
+import WriteBtn from '@c/button/WriteBtn.vue';
+import CenterModal from '@c/modal/CenterModal.vue';
+import FormSelect from '@c/input/FormSelect.vue';
+import FormInput from '@c/input/FormInput.vue';
+import ArrInput from '@c/input/ArrInput.vue';
+import commonApi from '@/common/commonApi';
+import { useToastStore } from '@s/toastStore';
+import { useUserInfoStore } from '@/stores/useUserInfoStore';
+import $api from '@api';
+import SaveButton from '@c/button/SaveBtn.vue';
+import BackButton from '@c/button/BackBtn.vue'
 
-    const dayjs = inject('dayjs');
+const dayjs = inject('dayjs');
+const today = dayjs().format('YYYY-MM-DD');
+const toastStore = useToastStore();
+const userStore = useUserInfoStore();
 
-    const today = dayjs().format('YYYY-MM-DD');
+// 상태 관리
+const user = ref(null);
+const projectList = ref([]);
+const filteredProjects = ref([]);
+const selectedCategory = ref(null);
+const searchText = ref('');
 
-    const toastStore = useToastStore();
-    const userStore = useUserInfoStore();
+// 등록 모달 상태
+const isCreateModalOpen = ref(false);
+const name = ref('');
+const color = ref('');
+const address = ref('');
+const detailAddress = ref('');
+const postcode = ref('');
+const startDay = ref(today);
+const endDay = ref('');
+const description = ref('');
+const nameAlert = ref(false);
+const addressAlert = ref(false);
 
-    const user = ref(null);
+// 수정 모달 상태
+const isEditModalOpen = ref(false);
+const originalColor = ref('');
+const selectedProject = ref({
+    PROJCTSEQ: '',
+    PROJCTNAM: '',
+    PROJCTSTR: '',
+    PROJCTEND: '',
+    PROJCTZIP: '',
+    PROJCTARR: '',
+    PROJCTDTL: '',
+    PROJCTDES: '',
+    PROJCTCOL: '',
+    projctcolor: '',
+});
 
-    const name = ref('');
-    const color = ref('');
-    const address = ref('');
-    const detailAddress = ref('');
-    const postcode = ref('');
-    const startDay = ref(today);
-    const endDay = ref('');
-    const description = ref('');
+// API 호출
+const { yearCategory, colorList } = commonApi({
+    loadColor: true,
+    colorType: 'YNP',
+    loadYearCategory: true,
+});
 
-    const isModalOpen = ref(false);
-    const nameAlert = ref(false);
-    const addressAlert = ref(false);
-
-    const openModal = () => {
-        isModalOpen.value = true;
-    };
-
-    const closeModal = () => {
-        isModalOpen.value = false;
-    };
-
-
-    const selectedCategory = ref(null);
-
-    const { yearCategory, colorList } = commonApi({
-        loadColor: true,
-        colorType: 'YNP',
-        loadYearCategory: true,
+// 프로젝트 목록 조회
+const getProjectList = async () => {
+    const res = await $api.get('project/select', {
+        params: {
+            searchKeyword : searchText.value,
+            category : selectedYear.value,
+        },
     });
+    projectList.value = res.data.data.projectList;
+};
 
-    // 주소 업데이트 핸들러
-    const handleAddressUpdate = addressData => {
-        address.value = addressData.address;
-        detailAddress.value = addressData.detailAddress;
-        postcode.value = addressData.postcode;
-    };
+// 검색 처리
+const search = async (searchKeyword) => {
+    searchText.value = searchKeyword.trim();
+    await getProjectList();
+};
+
+const selectedYear = computed(() => {
+    if (!selectedCategory.value || selectedCategory.value === 900101) {
+        return null;
+    }
+    return yearCategory.value.find(item => item.value === selectedCategory.value)?.label || null;
+});
 
 
-    onMounted(async () => {
-        await userStore.userInfo(); // 로그인한 사용자 정보
-        user.value = userStore.user;
-    });
+// 카테고리 변경 감지
+watch(selectedCategory, async () => {
+    await getProjectList();
+});
 
-    const handleSubmit = async () => {
+// 등록 모달 관리
+const openCreateModal = () => {
+    isCreateModalOpen.value = true;
+};
 
-        nameAlert.value = name.value.trim() === '';
-        addressAlert.value = address.value.trim() === '';
+const closeCreateModal = () => {
+    isCreateModalOpen.value = false;
+};
 
-        if (nameAlert.value ||  addressAlert.value ) {
-            return;
+const handleAddressUpdate = addressData => {
+    address.value = addressData.address;
+    detailAddress.value = addressData.detailAddress;
+    postcode.value = addressData.postcode;
+};
+
+const handleCreate = async () => {
+    nameAlert.value = name.value.trim() === '';
+    addressAlert.value = address.value.trim() === '';
+
+    if (nameAlert.value || addressAlert.value) {
+        return;
+    }
+
+    $api.post('project/insert', {
+        projctNam: name.value,
+        projctCol: color.value,
+        projctStr: startDay.value,
+        projctEnd: endDay.value || null,
+        projctDes: description.value || null,
+        projctArr: address.value,
+        projctDtl: detailAddress.value,
+        projctZip: postcode.value,
+        projctCmb: user.value.name,
+    })
+    .then(res => {
+        if (res.status === 200) {
+            toastStore.onToast('프로젝트가 등록되었습니다.', 's');
+            closeCreateModal();
+            location.reload();
         }
+    });
+};
 
-        $api.post('project/insert', {
-            projctNam: name.value,
-            projctCol: color.value,
-            projctStr: startDay.value,
-            projctEnd: endDay.value || null,
-            projctDes: description.value || null,
-            projctArr: address.value,
-            projctDtl: detailAddress.value,
-            projctZip: postcode.value,
-            projctCmb: user.value.name,
-        })
-        .then(res => {
-            if (res.status === 200) {
-                toastStore.onToast('프로젝트가 등록되었습니다.', 's');
-                closeModal();
-                location.reload();
-            }
-        })
+// 수정 모달 관리
+const openEditModal = (post) => {
+    isEditModalOpen.value = true;
+    selectedProject.value = { ...post };
+    originalColor.value = post.PROJCTCOL;
+};
+
+const closeEditModal = () => {
+    isEditModalOpen.value = false;
+};
+
+const allColors = computed(() => {
+    const existingColor = { value: selectedProject.value.PROJCTCOL, label: selectedProject.value.projctcolor };
+    return [existingColor, ...colorList.value];
+});
+
+const hasChanges = computed(() => {
+    const original = projectList.value.find(p => p.PROJCTSEQ === selectedProject.value.PROJCTSEQ);
+    if (!original) return false;
+
+    return (
+        original.PROJCTNAM !== selectedProject.value.PROJCTNAM ||
+        original.PROJCTCOL !== selectedProject.value.PROJCTCOL ||
+        original.PROJCTARR !== selectedProject.value.PROJCTARR ||
+        original.PROJCTDTL !== selectedProject.value.PROJCTDTL ||
+        original.PROJCTZIP !== selectedProject.value.PROJCTZIP ||
+        original.PROJCTSTR !== selectedProject.value.PROJCTSTR ||
+        original.PROJCTEND !== selectedProject.value.PROJCTEND ||
+        original.PROJCTDES !== selectedProject.value.PROJCTDES
+    );
+});
+
+const updateAddress = (addressData) => {
+    selectedProject.value = {
+        ...selectedProject.value,
+        PROJCTZIP: addressData.postcode,
+        PROJCTARR: addressData.address,
+        PROJCTDTL: addressData.detailAddress
     };
+};
 
+const handleUpdate = () => {
+    if (!hasChanges.value) {
+        toastStore.onToast('변경된 내용이 없습니다.', 'e');
+        return;
+    }
+
+    $api.patch('project/update', {
+        projctSeq: selectedProject.value.PROJCTSEQ,
+        projctNam: selectedProject.value.PROJCTNAM,
+        projctCol: selectedProject.value.PROJCTCOL,
+        projctArr: selectedProject.value.PROJCTARR,
+        projctDtl: selectedProject.value.PROJCTDTL,
+        projctZip: selectedProject.value.PROJCTZIP,
+        projctStr: selectedProject.value.PROJCTSTR,
+        projctEnd: selectedProject.value.PROJCTEND || null,
+        projctDes: selectedProject.value.PROJCTDES,
+        projctUmb: user.value.name,
+        originalColor: originalColor.value === selectedProject.value.PROJCTCOL ? null : originalColor.value
+    }).then(res => {
+        if (res.status === 200) {
+            toastStore.onToast('수정이 완료 되었습니다.', 's');
+            closeEditModal();
+            location.reload();
+        }
+    });
+};
+
+// 라이프사이클 훅
+onMounted(async () => {
+    await getProjectList();
+    await userStore.userInfo();
+    user.value = userStore.user;
+});
 </script>

From 91d2492c13d8665dc3036ea9bcf4ccd66ab13cd3 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Thu, 20 Feb 2025 15:21:08 +0900
Subject: [PATCH 5/7] =?UTF-8?q?=ED=9C=B4=EA=B0=80=20=EC=82=AD=EC=A0=9C?=
 =?UTF-8?q?=EA=B8=B0=EB=8A=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/button/HalfDayButtons.vue    |  24 +-
 src/components/modal/VacationGrantModal.vue |   4 +-
 src/components/modal/VacationModal.vue      | 275 +++++++++++---------
 src/components/vacation/ProfileList.vue     |  12 +-
 src/views/vacation/VacationManagement.vue   | 209 +++++++++------
 5 files changed, 305 insertions(+), 219 deletions(-)

diff --git a/src/components/button/HalfDayButtons.vue b/src/components/button/HalfDayButtons.vue
index 2dc31e0..83f4c35 100644
--- a/src/components/button/HalfDayButtons.vue
+++ b/src/components/button/HalfDayButtons.vue
@@ -22,21 +22,21 @@
     </div>
   </template>
 
-  <script setup>
-  import { defineEmits, ref } from "vue";
+<script setup>
+import { defineEmits, ref } from "vue";
 
-  const emit = defineEmits(["toggleHalfDay", "addVacationRequests"]);
-  const halfDayType = ref(null);
+const emit = defineEmits(["toggleHalfDay", "addVacationRequests"]);
+const halfDayType = ref(null);
 
-  const toggleHalfDay = (type) => {
-    halfDayType.value = halfDayType.value === type ? null : type;
-    emit("toggleHalfDay", halfDayType.value);
-  };
+const toggleHalfDay = (type) => {
+  halfDayType.value = halfDayType.value === type ? null : type;
+  emit("toggleHalfDay", halfDayType.value);
+};
 
-  const addVacationRequests = () => {
-    emit("addVacationRequests");
-  };
-  </script>
+const addVacationRequests = () => {
+  emit("addVacationRequests");
+};
+</script>
 
   <style scoped>
 
diff --git a/src/components/modal/VacationGrantModal.vue b/src/components/modal/VacationGrantModal.vue
index 37269ff..206879a 100644
--- a/src/components/modal/VacationGrantModal.vue
+++ b/src/components/modal/VacationGrantModal.vue
@@ -68,12 +68,12 @@
         {
           date: new Date().toISOString().split("T")[0],
           type: "700103",
-          senderId: props.targetUser.senderId,
           receiverId: props.targetUser.MEMBERSEQ,
           count: grantCount.value,
         },
       ];
-
+      console.log(props.targetUser)
+      console.log(payload)
       const response = await axios.post("vacation", payload);
         console.log(response)
       if (response.data && response.data.status === "OK") {
diff --git a/src/components/modal/VacationModal.vue b/src/components/modal/VacationModal.vue
index fd27de0..d447ebf 100644
--- a/src/components/modal/VacationModal.vue
+++ b/src/components/modal/VacationModal.vue
@@ -1,116 +1,164 @@
 <template>
     <div v-if="isOpen" class="modal-dialog" @click.self="closeModal">
-        <div class="modal-content modal-scroll">
-            <h5 class="modal-title">📅 내 연차 사용 내역</h5>
-            <button class="close-btn" @click="closeModal">✖</button>
+      <div class="modal-content modal-scroll">
+        <h5 class="modal-title">📅 내 연차 사용 내역</h5>
+        <button class="close-btn" @click="closeModal">✖</button>
 
-            <!-- 연차 사용 및 받은 연차 리스트 -->
-            <div class="modal-body" v-if="mergedVacations.length > 0">
-                <ol class="vacation-list">
-                    <li v-for="(vacation, index) in mergedVacations" :key="index" class="vacation-item">
-                        <span v-if="vacation.type === 'used'" class="vacation-index">
-                            {{ getVacationIndex(index) }})
-                        </span>
-                        <span :class="vacation.type === 'used' ? 'minus-symbol' : 'plus-symbol'">
-                            {{ vacation.type === 'used' ? '-' : '+' }}
-                        </span>
-                        <span
-                            :style="{ color: userColors[vacation.senderId || vacation.receiverId] || '#000' }"
-                            class="vacation-date"
-                        >
-                            {{ formatDate(vacation.date) }}
-                        </span>
-                    </li>
-                </ol>
-            </div>
+        <!-- 연차 목록 -->
+        <div class="modal-body" v-if="mergedVacations.length > 0">
+          <ol class="vacation-list">
+            <li
+              v-for="(vac, index) in mergedVacations"
+              :key="vac._expandIndex"
+              class="vacation-item"
+            >
+              <!-- Used 항목만 인덱스 표시 -->
+              <span v-if="vac.category === 'used'" class="vacation-index">
+                {{ usedVacationIndexMap[vac._expandIndex] }})
+              </span>
 
-            <!-- 연차 데이터 없음 -->
-            <p v-if="mergedVacations.length === 0" class="no-data">
-                🚫 사용한 연차가 없습니다.
-            </p>
+              <span :class="vac.category === 'used' ? 'minus-symbol' : 'plus-symbol'">
+                {{ vac.category === 'used' ? '-' : '+' }}
+              </span>
+
+              <span
+                :style="{ color: userColors[vac.senderId || vac.receiverId] || '#000' }"
+                class="vacation-date"
+              >
+                {{ formatDate(vac.date) }}
+              </span>
+            </li>
+          </ol>
         </div>
+
+        <!-- 연차 데이터 없음 -->
+        <p v-else class="no-data">
+          🚫 사용한 연차가 없습니다.
+        </p>
+      </div>
     </div>
-</template>
+  </template>
 
 <script setup>
 import { defineProps, defineEmits, computed } from "vue";
 
 const props = defineProps({
-    isOpen: Boolean,
-    myVacations: {
-        type: Array,
-        default: () => [],
-    },
-    receivedVacations: {
-        type: Array,
-        default: () => [],
-    },
-    userColors: {
-        type: Object,
-        default: () => ({}),
-    },
+  isOpen: Boolean,
+  myVacations: {
+    type: Array,
+    default: () => [],
+  },
+  receivedVacations: {
+    type: Array,
+    default: () => [],
+  },
+  userColors: {
+    type: Object,
+    default: () => ({}),
+  },
 });
 
 const emit = defineEmits(["close"]);
 
-// ✅ 사용한 연차 + 받은 연차 통합 후 내림차순 정렬
-const usedVacations = computed(() =>
-    props.myVacations.map(v => ({ ...v, type: "used" }))
-);
-
-const receivedVacations = computed(() =>
-    props.receivedVacations.map(v => ({ ...v, type: "received" }))
-);
-
-// ✅ 정확한 정렬 및 리스트 병합
-const mergedVacations = computed(() => {
-    return [...usedVacations.value, ...receivedVacations.value].sort(
-        (a, b) => new Date(b.date) - new Date(a.date)
-    );
+/**
+ * 1) Used 휴가를 used_quota만큼 펼치기
+ *    - category: "used"
+ *    - code: 휴가 코드(예: LOCVACTYP)
+ *    - _expandIndex: 각 항목마다 고유한 확장 인덱스 (누적 인덱스 매핑에 사용)
+ */
+let globalCounter = 0; // 확장 시 사용할 전역 카운터
+const usedVacations = computed(() => {
+  const result = [];
+  props.myVacations.forEach((v) => {
+    const count = v.used_quota || 1;
+    for (let i = 0; i < count; i++) {
+      result.push({
+        ...v,
+        category: "used",
+        code: v.LOCVACTYP,         // 휴가 코드 (700103 등)
+        _expandIndex: globalCounter++,
+      });
+    }
+  });
+  return result;
 });
 
-// ✅ 연차 개수 반영된 인덱스 반환 (누적 합산)
-const getVacationIndex = (index) => {
-    let count = 0;
-    for (let i = 0; i <= index; i++) {
-        const v = mergedVacations.value[i];
-        count += v.used_quota; // 누적하여 더함
-    }
-    return count;
-};
+/**
+ * 2) Received 휴가: category: "received"
+ */
+const receivedVacations = computed(() =>
+  props.receivedVacations.map((v) => ({
+    ...v,
+    category: "received",
+  }))
+);
 
-// ✅ 날짜 형식 변환 (YYYY-MM-DD)
+/**
+ * 3) Used 휴가만 날짜 오름차순 정렬 → 누적 인덱스 계산
+ *    - type === "700103"이면 +1
+ *    - 그 외이면 +0.5
+ */
+const sortedUsedVacationsAsc = computed(() => {
+  return [...usedVacations.value].sort((a, b) => {
+    return new Date(a.date) - new Date(b.date) || (a._expandIndex - b._expandIndex);
+  });
+});
+
+const usedVacationIndexMap = computed(() => {
+  let cumulative = 0;
+  const map = {};
+  sortedUsedVacationsAsc.value.forEach((item) => {
+    const increment = item.type === "700103" ? 1 : 0.5;
+    cumulative += increment;
+    map[item._expandIndex] = cumulative;
+  });
+  return map;
+});
+
+/**
+ * 4) 최종 표시할 merged 리스트 (Used + Received)
+ *    - 날짜 내림차순 정렬 (최신 → 과거)
+ */
+const mergedVacations = computed(() => {
+  const all = [...usedVacations.value, ...receivedVacations.value];
+  // 날짜 내림차순 + 확장 인덱스 내림차순
+  all.sort((a, b) => {
+    const dateDiff = new Date(b.date) - new Date(a.date);
+    if (dateDiff !== 0) return dateDiff;
+    return b._expandIndex - a._expandIndex;
+  });
+  return all;
+});
+
+/** 날짜 포맷 (YYYY-MM-DD) */
 const formatDate = (dateString) => {
-    const date = new Date(dateString);
-    return date.toISOString().split("T")[0]; // YYYY-MM-DD 형식
+  if (!dateString) return "";
+  // 만약 dateString이 "YYYY-MM-DD" 형식이라면 그대로 반환
+  // 혹은 "YYYY-MM-DD..." 라면 앞 10자만 잘라 반환
+  return dateString.substring(0, 10);
 };
 
+
+/** 모달 닫기 */
 const closeModal = () => {
-    emit("close");
+  emit("close");
 };
 </script>
 
-<style scoped>
-/* 모달 스타일 */
-.modal-dialog {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-/* 스크롤 가능한 모달 */
-.modal-content {
-    max-height: 60vh;
-    overflow-y: auto;
-    padding: 20px;
-    width: 75%;
+  <style scoped>
+  /* 모달 본문 */
+  .modal-content {
     background: white;
-    border-radius: 8px;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-}
+    padding: 20px;
+    border-radius: 12px;
+    width: 400px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
+    text-align: center;
+    position: relative;
+  }
 
-/* 닫기 버튼 */
-.close-btn {
+  /* 닫기 버튼 */
+  .close-btn {
     position: absolute;
     top: 10px;
     right: 10px;
@@ -118,18 +166,17 @@ const closeModal = () => {
     border: none;
     font-size: 18px;
     cursor: pointer;
-    font-weight: bold;
-}
+  }
 
-/* 리스트 기본 스타일 */
-.vacation-list {
+  /* 리스트 기본 스타일 */
+  .vacation-list {
     list-style-type: none;
     padding-left: 0;
     margin-top: 15px;
-}
+  }
 
-/* 리스트 아이템 */
-.vacation-item {
+  /* 리스트 아이템 */
+  .vacation-item {
     display: flex;
     align-items: center;
     font-size: 16px;
@@ -138,49 +185,41 @@ const closeModal = () => {
     padding: 5px 10px;
     border-radius: 5px;
     background: #f9f9f9;
-}
+  }
 
-/* 인덱스 (연차 사용 개수) */
-.vacation-index {
+  /* 인덱스 (연차 사용 개수) */
+  .vacation-index {
     font-weight: bold;
     font-size: 16px;
     margin-right: 8px;
     color: #333;
-}
+  }
 
-/* "-" 빨간색 */
-.minus-symbol {
+  /* "-" 빨간색 */
+  .minus-symbol {
     color: red;
     font-weight: bold;
     margin-right: 8px;
-}
+  }
 
-/* "+" 파란색 */
-.plus-symbol {
+  /* "+" 파란색 */
+  .plus-symbol {
     color: blue;
     font-weight: bold;
     margin-right: 8px;
-}
+  }
 
-/* 날짜 스타일 */
-.vacation-date {
+  /* 날짜 스타일 */
+  .vacation-date {
     font-size: 16px;
     color: #333;
-}
+  }
 
-/* 연차 유형 스타일 */
-.vacation-type {
-    font-size: 14px;
-    font-weight: normal;
-    color: gray;
-    margin-left: 5px;
-}
-
-/* 연차 데이터 없음 */
-.no-data {
+  /* 연차 데이터 없음 */
+  .no-data {
     text-align: center;
     font-size: 14px;
     color: gray;
     margin-top: 10px;
-}
-</style>
+  }
+  </style>
diff --git a/src/components/vacation/ProfileList.vue b/src/components/vacation/ProfileList.vue
index 526537c..ae2d257 100644
--- a/src/components/vacation/ProfileList.vue
+++ b/src/components/vacation/ProfileList.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="card-body d-flex justify-content-center">
-      <ul class="list-unstyled d-flex align-items-center gap-3 mb-0 mt-2">
+      <ul class="list-unstyled d-flex align-items-center gap-5 mb-0 mt-2">
         <li
           v-for="(user, index) in sortedUserList"
           :key="index"
@@ -10,7 +10,7 @@
           :aria-label="user.MEMBERSEQ"
         >
           <img
-            class="rounded-circle user-avatar "
+            class="rounded-circle"
             :src="getUserProfileImage(user.MEMBERPRF)"
             alt="user"
             :style="getDynamicStyle(user)"
@@ -96,10 +96,10 @@
   const profileSize = computed(() => {
     const totalUsers = userList.value.length;
 
-    if (totalUsers <= 7) return "120px"; // 7명 이하
-    if (totalUsers <= 10) return "100px"; // ~10명
-    if (totalUsers <= 20) return "80px"; // ~20명
-    return "60px"; // 20명 이상
+    if (totalUsers <= 7) return "100px"; // 7명 이하
+    if (totalUsers <= 10) return "80px"; // ~10명
+    if (totalUsers <= 20) return "60px"; // ~20명
+    return "40px"; // 20명 이상
   });
 
   // 개별 유저 스타일 적용
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index bfb72c6..2412d73 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -9,16 +9,16 @@
                     @profileClick="handleProfileClick"
                     :remainingVacationData="remainingVacationData"
                     />
-                <div class="card-body">
+                <div class="card-body w-75 p-3 align-self-center">
                     <VacationModal
                     v-if="isModalOpen"
                     :isOpen="isModalOpen"
                     :myVacations="myVacations"
                     :receivedVacations="receivedVacations"
                     :userColors="userColors"
-                    @click="handleProfileClick(user)"
                     @close="isModalOpen = false"
                     />
+
                     <VacationGrantModal
                       v-if="isGrantModalOpen"
                       :isOpen="isGrantModalOpen"
@@ -34,7 +34,7 @@
                     />
                     <HalfDayButtons
                     @toggleHalfDay="toggleHalfDay"
-                    @addVacationRequests="addVacationRequests"
+                    @addVacationRequests="saveVacationChanges"
                     />
                 </div>
                 </div>
@@ -99,7 +99,6 @@ const handleProfileClick = async (user) => {
     if (user.MEMBERSEQ === userStore.user.id) {
       // 내 프로필을 클릭한 경우
       const response = await axios.get(`vacation/history`);
-      console.log(response)
 
       if (response.status === 200 && response.data) {
         myVacations.value = response.data.data.usedVacations || [];
@@ -188,23 +187,28 @@ const getVacationType = (typeCode) => {
   return vacationCodeMap.value[typeCode] || "기타";
 };
 
-/**
- * API 이벤트(fetchedEvents)와 사용자가 선택한 날짜(selectedDates)를 병합하여
- * calendarEvents를 업데이트하는 함수
- * - 선택 이벤트는 display: "background" 옵션을 사용하여 배경으로 표시
- * - 선택된 타입에 따라 클래스(selected-am, selected-pm, selected-full)를 부여함
- */
+
 function updateCalendarEvents() {
-const selectedEvents = Array.from(selectedDates.value).map(([date, type]) => {
-    return {
-    title: getVacationType(type),
-    start: date,
-    backgroundColor: "rgba(0, 128, 0, 0.3)",
-    display: "background",
-    classNames: [getVacationTypeClass(type)],
-    };
-});
-calendarEvents.value = [...fetchedEvents.value, ...selectedEvents];
+  // 신규 선택한 연차(추가 대상): type이 "delete"가 아닌 항목
+  const selectedEvents = Array.from(selectedDates.value)
+    .filter(([date, type]) => type !== "delete")
+    .map(([date, type]) => ({
+      title: getVacationType(type),
+      start: date,
+      backgroundColor: "rgba(0, 128, 0, 0.3)",
+      display: "background",
+      classNames: [getVacationTypeClass(type)]
+    }));
+
+  // 기존 백엔드에서 불러온 저장된 연차 이벤트 중,
+  // 해당 날짜가 삭제 대상으로 표시되어 있으면 제거
+  const filteredFetchedEvents = fetchedEvents.value.filter(event => {
+    if (event.saved) { // saved 플래그가 있는 이벤트는 저장된 연차
+      return selectedDates.value.get(event.start) !== "delete";
+    }
+    return true;
+  });
+  calendarEvents.value = [...filteredFetchedEvents, ...selectedEvents];
 }
 
 /**
@@ -221,30 +225,46 @@ calendarEvents.value = [...fetchedEvents.value, ...selectedEvents];
  * - 주말(토, 일)과 공휴일은 클릭되지 않음
  * - 클릭 시 해당 날짜를 selectedDates에 추가 또는 제거한 후 updateCalendarEvents() 호출
  */
-function handleDateClick(info) {
-const clickedDateStr = info.dateStr;
-const clickedDate = info.date;
+ function handleDateClick(info) {
+  const clickedDateStr = info.dateStr; // "YYYY-MM-DD" 형식
+  const clickedDate = info.date;
+  const todayStr = new Date().toISOString().split("T")[0];
 
-// 주말 (토:6, 일:0)은 클릭 무시
-if (clickedDate.getDay() === 0 || clickedDate.getDay() === 6) {
+  // 주말, 공휴일, 오늘 이전 날짜는 클릭 불가
+  if (
+    clickedDate.getDay() === 0 ||
+    clickedDate.getDay() === 6 ||
+    holidayDates.value.has(clickedDateStr) ||
+    clickedDateStr < todayStr
+  ) {
     return;
-}
-// 공휴일이면 클릭 무시
-if (holidayDates.value.has(clickedDateStr)) {
-    return;
-}
-if (!selectedDates.value.has(clickedDateStr)) {
-    const type = halfDayType.value
-    ? halfDayType.value === "AM"
-        ? "700101"
-        : "700102"
-    : "700103";
-    selectedDates.value.set(clickedDateStr, type);
-} else {
+  }
+
+  // 토글: 이미 선택된 날짜라면 해제
+  if (selectedDates.value.has(clickedDateStr)) {
     selectedDates.value.delete(clickedDateStr);
-}
-halfDayType.value = null;
-updateCalendarEvents();
+    updateCalendarEvents();
+    return;
+  }
+
+  // 저장된(보낸사람 없는) 연차가 있는지 확인
+  const unsentVacation = myVacations.value.find(
+    (vac) => vac.LOCVACUDT && vac.LOCVACUDT.startsWith(clickedDateStr) && !vac.LOCVACRMM
+  );
+
+  if (unsentVacation) {
+    // 기존 저장된 연차가 있다면, 클릭 시 "delete" 플래그 지정 (즉, 숨김 처리)
+    selectedDates.value.set(clickedDateStr, "delete");
+  } else {
+    // 그렇지 않으면 신규 연차 추가: halfDayType 값에 따라 결정
+    const type = halfDayType.value
+      ? (halfDayType.value === "AM" ? "700101" : "700102")
+      : "700103";
+    selectedDates.value.set(clickedDateStr, type);
+  }
+
+  halfDayType.value = null;
+  updateCalendarEvents();
 }
 
 /**
@@ -257,66 +277,93 @@ halfDayType.value = halfDayType.value === type ? null : type;
 /**
  * 백엔드에서 휴가 데이터를 가져와 이벤트로 변환
  */
-async function fetchVacationData(year, month) {
-try {
+ async function fetchVacationData(year, month) {
+  try {
     const response = await axios.get(`vacation/list/${year}/${month}`);
-    if (response.status == 200) {
-    const vacationList = response.data;
-    const events = vacationList
+    if (response.status === 200) {
+      const vacationList = response.data;
+      // 내 연차 데이터 업데이트 (사용자 본인의 연차만)
+      myVacations.value = vacationList.filter(
+        (vac) => vac.MEMBERSEQ === userStore.user.id
+      );
+      // 기존 저장된 연차 이벤트에 saved 플래그 추가
+      const events = vacationList
+        .filter((vac) => !vac.LOCVACRMM) // 보낸사람이 없는(저장된) 연차
         .map((vac) => {
-        let dateStr = vac.LOCVACUDT.split("T")[0];
-        let className = "fc-daygrid-event";
-        let backgroundColor = userColors.value[vac.MEMBERSEQ] || "#FFFFFF";
-        return {
+          let dateStr = vac.LOCVACUDT.split("T")[0];
+          let backgroundColor = userColors.value[vac.MEMBERSEQ] || "#FFFFFF";
+          return {
             title: getVacationType(vac.LOCVACTYP),
             start: dateStr,
             backgroundColor,
             classNames: [getVacationTypeClass(vac.LOCVACTYP)],
-        };
+            saved: true, // saved 플래그 추가
+          };
         })
         .filter((event) => event !== null);
-    return events;
+      return events;
     } else {
-    console.warn("📌 휴가 데이터를 불러오지 못함");
-    return [];
+      console.warn("📌 휴가 데이터를 불러오지 못함");
+      return [];
     }
-} catch (error) {
+  } catch (error) {
     console.error("Error fetching vacation data:", error);
     return [];
-}
+  }
 }
 
 /**
  * 휴가 요청 추가 (선택된 날짜를 백엔드로 전송)
  */
-async function addVacationRequests() {
-if (selectedDates.value.size === 0) {
-    alert("휴가를 선택해주세요.");
-    return;
-}
-const vacationRequests = Array.from(selectedDates.value).map(([date, type]) => ({
-    date,
-    type,
-}));
-try {
-    const response = await axios.post("vacation", vacationRequests);
+ async function saveVacationChanges() {
+  // 추가할 연차: selectedDates 항목 중 type이 "delete"가 아닌 경우
+  const selectedDatesArray = Array.from(selectedDates.value);
+  const vacationsToAdd = selectedDatesArray
+    .filter(([date, type]) => type !== "delete")
+    .filter(([date, type]) =>
+      // 기존 데이터에 없거나, 기존 데이터에 있더라도 보낸사람(LOCVACRMM)이 있는 경우 추가
+      !myVacations.value.some(vac => vac.LOCVACUDT.startsWith(date)) ||
+      myVacations.value.some(vac => vac.LOCVACUDT.startsWith(date) && vac.LOCVACRMM)
+    )
+    .map(([date, type]) => ({ date, type }));
+
+  // 삭제할 연차: 기존 데이터 중 보낸사람이 없는 항목에서,
+  // 해당 날짜가 "delete"로 지정되었거나 선택되지 않은 경우
+  const vacationsToDelete = myVacations.value
+  .filter(vac => {
+    const date = vac.LOCVACUDT.split("T")[0];
+    // 오직 해당 날짜가 "delete"로 선택된 경우만 삭제 대상으로 처리
+    return selectedDates.value.get(date) === "delete" && !vac.LOCVACRMM;
+  })
+  .map(vac => {
+    const id = vac.LOCVACSEQ ;
+    return typeof id === "number" ? Number(id) : id;
+  });
+
+
+  console.log("vacationsToAdd:", vacationsToAdd);
+  console.log("vacationsToDelete:", vacationsToDelete);
+
+  try {
+    const response = await axios.post("vacation/batchUpdate", {
+      add: vacationsToAdd,
+      delete: vacationsToDelete
+    });
     if (response.data && response.data.status === "OK") {
-    alert("휴가가 저장되었습니다.");
-    await fetchRemainingVacation();
-    // 저장 후 현재 달 데이터 다시 불러오기
-    const currentDate = fullCalendarRef.value.getApi().getDate();
-    const year = currentDate.getFullYear();
-    const month = String(currentDate.getMonth() + 1).padStart(2, "0");
-    loadCalendarData(year, month);
-    selectedDates.value.clear();
-    updateCalendarEvents();
+      alert("✅ 휴가 변경 사항이 저장되었습니다.");
+      await fetchRemainingVacation();
+      const currentDate = fullCalendarRef.value.getApi().getDate();
+      await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
+      // 초기화: 선택한 날짜 해제
+      selectedDates.value.clear();
+      updateCalendarEvents();
     } else {
-    alert("휴가 저장 중 오류가 발생했습니다.");
+      alert("❌ 휴가 저장 중 오류가 발생했습니다.");
     }
-} catch (error) {
-    console.error(error);
-    alert("휴가 저장에 실패했습니다.");
-}
+  } catch (error) {
+    console.error("🚨 휴가 변경 저장 실패:", error);
+    alert("❌ 휴가 저장 요청에 실패했습니다.");
+  }
 }
 
 /**

From 52809ba74336ebbafad08859b526e9ca644db0bc Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 20 Feb 2025 15:43:37 +0900
Subject: [PATCH 6/7] =?UTF-8?q?=EC=A3=BC=EC=84=9D=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/projectlist/ProjectList.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/projectlist/ProjectList.vue b/src/components/projectlist/ProjectList.vue
index 14675d7..ce0be6a 100644
--- a/src/components/projectlist/ProjectList.vue
+++ b/src/components/projectlist/ProjectList.vue
@@ -233,6 +233,7 @@ const selectedYear = computed(() => {
     if (!selectedCategory.value || selectedCategory.value === 900101) {
         return null;
     }
+    // 선택된 category 값 label 값으로 변환
     return yearCategory.value.find(item => item.value === selectedCategory.value)?.label || null;
 });
 
@@ -251,6 +252,7 @@ const closeCreateModal = () => {
     isCreateModalOpen.value = false;
 };
 
+// 등록 :: 주소 업데이트 핸들러
 const handleAddressUpdate = addressData => {
     address.value = addressData.address;
     detailAddress.value = addressData.detailAddress;
@@ -296,11 +298,13 @@ const closeEditModal = () => {
     isEditModalOpen.value = false;
 };
 
+// 기존 컬러 + 사용 가능 한 컬러
 const allColors = computed(() => {
     const existingColor = { value: selectedProject.value.PROJCTCOL, label: selectedProject.value.projctcolor };
     return [existingColor, ...colorList.value];
 });
 
+// 변경된 내용 있는지 확인
 const hasChanges = computed(() => {
     const original = projectList.value.find(p => p.PROJCTSEQ === selectedProject.value.PROJCTSEQ);
     if (!original) return false;
@@ -317,6 +321,7 @@ const hasChanges = computed(() => {
     );
 });
 
+// 수정 :: 주소
 const updateAddress = (addressData) => {
     selectedProject.value = {
         ...selectedProject.value,
@@ -353,7 +358,6 @@ const handleUpdate = () => {
     });
 };
 
-// 라이프사이클 훅
 onMounted(async () => {
     await getProjectList();
     await userStore.userInfo();

From 04b7db15601fc1d3e6ccb5d130678553fcba6e3e Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Fri, 21 Feb 2025 09:50:09 +0900
Subject: [PATCH 7/7] =?UTF-8?q?board-list-d=EB=A8=B8=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComment.vue     | 197 ++++++++++++----
 src/components/board/BoardCommentArea.vue |   9 +-
 src/components/board/BoardCommentList.vue |  19 +-
 src/views/board/BoardList.vue             | 195 ++++++++--------
 src/views/board/BoardView.vue             | 259 +++++++++++++++-------
 src/views/vacation/VacationManagement.vue |  11 +-
 6 files changed, 448 insertions(+), 242 deletions(-)

diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue
index 07e2327..dd6cfc0 100644
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@@ -14,16 +14,29 @@
             @deleteClick="deleteClick"
             @submitPassword="submitPassword"
             @updateReaction="handleUpdateReaction"
-            @toggleEdit="emit('toggleEdit', comment.commentId, true)"
+            @toggleEdit="toggleEdit(true)"
         />
+        <!-- 댓글 비밀번호 입력창 (익명일 경우) -->
+        <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 class="mt-6">
             <template v-if="isEditTextarea">
                 <textarea v-model="editedContent" class="form-control"></textarea>
                 <div class="mt-2 d-flex justify-content-end">
-                    <button class="btn btn-secondary me-2" @click="emit('toggleEdit', comment.commentId, false)">취소</button>
-                    <button class="btn btn-primary" @click="submitEdit">수정 완료</button>
+                    <button class="btn btn-secondary me-2" @click="cancelEdit">취소</button>
+                    <button class="btn btn-primary" @click="submitEdit">수정</button>
                 </div>
             </template>
             <template v-else>
@@ -51,55 +64,45 @@
                 />
             </li>
         </ul>
-        <!-- <ul class="list-unstyled twoDepth">
-            <li>
-                <BoardProfile profileName=곤데리2 :showDetail="false" />
-                <div class="mt-2">저도 궁금합니다.</div>
-                <BoardCommentArea v-if="comment" />
-            </li>
-        </ul> -->
-        <!-- <BoardProfile profileName=곤데리 :showDetail="false" />
-        <div class="mt-2">저도 궁금합니다.</div>
-        <PlusButton  @click="toggleComment"/>
-        <BoardCommentArea v-if="comment" /> -->
     </div>
 </template>
 
 <script setup>
+import axios from '@api';
 import { defineProps, defineEmits, ref } from 'vue';
 import BoardProfile from './BoardProfile.vue';
 import BoardCommentArea from './BoardCommentArea.vue';
 import PlusButton from '../button/PlusBtn.vue';
 
 const props = defineProps({
-  comment: {
-    type: Object,
-    required: true,
-  },
-  unknown: {
+    comment: {
+        type: Object,
+        required: true,
+    },
+    unknown: {
+            type: Boolean,
+            default: true,
+        },
+    isPlusButton: {
         type: Boolean,
         default: true,
     },
-  isPlusButton: {
-    type: Boolean,
-    default: true,
-  },
-  isLike: {
-    type: Boolean,
-    default: false,
-  },
-  isEditTextarea: {
-    type: Boolean,
-    default: false
-  },
-  isPassword: {
-    type: Boolean,
-    default: false,
-},
+    isLike: {
+        type: Boolean,
+        default: false,
+    },
+    isEditTextarea: {
+        type: Boolean,
+        default: false
+    },
+    isPassword: {
+        type: Boolean,
+        default: false,
+    },
 });
 
 // emits 정의
-const emit = defineEmits(['submitComment', 'updateReaction', 'toggleEdit', 'editClick']);
+const emit = defineEmits(['submitComment', 'updateReaction', 'toggleEdit',]);
 
 // 댓글 입력 창 토글
 const isComment = ref(false);
@@ -107,6 +110,22 @@ const toggleComment = () => {
     isComment.value = !isComment.value;
 };
 
+// 비밀번호 & 수정 모드 관련 상태
+const password = ref('');
+const passwordAlert = ref('');
+const isPassword = ref(false);
+const isEditTextarea = ref(false);
+const lastClickedButton = ref("");
+
+const toggleEdit = (status) => {
+    if (props.unknown) {
+        isPassword.value = status; // 익명 사용자면 비밀번호 입력창 표시
+        lastClickedButton.value = "edit";
+    } else {
+        isEditTextarea.value = status; // 비밀번호가 필요 없으면 바로 수정 모드
+    }
+};
+
 // 부모 컴포넌트에 대댓글 추가 요청
 const submitComment = (newComment) => {
     emit('submitComment', { parentId: props.comment.commentId, ...newComment });
@@ -118,21 +137,109 @@ const submitComment = (newComment) => {
 const handleUpdateReaction = (reactionData) => {
     emit('updateReaction', {
         boardId: props.comment.boardId,
-        commentId: props.comment.commentId,
-        ...reactionData
+        commentId: props.comment.commentId || reactionData.commentId,
+        ...reactionData,
     });
+
 };
 
-// 수정
-const editClick = (data) => {
-    emit('editClick', data);
+// 댓글 수정 버튼 클릭
+const editClick = () => {
+    if (props.unknown) {
+        console.log('수정')
+        togglePassword("edit");
+    }
+};
+
+const deleteClick = () => {
+    if (props.unknown) {
+        console.log('삭제')
+        togglePassword("delete");
+    }
+};
+
+const togglePassword = (button) => {
+    if (lastClickedButton.value === button) {
+        isPassword.value = !isPassword.value;
+    } else {
+        isPassword.value = true;
+    }
+    lastClickedButton.value = button;
+};
+
+// const deleteComment = async () => {
+//     if (!confirm("정말 이 댓글을 삭제하시겠습니까?")) return;
+
+//     try {
+//         console.log("댓글 삭제 요청 시작:");
+//         console.log("댓글 ID:", props.comment.commentId);
+//         console.log("게시글 ID:", props.comment.boardId);
+//         console.log("비밀번호 포함 여부:", props.unknown ? "예 (익명 사용자)" : "아니오 (로그인 사용자)");
+
+//         const response = await axios.delete(`board/${props.comment.commentId}`, {
+//             data: { LOCCMTSEQ: props.comment.commentId }
+//         });
+
+//         console.log("📌 서버 응답:", response.data);
+
+//         if (response.data.code === 200) {
+//             console.log("댓글 삭제 성공!");
+//             // emit("commentDeleted", props.comment.commentId);
+//         } else {
+//             console.log("❌ 댓글 삭제 실패:", response.data.message);
+//             // alert("댓글 삭제에 실패했습니다.");
+//         }
+//     } catch (error) {
+//         console.log("🚨 댓글 삭제 중 오류 발생:", error);
+//         alert("댓글 삭제 중 오류가 발생했습니다.");
+//     }
+// };
+
+
+// 비밀번호 제출
+const submitPassword = async () => {
+    if (!password.value) {
+        passwordAlert.value = "비밀번호를 입력해주세요.";
+        return;
+    }
+
+    console.log(props.comment.commentId)
+
+    try {
+        const response = await axios.post(`board/${props.comment.commentId}/password`, {
+            LOCCMTPWD: password.value,
+            LOCCMTSEQ: 288,
+        });
+
+        console.log("응답!!!!!!!!", response);  // 서버 응답 전체 확인
+        console.log("응답 데이터:", response.data);
+
+        if (response.data.code === 200 && response.data.data === true) {
+            console.log('되는거니')
+        //     deleteComment()
+        //     // password.value = '';
+        //     // isPassword.value = false;
+        //     // isEditTextarea.value = true;
+        } else {
+            passwordAlert.value = "비밀번호가 일치하지 않습니다.";
+        }
+    } catch (error) {
+        passwordAlert.value = "비밀번호 검증 중 오류가 발생했습니다.";
+    }
 };
 
-// 수정
 const editedContent = ref(props.comment.content);
-const submitEdit = () => {
-  emit('submitComment', { commentId: props.comment.commentId, content: editedContent.value });
-  emit('toggleEdit', props.comment.commentId, false); // 수정 모드 종료
+
+// 댓글 수정 취소
+const cancelEdit = () => {
+    isEditTextarea.value = false;
 };
 
+// 댓글 수정 내용 저장
+const submitEdit = () => {
+    emit('submitComment', { commentId: props.comment.commentId, content: editedContent.value });
+    isEditTextarea.value = false; // 수정 모드 종료
+};
+
+
 </script>
diff --git a/src/components/board/BoardCommentArea.vue b/src/components/board/BoardCommentArea.vue
index db85f1d..27ada9c 100644
--- a/src/components/board/BoardCommentArea.vue
+++ b/src/components/board/BoardCommentArea.vue
@@ -43,6 +43,7 @@
                             class="form-control flex-grow-1"
                             v-model="password"
                         />
+                        <!-- <span v-if="passwordAlert" class="invalid-feedback d-block text-start">{{ passwordAlert }}</span> -->
                     </div>
                 </div>
 
@@ -74,20 +75,18 @@ const props = defineProps({
 
 const comment = ref('');
 const password = ref('');
-const isCheck = ref(false);
+const isCheck = ref(props.unknown);
 
 const emit = defineEmits(['submitComment']);
 
 watch(() => props.unknown, (newVal) => {
-    if (!newVal) {
-        isCheck.value = false;
-    }
+    isCheck.value = newVal;
 });
 
 function handleCommentSubmit() {
     emit('submitComment', {
         comment: comment.value,
-        password: password.value,
+        password: isCheck.value ? password.value : '',
     });
 
     comment.value = '';
diff --git a/src/components/board/BoardCommentList.vue b/src/components/board/BoardCommentList.vue
index f287e93..1141f6e 100644
--- a/src/components/board/BoardCommentList.vue
+++ b/src/components/board/BoardCommentList.vue
@@ -9,13 +9,14 @@
                 :unknown="unknown"
                 :comment="comment"
                 :isPassword="isPassword"
+                :isEditTextarea="isEditTextarea"
                 @editClick="editClick"
                 @deleteClick="deleteClick"
                 @submitPassword="submitPassword"
                 @submitComment="submitComment"
-                @updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId)"
+                @commentDeleted="handleCommentDeleted"
+                @updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
             />
-                <!-- @updateReaction="handleUpdateReaction" -->
         </li>
     </ul>
 </template>
@@ -38,6 +39,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    isEditTextarea: {
+        type: Boolean,
+        default: false,
+    }
 });
 
 const emit = defineEmits(['submitComment', 'updateReaction', 'editClick']);
@@ -46,17 +51,13 @@ const submitComment = (replyData) => {
     emit('submitComment', replyData);
 };
 
-const handleUpdateReaction = (reactionData, commentId) => {
-    // console.log('📢 BoardCommentList에서 이벤트 수신:', reactionData);
-    // console.log('📌 전달할 댓글 ID>>>>:', commentId);
-
+const handleUpdateReaction = (reactionData, commentId, boardId) => {
     const updatedReactionData = {
         ...reactionData,
-        commentId: commentId
+        commentId: commentId || reactionData.commentId,
+        boardId: boardId || reactionData.boardId,
     };
 
-    // console.log('🚀 최종 전달할 데이터:', updatedReactionData);
-
     emit('updateReaction', updatedReactionData);
 }
 
diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index 34740d2..523356f 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -1,102 +1,104 @@
 <template>
     <div class="container flex-grow-1 container-p-y">
-        <div class="row mb-4">
-            <!-- 검색창 -->
-            <div class="container col-8 px-3">
-                <search-bar @update:data="search" />
-            </div>
-            <!-- 새 글쓰기 -->
-            <div class="container col-2 px-12 py-2">
-                <router-link to="/board/write">
-                    <WriteButton />
-                </router-link>
+        <div class="card">
+            <div class="card-header">
+                <!-- 검색창 -->
+                <div class="container col-6 mt-12 mb-8">
+                    <search-bar @update:data="search" />
+                </div>
             </div>
+            <div class="card-datatable">
+                <div class="row mx-6 my-6 justify-content-between g-3 align-items-center">
+                    <div class="col-md-6 d-flex flex-column flex-md-row align-items-md-center gap-2 mt-0">
+                        <!-- 리스트 갯수 선택 -->
+                        <select class="form-select w-25 w-md-100" v-model="selectedSize" @change="handleSizeChange">
+                            <option value="10">10개씩</option>
+                            <option value="20">20개씩</option>
+                            <option value="30">30개씩</option>
+                            <option value="50">50개씩</option>
+                        </select>
 
-        <div class="row g-3">
-            <!-- 셀렉트 박스 -->
-            <div class="col-12 col-md-auto">
-                <select class="form-select" v-model="selectedOrder" @change="handleSortChange">
-                    <option value="date">최신날짜</option>
-                    <option value="views">조회수</option>
-                </select>
-            </div>
-            <!-- 공지 접기 기능 -->
-            <div class="container col-1 px-0 py-2">
-                <label>
-                    <input type="checkbox" v-model="showNotices" /> 공지 숨기기
-                </label>
-            </div>
-            <!-- 리스트 갯수 선택 -->
-            <div class="container col-1 px-0 py-2">
-                <select class="form-select" v-model="selectedSize" @change="handleSizeChange">
-                    <option value="10">10개씩</option>
-                    <option value="20">20개씩</option>
-                    <option value="30">30개씩</option>
-                    <option value="50">50개씩</option>
-                </select>
-            </div>
-        </div>
-        </div>
-        <br>
-        <!-- 게시판 -->
-        <div class="table-responsive">
-            <table class="table table-bordered">
-                <thead class="table-light">
-                    <tr>
-                        <th style="width: 8%;">번호</th>
-                        <th style="width: 50%;">제목</th>
-                        <th style="width: 15%;">작성자</th>
-                        <th style="width: 12%;">작성일</th>
-                        <th style="width: 10%;">조회수</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <!-- 공지사항 -->
-                    <template v-if="pagination.currentPage === 1 && !showNotices">
-                        <tr v-for="(notice, index) in noticeList"
-                            :key="'notice-' + index"
-                            class="bg-label-gray"
-                            @click="goDetail(notice.id)">
-                            <td>공지</td>
-                            <td>
-                                📌 {{ notice.title }}
-                                <i v-if="notice.img" class="bi bi-image me-1"></i>
-                                <i v-if="notice.hasAttachment" class="bi bi-paperclip"></i>
-                                <span v-if="isNewPost(notice.date)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
-                            </td>
-                            <td>{{ notice.author }}</td>
-                            <td>{{ notice.date }}</td>
-                            <td>{{ notice.views }}</td>
-                        </tr>
-                    </template>
-                    <!-- 일반 게시물 -->
-                    <tr v-for="(post, index) in generalList"
-                        :key="'post-' + index"
-                        class="invert-bg-white"
-                        @click="goDetail(post.realId)">
-                        <td>{{ post.id }}</td>
-                        <td>
-                            {{ post.title }}
-                            <i v-if="post.img" class="bi bi-image me-1"></i>
-                            <i v-if="post.hasAttachment" class="bi bi-paperclip"></i>
-                            <span v-if="isNewPost(post.date)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
-                        </td>
-                        <td>{{ post.author }}</td>
-                        <td>{{ post.date }}</td>
-                        <td>{{ post.views }}</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
+                         <!-- 셀렉트 박스 -->
+                         <select class="form-select w-25 w-md-100" v-model="selectedOrder" @change="handleSortChange">
+                            <option value="date">최신날짜</option>
+                            <option value="views">조회수</option>
+                        </select>
 
-        <!-- 페이지네이션 -->
-        <div class="row g-3">
-            <div class="mt-8">
-                <Pagination
-                    v-if="pagination.pages"
-                    v-bind="pagination"
-                    @update:currentPage="handlePageChange"
-                />
+                        <!-- 공지 접기 기능 -->
+                        <div class="form-check mb-0 ms-2">
+                            <input class="form-check-input" type="checkbox" v-model="showNotices" id="hideNotices" />
+                            <label class="form-check-label" for="hideNotices">공지 숨기기</label>
+                        </div>
+                    </div>
+                    <div class="col-md-6 d-flex flex-column flex-md-row align-items-md-center justify-content-md-end gap-2">
+                        <!-- 새 글쓰기 -->
+                        <router-link to="/board/write" class="ms-2">
+                            <WriteButton class="btn add-new btn-primary"/>
+                        </router-link>
+                    </div>
+                </div>
+                <!-- 게시판 -->
+                <div class="table-responsive">
+                    <table class="datatables-users table border-top dataTable dtr-column">
+                        <thead>
+                            <tr>
+                                <th style="width: 11%;" class="text-center">번호</th>
+                                <th style="width: 45%;" class="text-center">제목</th>
+                                <th style="width: 10%;" class="text-center">작성자</th>
+                                <th style="width: 15%;" class="text-center">작성일</th>
+                                <th style="width: 9%;" class="text-center">조회수</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <!-- 공지사항 -->
+                            <template v-if="pagination.currentPage === 1 && !showNotices">
+                                <tr v-for="(notice, index) in noticeList"
+                                    :key="'notice-' + index"
+                                    class="bg-label-gray"
+                                    @click="goDetail(notice.id)">
+                                    <td class="text-center">공지</td>
+                                    <td>
+                                        📌 {{ notice.title }}
+                                        <i v-if="notice.img" class="bi bi-image me-1"></i>
+                                        <i v-if="notice.hasAttachment" class="bi bi-paperclip"></i>
+                                        <span v-if="isNewPost(notice.date)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
+                                    </td>
+                                    <td class="text-center">{{ notice.author }}</td>
+                                    <td class="text-center">{{ notice.date }}</td>
+                                    <td class="text-center">{{ notice.views }}</td>
+                                </tr>
+                            </template>
+                            <!-- 일반 게시물 -->
+                            <tr v-for="(post, index) in generalList"
+                                :key="'post-' + index"
+                                class="invert-bg-white"
+                                @click="goDetail(post.realId)">
+                                <td class="text-center">{{ post.id }}</td>
+                                <td>
+                                    {{ post.title }}
+                                    <i v-if="post.img" class="bi bi-image me-1"></i>
+                                    <i v-if="post.hasAttachment" class="bi bi-paperclip"></i>
+                                    <span v-if="isNewPost(post.date)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
+                                </td>
+                                <td class="text-center">{{ post.author }}</td>
+                                <td class="text-center">{{ post.date }}</td>
+                                <td class="text-center">{{ post.views }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="card-footer">
+                <!-- 페이지네이션 -->
+                <div class="row g-3">
+                    <div class="mt-8">
+                        <Pagination
+                            v-if="pagination.pages"
+                            v-bind="pagination"
+                            @update:currentPage="handlePageChange"
+                        />
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -262,4 +264,9 @@ onMounted(() => {
 </script>
 
 <style scoped>
+    @media (max-width: 768px) {
+        .w-md-100 {
+            width: 100% !important;
+        }
+    }
 </style>
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index 2559318..dcb5d40 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -5,22 +5,34 @@
                 <div class="card">
                     <!-- 프로필 헤더 -->
                     <div class="card-header">
-                        <BoardProfile
-                            :boardId="currentBoardId"
-                            :profileName="profileName"
-                            :unknown="unknown"
-                            :author="isAuthor"
-                            :views="views"
-                            :commentNum="commentNum"
-                            :date="formattedBoardDate"
-                            :isLike="false"
-                            :isPassword="isPassword"
-                            :passwordAlert="passwordAlert"
-                            @editClick="editClick"
-                            @deleteClick="deleteClick"
-                            @submitPassword="submitPassword"
-                            class="pb-6 border-bottom"
-                        />
+                        <div class="pb-5 border-bottom">
+                            <BoardProfile
+                                :boardId="currentBoardId"
+                                :profileName="profileName"
+                                :unknown="unknown"
+                                :author="isAuthor"
+                                :views="views"
+                                :commentNum="commentNum"
+                                :date="formattedBoardDate"
+                                :isLike="false"
+                                @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">
@@ -86,13 +98,9 @@
                         <BoardCommentList
                             :unknown="unknown"
                             :comments="comments"
-                            :isEditTextarea="isEditTextarea"
-                            :isPassword="isPassword"
-                            @editClick="editClick"
-                            @deleteClick="deleteClick"
-                            @submitPassword="submitPassword"
-                            @updateReaction="handleUpdateReaction"
+                            @updateReaction="handleCommentReaction"
                             @submitComment="handleCommentReply"
+                            @commentDeleted="handleCommentDeleted"
                         />
                         <Pagination
                             v-if="pagination.pages"
@@ -139,8 +147,8 @@ const authorId = ref(null); // 작성자 id
 
 const isAuthor = computed(() => currentUserId.value === authorId.value);
 
-const isEditTextarea = ref({});
 
+const password = ref('');
 const passwordAlert = ref("");
 const isPassword = ref(false);
 const lastClickedButton = ref("");
@@ -195,15 +203,13 @@ const fetchBoardDetails = async () => {
 // 좋아요, 싫어요
 const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) => {
     try {
-        const aa = await axios.post(`/board/${boardId}/${commentId}/reaction`, {
+        await axios.post(`/board/${boardId}/${commentId}/reaction`, {
             LOCBRDSEQ: boardId, // 게시글 id
             LOCCMTSEQ: commentId, //댓글 id
             // MEMBERSEQ: 1, // 멤버아이디 지금은 1 나중에 수정해야함
             LOCGOBGOD: isLike ? 'T' : 'F',
             LOCGOBBAD: isDislike ? 'T' : 'F'
         });
-        console.log("좋아요 API 응답 데이터:", aa.data);
-
 
         const response = await axios.get(`board/${boardId}`);
         const updatedData = response.data.data;
@@ -215,52 +221,91 @@ const handleUpdateReaction = async ({ boardId, commentId, isLike, isDislike }) =
         dislikeClicked.value = isDislike;
         // console.log(updatedData)
 
+        // console.log("갱신된 데이터:", updatedData);
+
     } catch (error) {
         alert('반응을 업데이트하는 중 오류 발생');
     }
 };
 
+
+// 대댓글 좋아요
+const handleCommentReaction = async ({ boardId, commentId, isLike, isDislike }) => {
+    if (!commentId) return; // 댓글 ID가 없으면 실행 안 함
+
+    try {
+        const response = await axios.post(`/board/${boardId}/${commentId}/reaction`, {
+            LOCBRDSEQ: boardId,  // 게시글 ID
+            LOCCMTSEQ: commentId, // 댓글 ID
+            LOCGOBGOD: isLike ? 'T' : 'F',
+            LOCGOBBAD: isDislike ? 'T' : 'F'
+        });
+
+        console.log("댓글 좋아요 API 응답 데이터:", response.data);
+
+        // 좋아요/싫어요 상태 업데이트를 위해 새로 불러오기
+        await fetchComments();
+
+    } catch (error) {
+        alert('댓글 반응을 업데이트하는 중 오류 발생');
+    }
+};
+
 // 댓글 목록 조회
 const fetchComments = async (page  = 1) => {
     try {
+        // 댓글
         const response = await axios.get(`board/${currentBoardId.value}/comments`, {
             params: {
                 LOCBRDSEQ: currentBoardId.value,
                 page
             }
         });
-        console.log("목록 API 응답 데이터:", response.data);
 
-        let allComments = response.data.data.list.map(comment => ({
-            commentId: comment.LOCCMTSEQ, // 댓글 id
+        const commentsList = response.data.data.list.map(comment => ({
+            commentId: comment.LOCCMTSEQ, // 댓글 ID
             boardId: comment.LOCBRDSEQ,
-            parentId: comment.LOCCMTPNT, // 부모 id
-            author: comment.author || "익명 사용자", // 작성자
-            content: comment.LOCCMTRPY, // 댓글 내용
-            createdAt: formattedDate(comment.LOCCMTRDT), // 생성 날짜
-            children: []
+            parentId: comment.LOCCMTPNT, // 부모 ID
+            author: comment.author || "익명 사용자",
+            content: comment.LOCCMTRPY,
+            likeCount: comment.likeCount || 0,
+            dislikeCount: comment.dislikeCount || 0,
+            likeClicked: comment.likeClicked || false,
+            dislikeClicked: comment.dislikeClicked || false,
+            createdAtRaw: new Date(comment.LOCCMTRDT), // 정렬용
+            createdAt: formattedDate(comment.LOCCMTRDT), // 표시용
+            children: [] // 대댓글을 담을 배열
         }));
 
-        allComments.sort((a, b) => b.commentId - a.commentId);
+        for (const comment of commentsList) {
+            if (!comment.commentId) continue;
 
-        let commentMap = {};
-        let rootComments = [];
+            const replyResponse = await axios.get(`board/${currentBoardId.value}/reply`, {
+                params: { LOCCMTPNT: comment.commentId }
+            });
 
-        allComments.forEach(comment => {
-            commentMap[comment.commentId] = comment;
-        });
+            // console.log(`📌 대댓글 데이터 (${comment.commentId}의 대댓글):`, replyResponse.data);
 
-        allComments.forEach(comment => {
-            if (comment.parentId && commentMap[comment.parentId]) {
-                commentMap[comment.parentId].children.push(comment);
+            if (replyResponse.data.data) {
+                comment.children = replyResponse.data.data.map(reply => ({
+                    commentId: reply.LOCCMTSEQ,
+                    boardId: reply.LOCBRDSEQ,
+                    parentId: reply.LOCCMTPNT, // 부모 댓글 ID
+                    content: reply.LOCCMTRPY || "내용 없음",
+                    createdAtRaw: new Date(reply.LOCCMTRDT),
+                    createdAt: formattedDate(reply.LOCCMTRDT),
+                    likeCount: reply.likeCount || 0,
+                    dislikeCount: reply.dislikeCount || 0,
+                    likeClicked: false,
+                    dislikeClicked: false
+                }));
             } else {
-                rootComments.push(comment);
+                comment.children = []; // 대댓글이 없으면 빈 배열로 초기화
             }
-        });
+        }
 
-        comments.value = rootComments;
-
-        // console.log("변환된 comments 데이터:", comments.value);
+        // 최종적으로 댓글 목록 업데이트
+        comments.value = commentsList;
 
         pagination.value = {
             ...pagination.value,
@@ -278,51 +323,90 @@ const fetchComments = async (page  = 1) => {
             navigateLastPage: response.data.data.navigateLastPage // 페이지네이션에서 마지막 페이지 번호
         };
 
+        console.log("📌 댓글 목록:", comments.value);
+
+
     } catch (error) {
-        console.error('댓글 목록 불러오기 오류:', error);
+        console.log('댓글 목록 불러오기 오류:', error);
     }
 };
 
 // 댓글 작성
 const handleCommentSubmit = async ({ comment, password }) => {
+    // if (unknown.value && !password) {
+    //     passwordAlert.value = "익명 사용자는 비밀번호를 입력해야 합니다."; // UI에 메시지 표시
+    //     return;
+    // }
+    // if (!password) {
+    //     passwordAlert.value = "비밀번호를 입력해야 합니다."; // UI에서 경고 표시
+    //     return;
+    // }
+
+
     try {
         const response = await axios.post(`board/${currentBoardId.value}/comment`, {
             LOCBRDSEQ: currentBoardId.value,
             LOCCMTRPY: comment,
-            LOCCMTPWD: password || null,
+            LOCCMTPWD: password,
             LOCCMTPNT: 1
         });
-        // console.log('📥 서버 응답 전체:', response.data);
+        // console.log('서버 응답 전체1212121212:', response.data);
 
         if (response.status === 200) {
             console.log('댓글 작성 성공:', response.data.message);
             await fetchComments();
         } else {
-            console.error('댓글 작성 실패:', response.data.message);
+            console.log('댓글 작성 실패:', response.data.message);
         }
     } catch (error) {
-        console.error('댓글 작성 중 오류 발생:', error);
+        console.log('댓글 작성 중 오류 발생:', error);
     }
 };
 
-const handleCommentReply = async (reply) => {
-    const response = await axios.post(`board/${currentBoardId.value}/comment`, {
-        LOCBRDSEQ: currentBoardId.value,
-        LOCCMTRPY: reply.comment,
-        LOCCMTPWD: reply.password || null,
-        LOCCMTPNT: reply.parentId
-    });
 
-    if (response.status === 200) {
-        console.log('대댓글 작성 성공:', response.data.message);
-        await fetchComments();
-    } else {
-        console.error('대댓글 작성 실패:', response.data.message);
+// 대댓글 작성
+const handleCommentReply = async (reply) => {
+    try {
+        console.log('대댓글 작성 요청 데이터:', {
+            LOCBRDSEQ: currentBoardId.value,
+            LOCCMTRPY: reply.comment,
+            LOCCMTPWD: reply.password || null,
+            LOCCMTPNT: reply.parentId
+        });
+
+        const response = await axios.post(`board/${currentBoardId.value}/comment`, {
+            LOCBRDSEQ: currentBoardId.value,
+            LOCCMTRPY: reply.comment,
+            LOCCMTPWD: reply.password || null,
+            LOCCMTPNT: reply.parentId
+        });
+
+        // 응답 데이터를 자세히 로그로 확인
+        console.log('대댓글 작성 응답:', {
+            status: response.status,
+            data: response.data,
+            headers: response.headers
+        });
+
+        if (response.status === 200) {
+            if (response.data.code === 200) {  // 서버 응답 코드도 확인
+                console.log('대댓글 작성 성공:', response.data);
+                await fetchComments();  // 댓글 목록 새로고침
+            } else {
+                console.log('대댓글 작성 실패 - 서버 응답:', response.data);
+                alert('대댓글 작성에 실패했습니다.');
+            }
+        }
+    } catch (error) {
+        console.error('대댓글 작성 중 오류 발생:', error);
+        if (error.response) {
+            console.error('서버 응답 에러:', error.response.data);
+        }
+        alert('대댓글 작성 중 오류가 발생했습니다.');
     }
 }
 
 const editClick = (unknown) => {
-
     if (unknown) {
         togglePassword("edit");
     } else {
@@ -348,24 +432,23 @@ const togglePassword = (button) => {
 };
 
 
-const submitPassword = async (inputPassword) => {
-    console.log(inputPassword)
-    if (!inputPassword) {
+const submitPassword = async () => {
+    if (!password.value) {
         passwordAlert.value = "비밀번호를 입력해주세요.";
         return;
     }
 
+    // console.log("📌 요청 시작: submitPassword 실행됨");
+
     try {
-        const requestData = {
-            LOCBRDPWD: inputPassword,
-            LOCBRDSEQ: 288
-        };
+        const response = await axios.post(`board/${currentBoardId.value}/password`, {
+            LOCBRDPWD: password.value,
+            LOCBRDSEQ: 288, // 나중에 현재 게시글 ID 사용해야함
+        });
 
-        const postResponse = await axios.post(`board/${currentBoardId.value}/password`, requestData);
-
-        if (postResponse.data.code === 200 && postResponse.data.data === true) {
+        if (response.data.code === 200 && response.data.data === true) {
+            password.value = '';
             isPassword.value = false;
-            passwordAlert.value = "";
 
             if (lastClickedButton.value === "edit") {
                 router.push({ name: "BoardEdit", params: { id: currentBoardId.value } });
@@ -374,15 +457,21 @@ const submitPassword = async (inputPassword) => {
             }
             lastClickedButton.value = null;
         } else {
-            passwordAlert.value = "비밀번호가 일치하지 않습니다.";
+            passwordAlert.value = "비밀번호가 일치하지 않습니다.????";
         }
     } catch (error) {
-        if (error.response && error.response.status === 401) {
-            passwordAlert.value = "비밀번호가 일치하지 않습니다.";
-        } else if (error.response) {
-            alert(`오류 발생: ${error.response.data.message || "서버 오류"}`);
+        // console.log("📌 전체 오류:", error);
+
+        if (error.response) {
+            if (error.response.status === 401) {
+                passwordAlert.value = "비밀번호가 일치하지 않습니다.";
+            } else {
+                passwordAlert.value = error.response.data?.message || "서버 오류가 발생했습니다.";
+            }
+        } else if (error.request) {
+            passwordAlert.value = "네트워크 오류가 발생했습니다. 다시 시도해주세요.";
         } else {
-            alert("네트워크 오류가 발생했습니다. 다시 시도해주세요.");
+            passwordAlert.value = "요청 중 알 수 없는 오류가 발생했습니다.";
         }
     }
 };
@@ -418,6 +507,10 @@ const handlePageChange = (page) => {
     }
 };
 
+const handleCommentDeleted = (deletedCommentId) => {
+    comments.value = comments.value.filter(comment => comment.commentId !== deletedCommentId);
+};
+
 // 날짜
 const formattedDate = (dateString) => {
     if (!dateString) return "날짜 없음";
diff --git a/src/views/vacation/VacationManagement.vue b/src/views/vacation/VacationManagement.vue
index 2412d73..1d6eda5 100644
--- a/src/views/vacation/VacationManagement.vue
+++ b/src/views/vacation/VacationManagement.vue
@@ -195,9 +195,10 @@ function updateCalendarEvents() {
     .map(([date, type]) => ({
       title: getVacationType(type),
       start: date,
-      backgroundColor: "rgba(0, 128, 0, 0.3)",
+      backgroundColor: "rgb(113 212 243 / 76%)",
+      textColor: "#fff", // 흰색 텍스트
       display: "background",
-      classNames: [getVacationTypeClass(type)]
+      classNames: [getVacationTypeClass(type), "selected-event"]
     }));
 
   // 기존 백엔드에서 불러온 저장된 연차 이벤트 중,
@@ -340,10 +341,6 @@ halfDayType.value = halfDayType.value === type ? null : type;
     return typeof id === "number" ? Number(id) : id;
   });
 
-
-  console.log("vacationsToAdd:", vacationsToAdd);
-  console.log("vacationsToDelete:", vacationsToDelete);
-
   try {
     const response = await axios.post("vacation/batchUpdate", {
       add: vacationsToAdd,
@@ -424,5 +421,7 @@ await loadCalendarData(year, month);
 </script>
 
 <style>
+.fc-bg-event{
 
+}
 </style>