Bottom Sheet 라이브러리 비교

react-modal-sheet 추천:

• 활발한 유지보수 (v5 최근 릴리즈)
• Framer Motion 기반, Compound component 패턴
• avoidKeyboard, disableDismiss 등 유용한 옵션

import { Sheet } from 'react-modal-sheet'

<Sheet isOpen={isOpen} onClose={() => setOpen(false)}>
  <Sheet.Container>
    <Sheet.Header />
    <Sheet.Content>콘텐츠</Sheet.Content>
  </Sheet.Container>
  <Sheet.Backdrop />
</Sheet>

---

• react-modal-sheet
• vaul - Radix 기반 대안
• Material Design - Bottom Sheet
• Apple HIG - Sheet

---

가상 키보드와 fixed

• https://saricden.com/how-to-make-fixed-elements-respect-the-virtual-keyboard-on-ios
• https://sophia-dev.io/blog/watching-keyboard-status-with-web-apis
• https://ishadeed.com/article/virtual-keyboard-api/
• https://velog.io/@th_velog/%EC%9B%B9%EB%B7%B0-Fixed-%EA%B0%80%EC%83%81-%ED%82%A4%EB%B3%B4%EB%93%9C-VisualViewport-%EC%82%AC%EC%9A%A9
• https://jooonho.dev/web/2023-01-09-webview-issue/

모달과 스크롤 잠금

• https://pqina.nl/blog/how-to-prevent-scrolling-the-page-on-ios-safari/
• https://github.com/willmcpo/body-scroll-lock
• https://www.developerway.com/posts/hard-react-questions-and-modal-dialog
• https://zenn.dev/lclco/articles/f5b20817a15b9a
• https://zenn.dev/nihashi/articles/4db670877ee5fe

sticky

• https://ryanmulligan.dev/blog/sticky-header-scroll-shadow/
• https://www.taniarascia.com/horizontal-scroll-fixed-headers-table/
• https://www.paigeniedringhaus.com/blog/use-css-grid-to-make-a-fixed-sidebar-with-scrollable-main-body
• https://utilitybend.com/blog/is-the-sticky-thing-stuck-is-the-snappy-item-snapped-a-look-at-state-queries-in-css
• https://css-tricks.com/how-to-make-a-scroll-to-select-form-control/