feat(manual): 사용자 매뉴얼 팝업 기능 추가

- 퀵 메뉴에 '사용자 매뉴얼' 버튼 추가 (위성영상 아래)
- UserManualPopup 컴포넌트 신규 생성 (77개 화면, 8개 챕터)
- 각 화면별 스크린샷 이미지 77장 포함 (/public/manual/)
- 라이트박스 이미지 확대, 전체 열기/닫기, 챕터 네비게이션

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>
   )
 }