Feat: DropdownButton, DropdowMenu 공통컴포넌트 제작 및 조립 #72
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
- 드랍관련 폴더명 변경 - SortDropdownButton 수정 - DeadlineDropdownButton 제작 - UserInfoDropdownButton 제작 - RecruitDropdownButton 제작
JIS0098
requested review from
nakyoung98,
hankim0904,
kimbobby and
Yoon-kyungLee
올바르지 않은 PR 형식올바르지 않은 PR 형식입니다. 참고PR요청 전 deveop 브랜치에 변동이 있을 경우 꼭! feature 브랜치를 rebase 해주세요. |
hankim0904
reviewed
Mar 15, 2024
| <Container onClick={onClick} $selectType={$selectType} $isSelected={$isSelected}> | ||
| <div>{selectOption}</div> | ||
| <img | ||
| src={ |
There was a problem hiding this comment.
const iconSources = {
sort: ICONS.triangle.src,
date: ICONS.calendar.src,
default: ICONS.popover.src,
};
const selectedIconSrc = iconSources[$selectType] || iconSources.default;이런식으로 해보면 어떨까요??
그냥 제안입니다ㅎㅎ
nakyoung98
requested changes
Mar 15, 2024
| ${({ $selectType }) => ($selectType === "sort" ? VARIANT_STYLE.sort : VARIANT_STYLE.drop)} | ||
| `; | ||
|
|
||
| const VARIANT_STYLE = { |
There was a problem hiding this comment.
이거의 경우에 DROPDOWN_VARIANT 를 type DROPDOWN_VARIANT = "sort" | "drop"을 선언하시고 const VARIANT_STYLE: VariantStyle<DROPDOWN_VARIANT>: {} 하시면 조금 더 에러를 관리(사전예방)하면서 사용할 수 있슴다
| */ | ||
|
|
||
| export default function DropdownMenu({ $selectType, isOpen, handleSelectOption, $borderType }: DropdownMenuProps) { | ||
| const optionList: { round: OptionList; square: OptionList } = { |
There was a problem hiding this comment.
이 안의 optionList를 DropdownMenu 내에서 모두 가지고 있으면 DropdownMenu 하나가 가지고 있는 책임이 너무 많은 것 같아요
이 친구들은 따로 const 등에서 관리하는게 좋을 것 같아요
| import DESIGN_TOKEN from "@/styles/tokens"; | ||
|
|
||
| interface DropdownMenuProps { | ||
| $selectType: |
There was a problem hiding this comment.
selectType은 없어도 괜찮을 것 같아요
options: string[]을 받는 것은 어떠신가요?
| $borderType?: "round" | "square"; | ||
| } | ||
|
|
||
| interface OptionList { |
| export default function DropdownMenu({ $selectType, isOpen, handleSelectOption, $borderType }: DropdownMenuProps) { | ||
| const optionList: { round: OptionList; square: OptionList } = { | ||
| round: { | ||
| position: ["전체", "프론트엔드", "백엔드", "디자이너", "IOS", "안드로이드", "데브옵스"], |
There was a problem hiding this comment.
round와 square는 없애고
이름이 겹치는 position이나 meeting같은 경우에는 조금 더 특성화된 이름으로 변경해봐요
hankim0904
approved these changes
Mar 15, 2024
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.
📌요구사항
📌작업 진행 상황 (에러, 막혔던 부분, 그외 궁금한것 등등)
처음에 상속방식으로 해봤는데 드랍버튼 관련은 기능이있어서 칩과 다르게
간단히 상속이 안돼서 그냥 props로 전달했습니다(제가 이해를 못해서 사용 못했을수도..ㅠ)
데이트 픽커 관련 드랍버튼은 사용처에서 다시 가공해야 할 것 같아요..!
DropdownButton
$selectOption: 버튼에 들어갈 초기 innerText부모컴포넌트에서 받을 수 있게 해놨습니다.
$selectType: 버튼에 들어갈 iconselectType를 안내려주면 자동으로 drop스타일을 받을 수 있게 해놨습니다.
("sort"|"date")
Dropdownmenu
$borderType: 드랍메뉴의 형태 결정("round"|"square")
$selectType: 드랍메뉴 안의 옵션내용 결정조립한 드랍버튼 종류
반응형까지 prop으로 넘겨서 적용하면 너무 복잡해져서 조립할때 부모컴포넌트에 너비를 정해 반응형을 지정했습니다
UserInfoDropdownButton
정보수정 모달에 들어갈 드랍버튼
RecruitDropdownButton
모집글 작성에 들어갈 드랍버튼
DeadlineDropdownButton
데이터 픽커 관련 드랍버튼
변경, 추가사항
드랍버튼 관련 컴포넌트 폴더명 변경 및 commons 폴더 추가
SelectDropButtons로 폴더명 변경
아이콘 추가
📌스크린샷 / 테스트결과 (선택)
### 📌이슈 번호 close #58