useBottomSheet

사용하기

import {
  BottomSheet,
  BottomSheetTrigger,
  BottomSheetContent,
  BottomSheetHeader,
  BottomSheetHeaderDescription,
  BottomSheetCta,
  Button,
} from "@/components/ui";

export function FilterSheet() {
  return (
    <BottomSheet>
      <BottomSheetTrigger asChild>
        <Button variant="secondary">필터</Button>
      </BottomSheetTrigger>
      <BottomSheetContent
        header={<BottomSheetHeader>필터</BottomSheetHeader>}
        headerDescription={<BottomSheetHeaderDescription>기간을 선택해주세요</BottomSheetHeaderDescription>}
        maxHeight={320}
        expandedMaxHeight={520}
        cta={<BottomSheetCta>적용</BottomSheetCta>}
      >
        {/* 본문 */}
      </BottomSheetContent>
    </BottomSheet>
  );
}

드래그 UX

헤더를 위로 당기면 expandedMaxHeight까지 펼쳐지고, 아래로 당기면 닫혀요. expandBottomSheet=false로 확장 동작을 끌 수 있어요.