✨ select 컴포넌트 추가

[Dongkyuuuu]

📎 이슈번호

17

📃 변경사항

• Select 공통 컴포넌트 추가

📌 중점적으로 볼 부분

• 오른쪽 화살표 부분이 select에 padding을 적용했을 때 위치가 이상해서 피그마에 있는 화살표를 base64 인코딩하여 이미지로 사용 하였습니다.
• placeholder 기능을 추가 하였습니다.
• option에 대한 값들은 options라는 props으로 object 형태로 넘겨주면 자동으로 생성 됩니다. 형식은 아래와 같습니다.

  // key는 option의 실제 값
  // value는 option의 표시 값 입니다.
  const options = {
  key: value
  }

• storybook 명령어를 통해 쉽게 확인 가능합니다.

  🎇 스크린샷

✔ 체크리스트

• [x] 브랜치 전략에 맞는 브랜치에 PR을 올리고 있습니다. (master/main이 아닙니다.)
• [x] 커밋 메세지를 컨벤션에 맞추었습니다.
• [x] 변경 후 코드는 컴파일러/브라우저 warning/error 가 발생시키지 않습니다.
• [x] 변경 후 코드는 기존의 테스트를 통과합니다.
• [x] 테스트 추가가 필요한지 검토해보았고, 필요한 경우 테스트를 추가했습니다.
• [x] docs 수정이 필요한지 검토해보았고, 필요한 경우 docs를 수정했습니다.

[ding-co]

저 개인적으로 궁금한 부분이 이 Select 컴포넌트가 사용되는 화면과 열렸을 때 어떻게 보이는지도 알 수 있을까요.

select - option 태그의 디자인을 조금 바꿀 수는 있지만 드롭다운 같은 형태의 디자인이면 div 태그를 써서 커스터마이징 하는 것도 고려해봐야 할 것 같아요.

[Dongkyuuuu]

저 개인적으로 궁금한 부분이 이 Select 컴포넌트가 사용되는 화면과 열렸을 때 어떻게 보이는지도 알 수 있을까요.

select - option 태그의 디자인을 조금 바꿀 수는 있지만 드롭다운 같은 형태의 디자인이면 div 태그를 써서 커스터마이징 하는 것도 고려해봐야 할 것 같아요.

PR 원문에 스크린샷 추가 하였습니다. 따로 피그마에 디자인은 없어서 기본 select option을 사용 했습니다! 다른 디자인이 생긴다면(안나오길 기도중) 따로 커스텀으로 만드는 것도 고려해야 할 것 같긴해요 ㅠ...