[Next.js] 전체화면 F12 설정

• 앱이 실행되면 모든 페이지에서 전체화면으로 보여졌으면 좋겠을 때!
• F11과 유사하게 작동하고 싶을 때!

한 번 진입하면 전체 화면이 계속 유지된다.

 

 

※ _app.js만 수정하면 된다.

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import { useEffect } from "react";

export default function App({ Component, pageProps }: AppProps) {
  useEffect(() => {
    const requestFullScreen = () => {
      const docElm = document.documentElement as HTMLElement & {
        mozRequestFullScreen?: () => Promise<void>;
        webkitRequestFullscreen?: () => Promise<void>;
        msRequestFullscreen?: () => Promise<void>;
      };
  
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
      } else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
      } else if (docElm.webkitRequestFullscreen) {
        docElm.webkitRequestFullscreen();
      } else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen();
      }
    };
  
    const handleFirstClick = () => {
      requestFullScreen();
      window.removeEventListener('click', handleFirstClick);
    };
  
    window.addEventListener('click', handleFirstClick);
  
    return () => window.removeEventListener('click', handleFirstClick);
  }, []);
  
  return <Component {...pageProps} />;
}

 

아래 코드를 통해서 그렇게 작동할 수 있는데,
처음 실행했을 때 꼭 "한번 클릭해야" 실행된다.

 

왜냐하면 브라우저 보안 정책 때문에 전체화면 진입은 반드시 사용자의 인터랙션(클릭 등)이 필요하다.

→ 자동 진입은 막혀 있어서

 

그래서 위 코드처럼 첫 클릭 이벤트에 진입하도록 트리거 걸어두면 된다.