diff --git a/src/components/mobile/SidebarMenu/index.tsx b/src/components/mobile/SidebarMenu/index.tsx
index 5f86923..a722348 100644
--- a/src/components/mobile/SidebarMenu/index.tsx
+++ b/src/components/mobile/SidebarMenu/index.tsx
@@ -7,6 +7,7 @@ import IconUserAlarm from 'public/assets/icons/side-menu/user-alarm.svg';
 import IconAdminDashboard from 'public/assets/icons/side-menu/admin-dashboard.svg';
 import IconAdminAlarm from 'public/assets/icons/side-menu/admin-alarm.svg';
 import IconLogout from 'public/assets/icons/side-menu/logout.svg';
+import { useRouter } from 'next/navigation';
 
 interface SidebarProps {
   isOpen: boolean;
@@ -33,17 +34,18 @@ const adminItems = [
   },
 ];
 
-const logoutItem = {
-  icon: IconLogout,
-  label: '로그아웃',
-  href: '/mobile/sign-in',
-};
-
 export default function Sidebar({
   isOpen,
   onClose,
   role = 'USER', // 여기서 관리자 여부 설정
 }: SidebarProps) {
+  const router = useRouter();
+
+  const handleLogout = () => {
+    localStorage.clear(); // 로컬 스토리지 전체 삭제
+    router.replace('/mobile/sign-in'); // 로그인 페이지로 이동
+  };
+
   return (
     <>
       {/* 오버레이 배경 */}
@@ -113,14 +115,15 @@ export default function Sidebar({
 
           {/* 로그아웃 버튼 */}
           <ul className="text-body-2-normal_semi font-semibold text-black-primary">
-            <li key={logoutItem.label}>
-              <a
-                href={logoutItem.href}
-                className="mt-3 flex items-center gap-3 rounded p-2 hover:bg-gray-100"
+            <li key="logout">
+              <button
+                type="button"
+                onClick={handleLogout}
+                className="mt-3 flex w-full items-center gap-3 rounded p-2 hover:bg-gray-100"
               >
-                <logoutItem.icon />
-                {logoutItem.label}
-              </a>
+                <IconLogout />
+                로그아웃
+              </button>
             </li>
           </ul>
         </nav>