fix: useFullScreen escKey가 적용안되는 문제 제거

.changeset/smart-ghosts-fetch.md

@@ -0,0 +1,5 @@
+---
+"@musma/react-utils": patch
+---
+
+fix: useFullScreen escKey event일때, 적용안돼는 문제 제거

packages/react-utils/src/hooks/useFullScreen.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 /**
  * @description
@@ -7,15 +7,28 @@ import { useCallback, useState } from 'react'
 export const useFullScreen = () => {
   const [isFullScreen, setFullScreen] = useState(Boolean(document.fullscreenElement))
 
-  const toggleFullScreen = useCallback(() => {
-    if (isFullScreen) {
+  // onClick 이벤트에 넣으세요
+  const toggleFullScreen = () => {
+    if (document.fullscreenElement) {
+      // 전체모드 해제
       document.exitFullscreen()
-    } else {
-      document.documentElement.requestFullscreen()
+      setFullScreen(false)
     }
 
-    setFullScreen((value) => !value)
-  }, [isFullScreen])
+    // 전체모드 실행
+    document.documentElement.requestFullscreen()
+    setFullScreen(true)
+  }
+
+  // 전체모드 실행될 때 + 사용자가 전체모드 이벤트를 사용할 때,
+  useEffect(() => {
+    const fullscreenchangeHandler = () => {
+      setFullScreen(Boolean(document.fullscreenElement))
+    }
+
+    window.addEventListener('fullscreenchange', fullscreenchangeHandler)
+    return () => window.removeEventListener('fullscreenchange', fullscreenchangeHandler)
+  }, [])
 
   return [isFullScreen, toggleFullScreen] as const
 }