0.1.5 • Published 3 years ago
@ateam-capa/components v0.1.5
@ateam-capa/component
이 패키지는 CAPA페이지 디자인의 일관성 및 통일성, 재사용성 재고를 위해 제작되었습니다.
사용방법
- 설치
npm i @ateam-capa/components- 적용
import { Button, Input } from '@ateam-capa/components'
...
const someComponent = () => {
return (
<>
<Input size="small" labelPlacement="left" inputLabel="example" />
<Button color="default" size="medium" />
</>
)
}- 컴포넌트 props
StoryBook에서 해당 컴포넌트 확인
컴포넌트 추가
- 만들고자 하는 컴포넌트 이름으로 브랜치를 생성합니다
git checkout -b '브랜치이름'src/CustomizedComponent 폴더에 추가하고자 하는 컴포넌트 파일을 생성합니다.
src/CustomizedComponent/index.ts 파일에 해당 컴포넌트를 불러와 export 처리합니다.
src/stories 에 해당 컴포넌트 이름으로 폴더를 생성하고, '컴포넌트이름'.stories.tsx 파일을 생성합니다.
stories 파일에 다른 컴포넌트의 story를 참고해 해당 컴포넌트의 상태를 작성하고 저장합니다.
git add, commit을 통해 변경사항을 커밋하고 push 한 후에 master 브랜치로 PR합니다.
컴포넌트 / 레이아웃
거의 모든 페이지의 기초를 이루는 GlobalNavigationBar(GNB), Container, Footer는 레이아웃으로 따로 표기했으나, 사용상의 차이는 없습니다.
컴포넌트의 자세한 사항은 스토리북에서 확인할 수 있습니다.