tailwind sidebar transition속성으로 부드럽게 visibility 조절하기(feat: react)

/layouts/GlobalLayout.tsx

import React, { ReactNode, useState, useCallback, useEffect } from 'react';
import Headerbar from '../Components/Headerbar';
import Sidebar from '../Components/Sidebar';
import Footerbar from '../Components/Footerbar';

interface GlobalLayoutProps {
  children: ReactNode;
}
function GlobalLayout({ children }: GlobalLayoutProps) {
  const [visible, setVisible] = useState(true);

  const handleVisibleSidebar = useCallback(() => {
    window?.innerWidth < 1024 && setVisible((prev) => !prev);
  }, []);

   useEffect(() => {
    if (window) {
      const checkInnerWidth = function () {
        if (window?.innerWidth < 1024) {
          setVisible(false);
        } else {
          setVisible(true);
        }
      };
      window?.addEventListener('resize', checkInnerWidth);//실시간으로 브라우저 innerWidth 확인하기
      return () => window.removeEventListener('resize', checkInnerWidth);
    }
  }, []);

  return (
    <div>
      <Headerbar handleVisibleSidebar={handleVisibleSidebar} />
      <Sidebar visible={visible} />
      <div className="flex overflow-hidden bg-white pt-28 xs:pt-16">
        <div className="bg-gray-900 opacity-50 hidden fixed inset-0 z-10" id="sidebarBackdrop"></div>
        <div
          onClick={handleVisibleSidebar}
          id="main-content"
          className="h-full w-full bg-gray-50 relative overflow-y-auto lg:ml-64"
        >
          <div>{children}</div>
          <Footerbar />
          <p className="text-center text-sm text-gray-500 my-10">
            &copy; 2022{' '}
            <a href="#" className="hover:underline" rel="noreferrer" target="_blank">
              modument
            </a>
            . All rights reserved.
          </p>
        </div>
      </div>
      <script async defer src="https://buttons.github.io/buttons.js"></script>
    </div>
  );
}
export default GlobalLayout;

/components/Sidebar.tsx

 <aside
      id="sidebar"
      className={`fixed  ${
        !visible ? '-translate-x-full' : 'translate-x-0'
      }  lg:translate-x-0 z-20 h-full transform top-0 left-0 pt-16 flex lg:flex flex-shrink-0 flex-col w-64 ease-in-out transition-width duration-500`}
      aria-label="Sidebar"
    >
    ...
    
 </aside>

참고:
https://tailwindcomponents.com/component/tailwind-css-admin-dashboard-layout
https://dev.to/fayaz/making-a-navigation-drawer-sliding-sidebar-with-tailwindcss-blueprint-581l