[React] 리액트 전체화면 기능 예시 코드

기술 스택 : React, TS, MUI, styled-components

import { useState, useRef } from "react";
import { IconButton } from "@mui/material";
import { Fullscreen, FullscreenExit } from "@mui/icons-material";
import styled from "styled-components";

const Container = styled.div`
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1a1a1a;
  color: white;
`;

const FullscreenButton = styled(IconButton)`
  position: absolute;
  top: 16px;
  right: 16px;
  color: white;
`;

export default function FullscreenToggle() {
  const [isFullscreen, setIsFullscreen] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);

  const toggleFullscreen = () => {
    if (!document.fullscreenElement) {
      containerRef.current?.requestFullscreen().then(() => {
        setIsFullscreen(true);
      });
    } else {
      document.exitFullscreen().then(() => {
        setIsFullscreen(false);
      });
    }
  };

  return (
    <Container ref={containerRef}>
      <FullscreenButton onClick={toggleFullscreen}>
        {isFullscreen ? <FullscreenExit /> : <Fullscreen />}
      </FullscreenButton>
      <p>전체화면을 전환하려면 버튼을 클릭하세요.</p>
    </Container>
  );
}