DraggableBottomSheet

Description

DraggableBottomSheet는 하단에서 위로 드래그하여 열 수 있는 시트 컴포넌트입니다. 바를 드래그하거나 탭하여 열고 닫을 수 있으며, 애니메이션과 함께 부드럽게 동작합니다. 모바일에서 자주 사용되는 UI 패턴을 구현한 컴포넌트입니다.

"use client";

import { useState } from "react";
import { DraggableBottomSheet } from "@/registry/ui/draggable-bottom-sheet";
import { Button } from "@/shared/ui/button";

export const DraggableBottomSheetDemo = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <DraggableBottomSheet
      isDrawerOpen={isOpen}
      handleDrawerOpen={setIsOpen}
      bottomDrawerContent={
        <div>
          <h3>제목</h3>
          <p>내용입니다.</p>
        </div>
      }
      bottomDrawerButton={<Button className="w-full">확인</Button>}
    />
  );
};

Installation

pnpx shadcn add @allra/draggable-bottom-sheet

Usage

import { DraggableBottomSheet } from "@/registry/ui/draggable-bottom-sheet";

"use client";

import { useState } from "react";
import { DraggableBottomSheet } from "@/registry/ui/draggable-bottom-sheet";
import { Button } from "@/shared/ui/button";

export default function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <DraggableBottomSheet
      isDrawerOpen={isOpen}
      handleDrawerOpen={setIsOpen}
      bottomDrawerContent={
        <div className="space-y-4">
          <h3 className="font-semibold text-body-1">제목</h3>
          <p className="text-body-3">내용입니다.</p>
        </div>
      }
      bottomDrawerButton={<Button className="w-full">확인</Button>}
    />
  );
}

Props

Prop	Type	Default	Description
`isDrawerOpen`	`boolean`	`required`	시트 열림/닫힘 상태
`handleDrawerOpen`	`(isOpen: boolean) => void`	`required`	시트 열림/닫힘 상태 변경 핸들러
`threshold`	`number`	`20`	드래그 임계값 (픽셀)
`bottomDrawerContent`	`React.ReactNode`	`required`	시트가 열렸을 때 표시될 내용
`bottomDrawerButton`	`React.ReactNode`	`required`	시트 하단에 표시될 버튼

Examples

기본 사용

기본적인 드래그 가능한 하단 시트 사용 예시입니다.

제목

바를 드래그하여 위로 올리면 내용이 표시됩니다.

아래로 드래그하면 다시 닫힙니다.

const [isOpen, setIsOpen] = useState(false);

<DraggableBottomSheet
  isDrawerOpen={isOpen}
  handleDrawerOpen={setIsOpen}
  bottomDrawerContent={
    <div>
      <h3>제목</h3>
      <p>내용입니다.</p>
    </div>
  }
  bottomDrawerButton={<Button className="w-full">확인</Button>}