샘플 캘린더 추가

package-lock.json

@@ -8,6 +8,10 @@
       "name": "front",
       "version": "0.0.0",
       "dependencies": {
+        "@fullcalendar/core": "^6.1.15",
+        "@fullcalendar/daygrid": "^6.1.15",
+        "@fullcalendar/interaction": "^6.1.15",
+        "@fullcalendar/vue3": "^6.1.15",
         "@popperjs/core": "^2.11.8",
         "@tinymce/tinymce-vue": "^5.1.1",
         "@vueup/vue-quill": "^1.2.0",
@@ -993,6 +997,43 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@fullcalendar/core": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.15.tgz",
+      "integrity": "sha512-BuX7o6ALpLb84cMw1FCB9/cSgF4JbVO894cjJZ6kP74jzbUZNjtwffwRdA+Id8rrLjT30d/7TrkW90k4zbXB5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "preact": "~10.12.1"
+      }
+    },
+    "node_modules/@fullcalendar/daygrid": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.15.tgz",
+      "integrity": "sha512-j8tL0HhfiVsdtOCLfzK2J0RtSkiad3BYYemwQKq512cx6btz6ZZ2RNc/hVnIxluuWFyvx5sXZwoeTJsFSFTEFA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15"
+      }
+    },
+    "node_modules/@fullcalendar/interaction": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.15.tgz",
+      "integrity": "sha512-DOTSkofizM7QItjgu7W68TvKKvN9PSEEvDJceyMbQDvlXHa7pm/WAVtAc6xSDZ9xmB1QramYoWGLHkCYbTW1rQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15"
+      }
+    },
+    "node_modules/@fullcalendar/vue3": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/vue3/-/vue3-6.1.15.tgz",
+      "integrity": "sha512-ctfTICGrNEIj7gmLHQcUYe0WzDTSW5Vd9hyOnVChxPU75AZU9WqdDMkHwJYnfNxNhT6QQuiMHq/qsRRd5zQwOw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15",
+        "vue": "^3.0.11"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -3723,6 +3764,16 @@
         "node": ">=4"
       }
     },
