오늘 날짜 클릭시 초록색 -> 하늘색

src/common/common.js

@@ -73,10 +73,10 @@ const common = {
         }
     },
 
-    formatDateTime(dateObj) {
-        const date = new Date(dateObj);
+    formatDateTime(dateStr) {
+        const date = new Date(dateStr);
         const dateCheck = date.getTime();
-        if (isNaN(dateCheck)) return dateObj;
+        if (isNaN(dateCheck)) return dateStr;
 
         const zeroFormat = num => (num < 10 ? `0${num}` : num);
         return {
@@ -102,6 +102,16 @@ const common = {
         };
     },
 
+    // 해당 날짜가 오늘인지 확인
+    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 [];

src/components/main/MainEventCalendar.vue

@@ -60,20 +60,20 @@
 </template>
 
 <script setup>
-    import FullCalendar from '@fullcalendar/vue3';
-    import dayGridPlugin from '@fullcalendar/daygrid';
-    import interactionPlugin from '@fullcalendar/interaction';
     import { inject, 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 { useToastStore } from '@s/toastStore';
+    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 { useToastStore } from '@s/toastStore';
+    import $api from '@api';
+    import 'flatpickr/dist/flatpickr.min.css';
+    import '@/assets/css/app-calendar.css';
 
     const baseUrl = import.meta.env.VITE_DOMAIN;
     const user = ref({});
@@ -101,24 +101,6 @@
     const pressTimer = ref(null);
     const longPressDelay = 500; // 0.5초
 
-    // // 출퇴근 컴포넌트 이벤트 핸들러
-    // const handleWorkTimeUpdate = () => {
-    //     todaysCommuter();
-    //     //loadCommuters();
-    // };
-
-    // const handleLeaveTimeUpdate = () => {
-    //     todaysCommuter();
-    // };
-
-    // // 오늘 출근 모든 사용자 조회
-    // const todaysCommuter = async () => {
-    //     const res = await $api.get(`commuters/todays`);
-    //     if (res.status === 200) {
-    //         commuters.value = res.data.data;
-    //     }
-    // };
-
     /************* category ***************/
 
     // 이벤트 카테고리 데이터 로딩
@@ -334,7 +316,19 @@
     };
 
     // 날짜 클릭 이벤트 핸들러
+    let todayEL = null;
     const handleDateClick = info => {
+        if (isSelectableDate(info)) {
+            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);
     };

src/views/MainView.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="container-xxl flex-grow-1 container-p-y pb-0">
-        <MainEventCalendar  />
+        <MainEventCalendar />
         <MemberManagement v-if="isAdmin" />
         <div class="row mt-4">
             <!-- 게시판 -->
@@ -9,8 +9,6 @@
             <main-word-dict />
             <!-- 투표 -->
             <main-vote />
-
-
         </div>
     </div>
 </template>
@@ -22,8 +20,7 @@
     import BoardMain from '@c/main/BoardMain.vue';
     import MainVote from '@c/main/MainVote.vue';
     import { useUserInfoStore } from '@/stores/useUserInfoStore';
-    import { inject, onMounted, ref } from 'vue';
-    import $api from '@api';
+    import { onMounted, ref } from 'vue';
 
     const userStore = useUserInfoStore();
     const user = ref();