diff --git a/public/css/custom.css b/public/css/custom.css
index efb780b..e57b64f 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -617,6 +617,10 @@
     .layout-page {
         margin-right: 0 !important;
     }
+
+    #app-calendar-sidebar {
+        width: 100%;
+    }
 }
 
 /* 세로모드 모바일 디바이스 (가로 해상도가 576px 보다 작은 화면에 적용)  */
diff --git a/src/components/commuters/CommuterCalendar.vue b/src/components/commuters/CommuterCalendar.vue
index c350655..de30591 100644
--- a/src/components/commuters/CommuterCalendar.vue
+++ b/src/components/commuters/CommuterCalendar.vue
@@ -2,7 +2,7 @@
     <div class="container-xxl flex-grow-1 container-p-y pb-0">
         <div class="card app-calendar-wrapper">
             <div class="row g-0">
-                <div class="col-3 border-end text-center">
+                <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" @error="$event.target.src = '/img/icons/icon.png'"/>
                         <p class="mt-2 fw-bold">