[#383] Select 컴포넌트

[minjongbaek]

구현 내용

• Select 컴포넌트를 구현했어요.

스크린샷

pr 포인트

Help

• 기본 select 태그로 구현을 하려 했는데, select 아이콘을 변경하지 못해 headless ui의 Listbox 컴포넌트를 이용했어요.
  • 다 만들고나서 보니 모바일 환경에서는 기본 select 태그가 더 편리한 것 같아요. (당근도 기본 select 태그를 사용하는 것 같아요 👀 )
  • background: url('/icons/select-icon.svg'); 스타일을 지정했을 때 스토리북에서 제대로 가져오지 못하는 문제가 있는데 혹시 해결 방법을 아시는 분이 있을까요?
• 기본 select가 더 낫다면 다시 시도해보겠습니다!

관련 이슈

• Close Select 컴포넌트 #383

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dadok	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 24, 2023 7:56am

[github-actions]

🚀 Storybook: https://64aba10cd478ad51307a8997-ysleavszwg.chromatic.com/

[gxxrxn]

background: url('/icons/select-icon.svg'); 스타일을 지정했을 때 스토리북에서 제대로 가져오지 못하는 문제가 있는데 혹시 해결 방법을 아시는 분이 있을까요?

storybook 설정파일 /.storybook/main.ts를 조금 수정하면 해결되는 것 같아요!

참고
아래와 같은 설명이 있어서 참고했습니다!

📣 If you are using Vite, @storybook/nextjs, @storybook/angular, or @storybook/preset-create-react-app with [email protected], then leave the options object empty.

const config: StorybookConfig = {
  ...,
  staticDirs: ['../public'], // 추가
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-styling', // 추가
    // 아래 제거
    // {
    //   name: '@storybook/addon-styling',
    //   options: {postCss: true}
    // },
  ],
  ...
}

[gxxrxn]

수고하셨습니다 민종님~!! 코멘트 몇개 남겼는데 확인해주시면 감사하겠습니다! 🙇🏻‍♀️

그리고 혹시 storybook에서 form submit 동작이 잘 되는걸까요? 저는 아래와 같은 에러메시지가 보이고, alert 창이 띄워지지가 않아서요ㅠ.ㅠ

다 만들고나서 보니 모바일 환경에서는 기본 select 태그가 더 편리한 것 같아요. (당근도 기본 select 태그를 사용하는 것 같아요 👀 )

모바일 환경과 잘 호환되지 않는다면 기본 select 태그를 활용하면 좋을 것 같아요!!

[minjongbaek]

@gxxrxn 기본 select 태그를 활용한 코드로 변경했어요. 확인 부탁드려요!

[gxxrxn]

수고하셨음니당!! 👍🏻

[WooDaeHyun]

민종님 고생하셨습니다! 👍

아래 코멘트는 select 태그 활용 코드로 변경 전에 review를 남겼는데 submit을 안 하고 pending 상태로 있었던 질문이었습니다! 지금은 Select, Option 컴포넌트의 props 타입이 모두 바뀌어 있어서,, 혹시 해당 부분 기억이 나신다면 알려주신다면 감사하겠습니다 ㅎㅎㅎ

[hanyugeon]

수고하셨습니다!!