refactor: change FullScreen functional Components

src/components/functional/FullScreen/index.test.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import { render, screen, fireEvent } from '@testing-library/react';
 
 import '@testing-library/jest-dom';
@@ -61,7 +59,7 @@ describe('functional/FullScreen', () => {
     );
 
     expect(screen.getByRole('button')).toHaveClass(
-      'absolute right-0 bottom-0 p-2'
+      'absolute right-0 bottom-0 p-2 z-50'
     );
   });
 });

src/components/functional/FullScreen/index.tsx

@@ -1,41 +1,35 @@
-type Props = {
-  children: ReactNode;
-};
 import type { ReactNode } from 'react';
 
 import { Maximize, Minimize } from 'lucide-react';
 import { FullScreen as ReactFullScreen } from 'react-full-screen';
 
 import { useFullScreen } from './hook';
+type Props = {
+  children: ReactNode;
+};
 
 export const FullScreen: React.FC<Props> = ({ children }) => {
   const { handle, handleClick } = useFullScreen();
   return (
     <div className="relative select-none h-full w-full">
-      {!handle.active && (
+      <ReactFullScreen handle={handle} className="relative h-full w-full">
+        {children}
         <button
           onClick={handleClick}
-          className="absolute right-0 bottom-0 z-50"
+          className="absolute right-0 bottom-0 p-2 z-50"
         >
-          <Maximize
-            className="dark:text-black text-white shadow-black drop-shadow"
-            size={36}
-          />
-        </button>
-      )}
-      <ReactFullScreen handle={handle} className="relative h-full w-full">
-        {children}
-        {handle.active && (
-          <button
-            onClick={handleClick}
-            className="absolute right-0 bottom-0 p-2"
-          >
+          {handle.active ? (
             <Minimize
               className="dark:text-black text-white shadow-black drop-shadow"
               size={36}
             />
-          </button>
-        )}
+          ) : (
+            <Maximize
+              className="dark:text-black text-white shadow-black drop-shadow"
+              size={36}
+            />
+          )}
+        </button>
       </ReactFullScreen>
     </div>
   );