Drawer 서랍

화면 가장자리에서 미끄러져 나오는 서랍 패널로, 세부 정보 확인이나 폼 작성 등 더 넓은 표시 공간이 필요한 상황에 자주 사용됩니다. Dialog와의 차이: 가장자리에 붙어서 표시되고, 방향에 따라 슬라이드하며, 패널 크기가 한쪽 가장자리에만 적용됩니다 (너비 또는 높이).

기본 사용법

네 방향과 사용자 지정 크기

import { useState } from 'react'
import { LhButton, LhDrawer } from '@lh-ui/react'

export default function Demo() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <LhButton onClick={() => setOpen(true)}>서랍 열기</LhButton>
      <LhDrawer title="서랍 제목" open={open} onClose={() => setOpen(false)}>
        서랍 콘텐츠
      </LhDrawer>
    </>
  )
}

Drawer Props

프로퍼티	설명	타입	선택 가능한 값	기본값
children	본문 콘텐츠	`ReactNode`	—	—
open	표시 여부 (제어)	`boolean`	—	`false`
title	제목	`ReactNode`	—	—
direction	슬라이드 방향	`'right' \| 'left' \| 'top' \| 'bottom'`	—	`'right'`
size	패널 크기 (숫자 → px, 문자열은 퍼센트 지원)	`string \| number`	—	`'30%'`
showClose	닫기 버튼 표시 여부	`boolean`	—	`true`
maskClosable	마스크 클릭으로 닫기 여부	`boolean`	—	`false`
closeOnEsc	Esc 누름으로 닫기 여부	`boolean`	—	`true`
lockScroll	body 스크롤 잠금 여부 (잠글 때 포커스 트랩도 함께 적용)	`boolean`	—	`true`
beforeClose	닫기 전 가로채기, `done`을 호출해야 계속 진행	`(done: () => void) => void`	—	—
zIndex	z-index (미전달 시 전역 증가 체계 사용)	`number`	—	—
header	헤더 콘텐츠 (기본 제목 표시줄 덮어씀)	`ReactNode`	—	—
footer	바닥 콘텐츠 (버튼 영역)	`ReactNode`	—	—
themeVars	컴포넌트 수준 테마 변수	`Record<string, string>`	—	—
sx	빠른 레이아웃 프로퍼티 (패널에 적용)	`SxProps`	—	—

Drawer 이벤트

이벤트	설명	콜백 시그니처	Vue 대응
onClose	닫기 요청 (마스크 / Esc / 닫기 버튼, `beforeClose` 가로채기를 거쳐 발생)	`() => void`	`update:modelValue` / `close`
onOpen	열릴 때 발생 (DOM 마운트 후, 등장 애니메이션 전)	`() => void`	`open`
onOpened	열림 애니메이션 종료	`() => void`	`opened`
onCloseStart	닫기 요청이 수락되어 퇴장 애니메이션 시작	`() => void`	—
onClosed	닫힘 애니메이션 종료, DOM 언마운트 후	`() => void`	`closed`

ref

forwardRef<LhDrawerInstance>. LhDrawerInstance는 close() (beforeClose 가로채기 통과)와 isOpen을 노출합니다.

마스크는 기본적으로 클릭이 관통하지 않음

maskClosable의 기본값은 false입니다 (core의 canDrawerClose가 마스크 클릭을 기본적으로 거부). 실수로 닫히는 것을 방지합니다. plus의 closeOnClickModal 기본값은 true이므로, 마이그레이션 시 명시적으로 선언해야 합니다.

포커스 트랩

lockScroll이 켜져 있을 때만 포커스를 가둡니다 (shouldDrawerTrapFocus). 서랍은 가벼운 패널로 자주 사용되어, 스크롤을 잠그지 않을 때는 뒤에 있는 폼의 Tab 순서를 보존합니다. 닫을 때 포커스를 반환합니다.

크기와 방향

size가 숫자면 px로 정규화됩니다. 좌우 방향은 패널 width에, 상하 방향은 height에 적용됩니다.

스타일

import '@lh-ui/react/style/drawer'

기본 사용법​

Drawer Props​

Drawer 이벤트​

ref​

스타일​

기본 사용법

Drawer Props

Drawer 이벤트

ref

스타일