21.08.27 컴포넌트 및 브랜치 전략 관련 회의

[cyjo9603]

components summary spec

찬영

• Input
• Selector
• Upload
• Spinner

지훈

• Radio
• CheckBox
• Switch
• Typography

승규

• Button
• Textarea
• Label
• Dropdown

Undetermined

• DatePicker
• DateRangePicker
• Calendar
• confirm
• modal
• Toast

버전관리

v0.1

master -> devlop/0.1.0 -> feature

release/0.1.0 < tagging

[cyjo9603]

Button

• properties
  • uiType: 'text'(default) | 'filled' | 'outlined'
    • Button 컴포넌트 UI type
  • color: 협의 필요
  • type: 'button'(default) | 'submit' | 'reset'
    • HTML Button tag type
  • shape: 'square'(default) | 'circle'
    • component 모서리 형태 (사각형, 원형)
  • size: 'small' | 'medium'(default) | 'large'
  • icon: Component
  • iconOptions: 아이콘 위치, 사이즈 등 설정, 객체로 값 입력받음
  • disalbed: boolean
  • loading: boolean
    • 로딩 시 spinner 아이콘 표시
  • className: string
  • ref: React.forwardRef
• evnet handlers
  • onClick

Input

• properties
  • value
  • defaultValue
  • placeholder
  • uiType: 'underline'(default) | 'bordered' | 'ghost'
  • icon: Component
  • iconOptions: 아이콘 위치, 사이즈 등 설정, 객체로 값 입력받음
  • size: 'small' | 'medium'(default) | 'large' | 'max'
  • showLength: boolean
    • grapheme 기준 글자 수 산정
  • allowClear: boolean
  • error: 에러 메시지, 에러 상태 등을 객체로 값 입력받음
  • disabled: boolean
  • readonly: boolean
  • className: string
  • ref: React.forwardRef
• evnet handlers
  • onChange
  • onEnter

Input.Number

• range: {max, min}
• showComma: boolean
• showLength: 없음

Input.Password

• visiblePassword

Selector

• properties
  • value
  • defaultValue
  • placeholder
  • uiType: 'underline'(default) | 'bordered' | 'ghost'
  • filter
  • loading: boolean
    • 로딩 시 spinner 아이콘 표시
  • size: 'small' | 'medium'(default) | 'large'
  • allowClear: boolean
  • error: 에러 메시지, 에러 상태 등을 객체로 값 입력받음
  • disabled: boolean
  • readonly: boolean
  • className: string
  • dropdownClassName: string
  • ref: React.forwardRef
• evnet handlers
  • onSelect
  • onBlur
  • onFocus

Selector.OptionGroup

• label: string - className: string

Selector.Option

• key
• value
• disable
• title
• className: string

Upload

Spinner

• properties
  • delay: number (ms)
  • size: 'small' | 'medium'(default) | 'large'
  • spinning: boolean
  • className: string

[hoo00nn]

작성중

Dropdown

disabled: boolean
checked: boolean
readonly: boolean
className: string
placeholder: string
loading: boolean
value: string
defaultValue: string
items: <dropboxItem>
onClick
onChange

Radio

checked: boolean
defaultChecked: boolean
disabled: boolean
readonly: boolean
value: string
className: string
size: 'sm' | 'md' | 'lg'
Icon
onChange
onClick

Checkbox

type: 태그 형태 | 기본 체크박스
checked: boolean
defaultChecked: boolean
disabled: boolean
readonly: boolean
className: string
name: string
value: string
onChange
onClick

Switch

checked: boolean
defaultChecked: boolean
size: 'sm' | 'md' | 'lg'
readonly: boolean
className: string
onChange
onClick

Typography

Label

[KIMSEUNGGYU]

공통적으로 고려

• size naming / value
• shape naming
  antd 따라가기

Button

properties

children: ReactNode

type?: "filled" | "outlined" | "text" // filled
size?: 'small' | 'middle' | 'large' // middle
icon?: Component
disabled?: boolean // false
className?: string // 
shape?: 'default' | 'circle' | 'round' // default
htmlType?: "button" | "reset" | "submit" // button
block?: boolean // 부모 요소만큼 사이즈를 100% 먹음.

color??: string // 어떤 컬러? 배경색?, font-color?
loading??: boolean

event

onClick?: f => f

Textarea

properties

value: string
defaultValue: string
placeholder: string
readonly: boolean
disabled: boolean
cols??: string
rows??: string
maxLength: number
minLength??: number // ???
className: string
ref: React.forwardRef

form??: string // ???
name??: string // ???
required??: boolean // ???

showCount: boolean | function
autoSize: boolean | object
isResize?: boolean // 얘는 autoSize 를 기준으로 할 지, 아님 따로 속성으로 지정할지
size?: 'small' | 'middle' | 'large' // 논의 필요

allowClear: boolean
bordered: boolean

event

onChange: f => f
onResize?: f => f
onPressEnter?: f => f

Label

• Label 에 대해서도 찾아 봤는데 label 을 굳이 만들어야 하나?? 라는 의문이 들었음.
• 일반적으로 label 은 checkbox, input 등 연결 시켜 주는 요소로 사용하게 되는데... 그래서 UI 적으로 어떻게 만들어야 하나... 고민 중이긴 하지만, UI 컴포넌트로 꼭 필요한 요소인지 모르겠음..

htmlFor: string

Dropdown