프론드엔드의 개발을 시작하기전, 재사용할 컴포넌트를 먼저 할당하기로 했다. 먼저 회의를 통해 atoms
, molercules
, organisms
순으로 필요한 컴포넌트를 구상해보았다.
//atoms
// 타입 스크립트에서 prop?은 선택적 용도로 사용가능 (써도 되고, 안써도 되고)
// 예를들어 Button의 width, height prop이 선택인 이유는 width, height를
// 기본값으로 설정할 수 있을 거라 판단하기 때문 (정답은 아님 안되면 그냥 일일이 쓰도록 놔두는 것도 괜춘)
// 기본값을 잘 설정하면 의외로 그리 props가 많이 필요하지 않을 것이다!
// ex) Button의 경우 글자 크기만큼의 크기에 고정 패딩을 집어넣는 경우가 많음
// padding : 2x || 3x, x;
// 성현
Circle - (children, height, clickEvent?)
Button - (width?, height?, backgroundColor?, children, clickEvent?)
TextArea - (width?, height?, value?, placeHolder?)
// 준혁
Sheet - (width?, height?, backgroundColor?, children)
Input - (type?, width?, height?, placeHolder?, value?)
// 종현
Text - (fontFamily?, fontWeight?, fontColor?, fontSize?, isFill, backgroundColor?, message)
Select - (children, width?, height?)
Option - (value)
//molarcules
Tab
Arrow
NavProject
NavWidget
Issue
GanttIssue
WidzetBlock
ProjectItem
Message (Error, Confirm)
TokenBox
IssueBar
GanttBar
InputBox
//organisms
SideBar
Header (common)
Main
회의를 진행하며 놀랐던 점은 서비스 플로우 회의를 2회나 진행하였지만 아직도 예상치 못한 변경사항이 많다는 것을 확인했다는 것이다. 기획은 정말 해도해도 끝이 없나보다.
할당된 재사용 컴포넌트를 만들 예정이다. 드디어 개발 시작이다!