Drawer

Import

<link rel="stylesheet" href="/guide/css/base/index.css" />
<link rel="stylesheet" href="/guide/css/components/button.css" />
<link rel="stylesheet" href="/guide/css/components/drawer.css" />

<script src="/guide/js/components/drawer.js"></script>

Live

Variants

With Footer

Title

No Footer

Title

Specs

파트 속성 값 토큰
Panel Width 480px —
Panel Border Radius 12px (좌상·좌하) --radius-lg
Panel Shadow -10px 0 30px rgba(0,0,0,0.15) —
Overlay Background rgba(0,0,0,0.4) —
Header Height 64px —
Header Padding 0 24px --spacing-6
Body Padding 24px --spacing-6
Footer Padding 16px 24px --spacing-4 / --spacing-6
Animation Duration 0.3s --duration-slow

Code

HTML

<!-- 열기 트리거 -->
<button data-drawer-open="my-drawer">드로어 열기</button>

<!-- 드로어 (Footer 포함) -->
<div class="drawer" id="my-drawer" hidden>
  <div class="drawer__backdrop"></div>
  <div class="drawer__panel">
    <div class="drawer__header">
      <h2 class="drawer__title">Title</h2>
      <button class="drawer__close" aria-label="닫기"></button>
    </div>
    <div class="drawer__body">
      <!-- 내용 -->
    </div>
    <div class="drawer__footer">
      <button class="button button--secondary button--sm">취소</button>
      <button class="button button--primary button--sm">저장하기</button>
    </div>
  </div>
</div>

<!-- 드로어 (Footer 없음) -->
<div class="drawer" id="my-drawer-no-footer" hidden>
  <div class="drawer__backdrop"></div>
  <div class="drawer__panel">
    <div class="drawer__header">
      <h2 class="drawer__title">Title</h2>
      <button class="drawer__close" aria-label="닫기"></button>
    </div>
    <div class="drawer__body">
      <!-- 내용 -->
    </div>
  </div>
</div>

<script src="/guide/js/components/drawer.js"></script>

JavaScript

/* drawer.js 포함 시 자동 동작 */

/* JS로 직접 열기 */
document.getElementById('my-btn').addEventListener('click', function () {
  var drawer = document.getElementById('my-drawer');
  drawer.removeAttribute('hidden');
  requestAnimationFrame(function () {
    requestAnimationFrame(function () {
      drawer.classList.add('is-open');
    });
  });
});

/* JS로 직접 닫기 */
function closeDrawer(drawer) {
  drawer.classList.remove('is-open');
  var panel = drawer.querySelector('.drawer__panel');
  panel.addEventListener('transitionend', function handler(e) {
    if (e.propertyName !== 'transform') return;
    panel.removeEventListener('transitionend', handler);
    drawer.setAttribute('hidden', '');
  });
}

Classes

클래스 타입 설명
.drawer 루트 오버레이 컨테이너. hidden 속성으로 표시/숨김
.drawer.is-open 수정자 JS가 부여 — 패널 슬라이드인 + 배경 페이드인 트리거
.drawer__backdrop 요소 반투명 배경 (클릭 시 닫힘)
.drawer__panel 요소 실제 드로어 패널 (480px, 오른쪽 고정)
.drawer__header 요소 제목 + 닫기 버튼 행 (64px)
.drawer__title 요소 드로어 제목 (Paperlogy Bold 24px)
.drawer__close 요소 닫기 버튼. JS가 이벤트 감지
.drawer__body 요소 본문 영역 (flex: 1, overflow-y: auto)
.drawer__footer 요소 하단 버튼 영역 (선택 사항, justify-content: flex-end)