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/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>
 

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

@@ -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>

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

@@ -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>

src/components/projectlist/ProjectList.vue

@@ -1,163 +1,366 @@
 <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;
+    }
+    // 선택된 category 값 label 값으로 변환
+    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>

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 <= 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명 이상
   });
 
   // 개별 유저 스타일 적용

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

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>

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]) => {
-    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: "rgb(113 212 243 / 76%)",
+      textColor: "#fff", // 흰색 텍스트
+      display: "background",
+      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 = [...filteredFetchedEvents, ...selectedEvents];
 }
 
 /**
@@ -221,30 +226,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 +278,89 @@ 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;
+  });
+
+  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("❌ 휴가 저장 요청에 실패했습니다.");
+  }
 }
 
 /**
@@ -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">
@@ -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;