diff --git a/frontend/lib/registry/pop-components/pop-profile.tsx b/frontend/lib/registry/pop-components/pop-profile.tsx index 325b3ea3..ed7a5962 100644 --- a/frontend/lib/registry/pop-components/pop-profile.tsx +++ b/frontend/lib/registry/pop-components/pop-profile.tsx @@ -1,6 +1,6 @@ "use client"; -import React, { useState, useMemo } from "react"; +import React, { useState, useMemo, useEffect, useCallback } from "react"; import { useRouter } from "next/navigation"; import { cn } from "@/lib/utils"; import { Label } from "@/components/ui/label"; @@ -17,7 +17,7 @@ import { PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; -import { Monitor, LayoutGrid, LogOut, UserCircle } from "lucide-react"; +import { Monitor, LayoutGrid, LogOut, UserCircle, Maximize2, Minimize2 } from "lucide-react"; import { PopComponentRegistry } from "@/lib/registry/PopComponentRegistry"; import { useAuth } from "@/hooks/useAuth"; @@ -31,6 +31,7 @@ export interface PopProfileConfig { avatarSize?: AvatarSize; showDashboardLink?: boolean; showPcMode?: boolean; + showAppMode?: boolean; showLogout?: boolean; } @@ -38,6 +39,7 @@ const DEFAULT_CONFIG: PopProfileConfig = { avatarSize: "md", showDashboardLink: true, showPcMode: true, + showAppMode: true, showLogout: true, }; @@ -67,6 +69,33 @@ function PopProfileComponent({ config: rawConfig }: PopProfileComponentProps) { const router = useRouter(); const { user, isLoggedIn, logout } = useAuth(); const [open, setOpen] = useState(false); + const [isFullscreen, setIsFullscreen] = useState(false); + + // 풀스크린 상태 변경 감지 + useEffect(() => { + const handleFullscreenChange = () => { + setIsFullscreen(!!document.fullscreenElement); + }; + document.addEventListener("fullscreenchange", handleFullscreenChange); + // 초기 상태 동기화 + setIsFullscreen(!!document.fullscreenElement); + return () => { + document.removeEventListener("fullscreenchange", handleFullscreenChange); + }; + }, []); + + const handleAppMode = useCallback(async () => { + setOpen(false); + try { + if (document.fullscreenElement) { + await document.exitFullscreen(); + } else { + await document.documentElement.requestFullscreen(); + } + } catch { + // 풀스크린 API 미지원 또는 사용자 거부 + } + }, []); const config = useMemo(() => ({ ...DEFAULT_CONFIG, @@ -180,6 +209,20 @@ function PopProfileComponent({ config: rawConfig }: PopProfileComponentProps) { PC 모드 )} + {config.showAppMode && ( + + )} {config.showLogout && ( <>
@@ -276,6 +319,14 @@ function PopProfileConfigPanel({ config: rawConfig, onUpdate }: PopProfileConfig /> +