✨Feat: 드롭다운 컴포넌트 구현 및 드롭다운 아이템 상수 옵션 추가 #26
Conversation
src/components/common/Dropdown.tsx
Outdated
| import Down from '@/assets/icons/dropdown.svg'; | ||
|
|
||
| interface DropdownProps { | ||
| items: string[]; |
There was a problem hiding this comment.
💬 items 가 선택 사항들을 말하는 prop일까요? 그렇다면 상수 naming과 맞춰서 options라고 이름 붙이는 게 좋지 않을까 싶습니다!
There was a problem hiding this comment.
넵 좋은 것 같습니다 바꿔볼게요!
src/components/common/Dropdown.tsx
Outdated
| selected: string; | ||
| onSelect: (value: string) => void; |
There was a problem hiding this comment.
❓ 혹시 onSelect가 selected state의 set함수거나 그런 건가요?
There was a problem hiding this comment.
위에 selected는 드롭다운 아이템 부분을 프롭으로 넣는거고 아래 onSelect는 직접적인 set 함수는 아니고 상위에 set함수를 호출하는 콜백입니다!
There was a problem hiding this comment.
set 함수를 호출하는 callback이라는 게 어떤 뜻인가요?
There was a problem hiding this comment.
상위에서 state 값을 정의하고 실행되면 드롭다운 컴포넌트에 onSelect에서 그 기능을 실행한다고 보시면 좋을 것 같습니다.
There was a problem hiding this comment.
state에 대한 set 함수가 맞다면 state set 함수에 대한 type이 따로 있는 걸로 알고 있습니다 그리고 selected로 state를, onSelect로 set 함수를 받는 거라면 setSelected와 같이 이름을 설정하는 게 이해하기 쉽지 않을까 싶습니다!
There was a problem hiding this comment.
타입이 따로 있군요 이 부분은 변경해보겠습니다. 네이밍도 수정할게요!
src/components/common/Dropdown.tsx
Outdated
| <button | ||
| type="button" | ||
| onClick={toggleDropdown} | ||
| className={`flex cursor-pointer items-center justify-between rounded-md border border-gray-30 bg-white ${variant === 'form' ? 'w-full px-5 py-4 text-base' : 'bg-gray-10px-3 rounded-[5px]px-3 h-[30px] w-[105px] gap-[6px] px-2.5 text-sm'}`} |
There was a problem hiding this comment.
| className={`flex cursor-pointer items-center justify-between rounded-md border border-gray-30 bg-white ${variant === 'form' ? 'w-full px-5 py-4 text-base' : 'bg-gray-10px-3 rounded-[5px]px-3 h-[30px] w-[105px] gap-[6px] px-2.5 text-sm'}`} | |
| className={`flex cursor-pointer items-center justify-between rounded-md border border-gray-30 bg-white ${variant === 'form' ? 'w-full px-5 py-4 text-base' : 'bg-gray-10px-3 rounded-[5px] px-3 h-[30px] w-[105px] gap-[6px] px-2.5 text-sm'}`} |
❗ 띄어쓰기가 빠진 거 같아요
There was a problem hiding this comment.
❓ figma 디자인과 다른 것 같아요
src/components/common/Dropdown.tsx
Outdated
| <li | ||
| key={item} | ||
| onClick={() => handleSelect(item)} | ||
| className={`flex w-full cursor-pointer justify-center border-b border-gray-20 text-sm leading-[22px] font-regular text-black last:border-b-0 ${variant === 'form' ? 'py-3' : 'py-2'}`} |
There was a problem hiding this comment.
text-sm 은 14px을 의미하는데, 저희는 스타일 변수로 text-body2를 14px로 지정해두었습니다.
저희가 프로젝트에서 사용할 텍스트 크기를 따로 변수로 지정해둔 것이기 때문에 웬만하면 그걸 사용하시는게 가독성 면에서도 좋고, 사용하기도 편하실거에요!😄
There was a problem hiding this comment.
오 감사합니다 몰랐는데 바로 적용해야겠네요
📌 변경 사항 개요
드롭다운 기능 구현
📝 상세 내용
스타일이 다른 드롭다운 버튼을 만들었고, 안에 내용을 상수로 빼서 적용 시켰습니다.
🔗 관련 이슈
[feat] 드롭다운 구현 #21
🖼️ 스크린샷(선택사항)
💡 참고 사항