diff --git a/public/css/custom.css b/public/css/custom.css
index 73d624e..446192a 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -819,3 +819,7 @@ input:checked + .slider:before {
 .font-bold {
     font-weight: bold;
 }
+
+.pointer {
+    cursor: pointer;
+}
diff --git a/src/components/main/MainEventCalendar.vue b/src/components/main/MainEventCalendar.vue
index ac549aa..5add8b5 100644
--- a/src/components/main/MainEventCalendar.vue
+++ b/src/components/main/MainEventCalendar.vue
@@ -25,6 +25,7 @@
                         :dinnerList="dinnerList"
                         :teaTimeList="teaTimeList"
                         :workShopList="workShopList"
+                        @handle-click-vacation="handleClickVacation"
                     />
                 </div>
             </div>
@@ -67,6 +68,7 @@
     import { useToastStore } from '@s/toastStore';
     import { useWeatherStore } from '@/stores/useWeatherStore';
     import { storeToRefs } from 'pinia';
+    import router from '@/router';
     import FullCalendar from '@fullcalendar/vue3';
     import dayGridPlugin from '@fullcalendar/daygrid';
     import interactionPlugin from '@fullcalendar/interaction';
@@ -538,6 +540,10 @@
         handleCloseModal();
     };
 
+    const handleClickVacation = () => {
+        router.push({ path: 'Vacation' });
+    };
+
     // 달력 뷰 변경 감지 (월 변경 시 데이터 다시 가져오기)
     watch(
         () => fullCalendarRef.value?.getApi().currentData.viewTitle,
diff --git a/src/components/main/MainEventList.vue b/src/components/main/MainEventList.vue
index d395d90..adb9020 100644
--- a/src/components/main/MainEventList.vue
+++ b/src/components/main/MainEventList.vue
@@ -10,6 +10,8 @@
                     (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">
@@ -100,6 +102,8 @@
             type: Array,
         },
     });
+
+    defineEmits(['handleClickVacation']);
 </script>
 
 <style scoped>
diff --git a/src/router/index.js b/src/router/index.js
index b8b6c9c..269c4ff 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,7 +8,7 @@ const routes = [
         path: '/',
         name: 'Home',
         component: () => import('@v/MainView.vue'),
-        meta: { requiresAuth: true }
+        meta: { requiresAuth: true },
     },
     {
         path: '/board',
@@ -40,12 +40,12 @@ const routes = [
         path: '/mypage',
         name: 'MyPage',
         component: () => import('@v/mypage/MyPage.vue'),
-        meta: { requiresAuth: true }
+        meta: { requiresAuth: true },
     },
     {
         path: '/wordDict',
         component: () => import('@v/wordDict/wordDict.vue'),
-        meta: { requiresAuth: true }
+        meta: { requiresAuth: true },
     },
     {
         path: '/login',
@@ -67,8 +67,9 @@ const routes = [
     },
     {
         path: '/vacation',
+        name: 'Vacation',
         component: () => import('@v/vacation/VacationManagement.vue'),
-        meta: { requiresAuth: true }
+        meta: { requiresAuth: true },
     },
     {
         path: '/voteboard',
@@ -88,12 +89,12 @@ const routes = [
     {
         path: '/projectlist',
         component: () => import('@v/projectlist/TheProjectList.vue'),
-        meta: { requiresAuth: true }
+        meta: { requiresAuth: true },
     },
     {
         path: '/commuters',
         component: () => import('@v/commuters/TheCommuters.vue'),
-        meta: { requiresAuth: true }
+        meta: { requiresAuth: true },
     },
     {
         path: '/authorization',