feat: Input 컴포넌트 구현 - Githubissues

DDD-Community / hermes-web

HERMES (WEB 2) 웹 프론트 Repo입니다.

0 stars 0 forks source link

feat: Input 컴포넌트 구현 #18

Closed danbileee closed 2 years ago

danbileee commented 3 years ago

Issue

Input 컴포넌트 구현 #12

Changes

Inputs 카테고리 내에 Input 컴포넌트 및 스토리 추가
- label
- 타이포그래피 Title7로 정의되어 있는데 시멘틱을 고려하여 label 태그 사용하였습니다.
- input
- 타이포그래피 Paragraph2로 정의되어 있는데 시멘틱을 고려하여 input 태그 사용하였습니다.
- controlled, uncontrolled 케이스에 둘다 대응 가능하도록 구현하였습니다.
  - controlled일 경우 value 대신 controlledValue 와 onChange 전달
  - uncontrolled일 경우 defaultValue 전달
- 시안상 정의되어 있는 initial/focused/blurred/disabled 케이스 스토리북에서 확인 가능합니다.
- errorMessage
- 에러메시지 제어 케이스 스토리북의 ControlledInput 에서 확인 가능합니다.

Test Cases

[x] 스토리북 UI 테스트

Notes

Layout 컴포넌트들에 styled-system space 속성 추가하였습니다.
- Layout 컴포넌트에 해당 속성이 자주 쓰일거라 예상되어 편의를 위해 추가하였습니다.
- styled-system 자체는 유지보수가 잘 안되고 있어 영향범위를 Layout으로 제한하고자 하니 참고 부탁드립니다.

Screen Shots

Post Actions

Textarea 컴포넌트 구현