[Feat] showcase 페이지 category chip 구현 #60
Conversation
| '&:hover': { backgroundColor: theme.colors.blue_100 }, | ||
| }); |
There was a problem hiding this comment.
요기 가독성 좋게
'&:hover': {
backgroundColor: theme.colors.blue_100
},요런식으로 줄바꿈해서 작성해주셔용!
|
|
||
| interface CategoryChipProps extends Omit<ComponentPropsWithRef<'button'>, 'onClick'> { | ||
| onClick?: (id: string) => void; | ||
| clickedChip?: string; |
There was a problem hiding this comment.
클릭된 여부에 따라 string값보다 boolean 타입으로 isSelected와 같은 값으로 전달해주는 건 어떤가요?
그리고 그 불리언 값에 따라 스타일 변화하는 식으로 작성해주면 좋을 것 같아요!
There was a problem hiding this comment.
clickedChip은 현재 어떠한 chip이 클릭되어있는지 알기 위한 prop인거 같아서 현재 코드에서는 boolean 값으로 받는게 맞는거 같습니다!
There was a problem hiding this comment.
네! 문자열로 받은 이유는 이 컴포넌트가 ref를 반환하지 않아서 어떤 버튼을 클릭했는지 알지 못합니다
그래서 다른 버튼을 눌렀을 때 클릭되어 있던 버튼을 언클릭하는 로직을 각 컴포넌트 안에 넣은 것 입니다
(+이 로직을 밖으로 뺄 경우 사용할 때 복잡해질 것 같아서)
| if (clickedChip === children?.toString()) { | ||
| setIsClicked(true); | ||
| } else { | ||
| setIsClicked(false); | ||
| } |
There was a problem hiding this comment.
경우의 수가 하나이니까 삼항연산자로 구현해줘도 될 것 같습니다!
There was a problem hiding this comment.
인정합니다! 좋은지적 감사합니다 😄
|
|
||
| interface CategoryChipProps extends Omit<ComponentPropsWithRef<'button'>, 'onClick'> { | ||
| onClick?: (id: string) => void; | ||
| clickedChip?: string; |
There was a problem hiding this comment.
clickedChip은 현재 어떠한 chip이 클릭되어있는지 알기 위한 prop인거 같아서 현재 코드에서는 boolean 값으로 받는게 맞는거 같습니다!
| useEffect(() => { | ||
| clickedChip === children?.toString() ? setIsClicked(true) : setIsClicked(false); | ||
| }, [clickedChip, children]); |
There was a problem hiding this comment.
위에서 다른 팀원들이 말한 것처럼, chip 컴포넌트는 isSelected라는 불리언 값을 전달받고 그에 따른 UI를 표시해주는 것이 더 좋을 것 같아요 !
부모 컴포넌트에서 selectedChip을 관리하고, prop으로 selectedChip === currentChip을 넘겨주는 정도로 구현하면 될 것 같네요 !
또한 안에서 handleClick을 만들어주지 않아도 될 것 같습니다. chip은 그냥 click 핸들러를 연결만 해주고, 위에서 해당 chip을 클릭했을 시의 동작을 핸들러로 생성하여 넘겨주면 될 것 같네요 !!
There was a problem hiding this comment.
넵! 인정합니다! 👍 수정했습니다 ~
해당 이슈 번호
closed #53
체크리스트
📌 알립니다..
📌스크린샷 (선택)
//clickedChip 문자열이 children이랑 다를 때
//clickedChip 문자열이 children이랑 같을 때