[FE] Dropdown 관련 컴포넌트들 구현 #16
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- DropdownItemType의 종류(`withImg`, `withColor`, `onlyContent`)에 따라 내부 구성 렌더.
- `DropdownNameKOR` enum을 사용하여 영한 번역. - 로직은 영어로하고, 렌더할 때 한글로 번역.
- `isOpen`에 따라 `<DropdownPanel />` 렌더. - 사용 컴포넌트로부터 `dropdownName` 및 `dropdownList`를 props로 전달 받음.
- `DropdownPanel`이 사용되는 상황은 두가지(필터 또는 이슈 생성시 선택)가 있음. - 그에 맞게 `panelType`을 `filter`와 `select`로 구분하여 렌더.
- Dropdown 관련 types 정의에서 `type` -> `variant`으로 변경. - Design system에 `border` 및 SVG icon용 `filter` 추가.
youzysu
approved these changes
Jul 25, 2023
There was a problem hiding this comment.
수고하셨습니다아 👍 (빠르고 정확한 코드에 감탄..)
Dropdown
- Dropdown 종류가 한가지 더 있는데, 나중에 작업할 때 DropdownPanel에 추가해도 좋고 이번에 추가해도 좋을 것 같아요!
designSystem iconFilter & border
designSystem.ts에 icon용 filter랑 border 추가했는데 확인해주세요.
- 혹시 iconFilter는 어떤 경우 어떤 icon의 filter인가요? 모든 icon이 같은 filter가 적용되지 않는 것 같아서요!
- border는 저도 PR에 포함해두었는데, 기존처럼 light & dark mode 공통으로 사용하도록 두고 color는 어떤 컴포넌트인지에 따라 동적으로 부여하도록 color 속성은 빼서 사용하면 어떨까요?
Comment on lines
+6
to
+59
| export default function DropdownItem({ item }: { item: DropdownItemType }) { | ||
| const generateItem = (item: DropdownItemType) => { | ||
| switch (item.variant) { | ||
| case "withImg": | ||
| return ( | ||
| <Label htmlFor={item.content}> | ||
| <Avatar | ||
| src={item.imgSrc} | ||
| alt={`${item.variant}: ${item.content}`} | ||
| /> | ||
| <Content>{item.content}</Content> | ||
| <input | ||
| className="radio-input" | ||
| type="radio" | ||
| name={item.name} | ||
| id={item.content} | ||
| /> | ||
| <img className="radio-img" src={checkOffCircle} alt="" /> | ||
| </Label> | ||
| ); | ||
| case "withColor": | ||
| return ( | ||
| <Label htmlFor={item.content}> | ||
| <ColorSwatch $colorFill={item.colorFill} /> | ||
| <Content>{item.content}</Content> | ||
| <input | ||
| className="radio-input" | ||
| type="radio" | ||
| name={item.name} | ||
| id={item.content} | ||
| /> | ||
| <img className="radio-img" src={checkOffCircle} alt="" /> | ||
| </Label> | ||
| ); | ||
| case "plain": | ||
| return ( | ||
| <Label htmlFor={item.content}> | ||
| <Content>{item.content}</Content> | ||
| <input | ||
| className="radio-input" | ||
| type="radio" | ||
| name={item.name} | ||
| id={item.content} | ||
| /> | ||
| <img className="radio-img" src={checkOffCircle} alt="" /> | ||
| </Label> | ||
| ); | ||
| default: | ||
| throw Error("Invalid dropdown item variant"); | ||
| } | ||
| }; | ||
|
|
||
| return <StyledDropdownItem>{generateItem(item)}</StyledDropdownItem>; | ||
| } |
There was a problem hiding this comment.
Label 하위 컴포넌트에 <Content>부터 <img> 까지 중복인 것 같아서 하위 컴포넌트로 빼도 좋을 것 같아요!
There was a problem hiding this comment.
마땅한 하위 컴포넌트 이름이 안떠올라서 넘겼는데 한번 빼볼게요 👍
|
캡쳐까지 첨부하셔서 설명해주시니 이해가 빠르네요. 감사합니다 🙏
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issues
What is this PR? 👓
Key changes 🔑
DropdownIndicator,DropdownPanel,DropdownItem컴포넌트 구현.To reviewers 👋