Merge remote-tracking branch 'origin/main' into board-comment

src/components/board/BoardComment.vue

@@ -118,6 +118,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 });

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 정의

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

src/components/list/ProjectCard.vue

@@ -37,20 +37,14 @@
     <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="border border-3 rounded p-5 ms-4 mt-2" 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>
+                <strong>[{{ logData.updater }}] 프로젝트 수정</strong>
-                </div>
             </div>
 
         </template>

src/components/list/ProjectCardList.vue

@@ -1,190 +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"
-                    v-model="selectedProject.PROJCTCOL"
-                />
-
-                <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 } 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;
-
-        originalColor.value = post.PROJCTCOL;
-        selectedProject.value = { ...post };
-    };
-
-    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 = () => {
-
-        console.log(selectedProject.value.PROJCTCOL)
-        console.log(originalColor.value)
-
-        $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>

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") {

src/components/modal/VacationModal.vue

@@ -4,28 +4,35 @@
         <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">
+            <li
-                        <span v-if="vacation.type === 'used'" class="vacation-index">
+              v-for="(vac, index) in mergedVacations"
-                            {{ getVacationIndex(index) }})
+              :key="vac._expandIndex"
+              class="vacation-item"
+            >
+              <!-- Used 항목만 인덱스 표시 -->
+              <span v-if="vac.category === 'used'" class="vacation-index">
+                {{ usedVacationIndexMap[vac._expandIndex] }})
               </span>
-                        <span :class="vacation.type === 'used' ? 'minus-symbol' : 'plus-symbol'">
+
-                            {{ vacation.type === 'used' ? '-' : '+' }}
+              <span :class="vac.category === 'used' ? 'minus-symbol' : 'plus-symbol'">
+                {{ vac.category === 'used' ? '-' : '+' }}
               </span>
+
               <span
-                            :style="{ color: userColors[vacation.senderId || vacation.receiverId] || '#000' }"
+                :style="{ color: userColors[vac.senderId || vac.receiverId] || '#000' }"
                 class="vacation-date"
               >
-                            {{ formatDate(vacation.date) }}
+                {{ formatDate(vac.date) }}
               </span>
             </li>
           </ol>
         </div>
 
         <!-- 연차 데이터 없음 -->
-            <p v-if="mergedVacations.length === 0" class="no-data">
+        <p v-else class="no-data">
           🚫 사용한 연차가 없습니다.
         </p>
       </div>
@@ -53,60 +60,101 @@ const props = defineProps({
 
 const emit = defineEmits(["close"]);
 
-// ✅ 사용한 연차 + 받은 연차 통합 후 내림차순 정렬
+/**
-const usedVacations = computed(() =>
+ * 1) Used 휴가를 used_quota만큼 펼치기
-    props.myVacations.map(v => ({ ...v, type: "used" }))
+ *    - category: "used"
-);
+ *    - code: 휴가 코드(예: LOCVACTYP)
-
+ *    - _expandIndex: 각 항목마다 고유한 확장 인덱스 (누적 인덱스 매핑에 사용)
-const receivedVacations = computed(() =>
+ */
-    props.receivedVacations.map(v => ({ ...v, type: "received" }))
+let globalCounter = 0; // 확장 시 사용할 전역 카운터
-);
+const usedVacations = computed(() => {
-
+  const result = [];
-// ✅ 정확한 정렬 및 리스트 병합
+  props.myVacations.forEach((v) => {
-const mergedVacations = computed(() => {
+    const count = v.used_quota || 1;
-    return [...usedVacations.value, ...receivedVacations.value].sort(
+    for (let i = 0; i < count; i++) {
-        (a, b) => new Date(b.date) - new Date(a.date)
+      result.push({
-    );
+        ...v,
+        category: "used",
+        code: v.LOCVACTYP,         // 휴가 코드 (700103 등)
+        _expandIndex: globalCounter++,
+      });
+    }
+  });
+  return result;
 });
 
-// ✅ 연차 개수 반영된 인덱스 반환 (누적 합산)
+/**
-const getVacationIndex = (index) => {
+ * 2) Received 휴가: category: "received"
-    let count = 0;
+ */
-    for (let i = 0; i <= index; i++) {
+const receivedVacations = computed(() =>
-        const v = mergedVacations.value[i];
+  props.receivedVacations.map((v) => ({
-        count += v.used_quota; // 누적하여 더함
+    ...v,
-    }
+    category: "received",
-    return count;
+  }))
-};
+);
 
-// ✅ 날짜 형식 변환 (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);
+  if (!dateString) return "";
-    return date.toISOString().split("T")[0]; // YYYY-MM-DD 형식
+  // 만약 dateString이 "YYYY-MM-DD" 형식이라면 그대로 반환
+  // 혹은 "YYYY-MM-DD..." 라면 앞 10자만 잘라 반환
+  return dateString.substring(0, 10);
 };
 
+
+/** 모달 닫기 */
 const closeModal = () => {
   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%;
     background: white;
-    border-radius: 8px;
+    padding: 20px;
-    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+    border-radius: 12px;
+    width: 400px;
+    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15);
+    text-align: center;
+    position: relative;
   }
 
   /* 닫기 버튼 */
