feat: Chip 컴포넌트 구현 #137
Merged
feat: Chip 컴포넌트 구현 #137
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
nijuy
reviewed
Jul 30, 2024
package.json
Outdated
There was a problem hiding this comment.
framer-motion 왜 설치됐는지는 지난주 모각코에서 들어서 알고 있는데! 지금은 안 쓰니까 멸종시켜버리죠
src/components/Chip/Chip.stories.tsx
Outdated
| const DefaultUsageComponent = () => { | ||
| return ( | ||
| <Chip size="medium" role="suggestion"> | ||
| sdsd |
There was a problem hiding this comment.
여기 mdx 텍스트랑 맞춰서 칩으로 하는 거 워때요
진짜 짜잘하당............
그치만 제안하고 싶었습니다.
Suggested change
| sdsd | |
| 칩 |
| overflow-x: ${({ $swipable }) => ($swipable ? 'auto' : 'visible')}; | ||
|
|
||
| row-gap: ${({ theme }) => theme.primitive.number[10]}px; | ||
| column-gap: ${({ theme }) => theme.primitive.number[8]}px; |
There was a problem hiding this comment.
제가 제안해놓고 수정 안한거 뭐죠 ㅋㅋㅋㅋ 암튼 감사합니다
There was a problem hiding this comment.
권장하지 않는 사용법에 대해서도 명시해둔 점,,👍✨
Comment on lines
+6
to
+9
| $size: ChipSizeType; | ||
| $selected: boolean; | ||
| $disabled: boolean; | ||
| $isRoleInput: boolean; |
There was a problem hiding this comment.
저는 3개 이상부터는 StyledComponentProps 형식의 인터페이스를 하나 만드는데요! (2개까진 그냥 페카처럼 함)
이거에 대한 기준도 정하면 작지만 코드 보는 사람 입장에서 통일성이 올라갈 거 같아요! 다음 회의때 얘기해보면 어떨까요
There was a problem hiding this comment.
굳이 얘기해볼 필요없이 그 방식이 좋을듯 하네요!
nijuy
approved these changes
Aug 1, 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.
1️⃣ 어떤 작업을 했나요? (Summary)
Chip 컴포넌트와 ChipGroup 컴포넌트를 구현하고, 문서를 작성했습니다.
개인적으로 최근 구현했던 모든 코드 통틀어서 가장 어려운 작업이었습니다
그래서 생각보다 오래걸렸던 것 같네요
추상화 레벨이 높아서 그냥 필요할 때 바로 사용해도 큰 문제는 없겠지만,
문서 한 번씩 로컬 서버 열어서 읽어보는거 추천드립니다.
Chip
Compound Component 방식으로 props를 줄이고, 이벤트 할당이나 컴포넌트의 구성을 더욱 선언적으로 구성했습니다.
ChipGroup
role에 따라서 자식 Chip 컴포넌트의 역할을 공통적으로 부여하고, 기능을 다르게 적용해야했기에
Chip을 더 편하게 관리할 수 있도록 하는 ChipGroup 컴포넌트를 추가로 구현했습니다.
자식 Chip 컴포넌트의 role 공통화 ( ChipGroup을 통해 상속받음 )
마우스로 가로 스와이프 기능 ( 모바일 스크롤처럼 smooth effect 구현 )
따로 state 없이 chip들의 selected 상태를 관리할 수 있도록 추상화
등등
4️⃣ 체크리스트 (Checklist)
main브랜치의 최신 코드를pull받았나요?