frontend/src/common/components/layout/TopBar.tsx

@@ -3,6 +3,7 @@ import type { MainTab } from '../../types/navigation'
 import { useAuthStore } from '../../store/authStore'
 import { useMenuStore } from '../../store/menuStore'
 import { useMapStore } from '../../store/mapStore'
+import UserManualPopup from '../ui/UserManualPopup'
 
 interface TopBarProps {
   activeTab: MainTab
@@ -11,6 +12,7 @@ interface TopBarProps {
 
 export function TopBar({ activeTab, onTabChange }: TopBarProps) {
   const [showQuickMenu, setShowQuickMenu] = useState(false)
+  const [showManual, setShowManual] = useState(false)
   const quickMenuRef = useRef<HTMLDivElement>(null)
   const { hasPermission, user, logout } = useAuthStore()
   const { menuConfig, isLoaded } = useMenuStore()
@@ -173,10 +175,26 @@ export function TopBar({ activeTab, onTabChange }: TopBarProps) {
                   </div>
                 </button>
               ))}
+
+              <div className="my-1.5 border-t border-border" />
+
+              {/* 매뉴얼 */}
+              <button
+                onClick={() => {
+                  setShowManual(true)
+                  setShowQuickMenu(false)
+                }}
+                className="w-full px-3 py-2 flex items-center gap-2.5 text-[12px] text-text-2 hover:bg-[rgba(255,255,255,0.06)] hover:text-text-1 transition-all"
+              >
+                <span className="text-[13px]">&#x1F4D6;</span> 사용자 매뉴얼
+              </button>
             </div>
           )}
         </div>
       </div>
+
+      {/* 사용자 매뉴얼 팝업 */}
+      <UserManualPopup isOpen={showManual} onClose={() => setShowManual(false)} />
     </div>
   )
 }