@@ -118,7 +166,6 @@ const closeModal = () => {
     border: none;
     font-size: 18px;
     cursor: pointer;
-    font-weight: bold;
   }
 
   /* 리스트 기본 스타일 */
@@ -168,14 +215,6 @@ const closeModal = () => {
     color: #333;
   }
 
-/* 연차 유형 스타일 */
-.vacation-type {
-    font-size: 14px;
-    font-weight: normal;
-    color: gray;
-    margin-left: 5px;
-}
-
   /* 연차 데이터 없음 */
   .no-data {
     text-align: center;

src/components/projectlist/ProjectList.vue

@@ -1,9 +1,31 @@
 <template>
-    <SearchBar />
+    <SearchBar @update:data="search"/>
     <div class="d-flex align-items-center">
-        <CategoryBtn :lists="yearCategory" v-model:selectedCategory="selectedCategory" />
+        <CategoryBtn :lists="yearCategory" @update:data="selectedCategory = $event" />
-        <WriteBtn class="mt-2 ms-auto" @click="openModal" />
+        <WriteBtn class="mt-2 ms-auto" @click="openCreateModal" />
-        <CenterModal :display="isModalOpen" @close="closeModal">
+    </div>
+
+    <!-- 프로젝트 목록 -->
+    <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
@@ -56,38 +78,106 @@
             />
         </template>
         <template #footer>
-                <button class="btn btn-secondary" @click="closeModal">Close</button>
+            <BackButton @click="closeCreateModal" />
-                <button class="btn btn-primary" @click="handleSubmit">Save</button>
+            <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>
-    </div>
-    <ProjectCardList :category="selectedCategory" />
 </template>
 
 <script setup>
+import { computed, inject, ref, watch, onMounted } from 'vue';
 import SearchBar from '@c/search/SearchBar.vue';
-    import ProjectCardList from '@c/list/ProjectCardList.vue';
+import ProjectCard from '@c/list/ProjectCard.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 commonApi from '@/common/commonApi';
 import { useToastStore } from '@s/toastStore';
-    import $api from '@api';
 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 today = dayjs().format('YYYY-MM-DD');
-
 const toastStore = useToastStore();
 const userStore = useUserInfoStore();
 
+// 상태 관리
 const user = ref(null);
+const projectList = ref([]);
+const filteredProjects = ref([]);
+const selectedCategory = ref(null);
+const searchText = ref('');
 
+// 등록 모달 상태
+const isCreateModalOpen = ref(false);
 const name = ref('');
 const color = ref('');
 const address = ref('');
@@ -96,43 +186,80 @@
 const startDay = ref(today);
 const endDay = ref('');
 const description = ref('');
-
-    const isModalOpen = ref(false);
 const nameAlert = ref(false);
 const addressAlert = ref(false);
 
-    const openModal = () => {
+// 수정 모달 상태
-        isModalOpen.value = true;
+const isEditModalOpen = ref(false);
-    };
+const originalColor = ref('');
-
+const selectedProject = ref({
-    const closeModal = () => {
+    PROJCTSEQ: '',
-        isModalOpen.value = false;
+    PROJCTNAM: '',
-    };
+    PROJCTSTR: '',
-
+    PROJCTEND: '',
-
+    PROJCTZIP: '',
-    const selectedCategory = ref(null);
+    PROJCTARR: '',
+    PROJCTDTL: '',
+    PROJCTDES: '',
+    PROJCTCOL: '',
+    projctcolor: '',
+});
 
+// API 호출
 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 search = async (searchKeyword) => {
+    searchText.value = searchKeyword.trim();
+    await getProjectList();
+};
+
+const selectedYear = computed(() => {
+    if (!selectedCategory.value || selectedCategory.value === 900101) {
+        return null;
+    }
+    // 선택된 category 값 label 값으로 변환
+    return yearCategory.value.find(item => item.value === selectedCategory.value)?.label || null;
+});
+
+
+// 카테고리 변경 감지
+watch(selectedCategory, async () => {
+    await getProjectList();
+});
+
+// 등록 모달 관리
+const openCreateModal = () => {
+    isCreateModalOpen.value = true;
+};
+
+const closeCreateModal = () => {
+    isCreateModalOpen.value = false;
+};
+
+// 등록 :: 주소 업데이트 핸들러
 const handleAddressUpdate = addressData => {
     address.value = addressData.address;
     detailAddress.value = addressData.detailAddress;
     postcode.value = addressData.postcode;
 };
 
-
+const handleCreate = async () => {
-    onMounted(async () => {
-        await userStore.userInfo(); // 로그인한 사용자 정보
-        user.value = userStore.user;
-    });
-
-    const handleSubmit = async () => {
-
     nameAlert.value = name.value.trim() === '';
     addressAlert.value = address.value.trim() === '';
 
@@ -154,10 +281,86 @@
     .then(res => {
         if (res.status === 200) {
             toastStore.onToast('프로젝트가 등록되었습니다.', 's');
-                closeModal();
+            closeCreateModal();
             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>

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"

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 <= 7) return "100px"; // 7명 이하
-    if (totalUsers <= 10) return "100px"; // ~10명
+    if (totalUsers <= 10) return "80px"; // ~10명
-    if (totalUsers <= 20) return "80px"; // ~20명
+    if (totalUsers <= 20) return "60px"; // ~20명
-    return "60px"; // 20명 이상
+    return "40px"; // 20명 이상
   });
 
   // 개별 유저 스타일 적용

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 {

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>

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) => {
@@ -124,7 +141,7 @@ 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,
     };

src/views/board/BoardList.vue

@@ -1,53 +1,52 @@
 <template>
     <div class="container flex-grow-1 container-p-y">
-        <div class="row mb-4">
+        <div class="card">
+            <div class="card-header">
                 <!-- 검색창 -->
-            <div class="container col-8 px-3">
+                <div class="container col-6 mt-12 mb-8">
                     <search-bar @update:data="search" />
                 </div>
-            <!-- 새 글쓰기 -->
-            <div class="container col-2 px-12 py-2">
-                <router-link to="/board/write">
-                    <WriteButton />
-                </router-link>
-            </div>
-
-        <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="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">
                         <!-- 리스트 갯수 선택 -->
-            <div class="container col-1 px-0 py-2">
+                        <select class="form-select w-25 w-md-100" v-model="selectedSize" @change="handleSizeChange">
-                <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>
+
+                         <!-- 셀렉트 박스 -->
+                         <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="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>
-        <br>
                 <!-- 게시판 -->
                 <div class="table-responsive">
-            <table class="table table-bordered">
+                    <table class="datatables-users table border-top dataTable dtr-column">
-                <thead class="table-light">
+                        <thead>
                             <tr>
-                        <th style="width: 8%;">번호</th>
+                                <th style="width: 11%;" class="text-center">번호</th>
-                        <th style="width: 50%;">제목</th>
+                                <th style="width: 45%;" class="text-center">제목</th>
-                        <th style="width: 15%;">작성자</th>
+                                <th style="width: 10%;" class="text-center">작성자</th>
-                        <th style="width: 12%;">작성일</th>
+                                <th style="width: 15%;" class="text-center">작성일</th>
-                        <th style="width: 10%;">조회수</th>
+                                <th style="width: 9%;" class="text-center">조회수</th>
                             </tr>
                         </thead>
                         <tbody>
@@ -57,16 +56,16 @@
                                     :key="'notice-' + index"
                                     class="bg-label-gray"
                                     @click="goDetail(notice.id)">
-                            <td>공지</td>
+                                    <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>{{ notice.author }}</td>
+                                    <td class="text-center">{{ notice.author }}</td>
-                            <td>{{ notice.date }}</td>
+                                    <td class="text-center">{{ notice.date }}</td>
-                            <td>{{ notice.views }}</td>
+                                    <td class="text-center">{{ notice.views }}</td>
                                 </tr>
                             </template>
                             <!-- 일반 게시물 -->
@@ -74,21 +73,22 @@
                                 :key="'post-' + index"
                                 class="invert-bg-white"
                                 @click="goDetail(post.realId)">
-                        <td>{{ post.id }}</td>
+                                <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>{{ post.author }}</td>
+                                <td class="text-center">{{ post.author }}</td>
-                        <td>{{ post.date }}</td>
+                                <td class="text-center">{{ post.date }}</td>
-                        <td>{{ post.views }}</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">
@@ -100,6 +100,8 @@
                     </div>
                 </div>
             </div>
+        </div>
+    </div>
 </template>
 
 <script setup>
@@ -262,4 +264,9 @@ onMounted(() => {
 </script>
 
 <style scoped>
+    @media (max-width: 768px) {
+        .w-md-100 {
+            width: 100% !important;
+        }
+    }
 </style>

src/views/board/BoardView.vue

@@ -98,6 +98,7 @@
                         <BoardCommentList
                             :unknown="unknown"
                             :comments="comments"
+<<<<<<< HEAD
                             :isCommentPassword="isCommentPassword"
                             :isEditTextarea="isEditTextarea"
                             :passwordAlert="passwordAlert"
@@ -109,6 +110,11 @@
                             @commentDeleted="handleCommentDeleted"
                             @cancelEdit="handleCancelEdit"
                             @submitEdit="handleSubmitEdit"
+=======
+                            @updateReaction="handleCommentReaction"
+                            @submitComment="handleCommentReply"
+                            @commentDeleted="handleCommentDeleted"
+>>>>>>> origin/main
                         />
                         <Pagination
                             v-if="pagination.pages"
@@ -516,7 +522,7 @@ const submitPassword = async () => {
             }
             lastClickedButton.value = null;
         } else {
-            passwordAlert.value = "비밀번호가 일치하지 않습니다.";
+            passwordAlert.value = "비밀번호가 일치하지 않습니다.????";
         }
     } catch (error) {
         // console.log("📌 전체 오류:", error);

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,29 @@ 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]) => {
+  // 신규 선택한 연차(추가 대상): type이 "delete"가 아닌 항목
-    return {
+  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)",
+      backgroundColor: "rgb(113 212 243 / 76%)",
+      textColor: "#fff", // 흰색 텍스트
       display: "background",
-    classNames: [getVacationTypeClass(type)],
+      classNames: [getVacationTypeClass(type), "selected-event"]
-    };
+    }));
+
+  // 기존 백엔드에서 불러온 저장된 연차 이벤트 중,
+  // 해당 날짜가 삭제 대상으로 표시되어 있으면 제거
+  const filteredFetchedEvents = fetchedEvents.value.filter(event => {
+    if (event.saved) { // saved 플래그가 있는 이벤트는 저장된 연차
+      return selectedDates.value.get(event.start) !== "delete";
+    }
+    return true;
   });
