.

.env.dev

@@ -1,6 +1,7 @@
-VITE_DOMAIN = https://192.168.0.251:5173/
+VITE_DOMAIN = https://192.168.0.251:5100/
 # VITE_LOGIN_URL = http://localhost:10325/ms/
 VITE_SERVER = https://192.168.0.251:10300/
 VITE_API_URL = https://192.168.0.251:10300/api/
 VITE_TEST_URL = https://192.168.0.251:10300/test/
+VITE_SERVER_IMG_URL = https://192.168.0.251:10300/upload/img/
 VITE_KAKAO_MAP_KEY=6f092e8f45ee81186bb6d8408f66a492

.env.mine

@@ -3,4 +3,5 @@ VITE_DOMAIN = http://localhost:5173/
 VITE_SERVER = http://localhost:10325/
 VITE_API_URL = http://localhost:10325/api/
 VITE_TEST_URL = http://localhost:10325/test/
+VITE_SERVER_IMG_URL = http://localhost:10325/upload/img/
 VITE_KAKAO_MAP_KEY=6f092e8f45ee81186bb6d8408f66a492

package.json

@@ -19,6 +19,7 @@
         "@popperjs/core": "^2.11.8",
         "@tinymce/tinymce-vue": "^5.1.1",
         "@vueup/vue-quill": "^1.2.0",
+        "@vueuse/core": "^13.0.0",
         "axios": "^1.7.9",
         "bootstrap": "^5.3.3",
         "bootstrap-icons": "^1.11.3",

public/css/font.css

@@ -1,21 +1,163 @@
+/* 1) */
+@font-face {
+    font-family: 'NanumSquareRound';
+    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+body {
+    font-family: 'NanumSquareRound', sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    color: #333;
+}
+
+/* 2) */
+/* @font-face {
+    font-family: 'Pretendard-Regular';
+    src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
+body {
+    font-family: 'Pretendard-Regular', sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    color: #333;
+} */
+
+/* 3) */
+/* @font-face {
+    font-family: 'NEXON Lv1 Gothic OTF';
+    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv1 Gothic OTF.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+body {
+    font-family: 'NEXON Lv1 Gothic OTF', sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    color: #333;
+} */
+
+/* 4) */
+/* @font-face {
+    font-family: 'SUITE-Regular';
+    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Regular.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+}
+body {
+    font-family: 'SUITE-Regular', sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    color: #333;
+} */
+
+/* 5) */
+/* @font-face {
+    font-family: 'GoyangIlsan';
+    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/GoyangIlsan.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+body {
+    font-family: 'GoyangIlsan', sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    color: #333;
+} */
+
+/* 6) */
+/* @font-face {
+    font-family: 'GowunDodum-Regular';
+    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunDodum-Regular.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+body {
+    font-family: 'GowunDodum-Regular', sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    color: #333;
+} */
+
+/* 7) */
+/* @font-face {
+    font-family: 'EASTARJET-Medium';
+    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_231029@1.1/EASTARJET-Medium.woff2') format('woff2');
+    font-weight: 500;
+    font-style: normal;
+}
+body {
+    font-family: 'EASTARJET-Medium', sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    color: #333;
+} */
+
+/* 8) */
+/* @font-face {
+    font-family: 'HakgyoansimChulseokbuTTF-B';
+    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimChulseokbuTTF-B.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+}
+body {
+    font-family: 'HakgyoansimChulseokbuTTF-B', sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    color: #333;
+} */
+
+/* 9) */
+/* @font-face {
+    font-family: 'GongGothicMedium';
+    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff') format('woff');
+    font-weight: normal;
+    font-style: normal;
+}
+body {
+    font-family: 'GongGothicMedium', sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    color: #333;
+} */
+
+
+/* @font-face {
+    font-family: 'MangoDdobak-B';
+    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2405-3@1.1/MangoDdobak-B.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+}
+body {
+    font-family: 'MangoDdobak-B', sans-serif;
+    font-size: 16px;
+    line-height: 1.6;
+    color: #333;
+} */
+
 /* 나눔고딕 */
 @import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
 
+/* D2Coding 폰트 */
 @font-face {
     font-family: 'D2Coding';
-    src: url('/font/D2Coding-Ver1.3.2-20180524-all.ttc') format('ttc');
+    src: url('/font/D2Coding-Ver1.3.2-20180524-all.ttc') format('truetype');
     font-weight: normal;
     font-style: normal;
 }
 
+/* Consolas 폰트 */
 @font-face {
     font-family: 'Consolas';
-    src: url('/font/Consolas.woff') format('woff');
+    src: url('/font/Consolas.woff') format('font-woff');
     font-weight: normal;
     font-style: normal;
 }
 
-/* 툴바에서 선택 가능한 폰트 및 크기 스타일 */
+/* 툴바에서 선택 가능한 폰트 */
 .ql-font-nanum-gothic {
     font-family: 'Nanum Gothic', sans-serif;
 }
@@ -33,24 +175,10 @@
 }
 
 /* 폰트 크기 스타일 */
-.ql-size-12px {
-    font-size: 12px;
-}
-.ql-size-14px {
-    font-size: 14px;
-}
-.ql-size-16px {
-    font-size: 16px;
-}
-.ql-size-18px {
-    font-size: 18px;
-}
-.ql-size-24px {
-    font-size: 24px;
-}
-.ql-size-32px {
-    font-size: 32px;
-}
-.ql-size-48px {
-    font-size: 48px;
-}
+.ql-size-12px { font-size: 12px; }
+.ql-size-14px { font-size: 14px; }
+.ql-size-16px { font-size: 16px; }
+.ql-size-18px { font-size: 18px; }
+.ql-size-24px { font-size: 24px; }
+.ql-size-32px { font-size: 32px; }
+.ql-size-48px { font-size: 48px; }

public/vendor/css/core.css

@@ -15304,12 +15304,12 @@ html:not(.layout-menu-fixed) .menu-inner-shadow {
 }
 @media (max-width: 1199.98px) {
   .layout-navbar-fixed .layout-navbar.navbar-detached {
-    width: calc(100% - (1.625rem * 2)) !important;
+    width: calc(100% - (1.625rem * 2)) 
   }
 }
 @media (max-width: 991.98px) {
   .layout-navbar-fixed .layout-navbar.navbar-detached {
-    width: calc(100% - (1rem * 2)) !important;
+    width: calc(100% - (1rem * 2)) 
   }
 }
 .layout-navbar-fixed.layout-menu-collapsed .layout-navbar.navbar-detached {
@@ -15317,12 +15317,12 @@ html:not(.layout-menu-fixed) .menu-inner-shadow {
 }
 @media (max-width: 1199.98px) {
   .layout-navbar.navbar-detached {
-    width: calc(100vw - (100vw - 100%) - (1.625rem * 2)) !important;
+    width: calc(100vw - (100vw - 100%) - (1.625rem * 2)) 
   }
 }
 @media (max-width: 991.98px) {
   .layout-navbar.navbar-detached {
-    width: calc(100vw - (100vw - 100%) - (1rem * 2)) !important;
+    width: calc(100vw - (100vw - 100%) - (1rem * 2)) 
   }
 }
 .layout-menu-collapsed .layout-navbar.navbar-detached, .layout-without-menu .layout-navbar.navbar-detached {

src/App.vue

@@ -1,6 +1,8 @@
 <template>
+    <link rel="stylesheet" href="/css/font.css">
     <component :is="layout">
         <template #content>
+            <LoadingSpinner :isLoading="loadingStore.isLoading" />
             <router-view></router-view>
         </template>
     </component>
@@ -12,7 +14,10 @@ import { useRoute } from 'vue-router';
 import NormalLayout from './layouts/NormalLayout.vue';
 import NoLayout from './layouts/NoLayout.vue';
 import ToastModal from '@c/modal/ToastModal.vue';
+import { useLoadingStore } from "@s/loadingStore";
+import LoadingSpinner from "@v/LoadingPage.vue";
 
+const loadingStore = useLoadingStore();
 const route = useRoute();
 
 const layout = computed(() => {

src/common/axios-interceptor.js

@@ -1,6 +1,7 @@
 import axios from 'axios';
-import { useRoute } from 'vue-router';
+import router from '@/router';
 import { useToastStore } from '@s/toastStore';
+import { useLoadingStore } from '@s/loadingStore';
 
 const $api = axios.create({
     baseURL: import.meta.env.VITE_API_URL,
@@ -14,6 +15,9 @@ const $api = axios.create({
  */
 $api.interceptors.request.use(
     function (config) {
+        const loadingStore = useLoadingStore();
+        loadingStore.startLoading();
+
         let contentType = 'application/json';
 
         if (config.isFormData) contentType = 'multipart/form-data';
@@ -24,6 +28,8 @@ $api.interceptors.request.use(
         return config;
     },
     function (error) {
+        const loadingStore = useLoadingStore();
+        loadingStore.stopLoading();
         // 요청 오류가 있는 작업 수행
         return Promise.reject(error);
     },
@@ -32,36 +38,80 @@ $api.interceptors.request.use(
 // 응답 인터셉터 추가하기
 $api.interceptors.response.use(
     function (response) {
-        // 2xx 범위의 응답 처리
+        const loadingStore = useLoadingStore();
+        loadingStore.stopLoading();
+
+
+        // 로그인 요청일 경우 (헤더에 isLogin이 true로 설정된 경우)
+        if (response.config.headers && response.config.headers.isLogin) {
+            return response;
+        }
+
+        // 테스트 부탁
+        // 로그인 실패, 커스텀 에러 응답 처리
+        if (response.data.code > 10000) {
+            const toastStore = useToastStore();
+            const errorCode = response.data.code;
+            const errorMessage = response.data.message || '알 수 없는 오류가 발생했습니다.';
+
+            // 서버에서 보낸 메시지 사용
+            toastStore.onToast(errorMessage, 'e');
+
+            // 특정 에러 코드에 대한 추가 처리만 수행
+            if (errorCode === 10001) {
+                router.push('/login');
+            }
+
+            // 오류 응답 반환
+            return response;
+        }
+
+        // 일반 성공 응답 처리
         return response;
     },
     function (error) {
+        const loadingStore = useLoadingStore();
+        loadingStore.stopLoading();
         const toastStore = useToastStore();
-        // 오류 응답 처리
+
+        // 로그인 요청 별도 처리 (헤더에 isLogin이 true로 설정된 경우)
+        if (error.config && error.config.headers && error.config.headers.isLogin) {
+            // 로그인 페이지 오류 토스트 메시지 표시 X
+            return Promise.reject(error);
+        }
+
+        // 에러 응답에 커스텀 메시지가 포함되어 있다면 해당 메시지 사용
+        // if (error.response && error.response.data && error.response.data.message) {
+        //     toastStore.onToast(error.response.data.message, 'e');
+        // } else if (error.response) {
         if (error.response) {
+            // 기본 HTTP 에러 처리
             switch (error.response.status) {
+                case 400:
+                    toastStore.onToast('잘못된 요청입니다.', 'e');
+                    router.push('/error/400');
+                    break;
                 case 401:
-                    if (!error.config.headers.isLogin) {
-                        toastStore.onToast('인증이 필요합니다.', 'e');
-                    }
+                    toastStore.onToast('인증이 필요합니다.', 'e');
+                    router.push('/login');
                     break;
                 case 403:
                     toastStore.onToast('접근 권한이 없습니다.', 'e');
                     break;
                 case 404:
                     toastStore.onToast('요청한 페이지를 찾을 수 없습니다.', 'e');
+                    router.push('/error/404');
                     break;
                 case 500:
                     toastStore.onToast('서버 오류가 발생했습니다.', 'e');
+                    router.push('/error/500');
                     break;
                 default:
                     toastStore.onToast('알 수 없는 오류가 발생했습니다.', 'e');
             }
         } else if (error.request) {
-            // 요청이 전송되었으나 응답을 받지 못한 경우
             toastStore.onToast('서버와 통신할 수 없습니다.', 'e');
         } else {
-            // 요청 설정 중에 오류가 발생한 경우
             toastStore.onToast('요청 중 오류가 발생했습니다.', 'e');
         }
 
@@ -69,4 +119,5 @@ $api.interceptors.response.use(
     },
 );
 
+
 export default $api;

src/common/common.js

@@ -1,18 +1,20 @@
 /*
     작성자 : 공현지
     작성일 : 2025-01-17
-    수정자 :
-    수정일 :
+    수정자 : 박성용
+    수정일 : 2025-03-11
     설명   : 공통 스크립트
 */
 import Quill from 'quill';
 
 /*
-     *템플릿 사용법 : $common.변수
-     *setup() 사용법 :
-      const { appContext } = getCurrentInstance();
-      const $common = appContext.config.globalProperties.$common;
-      $common.변수
+    *템플릿 사용법 : $common.변수
+    *setup() 사용법 :
+        const { appContext } = getCurrentInstance();
+        const $common = appContext.config.globalProperties.$common;
+        or 
+        import { inject } from 'vue';         
+        const $common = inject('common');
 */
 const common = {
     // JSON 문자열로 Delta 타입을 변환
@@ -45,11 +47,11 @@ const common = {
      *
      * @param {string} dateStr
      * @return
-     * 1. Date type 인 경우 예시 '25-02-24 12:02'
+     * 1. Date type 인 경우 예시 '2025-02-24 12:02'
      * 2. Date type 이 아닌 경우 입력값 리턴
      *
      */
-    dateFormatter(dateStr) {
+    dateFormatter(dateStr, type = null) {
         const date = new Date(dateStr);
         const dateCheck = date.getTime();
 
@@ -57,13 +59,28 @@ const common = {
             return dateStr;
         } else {
             const { year, month, day, hours, minutes } = this.formatDateTime(date);
-            return `${year}-${month}-${day} ${hours}:${minutes}`;
+            let callback = '';
+
+            if (type == 'YMD') {
+                callback = `${year}-${month}-${day}`;
+            } else if (type == 'MD') {
+                callback = `${month}-${day}`;
+            } else if (type == 'T') {
+                callback = `${hours}:${minutes}`;
+            } else {
+                callback = `${year}-${month}-${day} ${hours}:${minutes}`;
+            }
+
+            return callback;
         }
     },
 
-    formatDateTime(date) {
-        const zeroFormat = num => (num < 10 ? `0${num}` : num);
+    formatDateTime(dateStr) {
+        const date = new Date(dateStr);
+        const dateCheck = date.getTime();
+        if (isNaN(dateCheck)) return dateStr;
 
+        const zeroFormat = num => (num < 10 ? `0${num}` : num);
         return {
             year: date.getFullYear(),
             month: zeroFormat(date.getMonth() + 1),
@@ -74,13 +91,126 @@ const common = {
         };
     },
 
+    // 오늘 날짜시간 조회
+    getToday() {
+        const date = new Date();
+        return {
+            year: date.getFullYear(),
+            month: date.getMonth() + 1,
+            day: date.getDate(),
+            hours: date.getHours(),
+            minutes: date.getMinutes(),
+            seconds: date.getSeconds(),
+        };
+    },
+
+    // 해당 날짜가 오늘인지 확인
+    isToday(dateStr) {
+        const date = new Date(dateStr);
+        const dateCheck = date.getTime();
+        if (isNaN(dateCheck)) return '날짜 타입 에러';
+
+        const today = new Date();
+        return date.toDateString() === today.toDateString();
+    },
+
+    // 해당 월, 일에 맞는 목록 필터링
+    filterTargetByDate(target, key, month, day) {
+        if (!Array.isArray(target) || target.length === 0) return [];
+
+        return [...target].filter(item => {
+            if (!item[key]) return false;
+
+            const date = new Date(item[key]);
+            const MatchingMonth = date.getMonth() + 1 === parseInt(month, 10);
+            const MatchingDay = date.getDate() === parseInt(day, 10);
+
+            return MatchingMonth && MatchingDay;
+        });
+    },
+
+    /**
+     * 빈값 확인
+     *
+     * @param {} obj
+     * @returns
+     */
     isNotEmpty(obj) {
-        if (obj === null || obj === undefined) return false;
-        if (typeof obj === 'string' && obj.trim() === '') return false;
-        if ((Array.isArray(obj) || obj === Object(obj)) && Object.keys(obj).length === 0) return false;
+        if (obj === null || obj === undefined) {
+            return false;
+        }
+
+        if (typeof obj === 'string' && obj.trim() === '') {
+            return false;
+        }
+
+        if ((Array.isArray(obj) || obj === Object(obj)) && Object.keys(obj).length === 0) {
+            return false;
+        }
 
         return true;
     },
+
+    /**
+     * 에디터에 내용이 있는지 확인
+     *
+     * @param { Quill } content
+     * @returns true: 값 없음, false: 값 있음
+     */
+    isNotValidContent(content) {
+        if (!content.value?.ops?.length) return true;
+
+        // 이미지 포함 여부 확인
+        const hasImage = content.value.ops.some(op => op.insert && typeof op.insert === 'object' && op.insert.image);
+        // 텍스트 포함 여부 확인
+        const hasText = content.value.ops.some(op => typeof op.insert === 'string' && op.insert.trim().length > 0);
+
+        // 텍스트 또는 이미지가 하나라도 있으면 유효한 내용
+        return !(hasText || hasImage);
+    },
+
+    /**
+     * 빈 값 확인
+     *
+     * @param { ref } text ex) inNotValidInput(data.value);
+     * @returns
+     */
+    isNotValidInput(text) {
+        return text.trim().length === 0;
+    },
+
+    /**
+     * 프로필 이미지 반환
+     *
+     * @param { String } profileImg
+     * @returns
+     */
+    getProfileImage(profileImg, isAnonymous = false) {
+        const defaultProfileImg = '/img/icons/icon.png'; // 기본 프로필 이미지 경로
+        const anonymousImg = '/img/avatars/default-Profile.jpg'; // 익명 이미지
+        let profileImgUrl = isAnonymous ? anonymousImg : defaultProfileImg;
+        const UserProfile = `${import.meta.env.VITE_SERVER}upload/img/profile/${profileImg}`;
+
+        return !profileImg || profileImg === '' ? profileImgUrl : UserProfile;
+    },
+
+    setDefaultImage(event, deafultImg = '/img/icons/icon.png') {
+        return (event.target.src = deafultImg);
+    },
+    showImage(event) {
+        return (event.target.style.visibility = 'visible');
+    },
+
+    addHyphenToPhoneNumber(phoneNum) {
+        const phoneNumber = phoneNum;
+        const length = phoneNumber.length;
+
+        if (length >= 9) {
+            return phoneNumber.replace(/[^0-9]/g, '').replace(/^(\d{2,3})(\d{3,4})(\d{4})$/, `$1-$2-$3`);
+        } else {
+            return phoneNum;
+        }
+    },
 };
 
 export default {

src/common/commonApi.js

@@ -8,28 +8,42 @@
 import { ref, onMounted } from "vue";
 import $api from '@api';
 
-const commonApi = (options = {}) => {
-    const colorList = ref([]);
-    const mbtiList = ref([]);
-    const pwhintList = ref([]);
-    const yearCategory = ref([]);
-    const cateList = ref([]);
+const colorList = ref([]);
+const mbtiList = ref([]);
+const pwhintList = ref([]);
+const yearCategory = ref([]);
+const cateList = ref([]);
 
-    // type 파라미터를 추가로 받도록 수정
-    const CommonCode = async (path, endpoint, targetList, type = null) => {
-        const params = type ? { type } : {};
-        const response = await $api.get(`${path}/${endpoint}`, {
-            params
-        });
-        targetList.value = response.data.data.map(item => ({
+const refreshColorList = async (type = 'YNP') => {
+    const response = await $api.get(`user/color`, {
+        params: { type }
+    });
+
+    if (response.data && response.data.data) {
+        colorList.value = response.data.data.map(item => ({
             label: item.CMNCODNAM,
             value: item.CMNCODVAL,
         }));
-    };
+    }
 
+    return colorList.value;
+};
+
+// CommonCode 함수를 외부에서도 접근할 수 있게 변경
+const CommonCode = async (path, endpoint, targetList, type = null) => {
+    const params = type ? { type } : {};
+    const response = await $api.get(`${path}/${endpoint}`, {
+        params
+    });
+    targetList.value = response.data.data.map(item => ({
+        label: item.CMNCODNAM,
+        value: item.CMNCODVAL,
+    }));
+};
+
+const commonApi = (options = {}) => {
     onMounted(async () => {
         // 요청할 데이터가 옵션으로 전달 -> 그에 맞게 호출
-        // color 옵션에 type 포함
         if (options.loadColor) {
             await CommonCode("user", "color", colorList, options.colorType);
         }
@@ -39,7 +53,15 @@ const commonApi = (options = {}) => {
         if (options.loadCateList) await CommonCode("worddict", "getWordCategory", cateList);
     });
 
-    return { colorList, mbtiList, pwhintList, yearCategory, cateList };
+    return {
+        colorList,
+        mbtiList,
+        pwhintList,
+        yearCategory,
+        cateList,
+        refreshColorList
+    };
 };
 
+export { refreshColorList };
 export default commonApi;

src/components/board/BoardComment.vue

@@ -4,26 +4,31 @@
             :unknown="comment.author === '익명'"
             :isCommentAuthor="isCommentAuthor"
             :boardId="comment.boardId"
-            :profileName="comment.author"
+            :profileName="displayName"
             :date="comment.createdAt"
             :comment="comment"
+            :profileImg="comment.profileImg"
             :showDetail="false"
             :isLike="!isLike"
             :isCommentPassword="isCommentPassword"
             :isCommentProfile="true"
+            :is-edit-pushed="isEditPushed"
+            :is-delete-pushed="isDeletePushed"
             @editClick="handleEditClick"
             @deleteClick="$emit('deleteClick', comment)"
             @updateReaction="handleUpdateReaction"
         />
         <!-- 댓글 비밀번호 입력창 (익명일 경우) -->
-        <div v-if="currentPasswordCommentId === comment.commentId && unknown" class="mt-3 w-25 ms-auto">
+        <div v-if="currentPasswordCommentId === comment.commentId && unknown && comment.author == '익명'" class="mt-3 w-px-200 ms-auto">
             <div class="input-group">
                 <input
                     type="password"
                     class="form-control"
                     :value="password"
+                    autocomplete="new-password"
+                    maxlength="8"
                     placeholder="비밀번호 입력"
-                    @input="$emit('update:password', $event.target.value.trim())"
+                    @input="filterInput"
                 />
                 <button class="btn btn-primary" @click="logPasswordAndEmit">확인</button>
             </div>
@@ -32,14 +37,15 @@
 
         <div class="mt-6">
             <template v-if="comment.isEditTextarea">
-                <textarea v-model="localEditedContent" class="form-control"></textarea>
+                <textarea v-model="localEditedContent" class="form-control" maxLength="500"></textarea>
+                <span v-if="editCommentAlert" class="invalid-feedback d-block text-start">{{ editCommentAlert }}</span>
                 <div class="mt-2 d-flex justify-content-end">
-                    <SaveBtn class="btn btn-primary" @click="submitEdit"></SaveBtn>
+                    <SaveBtn class="btn btn-primary" @click="submitEdit" :isEnabled="disabled"></SaveBtn>
                 </div>
             </template>
 
             <template v-else>
-                <p class="m-0">{{ comment.content }}</p>
+                <div class="m-0" style="white-space: pre-wrap">{{ comment.content }}</div>
             </template>
         </div>
         <!-- <p>현재 isDeleted 값: {{ isDeleted }}</p> -->
@@ -47,151 +53,192 @@
         <!-- <template v-if="isDeleted">
             <p class="m-0 text-muted">댓글이 삭제되었습니다.</p>
         </template> -->
-        <PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6"/>
-        <BoardCommentArea v-if="isComment" :unknown="unknown" @submitComment="submitComment"/>
+        <PlusButton v-if="isPlusButton" @click="toggleComment" class="mt-6">
+            <i class="icon-base bx bx-plus beforeRotate" :class="{ rotate: isComment }"></i>
+        </PlusButton>
 
-        <!-- 대댓글 -->
-        <ul v-if="comment.children && comment.children.length" class="list-unstyled">
-            <li
-                v-for="child in comment.children"
-                :key="child.commentId"
-                class="mt-8 pt-6 ps-10 border-top"
-            >
-                <BoardComment
-                    :comment="child"
-                    :unknown="child.author === '익명'"
-                    :isPlusButton="false"
-                    :isLike="true"
-                    :isCommentProfile="true"
-                    :isCommentAuthor="child.isCommentAuthor"
-                    :isCommentPassword="isCommentPassword"
-                    :currentPasswordCommentId="currentPasswordCommentId"
-                    :passwordCommentAlert="passwordCommentAlert"
-                    :password="password"
-                    @editClick="handleReplyEditClick"
-                    @deleteClick="$emit('deleteClick', child)"
-                    @submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
-                    @cancelEdit="$emit('cancelEdit', child)"
-                    @submitComment="submitComment"
-                    @updateReaction="handleUpdateReaction"
-                    @submitPassword="$emit('submitPassword', child, password)"
-                    @update:password="$emit('update:password', $event)"
-                />
-            </li>
-        </ul>
+        <BoardCommentArea v-if="isComment" :unknown="unknown" @submitComment="submitComment" :commnetId="comment.commentId" />
+
+        <slot name="reply"></slot>
     </div>
 </template>
 
 <script setup>
-import { defineProps, defineEmits, ref, computed, watch } from 'vue';
-import BoardProfile from './BoardProfile.vue';
-import BoardCommentArea from './BoardCommentArea.vue';
-import PlusButton from '../button/PlusBtn.vue';
-import SaveBtn from '../button/SaveBtn.vue';
+    import { defineProps, defineEmits, ref, computed, watch, inject } from 'vue';
+    import BoardProfile from './BoardProfile.vue';
+    import BoardCommentArea from './BoardCommentArea.vue';
+    import PlusButton from '../button/PlusBtn.vue';
+    import SaveBtn from '../button/SaveBtn.vue';
 
-const props = defineProps({
-    comment: {
-        type: Object,
-        required: true,
-    },
-    unknown: {
-        type: Boolean,
-        default: false,
-    },
-    isCommentAuthor: {
-        type: Boolean,
-        default: false,
-    },
-    isPlusButton: {
-        type: Boolean,
-        default: true,
-    },
-    isLike: {
-        type: Boolean,
-        default: false,
-    },
-    isEditTextarea: {
-        type: Boolean,
-        default: false
-    },
-    isDeleted: {
-        type: Boolean,
-        default: false
-    },
-    isCommentPassword: {
-        type: Boolean,
-        default: false,
-    },
-    passwordCommentAlert: {
-        type: String,
-        default: ''
-    },
-    currentPasswordCommentId: {
-        type: Number
-    },
-    password:{
-        type: String
-    },
-});
+    const props = defineProps({
+        comment: {
+            type: Object,
+            required: true,
+        },
+        unknown: {
+            type: Boolean,
+            default: false,
+        },
+        nickname: {
+            type: String,
+            default: '',
+        },
+        isCommentAuthor: {
+            type: Boolean,
+            default: false,
+        },
 
-// emits 정의
-const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'submitEdit', 'cancelEdit', 'update:password']);
-
-const localEditedContent = ref(props.comment.content);
-
-// 댓글 입력 창 토글
-const isComment = ref(false);
-const toggleComment = () => {
-    isComment.value = !isComment.value;
-};
-
-// 부모 컴포넌트에 대댓글 추가 요청
-const submitComment = (newComment) => {
-    emit('submitComment', { parentId: props.comment.commentId, ...newComment, LOCBRDTYP: newComment.LOCBRDTYP });
-    isComment.value = false;
-};
-
-// 좋아요, 싫어요
-const handleUpdateReaction = (reactionData) => {
-    emit('updateReaction', {
-        boardId: props.comment.boardId,
-        commentId: props.comment.commentId || reactionData.commentId,
-        ...reactionData,
+        isPlusButton: {
+            type: Boolean,
+            default: true,
+        },
+        isLike: {
+            type: Boolean,
+            default: false,
+        },
+        isEditTextarea: {
+            type: Boolean,
+            default: false,
+        },
+        isDeleted: {
+            type: Boolean,
+            default: false,
+        },
+        isCommentPassword: {
+            type: Boolean,
+            default: false,
+        },
+        passwordCommentAlert: {
+            type: String,
+            default: '',
+        },
+        currentPasswordCommentId: {
+            type: Number,
+        },
+        password: {
+            type: String,
+        },
+        // isEditPushed: {
+        //     type: Boolean,
+        //     required: false,
+        // },
+        // isDeletePushed: {
+        //     type: Boolean,
+        //     required: false,
+        // },
+        editCommentAlert: String,
     });
 
-};
+    const isEditPushed = ref(false);
+    const isDeletePushed = ref(false);
 
-// 비밀번호 확인
-const logPasswordAndEmit = () => {
-    emit('submitPassword', props.comment, props.password);
-};
+    const displayName = computed(() => {
+        return props.nickname ? props.nickname : props.comment.author;
+    });
 
-watch(() => props.comment.isEditTextarea, (newVal) => {
-    if (newVal) {
-        localEditedContent.value = props.comment.content;
-    }
-});
+    // emits 정의
+    const emit = defineEmits([
+        'submitComment',
+        'updateReaction',
+        'editClick',
+        'deleteClick',
+        'submitPassword',
+        'submitEdit',
+        'cancelEdit',
+        'update:password',
+        'inputDetector',
+    ]);
 
-// watch(() => props.comment.isDeleted, () => {
-//     console.log("BoardComment - isDeleted 상태 변경됨:", newVal);
+    const filterInput = event => {
+        event.target.value = event.target.value.replace(/\s/g, ''); // 공백 제거
+        emit('update:password', event.target.value);
+    };
 
-//     if (newVal) {
-//         localEditedContent.value = "댓글이 삭제되었습니다."; // UI 반영
-//         props.comment.isEditTextarea = false;
-//     }
-// });
+    const localEditedContent = ref(props.comment.content);
+    const isModifyContent = ref(props.comment.content);
+    const disabled = ref(false);
 
-// 수정버튼
-const submitEdit = () => {
-    emit('submitEdit', props.comment, localEditedContent.value);
-};
+    // 댓글 입력 창 토글
+    const isComment = ref(false);
+    const toggleComment = () => {
+        isComment.value = !isComment.value;
+    };
 
-const handleEditClick = () => {
-    emit('editClick', props.comment);
-}
+    // 부모 컴포넌트에 대댓글 추가 요청
+    const submitComment = newComment => {
+        emit('submitComment', { parentId: props.comment.commentId, ...newComment, LOCBRDTYP: newComment.LOCBRDTYP });
+        isComment.value = false;
+    };
 
-const handleReplyEditClick = (comment) => {
-    emit('editClick', comment);
-}
+    // 좋아요, 싫어요
+    const handleUpdateReaction = reactionData => {
+        emit('updateReaction', {
+            boardId: props.comment.boardId,
+            commentId: props.comment.commentId || reactionData.commentId,
+            ...reactionData,
+        });
+    };
 
+    // 비밀번호 확인
+    const logPasswordAndEmit = () => {
+        emit('submitPassword', props.comment, props.password);
+    };
+
+    const handleInject = inject('isBtnPushed');
+
+    // 수정, 삭제 버튼 활성화 상태값
+    watch(
+        () => handleInject.value,
+        (newValue, oldValue) => {
+            if (newValue) {
+                if (newValue.target == props.comment.commentId) {
+                    isEditPushed.value = newValue.isEditPushed;
+                    isDeletePushed.value = newValue.isDeletePushed;
+                } else {
+                    isEditPushed.value = false;
+                    isDeletePushed.value = false;
+                }
+            }
+        },
+    );
+
+    watch(
+        () => props.comment.isEditTextarea,
+        newVal => {
+            if (newVal) {
+                localEditedContent.value = props.comment.content;
+            }
+        },
+    );
+
+    // text 변화 감지하여 부모에게 전달
+    watch(
+        () => localEditedContent.value,
+        newVal => {
+            if (JSON.stringify(isModifyContent.value) == JSON.stringify(newVal)) {
+                disabled.value = false;
+                return;
+            }
+            disabled.value = true;
+            emit('inputDetector');
+        },
+    );
+
+    // watch(() => props.comment.isDeleted, () => {
+    //     console.log("BoardComment - isDeleted 상태 변경됨:", newVal);
+
+    //     if (newVal) {
+    //         localEditedContent.value = "댓글이 삭제되었습니다."; // UI 반영
+    //         props.comment.isEditTextarea = false;
+    //     }
+    // });
+
+    // 수정버튼
+    const submitEdit = () => {
+        emit('submitEdit', props.comment, localEditedContent.value);
+    };
+
+    const handleEditClick = () => {
+        emit('editClick', props.comment);
+    };
 </script>

src/components/board/BoardCommentArea.vue

@@ -3,46 +3,77 @@
         <div class="card-body">
             <!-- 댓글 입력 섹션 -->
             <div class="d-flex justify-content-start align-items-top">
-                <!-- 프로필섹션 -->
-                <!-- <div class="avatar-wrapper">
-                    <div v-if="!unknown" class="avatar me-4">
-                        <img src="/img/avatars/11.png" alt="Avatar" class="rounded-circle">
-                    </div>
-                </div> -->
-                <!-- 텍스트박스 -->
                 <div class="w-100">
-                    <textarea class="form-control" placeholder="댓글 달기" rows="3" v-model="comment"></textarea>
-                    <span v-if="commentAlert" class="invalid-feedback d-block text-start ms-2">{{ commentAlert }}</span>
-                    <span v-else class="invalid-feedback d-block text-start ms-2">{{ textAlert }}</span>
+                    <textarea
+                        class="form-control mb-1"
+                        placeholder="댓글 달기"
+                        rows="3"
+                        :maxlength="maxLength"
+                        v-model="comment"
+                        @input="clearAlert('comment')"
+                    ></textarea>
+                    <span v-if="commentAlert" class="invalid-feedback d-inline text-start ms-2 mb-2">{{ commentAlert }}</span>
+                    <span v-else class="invalid-feedback d-inline">{{ textAlert }}</span>
                 </div>
             </div>
 
             <!-- 옵션 및 버튼 섹션 -->
-            <div class="d-flex justify-content-between flex-wrap mt-4">
-                <div class="d-flex flex-wrap align-items-center">
-                    <!-- 익명 체크박스 (익명게시판일 경우에만)-->
-                    <div v-if="unknown" class="form-check form-check-inline mb-0 me-4">
-                        <input class="form-check-input" type="checkbox" id="inlineCheckbox1" v-model="isCheck" />
-                        <label class="form-check-label" for="inlineCheckbox1">익명</label>
+            <div class="d-flex justify-content-between align-items-center mt-1 pb-4">
+                <!-- 왼쪽: 익명 체크박스 -->
+                <div v-if="unknown" class="form-check form-check-inline mb-0 me-2">
+                    <input
+                        class="form-check-input"
+                        type="checkbox"
+                        :id="`checkboxAnnonymous${commnetId}`"
+                        v-model="isCheck"
+                        @change="pwd2AlertHandler"
+                    />
+                    <label class="form-check-label text-nowrap" :for="`checkboxAnnonymous${commnetId}`">익명</label>
+                </div>
+
+                <!-- 중앙: 닉네임 & 비밀번호 입력 필드 (가로 정렬) -->
+                <div v-if="isCheck" class="d-flex flex-grow-1 gap-2">
+                    <!-- 닉네임 입력 영역 -->
+                    <div class="position-relative">
+                        <input
+                            type="text"
+                            class="form-control mb-1"
+                            v-model="nickname"
+                            placeholder="닉네임"
+                            @input="clearAlert('nickname')"
+                            @keypress="noSpace"
+                            :maxlength="6"
+                        />
+                        <!-- 닉네임 경고 메시지 -->
+                        <div v-if="nicknameAlert" class="position-absolute text-danger small top-100 start-0">
+                            {{ nicknameAlert }}
+                        </div>
                     </div>
 
-                    <!-- 비밀번호 입력 필드 (익명이 선택된 경우에만 표시) -->
-                    <div v-if="isCheck" class="d-flex align-items-center flex-grow-1">
-                        <label class="form-label mb-0 me-3" for="basic-default-password">비밀번호</label>
+                    <!-- 비밀번호 입력 영역 -->
+                    <div class="position-relative">
                         <input
                             type="password"
                             id="basic-default-password"
-                            class="form-control flex-grow-1"
+                            class="form-control mb-1"
+                            autocomplete="new-password"
                             v-model="password"
-                            placeholder="비밀번호 입력"
+                            placeholder="비밀번호"
+                            maxlength="8"
+                            @input="
+                                password = password.replace(/\s/g, '');
+                                clearAlert('password');
+                            "
                         />
-                        <span v-if="passwordAlert" class="invalid-feedback d-block text-start ms-2">{{ passwordAlert }}</span>
-                        <span v-else class="invalid-feedback d-block text-start ms-2">{{ passwordAlert2 }}</span>
+                        <!-- 비밀번호 경고 메시지 -->
+                        <div v-if="passwordAlert2" class="position-absolute text-danger small top-100 start-0">
+                            {{ passwordAlert2 }}
+                        </div>
                     </div>
                 </div>
 
-                <!-- 답변 쓰기 버튼 -->
-                <div class="ms-auto mt-3 mt-md-0">
+                <!-- 오른쪽: 답변 쓰기 버튼 -->
+                <div class="ms-auto">
                     <SaveBtn class="btn btn-primary" @click="handleCommentSubmit"></SaveBtn>
                 </div>
             </div>
@@ -51,78 +82,124 @@
 </template>
 
 <script setup>
-import { ref, defineEmits, defineProps, watch, inject } from 'vue';
-import SaveBtn from '../button/SaveBtn.vue';
+    import { ref, defineEmits, defineProps, watch, inject } from 'vue';
+    import SaveBtn from '../button/SaveBtn.vue';
 
-const props = defineProps({
-    unknown: {
-        type: Boolean,
-        default: true,
-    },
-    parentId: {
-        type: Number,
-        default: 0,
-    },
-    passwordAlert: {
-        type: String,
-        default: '',
-    },
-    commentAlert: {
-        type: String,
-        default: '',
-    },
-});
-
-const $common = inject('common');
-const comment = ref('');
-const password = ref('');
-const isCheck = ref(false);
-const textAlert = ref('');
-const passwordAlert2 = ref('');
-
-const emit = defineEmits(['submitComment']);
-
-const handleCommentSubmit = () => {
-    if (!$common.isNotEmpty(comment.value)) {
-        textAlert.value = '댓글을 입력하세요';
-        return false;
-    } else {
-        textAlert.value = '';
-    }
-
-    if (isCheck.value && !$common.isNotEmpty(password.value)) {
-        passwordAlert2.value = '비밀번호를 입력하세요';
-        return false;
-    } else {
-        passwordAlert2.value = '';
-    }
-
-    // 댓글 제출
-    emit('submitComment', {
-        comment: comment.value,
-        password: isCheck.value ? password.value : '',
-        isCheck: isCheck.value,
-        LOCBRDTYP: isCheck.value ? '300102' : null, // 익명일 경우 '300102' 설정
+    const props = defineProps({
+        unknown: {
+            type: Boolean,
+            default: true,
+        },
+        parentId: {
+            type: Number,
+            default: 0,
+        },
+        passwordAlert: {
+            type: String,
+            default: '',
+        },
+        commentAlert: {
+            type: String,
+            default: '',
+        },
+        maxLength: {
+            type: Number,
+            default: 500,
+        },
+        commnetId: {
+            type: Number,
+        },
     });
 
-    // 제출 후 입력 필드 리셋
-    resetCommentForm();
-};
+    const noSpace = (e) => {
+        if (e.key === ' ') e.preventDefault();
+    };
 
-// 입력 필드 리셋 함수 추가
-const resetCommentForm = () => {
-    comment.value = '';
-    password.value = '';
-    isCheck.value = false;
-};
+    const $common = inject('common');
+    const comment = ref('');
+    const password = ref('');
+    const isCheck = ref(false);
+    const textAlert = ref('');
+    const nicknameAlert = ref('');
+    const passwordAlert2 = ref('');
+    const nickname = ref('');
 
-watch(
-    () => props.passwordAlert,
-    () => {
-        if (!props.passwordAlert) {
-            resetCommentForm();
+    const emit = defineEmits(['submitComment']);
+
+    // 입력 필드별 경고 메시지 초기화
+    const clearAlert = field => {
+        if (field === 'comment') textAlert.value = '';
+        if (field === 'nickname') nicknameAlert.value = '';
+        if (field === 'password') passwordAlert2.value = '';
+    };
+
+    const handleCommentSubmit = () => {
+        let isValid = true;
+
+        // 댓글 공백 체크
+        if (!$common.isNotEmpty(comment.value)) {
+            textAlert.value = '댓글을 입력해주세요.';
+            isValid = false;
+        } else {
+            textAlert.value = '';
         }
-    }
-);
-</script>
 
+        // 익명 선택 시 닉네임 & 비밀번호 체크
+        if (isCheck.value) {
+            if (!$common.isNotEmpty(nickname.value)) {
+                nicknameAlert.value = '닉네임을 입력해주세요.';
+                isValid = false;
+            } else {
+                nicknameAlert.value = '';
+            }
+
+            if (!$common.isNotEmpty(password.value)) {
+                passwordAlert2.value = '비밀번호를 입력해주세요.';
+                password.value = '';
+                isValid = false;
+            } else {
+                passwordAlert2.value = '';
+            }
+        }
+
+        // 모든 입력값이 유효할 경우만 제출
+        if (!isValid) return;
+
+        // 댓글 제출
+        emit('submitComment', {
+            comment: comment.value,
+            nickname: isCheck.value ? nickname.value : '',
+            password: isCheck.value ? password.value : '',
+            isCheck: isCheck.value,
+            LOCBRDTYP: isCheck.value ? '300102' : null, // 익명일 경우 '300102' 설정
+        });
+
+        // 제출 후 입력 필드 리셋
+        resetCommentForm();
+    };
+
+    // 비밀번호 & 닉네임 경고 초기화
+    const pwd2AlertHandler = () => {
+        if (!isCheck.value) {
+            passwordAlert2.value = '';
+            nicknameAlert.value = '';
+        }
+    };
+
+    // 입력 필드 리셋 함수 추가
+    const resetCommentForm = () => {
+        comment.value = '';
+        password.value = '';
+        nickname.value = '';
+        isCheck.value = false;
+    };
+
+    watch(
+        () => props.passwordAlert,
+        () => {
+            if (!props.passwordAlert) {
+                resetCommentForm();
+            }
+        },
+    );
+</script>

src/components/board/BoardCommentList.vue

@@ -1,124 +1,176 @@
 <template>
     <ul class="list-unstyled mt-10">
-        <li
-            v-for="comment in comments"
-            :key="comment.commentId"
-            class="mt-6 border-bottom pb-6"
-        >
+        <li v-for="comment in comments" :key="comment.commentId" class="mt-6 border-bottom pb-6">
             <BoardComment
                 :unknown="unknown"
                 :comment="comment"
                 :isCommentAuthor="comment.isCommentAuthor"
                 :isEditTextarea="comment.isEditTextarea"
                 :isDeleted="isDeleted"
+                :nickname="comment.nickname"
                 :isCommentPassword="isCommentPassword"
                 :passwordCommentAlert="passwordCommentAlert || ''"
                 :currentPasswordCommentId="currentPasswordCommentId"
                 :password="password"
+                :editCommentAlert="editCommentAlert[comment.commentId]"
+                :is-edit-pushed="comment.isEditPushed"
+                :is-delete-pushed="comment.isDeletePushed"
                 @editClick="handleEditClick"
                 @deleteClick="handleDeleteClick"
                 @submitPassword="submitPassword"
                 @submitComment="submitComment"
-                @submitEdit="handleSubmitEdit"
+                @submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent)"
                 @cancelEdit="handleCancelEdit"
-                @updateReaction="(reactionData) => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
+                @updateReaction="reactionData => handleUpdateReaction(reactionData, comment.commentId, comment.boardId)"
                 @update:password="updatePassword"
-            />
+                @inputDetector="$emit('inputDetector')"
+            >
+                <!-- 대댓글 -->
+                <template #reply>
+                    <ul v-if="comment.children && comment.children.length" class="list-unstyled">
+                        <li v-for="(child, index) in comment.children" :key="child.commentId" class="mt-8 pt-6 ps-10 border-top">
+                            <BoardComment
+                                :comment="child"
+                                :unknown="child.author === '익명'"
+                                :isPlusButton="false"
+                                :isLike="true"
+                                :isCommentProfile="true"
+                                :nickname="child.nickname"
+                                :isCommentAuthor="child.isCommentAuthor"
+                                :isCommentPassword="isCommentPassword"
+                                :currentPasswordCommentId="currentPasswordCommentId"
+                                :passwordCommentAlert="passwordCommentAlert"
+                                :password="password"
+                                :editCommentAlert="editCommentAlert[child.commentId]"
+                                :is-edit-pushed="child.isEditPushed"
+                                :is-delete-pushed="child.isDeletePushed"
+                                @editClick="handleReplyEditClick"
+                                @deleteClick="$emit('deleteClick', child)"
+                                @submitEdit="(comment, editedContent) => $emit('submitEdit', comment, editedContent, child.commentId)"
+                                @cancelEdit="$emit('cancelEdit', child)"
+                                @submitComment="submitComment"
+                                @updateReaction="handleUpdateReaction"
+                                @submitPassword="$emit('submitPassword', child, password)"
+                                @update:password="$emit('update:password', $event)"
+                                @inputDetector="$emit('inputDetector')"
+                            />
+                        </li>
+                    </ul>
+                </template>
+            </BoardComment>
         </li>
     </ul>
 </template>
 
 <script setup>
-import { defineProps, defineEmits } from 'vue';
-import BoardComment from './BoardComment.vue'
+    import { defineProps, defineEmits, watch } from 'vue';
+    import BoardComment from './BoardComment.vue';
 
-const props = defineProps({
-    comments: {
-        type: Array,
-        required: true,
-        default: () => []
-    },
-    unknown: {
-        type: Boolean,
-        default: true,
-    },
-    isCommentAuthor: {
-        type: Boolean,
-        default: false,
-    },
-    isCommentPassword: {
-        type: Boolean,
-        default: false,
-    },
-    isEditTextarea: {
-        type: Boolean,
-        default: false,
-    },
-    isDeleted: {
-        type: Boolean,
-        default: false,
-    },
-    passwordCommentAlert: {
-        type: String,
-        default: ''
-    },
-    currentPasswordCommentId: {
-        type: Number
-    },
-    password:{
-        type: String
-    },
-});
+    const props = defineProps({
+        comments: {
+            type: Array,
+            required: true,
+            default: () => [],
+        },
+        unknown: {
+            type: Boolean,
+            default: true,
+        },
+        isCommentAuthor: {
+            type: Boolean,
+            default: false,
+        },
+        isCommentPassword: {
+            type: Boolean,
+            default: false,
+        },
+        isEditTextarea: {
+            type: Boolean,
+            default: false,
+        },
+        isDeleted: {
+            type: Boolean,
+            default: false,
+        },
+        passwordCommentAlert: {
+            type: String,
+            default: '',
+        },
+        currentPasswordCommentId: {
+            type: Number,
+        },
+        password: {
+            type: String,
+        },
+        index: {
+            type: Number,
+        },
+        editCommentAlert: Object,
+    });
 
-const emit = defineEmits(['submitComment', 'updateReaction', 'editClick', 'deleteClick', 'submitPassword', 'clearPassword','submitEdit', 'update:password']);
+    const emit = defineEmits([
+        'submitComment',
+        'updateReaction',
+        'editClick',
+        'deleteClick',
+        'submitPassword',
+        'clearPassword',
+        'submitEdit',
+        'update:password',
+        'inputDetector',
+    ]);
 
-const submitComment = (replyData) => {
-    emit('submitComment', replyData);
-};
-
-const handleUpdateReaction = (reactionData, commentId, boardId) => {
-    const updatedReactionData = {
-        ...reactionData,  
-        commentId: commentId || reactionData.commentId, 
-        boardId: boardId || reactionData.boardId,
+    const submitComment = replyData => {
+        emit('submitComment', replyData);
     };
 
-    emit('updateReaction', updatedReactionData);
-}
+    const handleUpdateReaction = (reactionData, commentId, boardId) => {
+        const updatedReactionData = {
+            ...reactionData,
+            commentId: commentId || reactionData.commentId,
+            boardId: boardId || reactionData.boardId,
+        };
 
-const submitPassword = (comment, password) => {
-    emit('submitPassword', comment, password);
-};
+        emit('updateReaction', updatedReactionData);
+    };
 
-const handleEditClick = (comment) => {
-    if (comment.parentId) {
-        emit('editClick', comment); // 대댓글
-    } else {
-        emit('editClick', comment); // 댓글
-    }
-};
+    const submitPassword = (comment, password) => {
+        emit('submitPassword', comment, password);
+    };
 
-const handleSubmitEdit = (comment, editedContent) => {
-    emit("submitEdit", comment, editedContent);
-};
+    const handleEditClick = comment => {
+        if (comment.parentId) {
+            emit('editClick', comment); // 대댓글
+        } else {
+            emit('editClick', comment); // 댓글
+        }
+    };
 
-const handleDeleteClick = (comment) => {
-    if (comment.parentId) {
-        emit('deleteClick', comment); // 대댓글 삭제
-    } else {
-        emit('deleteClick', comment); // 댓글 삭제
-    }
-};
+    const handleSubmitEdit = (comment, editedContent) => {
+        emit('submitEdit', comment, editedContent);
+    };
 
-const handleCancelEdit = (comment) => {
-    if (comment.parentId) {
-        emit('cancelEdit', comment); // 대댓글 수정 취소
-    } else {
-        emit('cancelEdit', comment); // 댓글 수정 취소
-    }
-};
+    const handleDeleteClick = comment => {
+        if (comment.parentId) {
+            emit('deleteClick', comment); // 대댓글 삭제
+        } else {
+            emit('deleteClick', comment); // 댓글 삭제
+        }
+    };
 
-const updatePassword = (newPassword) => {
-    emit('update:password', newPassword);
-};
+    const handleCancelEdit = comment => {
+        if (comment.parentId) {
+            emit('cancelEdit', comment); // 대댓글 수정 취소
+        } else {
+            emit('cancelEdit', comment); // 댓글 수정 취소
+        }
+    };
+
+    const updatePassword = newPassword => {
+        emit('update:password', newPassword);
+    };
+
+    const handleReplyEditClick = comment => {
+        emit('editClick', comment);
+    };
 </script>

src/components/board/BoardProfile.vue

@@ -1,17 +1,23 @@
 <template>
     <div class="d-flex align-items-center flex-wrap">
         <div class="d-flex align-items-center">
-            <div v-if="!unknown" class="avatar me-2">
-                <img :src="getProfileImage(profilePath)" alt="Avatar" class="rounded-circle" />
+            <div class="avatar me-2 cursor-none">
+                <img
+                    :src="getProfileImage(profileImg)"
+                    alt="user"
+                    class="rounded-circle profile-img"
+                    @error="setDefaultImage($event)"
+                    @load="showImage($event)"
+                />
             </div>
 
             <div class="me-2">
-                <h6 class="mb-0">{{ profileName }}</h6>
+                <h6 class="mb-0">{{ profileName ? profileName : nickname }}</h6>
                 <div class="profile-detail">
                     <span>{{ date }}</span>
                     <template v-if="showDetail">
                         <span class="ms-2"> <i class="fa-regular fa-eye"></i> {{ views }} </span>
-                        <span class="ms-1"> <i class="bx bx-comment"></i> {{ commentNum }} </span>
+                        <span v-if="unknown" class="ms-1"> <i class="bx bx-comment"></i> {{ commentNum }} </span>
                     </template>
                 </div>
             </div>
@@ -20,28 +26,37 @@
         <div class="ms-auto text-end">
             <!-- 수정, 삭제 버튼 -->
             <template v-if="!isDeletedComment && (unknown || isCommentAuthor || isAuthor)">
-                <EditButton @click.stop="editClick" />
-                <DeleteButton @click.stop="deleteClick" />
+                <div class="float-end ms-1">
+                    <slot name="gobackBtn"></slot>
+                    <EditButton @click.stop="editClick" :is-pushed="isEditPushed" />
+                    <DeleteButton :class="'ms-1'" @click.stop="deleteClick" :is-pushed="isDeletePushed" />
+                </div>
+            </template>
+            <template v-else>
+                <div class="float-end ms-1">
+                    <slot name="gobackBtn"></slot>
+                </div>
             </template>
 
             <!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->
-            <BoardRecommendBtn v-if="isLike" :boardId="boardId" :comment="comment" @updateReaction="handleUpdateReaction" />
+            <BoardRecommendBtn
+                v-if="isLike && !isDeletedComment"
+                :boardId="boardId"
+                :comment="comment"
+                :likeClicked="comment.likeClicked"
+                :dislikeClicked="comment.dislikeClicked"
+                @updateReaction="handleUpdateReaction"
+            />
         </div>
     </div>
 </template>
 
 <script setup>
-    import { computed, defineProps, defineEmits } from 'vue';
+    import { computed, defineProps, defineEmits, inject, onMounted } from 'vue';
     import DeleteButton from '../button/DeleteBtn.vue';
     import EditButton from '../button/EditBtn.vue';
     import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
 
-    // 기본 프로필 이미지 경로
-    const defaultProfile = '/img/icons/icon.png';
-
-    // 서버의 이미지 경로 (Vue 환경 변수 사용 가능)
-    const baseUrl = 'http://localhost:10325/'; // API 서버 URL
-
     // Props 정의
     const props = defineProps({
         comment: {
@@ -60,7 +75,7 @@
             type: String,
             default: '',
         },
-        profilePath: {
+        nickname: {
             type: String,
             default: '',
         },
@@ -94,9 +109,22 @@
             type: Boolean,
             default: false,
         },
+        profileImg: {
+            type: String,
+            default: false,
+        },
+        isEditPushed: {
+            type: Boolean,
+            require: false,
+        },
+        isDeletePushed: {
+            type: Boolean,
+            require: false,
+        },
     });
 
     const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
+    const $common = inject('common');
 
     const isDeletedComment = computed(() => {
         return props.comment?.content === '삭제된 댓글입니다' && props.comment?.updateAtRaw !== props.comment?.createdAtRaw;
@@ -122,7 +150,15 @@
     };
 
     // 프로필 이미지 경로 설정
-    const getProfileImage = profilePath => {
-        return profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
+    const getProfileImage = profileImg => {
+        return $common.getProfileImage(profileImg, props.unknown);
+    };
+
+    const setDefaultImage = e => {
+        return $common.setDefaultImage(e);
+    };
+
+    const showImage = e => {
+        return $common.showImage(e);
     };
 </script>

src/components/button/BoardRecommendBtn.vue

@@ -1,124 +1,89 @@
 <template v-if="isRecommend">
-    <button class="btn btn-label-primary btn-icon" :class="{'clicked': likeClicked, 'big': bigBtn}" @click="handleLike">
-        <i class="fa-regular fa-thumbs-up"></i> <span class="num">{{ likeCount }}</span>
+    <button
+        class="btn btn-label-primary btn-icon me-1"
+        :class="{ clicked: likeClicked, big: bigBtn, active: props.likeClicked }"
+        @click="handleLike"
+    >
+        <i class="fa-regular fa-thumbs-up"></i> <span class="ms-1">{{ likeCount }}</span>
     </button>
-    <button class="btn btn-label-danger btn-icon" :class="{'clicked': dislikeClicked, 'big': bigBtn}" @click="handleDislike">
-        <i class="fa-regular fa-thumbs-down"></i> <span class="num">{{ dislikeCount }}</span>
+    <button
+        class="btn btn-label-danger btn-icon"
+        :class="{ clicked: dislikeClicked, big: bigBtn, active: props.dislikeClicked }"
+        @click="handleDislike"
+    >
+        <i class="fa-regular fa-thumbs-down"></i> <span class="ms-1">{{ dislikeCount }}</span>
     </button>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+    import { ref, computed, watch } from 'vue';
 
-const props = defineProps({
-    comment: {
-        type: Object,
-        default: () => ({}),
-    },
-    likeClicked : {
-        type : Boolean,
-        default : false,
-    },
-    dislikeClicked : {
-        type : Boolean,
-        default : false,
-    },
-    bigBtn : {
-        type :Boolean,
-        default : false,
-    },
-    isRecommend: {
-        type:Boolean,
-        default:true,
-    },
-    boardId: {
-        type: Number,
-        required: true,
-    },
-    commentId: {
-        type: [Number, null],
-        default: null,
-    },
-    likeCount: {
-        type: Number,
-        default: 0,
-    },
-    dislikeCount: {
-        type: Number,
-        default: 0,
-    },
-});
+    const props = defineProps({
+        comment: {
+            type: Object,
+            default: () => ({}),
+        },
+        likeClicked: {
+            type: Boolean,
+            default: false,
+        },
+        dislikeClicked: {
+            type: Boolean,
+            default: false,
+        },
+        bigBtn: {
+            type: Boolean,
+            default: false,
+        },
+        isRecommend: {
+            type: Boolean,
+            default: true,
+        },
+        boardId: {
+            type: Number,
+            required: true,
+        },
+        commentId: {
+            type: [Number, null],
+            default: null,
+        },
+        likeCount: {
+            type: Number,
+            default: 0,
+        },
+        dislikeCount: {
+            type: Number,
+            default: 0,
+        },
+    });
 
-const emit = defineEmits(['updateReaction']);
+    const emit = defineEmits(['updateReaction']);
 
-const likeClicked = ref(props.likeClicked);
-const dislikeClicked = ref(props.dislikeClicked);
-const likeCount = computed(() => props.comment?.likeCount ?? props.likeCount);
-const dislikeCount = computed(() => props.comment?.dislikeCount ?? props.dislikeCount);
+    const likeClicked = ref(props.likeClicked);
+    const dislikeClicked = ref(props.dislikeClicked);
+    const likeCount = computed(() => props.comment?.likeCount ?? props.likeCount);
+    const dislikeCount = computed(() => props.comment?.dislikeCount ?? props.dislikeCount);
 
-const handleLike = () => {
-    const isLike = !likeClicked.value;
-    const isDislike = false; 
+    watch([() => props.likeClicked, () => props.dislikeClicked], ([likeNewval, dislikeNewval]) => {
+        likeClicked.value = likeNewval;
+        dislikeClicked.value = dislikeNewval;
+    });
 
-    emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
-    likeClicked.value = isLike;
-    dislikeClicked.value = false;
-};
+    const handleLike = () => {
+        const isLike = !likeClicked.value;
+        const isDislike = false;
 
-const handleDislike = () => {
-    const isDislike = !dislikeClicked.value;
-    const isLike = false;
+        emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
+        likeClicked.value = isLike;
+        dislikeClicked.value = false;
+    };
 
-    emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
-    dislikeClicked.value = isDislike;
-    likeClicked.value = false;
-};
+    const handleDislike = () => {
+        const isDislike = !dislikeClicked.value;
+        const isLike = false;
 
+        emit('updateReaction', { boardId: props.boardId, commentId: props.commentId, isLike, isDislike });
+        dislikeClicked.value = isDislike;
+        likeClicked.value = false;
+    };
 </script>
-
-<style scoped>
-.btn + .btn {
-    margin-left: 5px;
-}
-
-.num {
-    margin-left: 5px;
-}
-
-.btn-label-danger.clicked {
-    background-color: #e6381a;
-}
-
-.btn-label-danger.clicked i,
-.btn-label-danger.clicked span {
-    color: #fff;
-}
-
-.btn-label-primary.clicked {
-    background-color: #5f61e6;
-}
-
-.btn-label-primary.clicked i,
-.btn-label-primary.clicked span  {
-    color : #fff;
-}
-
-.btn {
-    width: 55px;
-    height: 30px;
-}
-
-.btn.big {
-    width: 70px;
-    height: 70px;
-    font-size: 18px;
-}
-
-@media screen and  (max-width:450px) {
-    .btn {
-        width: 50px;
-        height: 20px;
-        font-size: 12px;
-    }
-}
-</style>

src/components/button/DeleteBtn.vue

@@ -1,13 +1,14 @@
 <template>
-    <button class="btn btn-label-primary btn-icon">
-        <i class='bx bx-trash' ></i>
+    <button class="btn btn-label-primary btn-icon" :class="{ active: props.isPushed }">
+        <i class="bx bx-trash"></i>
     </button>
 </template>
 
-<script>
-export default {
-    name: 'DeleteButton',
-    methods: {
-      },
-    };
+<script setup>
+    const props = defineProps({
+        isPushed: {
+            type: Boolean,
+            required: false,
+        },
+    });
 </script>

src/components/button/EditBtn.vue

@@ -1,30 +1,38 @@
 <template>
-    <button class="btn btn-label-primary btn-icon me-1" @click="toggleText">
+    <button class="btn btn-label-primary btn-icon" :class="{ active: props.isPushed }" @click="toggleText">
         <i :class="buttonClass"></i>
     </button>
 </template>
-
 <script setup>
-    import { ref, defineProps } from 'vue';
-
+    import { ref, watch, defineEmits, watchEffect } from 'vue';
     const props = defineProps({
         isToggleEnabled: {
             type: Boolean,
             default: false,
         },
+        isActive: {
+            type: Boolean,
+            required: false,
+        },
+        isPushed: {
+            type: Boolean,
+            required: false,
+        },
     });
-
+    const emit = defineEmits(['click']);
     const buttonClass = ref('bx bx-edit-alt');
-
-    const toggleText = () => {
+    watchEffect(() => {
+        buttonClass.value = props.isActive ? 'bx bx-x' : 'bx bx-edit-alt';
+    });
+    const toggleText = event => {
+        // 이벤트 객체를 매개변수로 받아옵니다
         if (props.isToggleEnabled) {
             buttonClass.value = buttonClass.value === 'bx bx-edit-alt' ? 'bx bx-x' : 'bx bx-edit-alt';
         }
+        emit('click', event); // 이벤트 객체를 같이 전달
     };
-
     const resetButton = () => {
         buttonClass.value = 'bx bx-edit-alt';
     };
-
     defineExpose({ resetButton });
 </script>

src/components/button/HalfDayButtons.vue

@@ -1,66 +1,72 @@
 <template>
-    <div class="menu gap-4 justify-content-center mt-5">
-        <!-- 오전 반차 버튼 -->
-        <button
-            class="vac-btn vac-btn-warning"
-            :class="{ active: halfDayType === 'AM' }"
-            @click="toggleHalfDay('AM')"
-        >
-        <i class="bi bi-sun"></i>
-        </button>
-        <!-- 오후 반차 버튼 -->
-        <button
-            class="vac-btn vac-btn-info"
-            :class="{ active: halfDayType === 'PM' }"
-            @click="toggleHalfDay('PM')"
-        >
-        <i class="bi bi-moon"></i>
-        </button>
-        <!-- 저장 버튼 -->
-        <div class="save-button-container">
-            <button class="btn-success" @click="addVacationRequests"
+    <div class="row gx-2 mb-10 mt-1">
+        <div class="col-3">
+            <div class="ratio ratio-1x1">
+                <!-- 오전 반차 버튼 -->
+                <button class="vac-btn vac-btn-warning rounded-circle d-flex align-items-center justify-content-center"
+                    :class="{ active: halfDayType === 'AM' }"
+                    @click="toggleHalfDay('AM')">
+                    <i class="bi bi-sun d-flex"></i>
+                </button>
+            </div>
+        </div>
+        <div class="col-3">
+            <div class="ratio ratio-1x1">
+                <!-- 오후 반차 버튼 -->
+                <button class="vac-btn vac-btn-info rounded-circle d-flex align-items-center justify-content-center"
+                    :class="{ active: halfDayType === 'PM' }"
+                    @click="toggleHalfDay('PM')">
+                    <i class="bi bi-moon d-flex"></i>
+                </button>
+            </div>
+        </div>
+        <div class="col-3">
+            <div class="ratio ratio-1x1">
+                <!-- 풀 연차 버튼 -->
+                <button class="vac-btn vac-btn-primary rounded-circle d-flex align-items-center justify-content-center"
+                    :class="{ active: halfDayType === 'FULL' }"
+                    @click="toggleHalfDay('FULL')">
+                    <i class="bi bi-calendar d-flex"></i>
+                </button>
+            </div>
+        </div>
+        <div class="col-3">
+            <div class="ratio ratio-1x1">
+                <!-- 저장 버튼 -->
+                <button class="vac-btn-success rounded-circle d-flex align-items-center justify-content-center"
+                    @click="addVacationRequests"
                     :class="{ active: !isDisabled, disabled: isDisabled }">
-                ✔
-            </button>
+                    ✔
+                </button>
+            </div>
         </div>
     </div>
 </template>
 
 <script setup>
-import { defineEmits, ref, defineProps, watch } from "vue";
+import { defineEmits, ref, defineProps } from "vue";
 
 const props = defineProps({
-isDisabled: Boolean,
-selectedDate: String // 날짜 선택 값을 props로 받음
+    isDisabled: Boolean
 });
 
 const emit = defineEmits(["toggleHalfDay", "addVacationRequests", "resetHalfDay"]);
 const halfDayType = ref(null);
 
 const toggleHalfDay = (type) => {
-halfDayType.value = halfDayType.value === type ? null : type;
-emit("toggleHalfDay", halfDayType.value);
+    halfDayType.value = halfDayType.value === type ? null : type;
+    emit("toggleHalfDay", halfDayType.value);
 };
 
-// `selectedDate`가 변경되면 반차 선택 초기화
-watch(() => props.selectedDate, (newDate) => {
-if (newDate) {
-resetHalfDay();
-}
-});
-
-// 날짜 선택 후 반차 버튼 상태 초기화
+// 날짜 클릭 후 버튼 상태 자동 초기화
 const resetHalfDay = () => {
-halfDayType.value = null;
-emit("resetHalfDay");
+    halfDayType.value = null;
+    emit("resetHalfDay");
 };
 
 const addVacationRequests = () => {
-emit("addVacationRequests");
+    emit("addVacationRequests");
 };
 
 defineExpose({ resetHalfDay });
 </script>
-
-<style scoped>
-</style>

src/components/button/PlusBtn.vue

@@ -1,13 +1,14 @@
 <template>
     <button class="btn btn-label-primary btn-icon">
-   <i class="icon-base bx bx-plus"></i>
-   </button>
+        <slot>
+            <i class="icon-base bx bx-plus"></i>
+        </slot>
+    </button>
 </template>
 
 <script>
-export default {
-   name: 'PlusButton',
-   methods: {
-     },
-   };
+    export default {
+        name: 'PlusButton',
+        methods: {},
+    };
 </script>

src/components/button/SaveBtn.vue

@@ -1,23 +1,18 @@
 <template>
-    <button
-        type="button"
-        class="btn btn-primary ms-1"
-        @click="$emit('click')"
-        :disabled="!isEnabled"
-    >
+    <button type="button" class="btn btn-primary ms-1" @click="$emit('click')" :disabled="!isEnabled">
         <i class="bx bx-check"></i>
     </button>
 </template>
 
 <script>
-export default {
-    name: "SaveButton",
-    props: {
-        isEnabled: {
-            type: Boolean,
-            default: true, // 기본적으로 활성화
+    export default {
+        name: 'SaveButton',
+        props: {
+            isEnabled: {
+                type: Boolean,
+                default: true, // 기본적으로 활성화
+            },
         },
-    },
-    emits: ["click"],
-};
+        emits: ['click'],
+    };
 </script>

src/components/button/ScrollTopButton.vue

@@ -0,0 +1,87 @@
+<template>
+    <!-- 뒤로가기 -->
+    <button
+        v-if="canGoBack"
+        @click="goBack"
+        :disabled="!canGoBack"
+        :class="{ 'shifted': showButton }"
+        class="back-btn rounded-pill btn-icon btn-secondary position-fixed shadow z-5 border-0">
+        <i class='bx bx-chevron-left'></i>
+    </button>
+
+    <!-- 맨 위로 -->
+    <button
+        @click="scrollToTop"
+        class="scroll-top-btn rounded-pill btn-icon btn-primary position-fixed shadow z-5 border-0"
+        :class="{ 'visible': showButton, 'hidden': !showButton }"
+    >
+        <i class='bx bx-chevron-up'></i>
+    </button>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+const showButton = ref(false);
+const canGoBack = ref(false);
+const route = useRoute();
+const router = useRouter();
+const loginPagePath = "/login"; // 로그인 페이지 기본 경로
+
+// 스크롤 이벤트 핸들러
+const handleScroll = () => {
+    showButton.value = window.scrollY > 200;
+};
+
+// 최상단으로 스크롤 이동
+const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+};
+
+// 뒤로 가기 처리
+const goBack = () => {
+    if (canGoBack.value) {
+        router.back();
+    }
+};
+
+// 뒤로 가기 가능 여부 확인 함수
+const updateCanGoBack = () => {
+    const historyBack = router.options.history.state.back;
+    const previousPage = document.referrer;
+
+    // URL에서 경로만 추출하는 함수
+    const getPath = (url) => {
+        try {
+            return new URL(url, window.location.origin).pathname; // 쿼리 제거
+        } catch {
+            return ""; // 잘못된 URL 처리
+        }
+    };
+
+    const previousPath = getPath(previousPage);
+
+    // 뒤로 갈 수 있는 조건:
+    canGoBack.value = !!historyBack
+        && getPath(historyBack) !== loginPagePath
+        && !previousPath.startsWith(loginPagePath);
+};
+
+// 마운트 시 한 번 실행
+onMounted(() => {
+    window.addEventListener("scroll", handleScroll);
+    updateCanGoBack();
+});
+
+// 라우트가 변경될 때마다 `canGoBack` 업데이트
+watch(route, () => {
+    updateCanGoBack();
+});
+
+// 언마운트 시 이벤트 제거
+onUnmounted(() => {
+    window.removeEventListener("scroll", handleScroll);
+});
+
+</script>

src/components/button/WriteBtn.vue

@@ -5,17 +5,28 @@
 </template>
 
 <script setup>
-import { ref, defineProps, defineExpose } from 'vue';
+import { ref, defineProps, defineExpose, watch } from 'vue';
 
 const props = defineProps({
     isToggleEnabled: {
         type: Boolean,
         default: false,
     },
+    isActive: {
+            type: Boolean,
+            required: false,
+    },
 });
 
 const buttonClass = ref("bx bx-edit");
 
+watch(
+    () => props.isActive,
+    newVal => {
+        buttonClass.value = newVal ? 'bx bx-x' : 'bx bx-edit';
+    },
+);
+
 const toggleText = () => {
     if (props.isToggleEnabled) {
         buttonClass.value = buttonClass.value === "bx bx-edit" ? "bx bx-x" : "bx bx-edit";

src/components/category/CategoryBtn.vue

@@ -1,54 +1,65 @@
 <template>
     <ul class="cate-list list-unstyled d-flex flex-wrap mb-0">
+        <li v-if="showAll" class="mt-2 me-2">
+        <button
+            type="button"
+            class="btn"
+            :class="{
+            'btn-outline-primary': selectedCategory !== 'all',
+            'btn-primary': selectedCategory === 'all'
+            }"
+            @click="selectCategory('all')"
+        >
+            All
+        </button>
+        </li>
         <li v-for="category in lists" :key="category.value" class="mt-2 me-2">
-            <button
-                type="button"
-                class="btn"
-                :class="{
-                    'btn-outline-primary': category.value !== selectedCategory,
-                    'btn-primary': category.value === selectedCategory
+        <button
+            type="button"
+            class="btn"
+            :class="{
+                'btn-outline-primary': category.value.toString() !== selectedCategory?.toString(),
+                'btn-primary': category.value.toString() === selectedCategory?.toString()
                 }"
-                @click="selectCategory(category.value)"
-            >
-                {{ category.label }}
-            </button>
+            @click="selectCategory(category.value)"
+        >
+            {{ category.label }}
+        </button>
         </li>
     </ul>
-
 </template>
 
 <script setup>
-import { defineProps, ref } from 'vue';
+import { defineProps, defineEmits, ref, watch } from 'vue';
 
-// lists prop 정의
 const props = defineProps({
     lists: {
         type: Array,
         required: true,
     },
+    showAll: {
+        type: Boolean,
+        required: false,
+    },
+    selectedCategory: {
+        type: [String,Number],
+        default: null,
+        required: false,
+    },
 });
 
 // 카테고리 선택
-const selectedCategory = ref(null);
-const emit = defineEmits();
+const selectedCategory = ref(props.selectedCategory);
+
+const emit = defineEmits(['update:data']);
 const selectCategory = (cate) => {
     selectedCategory.value = selectedCategory.value === cate ? null : cate;
     emit('update:data', selectedCategory.value);
 };
+
+watch(() => props.selectedCategory, (newVal) => {
+    selectedCategory.value = newVal;
+});
+
+
 </script>
-
-
-<style scoped>
-
-
-@media (max-width: 768px) {
-    .cate-list {
-        overflow-x: scroll;
-        flex-wrap: nowrap !important;
-
-        li {
-            flex: 0 0 auto;
-        }
-    }
-}
-</style>

src/components/commuters/CommuteCalendar.vue

@@ -1,247 +0,0 @@
-<template>
-    <div class="container-xxl flex-grow-1 container-p-y">
-        <div class="card app-calendar-wrapper">
-            <div class="row g-0">
-                <div class="col-3 border-end text-center">
-                    <div class="card-body pb-0">
-                        <img v-if="user" :src="`${baseUrl}upload/img/profile/${user.profile}`" alt="Profile Image" class="w-px-50 h-auto rounded-circle" @error="$event.target.src = '/img/icons/icon.png'"/>
-                        <p class="mt-2">
-                            {{ user.name }}
-                        </p>
-
-                        <div class="row g-0">
-                            <div class="col-6 pe-1">
-                                <p>출근시간</p>
-                                <button class="btn btn-outline-primary border-3 w-100 py-0">
-                                    <i class='bx bx-run fs-2'></i>
-                                </button>
-                            </div>
-
-                            <div class="col-6 ps-1">
-                                <p>퇴근시간</p>
-                                <button class="btn btn-outline-secondary border-3 w-100 py-0">
-                                    <i class='bx bxs-door-open fs-2'></i>
-                                </button>
-                            </div>
-
-                            <div v-for="post in project" :key="post.PROJCTSEQ" class="border border-2 mt-3" :style="`border-color: ${post.projctcolor} !important; color: ${post.projctcolor} !important;`">
-                                {{ post.PROJCTNAM }}
-                            </div>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="col app-calendar-content">
-                    <div class="card shadow-none border-0">
-                        <div class="card-body pb-0">
-                            <full-calendar
-                                ref="fullCalendarRef"
-                                :events="calendarEvents"
-                                :options="calendarOptions"
-                                defaultView="dayGridMonth"
-                                class="flatpickr-calendar-only"
-                            >
-                            </full-calendar>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <center-modal :display="isModalVisible" @close="isModalVisible = $event">
-        <template #title> Add Event </template>
-        <template #body>
-            <FormInput
-                title="이벤트 제목"
-                name="event"
-                :is-essential="true"
-                :is-alert="eventAlert"
-                @update:data="eventTitle = $event"
-            />
-            <FormInput
-                title="이벤트 날짜"
-                type="date"
-                name="eventDate"
-                :is-essential="true"
-                :is-alert="eventDateAlert"
-                @update:data="eventDate = $event"
-            />
-        </template>
-        <template #footer>
-            <button @click="addEvent">추가</button>
-        </template>
-    </center-modal>
-</template>
-
-<script setup>
-import FullCalendar from '@fullcalendar/vue3';
-import dayGridPlugin from '@fullcalendar/daygrid';
-import interactionPlugin from '@fullcalendar/interaction';
-import CenterModal from '@c/modal/CenterModal.vue';
-import { inject, onMounted, reactive, ref, watch } from 'vue';
-import $api from '@api';
-import { isEmpty } from '@/common/utils';
-import FormInput from '../input/FormInput.vue';
-import 'flatpickr/dist/flatpickr.min.css';
-import '@/assets/css/app-calendar.css';
-import { fetchHolidays } from '@c/calendar/holiday';
-import { useUserInfoStore } from '@/stores/useUserInfoStore';
-import { useProjectStore } from '@/stores/useProjectStore';
-
-const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
-const user = ref({});
-const project = ref({});
-const userStore = useUserInfoStore();
-const projectStore = useProjectStore();
-
-const dayjs = inject('dayjs');
-const fullCalendarRef = ref(null);
-const calendarEvents = ref([]);
-const isModalVisible = ref(false);
-const eventAlert = ref(false);
-const eventDateAlert = ref(false);
-const eventTitle = ref('');
-const eventDate = ref('');
-const selectedDate = ref(null);
-
-
-// 날짜 선택 핸들러
-const handleDateSelect = (selectedDates) => {
-    if (selectedDates.length > 0) {
-        // 선택된 첫 번째 날짜를 YYYY-MM-DD 형식으로 변환
-        const selectedDate = dayjs(selectedDates[0]).format('YYYY-MM-DD');
-        eventDate.value = selectedDate;
-        showModal();  // 모달 표시
-    }
-};
-
-// 캘린더 데이터 가져오기
-const fetchData = async () => {
-    // FullCalendar API 인스턴스 가져오기
-    const calendarApi = fullCalendarRef.value?.getApi();
-    if (!calendarApi) return;
-
-    // 현재 표시된 달력의 연도, 월 추출
-    const date = calendarApi.currentData.viewTitle;
-    const dateArr = date.split(' ');
-    let currentYear = dateArr[0].trim();
-    let currentMonth = dateArr[1].trim();
-    const regex = /\D/g;
-    // 숫자가 아닌 문자 제거 후 정수로 변환
-    currentYear = parseInt(currentYear.replace(regex, ''), 10);
-    currentMonth = parseInt(currentMonth.replace(regex, ''), 10);
-
-    try {
-        // 현재 표시 중인 월의 공휴일 정보 가져오기
-        const holidayEvents = await fetchHolidays(currentYear, String(currentMonth).padStart(2, '0'));
-        // 기존 이벤트에서 공휴일 이벤트를 제외한 이벤트만 필터링
-        const existingEvents = calendarEvents.value.filter(event => !event.classNames?.includes('holiday-event'));
-        // 필터링된 이벤트와 새로 가져온 공휴일 이벤트 병합
-        calendarEvents.value = [...existingEvents, ...holidayEvents];
-    } catch (error) {
-        console.error('공휴일 정보 로딩 실패:', error);
-    }
-};
-
-// 캘린더 이동 함수 (이전, 다음, 오늘)
-const moveCalendar = async (value = 0) => {
-    const calendarApi = fullCalendarRef.value?.getApi();
-
-    if (value === 1) {
-        calendarApi.prev();  // 이전 달로 이동
-    } else if (value === 2) {
-        calendarApi.next();  // 다음 달로 이동
-    } else if (value === 3) {
-        calendarApi.today();  // 오늘 날짜로 이동
-    }
-
-    // 캘린더 이동 후 데이터 다시 가져오기
-    await fetchData();
-};
-
-// 모달 표시 함수
-const showModal = () => {
-    isModalVisible.value = true;
-};
-
-// 모달 닫기 함수
-const closeModal = () => {
-    isModalVisible.value = false;
-    // 입력 필드 초기화
-    eventTitle.value = '';
-    eventDate.value = '';
-};
-
-// 이벤트 추가 함수
-const addEvent = () => {
-    // 이벤트 유효성 검사
-    if (!checkEvent()) {
-        // 유효성 검사 통과 시 이벤트 추가
-        calendarEvents.value.push({
-            title: eventTitle.value,
-            start: eventDate.value,
-            backgroundColor: '#4CAF50'  // 일반 이벤트 색상
-        });
-        closeModal();  // 모달 닫기
-    }
-};
-
-// 이벤트 유효성 검사 함수
-const checkEvent = () => {
-    // 제목과 날짜가 비어있는지 확인
-    eventAlert.value = isEmpty(eventTitle.value);
-    eventDateAlert.value = isEmpty(eventDate.value);
-    // 하나라도 비어있으면 true 반환 (유효성 검사 실패)
-    return eventAlert.value || eventDateAlert.value;
-};
-
-// 캘린더 옵션 설정
-const calendarOptions = reactive({
-    plugins: [dayGridPlugin, interactionPlugin],  // 사용할 플러그인
-    initialView: 'dayGridMonth',                  // 초기 뷰 (월간)
-    headerToolbar: {                              // 상단 툴바 구성
-        left: 'today',                            // 왼쪽: 오늘 버튼
-        center: 'title',                          // 중앙: 제목(연월)
-        right: 'prev,next',                       // 오른쪽: 이전/다음 버튼
-    },
-    locale: 'kr',                                 // 한국어 지역화
-    events: calendarEvents,                       // 표시할 이벤트 데이터
-    eventOrder: 'sortIdx',                        // 이벤트 정렬 기준
-    selectable: true,                             // 날짜 선택 가능 여부
-    dateClick: handleDateSelect,                  // 날짜 클릭 이벤트 핸들러
-    droppable: false,                             // 드래그 앤 드롭 비활성화
-    eventDisplay: 'block',                        // 이벤트 표시 방식
-
-    // 커스텀 버튼 정의
-    customButtons: {
-        prev: {
-            text: 'PREV',                         // 이전 버튼 텍스트
-            click: () => moveCalendar(1),         // 클릭 시 이전 달로 이동
-        },
-        today: {
-            text: 'TODAY',                        // 오늘 버튼 텍스트
-            click: () => moveCalendar(3),         // 클릭 시 오늘로 이동
-        },
-        next: {
-            text: 'NEXT',                         // 다음 버튼 텍스트
-            click: () => moveCalendar(2),         // 클릭 시 다음 달로 이동
-        },
-    },
-});
-
-// 달력 뷰 변경 감지 (월 변경 시 데이터 다시 가져오기)
-watch(() => fullCalendarRef.value?.getApi().currentData.viewTitle, async () => {
-    await fetchData();
-});
-
-
-console.log(project)
-onMounted(async () => {
-    await fetchData();
-    await userStore.userInfo();
-    user.value = userStore.user;
-    await projectStore.getProjectList();
-    project.value = projectStore.projectList;
-});
-</script>

src/components/commuters/CommuterBtn.vue

@@ -0,0 +1,223 @@
+<template>
+    <div class="row g-0">
+        <div class="col-6 pe-1">
+            <button
+            class="btn border-3 w-100 py-0 h-px-50"
+            :class="workTime ? 'p-0 btn-primary pe-none' : 'btn-outline-primary'"
+            @click="setWorkTime"
+            >
+            <i v-if="!workTime" class="bx bx-run fs-2"></i>
+            <span v-if="workTime" class="ql-size-12px">{{ workTime }}</span>
+            </button>
+        </div>
+
+        <div class="col-6 ps-1">
+            <button
+            class="btn border-3 w-100 py-0 h-px-50"
+            :class="!workTime ? 'btn-outline-secondary pe-none disabled' : 'btn-outline-secondary'"
+            @click="setLeaveTime"
+            :disabled="!workTime"
+            >
+                <i v-if="!leaveTime" class='bx bxs-door-open fs-2'></i>
+                <span v-if="leaveTime" class="ql-size-12px">{{ leaveTime }}</span>
+            </button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, onMounted, watch } from 'vue';
+import $api from '@api';
+import { useGeolocation } from '@vueuse/core';
+
+const props = defineProps({
+    userId: {
+        type: Number,
+        required: false
+    },
+    checkedInProject: {
+        type: Object,
+        required: false
+    },
+    pendingProjectChange: {
+        type: Object,
+        default: null
+    }
+});
+
+const emit = defineEmits(['workTimeUpdated', 'leaveTimeUpdated', 'projectChangeComplete', 'update:pendingProjectChange']);
+
+const workTime = ref(null);
+const leaveTime  = ref(null)
+const userLocation = ref(null);
+
+// 위치 정보 가져오기 설정
+const { coords, isSupported, error } = useGeolocation({
+    enableHighAccuracy: true,
+});
+
+// 주소 변환 함수
+const getAddress = async (lat, lng) => {
+    return new Promise((resolve, reject) => {
+        if (typeof kakao === 'undefined' || !kakao.maps) {
+            reject('Kakao Maps API가 로드되지 않았습니다.');
+            return;
+        }
+
+        const geocoder = new kakao.maps.services.Geocoder();
+
+        geocoder.coord2Address(lng, lat, (result, status) => {
+
+            if (status === kakao.maps.services.Status.OK) {
+                if (result && result.length > 0 && result[0].address) {
+                    const address = result[0].address.address_name;
+                    resolve(address);
+                } else {
+                    // 결과가 있지만 주소가 없는 경우
+                    reject('주소 정보가 없습니다.');
+                }
+            } else if (status === kakao.maps.services.Status.ZERO_RESULT) {
+                // ZERO_RESULT 상태 처리
+                // 좌표로 주소를 찾지 못했을 때 도로명 주소로 시도
+                geocoder.coord2RegionCode(lng, lat, (regionResult, regionStatus) => {
+                    if (regionStatus === kakao.maps.services.Status.OK && regionResult.length > 0) {
+                        // 행정구역 정보로 대체
+                        const region = regionResult[0].address_name;
+                        resolve(`[대략적 위치] ${region}`);
+                    } else {
+                        // 행정구역 정보도 없는 경우 좌표 자체를 반환
+                        resolve(`위도: ${lat}, 경도: ${lng} (주소 정보 없음)`);
+                    }
+                });
+            } else {
+                reject(`주소를 가져올 수 없습니다. 상태: ${status}`);
+            }
+        });
+    });
+};
+
+
+// 위치 정보 가져오기 함수
+const getLocation = async () => {
+    if (!isSupported.value) {
+        alert('브라우저가 위치 정보를 지원하지 않습니다.');
+        return null;
+    }
+
+    if (error.value) {
+        alert(`위치 정보를 가져오는데 실패했습니다: ${error.value.message}`);
+        return null;
+    }
+
+    if (!coords.value) {
+        return null;
+    }
+
+    userLocation.value = {
+        lat: coords.value.latitude,
+        lng: coords.value.longitude,
+    };
+
+    try {
+        const address = await getAddress(coords.value.latitude, coords.value.longitude);
+        return address;
+    } catch (error) {
+        alert(error);
+        return null;
+    }
+};
+
+// 오늘 사용자의 출근 정보 조회
+const todayCommuterInfo = async () => {
+    if (!props.userId) return;
+
+        const res = await $api.get(`commuters/today/${props.userId}`);
+        if (res.status === 200) {
+        const commuterInfo = res.data.data[0];
+
+        if (commuterInfo) {
+            workTime.value = commuterInfo.COMMUTCMT;
+            leaveTime.value = commuterInfo.COMMUTLVE;
+
+            // 부모 컴포넌트에 상태 업데이트 알림
+            emit('workTimeUpdated', workTime.value);
+            emit('leaveTimeUpdated', leaveTime.value);
+        }
+    }
+};
+
+// 출근 시간
+const setWorkTime = async () => {
+    // 이미 출근 시간이 설정된 경우 중복 실행 방지
+    if (workTime.value) return;
+
+    // 현재 위치 주소 가져오기
+    const address = await getLocation();
+
+    if (!address) {
+        // 주소를 가져오지 못했을 때도 계속 진행할지 사용자에게 확인
+        if (!confirm('위치 정보를 가져오지 못했습니다. 위치 없이 출근 처리하시겠습니까?')) {
+            return;
+        }
+    }
+
+
+    $api.post('commuters/insert', {
+        memberSeq: props.userId,
+        projctSeq: props.checkedInProject.PROJCTSEQ,
+        commutLve: null,
+        commutArr: address,
+        commutOut: null,
+    }).then(res => {
+        if (res.status === 200) {
+            todayCommuterInfo();
+            emit('workTimeUpdated', true);
+        }
+    });
+};
+
+// 퇴근
+const setLeaveTime = async () => {
+    // 현재 위치 주소 가져오기
+    const address = await getLocation();
+
+
+    if (!address && !leaveTime.value) {
+        // 주소를 가져오지 못했을 때도 계속 진행할지 사용자에게 확인
+        if (!confirm('위치 정보를 가져오지 못했습니다. 위치 없이 퇴근 처리하시겠습니까?')) {
+            return;
+        }
+    }
+
+    $api.patch('commuters/updateLve', {
+        memberSeq: props.userId,
+        commutLve: leaveTime.value || null,
+        projctLve: props.pendingProjectChange ? props.pendingProjectChange.projctSeq : props.checkedInProject.PROJCTSEQ,
+        commutOut: address,
+    }).then(res => {
+        if (res.status === 200) {
+            todayCommuterInfo();
+            emit('leaveTimeUpdated');
+            emit('update:pendingProjectChange', null);
+        }
+    });
+};
+
+// props 변경 감지
+watch(() => props.userId, async () => {
+    if (props.userId) {
+        await todayCommuterInfo();
+    }
+});
+
+onMounted(async () => {
+    await todayCommuterInfo();
+});
+
+// 외부에서 접근할 메서드 노출
+defineExpose({
+    todayCommuterInfo,
+    workTime,
+    leaveTime
+});
+</script>

src/components/commuters/CommuterCalendar.vue

@@ -0,0 +1,520 @@
+<template>
+    <div class="container-xxl flex-grow-1 container-p-y">
+        <div class="card app-calendar-wrapper">
+            <div class="row g-0">
+                <div class="col-3 border-end text-center" id="app-calendar-sidebar">
+                    <div class="card-body">
+                        <img v-if="user" :src="`${baseUrl}upload/img/profile/${user.profile}`" alt="Profile Image" class="w-px-50 h-px-50 rounded-circle object-fit-cover" @error="$event.target.src = '/img/icons/icon.png'"/>
+                        <p class="mt-2 fw-bold">
+                            {{ user.name }}
+                        </p>
+
+                        <CommuterBtn
+                            :userId="user.id"
+                            :checkedInProject="checkedInProject || {}"
+                            :pendingProjectChange="pendingProjectChange"
+                            @update:pendingProjectChange="pendingProjectChange = $event"
+                            @workTimeUpdated="handleWorkTimeUpdate"
+                            @leaveTimeUpdated="handleLeaveTimeUpdate"
+                            ref="workTimeComponentRef"
+                        />
+
+                        <CommuterProjectList
+                            :project="project"
+                            :commuters="commuters"
+                            :baseUrl="baseUrl"
+                            :user="user"
+                            :selectedProject="selectedProject"
+                            :checkedInProject="checkedInProject"
+                            @drop="handleProjectDrop"
+                        />
+                    </div>
+                </div>
+
+                <div class="col app-calendar-content">
+                    <div class="card shadow-none border-0">
+                        <div class="card-body">
+                            <full-calendar
+                                ref="fullCalendarRef"
+                                :events="calendarEvents"
+                                :options="calendarOptions"
+                                defaultView="dayGridMonth"
+                                class="flatpickr-calendar-only"
+                            >
+                            </full-calendar>
+                            <input ref="calendarDatepicker" type="text" class="d-none" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <CenterModal :display="isModalOpen" @close="closeModal">
+        <template #title>
+            {{ eventDate }}
+        </template>
+        <template #body>
+            <div v-if="selectedDateCommuters.length > 0">
+                <div v-for="(commuter, index) in selectedDateCommuters" :key="index">
+                    <div class="row my-2 d-flex align-items-center">
+                        <div class="col-4">
+                            <img :src="`${baseUrl}upload/img/profile/${commuter.profile}`"
+                            class="me-2 w-px-50 h-px-50 rounded-circle object-fit-cover"
+                            @error="$event.target.src = '/img/icons/icon.png'">
+
+                            <span class="fw-bold">{{ commuter.memberName }}</span>
+                        </div>
+
+                        <div class="col-8">
+                            <div class="d-flex gap-1 align-items-center">
+                                출근 :
+                                <MapPopover
+                                    :address="commuter.projectAddress"
+                                    :is-visible="visiblePopover.type === 'project' && visiblePopover.index === index"
+                                    @update-visible="updatePopover('project', index)"
+                                    v-if="commuter.projectAddress"
+                                >
+                                    <template #trigger>
+                                        <div
+                                            class="text-white rounded px-2 cursor-pointer"
+                                            :style="`background: ${commuter.projctcolor} !important;`"
+                                        >
+                                            {{ commuter.PROJCTNAM }}
+                                        </div>
+                                    </template>
+                                </MapPopover>
+                                <span class="ms-auto">
+                                    ({{ commuter.COMMUTCMT }})
+                                </span>
+                            </div>
+
+                            <div v-if="commuter.PROJCTLVE" class="d-flex gap-1 mt-1">
+                                퇴근 :
+                                <MapPopover
+                                    :address="commuter.leaveProjectAddress"
+                                    :is-visible="visiblePopover.type === 'leave' && visiblePopover.index === index"
+                                    @update-visible="updatePopover('leave', index)"
+                                    v-if="commuter.leaveProjectAddress"
+                                >
+                                    <template #trigger>
+                                        <div
+                                            class="text-white rounded px-2 cursor-pointer"
+                                            :style="`background: ${commuter.leaveProjectColor} !important;`"
+                                        >
+                                            {{ commuter.leaveProjectName }}
+                                        </div>
+                                    </template>
+                                </MapPopover>
+                                <span class="ms-auto">
+                                    ({{ commuter.COMMUTLVE || "00:00:00" }})
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <BackBtn @click="closeModal" />
+        </template>
+    </CenterModal>
+
+</template>
+
+<script setup>
+import FullCalendar from '@fullcalendar/vue3';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import CenterModal from '@c/modal/CenterModal.vue';
+import { computed, inject, nextTick, onMounted, reactive, ref, watch } from 'vue';
+import $api from '@api';
+import 'flatpickr/dist/flatpickr.min.css';
+import '@/assets/css/app-calendar.css';
+import { fetchHolidays } from '@c/calendar/holiday';
+import { useUserInfoStore } from '@/stores/useUserInfoStore';
+import { useProjectStore } from '@/stores/useProjectStore';
+import CommuterBtn from '@c/commuters/CommuterBtn.vue';
+import CommuterProjectList from '@c/commuters/CommuterProjectList.vue';
+import BackBtn from '@c/button/BackBtn.vue';
+import MapPopover from '@c/map/MapPopover.vue';
+import { useDatePicker } from '@/stores/useDatePicker';
+
+const datePickerStore = useDatePicker();
+
+const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
+const user = ref({});
+const project = ref({});
+const userStore = useUserInfoStore();
+const projectStore = useProjectStore();
+
+const dayjs = inject('dayjs');
+const fullCalendarRef = ref(null);
+const workTimeComponentRef = ref(null);
+const calendarEvents = ref([]);
+const eventDate = ref('');
+
+const selectedProject = ref(null);
+const checkedInProject = ref(null);
+
+const isModalOpen = ref(false);
+
+const visiblePopover = ref({
+  type: null,  // 'project' 또는 'leave'
+  index: null  // 팝오버 인덱스
+});
+
+
+const commuters = ref([]);
+const monthlyCommuters = ref([]);
+
+const calendarDatepicker = ref(null);
+
+const pendingProjectChange = ref(null);
+
+
+// 출퇴근 컴포넌트 이벤트 핸들러
+const handleWorkTimeUpdate = () => {
+    todaysCommuter();
+    loadCommuters();
+};
+
+const handleLeaveTimeUpdate = async () => {
+    await todaysCommuter(); // 최신 출근자 목록 다시 로드
+
+    // 현재 사용자의 퇴근 기록이 null인지 확인
+    const currentUserCommuter = commuters.value.find(c => c.MEMBERSEQ === user.value.id);
+    if (currentUserCommuter && !currentUserCommuter.COMMUTLVE) {
+        await projectStore.getMemberProjects();
+
+        if (projectStore.activeMemberProjectList.length > 0) {
+            const previousProject = projectStore.activeMemberProjectList.find(
+                p => commuters.value.some(c => c.MEMBERSEQ === user.value.id && c.PROJCTLVE === p.PROJCTSEQ)
+            ) || projectStore.activeMemberProjectList[0]; // 이전 출근 프로젝트가 없으면 첫 번째 프로젝트
+
+            if (previousProject) {
+                selectedProject.value = previousProject.PROJCTSEQ;
+                projectStore.setSelectedProject(previousProject);
+            } else if (projectStore.activeProjectList.length > 0) {
+                selectedProject.value = projectStore.activeProjectList[0].PROJCTSEQ;
+                projectStore.setSelectedProject(projectStore.activeProjectList[0]);
+            } else {
+                selectedProject.value = null;
+                projectStore.setSelectedProject(null);
+            }
+        } else {
+            selectedProject.value = null;
+            projectStore.setSelectedProject(null);
+        }
+    }
+};
+
+// 프로젝트 드롭 이벤트 핸들러 (ProjectList 컴포넌트에서 전달받음)
+const handleProjectDrop = ({ event, targetProject }) => {
+    const draggedProjectData = JSON.parse(event.dataTransfer.getData('application/json'));
+
+    // 기존 프로젝트와 동일한 경우 변경 안 함
+    if (draggedProjectData.PROJCTSEQ === targetProject.PROJCTSEQ) {
+        return;
+    }
+
+    pendingProjectChange.value = {
+        projctSeq: targetProject.PROJCTSEQ,
+        memberSeq: user.value.id
+    };
+
+    checkedInProject.value = targetProject;
+    selectedProject.value = targetProject.PROJCTSEQ;
+    projectStore.setSelectedProject(targetProject);
+
+    // 기존 UI 업데이트
+    commuters.value = commuters.value.map(commuter =>
+        commuter.MEMBERSEQ === user.value.id
+            ? { ...commuter, PROJCTNAM: targetProject.PROJCTNAM, PROJCTLVE: targetProject.PROJCTSEQ }
+            : commuter
+    );
+
+    // 드롭 후 CommuterBtn 컴포넌트의 상태를 업데이트 (출근/퇴근 버튼 상태 변경)
+    if (workTimeComponentRef.value && workTimeComponentRef.value.fetchWorkTime) {
+        workTimeComponentRef.value.fetchWorkTime();
+    }
+};
+
+// 오늘 출근 모든 사용자 조회
+const todaysCommuter = async () => {
+    const res = await $api.get(`commuters/todays`);
+    if (res.status === 200 ) {
+        commuters.value = res.data.data;
+    }
+};
+
+// 캘린더 데이터 가져오기
+const fetchData = async () => {
+    // FullCalendar API 인스턴스 가져오기
+    const calendarApi = fullCalendarRef.value?.getApi();
+    if (!calendarApi) return;
+
+    // 현재 표시된 달력의 연도, 월 추출
+    const date = calendarApi.currentData.viewTitle;
+    const dateArr = date.split(' ');
+    let currentYear = dateArr[0].trim();
+    let currentMonth = dateArr[1].trim();
+    const regex = /\D/g;
+    // 숫자가 아닌 문자 제거 후 정수로 변환
+    currentYear = parseInt(currentYear.replace(regex, ''), 10);
+    currentMonth = parseInt(currentMonth.replace(regex, ''), 10);
+
+    try {
+        // 현재 표시 중인 월의 공휴일 정보 가져오기
+        const holidayEvents = await fetchHolidays(currentYear, String(currentMonth).padStart(2, '0'));
+        // 기존 이벤트에서 공휴일 이벤트를 제외한 이벤트만 필터링
+        const existingEvents = calendarEvents.value.filter(event => !event.classNames?.includes('holiday-event'));
+        // 필터링된 이벤트와 새로 가져온 공휴일 이벤트 병합
+        calendarEvents.value = [...existingEvents, ...holidayEvents];
+
+        // 출근 정보
+        await loadCommuters();
+
+    } catch (error) {
+        console.error('공휴일 정보 로딩 실패:', error);
+    }
+};
+
+// 캘린더 이동 함수 (이전, 다음, 오늘)
+const moveCalendar = async (value = 0) => {
+    const calendarApi = fullCalendarRef.value?.getApi();
+
+    if (value === 1) {
+        calendarApi.prev();  // 이전 달로 이동
+    } else if (value === 2) {
+        calendarApi.next();  // 다음 달로 이동
+    } else if (value === 3) {
+        calendarApi.today();  // 오늘 날짜로 이동
+    }
+
+    await fetchData();
+};
+
+// 날짜 선택 가능 여부를 확인하는 공통 함수
+const isSelectableDate = (date) => {
+    const checkDate = dayjs(date);
+    const isWeekend = checkDate.day() === 0 || checkDate.day() === 6;
+    // 공휴일 체크
+    const isHoliday = calendarEvents.value.some(event =>
+        event.classNames?.includes('holiday-event') &&
+        dayjs(event.start).format('YYYY-MM-DD') === checkDate.format('YYYY-MM-DD')
+    );
+
+    return !isWeekend && !isHoliday;
+};
+
+
+// 날짜 클릭 이벤트 함수
+let todayElement = null;
+const handleDateClick = (info) => {
+    const clickedDate = dayjs(info.date).format('YYYY-MM-DD');
+
+    // 클릭한 날짜에 월별 출근 정보가 있는지 확인
+    const dateCommuters = monthlyCommuters.value.filter(commuter =>
+        commuter.COMMUTDAY === clickedDate
+    );
+
+    // 출근 기록이 있는 경우에만 모달 열기
+    if (dateCommuters.length > 0) {
+        eventDate.value = clickedDate;
+        isModalOpen.value = true;
+    }
+
+    if (isSelectableDate(info.date)) {
+        const isToday = dayjs(info.date).isSame(dayjs(), 'day');
+
+        if (isToday) {
+            // 오늘 날짜 클릭 시 클래스 제거하고 요소 저장
+            todayElement = info.dayEl;
+            todayElement.classList.remove('fc-day-today');
+        } else if (todayElement) {
+            // 다른 날짜 클릭 시 저장된 오늘 요소에 클래스 다시 추가
+            todayElement.classList.add('fc-day-today');
+            todayElement = null;
+        }
+    }
+};
+
+// 바깥 클릭 시 todayElement 클래스 복구
+document.addEventListener('click', (event) => {
+    if (todayElement && !event.target.closest('.fc-daygrid-day')) {
+        todayElement.classList.add('fc-day-today');
+        todayElement = null;
+    }
+}, true);
+
+// 날짜 셀 클래스 추가 함수
+const getCellClassNames = (arg) => {
+    const cellDate = dayjs(arg.date);
+    const classes = [];
+
+    // 선택 불가능한 날짜(과거, 주말, 공휴일)에 동일한 클래스 추가
+    if (!isSelectableDate(cellDate)) {
+        classes.push('fc-day-sat-sun');
+    }
+
+    return classes;
+};
+
+// 현재 달의 모든 출근 정보 조회
+const loadCommuters = async () => {
+    const calendarApi = fullCalendarRef.value?.getApi();
+    if (!calendarApi) return;
+    const date = calendarApi.currentData.viewTitle;
+    const dateArr = date.split(' ');
+    let currentYear = dateArr[0].trim();
+    let currentMonth = dateArr[1].trim();
+    const regex = /\D/g;
+    currentYear = parseInt(currentYear.replace(regex, ''), 10);
+    currentMonth = parseInt(currentMonth.replace(regex, ''), 10);
+
+    const res = await $api.get('commuters/month', {
+        params: {
+            year: currentYear,
+            month: currentMonth
+        }
+    });
+    if (res.status === 200) {
+        // 월별 출근 정보 저장
+        monthlyCommuters.value = res.data.data;
+
+        document.querySelectorAll('.fc-daygrid-day-events img.rounded-circle').forEach(img => {
+            img.remove();
+        });
+
+        monthlyCommuters.value.forEach(commuter => {
+            const date = commuter.COMMUTDAY;
+            const dateCell = document.querySelector(`.fc-day[data-date="${date}"]`) ||
+                document.querySelector(`.fc-daygrid-day[data-date="${date}"]`);
+            if (dateCell) {
+                const dayEvents = dateCell.querySelector('.fc-daygrid-day-events');
+                if (dayEvents) {
+                    dateCell.setAttribute('data-has-commuters', 'true');
+                    dayEvents.classList.add('text-center');
+                    // 프로필 이미지 생성
+                    const profileImg = document.createElement('img');
+                    profileImg.src = `${baseUrl}upload/img/profile/${commuter.profile}`;
+                    profileImg.className = 'rounded-circle w-px-20 h-px-20 mx-1 mb-1 position-relative z-5 m-auto object-fit-cover';
+                    profileImg.style.border = `2px solid ${commuter.projctcolor}`;
+                    profileImg.onerror = () => { profileImg.src = '/img/icons/icon.png'; };
+
+                    dayEvents.appendChild(profileImg);
+                }
+            }
+        });
+    }
+};
+
+
+// 캘린더 옵션 설정
+const calendarOptions = reactive({
+    plugins: [dayGridPlugin, interactionPlugin],
+    initialView: 'dayGridMonth',
+    headerToolbar: {
+        left: 'today',
+        center: 'title',
+        right: 'prev,next',
+    },
+    locale: 'kr',
+    events: calendarEvents,
+    eventOrder: 'sortIdx',
+    contentHeight:"auto",
+    // eventContent: calendarCommuter,
+    // 날짜 선택 관련 옵션 수정
+    selectable: true,
+    selectAllow: (selectInfo) => isSelectableDate(selectInfo.start),
+    dateClick: handleDateClick,
+    dayCellClassNames: getCellClassNames,
+
+    // 날짜 클릭 비활성화를 위한 추가 설정
+    unselectAuto: true,
+    droppable: false,
+    eventDisplay: 'block',
+
+    // 커스텀 버튼 정의
+    customButtons: {
+        prev: {
+            text: 'PREV',
+            click: () => moveCalendar(1),
+        },
+        today: {
+            text: 'TODAY',
+            click: () => moveCalendar(3),
+        },
+        next: {
+            text: 'NEXT',
+            click: () => moveCalendar(2),
+        },
+    },
+});
+
+// 달력 뷰 변경 감지 (월 변경 시 데이터 다시 가져오기)
+watch(() => fullCalendarRef.value?.getApi().currentData.viewTitle, async () => {
+    await fetchData();
+});
+
+// selectedProject 변경 감지
+watch(() => projectStore.selectedProject, (newProject) => {
+    if (newProject) {
+        selectedProject.value = newProject.PROJCTSEQ;
+        checkedInProject.value = newProject;
+    } else {
+        selectedProject.value = null;
+        checkedInProject.value = null;
+    }
+});
+
+// 모달 닫기
+const closeModal = () => {
+    isModalOpen.value = false;
+
+    visiblePopover.value = { type: null, index: null };
+};
+
+// MapPopover에서 visible 상태 변경 이벤트 처리
+const updatePopover = (popoverType, index) => {
+    if (visiblePopover.value.type === popoverType && visiblePopover.value.index === index) {
+        // 같은 팝오버를 클릭하면 닫기
+        visiblePopover.value = { type: null, index: null };
+    } else {
+        // 다른 팝오버를 클릭하면 기존 것 닫고 새로운 것 열기
+        visiblePopover.value = { type: popoverType, index: index };
+    }
+};
+
+const selectedDateCommuters = computed(() => {
+    return monthlyCommuters.value.filter(commuter =>
+        commuter.COMMUTDAY === eventDate.value
+    );
+});
+onMounted(async () => {
+    await fetchData();
+    await userStore.userInfo();
+    user.value = userStore.user;
+    await projectStore.getProjectList('', '', 'true');
+    project.value = projectStore.activeProjectList;
+
+    await todaysCommuter();
+
+    // 저장된 선택 프로젝트 가져오기
+    if (projectStore.activeMemberProjectList.length > 0) {
+        const initialProject = projectStore.getSelectedProject() || projectStore.activeMemberProjectList[0];
+        selectedProject.value = initialProject?.PROJCTSEQ || null;
+        projectStore.setSelectedProject(initialProject);
+        checkedInProject.value = initialProject;
+    }
+
+    datePickerStore.initDatePicker(
+        fullCalendarRef,
+        async (year, month, options) => {
+            // 데이터 다시 불러오기
+            await fetchData();
+        }
+    );
+});
+</script>

src/components/commuters/CommuterProjectList.vue

@@ -0,0 +1,111 @@
+<template>
+    <div class="commuter-list mt-3">
+        <div
+            v-for="post in sortedProjects"
+            :key="post.PROJCTSEQ"
+            class="border border-2 mb-3 card p-2"
+            :style="`border-color: ${post.projctcolor} !important; color: ${post.projctcolor} !important;`"
+            @dragover="allowDrop($event)"
+            @drop="handleDrop($event, post)"
+        >
+            <p class="mb-1">
+                {{ post.PROJCTNAM }}
+            </p>
+            <div class="row gx-2">
+                <div
+                    v-for="commuter in commuters.filter(c =>
+                        (c.PROJCTLVE ? c.PROJCTLVE === post.PROJCTSEQ : c.PROJCTNAM === post.PROJCTNAM)
+                    )"
+                    :key="commuter.MEMBERSEQ"
+                    class="col-4"
+                >
+                    <div class="ratio ratio-1x1">
+                        <img
+                            :src="`${baseUrl}upload/img/profile/${commuter.profile}`"
+                            alt="User Profile"
+                            class="rounded-circle object-fit-cover"
+                            :class="isCurrentUser(commuter) ? 'cursor-pointer' : ''"
+                            :draggable="isCurrentUser(commuter)"
+                            @dragstart="isCurrentUser(commuter) ? dragStart($event, post) : null"
+                            @error="$event.target.src = '/img/icons/icon.png'"
+                        >
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits, computed } from 'vue';
+
+const props = defineProps({
+    project: {
+        type: Object,
+        required: false
+    },
+    commuters: {
+        type: Array,
+        required: false
+    },
+    baseUrl: {
+        type: String,
+        required: false
+    },
+    user: {
+        type: Object,
+        required: false
+    },
+    selectedProject: {
+        type: Number,
+        default: null
+    },
+    checkedInProject: {
+        type: Object,
+        default: null
+    }
+});
+
+const emit = defineEmits(['drop', 'update:selectedProject', 'update:checkedInProject']);
+
+// 프로젝트 참여인원 순 정렬
+const sortedProjects = computed(() => {
+    const projectList = Array.isArray(props.project) ? props.project :
+                        Object.values(props.project || {});
+
+    return projectList
+        .filter(item => item && typeof item === 'object')
+        .sort((a, b) => (b.participant_count || 0) - (a.participant_count || 0));
+});
+// 현재 사용자 확인
+const isCurrentUser = (commuter) => {
+    // 현재 사용자인지 확인
+    const isCurrentUserCheck = props.user && commuter && commuter.MEMBERSEQ === props.user.id;
+
+    // 퇴근 기록이 없는지 확인
+    const hasNoCheckRecord = !commuter.COMMUTLVE;
+
+    // 현재 사용자이면서 퇴근 기록이 없는 경우에만 true 반환
+    return isCurrentUserCheck && hasNoCheckRecord;
+};
+
+// 드래그 시작 이벤트 핸들러
+const dragStart = (event, project) => {
+    // 드래그 데이터 설정
+    event.dataTransfer.setData('application/json', JSON.stringify(project));
+    event.dataTransfer.effectAllowed = 'copy';
+};
+
+// 드래그 오버 드롭 허용
+const allowDrop = (event) => {
+    event.preventDefault();
+};
+
+// 드롭
+const handleDrop = (event, targetProject) => {
+    event.preventDefault();
+    emit('drop', { event, targetProject });
+};
+
+
+</script>

src/components/editor/QEditor.vue

@@ -41,11 +41,12 @@
 
             <button class="ql-link">Link</button>
             <button class="ql-image">Image</button>
+            <button class="ql-video">Video</button>
             <button class="ql-blockquote">Blockquote</button>
             <button class="ql-code-block">Code Block</button>
         </div>
         <!-- 에디터가 표시될 div -->
-        <div ref="editor"></div>
+        <div id="qEditor" ref="editor"></div>
         <!-- Alert 메시지 표시 -->
         <div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">내용을 확인해주세요.</div>
     </div>
@@ -54,8 +55,11 @@
 <script setup>
     import Quill from 'quill';
     import 'quill/dist/quill.snow.css';
-    import { onMounted, ref, watch, defineEmits, defineProps } from 'vue';
     import $api from '@api';
+    import { onMounted, ref, watch, defineEmits, defineProps } from 'vue';
+    import { useToastStore } from '@s/toastStore';
+
+    const toastStore = useToastStore();
 
     const props = defineProps({
         isAlert: {
@@ -71,7 +75,10 @@
     const editor = ref(null); // 에디터 DOM 참조
     const font = ref('nanum-gothic'); // 기본 폰트
     const fontSize = ref('16px'); // 기본 폰트 크기
-    const emit = defineEmits(['update:data']);
+    const emit = defineEmits(['update:data', 'update:uploadedImgList', 'update:deleteImgIndexList']);
+    const uploadedImgList = ref([]); // 에디터에 이미지 첨부시 업데이트 된 파일 인덱스 번호 리스트
+    const initImageIndex = ref([]); // 에디터 로드 시 이미지 인덱스 정보
+    const deleteImgIndexList = ref([]); // 에디터의 이미지 파일 수정 및 삭제 시 해당 이미지 인덱스 목록
 
     onMounted(() => {
         // 툴바에서 선택할 수 있는 폰트 목록 설정
@@ -112,12 +119,54 @@
             quillInstance.format('size', fontSize.value);
         });
 
+        // 이미지 추가 항목 체크
+        watch(uploadedImgList, () => {
+            emit('update:uploadedImgList', uploadedImgList.value);
+        });
+
+        // 이미지 첨부 리스트가 변경(삭제) 되었을때
+        watch(deleteImgIndexList, () => {
+            emit('update:deleteImgIndexList', deleteImgIndexList.value);
+        });
+
         // 초기 데이터가 있을 경우, HTML 형식으로 삽입
         if (props.initialData) {
-            console.log(props.initialData);
             quillInstance.setContents(JSON.parse(props.initialData));
+            initCheckImageIndex();
         }
 
+        // 영상 넣기
+        quillInstance.getModule('toolbar').addHandler('video', () => {
+            const url = prompt('YouTube 영상 URL을 입력하세요:');
+            let src = '';
+            if (!url || url.trim() == '') return;
+
+            // 일반 youtube url
+            if (url.indexOf('watch?v=') !== -1) {
+                src = url.replace('watch?v=', 'embed/');
+
+                // youtu.be 단축 URL  (ex : https://youtu.be/CfiojceAaeQ?si=G7eM56sdDjIEw-Tz)
+            } else if (url.indexOf('youtu.be/') !== -1) {
+                const videoId = url.split('youtu.be/')[1].split('?')[0];
+                src = `https://www.youtube.com/embed/${videoId}`;
+
+                // iframe 주소
+            } else if (url.indexOf('<iframe') !== -1) {
+                // DOMParser를 사용하여 embeded url만 추출
+                const parser = new DOMParser();
+                const doc = parser.parseFromString(url, 'text/html');
+                const iframeEL = doc.querySelector('iframe');
+                src = iframeEL.getAttribute('src');
+            } else {
+                toastStore.onToast('지원하는 영상 타입 아님', 'e');
+                return;
+            }
+
+            const index = quillInstance.getSelection().index;
+            quillInstance.insertEmbed(index, 'video', src);
+            quillInstance.setSelection(index + 1);
+        });
+
         // 이미지 업로드 기능 처리
         let imageUrls = new Set(); // 업로드된 이미지 URL을 추적
         quillInstance.getModule('toolbar').addHandler('image', () => {
@@ -126,7 +175,6 @@
 
         // 에디터의 텍스트가 변경될 때마다 이미지 처리
         quillInstance.on('text-change', (delta, oldDelta, source) => {
-            emit('update:data', quillInstance.getContents());
             delta.ops.forEach(op => {
                 if (op.insert && typeof op.insert === 'object' && op.insert.image) {
                     const imageUrl = op.insert.image; // 이미지 URL 추출
@@ -135,7 +183,11 @@
                     checkForDeletedImages(); // 삭제된 이미지 확인
                 }
             });
+
+            checkDeletedImages();
+            emit('update:data', quillInstance.getContents());
         });
+
         // 로컬 이미지 파일 선택
         async function selectLocalImage() {
             const input = document.createElement('input');
@@ -150,9 +202,19 @@
 
                     // 이미지 서버에 업로드 후 URL 받기
                     uploadImageToServer(formData)
-                        .then(serverImageUrl => {
+                        .then(data => {
+                            const uploadImgIdx = data?.fileIndex; // 업로드 된 파일 DB 인덱스
+                            const serverImageUrl = data?.fileUrl; // 업로드 된 파일 url
+
+                            // 업로드 된 파일 인덱스 (게시글 저장 시 해당 인덱스 번호에 게시글 인덱스를 업데이트)
+                            if (uploadImgIdx) {
+                                uploadedImgList.value = [...uploadedImgList.value, uploadImgIdx];
+                                initImageIndex.value = [...initImageIndex.value, uploadImgIdx];
+                            }
+
                             const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
-                            const fullImageUrl = `${baseUrl}${serverImageUrl.replace(/\\/g, '/')}`;
+                            //const fullImageUrl = `${baseUrl}${serverImageUrl.replace(/\\/g, '/')}`;
+                            const fullImageUrl = `${baseUrl}${serverImageUrl.replace(/\\/g, '/')}?imgIndex=${uploadImgIdx}`; // 이미지 경로에 index 정보 추가
 
                             const range = quillInstance.getSelection();
                             quillInstance.insertEmbed(range.index, 'image', fullImageUrl); // 선택된 위치에 이미지 삽입
@@ -165,21 +227,47 @@
                 }
             };
         }
+
         // 이미지 서버 업로드
         async function uploadImageToServer(formData) {
             try {
+                // Make the POST request to upload the image
                 const response = await $api.post('quilleditor/upload', formData, { isFormData: true });
-                const imageUrl = response.data.data;
-                return imageUrl; // 서버에서 받은 이미지 URL 반환
+
+                // Check if the response contains the expected data
+                if (response.data && response.data.data) {
+                    const imageUrl = response.data.data;
+                    return imageUrl; // Return the image URL received from the server
+                } else {
+                    throw new Error('Image URL not returned from server');
+                }
             } catch (error) {
-                toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
+                // Log detailed error information for debugging purposes
+                console.error('Image upload failed:', error);
+
+                // Handle specific error cases (e.g., network issues, authorization issues)
+                if (error.response) {
+                    // If the error is from the server (e.g., 4xx or 5xx error)
+                    console.error('Error response:', error.response.data);
+                    toastStore.onToast('서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.', 'e');
+                } else if (error.request) {
+                    // If no response is received from the server
+                    console.error('No response received:', error.request);
+                    toastStore.onToast('네트워크 오류가 발생했습니다. 잠시 후 다시 시도해주세요.', 'e');
+                } else {
+                    // If the error is due to something else (e.g., invalid request setup)
+                    console.error('Error message:', error.message);
+                    toastStore.onToast('파일 업로드 중 문제가 발생했습니다. 다시 시도해주세요.', 'e');
+                }
+
+                // Throw the error so the caller knows something went wrong
                 throw error;
             }
         }
 
         // 삭제된 이미지 확인
         function checkForDeletedImages() {
-            const editorImages = document.querySelectorAll('#editor img');
+            const editorImages = document.querySelectorAll('#qEditor img');
             const currentImages = new Set(Array.from(editorImages).map(img => img.src)); // 현재 에디터에 있는 이미지들
 
             imageUrls.forEach(url => {
@@ -188,12 +276,41 @@
                 }
             });
         }
+
+        // 초기 에디터 로드 시 이미지 인덱스 정보 추출
+        function initCheckImageIndex() {
+            const editorImages = document.querySelectorAll('#qEditor img');
+            const currentImages = new Set(Array.from(editorImages).map(img => img.src)); // 현재 에디터에 있는 이미지들
+
+            currentImages.forEach(url => {
+                const index = getImgIndex(url);
+                if (index) {
+                    initImageIndex.value.push(Number(index));
+                }
+            });
+        }
+
+        // 이미지에서 index 정보 추출
+        function getImgIndex(url) {
+            const params = new URLSearchParams(url.split('?')[1]);
+            return params.get('imgIndex');
+        }
+
+        // 에디터 이미지 수정 시 삭제 인덱스 확인
+        function checkDeletedImages() {
+            const editorImages = document.querySelectorAll('#qEditor img');
+            const currentImages = new Set(Array.from(editorImages).map(img => img.src));
+
+            // init 이미지 인덱스와 수정 된 이미지 값을 비교
+            const tempDeleteImgIndex = [...initImageIndex.value];
+            currentImages.forEach(url => {
+                const imgIndex = getImgIndex(url);
+                if (imgIndex) {
+                    const index = tempDeleteImgIndex.indexOf(imgIndex);
+                    tempDeleteImgIndex.splice(index, 1);
+                }
+            });
+            deleteImgIndexList.value = tempDeleteImgIndex;
+        }
     });
 </script>
-<style>
-    @import 'quill/dist/quill.snow.css';
-    .ql-editor {
-        min-height: 300px;
-        font-family: 'Nanum Gothic', sans-serif;
-    }
-</style>

src/components/input/ArrInput.vue

@@ -18,6 +18,7 @@
                     type="text"
                     v-model="postcode"
                     placeholder="우편번호"
+                    disabled="true"
                     readonly
                 />
 
@@ -26,6 +27,7 @@
                     type="text"
                     v-model="address"
                     placeholder="기본주소"
+                    disabled="true"
                     readonly
                 />
             </div>

src/components/input/FormFile.vue

@@ -2,11 +2,14 @@
     <div class="mb-4 row">
         <label :for="inputId" class="col-md-2 col-form-label">{{ title }}</label>
         <div class="col-md-10">
+            <label :for="inputId" class="btn btn-label-primary">파일 선택</label>
             <input
                 class="form-control"
                 type="file"
+                style="display: none"
                 :id="inputId"
                 ref="fileInput"
+                :key="autoIncrement"
                 @change="changeHandler"
                 multiple
             />
@@ -18,69 +21,71 @@
 </template>
 
 <script setup>
-import { ref ,computed} from 'vue';
-import { fileMsg } from '@/common/msgEnum';
+    import { ref, computed } from 'vue';
+    import { fileMsg } from '@/common/msgEnum';
 
-// Props
-const props = defineProps({
-    title: {
-        type: String,
-        default: '라벨',
-        required: true,
-    },
-    name: {
-        type: String,
-        default: 'fileInput',
-        required: true,
-    },
-    isAlert: {
-        type: Boolean,
-        default: false,
-        required: false,
-    },
-});
-const inputId = computed(() => props.name || 'defaultFileInput');
+    // Props
+    const props = defineProps({
+        title: {
+            type: String,
+            default: '라벨',
+            required: true,
+        },
+        name: {
+            type: String,
+            default: 'fileInput',
+            required: true,
+        },
+        isAlert: {
+            type: Boolean,
+            default: false,
+            required: false,
+        },
+    });
+    //:key="autoIncrement" 동일한 파일을 첨부하고 비웠다 다시넣으면 안들어가는 현상 대비.
 
-const emits = defineEmits(['update:data', 'update:isValid']);
+    const inputId = computed(() => props.name || 'defaultFileInput');
 
-const MAX_TOTAL_SIZE = 5 * 1024 * 1024; // 5MB
-const MAX_FILE_COUNT = 5; // 최대 파일 개수
-const ALLOWED_FILE_TYPES = []; // 모든 파일을 허용
+    const emits = defineEmits(['update:data', 'update:isValid']);
 
-const showError = ref(false);
-const fileMsgKey = ref(''); // 에러 메시지 키
+    const autoIncrement = ref(props.autoIncrement);
 
-const changeHandler = (event) => {
-    const files = Array.from(event.target.files);
-    const totalSize = files.reduce((sum, file) => sum + file.size, 0);
+    const MAX_TOTAL_SIZE = 5 * 1024 * 1024; // 5MB
+    const MAX_FILE_COUNT = 5; // 최대 파일 개수
+    const ALLOWED_FILE_TYPES = []; // 모든 파일을 허용
 
-    // ALLOWED_FILE_TYPES가 비어있으면 모든 파일 허용
-    const invalidFiles = ALLOWED_FILE_TYPES.length > 0
-        ? files.filter(file => !ALLOWED_FILE_TYPES.includes(file.type))
-        : [];
+    const showError = ref(false);
+    const fileMsgKey = ref(''); // 에러 메시지 키
 
-    if (totalSize > MAX_TOTAL_SIZE) {
-        showError.value = true;
-        fileMsgKey.value = 'FileMaxSizeMsg';
-        emits('update:data', []);
-        emits('update:isValid', false);
-    } else if (files.length > MAX_FILE_COUNT) {
-        showError.value = true;
-        fileMsgKey.value = 'FileMaxLengthMsg';
-        emits('update:data', []);
-        emits('update:isValid', false);
-    } else if (invalidFiles.length > 0) {
-        showError.value = true;
-        fileMsgKey.value = 'FileNotTypeMsg';
-        emits('update:data', []);
-        emits('update:isValid', false);
-    } else {
-        showError.value = false;
-        fileMsgKey.value = '';
-        emits('update:data', files);
-        emits('update:isValid', true);
-    }
-};
+    const changeHandler = event => {
+        const files = Array.from(event.target.files);
+        const totalSize = files.reduce((sum, file) => sum + file.size, 0);
 
-const errorMessage = computed(() => (fileMsg[fileMsgKey.value] || ''));
+        // ALLOWED_FILE_TYPES가 비어있으면 모든 파일 허용
+        const invalidFiles = ALLOWED_FILE_TYPES.length > 0 ? files.filter(file => !ALLOWED_FILE_TYPES.includes(file.type)) : [];
+
+        if (totalSize > MAX_TOTAL_SIZE) {
+            showError.value = true;
+            fileMsgKey.value = 'FileMaxSizeMsg';
+            emits('update:data', []);
+            emits('update:isValid', false);
+        } else if (files.length > MAX_FILE_COUNT) {
+            showError.value = true;
+            fileMsgKey.value = 'FileMaxLengthMsg';
+            emits('update:data', []);
+            emits('update:isValid', false);
+        } else if (invalidFiles.length > 0) {
+            showError.value = true;
+            fileMsgKey.value = 'FileNotTypeMsg';
+            emits('update:data', []);
+            emits('update:isValid', false);
+        } else {
+            showError.value = false;
+            fileMsgKey.value = '';
+            emits('update:data', files);
+            emits('update:isValid', true);
+        }
+    };
+
+    const errorMessage = computed(() => fileMsg[fileMsgKey.value] || '');
 </script>

src/components/input/FormInput.vue

@@ -5,25 +5,26 @@
             <span v-if="isEssential" class="text-danger">*</span>
         </label>
         <div class="col-md-10">
-            <input
-                :id="name"
-                class="form-control"
-                :type="type"
-                v-model="inputValue"
-                :maxLength="maxlength"
-                :placeholder="title"
-                :disabled="disabled"
-                :min="min"
-                @focusout="$emit('focusout', modelValue)"
-                @input="handleInput"
-            />
-            <div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">
-                {{ title }}을 확인해주세요.
-            </div>
-            <!-- 카테고리 중복 -->
-            <div class="invalid-feedback" :class="isCateAlert ? 'd-block' : ''">
-                카테고리 중복입니다.
+            <div class="d-flex align-items-center">
+                <input
+                    :id="name"
+                    class="form-control"
+                    :type="type"
+                    v-model="inputValue"
+                    :maxLength="maxlength"
+                    :placeholder="title"
+                    :disabled="disabled"
+                    :min="min"
+                    autocomplete="off"
+                    @focusout="$emit('focusout', modelValue)"
+                    @input="handleInput"
+                />
+                <div v-if="isBtn" class="ms-2">
+                    <slot name="append"></slot>
+                </div>
             </div>
+            <div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">{{ title }}을 확인해주세요.</div>
+            <div class="invalid-feedback" :class="isCateAlert ? 'd-block' : ''">카테고리 중복입니다.</div>
         </div>
     </div>
 </template>
@@ -31,84 +32,89 @@
 <script setup>
 import { ref, watch } from 'vue';
 
-// Props 정의
-const props = defineProps({
-    title: {
-        type: String,
-        default: '라벨',
-        required: true,
-    },
-    name: {
-        type: String,
-        default: 'nameplz',
-        required: true,
-    },
-    isEssential: {
-        type: Boolean,
-        default: false,
-    },
-    type: {
-        type: String,
-        default: 'text',
-    },
-    modelValue: {
-        type: String,
-        default: '',
-    },
-    maxlength: {
-        type: Number,
-        default: 30,
-    },
-    isAlert: {
-        type: Boolean,
-        default: false,
-    },
-    isCateAlert : {
-        type :Boolean,
-        default: false,
-    },
-    isLabel : {
-        type: Boolean,
-        default: true,
-        required: false,
-    },
-    disabled: {
-        type: Boolean,
-        default: false,
-    },
-    min: {
-        type: String,
-        default: '',
-        required: false,
-    }
-});
+    // Props 정의
+    const props = defineProps({
+        title: {
+            type: String,
+            default: '라벨',
+            required: true,
+        },
+        name: {
+            type: String,
+            default: 'nameplz',
+            required: true,
+        },
+        isEssential: {
+            type: Boolean,
+            default: false,
+        },
+        type: {
+            type: String,
+            default: 'text',
+        },
+        modelValue: {
+            type: String,
+            default: '',
+        },
+        maxlength: {
+            type: Number,
+            default: 30,
+        },
+        isAlert: {
+            type: Boolean,
+            default: false,
+        },
+        isCateAlert: {
+            type: Boolean,
+            default: false,
+        },
+        isLabel: {
+            type: Boolean,
+            default: true,
+            required: false,
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        min: {
+            type: String,
+            default: '',
+            required: false,
+        },
+        isBtn: {
+            type: Boolean,
+            default: false,
+            required: false,
+        }
+    });
 
-// Emits 정의
-const emits = defineEmits(['update:modelValue', 'focusout', 'update:alert']);
+    // Emits 정의
+    const emits = defineEmits(['update:modelValue', 'focusout', 'update:alert']);
 
+    // 로컬 상태로 사용하기 위한 `inputValue`
+    const inputValue = ref(props.modelValue);
 
-// 로컬 상태로 사용하기 위한 `inputValue`
-const inputValue = ref(props.modelValue);
+    // 부모로 데이터 업데이트
+    watch(inputValue, newValue => {
+        emits('update:modelValue', newValue);
+    });
 
-// 부모로 데이터 업데이트
-watch(inputValue, (newValue) => {
-    emits('update:modelValue', newValue);
-});
+    // 초기값 동기화
+    watch(
+        () => props.modelValue,
+        newValue => {
+            if (inputValue.value !== newValue) {
+                inputValue.value = newValue;
+            }
+        },
+    );
 
-// 초기값 동기화
-watch(() => props.modelValue, (newValue) => {
-    if (inputValue.value !== newValue) {
-        inputValue.value = newValue;
-    }
-});
-
-const handleInput = (event) => {
-    const newValue = event.target.value.slice(0, props.maxlength);
-
-    if (newValue.trim() !== '') {
-        emits('update:alert', false);
-    }
-};
+    const handleInput = event => {
+        const newValue = event.target.value.slice(0, props.maxlength);
 
+        if (newValue.trim() !== '') {
+            emits('update:alert', false);
+        }
+    };
 </script>
-

src/components/input/FormSelect.vue

@@ -2,27 +2,39 @@
     <div class="mb-2" :class="isRow ? 'row' : ''">
         <label :for="name" class="col-md-2 col-form-label" :class="isLabel ? 'd-block' : 'd-none'">
             {{ title }}
-            <span :class="isEssential ? 'link-danger' : 'none'">*</span>
+            <span v-if="isEssential" class="link-danger">*</span>
         </label>
-        <div :class="isRow ? 'col-md-10' : 'col-md-12'" class="d-flex gap-2 align-items-center">
-            <select class="form-select" :id="name" v-model="selectData" :disabled="disabled" :style="isColor ? { color: selected } : {}" @blur="$emit('blur')">
-                <option v-for="(item, i) in data" :key="i" :value="isCommon ? item.value : i" :style="isColor ? { color: item.label } : {}">
-                    {{ isCommon ? item.label : item }}
-                </option>
-            </select>
+        <div :class="isRow ? 'col-md-10' : 'col-md-12'">
+            <div class="d-flex gap-2 align-items-center">
+                <select v-if="isColor && (!data || data.length === 0)" class="form-select" disabled>
+                    <option>사용가능한 컬러가 없습니다</option>
+                </select>
 
-            <div v-if="isColor && selected"
-                    class="w-px-40 h-px-30"
-                    :style="{backgroundColor: selected}">
+                <!-- 데이터가 있는 경우 원래 select 표시 -->
+                <select v-else class="form-select" :id="name" v-model="selectData" :disabled="disabled" :style="isColor ? { color: selected } : {}" @blur="$emit('blur')">
+                    <option v-for="(item, i) in data" :key="i" :value="isCommon ? item.value : i" :style="isColor ? { color: item.label } : {}">
+                        {{ isCommon ? item.label : item }}
+                    </option>
+                </select>
+
+                <div v-if="isBtn" class="ms-2">
+                        <slot name="append"></slot>
+                </div>
+
+                <div v-if="isColor && selected"
+                        class="w-px-40 h-px-30"
+                        :style="{backgroundColor: selected}">
+                </div>
+
+                <img v-if="isMbti && selected"
+                    role="img"
+                    class="w-px-30 h-px-40"
+                    :src="`/img/mbti/${selected.toLowerCase()}.png`"
+                    alt="MBTI image"/>
             </div>
 
-            <img v-if="isMbti && selected"
-                role="img"
-                class="w-px-30 h-px-40"
-                :src="`/img/mbti/${selected.toLowerCase()}.png`"
-                alt="MBTI image"/>
+            <div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">{{ title }}를 확인해주세요.</div>
         </div>
-        <div v-if="isAlert" class="invalid-feedback">{{ title }}을 확인해주세요.</div>
     </div>
 </template>
 
@@ -70,6 +82,11 @@ const props = defineProps({
         default: true,
         required: false,
     },
+    isBtn: {
+        type: Boolean,
+        default: false,
+        required: false,
+    },
     isCommon: {
         type: Boolean,
         default: false,
@@ -121,10 +138,11 @@ watch(selectData, (newValue) => {
 
 
 const selected = computed(() => {
+    // 현재 선택된 값에 해당하는 아이템 찾기
     const selectedItem = props.data.find(item =>
         props.isCommon ? item.value === selectData.value : props.data.indexOf(item) === selectData.value
     );
+
     return selectedItem ? selectedItem.label : null;
 });
-
 </script>

src/components/input/UserFormInput.vue

@@ -5,7 +5,7 @@
             <span :class="isEssential ? 'link-danger' : 'd-none'">*</span>
         </label>
         <div class="col-md-12">
-            <div v-if="useInputGroup" class="input-group mb-3">
+            <div v-if="useInputGroup" class="input-group mb-1">
                 <input
                     :id="name"
                     class="form-control"
@@ -14,7 +14,7 @@
                     :value="computedValue"
                     :disabled="disabled"
                     :maxLength="maxlength"
-                    :placeholder="title"
+                    :placeholder="placeholder ? placeholder : title"
                     @blur="$emit('blur')"
                 />
                 <span class="input-group-text">@ localhost.co.kr</span>
@@ -29,8 +29,10 @@
                     :value="computedValue"
                     :disabled="disabled"
                     :maxLength="maxlength"
-                    :placeholder="title"
+                    :placeholder="placeholder ? placeholder : title"
                     @blur="$emit('blur')"
+                    @click="handleDateClick"
+                    ref="inputElement"
                 />
             </div>
             <div class="invalid-feedback" :class="isAlert ? 'd-block' : ''">{{ title }}를 확인해주세요.</div>
@@ -39,7 +41,7 @@
 </template>
 
 <script setup>
-    import { inject, computed } from 'vue';
+    import { inject, computed, ref } from 'vue';
 
     const props = defineProps({
         title: {
@@ -87,9 +89,14 @@
             default: false,
             required: false,
         },
+        placeholder: {
+            type: String,
+            default: ''
+        },
     });
 
     const emits = defineEmits(['update:data', 'update:alert', 'blur']);
+    const inputElement = ref(null);
 
     // dayjs 인스턴스 가져오기
     const dayjs = inject('dayjs');
@@ -118,4 +125,12 @@
             emits('update:alert', false);
         }
     };
+
+    // date 타입일 때 input 클릭 시 달력 열기
+    const handleDateClick = (event) => {
+        if (props.type === 'date' && inputElement.value) {
+            // 프로그래매틱하게 달력 열기: 날짜 선택기 UI를 표시
+            inputElement.value.showPicker();
+        }
+    };
 </script>

src/components/list/ProjectCard.vue

@@ -3,68 +3,71 @@
         <div class="row g-0">
             <div class="card-body">
                 <!-- 제목 -->
-                <div class="d-flex justify-content-between ">
+                <div class="d-flex justify-content-between">
                     <h5 class="card-title fw-bold">
                         {{ title }}
                     </h5>
-                    <p v-if="isProjectExpired" class="btn-icon btn-danger rounded-2"><i class='bx bx-power-off'></i></p>
-                    <div v-if="!isProjectExpired">
+                    <div v-if="!isProjectExpired" class="d-flex gap-1">
                         <EditBtn @click.stop="openEditModal" />
                         <DeleteBtn v-if="isProjectCreator" @click.stop="handleDelete" class="ms-1"/>
                     </div>
                 </div>
+
                 <!-- 날짜 -->
-                <div class="d-flex flex-column flex-sm-row align-items-center pb-2">
-                    <i class="bx bx-calendar"></i>
-                    <div class="ms-2">날짜</div>
-                    <div class="ms-12">{{ strdate }} ~ {{ enddate }}</div>
+                <div class="row align-items-center pb-2">
+                    <div class="col-3 col-md-2 d-flex align-items-center">
+                        <i class="bx bx-calendar"></i>
+                        <div class="ms-2">날짜</div>
+                    </div>
+                    <div class="col-9 col-md-10">
+                        {{ strdate }} ~ {{ enddate }}
+                    </div>
                 </div>
+
                 <!-- 참여자 -->
-                <div class="d-flex flex-column flex-sm-row align-items-center pb-2">
-                    <i class="bx bxs-user"></i>
-                    <div class="ms-2">참여자</div>
-                    <UserList :projctSeq="projctSeq" :showOnlyActive="isProjectExpired" class="ms-8 mb-0" />
+                <div class="row align-items-center pb-2">
+                    <div class="col-3 col-md-2 d-flex align-items-center">
+                        <i class="bx bxs-user"></i>
+                        <div class="ms-2">참여자</div>
+                    </div>
+                    <div class="col-9 col-md-10">
+                        <UserList ref="userListRef" :projctSeq="projctSeq" :showOnlyActive="true" class="mb-0" />
+                    </div>
                 </div>
+
                 <!-- 설명 -->
-                <div class="d-flex flex-column flex-sm-row align-items-center pb-2">
-                    <i class="bx bx-detail"></i>
-                    <div class="ms-2">설명</div>
-                    <div class="ms-12">{{ description }}</div>
+                <div class="row align-items-center pb-2">
+                    <div class="col-3 col-md-2 d-flex align-items-center">
+                        <i class="bx bx-detail"></i>
+                        <div class="ms-2">설명</div>
+                    </div>
+                    <div class="col-9 col-md-10">
+                        {{ description || '-' }}
+                    </div>
                 </div>
+
                 <!-- 주소 -->
-                <div class="d-flex flex-column flex-sm-row align-items-center pb-2">
-                    <div class="d-flex" @click.stop="isPopoverVisible = !isPopoverVisible">
-                        <i class="bx bxs-map cursor-pointer" ref="mapIconRef"></i>
-                        <div class="ms-2">주소</div>
-                    </div>
-                    <div class="ms-12 position-relative">
-                        {{ address }} {{ addressdtail }}
-                        <!-- 팝오버 -->
-                        <div v-if="isPopoverVisible" class="position-absolute map ">
-                            <button type="button" class="btn-close popover-close" @click.stop="isPopoverVisible = !isPopoverVisible"></button>
-                            <div class="card">
-                                <div class="card-body p-1">
-                                    <KakaoMap
-                                        v-if="coordinates"
-                                        :lat="coordinates.lat"
-                                        :lng="coordinates.lng"
-                                        class="w-px-250 h-px-200"
-                                        @onLoadKakaoMap="onLoadKakaoMap"
-                                    >
-                                        <KakaoMapMarker
-                                            :lat="coordinates.lat"
-                                            :lng="coordinates.lng"
-                                        />
-                                    </KakaoMap>
-                                    <div class="position-absolute top-50 translate-middle-y end-0 me-3 z-1 d-flex flex-column gap-1">
-                                        <button class="btn-secondary border-none" @click="zoomOut">+</button>
-                                        <button class="btn-secondary border-none" @click="zoomIn">-</button>
-                                    </div>
+                <div class="row align-items-center pb-2">
+                    <div class="col-3 col-md-2 d-flex align-items-center">
+                        <MapPopover
+                            :address="address"
+                            :is-visible="isMapVisible"
+                            @update-visible="updatePopover"
+                        >
+                            <template #trigger>
+                                <div class="d-flex align-items-center cursor-pointer">
+                                    <i class="bx bxs-map"></i>
+                                    <div class="ms-2">주소</div>
                                 </div>
-                            </div>
-                        </div>
+                            </template>
+                        </MapPopover>
+                    </div>
+                    <div class="col-9 col-md-10 d-flex justify-content-between align-items-center">
+                        <div>{{ address }} {{ addressdtail }}</div>
+                        <button type="button" class="btn text-white" :style="`background-color: ${projctColor} !important;`" @click.stop="openModal">
+                            <i class='bx bx-child'></i>
+                        </button>
                     </div>
-                    <button type="button" class="btn ms-auto text-white" :style="`background-color: ${projctColor} !important;`" @click.stop="openModal">log</button>
                 </div>
             </div>
         </div>
@@ -72,7 +75,7 @@
 
     <!-- 로그 모달 -->
     <CenterModal :display="isModalOpen" @close="closeModal">
-        <template #title> Log </template>
+        <template #title> 등록·수정자 </template>
         <template #body>
             <div v-if="logData.length > 0">
                 <div
@@ -95,7 +98,7 @@
         <template #title> 프로젝트 수정 </template>
         <template #body>
             <FormInput
-                title="이름"
+                title="프로젝트명"
                 name="name"
                 :is-essential="true"
                 :is-alert="nameAlert"
@@ -110,28 +113,51 @@
                 :is-essential="true"
                 :is-label="true"
                 :is-common="true"
+                :is-color="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"
-            />
+            <div class="mb-2 row">
+                <label class="col-md-2 col-form-label">
+                    참여자
+                </label>
+                <div class="col-md-10">
+                    <UserList class="m-0"
+                        ref="editUserListRef"
+                        :projctSeq="projctSeq"
+                        :showOnlyActive="false"
+                        @user-list-update="handleEditUserListUpdate"
+                    />
+                </div>
+            </div>
 
+            <!-- 시작일 -->
+            <div @click="openStartDatePicker">
+                <FormInput
+                    title="시작일"
+                    type="date"
+                    name="startDay"
+                    :is-essential="true"
+                    :is-alert="startDayAlert"
+                    :modelValue="selectedProject.PROJCTSTR"
+                    @update:modelValue="selectedProject.PROJCTSTR = $event"
+                    ref="startDateInput"
+                />
+            </div>
+            <!-- 종료일 -->
+            <div @click="openEndDatePicker">
+                <FormInput
+                    title="종료일"
+                    type="date"
+                    name="endDay"
+                    :min="selectedProject.PROJCTSTR"
+                    :modelValue="selectedProject.PROJCTEND"
+                    @update:modelValue="selectedProject.PROJCTEND = $event"
+                    ref="endDateInput"
+                />
+            </div>
             <FormInput
                 title="설명"
                 name="description"
@@ -164,7 +190,6 @@ import { defineProps, onMounted, ref, computed, watch } from 'vue';
 import UserList from '@c/user/UserList.vue';
 import CenterModal from '@c/modal/CenterModal.vue';
 import $api from '@api';
-import { KakaoMap, KakaoMapMarker } from 'vue3-kakao-maps';
 import BackBtn from '@c/button/BackBtn.vue';
 import BackButton from '@c/button/BackBtn.vue';
 import SaveButton from '@c/button/SaveBtn.vue';
@@ -173,13 +198,16 @@ import DeleteBtn from '../button/DeleteBtn.vue';
 import FormInput from '@c/input/FormInput.vue';
 import FormSelect from '@c/input/FormSelect.vue';
 import ArrInput from '@c/input/ArrInput.vue';
+import MapPopover from '@c/map/MapPopover.vue';
 import { useToastStore } from '@s/toastStore';
 import { useUserInfoStore } from '@/stores/useUserInfoStore';
-import commonApi from '@/common/commonApi';
+import commonApi, { refreshColorList } from '@/common/commonApi';
+import { useProjectStore } from '@/stores/useProjectStore';
 
 // 스토어
 const toastStore = useToastStore();
 const userStore = useUserInfoStore();
+const projectStore = useProjectStore();
 
 // Props 정의
 const props = defineProps({
@@ -199,6 +227,7 @@ const props = defineProps({
     description: {
         type: String,
         required: false,
+        default: "",
     },
     address: {
         type: String,
@@ -227,6 +256,14 @@ const props = defineProps({
     projctCreatorId: {
         type: Number,
         required: false
+    },
+    resetUserSelection: {
+        type: Boolean,
+        default: false
+    },
+    searchParams: {
+        type: Object,
+        default: () => ({ text: '', year: null })
     }
 });
 
@@ -237,22 +274,59 @@ const emit = defineEmits(['update']);
 const isModalOpen = ref(false);
 const logData = ref([]);
 
-// 주소 팝오버 상태
-const isPopoverVisible = ref(false);
-const map = ref();
-const mapIconRef = ref(null);
-const coordinates = ref(null);
+const isMapVisible = ref(null);
 
 // 수정 모달 상태
 const isEditModalOpen = ref(false);
 const originalColor = ref('');
 const nameAlert = ref(false);
+const startDayAlert = ref(false);
 const user = ref(null);
 
+const editUserListRef = ref(null);
+const userListRef = ref(null);
+
+const selectedUsers = ref({
+    activeUsers: [],
+    disabledUsers: []
+});
+
+
+const startDateInput = ref(null);
+const endDateInput = ref(null);
+
+// DOM 요소에 직접 접근하기 위한 변수들
+let startInputElement = null;
+let endInputElement = null;
+
+
+const openStartDatePicker = () => {
+    if (startInputElement) {
+        startInputElement.showPicker();
+    }
+};
+
+const openEndDatePicker = () => {
+    if (endInputElement) {
+        endInputElement.showPicker();
+    }
+};
+
+const updatePopover = (visible) => {
+    isMapVisible.value = visible;
+};
+
+// 사용자 목록 업데이트 핸들러
+const handleEditUserListUpdate = (userLists) => {
+    selectedUsers.value = userLists;
+};
+
+
 const isProjectCreator = computed(() => {
     return user.value?.id === props.projctCreatorId;
 });
 
+
 // 프로젝트 만료 여부 체크 (종료일이 지났는지)
 const isProjectExpired = computed(() => {
     if (!props.enddate) return false;
@@ -286,12 +360,23 @@ const { colorList } = commonApi({
     colorType: 'YNP',
 });
 
+
 // 기존 컬러 + 사용 가능 한 컬러
 const allColors = computed(() => {
-    const existingColor = { value: selectedProject.value.PROJCTCOL, label: selectedProject.value.projctcolor };
-    return [existingColor, ...colorList.value];
+    // 먼저 기존 컬러 객체를 생성 (이 컬러는 항상 목록에 포함되어야 함)
+    const existingColor = {
+        value: props.projctCol, // 원래 프로젝트의 컬러 값 사용
+        label: props.projctColor // 원래 프로젝트의 컬러 레이블 사용
+    };
+
+    // 중복 제거를 위해 기존 컬러 값과 다른 컬러만 필터링
+    const otherColors = colorList.value.filter(color => color.value !== existingColor.value);
+
+    // 기존 컬러를 첫 번째로 놓고 나머지 컬러 추가
+    return [existingColor, ...otherColors];
 });
 
+
 // 수정 :: 주소
 const updateAddress = addressData => {
     selectedProject.value = {
@@ -322,9 +407,23 @@ const closeModal = () => {
 };
 
 // 수정 모달 열기
-const openEditModal = () => {
+const openEditModal = async () => {
+    selectedProject.value = {
+        PROJCTSEQ: props.projctSeq,
+        PROJCTNAM: props.title,
+        PROJCTSTR: props.strdate,
+        PROJCTEND: props.enddate,
+        PROJCTZIP: props.addressZip,
+        PROJCTARR: props.address,
+        PROJCTDTL: props.addressdtail,
+        PROJCTDES: props.description,
+        PROJCTCOL: props.projctCol,
+        projctcolor: props.projctColor,
+    };
+
     isEditModalOpen.value = true;
     originalColor.value = props.projctCol;
+
 };
 
 // 수정 모달 닫기
@@ -343,11 +442,24 @@ const closeEditModal = () => {
     };
 
     isEditModalOpen.value = false;
+
+    // UserList의 resetSelection 메서드 호출
+    if (editUserListRef.value) {
+        editUserListRef.value.resetSelection();
+    }
 };
 
+// selectedUsers 값 변경 감지
+watch(() => selectedUsers.value.activeUsers, (newVal, oldVal) => {
+}, { deep: true });
+
+watch(() => selectedUsers.value.disabledUsers, (newVal, oldVal) => {
+}, { deep: true });
+
 // 변경된 내용 있는지 확인
 const hasChanges = computed(() => {
-    return selectedProject.value.PROJCTNAM !== props.title ||
+    // 기본 변경 확인 코드
+    const basicChanges = selectedProject.value.PROJCTNAM !== props.title ||
         selectedProject.value.PROJCTSTR !== props.strdate ||
         selectedProject.value.PROJCTEND !== props.enddate ||
         selectedProject.value.PROJCTZIP !== props.addressZip ||
@@ -355,26 +467,37 @@ const hasChanges = computed(() => {
         selectedProject.value.PROJCTDTL !== props.addressdtail ||
         selectedProject.value.PROJCTDES !== props.description ||
         selectedProject.value.PROJCTCOL !== props.projctCol;
-});
-// 종료일이 시작일보다 이전 날짜라면 종료일을 시작일로 맞추기
-watch(
-    () => selectedProject.value,
-    () => {
-        const start = new Date(selectedProject.value.PROJCTSTR);
-        const end = new Date(selectedProject.value.PROJCTEND);
 
-        if (end < start) {
-            selectedProject.value.PROJCTEND = selectedProject.value.PROJCTSTR;
+    // 사용자 목록 변경 확인
+    const userChanges = editUserListRef.value?.hasUserChanges() || false;
+
+    return basicChanges || userChanges;
+});
+
+// 시작일 또는 종료일이 변경될 때 종료일의 최소값을 설정
+watch(
+    () => selectedProject.value.PROJCTSTR, // 시작일 (strdate)
+    (newStartDate) => {
+        if (newStartDate && new Date(newStartDate) > new Date(selectedProject.value.PROJCTEND)) {
+            // 시작일이 종료일보다 크면 종료일을 시작일로 설정
+            selectedProject.value.PROJCTEND = newStartDate;
         }
-    },
-    { deep: true, flush: 'post' }
+    }
 );
 
-// 프로젝트 수정
-const handleUpdate = () => {
-    nameAlert.value = selectedProject.value.PROJCTNAM.trim() === '';
+// resetUserSelection 변경 감지
+watch(() => props.resetUserSelection, () => {
+    if (editUserListRef.value) {
+        editUserListRef.value.resetSelection();
+    }
+});
 
-    if (nameAlert.value) {
+// 프로젝트 수정
+const handleUpdate = async () => {
+    nameAlert.value = selectedProject.value.PROJCTNAM.trim() === '';
+    startDayAlert.value = selectedProject.value.PROJCTSTR.trim() === '';
+
+    if (nameAlert.value || startDayAlert.value) {
         return;
     }
 
@@ -383,7 +506,9 @@ const handleUpdate = () => {
         return;
     }
 
-    $api.patch('project/update', {
+    const disabledMemberSeqs = selectedUsers.value.disabledUsers.map(user => user.MEMBERSEQ);
+
+    const res = await $api.patch('project/update', {
         projctSeq: selectedProject.value.PROJCTSEQ,
         projctNam: selectedProject.value.PROJCTNAM,
         projctCol: selectedProject.value.PROJCTCOL,
@@ -395,68 +520,40 @@ const handleUpdate = () => {
         projctDes: selectedProject.value.PROJCTDES || null,
         projctUmb: user.value?.id,
         originalColor: originalColor.value === selectedProject.value.PROJCTCOL ? null : originalColor.value,
-    }).then(res => {
-        if (res.status === 200) {
-            toastStore.onToast('수정이 완료 되었습니다.', 's');
-            closeEditModal();
-            // 상위 컴포넌트에 업데이트 알림
-            emit('update');
-        }
+        disabledMembers: disabledMemberSeqs
     });
-};
 
-// 주소를 좌표로 변환하는 함수
-const convertAddressToCoordinates = () => {
-    const geocoder = new window.kakao.maps.services.Geocoder();
+    if (res.status === 200) {
+        toastStore.onToast('수정이 완료 되었습니다.', 's');
 
-    geocoder.addressSearch(props.address, (result, status) => {
-        if (status === window.kakao.maps.services.Status.OK) {
-            coordinates.value = {
-                lat: parseFloat(result[0].y),
-                lng: parseFloat(result[0].x)
-            };
-        } else {
-            // 기본 좌표 설정 (본사)
-            coordinates.value = {
-                lat: 37.2108651707078,
-                lng: 127.089445559923
-            };
-        }
-    });
-};
+        // 프로젝트 목록 새로고침
+        await projectStore.getProjectList(props.searchParams.text, props.searchParams.year, 'false');
+        await projectStore.getMemberProjects();
+        await refreshColorList('YNP');
 
-const onLoadKakaoMap = (mapRef) => {
-    map.value = mapRef;
-};
+        await editUserListRef.value.fetchProjectParticipation();
+        await userListRef.value.fetchProjectParticipation();
 
-// 지도 확대
-const zoomIn = () => {
-    if (map.value) {
-        const level = map.value.getLevel();
-        map.value.setLevel(level + 1);
-    }
-};
-
-// 지도 축소
-const zoomOut = () => {
-    if (map.value) {
-        const level = map.value.getLevel();
-        map.value.setLevel(level - 1);
+        closeEditModal();
+        emit('update', props.searchParams);
     }
 };
 
 // 프로젝트 삭제
 const handleDelete = () => {
-    $api.patch('project/delete', {
-        projctSeq: props.projctSeq,
-        projctCol: props.projctCol,
-    })
-    .then(res => {
-        if (res.status === 200) {
-            toastStore.onToast('삭제가 완료되었습니다.', 's');
-            location.reload()
-        }
-    })
+    if (confirm('프로젝트를 삭제하시겠습니까?')) {
+        $api.patch('project/delete', {
+            projctSeq: props.projctSeq,
+            projctCol: props.projctCol,
+        })
+        .then(res => {
+            if (res.status === 200) {
+                toastStore.onToast('프로젝트가 삭제되었습니다.', 's');
+                projectStore.getProjectList();
+                projectStore.getMemberProjects();
+            }
+        })
+    }
 };
 
 // 컴포넌트 마운트 시 실행
@@ -465,8 +562,18 @@ onMounted(async () => {
     await userStore.userInfo();
     user.value = userStore.user;
 
-    convertAddressToCoordinates();
+    if (startDateInput.value) {
+        // FormInput 내부 input 찾기
+        startInputElement = startDateInput.value.$el.querySelector('input[type="date"]');
+    }
+
+    if (endDateInput.value) {
+        endInputElement = endDateInput.value.$el.querySelector('input[type="date"]');
+    }
+
 });
 
 
+
 </script>
+

src/components/main/BoardMain.vue

@@ -0,0 +1,233 @@
+<template>
+<div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-6">
+    <div class="card text-center h-100">
+        <!-- 더보기 버튼 -->
+        <div class="d-flex">
+            <router-link
+            :to="{ name: 'BoardList', query: { type: selectedBoard } }"
+            class="btn btn-primary mr-1 pe-1 ps-1 ms-auto my-auto h-50"
+            >
+            more
+            </router-link>
+        </div>
+        <div class="card-body">
+        <!-- 모달 본문 -->
+        <div class="modal-body">
+            <!-- 탭 버튼 영역 -->
+            <div class="btn-group mb-5" role="group">
+                <button
+                    type="button"
+                    class="btn"
+                    :class="selectedBoard === 'notices' ? 'btn-primary' : 'btn-outline-primary'"
+                    @click="changeBoard('notices')"
+                >
+                    공지
+                </button>
+                <button
+                    type="button"
+                    class="btn"
+                    :class="selectedBoard === 'general' ? 'btn-primary' : 'btn-outline-primary'"
+                    @click="changeBoard('general')"
+                >
+                    자유
+                </button>
+                <button
+                    type="button"
+                    class="btn"
+                    :class="selectedBoard === 'anonymous' ? 'btn-primary' : 'btn-outline-primary'"
+                    @click="changeBoard('anonymous')"
+                >
+                    익명
+                </button>
+                </div>
+                <!-- 게시글 미리보기 테이블 -->
+                <table class="table">
+                <thead>
+                    <tr>
+                    <!-- 익명게시판은 '닉네임', 나머지는 '작성자' -->
+                    <th class="text-start">
+                        <div class="ms-4">
+                        {{ selectedBoard === 'anonymous' ? '닉네임' : '작성자' }}
+                        </div>
+                    </th>
+                    <th class="text-start" style="width: 65%;">
+                        <div class="ms-4">
+                            제목
+                        </div>
+                    </th>
+                </tr>
+                </thead>
+                <tbody>
+                    <tr
+                    v-for="post in currentList"
+                    :key="post.id"
+                    style="cursor: pointer;"
+                    @click="goDetail(post.id, selectedBoard)"
+                    >
+                    <td class="text-start nickname-ellipsis small">
+                        <div class="ms-4">
+                        {{ selectedBoard === 'anonymous' ? post.nickname : post.author }}
+                        </div>
+                    </td>
+                    <td class="text-start fs-6">
+                        <div class="ms-4">
+                        {{ truncateTitle(post.title) }}
+                        <span v-if="post.commentCount" class="text-danger ml-1 small">
+                            [{{ post.commentCount }}]
+                        </span>
+                        <i v-if="post.img" class="bi bi-image mx-1 small"></i>
+                        <i
+                        v-if="post.hasAttachment.length > 0"
+                        class="bi bi-paperclip ml-1 small"
+                        ></i>
+
+                        <div class="text-muted small small">
+                        {{ post.date }}
+                        <span class="ms-1">
+                        <i class="fa-regular fa-eye small me-1"></i>{{post.views}}
+                        </span>
+                        </div>
+                    </div>
+                    </td>
+                    </tr>
+                    <tr v-if="currentList.length === 0">
+                    <td colspan="3" class="text-center text-muted">게시물이 없습니다.</td>
+                    </tr>
+                </tbody>
+                </table>
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { useRouter } from 'vue-router';
+import axios from '@api';
+import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday';
+import isYesterday from 'dayjs/plugin/isYesterday';
+import 'bootstrap-icons/font/bootstrap-icons.css';
+
+dayjs.extend(isToday);
+dayjs.extend(isYesterday);
+
+const router = useRouter();
+
+// 모달이 항상 보이도록 초기값 true
+const isModalOpen = ref(true);
+
+// 현재 선택된 게시판 타입: 'notices', 'general', 'anonymous'
+const selectedBoard = ref('notices');
+
+// 각 게시판 미리보기 데이터 배열
+const noticeList = ref([]);
+const freeList = ref([]);
+const anonymousList = ref([]);
+
+// 선택된 게시판에 따른 미리보기 목록 computed
+const currentList = computed(() => {
+    if (selectedBoard.value === 'notices') return noticeList.value;
+    if (selectedBoard.value === 'general') return freeList.value;
+    if (selectedBoard.value === 'anonymous') return anonymousList.value;
+    return [];
+});
+
+// 날짜 포맷 함수: 오늘이면 HH:mm, 아니면 YYYY-MM-DD
+const formatDate = dateString => {
+    const date = dayjs(dateString);
+    return date.isToday() ? date.format('HH:mm') : date.format('YYYY-MM-DD');
+};
+
+// 제목이 14글자 넘어가면 ... 처리하는 함수
+const truncateTitle = title => {
+    return title.length > 7 ? title.slice(0, 7) + '...' : title;
+};
+
+// 공지사항 데이터 로드 (최대 5개)
+const fetchNoticePosts = async () => {
+    try {
+        const { data } = await axios.get('board/notices', { params: { size: 8 } });
+        if (data?.data) {
+            noticeList.value = data.data.map(post => ({
+                id: post.id,
+                title: post.title,
+                date: formatDate(post.date),
+                rawDate: post.date,
+                views: post.cnt || 0,
+                commentCount: post.commentCount,
+                img: post.firstImageUrl,
+                author: post.author || '관리자',
+                nickname: post.nickname || '관리자',
+                hasAttachment: post.hasAttachment, // 첨부파일 유무
+            }));
+        }
+    } catch (error) {
+    }
+};
+
+// board/general 게시글 로드 후 자유게시판과 익명게시판으로 분리 (최대 10개 조회 → 각각 최대 5개)
+const fetchGeneralPosts = async () => {
+    try {
+        const { data } = await axios.get('board/general', { params: { size: 16 } });
+        if (data?.data && data.data.list) {
+        const freePosts = [];
+        const anonymousPosts = [];
+        data.data.list.forEach(post => {
+            if (post.nickname) {
+            // 닉네임이 있으면 익명게시판 데이터
+            anonymousPosts.push({
+                id: post.id,
+                title: post.title,
+                date: formatDate(post.date),
+                img: post.firstImageUrl,
+                rawDate: post.date,
+                views: post.cnt || 0,
+                commentCount: post.commentCount,
+                nickname: post.nickname,
+                hasAttachment: post.hasAttachment, // 첨부파일 유무
+            });
+            } else {
+            // 닉네임이 없으면 자유게시판 데이터
+            freePosts.push({
+                id: post.id,
+                title: post.title,
+                date: formatDate(post.date),
+                rawDate: post.date,
+                views: post.cnt || 0,
+                img: post.firstImageUrl,
+                commentCount: post.commentCount,
+                author: post.author || '익명',
+                hasAttachment: post.hasAttachment, // 첨부파일 유무
+            });
+            }
+        });
+        freeList.value = freePosts.slice(0, 8);
+        anonymousList.value = anonymousPosts.slice(0, 8);
+        }
+    } catch (error) {
+        console.error(error);
+    }
+};
+
+// 탭 변경 함수
+const changeBoard = type => {
+    selectedBoard.value = type;
+};
+
+// 상세 페이지 이동 (게시판 타입 전달)
+const goDetail = (id, boardType) => {
+    router.push({ name: 'BoardDetail', params: { id }, query: { type: boardType } });
+};
+
+// 모달이 열릴 때 데이터 로드
+fetchNoticePosts();
+fetchGeneralPosts();
+</script>
+
+<style scoped>
+.table > :not(caption) > * > * {
+    padding: 0 !important;
+}
+</style>

src/components/main/EventModal.vue

@@ -0,0 +1,260 @@
+<template>
+    <div class="event-modal position-fixed bg-white shadow rounded" :style="modalStyle">
+        <!-- 이벤트 선택 화면 -->
+        <div v-if="!selectedEventType" class="d-flex flex-wrap gap-2 p-2">
+            <div v-for="event in eventTypes" :key="event.code" class="event-icon-wrapper position-relative">
+                <img
+                    :src="`${baseUrl}img/main-category-img/main-${event.code}.png`"
+                    class="event-icon-select"
+                    style="width: 25px; height: 25px; cursor: pointer"
+                    @click="handleEventClick(event)"
+                />
+                <!-- X 표시 수정 -->
+                <span v-if="isEventExists(event.type)" class="cancel-mark"> × </span>
+            </div>
+        </div>
+
+        <!-- 입력 폼 화면 -->
+        <div v-else class="p-2" style="min-width: 200px">
+            <div class="d-flex justify-content-between align-items-center mb-2">
+                <small>{{ getEventTitle(selectedEventType) }}</small>
+                <button class="btn-close btn-close-sm" style="font-size: 8px" @click="resetForm"></button>
+            </div>
+            <div class="mb-2">
+                <input
+                    type="text"
+                    class="form-control form-control-sm py-1"
+                    style="height: 25px; font-size: 12px"
+                    placeholder="장소"
+                    v-model="eventPlace"
+                    maxlength="20"
+                    @input="handleChangeInput"
+                />
+                <span v-if="noInputAlert" class="invalid-feedback d-block" style="padding-left: 5px">{{ noInputAlert }}</span>
+            </div>
+            <div class="mb-2">
+                <div @click="focusPicker">
+                    <input
+                        type="time"
+                        class="form-control form-control-sm py-1"
+                        style="height: 0%; font-size: 12px"
+                        v-model="eventTime"
+                        @input="handleChangeInput2"
+                    />
+                </div>
+
+                <input
+                    ref="timeInput"
+                    type="time"
+                    class="hidden-time-input"
+                    style="height: 0%; font-size: 12px"
+                    v-model="eventTime"
+                    @input="handleChangeInput2"
+                />
+                <span v-if="noInputAlert2" class="invalid-feedback d-block" style="padding-left: 5px">{{ noInputAlert2 }}</span>
+            </div>
+            <div class="text-end">
+                <button class="btn btn-primary btn-sm py-1" style="font-size: 12px; height: 25px; line-height: 1" @click="handleSubmit">
+                    등록
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { ref, computed } from 'vue';
+
+    const props = defineProps({
+        position: {
+            type: Object,
+            required: true,
+            default: () => ({ x: 0, y: 0 }),
+        },
+        selectedDate: {
+            type: String,
+            required: true,
+        },
+        baseUrl: {
+            type: String,
+            required: true,
+        },
+        dateEvents: {
+            type: Array,
+        },
+    });
+
+    const emit = defineEmits(['select', 'delete', 'insert']);
+
+    // 폼 관련 상태
+    const selectedEventType = ref(null);
+    const eventPlace = ref('');
+    const eventTime = ref('');
+    const noInputAlert = ref(null);
+    const noInputAlert2 = ref(null);
+    const timeInput = ref(null);
+
+    const focusPicker = () => {
+        if (timeInput.value) {
+            timeInput.value.showPicker(); // 달력 자동 열기 (일부 브라우저에서 지원)
+            timeInput.value.focus(); // 포커스 이동
+        }
+    };
+
+    const eventTypes = [
+        { type: 'birthdayParty', code: '300203', title: '생일파티' },
+        { type: 'dinner', code: '300204', title: '회식' },
+        { type: 'teaTime', code: '300205', title: '티타임' },
+        { type: 'workshop', code: '300206', title: '워크샵' },
+    ];
+
+    const getEventTitle = type => {
+        return eventTypes.find(event => event.code === type)?.title || '';
+    };
+
+    const isEventExists = type => {
+        return props.dateEvents?.some(event => event.type === type);
+    };
+
+    const handleEventClick = event => {
+        if (isEventExists(event.type)) {
+            if (confirm('이벤트를 취소하시겠습니까?')) {
+                emit('delete', {
+                    date: props.selectedDate,
+                    code: event.code,
+                    title: event.title,
+                });
+            }
+        } else {
+            selectedEventType.value = event.code;
+            noInputAlert.value = '';
+            noInputAlert2.value = '';
+        }
+    };
+
+    const handleSubmit = () => {
+        if (isValid()) {
+            emit('insert', {
+                date: props.selectedDate,
+                code: selectedEventType.value,
+                title: getEventTitle(selectedEventType.value),
+                place: eventPlace.value.trim(),
+                time: eventTime.value,
+            });
+        }
+    };
+
+    // 유효성 검사
+    const isValid = () => {
+        let isValid = true;
+
+        if (!eventPlace.value.trim()) {
+            noInputAlert.value = '장소를 입력해 주세요';
+            isValid = false;
+        } else {
+            noInputAlert.value = '';
+        }
+
+        if (!eventTime.value) {
+            noInputAlert2.value = '시간을 입력해 주세요';
+            isValid = false;
+        } else {
+            noInputAlert2.value = '';
+        }
+
+        return isValid;
+    };
+
+    const handleChangeInput = () => {
+        noInputAlert.value = null;
+    };
+
+    const handleChangeInput2 = () => {
+        noInputAlert2.value = null;
+    };
+
+    const resetForm = () => {
+        selectedEventType.value = null;
+        eventPlace.value = '';
+        eventTime.value = '';
+    };
+
+    // 모달 스타일 계산을 computed로 변경
+    const modalStyle = computed(() => {
+        const modalWidth = 200; // 모달의 예상 너비
+        const modalHeight = 150; // 모달의 예상 높이
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+
+        let x = props.position?.x || 0;
+        let y = props.position?.y || 0;
+
+        // 모달이 뷰포트를 벗어나지 않도록 조정
+        if (x + modalWidth > viewportWidth) {
+            x = viewportWidth - modalWidth - 10;
+        }
+        if (x < 0) {
+            x = 10;
+        }
+        if (y + modalHeight > viewportHeight) {
+            y = viewportHeight - modalHeight - 10;
+        }
+        if (y < 0) {
+            y = 10;
+        }
+
+        return {
+            left: `${x}px`,
+            top: `${y}px`,
+            zIndex: 1050,
+            maxWidth: '90vw', // 뷰포트 너비의 90%를 넘지 않도록
+            maxHeight: '90vh', // 뷰포트 높이의 90%를 넘지 않도록
+        };
+    });
+</script>
+
+<style scoped>
+    .event-icon-wrapper {
+        position: relative;
+        display: inline-block;
+    }
+
+    .event-icon-select {
+        transition: transform 0.2s;
+    }
+
+    .event-icon-select:hover {
+        transform: scale(1.1);
+    }
+
+    .cancel-mark {
+        position: absolute;
+        top: -8px;
+        right: -8px;
+        width: 16px;
+        height: 16px;
+        background-color: #dc3545;
+        color: white;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 12px;
+        font-weight: bold;
+        line-height: 1;
+    }
+
+    .event-modal {
+        min-width: 120px;
+        max-width: 300px;
+        overflow: auto;
+    }
+
+    /* 작은 화면에서의 스타일 */
+    @media (max-width: 576px) {
+        .event-modal {
+            min-width: 100px;
+            font-size: 0.9em;
+        }
+    }
+</style>

src/components/main/MainEventBoard.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class="ps-2" style="font-size: 13px">
+        <span class="d-flex align-items-center g-2 font_767"><i class="bx bxs-map pe-1"></i>{{ place }}</span>
+        <span class="d-flex align-items-center g-2 font_767"
+            ><i class="bx bxs-time-five pe-1"></i>{{ $common.dateFormatter(time, 'T') }}</span
+        >
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            place: {
+                type: String,
+                required: true,
+            },
+            time: {
+                type: String,
+                required: true,
+            },
+        },
+    };
+</script>
+<style>
+    @media (max-width: 767px) {
+        .font_767 {
+            font-size: 2rem;
+        }
+    }
+</style>

src/components/main/MainEventCalendar.vue

@@ -0,0 +1,724 @@
+<template>
+    <div class="card app-calendar-wrapper">
+        <div class="row g-0">
+            <div class="col-3 border-end text-center" id="app-calendar-sidebar">
+                <div class="card-body">
+                    <img
+                        v-if="user"
+                        :src="`${profileImgUrl}profile/${user.profile}`"
+                        alt="Profile Image"
+                        class="w-px-50 h-px-50 rounded-circle profile-img"
+                        @error="$event.target.src = '/img/icons/icon.png'"
+                    />
+                    <p class="mt-2 fw-bold">
+                        {{ user.name }}
+                    </p>
+
+                    <CommuterBtn
+                        ref="workTimeComponentRef"
+                        :userId="user.id"
+                        :checkedInProject="checkedInProject || {}"
+                        :pendingProjectChange="pendingProjectChange"
+                        @update:pendingProjectChange="pendingProjectChange = $event"
+                        @leaveTimeUpdated="handleLeaveTimeUpdate"
+                    />
+
+                    <MainEventList
+                        :categoryList="categoryList"
+                        :baseUrl="baseUrl"
+                        :birthdayList="birthdayList"
+                        :vacationList="vacationList"
+                        :birthdayPartyList="birthdayPartyList"
+                        :dinnerList="dinnerList"
+                        :teaTimeList="teaTimeList"
+                        :workShopList="workShopList"
+                        @handle-click-vacation="handleClickVacation"
+                    />
+                </div>
+            </div>
+
+            <div class="col app-calendar-content">
+                <div class="card shadow-none border-0">
+                    <div class="card-body">
+                        <full-calendar
+                            ref="fullCalendarRef"
+                            :events="calendarEvents"
+                            :options="calendarOptions"
+                            defaultView="dayGridMonth"
+                            class="flatpickr-calendar-only"
+                        >
+                        </full-calendar>
+                        <input ref="calendarDatepicker" type="text" class="d-none" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <EventModal
+        v-if="showModal"
+        :position="modalPosition"
+        :selected-date="selectedDate"
+        :base-url="baseUrl"
+        :date-events="currentDateEvents"
+        @select="handleEventSelect"
+        @delete="handleEventDelete"
+        @insert="handleEventInsert"
+        @close="handleCloseModal"
+    />
+</template>
+
+<script setup>
+    import { inject, onMounted, reactive, ref, watch, nextTick } from 'vue';
+    import { fetchHolidays } from '@c/calendar/holiday';
+    import { useUserInfoStore } from '@/stores/useUserInfoStore';
+    import { useProjectStore } from '@/stores/useProjectStore';
+    import { useToastStore } from '@s/toastStore';
+    import { useWeatherStore } from '@/stores/useWeatherStore';
+    import { useDatePicker } from '@/stores/useDatePicker';
+    import { storeToRefs } from 'pinia';
+    import router from '@/router';
+    import FullCalendar from '@fullcalendar/vue3';
+    import dayGridPlugin from '@fullcalendar/daygrid';
+    import interactionPlugin from '@fullcalendar/interaction';
+    import CommuterBtn from '@c/commuters/CommuterBtn.vue';
+    import MainEventList from '@c/main/MainEventList.vue';
+    import EventModal from '@c/main/EventModal.vue';
+    import $api from '@api';
+    import 'flatpickr/dist/flatpickr.min.css';
+    import '@/assets/css/app-calendar.css';
+
+    const baseUrl = import.meta.env.VITE_DOMAIN;
+    const profileImgUrl = import.meta.env.VITE_SERVER_IMG_URL;
+    const user = ref({});
+    const userStore = useUserInfoStore();
+    const projectStore = useProjectStore();
+    const weatherStore = useWeatherStore();
+    const datePickerStore = useDatePicker();
+    const { dailyWeatherList } = storeToRefs(weatherStore);
+
+    const dayjs = inject('dayjs');
+    const fullCalendarRef = ref(null);
+    const workTimeComponentRef = ref(null);
+    const calendarEvents = ref([]);
+    const calendarDatepicker = ref(null);
+    //const dailyWeatherList = ref([]);
+
+    const selectedProject = ref(null);
+    const checkedInProject = ref(null);
+    const pendingProjectChange = ref(null);
+
+    // 이벤트 모달 관련
+    const showModal = ref(false);
+    const modalPosition = ref({ x: 0, y: 0 });
+    const selectedDate = ref('');
+
+    // 공통 함수
+    const $common = inject('common');
+    const toastStore = useToastStore();
+
+    // 롱프레스 관련 변수 추가
+    const pressTimer = ref(null);
+    const longPressDelay = 500; // 0.5초
+
+    /************* category ***************/
+
+    // 이벤트 카테고리 데이터 로딩
+    const categoryList = ref([]);
+    const fetchCategoryList = async () => {
+        const { data } = await $api.get('main/category');
+        if (data) categoryList.value = [...data.data.filter(categoryInfo => categoryInfo.CMNCODODR != 0)];
+    };
+
+    /************* init ***************/
+    const monthBirthdayList = ref([]);
+    const monthVacationList = ref([]);
+    const monthBirthdayPartyList = ref([]);
+    const monthDinnerList = ref([]);
+    const monthTeaTimeList = ref([]);
+    const monthWorkShopList = ref([]);
+
+    const birthdayList = ref([]);
+    const vacationList = ref([]);
+    const birthdayPartyList = ref([]);
+    const dinnerList = ref([]);
+    const teaTimeList = ref([]);
+    const workShopList = ref([]);
+
+    const currentDateEvents = ref([]);
+
+    // 생일자, 휴가자, 이벤트 일정 조회
+    const fetchEventList = async param => {
+        const { data } = await $api.get(`main/eventList?${param}`);
+        const res = data?.data;
+
+        // 기존의 공휴일 이벤트는 유지
+        const holidayEvents = calendarEvents.value.filter(event => event.classNames?.includes('holiday-event'));
+        calendarEvents.value = [...holidayEvents, ...dailyWeatherList.value];
+
+        // 생일자
+        if (res?.memberBirthdayList?.length) {
+            monthBirthdayList.value = [...res.memberBirthdayList];
+            res.memberBirthdayList.forEach(member => {
+                addEvent($common.dateFormatter(member.MEMBERBTH, 'YMD'), 'birthday', `${member.MEMBERNAM}`);
+            });
+        }
+
+        // 휴가자
+        if (res?.memberVacationList?.length) {
+            monthVacationList.value = [...res.memberVacationList];
+            res.memberVacationList.forEach(member => {
+                addEvent($common.dateFormatter(member.LOCVACUDT, 'YMD'), 'vacation', `${member.MEMBERNAM}`);
+            });
+        }
+
+        // 초기화
+        monthBirthdayPartyList.value = [];
+        monthDinnerList.value = [];
+        monthTeaTimeList.value = [];
+        monthWorkShopList.value = [];
+
+        if (res?.eventList?.length) {
+            res.eventList.forEach(item => {
+                switch (item.CMNCODVAL) {
+                    case 300203:
+                        monthBirthdayPartyList.value = [...monthBirthdayPartyList.value, item];
+                        addEvent($common.dateFormatter(item.LOCEVTTME, 'YMD'), 'birthdayParty', '생일파티');
+                        break;
+
+                    case 300204:
+                        monthDinnerList.value = [...monthDinnerList.value, item];
+                        addEvent($common.dateFormatter(item.LOCEVTTME, 'YMD'), 'dinner', '회식');
+                        break;
+
+                    case 300205:
+                        monthTeaTimeList.value = [...monthTeaTimeList.value, item];
+                        addEvent($common.dateFormatter(item.LOCEVTTME, 'YMD'), 'teaTime', '티타임');
+                        break;
+
+                    case 300206:
+                        monthWorkShopList.value = [...monthWorkShopList.value, item];
+                        addEvent($common.dateFormatter(item.LOCEVTTME, 'YMD'), 'workshop', '워크샵');
+                        break;
+                }
+            });
+        }
+    };
+
+    // 달력에 이벤트 데이터 추가
+    const addEvent = (date, type, title) => {
+        // 생일의 경우 달력의 현재 년도로 변경하여 처리
+        if (type === 'birthday') {
+            const calendarApi = fullCalendarRef.value?.getApi();
+
+            if (calendarApi) {
+                const calendarDate = calendarApi.currentData.currentDate;
+                const { year } = $common.formatDateTime(new Date(calendarDate));
+                const birthDate = $common.dateFormatter(date, 'MD');
+                date = `${year}-${birthDate}`;
+            }
+        }
+
+        // 같은 날짜와 타입의 이벤트가 이미 있는지 확인
+        const existingEvent = calendarEvents.value.find(
+            event => $common.dateFormatter(event.start, 'MD') === $common.dateFormatter(date, 'MD') && event.type == type,
+        );
+
+        // 없는 경우에만 추가
+        if (!existingEvent) {
+            calendarEvents.value.push({
+                start: date,
+                type: type,
+                title: title,
+                classNames: [`${type}-event`],
+            });
+        }
+    };
+
+    // 해당일 기준 이벤트 리스트 필터링
+    const useFilterEventList = (month, day) => {
+        // 생일자
+        if (monthBirthdayList.value) {
+            birthdayList.value = $common.filterTargetByDate(monthBirthdayList.value, 'MEMBERBTH', month, day);
+        }
+
+        // 휴가자
+        if (monthVacationList.value) {
+            vacationList.value = $common.filterTargetByDate(monthVacationList.value, 'LOCVACUDT', month, day);
+        }
+
+        // 생일파티
+        if (monthBirthdayPartyList.value) {
+            birthdayPartyList.value = $common.filterTargetByDate(monthBirthdayPartyList.value, 'LOCEVTTME', month, day);
+        }
+
+        // 회식
+        if (monthDinnerList.value) {
+            dinnerList.value = $common.filterTargetByDate(monthDinnerList.value, 'LOCEVTTME', month, day);
+        }
+
+        // 티타임
+        if (monthTeaTimeList.value) {
+            teaTimeList.value = $common.filterTargetByDate(monthTeaTimeList.value, 'LOCEVTTME', month, day);
+        }
+
+        // 워크샵
+        if (monthWorkShopList.value) {
+            workShopList.value = $common.filterTargetByDate(monthWorkShopList.value, 'LOCEVTTME', month, day);
+        }
+    };
+
+    // 캘린더 데이터 가져오기
+    const fetchData = async () => {
+        // FullCalendar API 인스턴스 가져오기
+        const calendarApi = fullCalendarRef.value?.getApi();
+        if (!calendarApi) return;
+
+        const date = calendarApi.currentData.currentDate;
+        const { year, month } = $common.formatDateTime(new Date(date));
+
+        try {
+            // 현재 표시 중인 월의 공휴일 정보 가져오기
+            const holidayEvents = await fetchHolidays(year, month);
+            calendarEvents.value = [...holidayEvents]; // 공휴일 정보로 초기화
+
+            // 이벤트 데이터 가져오기
+            const param = new URLSearchParams();
+            param.append('year', year);
+            param.append('month', month);
+            param.append('day', '1'); // 해당 월의 첫날
+
+            await fetchEventList(param);
+        } catch (error) {
+            console.error('공휴일 정보 로딩 실패:', error);
+        }
+    };
+
+    // 캘린더 이동 함수 (이전, 다음, 오늘)
+    const moveCalendar = async (value = 0) => {
+        const calendarApi = fullCalendarRef.value?.getApi();
+
+        if (value === 1) {
+            calendarApi.prev(); // 이전 달로 이동
+        } else if (value === 2) {
+            calendarApi.next(); // 다음 달로 이동
+        } else if (value === 3) {
+            calendarApi.today(); // 오늘 날짜로 이동
+        }
+
+        await fetchData();
+    };
+
+    // 날짜 선택 가능 여부를 확인하는 공통 함수
+    const isSelectableDate = date => {
+        const checkDate = dayjs(date);
+        const isWeekend = checkDate.day() === 0 || checkDate.day() === 6; // 주말체크
+        // 공휴일 체크
+        const isHoliday = calendarEvents.value.some(
+            event =>
+                event.classNames?.includes('holiday-event') && dayjs(event.start).format('YYYY-MM-DD') === checkDate.format('YYYY-MM-DD'),
+        );
+
+        return !isWeekend && !isHoliday;
+    };
+
+    // 날짜 셀 클래스 추가 함수
+    const getCellClassNames = arg => {
+        const cellDate = dayjs(arg.date);
+        const classes = [];
+
+        // 선택 불가능한 날짜(과거, 주말, 공휴일)에 동일한 클래스 추가
+        if (!isSelectableDate(cellDate)) {
+            classes.push('fc-day-sat-sun');
+        } else {
+            // 선택 가능한 날짜 포인터 클래스 추가
+            classes.push('clickable');
+        }
+
+        return classes;
+    };
+
+    // 날짜 클릭 이벤트 핸들러
+    let todayEL = null;
+    const handleDateClick = info => {
+        if (isSelectableDate(info.date)) {
+            if ($common.isToday(info.date)) {
+                // 오늘 날짜 클릭 시 클래스 제거하고 요소 저장
+                todayEL = info.dayEl;
+                todayEL.classList.remove('fc-day-today');
+            } else if (todayEL) {
+                // 다른 날짜 클릭 시 저장된 오늘 요소에 클래스 다시 추가
+                todayEL.classList.add('fc-day-today');
+                todayEL = null;
+            }
+        }
+        const { month, day } = $common.formatDateTime(new Date(info.dateStr));
+        useFilterEventList(month, day);
+    };
+
+    // 오늘 날짜 노란색 배경 복구
+    const colorToday = e => {
+        if (todayEL != null && !todayEL.classList.contains('fc-day-today')) todayEL.classList.add('fc-day-today');
+    };
+
+    // 이벤트 모달 핸들러
+    const handleMouseDown = (date, jsEvent) => {
+        if (showModal.value) showModal.value = false;
+
+        // 해당 날짜의 이벤트 필터링
+        const dateEvents = calendarEvents.value.filter(
+            event => $common.dateFormatter(event.start, 'YMD') === $common.dateFormatter(date, 'YMD'),
+        );
+
+        pressTimer.value = setTimeout(() => {
+            modalPosition.value = {
+                x: jsEvent.clientX,
+                y: jsEvent.clientY,
+            };
+
+            selectedDate.value = date;
+            currentDateEvents.value = dateEvents;
+            showModal.value = true;
+            pressTimer.value = null;
+        }, longPressDelay);
+    };
+
+    // 이벤트 모달 외부 클릭 시 닫힘
+    const handleMouseUp = () => {
+        if (pressTimer.value) {
+            clearTimeout(pressTimer.value);
+            pressTimer.value = null;
+        }
+    };
+
+    // 이벤트 삭제 api
+    const toggleEvent = async (date, code, title) => {
+        const { data } = await $api.post('main/toggleEvent', {
+            date: date,
+            code: code,
+            title: title,
+        });
+
+        if (data?.code === 200) toastStore.onToast(data.message);
+
+        const { year, month, day } = $common.formatDateTime(new Date(date));
+        const param = new URLSearchParams();
+        param.append('year', year);
+        param.append('month', month);
+        param.append('day', day);
+
+        await fetchEventList(param);
+        useFilterEventList(month, day);
+    };
+
+    // 이벤트 추가 api
+    const insertEvent = async (date, code, title, place, time) => {
+        const dateTime = $common.dateFormatter(`${date} ${time}`);
+        const { data } = await $api.post('main/inserEvent', {
+            date: dateTime,
+            code: code,
+            title: title,
+            place: place,
+        });
+
+        if (data?.code === 200) toastStore.onToast(data.message);
+
+        const { year, month, day } = $common.formatDateTime(new Date(date));
+        const param = new URLSearchParams();
+        param.append('year', year);
+        param.append('month', month);
+        param.append('day', day);
+
+        await fetchEventList(param);
+        useFilterEventList(month, day);
+    };
+
+    // 이벤트 선택 핸들러
+    const handleEventSelect = data => {
+        toggleEvent(data.date, data.code, data.title);
+        showModal.value = false;
+    };
+
+    // 이벤트 추가 핸들러
+    const handleEventInsert = data => {
+        insertEvent(data.date, data.code, data.title, data.place, data.time);
+        showModal.value = false;
+    };
+
+    // 이벤트 삭제 핸들러
+    const handleEventDelete = data => {
+        toggleEvent(data.date, data.code, data.title);
+        showModal.value = false;
+    };
+
+    // 이벤트 모달 닫기
+    const handleCloseModal = () => {
+        showModal.value = false;
+    };
+
+    // 달력 이벤트 아이콘 표시 함수
+    const handleEventContent = item => {
+        if (!item.event) return null;
+
+        // 공휴일인 경우 텍스트로 표시
+        if (item.event.classNames?.includes('holiday-event')) {
+            return {
+                html: `<div class="holiday-text" style="color: white;">${item.event.title}</div>`,
+            };
+        }
+
+        // 현재 이벤트의 타입만 확인
+        const eventType = item.event.extendedProps.type;
+        if (!eventType) return null;
+
+        let iconCode = '';
+        switch (eventType) {
+            case 'birthday':
+                iconCode = '300201';
+                break;
+            case 'vacation':
+                iconCode = '300202';
+                break;
+            case 'birthdayParty':
+                iconCode = '300203';
+                break;
+            case 'dinner':
+                iconCode = '300204';
+                break;
+            case 'teaTime':
+                iconCode = '300205';
+                break;
+            case 'workshop':
+                iconCode = '300206';
+                break;
+            default:
+                return null;
+        }
+
+        return {
+            html: `<img src="${baseUrl}img/main-category-img/main-${iconCode}.png" class="calendar-event-icon" style="width: 20px; height: 20px; margin: 2px;" />`,
+        };
+    };
+
+    // 캘린더 옵션 설정
+    const calendarOptions = reactive({
+        plugins: [dayGridPlugin, interactionPlugin],
+        initialView: 'dayGridMonth',
+        headerToolbar: {
+            left: 'today',
+            center: 'title',
+            right: 'prev,next',
+        },
+        locale: 'kr',
+        events: calendarEvents,
+        eventOrder: 'sortIdx',
+        contentHeight: 'auto',
+        eventContent: handleEventContent,
+        selectable: true,
+        selectAllow: selectInfo => isSelectableDate(selectInfo.start),
+        dateClick: handleDateClick,
+        dayCellDidMount: arg => {
+            // 날씨 정보 업데이트
+            addWeatherInfo(arg);
+            const dateCell = arg.el;
+
+            // 마우스 홀드시 이벤트 모달
+            dateCell.addEventListener('mousedown', e => {
+                if (!isSelectableDate(arg.date)) return; // 공휴일 제외
+                const date = $common.dateFormatter(arg.date, 'YMD');
+                handleMouseDown(date, e);
+            });
+            dateCell.addEventListener('mouseup', handleMouseUp);
+            dateCell.addEventListener('mouseleave', handleMouseUp);
+        },
+        dayCellClassNames: getCellClassNames,
+        unselectAuto: true,
+        droppable: false,
+        eventDisplay: 'block',
+        customButtons: {
+            prev: {
+                text: 'PREV',
+                click: () => moveCalendar(1),
+            },
+            today: {
+                text: 'TODAY',
+                click: () => moveCalendar(3),
+            },
+            next: {
+                text: 'NEXT',
+                click: () => moveCalendar(2),
+            },
+        },
+    });
+
+    // 날짜 정보 업데이트
+    const addWeatherInfo = arg => {
+        const dateStr = $common.dateFormatter(arg.date, 'YMD');
+        // 해당 셀의 날짜와 일치하는 데이터
+        const theDayWeatherInfo = dailyWeatherList.value.find(weather => weather.date === dateStr);
+        const dayTopEl = arg.el.querySelector('.fc-daygrid-day-top');
+        const isWeatherInfoExist = dayTopEl.getElementsByClassName('weather-icon').length > 0; // 중복 방지
+
+        if (theDayWeatherInfo && !isWeatherInfoExist) {
+            let weatherIconUrl = `https://openweathermap.org/img/wn/${theDayWeatherInfo.icon}.png`;
+            if (theDayWeatherInfo.icon === '01d' || theDayWeatherInfo.icon === '01n') {
+                weatherIconUrl = '/img/icons/sunny-custom.png';
+            }
+            // 날씨 이미지 세팅
+            const weatherEl = document.createElement('img');
+            weatherEl.src = weatherIconUrl;
+            weatherEl.alt = theDayWeatherInfo.description;
+            weatherEl.className = 'weather-icon';
+            weatherEl.style.width = '28px';
+            weatherEl.style.height = '28px';
+
+            // 해당 셀에 이미지 넣기
+            dayTopEl.classList.add('align-items-center');
+            dayTopEl.prepend(weatherEl); // 이상하게 가장 앞에 넣어야 일자 뒤에 나옴 reverse 옵션이 있는듯
+        }
+    };
+
+    // 날씨 데이터 변경 감지하여 날씨 정보 업데이트
+    watch(dailyWeatherList, async () => {
+        await nextTick(); // DOM이 업데이트된 후 실행
+        document.querySelectorAll('.fc-daygrid-day').forEach(dayCell => {
+            addWeatherInfo({
+                el: dayCell,
+                date: dayCell.dataset.date,
+            });
+        });
+    });
+
+    const handleWheelEvent = e => {
+        handleCloseModal();
+    };
+
+    // 선택한 날의 이벤트 중에 휴가자 항목을 누를때 휴가페이지 이동
+    const handleClickVacation = () => {
+        router.push('/vacation');
+    };
+
+    // 달력 뷰 변경 감지 (월 변경 시 데이터 다시 가져오기)
+    watch(
+        () => fullCalendarRef.value?.getApi().currentData.viewTitle,
+        async () => {
+            await fetchData();
+        },
+    );
+
+    // selectbox 프로젝트 선택 변경 사항 감지
+    watch(
+        () => projectStore.selectedProject,
+        newProject => {
+            if (newProject) {
+                selectedProject.value = newProject.PROJCTSEQ;
+                checkedInProject.value = newProject;
+            } else {
+                selectedProject.value = null;
+                checkedInProject.value = null;
+            }
+        },
+    );
+
+    const handleLeaveTimeUpdate = async event => {
+        const memberSeq = user.value.id;
+        if (!memberSeq) return;
+
+        // 현 사용자 프로젝트 퇴근기록 확인
+        const { data } = await $api.post('main/getUserLeaveRecord', {
+            memberSeq: memberSeq,
+        });
+
+        const res = data?.data;
+        if (res && !res?.COMMUTLVE) {
+            await projectStore.getMemberProjects();
+
+            if (projectStore.activeMemberProjectList.length > 0) {
+                const previousProject =
+                    projectStore.activeMemberProjectList.find(p => res.MEMBERSEQ === user.value.id && res.PROJCTLVE === p.PROJCTSEQ) ||
+                    projectStore.activeMemberProjectList[0]; // 이전 출근 프로젝트가 없으면 첫 번째 프로젝트
+
+                if (previousProject) {
+                    selectedProject.value = previousProject.PROJCTSEQ;
+                    projectStore.setSelectedProject(previousProject);
+                } else if (projectStore.activeProjectList.length > 0) {
+                    selectedProject.value = projectStore.activeProjectList[0].PROJCTSEQ;
+                    projectStore.setSelectedProject(projectStore.activeProjectList[0]);
+                } else {
+                    selectedProject.value = null;
+                    projectStore.setSelectedProject(null);
+                }
+            } else {
+                selectedProject.value = null;
+                projectStore.setSelectedProject(null);
+            }
+        }
+    };
+
+    onMounted(async () => {
+        await userStore.userInfo();
+        user.value = userStore.user;
+
+        // 저장된 선택 프로젝트 가져오기
+        const storedProject = projectStore.getSelectedProject();
+        if (storedProject) {
+            selectedProject.value = storedProject.PROJCTSEQ;
+            checkedInProject.value = storedProject;
+        }
+
+        // 오늘 기준 데이터 호출
+        const { year, month, day } = $common.getToday();
+        const param = new URLSearchParams();
+        param.append('year', year);
+        param.append('month', month);
+        param.append('day', day);
+
+        // 이벤트 카테고리 호출
+        await fetchCategoryList();
+        await fetchEventList(param);
+        useFilterEventList(month, day);
+
+        // 스크롤 감지 이벤트 리스너
+        window.addEventListener('wheel', handleWheelEvent);
+        window.addEventListener('click', colorToday);
+
+        datePickerStore.initDatePicker(fullCalendarRef, async (year, month, options) => {
+            // 데이터 다시 불러오기
+            await fetchData();
+        });
+    });
+</script>
+<style scoped>
+    ::v-deep(.fc-h-event) {
+        background-color: transparent;
+    }
+
+    ::v-deep(.event-modal) {
+        padding: 8px;
+        border: 1px solid #ddd;
+    }
+
+    ::v-deep(.event-icon-select:hover) {
+        transform: scale(1.1);
+        transition: transform 0.2s;
+    }
+
+    /* 이벤트 모달 노출 시 텍스트 선택 방지 */
+    ::v-deep(.fc-daygrid-day) {
+        user-select: none;
+    }
+
+    ::v-deep(.fc-daygrid-day-events) {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        /* align-content: flex-start;
+        align-items: center;
+        text-align: center !important; */
+    }
+
+    /* 공휴일만 가로로 넗게 나오게 */
+    ::v-deep(.fc-daygrid-event-harness:has(.holiday-event)) {
+        width: 100% !important;
+    }
+</style>

src/components/main/MainEventList.vue

@@ -0,0 +1,137 @@
+<template>
+    <div class="">
+        <template v-for="category in categoryList" :key="category.CMNCODVAL">
+            <div
+                v-if="
+                    (category.CMNCODVAL === 300201 && birthdayList?.length) ||
+                    (category.CMNCODVAL === 300202 && vacationList?.length) ||
+                    (category.CMNCODVAL === 300203 && birthdayPartyList?.length) ||
+                    (category.CMNCODVAL === 300204 && dinnerList?.length) ||
+                    (category.CMNCODVAL === 300205 && teaTimeList?.length) ||
+                    (category.CMNCODVAL === 300206 && workShopList?.length)
+                "
+                @click="category.CMNCODVAL == 300202 ? $emit('handleClickVacation') : ''"
+                :class="category.CMNCODVAL == 300202 ? 'pointer' : ''"
+                class="border border-2 mt-3 card p-2"
+            >
+                <div class="row g-2 position-relative">
+                    <div class="col-3 mx-0 px-0">
+                        <div class="ratio ratio-1x1">
+                            <img
+                                :src="`${baseUrl}img/main-category-img/main-${category.CMNCODVAL}.png`"
+                                :alt="`${category.CMNCODNAM}`"
+                                @error="$event.target.src = '/img/icons/icon.png'"
+                            />
+                        </div>
+                    </div>
+                    <div class="col-9 mx-0 px-0 d-flex align-items-center">
+                        <template v-if="category.CMNCODVAL === 300201">
+                            <MainMemberProfile :members="birthdayList" :baseUrl="baseUrl" />
+                        </template>
+                        <template v-if="category.CMNCODVAL === 300202">
+                            <MainMemberProfile :members="vacationList" :baseUrl="baseUrl" />
+                        </template>
+                        <template v-if="category.CMNCODVAL === 300203">
+                            <MainEventBoard :place="birthdayPartyList[0].LOCEVTPLC" :time="birthdayPartyList[0].LOCEVTTME" />
+                        </template>
+                        <template v-if="category.CMNCODVAL === 300204">
+                            <MainEventBoard :place="dinnerList[0].LOCEVTPLC" :time="dinnerList[0].LOCEVTTME" />
+                        </template>
+                        <template v-if="category.CMNCODVAL === 300205">
+                            <MainEventBoard :place="teaTimeList[0].LOCEVTPLC" :time="teaTimeList[0].LOCEVTTME" />
+                        </template>
+                        <template v-if="category.CMNCODVAL === 300206">
+                            <MainEventBoard :place="workShopList[0].LOCEVTPLC" :time="workShopList[0].LOCEVTTME" />
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </div>
+</template>
+
+<script setup>
+    import { defineEmits } from 'vue';
+    import MainMemberProfile from '@c/main/MainMemberProfile.vue';
+    import MainEventBoard from '@c/main/MainEventBoard.vue';
+
+    const props = defineProps({
+        project: {
+            type: Object,
+            required: false,
+        },
+        categoryList: {
+            type: Array,
+        },
+        commuters: {
+            type: Array,
+            required: false,
+        },
+        baseUrl: {
+            type: String,
+            required: false,
+        },
+        user: {
+            type: Object,
+            required: false,
+        },
+        selectedProject: {
+            type: Number,
+            default: null,
+        },
+        checkedInProject: {
+            type: Object,
+            default: null,
+        },
+        birthdayList: {
+            type: Array,
+        },
+        vacationList: {
+            type: Array,
+        },
+        birthdayPartyList: {
+            type: Array,
+        },
+        dinnerList: {
+            type: Array,
+        },
+        teaTimeList: {
+            type: Array,
+        },
+        workShopList: {
+            type: Array,
+        },
+    });
+
+    defineEmits(['handleClickVacation']);
+</script>
+
+<style scoped>
+    .event-board {
+        width: 100%;
+        padding: 0.5rem;
+    }
+
+    .event-info {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    .info-item {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    .label {
+        font-weight: 500;
+        color: #666;
+        min-width: 3rem;
+    }
+
+    .content {
+        color: #333;
+        word-break: break-all;
+    }
+</style>

src/components/main/MainMemberProfile.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="ms-2" style="flex: 1">
+        <ul class="row gx-1 mb-0 list-inline">
+            <li class="col-4 me-0" v-for="(member, index) in members" :key="index">
+                <div class="ratio ratio-1x1 mb-0">
+                    <img
+                        :src="`${profileImgUrl}profile/${member.MEMBERPRF}`"
+                        :style="`border-color: ${member.usercolor} !important;`"
+                        alt="User Profile"
+                        class="rounded-circle border border-2 profile-img"
+                        @error="$event.target.src = '/img/icons/icon.png'"
+                    />
+                </div>
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script setup>
+    const props = defineProps({
+        members: {
+            type: Array,
+            required: true,
+        },
+        baseUrl: {
+            type: String,
+            required: true,
+        },
+    });
+
+    const profileImgUrl = import.meta.env.VITE_SERVER_IMG_URL;
+</script>

src/components/main/MainVote.vue

@@ -0,0 +1,244 @@
+<template>
+<div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-6">
+    <div class="card h-100">
+        <!-- 더보기 버튼-->
+        <div class="d-flex">
+            <router-link
+            to="/voteboard"
+            class="btn btn-primary mr-1 pe-1 ps-1 ms-auto my-auto h-50"
+            >
+            more
+            </router-link>
+        </div>
+        <div class="card-header d-flex justify-content-between">
+            <div class="card-title mb-0">
+                <h5 class="mb-1 me-2">투표진행</h5>
+            </div>
+        </div>
+        <div class="card-body" v-if="voteListData.length > 0">
+            <ul class="p-0 m-0">
+                <li class="d-flex  mb-1" v-for="item in voteListData" :key="item.LOCVOTSEQ">
+                    <div class="d-flex w-100 flex-wrap align-items-center justify-content-between gap-2">
+                        <div class="me-2 mb-3">
+                            <div class="text-muted small">{{ item.localVote.formatted_LOCVOTRDT }}</div>
+                            <div class="d-flex flex-wrap align-items-center">
+                                <div class="avatar flex-shrink-0 me-1">
+                                    <img
+                                        style="cursor: auto;"
+                                        class="rounded-circle user-avatar object-fit-cover"
+                                        :src="getProfileImage(item.localVote.MEMBERPRF)"
+                                        alt="최초 작성자"
+                                        :style="{ borderColor: item.localVote.usercolor }"
+                                        @error="setDefaultImage"
+                                    />
+                                </div>
+                                <div class="timeline-event ps-1"  style="cursor: pointer;" @click.stop="openModal(item.localVote.LOCVOTSEQ)" >
+                                    <div class="timeline-header ">
+                                        <small ><strong>{{ truncateTitle(item.localVote.LOCVOTTTL) }}</strong></small>
+                                    </div>
+                                    <small class="d-flex align-items-center lh-1 me-4 mb-4 mb-sm-0"
+                                    :style="{ color: getDaysAgo(item.localVote.formatted_LOCVOTEDT) == '금일 종료' ? 'red' : '' }">
+                                    ⏰{{getDaysAgo(item.localVote.formatted_LOCVOTEDT)}}({{item.localVote.total_voted}}/{{ item.localVote.total_votable }})
+                                    </small>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                </li>
+            </ul>
+        </div>
+        <div class="card-body" v-else>
+            진행중인 투표가 없습니다.
+        </div>
+    </div>
+</div>
+<!--투표 모달 -->
+<CenterModal :display="isModalOpen" @close="closeModal">
+    <template #title> 투표 하기 </template>
+    <template #body>
+        <div>
+            <vote-list
+            :key="voteListKey"
+            :data="selectVoteDate"
+            @checkedNames="checkedNames"
+            @addContents="addContents"
+            @endVoteId="endVoteId"
+            @voteDelete="voteDelete"
+            />
+        </div>
+    </template>
+    <template #footer>
+        <BackButton @click="closeModal" />
+    </template>
+</CenterModal>
+</template>
+
+<script setup>
+import router from '@/router';
+import $api from '@api';
+import { onMounted, ref } from 'vue';
+import CenterModal from '@c/modal/CenterModal.vue';
+import BackButton from '@c/button/BackBtn.vue';
+import voteList from '@c/voteboard/voteCardList.vue';
+import { useToastStore } from '@s/toastStore';
+
+const toastStore = useToastStore();
+const currentPage = ref(1);
+const voteset = ref(0);
+const voteListData= ref([]);
+const voteListKey = ref(0); //초기화
+// 로그 모달 상태
+const isModalOpen = ref(false);
+const selectVoteDate = ref([]);
+// 로그 모달 열기
+const openModal = async (id) => {
+    isModalOpen.value = true;
+    if(id){
+        const selectData = voteListData.value.filter((item) => item.localVote.LOCVOTSEQ === id);
+        selectVoteDate.value = selectData;
+    }
+};
+// 로그 모달 닫기
+const closeModal = () => {
+    isModalOpen.value = false;
+    voteListKey.value++;
+};
+// 프로필 이미지
+const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
+const defaultProfile = "/img/icons/icon.png";
+const getProfileImage = (profilePath) => {
+    return profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
+};
+const setDefaultImage = (event) => {
+    event.target.src = defaultProfile;
+};
+
+onMounted(() => {
+    getvoteList();
+});
+
+//투표목록
+const getvoteList = () => {
+    $api.get('vote/getVoteList',{
+        params:
+        {
+            page: 1
+            ,voteset:'2' //투표중
+            ,myVote:'2' //내가 안한 투표
+        }
+    }).then(res => {
+        voteListData.value = res.data.data.list;
+        voteListData.value = res.data.data.list.slice(0, 6);
+    })
+};
+
+//투표하기
+const checkedNames = (numList) => {
+    $api.post('vote/insertCheckedNums',{
+        checkedList :numList
+        ,votenum : numList[0].LOCVOTSEQ
+    }).then((res)=>{
+        if(res.data.status === 'OK'){
+            toastStore.onToast('투표가 완료되었습니다.', 's');
+            isModalOpen.value = false;
+            getvoteList();
+            voteListKey.value++;
+        }
+    })
+}
+//투표항목추가
+const addContents = (itemList, voteId) => {
+    $api.post('vote/insertWord',{
+        itemList :itemList
+        ,voteId :voteId
+    }).then((res)=>{
+        if(res.data.status === 'OK'){
+            toastStore.onToast('항목이 등록되었습니다.', 's');
+            getvoteList();
+            const updatedVote = selectVoteDate.value.find(vote => vote.localVote.LOCVOTSEQ === voteId);
+            if (updatedVote) {
+                if (!updatedVote.voteDetails) {
+                    updatedVote.voteDetails = [];
+                }
+                const maxSeq = updatedVote.voteDetails.reduce((max, item) => {
+                    return item.VOTDETSEQ > max ? item.VOTDETSEQ : max;
+                }, 0);
+                // 새 항목을 voteDetails에 추가
+                itemList.forEach(item => {
+                    updatedVote.voteDetails.push({
+                        VOTDETSEQ: maxSeq + 1,
+                        LOCVOTSEQ: voteId,
+                        LOCVOTCON: item.content,
+                        LOCVOTLIK: item.url,
+                        VOTE_COUNT: 0,
+                        yesvote: 0
+                    });
+                });
+            }
+        }
+    })
+}
+//투표종료
+const endVoteId = (endVoteId) => {
+    if(confirm('투표를 종료하시겠습니까?')){
+        $api.patch('vote/updateEndData',{
+            endVoteId :endVoteId
+            }).then((res)=>{
+                if(res.data.status === 'OK'){
+                    getvoteList();
+                    isModalOpen.value = false;
+                }
+            })
+    }
+}
+//투표 삭제
+const voteDelete =(id) =>{
+    if(confirm('투표를 삭제하시겠습니까?')){
+        $api.patch('vote/updateDeleteData',{
+            deleteVoteId :id
+            }).then((res)=>{
+                if(res.data.status === 'OK'){
+                    toastStore.onToast('투표가 삭제되었습니다.', 's');
+                    getvoteList();
+                    isModalOpen.value = false;
+                }
+            })
+    }
+}
+// 제목이 14글자 넘어가면 ... 처리하는 함수
+const truncateTitle = title => {
+    return title.length > 10 ? title.slice(0, 10) + '...' : title;
+};
+
+//투표이동
+const goVoteList = () =>{
+    router.push({
+        path: '/voteboard',
+        query: {
+            voteset: '2' //투표중
+            ,myVote:'2' //내가 안한 투표
+            ,id:id
+        }
+    });
+}
+//종료 ㅇㅇ 일 전
+const getDaysAgo = (dateString) => {
+    const inputDate = new Date(dateString); // 문자열을 Date 객체로 변환
+    const today = new Date(); // 현재 날짜 가져오기
+    const input = new Date(inputDate.getFullYear(), inputDate.getMonth(), inputDate.getDate());
+    const now = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+    const timeDiff = now - input;
+    const dayDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
+    // 오늘 날짜인 경우
+    if (dayDiff === 0) return "금일 종료";
+
+    return `종료 ${Math.abs(dayDiff)}일 전`;
+};
+</script>
+
+<style scoped>
+.user-avatar {
+    border: 3px solid;
+}
+</style>

src/components/main/MainWordDict.vue

@@ -0,0 +1,139 @@
+<template>
+<div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-6">
+    <div class="card h-100">
+        <!-- 더보기 버튼 -->
+        <div class="d-flex ">
+            <router-link
+            to="/wordDict"
+            class="btn btn-primary mr-1 pe-1 ps-1 ms-auto my-auto h-50"
+            >
+            more
+            </router-link>
+        </div>
+        <div class="card-header d-flex justify-content-between">
+            <div class="card-title mb-0">
+                <h5 class="mb-1 me-2">용어집</h5>
+            </div>
+        </div>
+        <div class="card-body" v-if="wordList.length > 0">
+            <ul class="p-0 m-0" v-for="item in wordList" :key="item.WRDDICSEQ">
+                <li class="d-flex align-items-center mb-1">
+                    <!-- 프로필 이미지 -->
+                    <div class="avatar flex-shrink-0 me-2 d-flex align-items-center">
+                        <img
+                            class="rounded-circle user-avatar object-fit-cover"
+                            :src="getProfileImage(item.lastEditor.profileImage)"
+                            alt="최종 작성자"
+                            :style="{ borderColor: item.lastEditor.color }"
+                            @error="setDefaultImage"
+                        />
+                    </div>
+
+                    <!-- 텍스트 영역 -->
+                    <div class="timeline-event ps-1 flex-grow-1" style="cursor: pointer;" @click="goWordList(item.WRDDICCAT,item.WRDDICTTL)">
+                        <div class="timeline-header">
+                            <small class="text-primary text-uppercase">{{ item.category }}</small>
+                        </div>
+                        <h6 class="my-50 d-flex align-items-center">
+                            {{ truncateTitle(item.WRDDICTTL) }}
+                        </h6>
+                        <div class="text-muted small">{{$common.dateFormatter(item.lastEditor.updatedAt)}}</div>
+                    </div>
+                </li>
+
+            </ul>
+        </div>
+        <div class="card-body" v-else >
+            등록된 용어가 없습니다.
+        </div>
+
+    </div>
+</div>
+</template>
+
+<script setup>
+import axios from '@api';
+import { getCurrentInstance, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import commonApi from '@/common/commonApi';
+
+const { appContext } = getCurrentInstance();
+const $common = appContext.config.globalProperties.$common;
+const router = useRouter();
+
+onMounted(() => {
+    getwordList();
+});
+
+// 프로필 이미지
+const baseUrl = axios.defaults.baseURL.replace(/api\/$/, '');
+const defaultProfile = "/img/icons/icon.png";
+const getProfileImage = (profilePath) => {
+    return profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
+};
+const setDefaultImage = (event) => {
+    event.target.src = defaultProfile;
+};
+const wordList = ref([]);
+//용어 목록
+const getwordList = (searchKeyword='', indexKeyword='', category='') => {
+    axios.get('worddict/getWordList',{
+            params: {
+                searchKeyword : searchKeyword,
+                indexKeyword :indexKeyword,
+                category : category,
+                pageNum:6
+            }
+        })
+        .then(res => {
+            wordList.value = res.data.data.data;
+        });
+};
+//초성 /알파벳 변환
+const getFirstCharacter = (char) => {
+    const CHOSUNG_LIST = [
+        'ㄱ', 'ㄲ', 'ㄴ', 'ㄷ', 'ㄸ', 'ㄹ', 'ㅁ', 'ㅂ', 'ㅃ', 'ㅅ',
+        'ㅆ', 'ㅇ', 'ㅈ', 'ㅉ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ'
+    ];
+
+    if (!char || char.length === 0) return '';
+
+    const code = char.charCodeAt(0);
+
+    // 한글 범위 (가~힣) → 초성 변환
+    if (code >= 0xAC00 && code <= 0xD7A3) {
+        const index = Math.floor((code - 0xAC00) / (21 * 28));
+        return CHOSUNG_LIST[index];
+    }
+
+    // 영어 소문자 → 대문자로 변환
+    if (char.match(/[a-zA-Z]/)) {
+        return char.toLowerCase();
+    }
+
+    // 기타 문자 (숫자, 특수문자) 그대로 반환
+    return char;
+};
+//용어집 이동
+const goWordList = (category, indexKeyword) => {
+    const firstChar = getFirstCharacter(indexKeyword[0]); // 첫 글자 변환
+    router.push({
+        path: '/wordDict',
+        query: {
+            indexKeyword: firstChar,
+            category: category,
+        }
+    });
+};
+// 제목이 14글자 넘어가면 ... 처리하는 함수
+const truncateTitle = title => {
+return title.length > 25 ? title.slice(0, 25) + '...' : title;
+};
+
+</script>
+
+<style scoped>
+.user-avatar {
+    border: 3px solid;
+}
+</style>

src/components/main/MemberManagement.vue

@@ -0,0 +1,120 @@
+<template>
+    <div class="row g-4 mt-2" v-if="memberList?.length">
+        <div>
+            <div class="card">
+                <div class="card-body p-3 row">
+                    <div class="d-flex justify-content-between mb-2">
+                        <h5 class="card-title fw-bold">사원 등록 관리</h5>
+                    </div>
+                    <div class="g-4 col-12 col-lg-6" v-for="member in memberList" :key="member.MEMBERSEQ">
+                        <div class="card">
+                            <div class="row card-body">
+                                <div class="col-3 d-flex align-items-center">
+                                    <img
+                                        :src="`${imgURL}profile/${member.MEMBERPRF}`"
+                                        alt="Profile Image"
+                                        class="img-thumbnail mx-auto d-block"
+                                        style="max-height: 140px"
+                                        @error="$event.target.src = '/img/icons/icon.png'"
+                                    />
+                                </div>
+                                <div class="col-7">
+                                    <div class="d-flex flex-sm-row align-items-center pb-2">
+                                        <div class="font-bold">{{ member.MEMBERNAM }}</div>
+                                        <div class="ms-2">
+                                            ({{ member.MBTI }})
+                                            <img
+                                                role="img"
+                                                class="w-px-30 h-px-40"
+                                                :src="`/img/mbti/${member.MBTI.toLowerCase()}.png`"
+                                                alt="MBTI image"
+                                            />
+                                        </div>
+                                    </div>
+                                    <div class="d-flex flex-sm-row align-items-center pb-2">
+                                        <i class="bx bx-id-card"></i>
+                                        <div class="ms-2">{{ member.MEMBERIDS }}</div>
+                                    </div>
+                                    <div class="d-flex flex-sm-row align-items-center pb-2">
+                                        <i class="bx bxs-phone"></i>
+                                        <div class="ms-2">{{ $common.addHyphenToPhoneNumber(member.MEMBERTEL) }}</div>
+                                    </div>
+                                    <div class="d-flex flex-sm-row align-items-center pb-2">
+                                        <i class="bx bx-calendar"></i>
+                                        <div class="ms-2">{{ $common.dateFormatter(member.MEMBERCDT) }}</div>
+                                    </div>
+                                </div>
+                                <div class="col-2 d-flex align-items-center">
+                                    <div>
+                                        <div>
+                                            <label class="switch"
+                                                ><input
+                                                    type="checkbox"
+                                                    :checked="member.checked"
+                                                    @click="handleRegisterMember($event, member)" />
+                                                <span class="slider round"></span
+                                            ></label>
+                                        </div>
+                                        <button
+                                            class="btn-close btn-close-sm"
+                                            style="position: absolute; top: 10px; right: 10px"
+                                            @click="handleRejectMember(member)"
+                                        ></button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { onMounted, ref } from 'vue';
+    import { useToastStore } from '@s/toastStore';
+    import $api from '@api';
+
+    const memberList = ref([]);
+    const toast = useToastStore();
+    const imgURL = import.meta.env.VITE_SERVER_IMG_URL;
+
+    // 조회 api
+    const fetchRegisterMemberList = async () => {
+        const { data } = await $api.get('main/registerMemberList');
+        if (data?.data) {
+            memberList.value = data.data.map(member => ({
+                ...member,
+                checked: false, // 각 항목에 checked 값 설정
+            }));
+        }
+    };
+
+    // 사원 등록 api
+    const handleRegisterMember = async (e, member) => {
+        e.preventDefault();
+
+        const { data } = await $api.post('main/registerMember', { memberSeq: member.MEMBERSEQ });
+        if (data?.data) {
+            member.checked = true;
+            toast.onToast(data.data, 's');
+            fetchRegisterMemberList();
+        }
+    };
+
+    // 사원 등록 미승인 api
+    const handleRejectMember = async member => {
+        if (!confirm('해당 사원 등록을 거절하시겠습니까?')) return;
+
+        const { data } = await $api.post('main/rejectMember', { memberSeq: member.MEMBERSEQ });
+        if (data?.data) {
+            toast.onToast(data.data, 's');
+            fetchRegisterMemberList();
+        }
+    };
+
+    onMounted(async () => {
+        await fetchRegisterMemberList();
+    });
+</script>

src/components/map/MapPopover.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="position-relative">
+        <div @click="togglePopover">
+            <slot name="trigger">
+            <i class="bx bxs-map"></i>
+            </slot>
+        </div>
+
+        <div
+            v-if="isVisible"
+            class="position-absolute map z-3"
+        >
+            <button
+            type="button"
+            class="btn-close popover-close"
+            @click="togglePopover"
+            ></button>
+
+            <div class="card">
+            <div class="card-body p-1">
+                <KakaoMap
+                v-if="coordinates"
+                :lat="coordinates.lat"
+                :lng="coordinates.lng"
+                class="w-px-250 h-px-200"
+                @onLoadKakaoMap="onLoadKakaoMap"
+                >
+                <KakaoMapMarker
+                    :lat="coordinates.lat"
+                    :lng="coordinates.lng"
+                />
+                </KakaoMap>
+
+                <div class="position-absolute top-50 translate-middle-y end-0 me-3 z-1 d-flex flex-column gap-1">
+                <button class="btn-secondary border-none" @click="zoomOut">+</button>
+                <button class="btn-secondary border-none" @click="zoomIn">-</button>
+                </div>
+            </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { ref, onMounted } from 'vue';
+    import { KakaoMap, KakaoMapMarker } from 'vue3-kakao-maps';
+
+    const props = defineProps({
+        address: {
+            type: String,
+            required: true
+        },
+        isVisible: {
+            type: Boolean,
+            required: false
+        }
+    });
+
+    const emit = defineEmits(['update-visible']);
+
+    const coordinates = ref(null);
+    const map = ref(null);
+
+    // 주소를 좌표로 변환하는 함수
+    const convertAddressToCoordinates = () => {
+        return new Promise((resolve, reject) => {
+        if (!window.kakao || !window.kakao.maps) {
+            reject(new Error('Kakao Maps not loaded'));
+            return;
+        }
+
+        const geocoder = new window.kakao.maps.services.Geocoder();
+        geocoder.addressSearch(props.address, (result, status) => {
+            if (status === window.kakao.maps.services.Status.OK) {
+            resolve({
+                lat: parseFloat(result[0].y),
+                lng: parseFloat(result[0].x)
+            });
+            } else {
+            reject(new Error('Address conversion failed'));
+            }
+        });
+        });
+    };
+
+    const togglePopover = () => {
+        emit('update-visible', !props.isVisible);
+    };
+
+    const onLoadKakaoMap = (mapRef) => {
+        map.value = mapRef;
+    };
+
+    // 지도 확대
+    const zoomIn = () => {
+        if (map.value) {
+        const level = map.value.getLevel();
+        map.value.setLevel(level + 1);
+        }
+    };
+
+    // 지도 축소
+    const zoomOut = () => {
+        if (map.value) {
+        const level = map.value.getLevel();
+        map.value.setLevel(level - 1);
+        }
+    };
+
+    // 컴포넌트 마운트 시 좌표 변환
+    onMounted(async () => {
+        coordinates.value = await convertAddressToCoordinates();
+    });
+</script>

src/components/modal/ToastModal.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="toastStore.toastModal"
-    :class="['bs-toast toast m-2 fade show', toastClass]" 
+    :class="['bs-toast toast toast-placement-ex m-2 fade show', toastClass]"
     role="alert"
     aria-live="assertive"
     aria-atomic="true"
@@ -35,24 +35,3 @@ const toastClass = computed(() => {
   return toastStore.toastType === 'e' ? 'bg-danger' : 'bg-success'; // 에러일 경우 red, 정상일 경우 blue
 });
 </script>
-
-<style scoped>
-.bs-toast {
-  position: fixed;
-  bottom: 20px; /* 화면 하단에 위치 */
-  right: 20px; /* 오른쪽에 위치 */
-  z-index: 2000; /* 충분히 높은 값으로 설정 */
-  max-width: 300px; /* 최대 너비 제한 */
-  opacity: 1;
-  transition: opacity 0.5s ease-in-out;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 그림자 추가 */
-}
-
-.bg-primary {
-  background-color: #007bff !important; /* 성공 색상 */
-}
-
-.bg-danger {
-  background-color: #ff3e1d !important; /* 에러 색상 */
-}
-</style>

src/components/modal/VacationGrantModal.vue

@@ -6,14 +6,14 @@
                 <button class="close-btn" @click="closeModal">✖</button>
             </div>
             <div class="vac-modal-body">
-                <p class="vac-modal-text">선물할 연차 개수를 선택하세요.</p>
+                <p class="vac-modal-text">선물할 연차 개수를 선택해 주세요.</p>
                 <div class="count-container">
                     <button @click="decreaseCount" :disabled="grantCount < 2" class="count-btn">-</button>
                     <span class="count-value">{{ grantCount }}</span>
                     <button @click="increaseCount" :disabled="grantCount >= availableQuota" class="count-btn">+</button>
                 </div>
                 <div class="custom-button-container">
-                    <button class="custom-button" @click="saveVacationGrant" :disabled="grantCount === 0">
+                    <button class="custom-button" @click="saveVacationGrant" :disabled="grantCount === 0 || isGiftButtonDisabled">
                         <i class="bx bx-gift"></i>
                     </button>
                 </div>
@@ -23,14 +23,16 @@
 </template>
 
 <script setup>
-import { ref, defineProps, defineEmits, watch, onMounted } from "vue";
+import { ref, defineProps, defineEmits, watch, onMounted, computed } from "vue";
 import axios from "@api";
 import { useToastStore } from '@s/toastStore';
-
+import { useUserInfoStore } from "@s/useUserInfoStore";
+const userStore = useUserInfoStore();
 const toastStore = useToastStore();
 const props = defineProps({
     isOpen: Boolean,
     targetUser: Object,
+    remainingVacationData: Object,
 });
 
 const emit = defineEmits(["close", "updateVacation"]);
@@ -39,6 +41,13 @@ const maxQuota = 2;
 const sentCount = ref(0);
 const availableQuota = ref(2);
 
+const myUserId = computed(() => userStore.user.id);
+const myRemainingQuota = computed(() => {
+    return props.remainingVacationData?.[myUserId.value] ?? 0;
+});
+const isGiftButtonDisabled = computed(() => {
+    return myRemainingQuota.value < 0;
+});
 // 사원 별 남은 보내기 개수
 const fetchSentVacationCount = async () => {
     try {
@@ -48,7 +57,6 @@ const fetchSentVacationCount = async () => {
         availableQuota.value = Math.max(maxQuota - sentCount.value, 0);
         grantCount.value = availableQuota.value;
     } catch (error) {
-        console.error("🚨 연차 전송 기록 조회 실패:", error);
         availableQuota.value = maxQuota;
         grantCount.value = maxQuota;
     }

src/components/modal/VacationModal.vue

@@ -1,7 +1,7 @@
 <template>
     <div v-if="isOpen" class="vac-modal-dialog" @click.self="closeModal">
         <div class="vac-modal-content p-5 modal-scroll">
-            <h5 class="vac-modal-title">📅 내 연차 사용 내역</h5>
+            <h5 class="vac-modal-title">📅 내 연차 (누적 개수)</h5>
             <button class="close-btn" @click="closeModal">✖</button>
             <!-- 연차 목록 -->
             <div class="vac-modal-body" v-if="mergedVacations.length > 0">
@@ -11,9 +11,6 @@
                     :key="vac._expandIndex"
                     class="vacation-item"
                 >
-                    <span v-if="vac.category === 'used'" class="fw-bold text-dark me-2">
-                        {{ usedVacationIndexMap[vac._expandIndex] }})
-                    </span>
                     <span :class="vac.category === 'used' ? 'fw-bold text-danger me-2' : 'fw-bold text-primary me-2'">
                         {{ vac.category === 'used' ? '-' : '+' }}
                     </span>
@@ -22,12 +19,15 @@
                     >
                         {{ formatDate(vac.date) }}
                     </span>
+                    <span v-if="vac.category === 'used'" class="fw-bold text-dark ms-1">
+                        ( {{ usedVacationIndexMap[vac._expandIndex] }} )
+                    </span>
                 </li>
                 </ol>
             </div>
             <!-- 연차 데이터 없음 -->
-            <p v-else class="text-sm-center mt-10 text-gray">
-                🚫 사용한 연차가 없습니다.
+            <p v-else class="text-sm-center mt-10 text-gray vac-modal-title">
+                🚫 연차 내역이 없습니다.
             </p>
         </div>
     </div>
@@ -57,30 +57,34 @@ const emit = defineEmits(["close"]);
 
 // 사용한 휴가(선물,연차사용)
 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,
-                _expandIndex: globalCounter++,
-            });
-        }
+    const data = props.myVacations.flatMap((v) => {
+
+        const count = v.used_quota
+        return Array.from({ length: Math.ceil(count) }, (_, i) => ({
+            ...v,
+            category: "used",
+            code: v.LOCVACTYP,
+            used_quota: count, // 반차 강제 포함
+            _expandIndex: globalCounter++,
+        }));
     });
-    return result;
+    return data;
 });
 
 // 받은 휴가
-const receivedVacations = computed(() =>
-    props.receivedVacations.map((v) => ({
-        ...v,
-        category: "received",
-    }))
-);
-
+const receivedVacations = computed(() => {
+    const data = props.receivedVacations.flatMap((v) => {
+        const count = v.received_quota ?? 1;
+        return Array.from({ length: Math.ceil(count) }, (_, i) => ({
+            ...v,
+            category: "received",
+            _expandIndex: globalCounter++,
+        }));
+    });
+    return data;
+});
 // 필터링
 const sortedUsedVacationsAsc = computed(() => {
     return [...usedVacations.value].sort((a, b) => {
@@ -114,7 +118,7 @@ const mergedVacations = computed(() => {
 
 // 모달 닫기
 const closeModal = () => {
-  emit("close");
+    emit("close");
 };
 </script>
 <style scoped>

src/components/projectlist/ProjectList.vue

@@ -14,7 +14,7 @@
         <div v-for="post in projectStore.projectList" :key="post.PROJCTSEQ">
             <ProjectCard
                 :title="post.PROJCTNAM"
-                :description="post.PROJCTDES"
+                :description="post.PROJCTDES ?? ''"
                 :strdate="post.PROJCTSTR"
                 :enddate="post.PROJCTEND"
                 :address="post.PROJCTARR"
@@ -24,7 +24,9 @@
                 :projctCol="post.PROJCTCOL"
                 :projctColor="post.projctcolor"
                 :projctCreatorId="post.PROJCTCMB"
-                @update="getProjectList"
+                :resetUserSelection="resetUserSelection"
+                :searchParams="{ text: searchText, year: selectedYear }"
+                @update="handleProjectUpdate"
             />
         </div>
     </div>
@@ -35,7 +37,7 @@
             <template #title> 프로젝트 등록 </template>
             <template #body>
                 <FormInput
-                    title="이름"
+                    title="프로젝트명"
                     name="name"
                     :is-essential="true"
                     :is-alert="nameAlert"
@@ -51,27 +53,48 @@
                     :is-label="true"
                     :is-common="true"
                     :is-color="true"
+                    :value="color"
                     :data="colorList"
                     @update:data="color = $event"
+                    :is-alert="colorAlert"
                 />
 
-                <FormInput
-                    title="시작 일"
-                    name="startDay"
-                    :type="'date'"
-                    :is-essential="true"
-                    :modelValue="startDay"
-                    v-model="startDay"
-                />
-
-                <FormInput
-                    title="종료 일"
-                    :type="'date'"
-                    name="endDay"
-                    :modelValue="endDay"
-                    @update:modelValue="endDay = $event"
-                />
+                <div class="mb-2 row">
+                    <label class="col-md-2 col-form-label">
+                        참여자
+                    </label>
+                    <div class="col-md-10">
+                        <UserList
+                            ref="userListRef"
+                            @user-list-update="handleUserListUpdate"
+                            class="m-0"
+                        />
+                    </div>
+                </div>
 
+                <div @click="openStartDatePicker">
+                    <FormInput
+                        title="시작 일"
+                        name="startDay"
+                        :type="'date'"
+                        :is-alert="startDayAlert"
+                        :is-essential="true"
+                        :modelValue="startDay"
+                        v-model="startDay"
+                        ref="startDateInput"
+                    />
+                </div>
+                <div @click="openEndDatePicker">
+                    <FormInput
+                        title="종료 일"
+                        name="endDay"
+                        :type="'date'"
+                        :modelValue="endDay"
+                        :min="startDay"
+                        @update:modelValue="endDay = $event"
+                        ref="endDateInput"
+                    />
+                </div>
                 <FormInput
                     title="설명"
                     name="description"
@@ -99,7 +122,7 @@
 </template>
 
 <script setup>
-    import { computed, ref, watch, onMounted, inject } from 'vue';
+    import { computed, ref, watch, onMounted, inject, nextTick } from 'vue';
     import SearchBar from '@c/search/SearchBar.vue';
     import ProjectCard from '@c/list/ProjectCard.vue';
     import CategoryBtn from '@/components/category/CategoryBtn.vue';
@@ -108,7 +131,8 @@
     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 UserList from '@c/user/UserList.vue';
+    import commonApi, { refreshColorList } from '@/common/commonApi';
     import { useToastStore } from '@s/toastStore';
     import { useUserInfoStore } from '@/stores/useUserInfoStore';
     import { useProjectStore } from '@/stores/useProjectStore';
@@ -125,6 +149,9 @@
     const selectedCategory = ref(null);
     const searchText = ref('');
 
+    const userListRef = ref(null);
+    const resetUserSelection = ref(false);
+
     // dayjs 인스턴스 가져오기
     const dayjs = inject('dayjs');
 
@@ -134,13 +161,37 @@
     // 등록 모달 상태
     const isCreateModalOpen = ref(false);
     const name = ref('');
-    const color = ref('');
+    const color = ref('0');
 
     const startDay = ref(today);
     const endDay = ref('');
     const description = ref('');
     const nameAlert = ref(false);
+    const colorAlert = ref(false);
     const addressAlert = ref(false);
+    const startDayAlert = ref(false);
+
+
+    const startDateInput = ref(null);
+    const endDateInput = ref(null);
+
+    // DOM 요소에 직접 접근하기 위한 변수들
+    let startInputElement = null;
+    let endInputElement = null;
+
+
+    const openStartDatePicker = () => {
+        if (startInputElement) {
+            startInputElement.showPicker();
+        }
+    };
+
+    const openEndDatePicker = () => {
+        if (endInputElement) {
+            endInputElement.showPicker();
+        }
+    };
+
 
     const addressData = ref({
         postcode: '',
@@ -148,6 +199,17 @@
         detailAddress: ''
     });
 
+    // 선택된 사용자 목록 관리
+    const selectedUsers = ref({
+        activeUsers: [],
+        disabledUsers: []
+    });
+
+    // UserList 컴포넌트에서 사용자 선택 업데이트 처리
+    const handleUserListUpdate = (userLists) => {
+        selectedUsers.value = userLists;
+    };
+
     // API 호출
     const { yearCategory, colorList } = commonApi({
         loadColor: true,
@@ -171,7 +233,7 @@
 
     // 프로젝트 목록 조회
     const getProjectList = async () => {
-        await projectStore.getProjectList(searchText.value, selectedYear.value);
+        await projectStore.getProjectList(searchText.value, selectedYear.value, 'false');
     };
 
     // 카테고리 변경 감지
@@ -180,17 +242,27 @@
     });
 
     // 등록 모달 관리
-    const openCreateModal = () => {
+    const openCreateModal = async () => {
+        const updatedColors = await refreshColorList('YNP');
+
+        if (updatedColors && updatedColors.length > 0) {
+            color.value = updatedColors[0].value;
+        }
+
         isCreateModalOpen.value = true;
     };
 
     const closeCreateModal = () => {
         isCreateModalOpen.value = false;
+        resetUserSelection.value = !resetUserSelection.value;
     };
 
     const formReset = () => {
+
         name.value = '';
-        color.value = '';
+        if (colorList.value && colorList.value.length > 0) {
+            color.value = colorList.value[0].value;
+        }
         addressData.value = {
             postcode: '',
             address: '',
@@ -201,37 +273,67 @@
         description.value = '';
         nameAlert.value = false;
         addressAlert.value = false;
-    }
+        startDayAlert.value = false;
+
+        selectedUsers.value = {
+            activeUsers: [],
+            disabledUsers: []
+        };
+
+        if (userListRef.value) {
+            userListRef.value.resetSelection();
+        }
+
+    };
+
 
     // 등록 :: 주소 업데이트 핸들러
     const handleAddressUpdate = (data) => {
         addressData.value = data;
     };
 
-    // 종료일이 시작일보다 이전 날짜라면 종료일을 시작일로 맞추기
-    watch([startDay, endDay], () => {
-        if (startDay.value && endDay.value) {
-            const start = new Date(startDay.value);
-            const end = new Date(endDay.value);
-
-            if (end < start) {
-            endDay.value = startDay.value;
-            }
+    // 시작일이 종료일보다 크면 종료일 리셋
+    watch(startDay, (newStartDate) => {
+        if (new Date(newStartDate) > new Date(endDay.value)) {
+            endDay.value = '';
         }
-    }, { flush: 'post' });
+    });
+
+    const handleProjectUpdate = async (params) => {
+        if (params) {
+            await projectStore.getProjectList(params.text, params.year, 'false');
+        } else {
+            await projectStore.getProjectList(searchText.value, selectedYear.value, 'false');
+        }
+        await projectStore.getMemberProjects();
+
+        // 컬러 목록 새로고침 및 결과 확인
+        const updatedColors = await refreshColorList('YNP');
+
+        // 컬러 선택값 초기화 (필요시)
+        if (updatedColors && updatedColors.length > 0) {
+            color.value = updatedColors[0].value;
+        }
+    };
 
     // 프로젝트 등록
     const handleCreate = async () => {
-
         nameAlert.value = name.value.trim() === '';
+        startDayAlert.value = startDay.value.trim() === '';
         addressAlert.value = addressData.value.address.trim() === '';
 
-        if (nameAlert.value || addressAlert.value) {
+        if (!colorList.value || colorList.value.length === 0) {
+            colorAlert.value = true;
+        }
+
+        if (nameAlert.value || startDayAlert.value || addressAlert.value || colorAlert.value)  {
             return;
         }
 
-        $api.post('project/insert', {
+        // 비활성화된 사용자 목록 생성
+        const disabledMemberSeqs = selectedUsers.value.disabledUsers.map(user => user.MEMBERSEQ);
 
+        const response = await $api.post('project/insert', {
             projctNam: name.value,
             projctCol: color.value,
             projctStr: startDay.value,
@@ -241,18 +343,36 @@
             projctDtl: addressData.value.detailAddress,
             projctZip: addressData.value.postcode,
             projctCmb: user.value.id,
-        }).then(res => {
-            if (res.status === 200) {
-                toastStore.onToast('프로젝트가 등록되었습니다.', 's');
-                closeCreateModal();
-                getProjectList();
-            }
+            disabledMembers: disabledMemberSeqs
         });
+
+        if (response.status === 200) {
+            toastStore.onToast('프로젝트가 등록되었습니다.', 's');
+
+            colorList.value = colorList.value.filter(c => c.value !== color.value);
+
+            formReset();
+
+            await getProjectList();
+            await projectStore.getMemberProjects();
+
+            closeCreateModal();
+            resetUserSelection.value = !resetUserSelection.value;
+        }
     };
 
     onMounted(async () => {
         await getProjectList();
         await userStore.userInfo();
         user.value = userStore.user;
-    });
+
+        if (startDateInput.value) {
+            // FormInput 내부 input 찾기
+            startInputElement = startDateInput.value.$el.querySelector('input[type="date"]');
+            }
+
+            if (endDateInput.value) {
+                endInputElement = endDateInput.value.$el.querySelector('input[type="date"]');
+            }
+        });
 </script>

src/components/search/SearchBar.vue

@@ -1,31 +1,63 @@
 <template>
-    <div class="input-group mb-3 d-flex">
-        <input type="text" class="form-control" placeholder="Search" @change="search" @input="preventLeadingSpace" />
-        <button type="button" class="btn btn-primary"><i class="bx bx-search bx-md"></i></button>
-    </div>
+    <form @submit.prevent="search">
+        <div class="input-group mb-3 d-flex">
+            <input type="text" class="form-control" placeholder="Search" v-model="searchQuery" @input="preventLeadingSpace" />
+            <button type="submit" class="btn btn-primary">
+                <i class="bx bx-search bx-md"></i>
+            </button>
+        </div>
+    </form>
 </template>
 
 <script setup>
+    import { ref, watch } from 'vue';
+
     const props = defineProps({
         maxlength: {
             type: Number,
             default: 30,
             required: false,
         },
+        initKeyword: {
+            type: String,
+        },
     });
 
     const emits = defineEmits(['update:data']);
+    const searchQuery = ref('');
 
-    const search = function (event) {
+    watch(
+        () => props.initKeyword,
+        (newVal, oldVal) => {
+            searchQuery.value = newVal;
+        },
+    );
 
-        //Type Number 일때 maxlength 적용 안됨 방지
-        if (event.target.value.length > props.maxlength) {
-            event.target.value = event.target.value.slice(0, props.maxlength);
+    // 검색 실행 함수 (버튼 클릭 or 엔터 공통)
+    const search = () => {
+        const trimmedQuery = searchQuery.value.trimStart();
+        if (trimmedQuery === '') {
+            emits('update:data', '');
+            return;
         }
-        emits('update:data', event.target.value);
+        if (trimmedQuery.length < 2) {
+            alert('검색어는 최소 2글자 이상 입력해주세요.');
+            searchQuery.value = '';
+            return;
+        }
+
+        // 길이 제한 처리
+        if (trimmedQuery.length > props.maxlength) {
+            searchQuery.value = trimmedQuery.slice(0, props.maxlength);
+        } else {
+            searchQuery.value = trimmedQuery;
+        }
+
+        emits('update:data', searchQuery.value);
     };
 
-    const preventLeadingSpace = function (event) {
-        event.target.value = event.target.value.trimStart();
-    }
+    // 좌측 공백 제거
+    const preventLeadingSpace = () => {
+        searchQuery.value = searchQuery.value.trimStart();
+    };
 </script>

src/components/user/LoginForm.vue

@@ -23,7 +23,7 @@
                     <label class="form-check-label fw-bold" for="rememberCheck">&nbsp;자동로그인</label>
                 </div>
                 <RouterLink class="text-dark fw-bold" to="/register">등록신청</RouterLink>
-                <RouterLink class="text-dark fw-bold" to="/pw">비밀번호 찾기</RouterLink>
+                <RouterLink class="text-dark fw-bold" to="/pw">비밀번호 재설정</RouterLink>
             </div>
         </div>
     </form>
@@ -32,7 +32,7 @@
 <script setup>
     import $api from '@api';
     import router from '@/router';
-    import { nextTick, ref } from 'vue';
+    import {  ref } from 'vue';
     import UserFormInput from '@c/input/UserFormInput.vue';
     import { useUserInfoStore } from '@/stores/useUserInfoStore';
 
@@ -71,17 +71,16 @@
             remember: remember.value,
         }, { headers: { isLogin: true } })
         .then(async res => {
-            if (res.status === 200) {
-                userStore.userInfo();
-                await nextTick();
-                router.push('/')
+            // 로그인 실패 확인
+            if (res.data.code > 10000) {
+                // 로그인 실패 시 에러 메시지 표시
+                errorMessage.value = res.data.message;
+                return;
             }
-        }).catch(error => {
-            if (error.response) {
-                error.config.isLoginRequest = true;
-                errorMessage.value = error.response.data.message;
-                console.clear();
-            }
-        });
+
+                // 로그인 성공 처리
+                await userStore.userInfo();
+                router.push('/');
+        })
     };
 </script>

src/components/user/RegisterForm.vue

@@ -3,9 +3,9 @@
         <div class="text-center">
             <label
                 for="profilePic"
-                class="rounded-circle m-auto ui-bg-cover position-relative cursor-pointer"
+                class="rounded-circle m-auto ui-bg-cover position-relative cursor-pointer "
                 id="profileLabel"
-                style="width: 100px; height: 100px; background-image: url(public/img/avatars/default-Profile.jpg); background-repeat: no-repeat;"
+                style="width: 100px; height: 100px; background-image: url(img/avatars/default-Profile.jpg); background-repeat: no-repeat; background-size: cover;"
             >
             </label>
 
@@ -25,6 +25,7 @@
                 @update:alert="idAlert = $event"
                 @blur="checkIdDuplicate"
                 :value="id"
+                @keypress="noSpace"
             />
             <span v-if="idError" class="invalid-feedback d-block">{{ idError }}</span>
 
@@ -37,7 +38,9 @@
                 @update:data="password = $event"
                 @update:alert="passwordAlert = $event"
                 :value="password"
+                @keypress="noSpace"
             />
+            <span v-if="passwordError" class="invalid-feedback d-block">{{ passwordError }}</span>
 
             <UserFormInput
                 title="비밀번호 확인"
@@ -47,20 +50,20 @@
                 :is-alert="passwordcheckAlert"
                 @update:data="passwordcheck = $event"
                 @update:alert="passwordcheckAlert = $event"
-                @blur="checkPw"
                 :value="passwordcheck"
+                @keypress="noSpace"
             />
             <span v-if="passwordcheckError" class="invalid-feedback d-block">{{ passwordcheckError }}</span>
 
             <FormSelect
-                    title="비밀번호 힌트"
-                    name="pwhint"
-                    :is-essential="true"
-                    :is-row="false"
-                    :is-label="true"
-                    :is-common="true"
-                    :data="pwhintList"
-                    @update:data="pwhint = $event"
+                title="비밀번호 힌트"
+                name="pwhint"
+                :is-essential="true"
+                :is-row="false"
+                :is-label="true"
+                :is-common="true"
+                :data="pwhintList"
+                @update:data="pwhint = $event"
             />
 
             <UserFormInput
@@ -82,6 +85,7 @@
                     @update:data="name = $event"
                     @update:alert="nameAlert = $event"
                     :value="name"
+                    @keypress="noSpace"
                     class="me-2 w-50"
                 />
 
@@ -94,8 +98,8 @@
                     :is-common="true"
                     :is-color="true"
                     :data="colorList"
-                    @update:data="color = $event"
-                    @blur="checkColorDuplicate"
+                    @update:data="handleColorUpdate"
+                    :is-alert="colorAlert"
                     class="w-50"
                 />
             </div>
@@ -136,6 +140,7 @@
                 @update:data="handleAddressUpdate"
                 @update:alert="addressAlert = $event"
                 :value="address"
+                :disabled="true"
             />
 
             <UserFormInput
@@ -143,11 +148,12 @@
                 name="phone"
                 :isEssential="true"
                 :is-alert="phoneAlert"
-                @update:data="phone = $event"
                 @update:alert="phoneAlert = $event"
                 @blur="checkPhoneDuplicate"
                 :maxlength="11"
                 :value="phone"
+                @keypress="onlyNumber"
+                @input="inputEvent"
             />
             <span v-if="phoneError" class="invalid-feedback d-block">{{ phoneError }}</span>
 
@@ -160,9 +166,9 @@
 </template>
 
 <script setup>
-    import { ref } from 'vue';
+    import { ref, watch } from 'vue';
     import $api from '@api';
-    import commonApi from '@/common/commonApi'
+    import commonApi from '@/common/commonApi';
     import UserFormInput from '@c/input/UserFormInput.vue';
     import FormSelect from '@c/input/FormSelect.vue';
     import ArrInput from '@c/input/ArrInput.vue';
@@ -178,6 +184,7 @@
     const id = ref('');
     const idError = ref('');
     const password = ref('');
+    const passwordError = ref('');
     const passwordcheck = ref('');
     const passwordcheckError = ref('');
     const pwhintRes = ref('');
@@ -185,22 +192,24 @@
     const birth = ref('');
     const address = ref('');
     const detailAddress = ref('');
-    const postcode = ref('');   // 우편번호
+    const postcode = ref(''); // 우편번호
     const phone = ref('');
     const phoneError = ref('');
     const color = ref(''); // 선택된 color
     const colorError = ref('');
-    const mbti = ref('');  // 선택된 MBTI
-    const pwhint = ref('');  // 선택된 pwhint
+    const mbti = ref(''); // 선택된 MBTI
+    const pwhint = ref(''); // 선택된 pwhint
 
     const profilAlert = ref(false);
     const idAlert = ref(false);
     const idErrorAlert = ref(false);
     const passwordAlert = ref(false);
+    const passwordErrorAlert = ref(false);
     const passwordcheckAlert = ref(false);
     const passwordcheckErrorAlert = ref(false); // 비밀번호 확인 오류 메시지
     const pwhintResAlert = ref(false);
     const nameAlert = ref(false);
+    const colorAlert = ref(false);
     const birthAlert = ref(false);
     const addressAlert = ref(false);
     const phoneAlert = ref(false);
@@ -209,6 +218,9 @@
 
     const toastStore = useToastStore();
 
+    const noSpace = (e) => {
+        if (e.key === ' ') e.preventDefault();
+    };
 
     // 프로필 체크
     const profileValid = (size, type) => {
@@ -238,7 +250,7 @@
         // 사이즈, 파일 타입 안 맞으면 기본 이미지
         if (!profileValid(file.size, file.type)) {
             e.target.value = '';
-            profileLabel.style.backgroundImage = 'url("public/img/avatars/default-Profile.jpg")';
+            profileLabel.style.backgroundImage = 'url("img/avatars/default-Profile.jpg")';
             return false;
         }
 
@@ -248,8 +260,15 @@
         profile.value = file;
     };
 
-    // 아이디 중복체크
+    // 아이디 체크
     const checkIdDuplicate = async () => {
+        // 길이 검증 먼저 수행
+        if (id.value.length < 4) {
+            idError.value = '아이디는 4자리 이상이어야 합니다.';
+            idErrorAlert.value = true;
+            return;
+        }
+
         const response = await $api.get(`/user/checkId?memberIds=${id.value}`);
         if (!response.data.data) {
             idErrorAlert.value = true;
@@ -275,30 +294,19 @@
 
     // 컬러, mbti, 비밀번호 힌트 목록 불러오기
     const { colorList, mbtiList, pwhintList } = commonApi({
-        loadColor: true, colorType: 'YON',
+        loadColor: true,
+        colorType: 'YON',
         loadMbti: true,
         loadPwhint: true,
     });
 
     // 주소 업데이트 핸들러
-    const handleAddressUpdate = (addressData) => {
+    const handleAddressUpdate = addressData => {
         address.value = addressData.address;
         detailAddress.value = addressData.detailAddress;
-        postcode.value = addressData.postcode;  // 우편번호
+        postcode.value = addressData.postcode; // 우편번호
     };
 
-    // 비밀번호 확인 체크
-    const checkPw = async () => {
-        if (password.value !== passwordcheck.value) {
-            passwordcheckError.value = '비밀번호가 일치하지 않습니다.';
-            passwordcheckErrorAlert.value = true;
-        } else {
-            passwordcheckError.value = '';
-            passwordcheckErrorAlert.value = false;
-        }
-    };
-
-
     // 색상 중복체크
     const checkColorDuplicate = async () => {
         const response = await $api.get(`/user/checkColor?memberCol=${color.value}`);
@@ -312,10 +320,63 @@
         }
     };
 
+    const handleColorUpdate = async newColor => {
+        color.value = newColor;
+        colorError.value = '';
+        colorErrorAlert.value = false;
+
+        await checkColorDuplicate();
+    }
+
+    const onlyNumber = (event) => {
+        // 숫자가 아니면 입력 차단
+        if (!/^[0-9]$/.test(event.key)) {
+            event.preventDefault();
+        }
+    };
+
+    const inputEvent = (e) => {
+        const newValue = e.target.value.replace(/\D/g, ''); // 숫자만 남김
+        e.target.value = newValue;  // 입력 필드 즉시 반영
+        phone.value = newValue;     // Vue 반응형 상태 업데이트
+    };
+
+    watch(id, (newValue) => {
+        if (newValue && newValue.length >= 4) {
+            idError.value = '';
+            idErrorAlert.value = false;
+        } else if (newValue && newValue.length < 4) {
+            idError.value = '아이디는 4자리 이상이어야 합니다.';
+            idErrorAlert.value = true;
+        }
+    });
+
+    watch(password, (newValue) => {
+
+        if (newValue && newValue.length >= 4) {
+            passwordErrorAlert.value = false;
+            passwordError.value = '';
+        } else if (newValue && newValue.length < 4) {
+            passwordErrorAlert.value = true;
+            passwordError.value = '비밀번호는 4자리 이상이어야 합니다.';
+        }
+    });
+
+    // 비밀번호 확인
+    watch([password, passwordcheck], ([newPassword, newPasswordCheck]) => {
+        if (newPassword && newPasswordCheck) {
+            if (newPassword !== newPasswordCheck) {
+                passwordcheckError.value = '비밀번호가 일치하지 않습니다.';
+                passwordcheckErrorAlert.value = true;
+            } else {
+                passwordcheckError.value = '';
+                passwordcheckErrorAlert.value = false;
+            }
+        }
+    });
 
     // 회원가입
     const handleSubmit = async () => {
-
         await checkColorDuplicate();
 
         idAlert.value = id.value.trim() === '';
@@ -327,6 +388,32 @@
         addressAlert.value = address.value.trim() === '';
         phoneAlert.value = phone.value.trim() === '';
 
+        if (!colorList.value || colorList.value.length === 0) {
+            colorAlert.value = true;
+        }
+
+        // 아이디 길이 체크
+        if (id.value && id.value.length < 4) {
+            idErrorAlert.value = true;
+            idError.value = '아이디는 4자리 이상이어야 합니다.';
+        }
+
+        // 비밀번호 길이 체크
+        if (password.value && password.value.length < 4) {
+            passwordErrorAlert.value = true;
+            passwordError.value = '비밀번호는 4자리 이상이어야 합니다.';
+        } else {
+            passwordError.value = '';
+        }
+        const phoneRegex = /^010\d{8}$/;
+        const isFormatValid = phoneRegex.test(phone.value);
+
+        if (!/^\d+$/.test(phone.value) || !isFormatValid) {
+            phoneAlert.value = true;
+        } else {
+            phoneAlert.value = false;
+        }
+
         // 프로필 이미지 체크
         if (!profile.value) {
             profilerr.value = '프로필 이미지를 선택해주세요.';
@@ -336,20 +423,35 @@
             profilAlert.value = false;
         }
 
-        if (profilAlert.value || idAlert.value || idErrorAlert.value || passwordAlert.value || passwordcheckAlert.value ||
-            passwordcheckErrorAlert.value || pwhintResAlert.value || nameAlert.value || birthAlert.value ||
-            addressAlert.value || phoneAlert.value || phoneErrorAlert.value || colorErrorAlert.value) {
+
+        if (
+            profilAlert.value ||
+            idAlert.value ||
+            idErrorAlert.value ||
+            passwordAlert.value ||
+            passwordErrorAlert.value ||
+            passwordcheckAlert.value ||
+            passwordcheckErrorAlert.value ||
+            pwhintResAlert.value ||
+            nameAlert.value ||
+            birthAlert.value ||
+            addressAlert.value ||
+            phoneAlert.value ||
+            phoneErrorAlert.value ||
+            colorAlert.value ||
+            colorErrorAlert.value
+        ) {
             return;
         }
 
         const formData = new FormData();
-        formData.append('memberIds', id.value);
-        formData.append('memberPwd', password.value);
+        formData.append('memberIds', id.value.trim());
+        formData.append('memberPwd', password.value.trim());
         formData.append('memberPwh', pwhint.value);
-        formData.append('memberPwr', pwhintRes.value);
-        formData.append('memberNam', name.value);
+        formData.append('memberPwr', pwhintRes.value.trim());
+        formData.append('memberNam', name.value.trim());
         formData.append('memberArr', address.value);
-        formData.append('memberDtl', detailAddress.value);
+        formData.append('memberDtl', detailAddress.value.trim());
         formData.append('memberZip', postcode.value);
         formData.append('memberBth', birth.value);
         formData.append('memberTel', phone.value);
@@ -357,7 +459,7 @@
         formData.append('memberMbt', mbti.value);
         formData.append('memberPrf', profile.value);
 
-        const response = await $api.post('/user/join', formData, { isFormData : true });
+        const response = await $api.post('/user/join', formData, { isFormData: true });
 
         if (response.status === 200) {
             toastStore.onToast('등록신청이 완료되었습니다. 관리자 승인 후 이용가능합니다.', 's');
@@ -365,5 +467,3 @@
         }
     };
 </script>
-
-<style></style>

src/components/user/UserList.vue

@@ -1,9 +1,9 @@
 <template>
-    <ul class="list-unstyled users-list d-flex align-items-center gap-1">
+    <ul v-if="displayedUserList && displayedUserList.length > 0" class="list-unstyled users-list d-flex align-items-center gap-1 flex-wrap">
         <li
             v-for="(user, index) in displayedUserList"
             :key="index"
-            class="avatar pull-up"
+            class="avatar pull-up "
             :class="{ 'opacity-100': isUserDisabled(user) }"
             @click.stop="showOnlyActive ? null : toggleDisable(index)"
             :style="showOnlyActive ? 'cursor: default' : ''"
@@ -14,7 +14,7 @@
             :data-bs-original-title="getTooltipTitle(user)"
         >
             <img
-                class="rounded-circle user-avatar border border-3"
+                class="user-avatar border border-3 rounded-circle object-fit-cover"
                 :class="{ 'grayscaleImg': isUserDisabled(user) }"
                 :src="`${baseUrl}upload/img/profile/${user.MEMBERPRF}`"
                 :style="`border-color: ${user.usercolor} !important;`"
@@ -23,17 +23,21 @@
             />
         </li>
     </ul>
+    <span v-else >-</span>
 </template>
 
 <script setup>
-import { onMounted, ref, nextTick, computed } from 'vue';
+import { onMounted, ref, nextTick, computed, watch } from 'vue';
 import { useUserStore } from '@s/userList';
 import $api from '@api';
+import { useToastStore } from "@s/toastStore";
 
 const emit = defineEmits(['user-list-update']);
 const userStore = useUserStore();
 const userList = ref([]);
 const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
+const userProjectPeriods = ref([]);
+const toastStore = useToastStore();
 
 const props = defineProps({
     projctSeq: {
@@ -43,9 +47,39 @@ const props = defineProps({
     showOnlyActive: {
         type: Boolean,
         default: false
+    },
+    role: {
+        type:String,
+        required:false
     }
 });
 
+// 원래 비활성화된 사용자 목록 저장
+const originalDisabledUsers = ref([]);
+
+
+const resetSelection = async () => {
+    // 모든 사용자를 활성화 상태로 초기화
+    if (props.projctSeq) {
+        // 프로젝트 수정 모드일 경우
+        userList.value = userList.value.map(user => ({
+            ...user,
+            PROJCTYON: '1'
+        }));
+
+        // 프로젝트 참여 정보 다시 가져오기
+        await fetchProjectParticipation();
+    } else {
+        // 프로젝트 생성 모드일 경우
+        userList.value = userList.value.map(user => ({
+            ...user,
+            disabled: false  // 모든 사용자 활성화
+        }));
+    }
+
+    emitUserListUpdate();
+};
+
 // 활성화된 회원을 앞으로 정렬하는 computed 속성
 const sortedUserList = computed(() => {
     return [...userList.value].sort((a, b) => {
@@ -77,9 +111,37 @@ const fetchProjectParticipation = async () => {
                 ...user,
                 PROJCTYON: projectMembers.find(pm => pm.MEMBERSEQ === user.MEMBERSEQ)?.PROJCTYON ?? '1'
             }));
+
+            // 원래 비활성화된 사용자 목록 저장
+            originalDisabledUsers.value = userList.value
+                .filter(user => user.PROJCTYON === '0')
+                .map(user => user.MEMBERSEQ);
+
+            emitUserListUpdate();
         }
     }
 };
+// 사용자별 프로젝트 참여 기간 조회
+const fetchUserProjectPeriods = async () => {
+    if (props.projctSeq) {
+        try {
+            const response = await $api.get(`project/period/${props.projctSeq}`);
+            if (response.status === 200) {
+                userProjectPeriods.value = response.data.data;
+            }
+        } catch (error) {
+            console.error('프로젝트 참여 기간 조회 실패:', error);
+        }
+    }
+};
+
+// projctSeq가 변경될 때마다 참여 기간 데이터 다시 불러오기
+watch(() => props.projctSeq, async (newVal, oldVal) => {
+    if (newVal !== oldVal) {
+        await fetchProjectParticipation();
+        await fetchUserProjectPeriods();
+    }
+}, { immediate: true });
 
 // 사용자 목록 호출
 onMounted(async () => {
@@ -88,53 +150,57 @@ onMounted(async () => {
 
     if (props.projctSeq) {
         await fetchProjectParticipation();
+        await fetchUserProjectPeriods();
+    } else {
+        // projctSeq가 없는 경우, 초기 상태 emit
+        emitUserListUpdate();
     }
 
     nextTick(() => {
-        const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
-        tooltips.forEach((tooltip) => {
-            new bootstrap.Tooltip(tooltip);
-        });
+        initTooltips();
     });
 });
 
+// 툴팁 초기화 함수
+const initTooltips = () => {
+    const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+    tooltips.forEach((tooltip) => {
+        if (tooltip._tooltip) {
+            tooltip._tooltip.dispose();
+        }
+        new bootstrap.Tooltip(tooltip);
+    });
+};
+
+
 // 사용자 비활성화 상태 확인
 const isUserDisabled = (user) => {
     return props.projctSeq ? user.PROJCTYON === '0' : user.disabled;
 };
 
-// 클릭 시 활성화/비활성화 및 DB 업데이트
-// showOnlyActive가 true일 때는 toggleDisable 함수가 실행되지 않음
-const toggleDisable = async (index) => {
-    if (props.showOnlyActive) return; // showOnlyActive가 true이면 함수 실행 중지
-
+// 사용자 선택 토글 (즉시 API 호출 없이 상태만 변경)
+const toggleDisable = (index) => {
+    if (props.showOnlyActive) return;
     const user = displayedUserList.value[index];
-    if (user) {
-        const newParticipationStatus = props.projctSeq
-            ? user.PROJCTYON === '1'
-            : !user.disabled;
-        if (props.projctSeq) {
-            const response = await $api.patch('project/updateYon', {
-                memberSeq: user.MEMBERSEQ,
-                projctSeq: props.projctSeq,
-                projctYon: newParticipationStatus ? '0' : '1'
-            });
-            if (response.status === 200) {
-                // 원래 userList에서 해당 사용자를 찾아 업데이트
-                const originalIndex = userList.value.findIndex(u => u.MEMBERSEQ === user.MEMBERSEQ);
-                if (originalIndex !== -1) {
-                    userList.value[originalIndex].PROJCTYON = newParticipationStatus ? '0' : '1';
-                }
-            }
-        } else {
-            // 원래 userList에서 해당 사용자를 찾아 업데이트
-            const originalIndex = userList.value.findIndex(u => u.MEMBERSEQ === user.MEMBERSEQ);
-            if (originalIndex !== -1) {
-                userList.value[originalIndex].disabled = newParticipationStatus;
-                emitUserListUpdate();
-            }
+
+    // 본인 계정이면 비활성화 방지
+    if (props.role === 'vote') {
+        if (user.MEMBERSEQ === userStore.userInfo.id) {
+            toastStore.onToast('본인은 비활성화할 수 없습니다.', 'e');
+            return;
         }
     }
+
+    if (user) {
+        // 프로젝트 수정 모드인 경우
+        if (props.projctSeq) {
+            user.PROJCTYON = user.PROJCTYON === '1' ? '0' : '1';
+        } else {
+            user.disabled = !user.disabled;
+        }
+
+        emitUserListUpdate();
+    }
 };
 
 // emit
@@ -144,7 +210,51 @@ const emitUserListUpdate = () => {
     emit('user-list-update', { activeUsers, disabledUsers });
 };
 
-const getTooltipTitle = (user) => {
-    return user.MEMBERSEQ === userStore.userInfo.id ? '나' : user.MEMBERNAM;
+// 날짜 포맷 함수
+const formatDate = (dateString) => {
+    if (!dateString) return '';
+    const date = new Date(dateString);
+    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
 };
+
+// 툴팁 제목 생성 함수
+const getTooltipTitle = (user) => {
+    const userName = user.MEMBERSEQ === userStore.userInfo.id ? '나' : user.MEMBERNAM;
+
+    if (props.projctSeq) {
+        const periodInfo = userProjectPeriods.value.find(p => p.MEMBERSEQ === user.MEMBERSEQ);
+
+        if (periodInfo) {
+            return `${formatDate(periodInfo.userStartDate)} ~ ${formatDate(periodInfo.userEndDate)}`;
+        }
+    }
+
+    return userName;
+};
+
+
+const hasUserChanges = () => {
+    if (!props.projctSeq) return false;
+
+    const currentDisabledUserIds = userList.value
+        .filter(user => user.PROJCTYON === '0')
+        .map(user => user.MEMBERSEQ);
+
+    // 길이가 다르면 변경된 것임
+    if (currentDisabledUserIds.length !== originalDisabledUsers.value.length) {
+        return true;
+    }
+
+    // 길이가 같더라도 포함된 ID가 다르면 변경된 것임
+    return currentDisabledUserIds.some(id => !originalDisabledUsers.value.includes(id)) ||
+            originalDisabledUsers.value.some(id => !currentDisabledUserIds.includes(id));
+};
+
+// expose에 메서드 추가
+defineExpose({
+    resetSelection,
+    fetchProjectParticipation,
+    hasUserChanges
+});
 </script>
+

src/components/vacation/ProfileList.vue

@@ -1,28 +1,35 @@
 <template>
-    <div class="card-body d-flex justify-content-center m-n5">
-        <ul class="list-unstyled profile-list">
-            <li
-                v-for="(user, index) in sortedUserList"
-                :key="index"
-                :class="{ disabled: user.disabled }"
-                @click="$emit('profileClick', user)"
-                data-bs-placement="top"
-                :aria-label="user.MEMBERSEQ"
-            >
+    <ul class="row gx-2 mb-0 list-inline ">
+        <li
+            v-for="(user, index) in sortedUserList"
+            :key="index"
+            class="col-4 mb-3"
+            :class="{ newRow: (index + 1) % 4 === 0 }"
+            @click="$emit('profileClick', user)"
+            data-bs-placement="top"
+            :aria-label="user.MEMBERSEQ"
+        >
+            <div class="ratio ratio-1x1 mb-0 profile-list position-relative">
                 <img
-                    class="rounded-circle profile-img"
+                    v-if="user.MEMBERSEQ === employeeId"
+                    src="/img/icons/Crown.png"
+                    alt="Crown"
+                    class="start-50 translate-middle crown-icon"
+                />
+                <img
+                    class="rounded-circle object-fit-cover"
                     :src="getUserProfileImage(user.MEMBERPRF)"
                     alt="user"
                     :style="getDynamicStyle(user)"
                     @error="setDefaultImage"
                     @load="showImage"
                 />
-                <span class="mt-2 text-sm-center d-block fs-6 remaining-vacation">
-                    {{ remainingVacationData[user.MEMBERSEQ] || 0 }}
-                </span>
-            </li>
-        </ul>
-    </div>
+            </div>
+            <span class="mt-2 text-sm-center d-block fs-6 remaining-vacation">
+                {{ remainingVacationData[user.MEMBERSEQ] || 0 }}
+            </span>
+        </li>
+    </ul>
 </template>
 
 <script setup>
@@ -69,10 +76,13 @@ nextTick(() => {
 });
 
 const sortedUserList = computed(() => {
-if (!employeeId.value) return userList.value;
-const myProfile = userList.value.find(user => user.MEMBERSEQ === employeeId.value);
-const otherUsers = userList.value.filter(user => user.MEMBERSEQ !== employeeId.value);
-return myProfile ? [myProfile, ...otherUsers] : userList.value;
+    if (!employeeId.value) return [];
+
+    // 모든 사용자 포함 (관리자 필터링 제거)
+    const myProfile = userList.value.find(user => user.MEMBERSEQ === employeeId.value);
+    const otherUsers = userList.value.filter(user => user.MEMBERSEQ !== employeeId.value);
+
+    return myProfile ? [myProfile, ...otherUsers] : otherUsers;
 });
 
 const getUserProfileImage = (profilePath) =>
@@ -81,35 +91,18 @@ profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}
 const setDefaultImage = (event) => (event.target.src = defaultProfile);
 const showImage = (event) => (event.target.style.visibility = "visible");
 
-// 화면 크기에 따라 프로필 크기 동적 조정
-const profileSize = computed(() => {
-const totalUsers = userList.value.length;
-
-if (windowWidth.value >= 1650) {
-    if (totalUsers <= 10) return "68px";
-    if (totalUsers <= 15) return "55px";
-    return "45px";
-} else if (windowWidth.value >= 1300) {
-    if (totalUsers <= 10) return "45px";
-    if (totalUsers <= 15) return "40px";
-    return "30px";
-} else if (windowWidth.value >= 1024) {
-    if (totalUsers <= 10) return "40px";
-    if (totalUsers <= 15) return "30px";
-    return "20px";
-} else {
-    return "20px";
-}
-});
-
 const getDynamicStyle = (user) => ({
-width: profileSize.value,
-height: profileSize.value,
-borderWidth: "4px",
+borderWidth: "3px",
 borderColor: user.usercolor || "#ccc",
 borderStyle: "solid",
 });
 </script>
 
 <style scoped>
+.crown-icon {
+    width: 90%;
+    height: 70%;
+    z-index: 0;
+    top: -7%
+}
 </style>

src/components/voteboard/voteCard.vue

@@ -1,63 +1,65 @@
 <template>
-    <div class="card mb-6">
-        <div  class="card-body" v-if="!data.localVote.LOCVOTDEL" >
+    <div class="card mb-6" >
+        <div  class="card-body "  :class="{'disabled-class': data.localVote.LOCVOTDDT  && (topVoters.length == 1 || data.localVote.LOCVOTRES || voteResult == 0)}" v-if="!data.localVote.LOCVOTDEL" >
             <h5 class="card-title mb-1">
                 <div class="list-unstyled users-list d-flex align-items-center gap-1">
-                <img
-                class="rounded-circle user-avatar border border-3 w-px-40"
-                :src="`${baseUrl}upload/img/profile/${data.localVote.MEMBERPRF}`"
-                :style="`border-color: ${data.localVote.usercolor} !important;`"
-                alt="user"
-                />
-
-                <div class="w-100">
-                <div class="d-flex justify-content-between">
-                    <div class="user-info">
-                        <h6 class="mb-1">{{ data.localVote.MEMBERNAM }}</h6>
-                    </div>
-                    <div class="add-btn d-flex align-items-center">
-                        <!-- 투표완료시  -->
-                        <i v-if="data.yesVotetotal == '1'" class="bx bxs-check-circle link-success"></i>
-                        <!-- 투표작성자만 수정/삭제/종료 가능  -->
-                        <div v-if="userStore.user.id === data.localVote.LOCVOTREG">
-                            <button
-                            v-if="!data.localVote.LOCVOTDDT"
-                            type="button"
-                            class="bx btn btn-danger"
-                            @click="endBtn(data.localVote.LOCVOTSEQ)"
-                            >종료</button>
-                            <DeleteBtn @click="voteDelete(data.localVote.LOCVOTSEQ)" />
+                    <img
+                    class="object-fit-cover rounded-circle user-avatar border border-3 w-px-40 h-px-40"
+                    :src="`${baseUrl}upload/img/profile/${data.localVote.MEMBERPRF}`"
+                    :style="`border-color: ${data.localVote.usercolor} !important;`"
+                    @error="$event.target.src = '/img/icons/icon.png'"
+                    alt="user"
+                    />
+                    <div class="w-100">
+                        <div class="d-flex justify-content-between align-items-center">
+                            <div class="user-info">
+                                <h6 class="mb-1">{{ data.localVote.MEMBERNAM }}</h6>
+                                <!-- 투표완료시  -->
+                            </div>
+                            <div class="add-btn d-flex align-items-center">
+                                <!-- 투표작성자만 수정/삭제/종료 가능  -->
+                                <div v-if="userStore.user.id === data.localVote.LOCVOTREG">
+                                    <button
+                                    v-if="!data.localVote.LOCVOTDDT"
+                                    type="button"
+                                    class="btn btn-label-danger btn-icon m-1"
+                                    @click="endBtn(data.localVote.LOCVOTSEQ)"
+                                    ><i class="bx bx-power-off"></i>
+                                    </button>
+                                    <DeleteBtn v-if="!data.localVote.LOCVOTDDT" @click="voteDelete(data.localVote.LOCVOTSEQ)" />
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
-                </div>
-                </div>
             </h5>
-            <h5 class="mb-1">{{ data.localVote.LOCVOTTTL }}</h5>
+            <h5 class="mb-0">{{ data.localVote.LOCVOTTTL }}
+                <i v-if="yesVotetotal != '0'" class="bx bxs-check-circle link-success"></i>
+            </h5>
             <small >{{ data.localVote.formatted_LOCVOTRDT }} ~ {{ data.localVote.formatted_LOCVOTEDT }}</small>
             <!-- 투표안했을시-->
-            <div v-if="data.localVote.LOCVOTDDT && data.voteResult.length == 0">
+            <div v-if="data.localVote.LOCVOTDDT && voteResult == 0">
                 <small class="text-primary text-uppercase">투표 결과없음 (😂아무도 투표하지 않았습니다)</small>
             </div>
             <div v-else>
-            <vote-card-check
-            v-if="data.yesVotetotal == 0"
-            @addContents="addContents"
-            @checkedNames="checkedNames"
-            :data="data.voteDetails"
-            :voteInfo="data.localVote"
-            :total="data.voteDetails.length "/>
-
-            <!-- 투표 결과 -->
-            <div v-if="data.localVote.LOCVOTDDT" class="mt-3">
-            <vote-result-list  :data="data.voteResult"  @randomList="randomList" :randomResultNum="data.localVote.LOCVOTRES"/>
-            </div>
-            <!-- 투표완/미완 인원 -->
-            <vote-user-list
-            :data="data.voteMembers"/>
+                <vote-card-check
+                v-if="yesVotetotal == 0 && !data.localVote.LOCVOTDDT"
+                @addContents="addContents"
+                @checkedNames="checkedNames"
+                :data="data.voteDetails"
+                :voteInfo="data.localVote"
+                :total="data.voteDetails.length "/>
+                <small v-if="yesVotetotal != 0 && !data.localVote.LOCVOTDDT">투표 완료 : 종료시 투표 결과가 나타납니다.</small>
+                <!-- 투표 결과 -->
+                <div v-if="data.localVote.LOCVOTDDT" class="mt-3">
+                    <vote-result-list  :data="topVoters"  @randomList="randomList" :randomResultNum="data.localVote.LOCVOTRES" :locvotreg="data.localVote.LOCVOTREG" />
+                </div>
+                <!-- 투표완/미완 인원 -->
+                <vote-user-list
+                :data="data.voteMembers"/>
             </div>
         </div>
-        <div v-else  class="card-body">
+        <div v-else  class="card-body disabled-class">
             <h5>{{ data.localVote.LOCVOTTTL }}</h5>
             삭제된 투표입니다.
         </div>
@@ -65,7 +67,7 @@
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import EditBtn from '@c/button/EditBtn.vue';
 import DeleteBtn from '@c/button/DeleteBtn.vue';
 import voteUserList from '@c/voteboard/voteUserList.vue';
@@ -84,22 +86,50 @@ const props = defineProps({
         required: false,
     },
 });
+const voteResult = computed(() => {
+    return props.data.voteDetails.reduce((sum, item) => sum + item.VOTE_COUNT, 0);
+});
+const yesVotetotal = computed(() => {
+    return props.data.voteDetails.reduce((sum, item) => sum + item.yesvote, 0);
+});
+
+
+ // 가장 많은 투표를 받은 항목들 (1위)
+const topVoters = computed(() => {
+    // 가장 높은 VOTE_COUNT 찾기
+    const maxVoteCount = Math.max(...props.data.voteDetails.map(item => item.VOTE_COUNT));
+    // VOTE_COUNT가 가장 높은 항목들 필터링
+    return props.data.voteDetails.filter(item => item.VOTE_COUNT === maxVoteCount);
+});
+
 const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
 const userStore = useUserInfoStore();
-const currentDate = new Date();
-const voteEndDate = new Date(props.data.localVote.formatted_LOCVOTEDT.replace(' ', 'T'));
-voteEndDate.setDate(voteEndDate.getDate() + 1);
+const offset = new Date().getTimezoneOffset() * 60000
+const today = new Date(Date.now() - offset);
+const currentDate = today.toISOString().substring(0,16);
+const voteEndDate = props.data.localVote.LOCVOTEDT.substring(0,16);
 // 종료 여부 계산
 const isVoteEnded = computed(() => {
     return currentDate > voteEndDate;
 });
-
 const emit = defineEmits(['addContents','checkedNames','endVoteId','voteEnded','randomList','voteDelete','updateVote']);
 onMounted(() => {
     if (isVoteEnded.value && !props.data.localVote.LOCVOTDDT) {
-    emit('voteEnded', { id: props.data.localVote.LOCVOTSEQ });
+        emit('voteEnded', { id: props.data.localVote.LOCVOTSEQ });
     }
+    checkVoteCompletion();
 });
+// 데이터 변경 감지
+watch(() => props.data.localVote.total_voted, () => {
+    checkVoteCompletion();
+});
+
+// 종료 체크 함수
+const checkVoteCompletion = () => {
+    if (props.data.localVote.total_votable === props.data.localVote.total_voted && props.data.localVote.LOCVOTDDT == null) {
+        emit('voteEnded', { id: props.data.localVote.LOCVOTSEQ });
+    }
+};
 const addContents = (itemList, voteId) =>{
     emit('addContents',itemList,voteId)
 }
@@ -107,7 +137,6 @@ const checkedNames = (numList) =>{
     emit('checkedNames',numList);
 }
 const endBtn = (voteid) =>{
-    voteEndDate.setTime(currentDate.getTime()); // 현재 날짜로 설정
     emit('endVoteId',voteid);
 }
 const voteDelete = (voteid) =>{

src/components/voteboard/voteCardCheck.vue

@@ -1,43 +1,50 @@
 <template>
     <div class="card-text">
-        <div class="demo-inline-spacing mt-4">
-        <!-- 투표리스트 -->
-            <div  v-for="(item, index) in data"
-            :key="index">
-            <vote-card-check-list
-            :data="item"
-            :multiIs = voteInfo.LOCVOTMUL
-            :selectedValues="checkedNames"
-            @update:selectedValues="updateCheckedNames"
-            />
-            <div v-if="voteInfo.LOCVOTADD ==='1' && index === data.length - 1" class="d-flex align-items-center">
-            <div class="d-flex flex-column gap-2">
-            <div v-for="(item, index) in itemList" :key="index" class="d-flex align-items-start">
-            <form-input
-                class="flex-grow-1 me-2"
-                :title="'항목 ' + (index + data.length + 1)"
-                :name="'content' + index"
-                :is-essential="false"
-                :is-alert="contentAlerts[index]"
-                v-model="item.content"
-            />
-            <link-input v-model="item.url" />
-            <delete-btn @click="removeItem(index)" class="ms-2" />
+            <!-- 투표리스트 -->
+            <div  v-for="(item, index) in data" :key="index" class="mt-3">
+                <vote-card-check-list
+                :data="item"
+                :multiIs = voteInfo.LOCVOTMUL
+                :selectedValues="checkedNames"
+                @update:selectedValues="updateCheckedNames"
+                />
+                <div v-if="voteInfo.LOCVOTADD ==='1' && index === data.length - 1">
+                    <div v-for="(item, index) in itemList" :key="index" class=" mt-2">
+                        <form-input
+                        :title="'항목 ' + (index + data.length + 1)"
+                        :name="'content' + index"
+                        :is-essential="false"
+                        :is-alert="contentAlerts[index]"
+                        v-model="item.content"
+                        :is-btn="true"
+                        @keyup="ValidHandler('content' + (index + 1))"
+                        >
+                            <template v-slot:append>
+                                <delete-btn @click="removeItem(index)" />
+                            </template>
+                        </form-input>
+                        <form-input
+                                    :title="'URL ' + (index + data.length + 1)"
+                                    :name="'url' + index"
+                                    v-model="item.url"
+                                    :is-essential="false"
+                                    class="mb-1"
+                                    :maxlength="maxLength"
+                        />
+                    </div>
+                    <div class="d-flex justify-content align-items-center mt-3">
+                        <plus-btn @click="addItem" :disabled=" total >= 10" />
+                        <button class="btn btn-primary btn-icon m-1" @click="addContentSave(item.LOCVOTSEQ ,index)" :disabled="isSaveDisabled">
+                            <i class="bx bx-check"></i>
+                        </button>
+                    </div>
+                </div>
             </div>
-            <div class="mb-4 d-flex justify-content">
-            <plus-btn @click="addItem" :disabled="total >= 10" class="mb-3" />
-            <button class="btn btn-primary btn-icon mb-3" @click="addContentSave(item.LOCVOTSEQ)" :disabled="isSaveDisabled">
-                <i class="bx bx-check"></i>
-            </button>
+            <div class="d-flex">
+                <save-btn class="mt-2 ms-auto" @click="selectVote"/>
             </div>
-        </div>
-            </div>
-
-            </div>
-        </div>
 
     </div>
-    <save-btn class="btn-sm mt-2" @click="selectVote"/>
 </template>
 
 <script setup>
@@ -47,20 +54,20 @@ import SaveBtn from '@c/button/SaveBtn.vue'
 import FormInput from '@c/input/FormInput.vue';
 import voteCardCheckList from '@c/voteboard/voteCardCheckList.vue';
 import { computed, ref } from 'vue';
-import LinkInput from "@/components/voteboard/voteLinkInput.vue";
 import { voteCommon } from '@s/voteCommon';
 import DeleteBtn from "@c/button/DeleteBtn.vue";
 import { useToastStore } from '@s/toastStore';
 import router from '@/router';
 const toastStore = useToastStore();
-const contentAlerts = ref(false);
+const contentAlerts = ref([false, false]);
 const titleAlert = ref(false);
 const title = ref('');
 const rink = ref('');
+const maxLength = ref(2000);
 const { itemList, addItem, removeItem } = voteCommon(true);
 const total = computed(() => props.total + itemList.value.length);
 const isSaveDisabled = computed(() => {
-    return itemList.value.length === 0 || itemList.value.every(item => !item.content.trim());
+    return itemList.value.length === 0 || itemList.value.every(item => !item.content.trim() && !item.url.trim());
 });
 const props = defineProps({
     data: {
@@ -78,18 +85,43 @@ const props = defineProps({
 });
 const emit = defineEmits(['addContents','checkedNames']);
 //항목추가
-const addContentSave = (voteId) =>{
+const addContentSave = (voteId,index) =>{
+    let valid = true;
     const filteredItemList = itemList.value.filter(item => item.content && item.content.trim() !== '');
-    emit('addContents',filteredItemList,voteId);
-    itemList.value = [{ content: "", url: "" }];
+
+    itemList.value.forEach((item, index) => {
+        if (!item.content.trim() && item.url.trim()) {
+            contentAlerts.value[index] = true;
+            valid = false;
+        } else {
+            contentAlerts.value[index] = false;
+        }
+    });
+
+    if(valid){
+        emit('addContents',filteredItemList,voteId);
+        itemList.value = [{ content: "", url: "" }];
+        removeItem();
+    }
 }
 
+const ValidHandler = (field) => {
+    if (field.startsWith('content')) {
+        const index = parseInt(field.replace('content', '')) - 1;
+        if (!isNaN(index)) {
+            contentAlerts.value[index] = false;
+        }
+    }
+};
+
 const checkedNames = ref([]); // 선택된 값 저장
 const updateCheckedNames = (newValues) => {
     checkedNames.value = newValues;
 };
 const selectVote = () =>{
-    emit('checkedNames',checkedNames.value);
+    if(checkedNames.value != ''){
+        emit('checkedNames',checkedNames.value);
+    }
 }
 
 

src/components/voteboard/voteCardCheckList.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="list-group">
-        <label class="list-group-item">
+        <label class="list-group-item" style="cursor: pointer;">
             <input
                 class="form-check-input me-1"
                 :name="data.LOCVOTSEQ"
@@ -10,7 +10,12 @@
                 @change="handleChange"
             >
             {{ data.LOCVOTCON }}
-            <a v-if="data.LOCVOTLIK" :href="data.LOCVOTLIK.startsWith('http') ? data.LOCVOTLIK : 'http://' + data.LOCVOTLIK" target="_blank">
+            <a  :style="{ maxWidth: (data.LOCVOTLIK.length * 1) + 'ch' }"
+                v-if="data.LOCVOTLIK"
+                :href="data.LOCVOTLIK.startsWith('http') ? data.LOCVOTLIK : 'http://' + data.LOCVOTLIK"
+                class="text-truncate"
+                target="_blank"
+                rel="noopener noreferrer">
                 {{ data.LOCVOTLIK }}
             </a>
         </label>
@@ -40,7 +45,6 @@ const emit = defineEmits(["update:selectedValues"]);
 const handleChange = (event) => {
     const value = event.target.value;
     let updatedValues = [];
-
     // 체크박스일 때 여러 개 선택 가능
     if (props.multiIs === "1") {
         updatedValues = event.target.checked
@@ -52,8 +56,17 @@ const handleChange = (event) => {
     }
     emit("update:selectedValues", updatedValues);
 };
+const preventLinkMove = (event) =>{
+    event.preventDefault();
+}
 </script>
 
 <style>
-
+a {
+    display: block; /* 링크 텍스트에만 영역 적용 */
+    max-width: 500px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 </style>

src/components/voteboard/voteCardList.vue

@@ -1,18 +1,18 @@
 <template>
-  <div>
-    <card
-    @addContents="addContents"
-    @checkedNames="checkedNames"
-    @endVoteId="endVoteId"
-    @voteEnded="voteEnded"
-    @voteDelete="voteDelete"
-    @randomList="randomList"
-    @updateVote="updateVote"
-    v-for="(item, index) in data"
-    :key="index"
-    :data="item"
-    />
-  </div>
+    <div>
+        <card
+        @addContents="addContents"
+        @checkedNames="checkedNames"
+        @endVoteId="endVoteId"
+        @voteEnded="voteEnded"
+        @voteDelete="voteDelete"
+        @randomList="randomList"
+        @updateVote="updateVote"
+        v-for="(item, index) in data"
+        :key="index"
+        :data="item"
+        />
+    </div>
 </template>
 
 <script setup>
@@ -24,7 +24,7 @@ const props = defineProps({
     },
 
 });
-const emit = defineEmits(['addContents','checkedNames','endVoteId','voteEnded','voteDelete']);
+const emit = defineEmits(['addContents','checkedNames','endVoteId','voteEnded','voteDelete','randomList']);
 const addContents = (itemList ,voteId) =>{
     emit('addContents',itemList ,voteId);
 }

src/components/voteboard/voteCompleteUserList.vue

@@ -3,7 +3,7 @@
     <ul class="list-group list-group-flush">
         <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
         <div class="d-flex flex-wrap align-items-center">
-            <ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
+            <ul class="list-unstyled users-list d-flex align-items-center avatar-group">
                 <vote-complete-user-list-card :data="data"/>
             </ul>
         </div>

src/components/voteboard/voteCompleteUserListCard.vue

@@ -7,9 +7,9 @@
     :aria-label="data.MEMBERSEQ"
     :data-bs-original-title="getTooltipTitle(data)">
         <img
-            class="rounded-circle user-avatar border border-3"
+            class="rounded-circle user-avatar border border-3 object-fit-cover"
             :src="`${baseUrl}upload/img/profile/${data.MEMBERPRF}`"
-            :style="`border-color: ${data.usercolor} !important;`"
+            :style="`border-color: ${data.usercolor} !important; width: 90%; height: 90%;`"
             @error="$event.target.src = '/img/icons/icon.png'"
             alt="user"
         />

src/components/voteboard/voteInCompleteUserList.vue

@@ -2,11 +2,11 @@
     <div class="d-flex align-items-center ">
         <ul class="list-group list-group-flush">
             <li class="list-group-item d-flex justify-content-between align-items-center flex-wrap border-top-0 p-0">
-            <div class="d-flex flex-wrap align-items-center">
-                <ul class="list-unstyled users-list d-flex align-items-center avatar-group m-0 me-2">
-                    <vote-in-complete-user-list-card :data="data" />
-                </ul>
-            </div>
+                <div class="d-flex flex-wrap align-items-center">
+                    <ul class="list-unstyled users-list d-flex align-items-center avatar-group ">
+                        <vote-in-complete-user-list-card :data="data" />
+                    </ul>
+                </div>
             </li>
         </ul>
     </div>

src/components/voteboard/voteInCompleteUserListCard.vue

@@ -6,13 +6,13 @@
     class="avatar pull-up"
     :aria-label="data.MEMBERSEQ"
     :data-bs-original-title="getTooltipTitle(data)">
-    <img
-        class="rounded-circle user-avatar border border-3"
-        :src="`${baseUrl}upload/img/profile/${data.MEMBERPRF}`"
-        :style="`border-color: ${data.usercolor} !important;`"
-        @error="$event.target.src = '/img/icons/icon.png'"
-        alt="user"
-    />
+        <img
+            class="rounded-circle user-avatar border border-3 object-fit-cover"
+            :src="`${baseUrl}upload/img/profile/${data.MEMBERPRF}`"
+            :style="`border-color: ${data.usercolor} !important;  width: 90%; height: 90%;`"
+            @error="$event.target.src = '/img/icons/icon.png'"
+            alt="user"
+        />
     </li>
 </template>
 

src/components/voteboard/voteLinkInput.vue

@@ -1,33 +1,34 @@
 <template>
-<div class="d-flex align-items-center">
+<div class="mb-2 row">
     <!-- 링크 아이콘 -->
-    <i class="bx bx-link-alt me-2" @click="togglePopover"></i>
-
+    <label for="name" class="col-md-2 col-form-label">
+        <div class="d-flex align-items-center">
+            <!-- 링크 아이콘 -->
+            <i class="bx bx-link-alt me-2" @click="togglePopover"></i>
+            <!-- 등록된 링크, 입력창이 보이지 않고 등록된 링크만 보일 때 -->
+            <span v-if="isLinkSaved && !isPopoverVisible" class="ms-2">
+                <a :href="formattedLink" class="d-inline-block text-truncate" target="_blank" rel="noopener noreferrer">
+                    {{ link }}
+                </a>
+            </span>
+        </div>
+    </label>
     <!-- 링크 입력창 (옆으로 나오게) -->
-    <div
-    v-if="isPopoverVisible"
-    class="popover-container d-flex align-items-center"
-    >
-    <input
-        v-model="link"
-        placeholder="URL을 입력해주세요"
-        class="form-control me-2"
-        style="min-width: 200px;"
-    />
-    <save-btn class="btn-sm" @click="saveLink"/>
-
+    <div v-if="isPopoverVisible" class="col-md-10">
+        <div class="d-flex align-items-center">
+            <input
+                v-model="link"
+                placeholder="URL을 입력해주세요"
+                class="form-control me-2"
+            />
+            <save-btn class="btn-icon" @click="saveLink"/>
+        </div>
     </div>
-
-    <!-- 등록된 링크, 입력창이 보이지 않고 등록된 링크만 보일 때 -->
-    <span v-if="isLinkSaved && !isPopoverVisible" class="ms-2">
-    <a :href="formattedLink" target="_blank" rel="noopener noreferrer">{{ link }}</a>
-    </span>
 </div>
 </template>
 
 <script setup>
 import SaveBtn from '@c/button/SaveBtn.vue'
-
 import { ref, computed } from "vue";
 
 const props = defineProps({
@@ -60,4 +61,10 @@ display: flex;
 align-items: center;
 gap: 8px; /* 아이콘과 입력창 간격 조정 */
 }
+a {
+  max-width: 500px; /* 원하는 너비로 조정 */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 </style>

src/components/voteboard/voteResultCard.vue

@@ -1,19 +1,19 @@
 <template>
     <div>
-    <ul class="timeline mb-0">
-        <li class="timeline-item ps-6 ">
-        <span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
-            <i class="icon-base bx bx-check-circle"></i>
-        </span>
-        <div class="timeline-event ps-1">
-            <div class="timeline-header">
-            <small class="text-primary text-uppercase">투표결과</small>
-            </div>
-            <h6  v-if="data" class="my-50">{{ data[0].LOCVOTCON }}</h6>
-            <h6  v-if="randomResultNum" class="my-50">{{randomResultNum }}</h6>
-        </div>
-        </li>
-    </ul>
+        <ul class="timeline mb-0">
+            <li class="timeline-item ps-6 ">
+                <span class="timeline-indicator-advanced timeline-indicator-primary border-0 shadow-none">
+                    <i class="icon-base bx bx-check-circle"></i>
+                </span>
+                <div class="timeline-event ps-1">
+                    <div class="timeline-header">
+                    <small class="text-primary text-uppercase">투표결과</small>
+                    </div>
+                    <h6  v-if="data" class="my-50">{{ data[0].LOCVOTCON }}</h6>
+                    <h6  v-if="randomResultNum" class="my-50">{{randomResultNum }}</h6>
+                </div>
+            </li>
+        </ul>
     </div>
 </template>
 

src/components/voteboard/voteResultList.vue

@@ -1,11 +1,11 @@
 <template>
     <div class="card mb-6 border border-2 border-primary rounded primary-shadow">
         <div class="card-body">
-        <!-- 1위가 여러개일때  -->
-        <vote-result-random v-if="topVoters.length > 1" :data="topVoters" :randomResultNum="randomResultNum"
-        @randomList="randomList"/>
-        <!-- 1위가 하나일때-->
-        <vote-result-card v-if="topVoters.length == 1" :data="topVoters"/>
+            <!-- 1위가 여러개일때  -->
+            <vote-result-random v-if="topVoters.length > 1" :data="topVoters" :randomResultNum="randomResultNum" :locvotreg="locvotreg"
+            @randomList="randomList"/>
+            <!-- 1위가 하나일때-->
+            <vote-result-card v-if="topVoters.length == 1" :data="topVoters"/>
         </div>
     </div>
 </template>
@@ -24,6 +24,10 @@ const props = defineProps({
         type: String,
         required: false,
     },
+    locvotreg: {
+        type: Number,
+        required: false,
+    },
 });
  // 가장 많은 투표를 받은 항목들 (1위)
 const topVoters = computed(() => {

src/components/voteboard/voteResultRandom.vue

@@ -1,24 +1,22 @@
 <template>
     <div v-if="!isRandom && !randomResultNum">
-    <h6><i class="icon-base bx bx-error icon-lg link-warning"></i> 1위가 중복 되었습니다</h6>
-    <!-- 중복된 1위 리스트 -->
-    <vote-result-random-list
-    v-for="(item,index) in data"
-    :key="index"
-    :data="item"
-    :randomResultNum="randomResultNum"/>
+        <h6><i class="icon-base bx bx-error icon-lg link-warning"></i> 1위가 중복 되었습니다</h6>
+        <!-- 중복된 1위 리스트 -->
+        <vote-result-random-list
+        v-for="(item,index) in data"
+        :key="index"
+        :data="item"
+        :randomResultNum="randomResultNum"/>
     </div>
     <div v-if="isRandom === false && randomResultNum">
         <vote-result-card  :randomResultNum="randomResultNum"/>
     </div>
-
     <button v-if="isRandom" class="btn btn-primary" type="button" disabled="">
         <span class="spinner-grow me-1" role="status" aria-hidden="true"></span>
         random..
     </button>
-    <div class="d-grid w-100 mt-6">
-    <button v-if="!isRandom && !randomResultNum" @click="randomList" class="btn btn-primary"><i class='bx bx-sync'></i></button>
-
+    <div class="d-grid w-100 mt-6"  v-if="userStore.user.id === locvotreg">
+        <button v-if="!isRandom && !randomResultNum" @click="randomList" class="btn btn-primary"><i class='bx bx-sync'></i></button>
     </div>
 </template>
 
@@ -26,6 +24,7 @@
 import voteResultRandomList from "@c/voteboard/voteResultRandomList.vue"
 import voteResultCard from '@c/voteboard/voteResultCard.vue';
 import { ref, watch } from "vue";
+import { useUserInfoStore } from "@s/useUserInfoStore";
 const emit = defineEmits(['randomList']);
 const props = defineProps({
     data: {
@@ -36,7 +35,12 @@ const props = defineProps({
         type: String,
         required: false,
     },
+    locvotreg: {
+        type: Number,
+        required: false,
+    },
 });
+const userStore = useUserInfoStore();
 const isRandom = ref(false);
 const randomList = () =>{
     isRandom.value = true;

src/components/voteboard/voteUserList.vue

@@ -1,8 +1,8 @@
 <template>
-<div class="d-flex align-items-center">
+<div class="d-flex align-items-start mt-3">
     <!--투표한 사람 목록 -->
-    <div class="d-flex align-items-center gap-2">
-        <i class='bx bxs-user-check link-info'></i>
+    <div class="d-flex align-items-center gap-2 flex-wrap">
+        <i class='bx bxs-user-check link-info fa-2x'></i>
         <vote-complete-user-list
         v-for="(item, index) in voetedUsers"
         :key="index"
@@ -10,8 +10,8 @@
         />
     </div>
     <!-- 투표안한 사람 목록 -->
-    <div class="d-flex align-items-center gap-2 ms-auto">
-        <i class='bx bxs-user-x link-danger'></i>
+    <div class="d-flex align-items-center gap-2 ms-auto flex-wrap">
+        <i class='bx bxs-user-x link-danger fa-2x'></i>
         <vote-in-complete-user-list
         v-for="(item, index) in noVoetedUsers"
         :key="index"

src/components/wordDict/DictAlphabetFilter.vue

@@ -1,56 +1,121 @@
 <template>
-    <div>
-        <ul class="alphabet-list list-unstyled d-flex flex-wrap mb-0">
-            <li v-for="char in koreanChars" :key="char" class="mt-2 me-2">
+    <!-- <ul class="d-flex p-0 mb-0 flex-wrap">
+        <li class="d-flex">
+            <button
+                type="button"
+                class="alphabet-btn"
+                :class="{ active: selectedAl === 'all' }"
+                @click="selectAlphabet('all')"
+            > 전체 ({{ totalCount }})
+            </button>
+        </li>
+    </ul> -->
+    <div v-for="(group, groupIndex) in chunkedKoreanChars" :key="'ko-group-' + groupIndex">
+        <ul class="d-flex p-0 mb-0">
+            <li v-for="(char, index) in group" :key="char.CHARACTER_" class="d-flex">
                 <button
                     type="button"
-                    class="btn"
-                    :class="selectedAlphabet === char ? 'btn-primary' : 'btn-outline-primary'"
-                    @click="selectAlphabet(char)"
+                    class="alphabet-btn"
+                    :class="{ active: selectedAl === char.CHARACTER_ }"
+                    @click="selectAlphabet(char.CHARACTER_)"
                 >
-                    {{ char }}
+                    {{ char.CHARACTER_ }} ({{ char.COUNT }})
                 </button>
+                <span v-if="index !== group.length - 1" class="divider">|</span>
             </li>
         </ul>
-        <ul class="alphabet-list list-unstyled d-flex flex-wrap mb-0">
-            <li v-for="char in englishChars" :key="char" class="mt-2 me-2">
+    </div>
+    <div v-for="(group, groupIndex) in chunkedEnglishChars" :key="'en-group-' + groupIndex">
+        <ul class="d-flex p-0 mb-0">
+            <li v-for="(char, index) in group" :key="char.CHARACTER_" class="d-flex">
                 <button
                     type="button"
-                    class="btn"
-                    :class="selectedAlphabet === char ? 'btn-primary' : 'btn-outline-primary'"
-                    @click="selectAlphabet(char)"
+                    class="alphabet-btn"
+                    :class="{ active: selectedAl === char.CHARACTER_ }"
+                    @click="selectAlphabet(char.CHARACTER_)"
                 >
-                    {{ char }}
+                    {{ char.CHARACTER_ }} ({{ char.COUNT }})
                 </button>
+                <span v-if="index !== group.length - 1" class="divider">|</span>
             </li>
         </ul>
     </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 
-const koreanChars = ['ㄱ', 'ㄴ', 'ㄷ', 'ㄹ', 'ㅁ', 'ㅂ', 'ㅅ', 'ㅇ', 'ㅈ', 'ㅊ', 'ㅋ', 'ㅌ', 'ㅍ', 'ㅎ'];
-const englishChars = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
+const props = defineProps({
+    indexCategory: {
+        type: Array,
+        required: true,
+    },
+    selectedAl: {
+        type: String,
+        default: '',
+        required: false,
+    },
+});
+
+const selectedAlphabet = ref(props.selectedAl);
+const totalCount = computed(() => {
+    return props.indexCategory.reduce((sum, item) => sum + item.COUNT, 0);
+});
+
+const chunkArray = (arr, size) => {
+    return arr.reduce((acc, _, i) => {
+        if (i % size === 0) acc.push(arr.slice(i, i + size));
+        return acc;
+    }, []);
+};
+
+const koreanChars = computed(() => {
+    return props.indexCategory.filter(char => /[ㄱ-ㅎ가-힣]/.test(char.CHARACTER_));
+});
+const englishChars = computed(() => {
+    return props.indexCategory.filter(char => /^[a-zA-Z]$/.test(char.CHARACTER_));
+});
+
+const chunkedKoreanChars = computed(() => chunkArray(koreanChars.value, 5));
+const chunkedEnglishChars = computed(() => chunkArray(englishChars.value, 5));
 
-const selectedAlphabet = ref(null);
-//emit정의
 const emit = defineEmits();
 const selectAlphabet = (alphabet) => {
     selectedAlphabet.value = selectedAlphabet.value === alphabet ? null : alphabet;
-    emit('update:data',selectedAlphabet.value);
+    emit('update:data', selectedAlphabet.value);
 };
 </script>
 
 <style scoped>
-.btn {
-    min-width: 56px;
+.alphabet-btn {
+    background: none;
+    border: none;
+    font-size: 13px;
+    font-weight: bold;
+    color: #6c757d;
+    cursor: pointer;
+    width: 70%;
+    height: 40px;
+    transition: color 0.3s ease, font-size 0.3s ease; /* Smooth transition for color */
 }
 
-@media (max-width: 768px) {
-    .alphabet-list {
-        overflow-x: scroll;
-        flex-wrap: nowrap !important;
-    }
+.alphabet-btn:hover {
+    color: #0d6efd;
+}
+
+.alphabet-btn.active {
+    color: #0d6efd;
+    text-decoration: underline;
+    font-size: 13px; /* Keep font size fixed in active state */
+}
+
+.divider {
+    color: #bbb;
+    font-size: 14px;
+    font-weight: bold;
+}
+
+.flex-wrap {
+    flex-wrap: wrap;
 }
 </style>

src/components/wordDict/DictCard.vue

@@ -1,5 +1,5 @@
 <template>
-    <li class="mt-5 card p-5">
+    <li class="card p-4 mb-2">
         <DictWrite
             v-if="writeStore.isItemActive(item.WRDDICSEQ)"
             @close="writeStore.closeAll();"
@@ -9,63 +9,60 @@
             :formValue="item.WRDDICCAT"
             :titleValue="item.WRDDICTTL"
             :contentValue="item.WRDDICCON"
-            :isDisabled="userStore.user.role !== 'ROLE_ADMIN'"
-        />
-
+            :isDisabled="true"
+            :showEditBtn="true"
+            @toggleEdit="toggleEdit"
+            />
         <div v-else>
-            <input 
-                v-if="userStore.user.role == 'ROLE_ADMIN'"
-                type="checkbox" 
-                class="form-check-input admin-chk"
-                :name="item.WRDDICSEQ" 
-                @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>
+            <div class="d-flex align-items-center justify-content-between">
+                <div class="d-flex align-items-center">
+                    <span class="btn btn-primary pe-none m-2"
+                    style="writing-mode: horizontal-tb;">{{ item.category }}</span>
+                        {{ item.WRDDICTTL }}
                 </div>
+                <EditBtn
+                    @click="toggleEdit"
+                    :isToggleEnabled="true"
+                    :isActive="writeStore.isItemActive(item.WRDDICSEQ)"
+                />
             </div>
             <p class="mt-5 dict-content-wrap" v-html="$common.contentToHtml(item.WRDDICCON)"></p>
-            <div 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
-                            class="rounded-circle user-avatar"
-                            :src="getProfileImage(item.author.profileImage)"
-                            alt="최초 작성자"
-                            :style="{ borderColor: item.author.color}"
-                            @error="setDefaultImage"
-                        />
+            <div class="d-flex align-items-start">
+            <!-- 최초 작성자 -->
+                <div class="d-flex flex-wrap align-items-center me-4">
+                    <div class="avatar me-2">
+                    <img
+                        class="rounded-circle user-avatar object-fit-cover"
+                        :src="getProfileImage(item.author.profileImage)"
+                        alt="최초 작성자"
+                        :style="{ borderColor: item.author.color }"
+                        @error="setDefaultImage"
+                    />
                     </div>
                     <div>
-                        <p class="mb-0 small fw-medium">{{ $common.dateFormatter(item.author.createdAt) }}</p>
+                    <p class="mb-0 small fw-medium">{{ $common.dateFormatter(item.author.createdAt) }}</p>
                     </div>
                 </div>
-            </div>
-            <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
-                            class="rounded-circle user-avatar"
-                            :src="getProfileImage(item.lastEditor.profileImage)"
-                            alt="최근 작성자"
-                            :style="{ borderColor: item.lastEditor.color}"
-                            @error="setDefaultImage"
-                        />
-                    </div>
-                    <div>
-                        <p class="mb-0 small fw-medium">{{ $common.dateFormatter(item.lastEditor.updatedAt) }}</p>
-                    </div>
-                </div>
-            </div>
-        </div>
 
-        <div class="edit-btn" v-if="userStore.user.role !== 'ROLE_ADMIN'">
-            <EditBtn ref="writeButton" @click="writeStore.toggleItem(item.WRDDICSEQ)" :isToggleEnabled="true"/>
+                <!-- 최근 작성자 (조건부) -->
+                <div
+                    v-if="item.author.createdAt !== item.lastEditor.updatedAt"
+                    class="d-flex flex-wrap align-items-center"
+                >
+                    <div class="avatar me-2">
+                    <img
+                        class="rounded-circle user-avatar object-fit-cover"
+                        :src="getProfileImage(item.lastEditor.profileImage)"
+                        alt="최근 작성자"
+                        :style="{ borderColor: item.lastEditor.color }"
+                        @error="setDefaultImage"
+                    />
+                    </div>
+                    <div>
+                    <p class="mb-0 small fw-medium">{{ $common.dateFormatter(item.lastEditor.updatedAt) }}</p>
+                    </div>
+                </div>
+            </div>
         </div>
     </li>
 </template>
@@ -73,7 +70,7 @@
 <script setup>
 import axios from "@api";
 import { useToastStore } from '@s/toastStore';
-import { getCurrentInstance, ref } from 'vue';
+import { getCurrentInstance, nextTick, ref } from 'vue';
 import EditBtn from '@/components/button/EditBtn.vue';
 import $api from '@api';
 import DictWrite from './DictWrite.vue';
@@ -124,12 +121,12 @@ const editWord = (data) => {
     })
     .then((res) => {
         if (res.data.data === 1) {
-            toastStore.onToast('✅ 용어가 수정되었습니다.', 's');
+            toastStore.onToast('용어가 수정되었습니다.', 's');
             writeStore.closeAll();
             if (writeButton.value) {
                 writeButton.value.resetButton();
             }
-            emit('refreshWordList');
+            emit('refreshWordList',data.category);
         } else {
             console.warn('⚠️ 서버 응답이 예상과 다릅니다:', res.data);
             toastStore.onToast('용어 수정이 정상적으로 처리되지 않았습니다.', 'e');
@@ -154,11 +151,10 @@ const setDefaultImage = (event) => {
     event.target.src = defaultProfile;
 };
 
-
-// 체크 상태 변경 시 부모로 전달
-const toggleCheck = (event) => {
-    emit('updateChecked', event.target.checked, props.item.WRDDICSEQ, event.target.name);
+const toggleEdit = async () => {
+    writeStore.toggleItem(props.item.WRDDICSEQ);
 };
+
 </script>
 
 <style scoped>
@@ -168,7 +164,6 @@ const toggleCheck = (event) => {
 
 .user-avatar {
     border: 3px solid;
-    padding: 0.1px;
 }
 
 .edit-btn {
@@ -183,4 +178,21 @@ const toggleCheck = (event) => {
     top: -0.5rem;
     --bs-form-check-bg: #fff;
 }
+.btn.btn-primary {
+    writing-mode: horizontal-tb;
+}
+.dict-content-wrap {
+    max-width: 100%;
+    overflow-x: auto;
+    word-break: break-word;
+    word-wrap: break-word;
+    white-space: normal;
+    box-sizing: border-box;
+}
+.dict-content-wrap * {
+    max-width: 100% !important;
+    box-sizing: border-box !important;
+    word-break: break-word;
+    white-space: normal !important;
+}
 </style>

src/components/wordDict/DictWrite.vue

@@ -1,37 +1,42 @@
 <template>
-    <div>
-        <div class="row">
-            <div class="col-10">
-                <FormSelect
-                    name="cate"
-                    title="카테고리 선택"
-                    :data="dataList"
-                    :is-common="true"
-                    @update:data="selectCategory = $event"
-                    @change="onChange"
-                    :value="formValue"
-                    :disabled="isDisabled"
-                />
+    <div v-if="dataList.length > 0" >
+        <FormSelect
+            name="cate"
+            title="카테고리"
+            :data="dataList"
+            :is-common="true"
+            @update:data="selectCategory = $event"
+            @change="onChange"
+            :value="formValue"
+            :is-essential="false"
+            :is-btn="true"
+        >
+        <template v-slot:append>
+            <div>
+                <PlusBtn v-if="!showInput && !isDisabled" @click="toggleInput"/>
+                <EditBtn
+                        v-if="showEditBtn"
+                        @click="$emit('toggleEdit')"
+                        :isToggleEnabled="true"
+                        :isActive="writeStore.isItemActive(NumValue)"
+                    />
             </div>
-            <div class="col-2 btn-margin" v-if="!isDisabled">
-                <PlusBtn @click="toggleInput" />
-            </div>
-        </div>
-
-        <div class="row" v-if="showInput">
-            <div class="col-10">
-                <FormInput
-                    ref="categoryInputRef"
-                    title="카테고리 입력"
-                    name="카테고리"
-                    @update:modelValue="addCategory = $event"
-                    :is-cate-alert="addCategoryAlert"
-                    @focusout="handleCategoryFocusout(addCategory)"
-                />
-            </div>
-        </div>
+        </template>
+        </FormSelect>
+    </div>
+    <div v-if="dataList.length === 0 || showInput">
+        <FormInput
+            class="justify-content-end"
+            ref="categoryInputRef"
+            title="새 카테고리"
+            :isLabel="dataList.length === 0 ?true : false"
+            name="새 카테고리"
+            @update:modelValue="addCategory = $event"
+            :is-cate-alert="addCategoryAlert"
+            @focusout="handleCategoryFocusout(addCategory)"
+
+        />
     </div>
-    <div class="dict-w">
         <FormInput
             title="용어"
             type="text"
@@ -41,171 +46,197 @@
             :modelValue="titleValue"
             @update:modelValue="wordTitle = $event"
             :disabled="isDisabled"
+            @keyup="ValidHandler('title')"
         />
-    </div>
-    <div>
-        <QEditor
-            @update:data="content = $event"
-            @update:imageUrls="imageUrls = $event"
-            :is-alert="wordContentAlert"
-            :initialData="contentValue"
-        />
-        <div class="text-end mt-5">
-            <button class="btn btn-primary" @click="saveWord">
-                <i class="bx bx-check"></i>
-            </button>
+        <div>
+            <QEditor   class="q-editor-container"  @keyup="ValidHandler('content')"  @update:data="handleContentUpdate" @update:imageUrls="imageUrls = $event"  :is-alert="wordContentAlert" :initialData="contentValue"/>
+            <div class="text-end mt-5">
+                <button class="btn btn-primary" @click="saveWord" :disabled="titleValue ? !changed : false">
+                    <i class="bx bx-check"></i>
+                </button>
+            </div>
         </div>
-    </div>
 </template>
 
 <script setup>
-    import { defineProps, computed, ref, defineEmits } from 'vue';
+import { defineProps, computed, ref, defineEmits } from 'vue';
 
-    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 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 EditBtn from '../button/EditBtn.vue';
+import { useWriteVisibleStore } from '@s/writeVisible';
+const props = defineProps({
+    dataList: {
+        type: Array,
+        default: () => []
+    },
+    NumValue : {
+        type: Number
+    },
+    formValue : {
+        type:[String, Number]
+    },
+    titleValue : {
+        type:String,
+    },contentValue : {
+        type:String,
+    },
+    isDisabled: {
+        type: Boolean,
+        default: false
+    },
+    showEditBtn: {
+        type: Boolean,
+        default: false
+    }
+});
 
-    const emit = defineEmits(['close', 'addCategory', 'addWord']);
+const writeStore = useWriteVisibleStore();
 
-    //용어제목
-    const wordTitle = ref('');
-    const addCategory = ref('');
-    const content = ref('');
-    const imageUrls = ref([]);
+const emit = defineEmits(['close','addCategory','addWord', 'toggleEdit']);
 
-    //용어 Vaildation용
-    const wordTitleAlert = ref(false);
-    const wordContentAlert = ref(false);
-    const addCategoryAlert = ref(false);
+//용어제목
+const wordTitle = ref('');
+const addCategory = ref('');
+const content = ref('');
+const imageUrls = ref([]);
+//용어 Vaildation용
+const wordTitleAlert = ref(false);
+const wordContentAlert = ref(false);
+const addCategoryAlert = ref(false);
+const  changed = ref(false);
+//선택 카테고리
+const selectCategory = ref('');
 
-    //선택 카테고리
-    const selectCategory = ref('');
+// 제목 상태
+const computedTitle = computed(() =>
+    wordTitle.value === '' ? props.titleValue : wordTitle.value
+);
 
-    // 제목 상태
-    const computedTitle = computed(() => (wordTitle.value === '' ? props.titleValue : wordTitle.value));
+// 카테고리 상태
+const selectedCategory = computed(() =>
+    selectCategory.value === '' ? props.formValue : selectCategory.value
 
-    // 카테고리 상태
-    const selectedCategory = computed(() => (selectCategory.value === '' ? props.formValue : selectCategory.value));
+);
 
-    // 카테고리 입력 중복 ref
-    const categoryInputRef = ref(null);
+// 카테고리 입력 중복 ref
+const categoryInputRef = ref(null);
 
-    const props = defineProps({
-        dataList: {
-            type: Array,
-            default: () => [],
-        },
-        NumValue: {
-            type: Number,
-        },
-        formValue: {
-            type: [String, Number],
-        },
-        titleValue: {
-            type: String,
-        },
-        contentValue: {
-            type: String,
-        },
-        isDisabled: {
-            type: Boolean,
-            default: false,
-        },
-    });
 
-    // 카테고리 입력 창
-    const showInput = ref(false);
+// 카테고리 입력 창
+const showInput = ref(false);
 
-    // 카테고리 입력 토글
-    const toggleInput = () => {
-        showInput.value = !showInput.value;
+// 카테고리 입력 토글
+const toggleInput = () => {
+    showInput.value = !showInput.value;
+};
+
+const onChange = (newValue) => {
+    selectCategory.value = newValue.target.value;
+    changed.value = true;
+};
+
+const ValidHandler = (field) => {
+    if(field == 'title'){
+        wordTitleAlert.value = false;
+    }
+    if(field == 'content'){
+        wordContentAlert.value = false;
+
+    }
+
+}
+const handleContentUpdate = (newContent) => {
+    content.value = newContent;
+
+    const oldContent = typeof props.contentValue === 'string'? JSON.parse(props.contentValue) : props.contentValue;
+    const newContentOps = newContent?.ops || [];
+
+    const oldContentJson = JSON.stringify(oldContent);
+    const newContentJson = JSON.stringify(newContentOps);
+
+    // 기존 데이터와 새 데이터가 다를 경우 changed = true;
+    changed.value = oldContentJson !== newContentJson;
+
+    ValidHandler("content"); // 유효성 검사 실행
+};
+
+//용어 등록
+const saveWord = () => {
+    let valid = true;
+    //validation
+    let computedTitleTrim;
+
+    if(computedTitle.value != undefined){
+        computedTitleTrim = computedTitle.value.trim()
+    }
+
+    // 용어 체크
+    if(computedTitleTrim == undefined || computedTitleTrim == ''){
+        wordTitleAlert.value = true;
+        valid = false;
+    } else {
+        wordTitleAlert.value = false;
+    }
+
+    // 내용 확인
+    let inserts = [];
+    if (inserts.length === 0 && content.value?.ops?.length > 0) {
+        inserts = content.value.ops.map(op =>
+            typeof op.insert === 'string' ? op.insert.trim() : op.insert
+        );
+    }
+    // 내용 체크
+    if(content.value == '' || inserts.join('') === ''){
+        wordContentAlert.value = true;
+        valid = false;
+    }else{
+        wordContentAlert.value = false;
+    }
+    const wordData = {
+        id: props.NumValue || null,
+        title: computedTitle.value.trim(),
+        category: selectedCategory.value,
+        content: content.value,
     };
+    if(valid){
+        emit('addWord', wordData,  addCategory.value.trim() === ''
+        ? (isNaN(selectedCategory.value) ? selectedCategory.value : Number(selectedCategory.value))
+        : addCategory.value);
+    }
+}
 
-    const onChange = newValue => {
-        selectCategory.value = newValue.target.value;
-    };
+// 카테고리 focusout 이벤트 핸들러 추가
+const handleCategoryFocusout = (value) => {
+    if (!value || value.trim() === '') {
+        return;
+    }
+    const valueTrim = value.trim();
+    const existingCategory = props.dataList.find(item => item.label === valueTrim);
 
-    //용어 등록
-    const saveWord = () => {
-        //validation
-        let computedTitleTrim;
+    if (existingCategory) {
+        addCategoryAlert.value = true;
 
-        if (computedTitle.value != undefined) {
-            computedTitleTrim = computedTitle.value.trim();
-        }
+        // 중복 시 강제 focus
+        setTimeout(() => {
+            const inputElement = categoryInputRef.value?.$el?.querySelector('input');
+            if (inputElement) {
+                inputElement.focus();
+            }
+        }, 0);
+    } else {
+        addCategoryAlert.value = false;
+    }
+};
 
-        // 용어 체크
-        if (computedTitleTrim == undefined || computedTitleTrim == '') {
-            wordTitleAlert.value = true;
-            return;
-        } else {
-            wordTitleAlert.value = false;
-        }
-
-        // 내용 확인
-        let inserts = [];
-        if (inserts.length === 0 && content.value?.ops?.length > 0) {
-            inserts = content.value.ops.map(op => (typeof op.insert === 'string' ? op.insert.trim() : op.insert));
-        }
-
-        // 내용 체크
-        if (content.value == '' || inserts.join('') === '') {
-            wordContentAlert.value = true;
-            return;
-        }
-
-        const wordData = {
-            id: props.NumValue || null,
-            title: computedTitle.value,
-            category: selectedCategory.value,
-            content: content.value,
-        };
-
-        emit('addWord', wordData, addCategory.value);
-    };
-
-    // 카테고리 focusout 이벤트 핸들러 추가
-    const handleCategoryFocusout = value => {
-        const valueTrim = value.trim();
-
-        const existingCategory = props.dataList.find(item => item.label === valueTrim);
-
-        // 카테고리 입력시 공백
-        if (valueTrim == '') {
-            addCategoryAlert.value = true;
-
-            // 공백시 강제 focus
-            setTimeout(() => {
-                const inputElement = categoryInputRef.value?.$el?.querySelector('input');
-                if (inputElement) {
-                    inputElement.focus();
-                }
-            }, 0);
-        } else if (existingCategory) {
-            addCategoryAlert.value = true;
-
-            // 중복시 강제 focus
-            setTimeout(() => {
-                const inputElement = categoryInputRef.value?.$el?.querySelector('input');
-                if (inputElement) {
-                    inputElement.focus();
-                }
-            }, 0);
-        } else {
-            addCategoryAlert.value = false;
-        }
-    };
 </script>
-
-<style scoped>
-    .dict-w {
-        width: 83%;
-    }
-
-    @media (max-width: 768px) {
-        .btn-margin {
-            margin-top: 2.5rem;
-        }
-    }
+<style>
+.q-editor-container * {
+    max-width: 100% !important;
+    word-break: break-all !important;
+    box-sizing: border-box;
+    white-space: normal !important;
+}
 </style>

src/layouts/NormalLayout.vue

@@ -23,6 +23,8 @@
 
         <!-- Drag Target Area To SlideIn Menu On Small Screens -->
         <div class="drag-target"></div>
+
+        <ScrollTopButton />
     </div>
 </template>
 <script setup>
@@ -32,6 +34,7 @@
     import TheChat from './TheChat.vue';
     import { nextTick } from 'vue';
     import { wait } from '@/common/utils';
+    import ScrollTopButton from '@c/button/ScrollTopButton.vue';
 
     window.isDarkStyle = window.Helpers.isDarkStyle();
 
@@ -48,26 +51,3 @@
         loadScript('/js/main.js');
     });
 </script>
-<style>
-    /* 중앙 콘텐츠 자동 조정 */
-    .layout-page {
-        flex-grow: 1;
-        min-width: 0; /* flexbox 내에서 올바른 크기 계산 */
-        margin-right: 20%; /* 채팅 사이드바의 너비만큼 밀리도록 설정 */
-    }
-
-    /* top bar 고정1 */
-    .layout-navbar-fixed .layout-navbar {
-        position: relative;
-        top: 0;
-        right: auto;
-        left: 0 !important;
-        width: 96% !important;
-        padding-top: 0 !important;
-    }
-
-    /* top bar 고정2 */
-    .layout-navbar-fixed .layout-wrapper:not(.layout-horizontal):not(.layout-without-menu) .layout-page {
-        padding-top: 0 !important;
-    }
-</style>

src/layouts/TheChat.vue

@@ -1,6 +1,6 @@
 <template>
     <!-- Chat Sidebar -->
-    <aside id="chat-sidebar" class="chat-sidebar">
+    <aside id="chat-sidebar" class="chat-sidebar bg-white position-fixed top-0 end-0 z-4 vh-100 menu border shadow">
     </aside>
 </template>
 
@@ -25,19 +25,8 @@ const sendMessage = () => {
 </script>
 
 <style scoped>
-/* 채팅 사이드바 고정 */
+
 .chat-sidebar {
     width: 20%;
-    height: 100vh;
-    position: fixed;
-    right: 0;
-    top: 0;
-    background: #fff;
-    border-left: 1px solid #ddd;
-    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
-    display: flex;
-    flex-direction: column;
-    z-index: 1000;
 }
-
 </style>

src/layouts/TheFooter.vue

@@ -1,17 +1,7 @@
 <template>
     <footer class="content-footer footer bg-footer-theme">
         <div class="container-xxl">
-            <div class="footer-container d-flex align-items-center justify-content-between py-4 flex-md-row flex-column">
-                <div class="text-body">
-                    ©2024
-                    <!-- <script>
-                    document.write(new Date().getFullYear())
-                    </script> -->
-                    , made with ❤️ by
-                    <a href="https://themeselection.com/" target="_blank" class="footer-link">ThemeSelection</a>
-                </div>
-                <div class="d-none d-lg-inline-block"></div>
-            </div>
+
         </div>
     </footer>
 </template>

src/layouts/TheMenu.vue

@@ -74,19 +74,32 @@
                     <div class="text-truncate">Commuters</div>
                 </RouterLink>
             </li>
-            <!-- <li class="menu-item" :class="$route.path.includes('/sample') ? 'active' : ''">
-                <RouterLink class="menu-link" to="/sample"> <i class="bi "></i>
-                    <i class="menu-icon tf-icons bx bx-calendar"></i>
-                    <div class="text-truncate">Sample</div>
+            <li v-if="userId === allowedUserId" class="menu-item" :class="$route.path.includes('/authorization') ? 'active' : ''">
+                <RouterLink class="menu-link" to="/authorization">
+                    <i class="menu-icon icon-base bx bx-user-check"></i>
+                    <div class="text-truncate">Authorization</div>
                 </RouterLink>
-            </li> -->
+            </li>
+            <li class="menu-item" :class="$route.path.includes('/people') ? 'active' : ''">
+                <RouterLink class="menu-link" to="/people"> <i class="bi "></i>
+                    <i class="menu-icon icon-base bi bi-people-fill"></i>
+                    <div class="text-truncate">people</div>
+                </RouterLink>
+            </li>
         </ul>
     </aside>
     <!-- / Menu -->
 </template>
 
 <script setup>
-    import router from '@/router';
+import { computed } from "vue";
+import { useUserInfoStore } from '@s/useUserInfoStore';
+import "bootstrap-icons/font/bootstrap-icons.css";
+
+const userStore = useUserInfoStore();
+const allowedUserId = 1;  // 특정 ID (변경필요!!)
+
+const userId = computed(() => userStore.user?.id ?? null);
 </script>
 
 <style lang="scss" scoped></style>

src/layouts/TheTop.vue

@@ -6,181 +6,87 @@
             </a>
         </div>
 
-        <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
-            <ul class="navbar-nav flex-row align-items-center ms-auto">
-                <!-- <button class="btn p-1" @click="switchToLightMode"><i class="bx bxs-sun link-warning"></i></button> -->
-                <!-- <button class="btn p-1" @click="switchToDarkMode"><i class="bx bxs-moon"></i></button> -->
+        <!-- 날씨 정보 영역 -->
+        <div class="navbar-nav align-items-center">
+            <div class="d-flex align-items-center weather-box">
+                <img v-if="weather.icon" :src="customIconUrl" :alt="weather.description" :class="customIconClass" />
+                <div class="d-flex flex-column">
+                    <span class="weather-desc">{{ weather.description }}</span>
+                    <span class="weather-temp" v-if="weatherReady">
+                        최저 {{ weather.tempMin }}° / 최고 {{ weather.tempMax }}°
+                    </span>
+                </div>
+            </div>
+        </div>
 
-                <i class="bx bx-bell bx-md bx-log-out cursor-pointer p-1" @click="handleLogout"></i>
+        <div class="d-flex align-items-center ms-auto" id="navbar-collapse">
+            <ul class="navbar-nav flex-row align-items-center ms-auto">
+                <select class="form-select py-1 cursor-pointer" id="name" v-model="selectedProject" @change="updateSelectedProject">
+                    <!-- 내가 참여하고 있는 프로젝트 그룹 -->
+                    <option v-for="item in myActiveProjects" :key="item.PROJCTSEQ" :value="item.PROJCTSEQ">
+                        {{ item.PROJCTNAM }}
+                    </option>
+                    <!-- 내가 참여하지 않는 프로젝트 그룹 -->
+                    <option v-if="otherActiveProjects.length > 0" disabled>-----------</option>
+                    <option v-for="item in otherActiveProjects" :key="item.PROJCTSEQ" :value="item.PROJCTSEQ">
+                        {{ item.PROJCTNAM }}
+                    </option>
+                </select>
+
+                <i class="cursor-pointer p-2"></i>
 
                 <!-- Notification -->
-                <li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2 p-1">
+                <li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2 p-0">
                     <a
-                        class="nav-link dropdown-toggle hide-arrow p-0"
-                        href="javascript:void(0);"
-                        data-bs-toggle="dropdown"
-                        data-bs-auto-close="outside"
-                        aria-expanded="false"
+                    class="nav-link dropdown-toggle hide-arrow p-0"
+                    href="javascript:void(0);"
+                    data-bs-toggle="dropdown"
+                    data-bs-auto-close="outside"
+                    aria-expanded="false"
                     >
-                        <span class="position-relative">
-                            <i class="bx bx-bell bx-md"></i>
-                            <span class="badge rounded-pill bg-danger badge-dot badge-notifications border"></span>
-                        </span>
+                    <span class="position-relative">
+                        <i class="bx bx-bell bx-md"></i>
+                        <!-- 알림이 있을 경우에만 뱃지를 표시 -->
+                        <span
+                        v-if="notificationCount > 0"
+                        class="badge rounded-pill bg-danger badge-dot badge-notifications border"
+                        ></span>
+                    </span>
                     </a>
                     <ul class="dropdown-menu dropdown-menu-end p-0">
-                        <li class="dropdown-menu-header border-bottom">
-                            <div class="dropdown-header d-flex align-items-center py-3">
-                                <h6 class="mb-0 me-auto">Notification</h6>
-                                <div class="d-flex align-items-center h6 mb-0">
-                                    <span class="badge bg-label-primary me-2">8 New</span>
-                                    <a
-                                        href="javascript:void(0)"
-                                        class="dropdown-notifications-all p-2"
-                                        data-bs-toggle="tooltip"
-                                        data-bs-placement="top"
-                                        title="Mark all as read"
-                                        ><i class="bx bx-envelope-open text-heading"></i
-                                    ></a>
-                                </div>
-                            </div>
-                        </li>
-                        <li class="dropdown-notifications-list scrollable-container">
-                            <ul class="list-group list-group-flush">
-                                <li class="list-group-item list-group-item-action dropdown-notifications-item">
-                                    <div class="d-flex">
-                                        <div class="flex-shrink-0 me-3">
-                                            <div class="avatar">
-                                                <img src="/img/avatars/1.png" class="rounded-circle" />
-                                            </div>
-                                        </div>
-                                        <div class="flex-grow-1">
-                                            <h6 class="small mb-0">Congratulation Lettie 🎉</h6>
-                                            <small class="mb-1 d-block text-body">Won the monthly best seller gold badge</small>
-                                            <small class="text-muted">1h ago</small>
-                                        </div>
-                                        <div class="flex-shrink-0 dropdown-notifications-actions">
-                                            <a href="javascript:void(0)" class="dropdown-notifications-read"
-                                                ><span class="badge badge-dot"></span
-                                            ></a>
-                                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                                                ><span class="bx bx-x"></span
-                                            ></a>
-                                        </div>
-                                    </div>
-                                </li>
-                                <li class="list-group-item list-group-item-action dropdown-notifications-item">
-                                    <div class="d-flex">
-                                        <div class="flex-shrink-0 me-3">
-                                            <div class="avatar">
-                                                <span class="avatar-initial rounded-circle bg-label-danger">CF</span>
-                                            </div>
-                                        </div>
-                                        <div class="flex-grow-1">
-                                            <h6 class="small mb-0">Charles Franklin</h6>
-                                            <small class="mb-1 d-block text-body">Accepted your connection</small>
-                                            <small class="text-muted">12hr ago</small>
-                                        </div>
-                                        <div class="flex-shrink-0 dropdown-notifications-actions">
-                                            <a href="javascript:void(0)" class="dropdown-notifications-read"
-                                                ><span class="badge badge-dot"></span
-                                            ></a>
-                                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                                                ><span class="bx bx-x"></span
-                                            ></a>
-                                        </div>
-                                    </div>
-                                </li>
-                                <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
-                                    <div class="d-flex">
-                                        <div class="flex-shrink-0 me-3">
-                                            <div class="avatar">
-                                                <img src="/img/avatars/2.png" class="rounded-circle" />
-                                            </div>
-                                        </div>
-                                        <div class="flex-grow-1">
-                                            <h6 class="small mb-0">New Message ✉️</h6>
-                                            <small class="mb-1 d-block text-body">You have new message from Natalie</small>
-                                            <small class="text-muted">1h ago</small>
-                                        </div>
-                                        <div class="flex-shrink-0 dropdown-notifications-actions">
-                                            <a href="javascript:void(0)" class="dropdown-notifications-read"
-                                                ><span class="badge badge-dot"></span
-                                            ></a>
-                                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                                                ><span class="bx bx-x"></span
-                                            ></a>
-                                        </div>
-                                    </div>
-                                </li>
-                                <li class="list-group-item list-group-item-action dropdown-notifications-item">
-                                    <div class="d-flex">
-                                        <div class="flex-shrink-0 me-3">
-                                            <div class="avatar">
-                                                <span class="avatar-initial rounded-circle bg-label-success"
-                                                    ><i class="bx bx-cart"></i
-                                                ></span>
-                                            </div>
-                                        </div>
-                                        <div class="flex-grow-1">
-                                            <h6 class="small mb-0">Whoo! You have new order 🛒</h6>
-                                            <small class="mb-1 d-block text-body">ACME Inc. made new order $1,154</small>
-                                            <small class="text-muted">1 day ago</small>
-                                        </div>
-                                        <div class="flex-shrink-0 dropdown-notifications-actions">
-                                            <a href="javascript:void(0)" class="dropdown-notifications-read"
-                                                ><span class="badge badge-dot"></span
-                                            ></a>
-                                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                                                ><span class="bx bx-x"></span
-                                            ></a>
-                                        </div>
-                                    </div>
-                                </li>
-                            </ul>
-                        </li>
-                        <li class="border-top">
-                            <div class="d-grid p-4">
-                                <a class="btn btn-primary btn-sm d-flex" href="javascript:void(0);">
-                                    <small class="align-middle">View all notifications</small>
-                                </a>
-                            </div>
-                        </li>
+                    <li class="dropdown-notifications-list scrollable-container p-3">
+                        <!-- 알림이 없으면 "알림이 없습니다." 메시지 표시 -->
+                        <div v-if="notificationCount === 0">
+                        알림이 없습니다.
+                        </div>
+                        <!-- 알림이 있을 때 목록 렌더링-->
+                        <div v-else>
+                        <ul>
+                            <li v-for="notification in notifications" :key="notification.id">
+                            {{ notification.text }}
+                            </li>
+                        </ul>
+                        </div>
+                    </li>
                     </ul>
                 </li>
                 <!--/ Notification -->
                 <!-- User -->
                 <li class="nav-item navbar-dropdown dropdown-user dropdown">
-                    <a class="nav-link dropdown-toggle hide-arrow p-0" href="javascript:void(0);" data-bs-toggle="dropdown">
+                    <a class="nav-link dropdown-toggle hide-arrow p-1" href="javascript:void(0);" data-bs-toggle="dropdown">
                         <img
                             v-if="user"
                             :src="`${baseUrl}upload/img/profile/${user.profile}`"
                             alt="Profile Image"
-                            class="w-px-40 h-px-40 rounded-circle"
+                            class="w-px-40 h-px-40 rounded-circle border border-3 object-fit-cover"
+                            :style="`border-color: ${user.usercolor} !important;`"
                             @error="$event.target.src = '/img/icons/icon.png'"
                         />
                     </a>
                     <ul class="dropdown-menu dropdown-menu-end">
                         <li>
-                            <a class="dropdown-item" href="pages-account-settings-account.html">
-                                <div class="d-flex">
-                                    <div class="flex-shrink-0 me-3">
-                                        <div class="avatar avatar-online">
-                                            <img src="/img/avatars/1.png" class="w-px-40 h-auto rounded-circle" />
-                                        </div>
-                                    </div>
-                                    <div class="flex-grow-1">
-                                        <h6 class="mb-0">John Doe</h6>
-                                        <small class="text-muted">Admin</small>
-                                    </div>
-                                </div>
-                            </a>
-                        </li>
-                        <li>
-                            <div class="dropdown-divider my-1"></div>
-                        </li>
-                        <li>
-                            <a class="dropdown-item" href="pages-profile-user.html">
-                                <i class="bx bx-user bx-md me-3"></i><span>My Profile</span>
+                            <a class="dropdown-item" href="javascript:void(0)" @click="goToMyPage">
+                                <i class="bx bx-user bx-md me-3"></i><span>My Page</span>
                             </a>
                         </li>
                         <li>
@@ -188,82 +94,192 @@
                                 <i class="bx bx-cog bx-md me-3"></i><span>Settings</span>
                             </a>
                         </li>
-                        <li>
-                            <a class="dropdown-item" href="pages-account-settings-billing.html">
-                                <span class="d-flex align-items-center align-middle">
-                                    <i class="flex-shrink-0 bx bx-credit-card bx-md me-3"></i
-                                    ><span class="flex-grow-1 align-middle">Billing Plan</span>
-                                    <span class="flex-shrink-0 badge rounded-pill bg-danger">4</span>
-                                </span>
-                            </a>
-                        </li>
                         <li>
                             <div class="dropdown-divider my-1"></div>
                         </li>
                         <li>
-                            <a class="dropdown-item" href="pages-pricing.html">
-                                <i class="bx bx-dollar bx-md me-3"></i><span>Pricing</span>
-                            </a>
-                        </li>
-                        <li>
-                            <a class="dropdown-item" href="pages-faq.html">
-                                <i class="bx bx-help-circle bx-md me-3"></i><span>FAQ</span>
-                            </a>
-                        </li>
-                        <li>
-                            <div class="dropdown-divider my-1"></div>
-                        </li>
-                        <li>
-                            <a class="dropdown-item" href="auth-login-cover.html" target="_blank">
+                            <a class="dropdown-item" @click="handleLogout" target="_blank">
                                 <i class="bx bx-power-off bx-md me-3"></i><span>Log Out</span>
                             </a>
                         </li>
                     </ul>
                 </li>
-                <!--/ User -->
             </ul>
         </div>
-
-        <!-- Search Small Screens -->
-        <div class="navbar-search-wrapper search-input-wrapper d-none">
-            <input type="text" class="form-control search-input container-xxl border-0" placeholder="Search..." aria-label="Search..." />
-            <i class="bx bx-x bx-md search-toggler cursor-pointer"></i>
-        </div>
     </nav>
 </template>
 <script setup>
     import { useAuthStore } from '@s/useAuthStore';
     import { useUserInfoStore } from '@/stores/useUserInfoStore';
-    import { useRouter } from 'vue-router';
+    import { useProjectStore } from '@/stores/useProjectStore';
+    import { useRouter, useRoute } from 'vue-router';
     import { useThemeStore } from '@s/darkmode';
-    import { onMounted, ref } from 'vue';
-    import $api from '@api';
+    import { useWeatherStore } from '@/stores/useWeatherStore';
+    import { computed, onMounted, ref, watch } from 'vue';
+    import axios from '@api';
 
-    const user = ref(null);
-    //const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
     const baseUrl = import.meta.env.VITE_SERVER;
 
     const authStore = useAuthStore();
     const userStore = useUserInfoStore();
+    const projectStore = useProjectStore();
     const router = useRouter();
+    const route = useRoute();
+    const weatherStore = useWeatherStore();
 
-    const { isDarkMode, switchToDarkMode, switchToLightMode } = useThemeStore();
+    const user = ref(null);
+    const selectedProject = ref(null);
+    const weather = ref({});
+    const dailyWeatherList = ref([]);
+    const notifications = ref([]);
+    const notificationCount = ref(0);
 
-    onMounted(async () => {
-        if (isDarkMode) {
-            switchToDarkMode();
-        } else {
-            switchToLightMode();
-        }
-
-        await userStore.userInfo();
-        user.value = userStore.user;
+    const weatherReady = computed(() => {
+        return (
+            weather.value &&
+            weather.value.tempMin !== null &&
+            weather.value.tempMax !== null &&
+            !!weather.value.description
+        );
     });
 
+    // 내가 참여하고 있는 진행 중인 프로젝트 목록
+    const myActiveProjects = computed(() => {
+        return projectStore.activeMemberProjectList || [];
+    });
+
+    // 내가 참여하고 있지 않은 진행 중인 프로젝트 목록
+    const otherActiveProjects = computed(() => {
+        if (!projectStore.activeProjectList) return [];
+
+        // 내 프로젝트 ID 목록
+        const myProjectIds = myActiveProjects.value.map(p => p.PROJCTSEQ);
+
+        // 내 프로젝트가 아닌 프로젝트만 필터링
+        return projectStore.activeProjectList.filter(p => !myProjectIds.includes(p.PROJCTSEQ));
+    });
+
+    // 프로젝트 선택 변경 시 스토어에 저장
+    const updateSelectedProject = () => {
+        if (!selectedProject.value) return;
+
+        // 모든 진행 중인 프로젝트 리스트에서 선택된 프로젝트 찾기
+        let selected = projectStore.activeProjectList.find(project => project.PROJCTSEQ === selectedProject.value);
+
+        if (selected) {
+            projectStore.setSelectedProject(selected);
+        }
+    };
+
+    // 선택된 프로젝트 변경 감지
+    watch(
+        () => projectStore.selectedProject,
+        newProject => {
+            if (newProject) {
+                selectedProject.value = newProject.PROJCTSEQ;
+            }
+        },
+    );
+
+    const customIconUrl = computed(() => {
+        if (weather.value.icon === '01d' || weather.value.icon === '01n') {
+            return '/img/icons/sunny-custom.png';
+        }
+        return `https://openweathermap.org/img/wn/${weather.value.icon}@2x.png`;
+    });
+
+    const customIconClass = computed(() => {
+        if (weather.value.icon === '01d' || weather.value.icon === '01n') {
+            return 'custom-sunny-icon';
+        }
+        return 'weather-icon';
+    });
+
+    // const { isDarkMode, switchToDarkMode, switchToLightMode } = useThemeStore();
+
     const handleLogout = async () => {
         await authStore.logout();
         router.push('/login');
     };
+
+    const goToMyPage = () => {
+        router.push('/mypage');
+    };
+
+    onMounted(async () => {
+        // if (isDarkMode) {
+        //     switchToDarkMode();
+        // } else {
+        //     switchToLightMode();
+        // }
+
+        await userStore.userInfo();
+        user.value = userStore.user;
+
+        await projectStore.loadAllProjectLists();
+
+        // 사용자가 참여하고 있는 프로젝트 목록
+        await projectStore.getMemberProjects();
+
+        if (myActiveProjects.value.length > 0) {
+            const firstProject = myActiveProjects.value[0];
+            selectedProject.value = firstProject.PROJCTSEQ;
+            projectStore.setSelectedProject(firstProject);
+        }
+
+        // 로그인 페이지가 아닐 때만 날씨 정보를 가져오도록
+        if (route.name !== 'login' && route.name !== undefined) {
+            // 날씨 정보 갱신
+            await weatherStore.getWeatherInfoWithCache();
+            weather.value = weatherStore.weather; // 오늘 날씨
+            dailyWeatherList.value = weatherStore.dailyWeatherList; // 주간 날씨
+        }
+    });
 </script>
 <style scoped>
+    .weather-icon {
+        width: 40%;
+        height: 40%;
+    }
+    .weather-desc {
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 1.6;
+    }
+    .weather-temp {
+        font-size: 13px;
+        color: #888;
+        line-height: 1.2;
+    }
+    /* .weather-box {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        max-width: 3000px;
+        white-space: nowrap;
+        overflow: hidden;
+    } */
+    .custom-sunny-icon {
+        width: 50px;
+        height: 50px;
+        object-fit: contain;
+        flex-shrink: 0;
+    }
+    .weather-box {
+        display: flex;
+        align-items: center;
+        white-space: nowrap;
+        gap: 10px;
+        min-width: 160px; /* 필요시 */
+    }
+    @media (max-width: 1200px) {
+        .custom-sunny-icon {
+            width: 40px;
+        }
+    }
+    @media (max-width: 1100px) {
+        .custom-sunny-icon {
+            width: 30px;
+        }
+    }
 </style>

src/main.js

@@ -1,31 +1,31 @@
-import { createApp } from 'vue'
-import { createPinia } from 'pinia'
-import piniaPersist from 'pinia-plugin-persist'
-import App from './App.vue'
-import router from '@/router'
-import dayjs from '@p/dayjs'
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import piniaPersist from 'pinia-plugin-persist';
+import App from './App.vue';
+import router from '@/router';
+import dayjs from '@p/dayjs';
 import ToastModal from '@c/modal/ToastModal.vue';
-import common from '@/common/common.js'
-import { useKakao } from 'vue3-kakao-maps/@utils'
+import common from '@/common/common.js';
+import { useKakao } from 'vue3-kakao-maps/@utils';
 
-const pinia = createPinia()
-pinia.use(piniaPersist)
+const pinia = createPinia();
+pinia.use(piniaPersist);
 
 const kakaoApiKey = import.meta.env.VITE_KAKAO_MAP_KEY;
 
-useKakao(kakaoApiKey, ['services'])
+useKakao(kakaoApiKey, ['services']);
 
-const app = createApp(App)
-app.use(router)
-    .use(pinia)
-    .use(common)
-    .use(dayjs)
-    .component('ToastModal',ToastModal)
-    .mount('#app')
+const app = createApp(App);
+app.use(router).use(pinia).use(common).use(dayjs).component('ToastModal', ToastModal);
 
-if (import.meta.env.MODE === "prod") {
+// 라우트 로딩 후 앱 마우트
+router.isReady().then(() => {
+    app.mount('#app');
+});
+
+if (import.meta.env.MODE === 'prod') {
     const console = window.console || {};
-    console.log = function no_console() { }; // console log 막기
-    console.warn = function no_console() { }; // console warning 막기
-    console.error = function () { }; // console error 막기
+    console.log = function no_console() {}; // console log 막기
+    console.warn = function no_console() {}; // console warning 막기
+    console.error = function () {}; // console error 막기
 }

src/router/index.js

@@ -1,43 +1,53 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router';
 import { useAuthStore } from '@s/useAuthStore';
-
+import { useUserInfoStore } from '@s/useUserInfoStore';
 
 // 초기 렌더링 속도를 위해 지연 로딩 사용
 const routes = [
     {
         path: '/',
-        name: "Home",
+        name: 'Home',
         component: () => import('@v/MainView.vue'),
-        // meta: { requiresAuth: true }
+        meta: { requiresAuth: true },
     },
     {
         path: '/board',
         component: () => import('@v/board/TheBoard.vue'),
+        meta: { requiresAuth: true },
         children: [
             {
                 path: '',
                 name: 'BoardList',
-                component: () => import('@v/board/BoardList.vue')
+                component: () => import('@v/board/BoardList.vue'),
             },
             {
                 path: 'write',
-                component: () => import('@v/board/BoardWrite.vue')
+                name: 'BoardWrite',
+                component: () => import('@v/board/BoardWrite.vue'),
             },
             {
                 path: ':id',
                 name: 'BoardDetail',
-                component: () => import('@v/board/BoardView.vue')
+                component: () => import('@v/board/BoardView.vue'),
             },
             {
                 path: 'edit/:id',
                 name: 'BoardEdit',
-                component: () => import('@v/board/BoardEdit.vue')
-            }
-        ]
+                component: () => import('@v/board/BoardEdit.vue'),
+            },
+        ],
+    },
+    {
+        path: '/mypage',
+        name: 'MyPage',
+        component: () => import('@v/mypage/MyPage.vue'),
+        meta: { requiresAuth: true },
     },
     {
         path: '/wordDict',
+        name: 'WordDict',
         component: () => import('@v/wordDict/wordDict.vue'),
+        meta: { requiresAuth: true },
     },
     {
         path: '/login',
@@ -59,81 +69,118 @@ const routes = [
     },
     {
         path: '/vacation',
+        name: 'Vacation',
         component: () => import('@v/vacation/VacationManagement.vue'),
+        meta: { requiresAuth: true },
     },
     {
         path: '/voteboard',
+        name: 'VoteBoard',
         component: () => import('@v/voteboard/TheVoteBoard.vue'),
+        meta: { requiresAuth: true },
         children: [
             {
                 path: '',
-                component: () => import('@v/voteboard/voteBoardList.vue')
+                name: 'VoteBoardList',
+                component: () => import('@v/voteboard/voteBoardList.vue'),
             },
             {
                 path: 'write',
-                component: () => import('@v/voteboard/voteboardWrite.vue')
+                name: 'VoteboardWrite',
+                component: () => import('@v/voteboard/voteboardWrite.vue'),
             },
-
-        ]
+        ],
     },
     {
         path: '/projectlist',
+        name: 'Projectlist',
         component: () => import('@v/projectlist/TheProjectList.vue'),
+        meta: { requiresAuth: true },
     },
     {
         path: '/commuters',
+        name: 'Commuters',
         component: () => import('@v/commuters/TheCommuters.vue'),
+        meta: { requiresAuth: true },
     },
     {
-        path: '/sample',
-        component: () => import('@c/calendar/SampleCalendar.vue'),
+        path: '/authorization',
+        name: 'Authorization',
+        component: () => import('@v/admin/TheAuthorization.vue'),
+        meta: { requiresAuth: true },
     },
     {
-        path: "/:anything(.*)",
-        component: () => import('@v/ErrorPage.vue'),
-    }
+        path: '/people',
+        name: 'people',
+        component: () => import('@v/people/PeopleList.vue'),
+        meta: { requiresAuth: true },
+    },
+    {
+        path: '/error/400',
+        name: 'Error400',
+        component: () => import('@v/error/Error400.vue'),
+        meta: { layout: 'NoLayout' },
+    },
+    {
+        path: '/error/500',
+        name: 'Error500',
+        component: () => import('@v/error/Error500.vue'),
+        meta: { layout: 'NoLayout' },
+    },
+    {
+        path: '/:anything(.*)',
+        name: 'Error404',
+        component: () => import('@v/error/Error404.vue'),
+        meta: { layout: 'NoLayout' },
+    },
 ];
 
 const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
     routes: routes,
-})
+});
 
 router.beforeEach(async (to, from, next) => {
     const authStore = useAuthStore();
     await authStore.checkAuthStatus(); // 로그인 상태 확인
+    const allowedUserId = 1; // 특정 ID (변경필요!!)
+    const userStore = useUserInfoStore();
+    const userId = userStore.user?.id ?? null;
 
+    // 로그인이 필요한 페이지인데 로그인되지 않은 경우 → 로그인 페이지로 이동
     if (to.meta.requiresAuth && !authStore.isAuthenticated) {
-        // 로그인이 필요한 페이지인데 로그인되지 않은 경우 → 로그인 페이지로 이동
-        next({ name: 'Login' });
-    } else if (to.meta.requiresGuest && authStore.isAuthenticated) {
-        // 비로그인 사용자만 접근 가능한 페이지인데 로그인된 경우 → 홈으로 이동
-        next({ name: 'Home' });
-    } else {
-        next();
+        return next({ name: 'Login', query: { redirect: to.fullPath } });
     }
+
+    // Authorization 페이지는 ID가 26이 아니면 접근 차단
+    if (to.path === '/authorization' && userId !== allowedUserId) {
+        return next();
+    }
+
+    // 비로그인 사용자만 접근 가능한 페이지인데 로그인된 경우 → 홈으로 이동
+    if (to.meta.requiresGuest && authStore.isAuthenticated) {
+        return next({ name: 'Home' });
+    }
+
+    // 모든 조건을 통과하면 정상적으로 이동
+    next();
 });
 
+import axios from 'axios';
 
-router.beforeEach(async (to, from, next) => {
-    const authStore = useAuthStore()
+axios.interceptors.response.use(
+    response => response,
+    error => {
+        const status = error.response?.status;
 
-    // 최초 앱 로드 시 인증 상태 체크
-    await authStore.checkAuthStatus()
+        if (status === 400) {
+            router.push({ name: 'Error400' });
+        } else if (status === 500) {
+            router.push({ name: 'Error500' });
+        }
 
-    // 현재 라우트에 인증이 필요한지 확인
-    const requiresAuth = to.meta.requiresAuth === true
+        return Promise.reject(error);
+    },
+);
 
-    if (requiresAuth && !authStore.isAuthenticated) {
-        // 인증되지 않은 사용자를 로그인 페이지로 리다이렉트
-        // 원래 가려던 페이지를 쿼리 파라미터로 전달
-        next({
-            name: 'Login',
-            query: { redirect: to.fullPath }
-        })
-    } else {
-        next()
-    }
-})
-
-export default router
+export default router;

src/stores/loadingStore.js

@@ -0,0 +1,22 @@
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+
+export const useLoadingStore = defineStore("loading", () => {
+    const loadingCount = ref(0); // 요청 개수를 추적
+
+    const startLoading = () => {
+        loadingCount.value++;
+    };
+
+    const stopLoading = () => {
+        if (loadingCount.value > 0) {
+            setTimeout(() => {
+                loadingCount.value--;
+            }, 200); // 약간의 지연을 추가하여 응답이 동시에 도착해도 안정적으로 감소
+        }
+    };
+
+    const isLoading = computed(() => loadingCount.value > 0); // 하나라도 요청이 있으면 로딩 활성화
+
+    return { isLoading, startLoading, stopLoading };
+});

src/stores/useBoardAccessStore.js

@@ -0,0 +1,45 @@
+/*
+    작성자 : 박성용
+    작성일 : 2025-03-14
+    수정자 :
+    수정일 :
+    설명   : 게시글 수정 시 비밀번호 적재용.
+*/
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+
+export const useBoardAccessStore = defineStore(
+    'access',
+    () => {
+        const password = ref('');
+
+        // watch(password, newValue => {
+        //     localStorage.setItem('tempPassword', JSON.stringify(newValue.value));
+        // });
+
+        if (localStorage.getItem('tempPassword')) {
+            // 저장된 값을 불러와 상태에 할당
+            const tempPassword = localStorage.getItem('tempPassword');
+            if (typeof tempPassword === 'string') password.value = JSON.parse(tempPassword);
+        }
+
+        function setBoardPassword(input) {
+            password.value = input;
+            if (typeof input === 'string') JSON.stringify(localStorage.setItem('tempPassword', input));
+        }
+
+        function $reset() {
+            password.value = '';
+            localStorage.removeItem('tempPassword');
+        }
+
+        return {
+            password,
+            setBoardPassword,
+            $reset,
+        };
+    },
+    {
+        persist: true,
+    },
+);

src/stores/useDatePicker.js

@@ -0,0 +1,95 @@
+/*
+    작성자 : 박지윤
+    작성일 : 2025-03-25
+    수정자 :
+    수정일 :
+    설명   : 달력 데이트 피커
+*/
+
+import { ref } from 'vue';
+import flatpickr from 'flatpickr';
+import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect/index';
+import 'flatpickr/dist/flatpickr.min.css';
+import 'flatpickr/dist/plugins/monthSelect/style.css';
+
+export function useDatePicker() {
+    let fpInstance = null;
+    const calendarDatepicker = ref(null);
+
+    const initDatePicker = (fullCalendarRef, onDateChange, options = {}) => {
+        // input 요소 동적 생성
+        const datePickerInput = document.createElement('input');
+        datePickerInput.type = 'text';
+        datePickerInput.style.display = 'none';
+        document.body.appendChild(datePickerInput);
+        calendarDatepicker.value = datePickerInput;
+
+        // Flatpickr 초기화
+        fpInstance = flatpickr(calendarDatepicker.value, {
+            dateFormat: "Y-m",
+            plugins: [
+                new monthSelectPlugin({
+                    shorthand: true,
+                    dateFormat: "Y-m",
+                    altFormat: "F Y"
+                })
+            ],
+            onOpen: function() {
+                document.querySelector('.flatpickr-input').style.visibility = 'hidden';
+            },
+            onChange: function(selectedDatesArr, dateStr) {
+                // 선택한 달의 첫날로 달력을 이동
+                if (fullCalendarRef.value) {
+                    fullCalendarRef.value.getApi().gotoDate(dateStr + "-01");
+                }
+
+                const [year, month] = dateStr.split("-");
+
+                // onDateChange가 함수인 경우에만 호출
+                if (typeof onDateChange === 'function') {
+                    onDateChange(parseInt(year, 10), month, options);
+                }
+            },
+            onClose: function() {
+                if (calendarDatepicker.value) {
+                    calendarDatepicker.value.style.display = "none";
+                }
+            },
+            ...options
+        });
+
+        // FullCalendar 년월월(.fc-toolbar-title) 클릭 시 데이트피커 열기
+        const titleEl = document.querySelector('.fc-toolbar-title');
+        if (titleEl) {
+            titleEl.style.cursor = 'pointer';
+            titleEl.addEventListener('click', () => {
+                const rect = titleEl.getBoundingClientRect();
+                const dpEl = calendarDatepicker.value;
+
+                dpEl.style.display = 'block';
+                dpEl.style.position = 'fixed';
+                dpEl.style.top = `${rect.bottom + window.scrollY}px`;
+                dpEl.style.left = `${rect.left + window.scrollX}px`;
+                dpEl.style.transform = 'translate(-50%, -50%)';
+                dpEl.style.zIndex = '9999';
+                dpEl.style.border = 'none';
+                dpEl.style.outline = 'none';
+                dpEl.style.backgroundColor = 'transparent';
+
+                fpInstance.open();
+            });
+        }
+    };
+
+    const closeDatePicker = () => {
+        if (fpInstance) {
+            fpInstance.close();
+        }
+    };
+
+    return {
+        initDatePicker,
+        closeDatePicker,
+        calendarDatepicker
+    };
+}

src/stores/useProjectStore.js

@@ -6,22 +6,122 @@
     설명   : 프로젝트 목록
 */
 import { defineStore } from 'pinia';
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 import $api from '@api';
+import { useUserInfoStore } from '@/stores/useUserInfoStore';
 
 export const useProjectStore = defineStore('project', () => {
-    const projectList = ref([]);
+    const projectList = ref([]);           // 모든 프로젝트 (종료된 프로젝트 포함)
+    const activeProjectList = ref([]);     // 진행 중인 프로젝트만 (종료된 프로젝트 제외)
+    const memberProjectList = ref([]);     // 사용자가 속한 프로젝트
+    const activeMemberProjectList = ref([]); // 사용자가 속한 진행 중인 프로젝트
+    const selectedProject = ref(null);
+    const userStore = useUserInfoStore();
 
-    const getProjectList = async (searchText = '', selectedYear = '') => {
+    // 전체 프로젝트 가져오기 (종료된 프로젝트 포함 여부에 따라 다른 배열에 저장)
+    const getProjectList = async (searchText = '', selectedYear = '', excludeEnded = 'false') => {
+        if (!userStore.user) return;
         const res = await $api.get('project/select', {
             params: {
                 searchKeyword: searchText || '',
                 category: selectedYear || '',
+                excludeEnded: excludeEnded
             },
         });
-        projectList.value = res.data.data.projectList;
+
+        if (excludeEnded === 'true') {
+            // 종료되지 않은 프로젝트만 저장
+            activeProjectList.value = res.data.data.projectList;
+        } else {
+            // 모든 프로젝트 저장 (종료된 프로젝트 포함)
+            projectList.value = res.data.data.projectList;
+        }
     };
 
+    // 모든 프로젝트 목록 로드 (종료 여부 구분하여 모두 로드)
+    const loadAllProjectLists = async (searchText = '', selectedYear = '') => {
+        // 진행 중인 프로젝트 로드
+        await getProjectList(searchText, selectedYear, 'true');
+        // 모든 프로젝트 로드 (종료된 프로젝트 포함)
+        await getProjectList(searchText, selectedYear, 'false');
+    };
 
-    return { projectList, getProjectList };
+    // 사용자가 속한 프로젝트 목록 가져오기
+    const getMemberProjects = async () => {
+        if (!userStore.user) return; // 로그인한 사용자 확인
+
+        const res = await $api.get(`project/${userStore.user.id}`);
+        const allMemberProjects = res.data.data;
+        memberProjectList.value = allMemberProjects;
+
+        // 사용자가 속한 프로젝트 중 진행 중인 프로젝트만 필터링
+        activeMemberProjectList.value = allMemberProjects.filter(project =>
+            !project.ENDYN || project.ENDYN === 'N'
+        );
+
+        if (activeMemberProjectList.value.length > 0 && !selectedProject.value) {
+            setSelectedProject(activeMemberProjectList.value[0]);
+        }
+    };
+
+    const setSelectedProject = (project) => {
+        selectedProject.value = project ? { ...project } : null;
+        if (project) {
+            localStorage.setItem('selectedProject', JSON.stringify(project));
+        } else {
+            localStorage.removeItem('selectedProject');
+        }
+    };
+
+    const getSelectedProject = () => {
+        if (!selectedProject.value) {
+            const storedProject = localStorage.getItem('selectedProject');
+            if (storedProject) {
+                selectedProject.value = JSON.parse(storedProject);
+            }
+        }
+        return selectedProject.value;
+    };
+
+    // 프로젝트 리스트가 변경될 때 자동으로 반응
+    watch(activeProjectList, (newList) => {
+        // 선택된 프로젝트가 없고 목록이 있는 경우
+        if (!selectedProject.value && newList.length > 0) {
+            // 사용자가 속한 프로젝트가 있는지 먼저 확인
+            if (activeMemberProjectList.value.length > 0) {
+                setSelectedProject(activeMemberProjectList.value[0]);
+            } else {
+                setSelectedProject(newList[0]);
+            }
+        }
+    });
+
+    watch(activeMemberProjectList, (newList) => {
+        if (newList.length > 0) {
+            // 현재 선택된 프로젝트가 없는 경우 첫 번째 항목 선택
+            if (!selectedProject.value) {
+                setSelectedProject(newList[0]);
+            } else {
+                // 선택된 프로젝트가 있는 경우 목록에 있는지 확인
+                const exists = newList.some(project => project.PROJCTSEQ === selectedProject.value.PROJCTSEQ);
+
+                if (!exists) {
+                    setSelectedProject(newList[0]);
+                }
+            }
+        }
+    });
+
+    return {
+        projectList,           // 종료된 프로젝트 포함한 모든 프로젝트
+        activeProjectList,     // 진행 중인 프로젝트만
+        memberProjectList,     // 사용자가 속한 모든 프로젝트
+        activeMemberProjectList, // 사용자가 속한 진행 중인 프로젝트
+        selectedProject,
+        getProjectList,
+        loadAllProjectLists,   // 모든 프로젝트 목록 한번에 로드
+        getMemberProjects,
+        setSelectedProject,
+        getSelectedProject,
+    };
 });

src/stores/useWeatherStore.js

@@ -0,0 +1,122 @@
+/*
+    작성자 : 서지희
+    작성일 : 2025-04-04
+    수정일 : 2025-04-07
+    설명   : 위치 기반으로 날씨를 조회하고, 10분 단위 캐시로 저장합니다.
+*/
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+import $api from '@api';
+
+export const useWeatherStore = defineStore('weather', () => {
+    const weather = ref({
+        icon: '',
+        description: '',
+        tempMin: null,
+        tempMax: null,
+    });
+
+    const dailyWeatherList = ref([]);
+
+    const getWeatherInfo = async () => {
+        return new Promise((resolve, reject) => {
+            navigator.geolocation.getCurrentPosition(async position => {
+                const lat = position.coords.latitude;
+                const lon = position.coords.longitude;
+
+                try {
+                    const res = await $api.get(`/weather`, {
+                        params: { lat, lon },
+                        withCredentials: true,
+                    });
+
+                    if (!res?.data?.data) return;
+
+                    const resData = res.data.data;
+                    const raw = resData.weatherInfo;
+                    const data = JSON.parse(raw);
+                    if (!data || !Array.isArray(data.list)) {
+                        console.error('날씨 데이터 형식 오류');
+                        return;
+                    }
+
+                    // 검은색 태양 아이콘 변경
+                    dailyWeatherList.value = resData.dailyWeatherList.map(w => {
+                        return {
+                            ...w,
+                            icon: w.icon.replace(/n$/, 'd'),
+                        };
+                    });
+
+                    const now = new Date();
+                    const todayStr = now.toISOString().split('T')[0];
+                    const nowTime = now.getTime();
+
+                    const todayList = data.list.filter(item => item.dt_txt.startsWith(todayStr));
+                    if (todayList.length > 0) {
+                        const minTemp = Math.min(...todayList.map(i => i.main.temp_min));
+                        const maxTemp = Math.max(...todayList.map(i => i.main.temp_max));
+                        weather.value.tempMin = Math.round(minTemp);
+                        weather.value.tempMax = Math.round(maxTemp);
+                    }
+
+                    const closest = data.list.reduce((prev, curr) => {
+                        const prevDiff = Math.abs(new Date(prev.dt_txt).getTime() - nowTime);
+                        const currDiff = Math.abs(new Date(curr.dt_txt).getTime() - nowTime);
+                        return currDiff < prevDiff ? curr : prev;
+                    });
+
+                    weather.value.icon = closest.weather[0].icon.replace(/n$/, 'd');
+                    weather.value.description = closest.weather[0].description;
+
+                    resolve({ weather: weather.value, dailyWeatherList: dailyWeatherList.value });
+                } catch (e) {
+                    console.error('날씨 정보 가져오기 실패:', e);
+                    reject(e);
+                }
+            }, reject);
+        });
+    };
+
+    const getWeatherInfoWithCache = async () => {
+        const now = new Date();
+        const pad = n => String(n).padStart(2, '0');
+        const key = `weather_${pad(now.getMonth() + 1)}${pad(now.getDate())}${pad(now.getHours())}${pad(Math.floor(now.getMinutes() / 10) * 10)}`;
+        const cached = localStorage.getItem(key);
+        if (cached) {
+            const parsed = JSON.parse(cached);
+            weather.value = parsed.weather;
+            dailyWeatherList.value = parsed.dailyWeatherList;
+            return;
+        }
+
+        try {
+            const { weather: w, dailyWeatherList: d } = await getWeatherInfo();
+
+            // 기존 캐시 삭제
+            Object.keys(localStorage).forEach(k => {
+                if (k.startsWith('weather_')) localStorage.removeItem(k);
+            });
+
+            localStorage.setItem(key, JSON.stringify({ weather: w, dailyWeatherList: d }));
+        } catch (e) {
+            console.error('날씨 API 호출 실패, 캐시 fallback 시도 중...');
+            const oldKey = Object.keys(localStorage)
+                .filter(k => k.startsWith('weather_'))
+                .sort()
+                .pop();
+            if (oldKey) {
+                const fallback = JSON.parse(localStorage.getItem(oldKey));
+                weather.value = fallback.weather;
+                dailyWeatherList.value = fallback.dailyWeatherList;
+            }
+        }
+    };
+
+    return {
+        weather,
+        dailyWeatherList,
+        getWeatherInfo,
+        getWeatherInfoWithCache,
+    };
+});

src/views/ErrorPage.vue

@@ -1,13 +0,0 @@
-<template>
-    Error
-</template>
-
-<script>
-export default {
-
-}
-</script>
-
-<style>
-
-</style>

src/views/LoadingPage.vue

@@ -0,0 +1,71 @@
+<template>
+    <div v-if="isLoading" class="loading-overlay">
+      <div class="loading-container">
+        <div class="spinner">
+            <img src="/img/icons/loading.png" class="loading-img" />
+        </div>
+        <p class="loading-text">LOADING...</p>
+      </div>
+    </div>
+  </template>
+
+  <script setup>
+  import { defineProps } from "vue";
+
+  defineProps({
+    isLoading: Boolean, // 부모 컴포넌트에서 전달받는 로딩 상태
+  });
+  </script>
+
+  <style scoped>
+  /* 회색 배경으로 클릭 방지 */
+  .loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.4); /* 회색 반투명 */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999; /* 가장 위에 위치 */
+    pointer-events: auto; /* 모든 클릭 방지 */
+  }
+
+  /* 로딩 컨테이너 */
+  .loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    background: none;
+    border-radius: 10px;
+  }
+
+  .loading-img {
+    width: 80px; /* 원하는 크기로 조정 */
+    height: 80px;
+    }
+
+  /* 빙글빙글 돌아가는 스피너 */
+  .spinner {
+    font-size: 50px;
+    animation: spin 2.2s linear infinite;
+  }
+
+  /* 로딩 텍스트 */
+  .loading-text {
+    margin-top: 10px;
+    font-size: 18px;
+    font-weight: bold;
+    color: #ffffff;
+  }
+
+  /* 회전 애니메이션 */
+  @keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+  }
+  </style>

src/views/admin/TheAuthorization.vue

@@ -0,0 +1,120 @@
+<template>
+<div class="container text-center flex-grow-1 container-p-y">
+    <div class="card">
+    <div class="card-header d-flex flex-column">
+        <h3>관리자 권한 부여</h3>
+        <div class="user-card-container">
+        <div v-for="user in users" :key="user.id" class="user-card">
+            <!-- 프로필 사진 -->
+            <img
+            :src="getProfileImage(user.photo)"
+            class="user-avatar2"
+            alt="프로필 사진"
+            @error="setDefaultImage"
+            />
+            <!-- 사용자 정보 -->
+            <div class="user-info">
+            <h5>{{ user.name }}</h5>
+            </div>
+            <!-- 권한 토글 버튼 (기본 동작 막고 클릭시 직접 토글 처리) -->
+            <label class="switch me-0">
+            <input
+                type="checkbox"
+                :checked="user.isAdmin"
+                @click="handleToggle($event, user)"
+            />
+            <span class="slider round"></span>
+            </label>
+        </div>
+        </div>
+    </div>
+    </div>
+</div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+import axios from '@api';
+import { useToastStore } from '@s/toastStore';
+
+const users = ref([]);
+const toastStore = useToastStore();
+const baseUrl = axios.defaults.baseURL.replace(/api\/$/, "");
+const defaultProfile = "/img/icons/icon.png";
+const allowedUserId = 1; // 특정 ID (필요에 따라 변경)
+
+// 사용자 목록 가져오기
+async function fetchUsers() {
+try {
+    const response = await axios.get('admin/users'); // API 경로 확인
+    if (!response.data || !Array.isArray(response.data.data)) {
+    throw new Error("올바른 데이터 형식이 아닙니다.");
+    }
+    users.value = response.data.data
+    .filter(user => user.MEMBERSEQ !== allowedUserId)
+    .map(user => ({
+        id: user.MEMBERSEQ,
+        name: user.MEMBERNAM,
+        photo: user.MEMBERPRF ? `${baseUrl}upload/img/profile/${user.MEMBERPRF}` : defaultProfile,
+        color: user.MEMBERCOL,
+        isAdmin: user.MEMBERROL === 'ROLE_ADMIN',
+    }));
+} catch (error) {
+    toastStore.onToast('사용자 목록을 불러오지 못했습니다.', 'e');
+}
+}
+
+// 프로필 이미지 가져오기
+function getProfileImage(photo) {
+return photo || defaultProfile;
+}
+
+// 이미지 로드 오류 시 기본 이미지 설정
+function setDefaultImage(event) {
+event.target.src = defaultProfile;
+}
+
+// 권한 토글 시 기본 동작 막고 직접 제어하는 함수
+async function handleToggle(event, user) {
+// Prevent the default checkbox toggle behavior
+event.preventDefault();
+
+// 저장: 현재 상태를 기반으로 변경 요청 (체크박스는 아직 변하지 않았음)
+const originalState = user.isAdmin;
+const newState = !originalState;
+
+const requestData = {
+    id: user.id,
+    role: originalState ? 'MEMBER' : 'ADMIN'
+};
+
+try {
+    const response = await axios.put('admin/role', requestData);
+    if (response.status === 200) {
+    // 서버 요청 성공 시에만 상태를 업데이트
+    user.isAdmin = newState;
+    toastStore.onToast(`'${user.name}'의 권한이 '${requestData.role}'(으)로 변경되었습니다.`, 's');
+    } else {
+    throw new Error('권한 변경 실패');
+    }
+} catch (error) {
+    // 에러 발생 시 상태를 변경하지 않음
+    toastStore.onToast('권한 변경에 실패했습니다.', 'e');
+}
+}
+
+onMounted(fetchUsers);
+</script>
+
+<style scoped>
+.user-avatar2 {
+    width: 160px;
+    height: 200px;
+    object-fit: cover;
+    border-radius: 50%;
+    display: block;
+    margin: 1rem auto 0 auto;
+    margin-top: 0px;
+    margin-bottom: 10px;
+}
+</style>

src/views/board/BoardEdit.vue

@@ -10,13 +10,22 @@
             <div class="col-xl-12">
                 <div class="card-body">
                     <!-- 제목 입력 -->
-                    <FormInput title="제목" name="title" :is-essential="true" :is-alert="titleAlert" v-model="title" />
+                    <FormInput
+                        title="제목"
+                        name="title"
+                        :is-essential="true"
+                        :is-alert="titleAlert"
+                        v-model="title"
+                        @update:alert="titleAlert = $event"
+                        @input.once="validateTitle"
+                    />
 
                     <!-- 첨부파일 업로드 -->
                     <FormFile
                         title="첨부파일"
                         name="files"
                         :is-alert="attachFilesAlert"
+                        :key="autoIncrement"
                         @update:data="handleFileUpload"
                         @update:isValid="isFileValid = $event"
                     />
@@ -42,25 +51,27 @@
                     <div class="mb-4">
                         <label for="html5-tel-input" class="col-md-2 col-form-label">
                             내용
-                            <span class="text-red">*</span>
-                            <div class="invalid-feedback" :class="contentAlert ? 'display-block' : ''">내용을 확인해주세요.</div>
+                            <span class="text-danger">*</span>
                         </label>
                         <div class="col-md-12">
                             <QEditor
                                 v-if="contentLoaded"
-                                @update:data="content = $event"
+                                @update:data="handleEditorDataUpdate"
                                 @update:imageUrls="imageUrls = $event"
+                                @update:uploadedImgList="handleUpdateEditorImg"
+                                @update:deleteImgIndexList="handleDeleteEditorImg"
                                 :initialData="content"
                             />
                         </div>
+                        <div v-if="contentAlert" class="invalid-feedback d-block">내용을 확인해주세요.</div>
                     </div>
 
                     <!-- 버튼 -->
                     <div class="mb-4 d-flex justify-content-end">
-                        <button type="button" class="btn btn-info right" @click="goList">
+                        <button type="button" class="btn btn-info right" @click="goBack">
                             <i class="bx bx-left-arrow-alt"></i>
                         </button>
-                        <button type="button" class="btn btn-primary ms-1" @click="updateBoard">
+                        <button type="button" class="btn btn-primary ms-1" :disabled="!isChanged" @click="updateBoard">
                             <i class="bx bx-check"></i>
                         </button>
                     </div>
@@ -74,13 +85,22 @@
     import QEditor from '@c/editor/QEditor.vue';
     import FormInput from '@c/input/FormInput.vue';
     import FormFile from '@c/input/FormFile.vue';
-    import { ref, onMounted, computed, watch } from 'vue';
+    import { ref, onMounted, computed, watch, inject } from 'vue';
     import { useRoute, useRouter } from 'vue-router';
+    import { useToastStore } from '@s/toastStore';
+    import { useBoardAccessStore } from '@s/useBoardAccessStore';
     import axios from '@api';
+    import Quill from 'quill';
+
+    // 공통
+    const $common = inject('common');
+    const toastStore = useToastStore();
+    const accessStore = useBoardAccessStore();
 
     // 상태 변수
     const title = ref('');
-    const content = ref('');
+    const content = ref({ ops: [] });
+    const autoIncrement = ref(0);
 
     // 경고 상태
     const titleAlert = ref(false);
@@ -100,85 +120,163 @@
     const attachFilesAlert = ref(false);
     const isFileValid = ref(true);
     const delFileIdx = ref([]); // 제외할 기존 첨부파일 ID
-    const additionalFiles = ref([]); // 새로 추가할 첨부파일
+    const editorUploadedImgList = ref([]);
+    const editorDeleteImgList = ref([]);
+
+    const originalTitle = ref('');
+    const originalContent = ref({});
+    const originalFiles = ref([]);
+    const contentInitialized = ref(false);
+    // 최초 업데이트 감지 여부
+    const isFirstContentUpdate = ref(true);
+
+    // 에디터 데이터 업데이트 시 처리 (최초 데이터 저장)
+    const handleEditorDataUpdate = data => {
+        content.value = data;
+        if (isFirstContentUpdate.value) {
+            originalContent.value = structuredClone(data);
+            isFirstContentUpdate.value = false;
+            contentInitialized.value = true;
+        }
+    };
+
+    // isDeltaChanged 함수 수정 (내장 diff 대신 텍스트, 이미지, 비디오 각각을 직접 비교)
+    function isDeltaChanged(current, original) {
+        const Delta = Quill.import('delta');
+        const currentDelta = new Delta(current || []);
+        const originalDelta = new Delta(original || []);
+
+        // 텍스트 추출
+        const getPlainText = delta =>
+            (delta.ops || [])
+                .filter(op => typeof op.insert === 'string')
+                .map(op => op.insert)
+                .join('');
+        // 이미지 URL 추출
+        const getImages = delta =>
+            (delta.ops || [])
+                .filter(op => typeof op.insert === 'object' && op.insert.image)
+                .map(op => op.insert.image);
+        // 비디오 URL 추출
+        const getVideos = delta =>
+            (delta.ops || [])
+                .filter(op => typeof op.insert === 'object' && op.insert.video)
+                .map(op => op.insert.video);
+
+        const textCurrent = getPlainText(currentDelta);
+        const textOriginal = getPlainText(originalDelta);
+
+        const imgsCurrent = getImages(currentDelta);
+        const imgsOriginal = getImages(originalDelta);
+
+        const vidsCurrent = getVideos(currentDelta);
+        const vidsOriginal = getVideos(originalDelta);
+
+        const textEqual = textCurrent === textOriginal;
+        const imageEqual = imgsCurrent.length === imgsOriginal.length && imgsCurrent.every((val, idx) => val === imgsOriginal[idx]);
+        const videoEqual = vidsCurrent.length === vidsOriginal.length && vidsCurrent.every((val, idx) => val === vidsOriginal[idx]);
+
+        return !(textEqual && imageEqual && videoEqual);
+    }
+
+    // 게시물 변경 여부 계산
+    const isChanged = computed(() => {
+        if (!contentInitialized.value) return false;
+        const isTitleChanged = title.value !== originalTitle.value;
+        const isContentChanged = isDeltaChanged(content.value, originalContent.value);
+        const isFilesChanged =
+            attachFiles.value.some(f => !f.id) || // 신규 파일 존재
+            delFileIdx.value.length > 0 || // 삭제된 파일이 있는 경우
+            !isSameFiles(
+                attachFiles.value.filter(f => f.id), // 기존 파일만 비교
+                originalFiles.value
+            );
+        return isTitleChanged || isContentChanged || isFilesChanged;
+    });
+
+    // 파일 비교 함수
+    function isSameFiles(current, original) {
+        if (current.length !== original.length) return false;
+        const sortedCurrent = [...current].sort((a, b) => a.id - b.id);
+        const sortedOriginal = [...original].sort((a, b) => a.id - b.id);
+        return sortedCurrent.every((file, idx) => {
+            return file.id === sortedOriginal[idx].id && file.name === sortedOriginal[idx].name;
+        });
+    }
 
     // 게시물 데이터 로드
     const fetchBoardDetails = async () => {
-        try {
-            const response = await axios.get(`board/${currentBoardId.value}`);
-            const data = response.data.data;
-
-            // 기존 첨부파일 추가
-            if (data.hasAttachment && data.attachments.length > 0) {
-                attachFiles.value = addDisplayFileName([...data.attachments]);
-            }
-
-            // 데이터 설정
-            title.value = data.title || '제목 없음';
-            content.value = data.content || '내용 없음';
-            contentLoaded.value = true;
-        } catch (error) {
-            console.error('게시물 가져오기 오류:', error.response || error.message);
+        let password = accessStore.password;
+        const params = {
+            password: `${password}` || '',
+        };
+        const { data } = await axios.post(`board/${currentBoardId.value}`, params);
+        if (data.code !== 200) {
+            alert(data.message, 'e');
+            router.back();
+            return;
         }
+        const boardData = data.data;
+        if (boardData.hasAttachment && boardData.attachments.length > 0) {
+            const formatted = addDisplayFileName([...boardData.attachments]);
+            attachFiles.value = formatted;
+            originalFiles.value = formatted;
+        }
+        title.value = boardData.title || '제목 없음';
+        content.value = boardData.content || { ops: [] };
+        originalTitle.value = title.value;
+        originalContent.value = structuredClone(boardData.content);
+        contentInitialized.value = true;
+        contentLoaded.value = true;
+    };
+
+    const handleUpdateEditorImg = item => {
+        editorUploadedImgList.value = item;
+    };
+
+    const handleDeleteEditorImg = item => {
+        editorDeleteImgList.value = item;
     };
 
     // 기존 첨부파일명을 노출
     const addDisplayFileName = fileInfos =>
         fileInfos.map(file => ({
             ...file,
-            name: `${file.originalName}.${file.extension}`,
+            name: `${file.originalName}.${file.extension}`
         }));
 
-    // 목록 페이지로 이동
+    // 상세 페이지 이동
     const goList = () => {
-        router.push('/board');
+        accessStore.$reset();
+        router.back();
     };
 
-    // 게시물 수정
-    const updateBoard = async () => {
-        // 유효성 검사
-        if (!title.value) {
-            titleAlert.value = true;
-            return;
-        }
-        titleAlert.value = false;
+    // 전 페이지 이동
+    const goBack = () => {
+        accessStore.$reset();
+        router.back();
+    };
 
-        if (!content.value) {
-            contentAlert.value = true;
-            return;
-        }
-        contentAlert.value = false;
+    // 로컬 유효성 검사 함수 (에디터 내용: 텍스트, 이미지, 비디오 중 하나라도 있으면 유효)
+    const isNotValidContent = delta => {
+        if (!delta?.ops?.length) return true;
+        const hasText = delta.ops.some(op => typeof op.insert === 'string' && op.insert.trim().length > 0);
+        const hasImage = delta.ops.some(op => op.insert && typeof op.insert === 'object' && op.insert.image);
+        const hasVideo = delta.ops.some(op => op.insert && typeof op.insert === 'object' && op.insert.video);
+        return !(hasText || hasImage || hasVideo);
+    };
 
-        try {
-            // 수정 데이터 전송
-            const boardData = {
-                LOCBRDTTL: title.value,
-                LOCBRDCON: JSON.stringify(content.value),
-                LOCBRDSEQ: currentBoardId.value,
-            };
-
-            if (delFileIdx.value && delFileIdx.value.length > 0) {
-                boardData.delFileIdx = [...delFileIdx.value];
+    // 유효성 확인 함수
+    const checkValidation = () => {
+        contentAlert.value = isNotValidContent(content.value);
+        titleAlert.value = $common.isNotValidInput(title.value);
+        if (titleAlert.value || contentAlert.value || !isFileValid.value) {
+            if (titleAlert.value) {
+                title.value = '';
             }
-
-            const fileArray = newFileFilter(attachFiles);
-            const formData = new FormData();
-
-            Object.entries(boardData).forEach(([key, value]) => {
-                formData.append(key, value);
-            });
-
-            fileArray.forEach((file, idx) => {
-                formData.append('files', file);
-            });
-
-            await axios.put(`board/${currentBoardId.value}`, formData, { isFormData: true });
-
-            alert('게시물이 수정되었습니다.');
-            goList();
-        } catch (error) {
-            console.error('게시물 수정 중 오류 발생:', error);
-            alert('게시물 수정에 실패했습니다.');
+            return true;
+        } else {
+            return false;
         }
     };
 
@@ -187,7 +285,6 @@
 
     const handleFileUpload = files => {
         const validFiles = files.filter(file => file.size <= maxSize);
-
         if (files.some(file => file.size > maxSize)) {
             fileError.value = '파일 크기가 10MB를 초과할 수 없습니다.';
             return;
@@ -198,15 +295,16 @@
         }
         fileError.value = '';
         attachFiles.value = [...attachFiles.value, ...validFiles].slice(0, maxFiles);
+        autoIncrement.value++;
     };
 
     const removeFile = (index, file) => {
         if (file.id) delFileIdx.value.push(file.id);
-
         attachFiles.value.splice(index, 1);
         if (attachFiles.value.length <= maxFiles) {
             fileError.value = '';
         }
+        autoIncrement.value++;
     };
 
     watch(attachFiles, () => {
@@ -219,8 +317,52 @@
     };
     ////////////////// fileSection[E] ////////////////////
 
+    /** content 변경 감지 (deep 옵션 추가) */
+    watch(content, () => {
+        contentAlert.value = isNotValidContent(content.value);
+    }, { deep: true });
+
+    // 글 제목 유효성 검사
+    const validateTitle = () => {
+        titleAlert.value = title.value.trim().length === 0;
+    };
+
+    // 게시물 수정 함수
+    const updateBoard = async () => {
+        if (checkValidation()) return;
+        const boardData = {
+            LOCBRDTTL: title.value.trim(),
+            LOCBRDCON: JSON.stringify(content.value),
+            LOCBRDSEQ: currentBoardId.value
+        };
+        if (delFileIdx.value && delFileIdx.value.length > 0) {
+            boardData.delFileIdx = [...delFileIdx.value];
+        }
+        if (editorUploadedImgList.value && editorUploadedImgList.value.length > 0) {
+            boardData.editorUploadedImgList = [...editorUploadedImgList.value];
+        }
+        if (editorDeleteImgList.value && editorDeleteImgList.value.length > 0) {
+            boardData.editorDeleteImgList = [...editorDeleteImgList.value];
+        }
+        const fileArray = newFileFilter(attachFiles);
+        const formData = new FormData();
+        Object.entries(boardData).forEach(([key, value]) => {
+            formData.append(key, value);
+        });
+        fileArray.forEach((file, idx) => {
+            formData.append('files', file);
+        });
+        const { data } = await axios.put(`board/${currentBoardId.value}`, formData, { isFormData: true });
+        if (data.code === 200) {
+            toastStore.onToast('게시물이 수정되었습니다.', 's');
+            goList();
+        } else {
+            toastStore.onToast('게시물 수정에 실패했습니다.', 'e');
+        }
+    };
+
     // 컴포넌트 마운트 시 데이터 로드
-    onMounted(() => {
+    onMounted(async () => {
         if (currentBoardId.value) {
             fetchBoardDetails();
         } else {
@@ -228,10 +370,3 @@
         }
     });
 </script>
-
-<style>
-    .text-red {
-        color: red;
-        text-align: center;
-    }
-</style>