Bottom Sheet / Survey

GUIDE

Bottom sheet는 화면 하단에서 올라오며 유저에게 추가적인 정보를 보여주는 레이어입니다.
Non-modal standard bottom sheet로서 화면 하단에 머무르며 주 컨텐츠를 보조하는 역할을 합니다.
사용자는 bottom sheet와 화면의 나머지 부분을 보고 상호 작용할 수 있어 멀티태스킹에 유용합니다.

---

ANATOMY

• 1. Base layer

  메인 컨텐츠를 다루는 기본 레이어입니다. 일반적인 페이지와 동일하게 동작하고, 펼침 여부와 상관 없이 
스크롤이 가능합니다.

• 2. Header area

  별도로 정의된 조건 하에 항시 노출되는 영역입니다.

• 3. Title area

  Bottom sheet의 기능에 대해 안내하는 영역입니다. Header area에 위치하여 항시 노출되나, 조건에 따라 다른 문구가 노출될 수도 있습니다.

• 4. Contents area

  Bottom sheet 내부에 인터렉티브한 컨텐츠들을 넣는 공간입니다.

• 5. Submit Button

  버튼을 누르면 입력된 내용이 데이터에 전송되며, 이후에 동일 페이지에 동일한 bottom sheet가 노출되지 않습니다.

• 6. Handle Button

  Sheet를 펼치거나 숨길 수 있는 버튼입니다. 펼침 여부에 따라 화살표의 방향이 달라지며, 입력 중이던 내용이 있을 경우 숨기기를 눌러도 내용은 유지되지만, 해당 페이지를 벗어날 경우 입력중인 내용은 모두 사라집니다.

---

SIZE

default width 312px

• 디바이스 환경과 무관하게 컨텐츠의 양에 맞춰 조절합니다.

• 타이틀이 max width를 초과하는 경우 줄바꿈이 발생하지만, 2줄을 초과하지 않습니다.

max height 394px

• max-height 까지 글자수만큼 프레임이 위로 길어짐

• pc : 394px 이후 스크롤


• mobile : 304px 이후 스크롤

---

INTERACTION

Survey Bottom sheet의 상태별 정의는 다음과 같습니다.

---

PLACEMENT

• mobile : 중앙 하단 고정, 좌우 마진 24px

• tablet~desktop : 우측 하단

---

USAGE

Rating

10점 만점 까지 점수를 자유롭게 껐다 켤 수 있습니다.

Dark mode

페이지 구성에 따라 톤 변화를 주어 대비 효과를 달리 설정할 수 있습니다.

Optional

optional의 checkbox 외에 다른 컴포넌트를 삽입하여 다른 타입의 데이터를 구할 수 있습니다.