-calendarEvents.value = [...fetchedEvents.value, ...selectedEvents];
+  calendarEvents.value = [...filteredFetchedEvents, ...selectedEvents];
 }
 
 /**
@@ -222,27 +227,43 @@ calendarEvents.value = [...fetchedEvents.value, ...selectedEvents];
  * - 클릭 시 해당 날짜를 selectedDates에 추가 또는 제거한 후 updateCalendarEvents() 호출
  */
  function handleDateClick(info) {
-const clickedDateStr = info.dateStr;
+  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)) {
+  // 토글: 이미 선택된 날짜라면 해제
+  if (selectedDates.value.has(clickedDateStr)) {
+    selectedDates.value.delete(clickedDateStr);
+    updateCalendarEvents();
     return;
   }
-if (!selectedDates.value.has(clickedDateStr)) {
+
+  // 저장된(보낸사람 없는) 연차가 있는지 확인
+  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"
+      ? (halfDayType.value === "AM" ? "700101" : "700102")
-        ? "700101"
-        : "700102"
       : "700103";
     selectedDates.value.set(clickedDateStr, type);
-} else {
-    selectedDates.value.delete(clickedDateStr);
   }
+
   halfDayType.value = null;
   updateCalendarEvents();
 }
@@ -260,18 +281,24 @@ halfDayType.value = halfDayType.value === type ? null : type;
  async function fetchVacationData(year, month) {
   try {
     const response = await axios.get(`vacation/list/${year}/${month}`);
-    if (response.status == 200) {
+    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 {
             title: getVacationType(vac.LOCVACTYP),
             start: dateStr,
             backgroundColor,
             classNames: [getVacationTypeClass(vac.LOCVACTYP)],
+            saved: true, // saved 플래그 추가
           };
         })
         .filter((event) => event !== null);
@@ -289,33 +316,50 @@ try {
 /**
  * 휴가 요청 추가 (선택된 날짜를 백엔드로 전송)
  */
-async function addVacationRequests() {
+ async function saveVacationChanges() {
-if (selectedDates.value.size === 0) {
+  // 추가할 연차: selectedDates 항목 중 type이 "delete"가 아닌 경우
-    alert("휴가를 선택해주세요.");
+  const selectedDatesArray = Array.from(selectedDates.value);
-    return;
+  const vacationsToAdd = selectedDatesArray
-}
+    .filter(([date, type]) => type !== "delete")
-const vacationRequests = Array.from(selectedDates.value).map(([date, type]) => ({
+    .filter(([date, type]) =>
-    date,
+      // 기존 데이터에 없거나, 기존 데이터에 있더라도 보낸사람(LOCVACRMM)이 있는 경우 추가
-    type,
+      !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;
+  });
+
   try {
-    const response = await axios.post("vacation", vacationRequests);
+    const response = await axios.post("vacation/batchUpdate", {
+      add: vacationsToAdd,
+      delete: vacationsToDelete
+    });
     if (response.data && response.data.status === "OK") {
-    alert("휴가가 저장되었습니다.");
+      alert("✅ 휴가 변경 사항이 저장되었습니다.");
       await fetchRemainingVacation();
-    // 저장 후 현재 달 데이터 다시 불러오기
       const currentDate = fullCalendarRef.value.getApi().getDate();
-    const year = currentDate.getFullYear();
+      await loadCalendarData(currentDate.getFullYear(), currentDate.getMonth() + 1);
-    const month = String(currentDate.getMonth() + 1).padStart(2, "0");
+      // 초기화: 선택한 날짜 해제
-    loadCalendarData(year, month);
       selectedDates.value.clear();
       updateCalendarEvents();
     } else {
-    alert("휴가 저장 중 오류가 발생했습니다.");
+      alert("❌ 휴가 저장 중 오류가 발생했습니다.");
     }
   } catch (error) {
-    console.error(error);
+    console.error("🚨 휴가 변경 저장 실패:", error);
-    alert("휴가 저장에 실패했습니다.");
+    alert("❌ 휴가 저장 요청에 실패했습니다.");
   }
 }
 
@@ -377,5 +421,7 @@ await loadCalendarData(year, month);
 </script>
 
 <style>
+.fc-bg-event{
 
+}
 </style>

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">
@@ -50,6 +50,7 @@
                     :item="item"
                     :cateList="cateList"
                     @refreshWordList="getwordList"
+                    @updateChecked="updateCheckedItems"
                 />
             </ul>
 
@@ -60,6 +61,10 @@
 
     </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;