일시 : 2022.07.13 21:00~22:10
주제 : 구현할 컴포넌트 속성 정의 및 역할 배분
주요 내용 :
PR 리뷰 관련 짧은 의견 논의
- 네이밍 컨벤션 대문자,
- import 시 namespace 사용으로 합의
구분할 컴포넌트 분리
스타일 컴포넌트 만으로 구현해야 하기에, 공통 컴포넌트이며 + 스타일 변화로만 해결할 수 있는 부분을 선정했습니다.
추가적으로 있으면 좋겠다는 컴포넌트가 있으면 댓글로 의견 달아주세요!
Text 정환
사용자가 type만 입력하면, foundation/Text 에 있는 속성을 자동으로 적용시켜주는 컴포넌트.
props- type = “general” //h1,h2,h3,large,medium,small 등이 들어갈 예정
- color = “#000” // 폰트 색상
비고- cheQuiz - typography 참조
Card 미해
모든 컴포넌트에서 사용되는 Box 컴포넌트. 3px solid + border-radius 8px + padding이 기본 적용되어 있다.
사용처
props- color(=borderColor)
- width
- height
- backgroundColor
- cursor(boolean)
- borderType = “dashed|solid”
Button 미해
custom한 값도 받고, 지정 값으로 받을 수도 있는 Button 컴포넌트.
props- color = #fff,
- width (large, medium, small) = 100px, //width는 기준을 정해둠
- height = 40px,
- backgroundColor,
- isBorder(boolean) = false, //false면 backgroundColor 반영 안되고 하얀색 + border색 = 글씨 색
- disabled(boolean) = false,
- type (고민중)
Select 정환
combo Box 를 감싸고 있는 컴포넌트
- color,
- width,
- height,
- backgroundColor,
Option 정환
Select 와 함께 combo Box를 구성하는 컴포넌트. CSS 스타일링 적용이 원할하지 안흥므로 display:none + after을 활용할 예정이다. 관련 링크
- color,
- width,
- height,
- backgroundColor,
- borderType = “line” //option 각각에 줄 긋고 싶을 때
앞으로의 계획
- 7/14 (목) 까지 merge 완료
- 7/15 (금) 부터 7/19 (화) 까지 컴포넌트 개발
