• non-js ( non-state )

window CRLF -> LF line-braking 포맷

lint 버그 픽스

https://github.com/linkube-team/keobee-ui/blob/7931c234b23562a17aeb8ff5c2fcf23d5222febd/package.json#L47-L49

production 환경에서는, dependancy 가 필요없으므로, 이동해야합니다.

Changing the default font from '"Nanum Gothic" to "Noto Sans Light" is required

• caption 구성 포함

• 페이지 상단에 위치 시킬 수 있는 레이아웃.
• Logo 는 명시적으로 받을 수 있다.
• light/dark 모드로 변환하여, background 를 넣거나, border 로 구분 할 수 있다.
• props 를 입력받아, 페이지 상단에 고정 할 수 있다. ( ex, position: fixed; )
• 모듈을 사용 할 수 있도록 export 되어 있다.

참조 이미지

keobee-ui 를 개발하면서, 드는 생각은 컴포넌트 structure 가 좀 불분명하고, 재사용하기 어렵다는 생각이 들었습니다.

무엇 때문에?

버튼 button 컴포넌트로 예를들어 보겠습니다.

이 모양을 가정 했을 때, 만약 loading 이라는 prop 을 가진 button 컴포넌트는,

• atomic 컴포넌트 입니까?
• state 를 가지고 있으니, 유기체에 가까운 것입니까?

아니면,

• Button 자체의 본연의 속성에 의한 Atomic 컴포넌트 입니까?

만약 전자라면, Atomic 버튼을 만들고, loading props 를 핸들링 할 수 있는 LoadingButton 컴포넌트가 필요 할 것 같습니다.

간과하고 있던 것?

코드관점으로 바라보고 설계를 하다보니, 컴포넌트 자체가 코드로 분할 할 수 없는 것 이라는 이상한 상상(?) 을 했었던 것 같습니다.

어떻게 변화해야 하나?

Atomic design 은 개념론 적이며, 코드 중심이 아닌, 디자인 중심이라는 것을 알게 되었습니다.

따라서, 앞으로는 코드 중심의 패턴이 아닌, 디자인 중심의 패턴 으로 생각하겠습니다.

프로젝트 구조는 PR 이 머지 되는대로 수정하겠습니다.

• Input 의 좌측, 우측에 addon 형태로, 아이콘 또는, 버튼이 들어가야함.

• 참조
  https://getbootstrap.com/docs/5.0/forms/input-group/#wrapping

check list

• className prefix 는 올바르게 설정되어 있음
• 컴포넌트가 exports 되어 있음
• storybook 에서 충분히 props 들을 테스트 해 볼수 있음
• type 들은 올바르게 지정되어 있음.
• 기존 Input 컴포넌트를 충분히 Wrapping 하고 있음.
• 커밋 로그는, 올바르게 rebase 되어 있음.

guide
branch: gh-18
pull-request-message: gh-18

• Input 컴포넌트와, FormInput 컴포넌트 중, label 을 제거
• Input 컴포넌트는 Atoms 여야 함.

고민중..

페이지 좌측, 혹인 우측에 위치 시킬 수 있는, layout 형태의 컴포넌트.

• Sidebar 를 좌측 또는 우측에 랜더링 할 수 있다.
• collapse props 를 받아, 접기/펼치리를 할 수 있다.