+    "node_modules/preact": {
+      "version": "10.12.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
+      "integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",

package.json

@@ -11,6 +11,10 @@
     "format": "prettier --write src/"
   },
   "dependencies": {
+    "@fullcalendar/core": "^6.1.15",
+    "@fullcalendar/daygrid": "^6.1.15",
+    "@fullcalendar/interaction": "^6.1.15",
+    "@fullcalendar/vue3": "^6.1.15",
     "@popperjs/core": "^2.11.8",
     "@tinymce/tinymce-vue": "^5.1.1",
     "@vueup/vue-quill": "^1.2.0",

src/components/calendar/SampleCalendar.vue

@@ -0,0 +1,179 @@
+<template>
+    <div class="container-xxl flex-grow-1 container-p-y">
+        <div class="card">
+            <FullCalendar ref="fullCalendarRef" :options="calendarOptions" defaultView="dayGridMonth" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import FullCalendar from '@fullcalendar/vue3';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import { inject, onMounted, reactive, ref } from 'vue';
+import axios from 'axios';
+import { isEmpty } from '@/common/utils';
+
+// 기본만 넣었는데 기능 추가해야할듯
+
+const key1 = 'vrkIY7jUy82WRHIozbBtz4n2L89jAqNDY%2B4DmNpmasTex%2FNDySN7FDYwBqPj1p%2BxXLg13BzYfgHPt6eipWhH8Q%3D%3D';
+const key2 = 'vrkIY7jUy82WRHIozbBtz4n2L89jAqNDY+4DmNpmasTex/NDySN7FDYwBqPj1p+xXLg13BzYfgHPt6eipWhH8Q==';
+const dayjs = inject('dayjs');
+
+const fetchData = () => {
+    const date = fullCalendarRef.value?.getApi().currentData.viewTitle;
+    const dateArr = date.split(' ');
+    let contectYear = dateArr[0].trim();
+    let contectMonth = dateArr[1].trim();
+    const regex = /\D/g;
+    contectYear = parseInt(contectYear.replace(regex, ''), 10);
+    contectMonth = parseInt(contectMonth.replace(regex, ''), 10);
+    const yearArr = [];
+    const monthArr = [];
+
+    for (let offset = -1; offset <= 1; offset++) {
+        let newMonth = contectMonth + offset;
+        let newYear = contectYear;
+
+        // 월이 1보다 작으면 작년으로 이동
+        if (newMonth < 1) {
+            newMonth += 12;
+            newYear -= 1;
+        }
+
+        if (newMonth > 12) {
+            newMonth -= 12;
+            newYear += 1;
+        }
+
+        yearArr.push(newYear);
+        monthArr.push(String(newMonth).padStart(2, '0'));
+    }
+
+    callApi(yearArr, monthArr);
+};
+
+const callApi = (yearArr, monthArr) => {
+    for (let i = 0; i < yearArr.length; i++) {
+        axios.get('http://apis.data.go.kr/B090041/openapi/service/SpcdeInfoService/getRestDeInfo', {
+            params: {
+                serviceKey: key2,
+                solYear: String(yearArr[i]),
+                solMonth: String(monthArr[i]),
+            },
+        })
+        .then(data => {
+            const itemData = data.data.response.body.items.item;
+            if(!isEmpty(itemData)){
+                if(Array.isArray(itemData)){
+                    for(const item of itemData){
+                        const locdate = item.locdate;
+                        dateFormat(locdate);
+                    }
+                }else{
+                    const locdate = itemData.locdate;
+                    dateFormat(locdate);
+                }
+            }
+        })
+        .catch(err => {
+            console.error('공휴일 불러오기 실패');
+        });
+    }
+};
+
+const dateFormat = (locdate) => {
+    const day = dayjs(String(locdate) , 'YYYYMMDD');
+    const formatDate = day.format('YYYY년 M월 D일');
+    const targetEle = document.querySelector(`[aria-label="${formatDate}"]`);
+
+    if(targetEle != null){
+        targetEle.style.color = 'red';
+    }
+}
+
+const fullCalendarRef = ref(null);
+
+const handleDateClick = arg => {
+    console.log(arg.dateStr);
+};
+
+const moveCalendar = (value = 0) => {
+    const calendarApi = fullCalendarRef.value?.getApi();
+
+    if (value == 1) {
+        calendarApi.prev();
+    } else if (value == 2) {
+        calendarApi.next();
+    } else if (value == 3) {
+        calendarApi.today();
+    }
+
+    fetchData();
+};
+
+const calendarOptions = reactive({
+    plugins: [dayGridPlugin, interactionPlugin],
+    initialView: 'dayGridMonth',
+    // initialDate: this.contectDate, 선택날짜
+    headerToolbar: {
+        left: 'today',
+        center: 'title',
+        right: 'prev,next',
+    },
+    locale: 'kr', // 한국어 설정
+    events: [],
+    eventOrder: 'sortIdx',
+    selectable: true,
+    dateClick: handleDateClick,
+    droppable: false,
+    customButtons: {
+        prev: {
+            text: 'PREV',
+            click: () => {
+                moveCalendar(1);
+            },
+        },
+        today: {
+            text: 'TODAY',
+            click: () => {
+                moveCalendar(3);
+            },
+        },
+        next: {
+            text: 'NEXT',
+            click: () => {
+                moveCalendar(2);
+            },
+        },
+    },
+});
+
+onMounted(() => {
+    fetchData();
+});
+</script>
+
+<style>
+.fc-button-group {
+    margin-right: 15px !important;
+}
+
+.fc-today-button {
+    margin-left: 15px !important;
+}
+
+.fc-header-toolbar {
+    margin-top: 10px !important;
+}
+
+.fc-day-sun .fc-col-header-cell-cushion,
+.fc-day-sun a {
+    color: red;
+}
+
+.fc-day-sat .fc-col-header-cell-cushion,
+.fc-day-sat a {
+    color: blue;
+}
+</style>

src/layouts/TheMenu.vue

@@ -34,13 +34,19 @@
             <li class="menu-item" :class="$route.path == '/' ? 'active' : ''">
                 <RouterLink class="menu-link" to="/">
                     <i class="menu-icon tf-icons bx bx-home-smile"></i>
-                    <div class="text-truncate" data-i18n="Analytics">Main</div>
+                    <div class="text-truncate">Main</div>
                 </RouterLink>
             </li>
             <li class="menu-item" :class="$route.path.includes('/board') ? 'active' : ''">
                 <RouterLink class="menu-link" to="/board">
                     <i class="menu-icon tf-icons bx bx-layout"></i>
-                    <div class="text-truncate" data-i18n="Analytics">Board</div>
+                    <div class="text-truncate">Board</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>
                 </RouterLink>
             </li>
         </ul>

src/router/index.js

@@ -26,6 +26,10 @@ const routes = [
             }
         ]
     },
+    {
+        path: '/sample',
+        component: () => import('@c/calendar/SampleCalendar.vue'),
+    },
     {
         path: "/:anything(.*)",
         component: () => import('@v/ErrorPage.vue'),