MotionSheet

멈춤 위치, 튕기기, 스크롤 넘겨받기가 있는 아래·위 시트와 옆 서랍.

웹React Native겹침 화면

직접 해 보기

예제를 준비하는 중…

JavaScript가 꺼져 있습니다. 아래 코드가 예제 전체입니다.

App.jsx

import { useState } from 'react';
import { MotionHighlight, MotionSheet } from '@kkwaenggwari/animated-chorus';
import './styles.css';

const sorts = ['Newest', 'Popular', 'Price'];
const sizes = ['XS', 'S', 'M', 'L', 'XL'];
const colors = ['Any', 'Green', 'Sand', 'Ink'];

export default function App({ side = 'bottom', detents = 'two', modal = true }) {
  const [open, setOpen] = useState(false);
  const [sort, setSort] = useState('Popular');
  const [size, setSize] = useState('M');
  const [color, setColor] = useState('Any');

  return (
    <div className="page">
      <header>
        <strong>Shop</strong>
        <button className="open" onClick={() => setOpen(true)}>
          Filters · {sort} · {size}
        </button>
      </header>
      <div className="grid">
        {Array.from({ length: 6 }, (_, index) => (
          <span key={index} className="product" />
        ))}
      </div>
      <MotionSheet
        open={open}
        onOpenChange={setOpen}
        side={side}
        modal={modal}
        detents={detents === 'two' ? [0.55, 0.92] : ['content']}
        className={`sheet ${side}`}
      >
        <span className="handle" />
        {/* The action sits beside the title, so it is in reach at every detent. */}
        <div className="sheet-head">
          <h2>Filters</h2>
          <button className="apply" onClick={() => setOpen(false)}>
            Show results
          </button>
        </div>
        <p className="label">Sort by</p>
        <MotionHighlight
          items={sorts}
          value={sort}
          onValueChange={setSort}
          className="choices"
          itemClassName="choice"
          highlightClassName="choice-on"
        />
        <p className="label">Size</p>
        <MotionHighlight
          items={sizes}
          value={size}
          onValueChange={setSize}
          className="choices"
          itemClassName="choice"
          highlightClassName="choice-on"
        />
        <p className="label">Color</p>
        <MotionHighlight
          items={colors}
          value={color}
          onValueChange={setColor}
          className="choices"
          itemClassName="choice"
          highlightClassName="choice-on"
        />
      </MotionSheet>
    </div>
  );
}

styles.css

.page {
  display: grid;
  gap: 16px;
  min-height: 440px;
  padding: 20px;
  align-content: start;
}

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

header strong {
  font-size: 20px;
  color: #0e2e24;
}

.open {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #176b52;
  color: #fff;
  font:
    650 15px system-ui,
    sans-serif;
  cursor: pointer;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.product {
  aspect-ratio: 1;
  border-radius: 14px;
  background: #eaf6f0;
}

.product:nth-child(3n + 2) {
  background: #cfe8dc;
}

.sheet {
  gap: 10px;
  padding: 12px 22px 22px;
  background: #fff;
  box-shadow: 0 -8px 30px rgba(14, 46, 36, 0.18);
}

.sheet.bottom {
  border-radius: 22px 22px 0 0;
}

.sheet.top {
  border-radius: 0 0 22px 22px;
}

/* A top sheet is pulled from its bottom edge. */
.sheet.top .handle {
  order: 1;
  margin-top: 6px;
}

.sheet.end {
  width: min(340px, 86vw);
  border-radius: 22px 0 0 22px;
}

.handle {
  justify-self: center;
  align-self: center;
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: #cfe8dc;
}

.sheet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.sheet h2 {
  margin: 4px 0 0;
  font:
    750 22px system-ui,
    sans-serif;
  color: #0e2e24;
}

.label {
  margin: 8px 0 0;
  color: #5b616b;
  font-size: 14px;
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border-radius: 14px;
  background: #eaf6f0;
}

.choice {
  min-width: 52px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  background: none;
  font:
    600 14px system-ui,
    sans-serif;
  color: #0e2e24;
  cursor: pointer;
}

.choice-on {
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 0 1px #cfe8dc;
}

.apply {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: #176b52;
  color: #fff;
  font:
    650 15px system-ui,
    sans-serif;
  cursor: pointer;
}

가장 짧은 사용법

Filters.jsx

<MotionSheet open={open} onOpenChange={setOpen} detents={[0.45, 0.92]}>
  <FilterList />
</MotionSheet>;

대신 처리하는 일

드래그를 따라오고, 가장 큰 멈춤 위치 너머에서 버티며, 손을 뗀 속도로 멈춥니다. 튕기면 한 칸 이동하거나 닫힙니다.
터치 드래그가 스크롤 내용과 이어집니다. 아래로 당기면 먼저 내용을 맨 위까지 올린 뒤 시트가 움직입니다.
멈춤 위치는 화면 비율, 픽셀, 또는 내용 크기인 'content'로 정합니다.
모달 시트는 포커스를 안에 가두고 페이지를 비활성으로 만들며 Escape나 배경으로 닫힙니다.

이럴 때 쓰세요

필터 패널.
공유 메뉴.
side="start"로 만드는 내비게이션 서랍.

Props

Prop	타입	기본값	설명
`open`	`boolean`	`false`	시트를 보일지 여부.
`onOpenChange`	`(open) => void`		시트를 끌어서, 눌러서, Escape로 닫으면 `false`로 실행됩니다.
`detents`	`(number \| 'content')[]`	`['content']`	멈추는 크기. 화면 비율, 픽셀, 또는 `'content'`.
`detent`	`number`		제어하는 멈춤 위치 인덱스.
`defaultDetent`	`number`	`0`	`detent` 없이 열 때 쓰는 멈춤 위치 인덱스.
`onDetentChange`	`(index) => void`		시트가 멈춘 위치의 인덱스로 실행됩니다.
`side`	`'bottom' \| 'top' \| 'start' \| 'end'`	`'bottom'`	시트가 나오는 가장자리.
`modal`	`boolean`	`true`	배경을 깔고 포커스를 안에 가두며 페이지를 비활성으로 만듭니다.
`dismissible`	`boolean`	`true`	가장 작은 멈춤 위치 너머로 끌기, 배경, Escape로 닫힙니다.
`backdropClassName`	`string`		배경의 클래스. 인라인 스타일은 `backdropStyle`.
`transition`	`Transition`	`spring`	시간 곡선 `{ duration, easing }` 또는 스프링 `{ tempo: 'spring', spring }`. 스프링은 끊겨도 속도를 이어갑니다.

그 밖의 props는 그려지는 요소로 전달되므로 className, style, 이벤트 핸들러를 평소처럼 쓸 수 있습니다.

웹과 React Native

웹의 모달 시트는 네이티브 dialog이고, 패널은 className으로 꾸미는 세로 flex 요소입니다.

React Native에서는 투명한 Modal로 그려지고 뒤로 가기 버튼으로 닫힙니다. 안쪽 ScrollView는 자기 제스처를 유지하므로 시트는 손잡이, 머리글 같은 고정 영역에서 끕니다.

이 컴포넌트를 쓰는 예제

사진 피드사진을 넘기고, 썸네일로 이동하고, 어떤 사진이든 전체 화면으로 열고, 상세 정보를 끌어올립니다.MotionPagerMotionHighlightMotionZoomMotionSheet