Web - SectionSheet Panel

정의

SectionSheet

최적화 대상

Desktop

Mobile

기획 배포

완료

디자인 가이드 배포

완료

개발 코드 배포

완료 (1.5.0)

background

transparent

• ui_cpnt_sheet_base_03

white

• ui_cpnt_sheet_base_white

black

• ui_cpnt_sheet_base_black

base1

• ui_cpnt_sheet_base_01

base2

• ui_cpnt_sheet_base_02

base3

• ui_cpnt_sheet_base

border

grey

• ui_cpnt_sheet_border_01

blue

• ui_cpnt_sheet_border_02

green

• ui_cpnt_sheet_border_03

string

-

string

-

enum

'transparent'

'transparent'

투명 배경

'white'

톤에 상관없이 white로 보여져야 할 때

'black'

톤에 상관없이 black으로 보여져야 할 때

'base1'

톤에 따라 변동 / 라이트톤일 때 흰색

'base2'

톤에 따라 변동 / 옅은 회색(grey50)

'base3'

톤에 따라 변동 / 옅은 회색(grey30)

enum

-

정해져 있는 컬러 값 중 하나를 부여합니다. (ui_xxx의 형식입니다.)

enum

'none'

'none'

'use'

enum

1

1

1px

2

2px

enum

'grey'

'grey'

'blue'

'green'

enum

-

정해져 있는 컬러 값 중 하나를 부여합니다. (ui_xxx의 형식입니다.)

enum

'rectangle'

'rectangle'

'round'

enum

24

8

16

24

enum

'spacing_e'

'none'

'spacing_a'

'spacing_b'

'spacing_c'

'spacing_d'

'spacing_e'

'spacing_f'

'spacing_g'

'spacing_h'

'spacing_i'

'spacing_j'

'spacing_k'

'spacing_l'

'spacing_m'

'spacing_n'

enum

'spacing_e'

'none'

'spacing_a'

'spacing_b'

'spacing_c'

'spacing_d'

'spacing_e'

'spacing_f'

'spacing_g'

'spacing_h'

'spacing_i'

'spacing_j'

'spacing_k'

'spacing_l'

'spacing_m'

'spacing_n'

enum

'spacing_e'

'none'

'spacing_a'

'spacing_b'

'spacing_c'

'spacing_d'

'spacing_e'

'spacing_f'

'spacing_g'

'spacing_h'

'spacing_i'

'spacing_j'

'spacing_k'

'spacing_l'

'spacing_m'

'spacing_n'

enum

'spacing_e'

'none'

'spacing_a'

'spacing_b'

'spacing_c'

'spacing_d'

'spacing_e'

'spacing_f'

'spacing_g'

'spacing_h'

'spacing_i'

'spacing_j'

'spacing_k'

'spacing_l'

'spacing_m'

'spacing_n'

CSSProperties

-

React.ReactNode

-

(e: React.MouseEvent<HTMLDivElement>) => void;

-

김혜진, 박윤규

• 2022/10/24: padding관련 prop들에 ‘none' value 추가 - 안은수

• 2022/10/18 : prop명 변경 (backgroundColor → backgroundColorTheme, backgroundColorKey → overrideBackgroundColorKey, borderColor → borderColorTheme, borderColorKey → overrideBorderColorKey) - 안은수

• 2022/10/14 : 개발 구현 사항에 맞춰 property 재정리 - 안은수

• 2022/06/23 : Property 1차 정리 - 김혜진

• 2022/04/28 : 최초 작성 - 김혜진