개요
Template Compoennt 논의 및 분담
내용
Template 컴포넌트의 역할, Props 정하기 및 분배
- templates
- Button (주영)
- index.jsx
- default
- background: #F74F2A
- color: #FFFFFF
- border-radius
- width
- height
- font-size
- props
- style
- className
- children
- onClick
- Iconbutton (수림)
- index.jsx
- default
- width: 30px
- height: 30px
- props
- style
- className
- src
- onClick
- Selectbox (주영)
- index.jsx
- default
- width
- height
- props
- style
- className
- item
- onChange
- Input (효정)
- index.jsx
- default
- width: 324px
- height: 40px
- color
- font-size
- padding
- props
- placeholder
- name
- value
- defaultValue
- style
- className
- onChange
- Avatar (수림)
- index.jsx
- default
- width,height: 90px
- border-radius: 100%
- props
- style
- className
- src
- Divider (효정)
- index.jsx
- default
- width: 350px
- border: 1px solid #ccc
- props
- style
- className
- type (vertical, horizontal)
- Modal (효정)
- index.jsx
- default
- width:404px
- dim (bg mask)
- padding: 60px 40px 40px 50px
- border-radius: 10px
- dim > 없어지게, X클릭 > 없어지게
- props
- style
- className
- children
- Textarea (수림)
- index.jsx
- default (거래후기 모달)
- width
- height
- padding
- props
- style
- className
- name
- value
- onChange
- Radio (효정)
- index.jsx
- default (상품 글쓰기)
- width
- height
- props
- style
- className
- name
- value
- onClick || onChange
- Image (주영)
- index.jsx
- default (상품 리스트 이미지 pc)
- width
- height
- src (404이미지로 한다는 가정하에)
- lazy loading 적용 가능 하면 해주기
- 이미지가 없는 경우 404 이미지 처리
- style에 따라야해
- props
- style
- className
- alt
- src
- lazy
- threshold
- Message (주영)
- index.jsx
- default (쪽지 pc)
- width
- height
- props
- style
- className
- children
- Dialog (수림)
- index.jsx
- default (모달 예시)
- width
- height
- padding
- [] 항목 넘겨주면 자동으로 안에 내용 차게
- onClick
- props
- style
- className
- item
- Badge (수림)
- index.jsx
- default (상세보기 pc 예시)
- type 넘기면 style이 변경되게 만들기
- width
- height
- props
- style (선택)
- className
- children
- device (pc, mobile)
- type (거래완료, 예약중)