[React] BottomSheet 코드

import './App.css';
import { BottomSheet } from 'react-spring-bottom-sheet'
import { useState,useRef,useEffect } from 'react'
import 'react-spring-bottom-sheet/dist/style.css'
function App() {
  const [open, setOpen] = useState(true)
  const focusRef = useRef();

  useEffect(() => {
    // Setting focus is to aid keyboard and screen reader nav when activating this iframe
    focusRef.current.focus()
  }, [])


  return (
    <>
        <button onClick={() => setOpen((open) => !open)} ref={focusRef}>
          {open ? 'Close' : 'Open'}
        </button>

        <BottomSheet
          open={open}
          onDismiss={() => setOpen(false)}
          skipInitialTransition
          initialFocusRef={focusRef}
          expandOnContentDrag={open}
          snapPoints={({ maxHeight }) => [maxHeight * 0.6]}
        >
          
         <div>
            <p>
              When <div>blocking</div> is <div>false</div> it's possible to
              use the Bottom Sheet as an height adjustable sidebar/panel.
            </p>
            <p>
              You can combine this with <div>onDismissable</div> to fine-tune
              the behavior you want.
            </p>
          </div>
        </BottomSheet>
    </>
  );
}

export default App;