✨ [Feature] chip 컴포넌트 리팩토링 & 모임 chip 구현 #129
Closed
Conversation
This file contains hidden or 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
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
haegu97
approved these changes
Dec 11, 2024
Comment on lines
+19
to
+42
| const getChipVariant = () => { | ||
| switch (variant) { | ||
| case 'completed': | ||
| return 'square-filled'; | ||
| case 'scheduled': | ||
| return 'square-filled'; | ||
| case 'pending': | ||
| return 'square-outlined'; | ||
| case 'confirmed': | ||
| return 'square-filled'; | ||
| } | ||
| }; | ||
|
|
||
| const getCustomClassName = () => { | ||
| switch (variant) { | ||
| case 'completed': | ||
| return 'bg-gray-normal-01 text-gray-dark-02'; | ||
| case 'scheduled': | ||
| return 'bg-green-normal-01 text-gray-white'; | ||
| case 'pending': | ||
| return 'border-blue-normal-01 text-blue-normal-01'; | ||
| case 'confirmed': | ||
| return 'bg-blue-normal-01 text-gray-white'; | ||
| } |
Contributor
There was a problem hiding this comment.
큰 차이는 없을 거 같긴한데 통일성 있게 객체화 시키는 방법은 어떤가요??
객체화 시켜서 사용하는 방법과 switch case 문을 같이 사용한 이유가 있으실까요?
const CLUB_CHIP_VARIANTS = {
completed: 'square-filled',
scheduled: 'square-filled',
pending: 'square-outlined',
confirmed: 'square-filled',
} as const;
const CLUB_CHIP_CLASSES = {
completed: 'bg-gray-normal-01 text-gray-dark-02',
scheduled: 'bg-green-normal-01 text-gray-white',
pending: 'border-blue-normal-01 text-blue-normal-01',
confirmed: 'bg-blue-normal-01 text-gray-white',
} as const;
Comment on lines
+48
to
+49
| variant={getChipVariant()} | ||
| className={twMerge(getCustomClassName(), className)} |
Contributor
There was a problem hiding this comment.
variant={CHIP_VARIANTS[variant]}
className={twMerge(CHIP_CLASSES[variant], className)}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
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.
#️⃣연관된 이슈
📝작업 내용
마이페이지 쪽에서 chip 디자인이 몇 개 새롭게 추가되었는데, 전체 chip 컴포넌트를 이에 맞게 바꿀지 고민하다가 나중에 교환쪽에서도 새로운 chip이 나오게 되면 varint를 수정하고 사용된 chip들을 다 변경하기가 번거로울 것 같아서 chip을 리팩토링 하고 마이 페이지에서 쓰는 chip의 경우 새롭게 chip 폴더 내부에
ClubChip으로 구현했습니다.미리보기, 사용방법 및 결과물
chip 컴포넌트는 4개의 varint로 모양에 따라 기본 틀만 담당해줍니다. (밑에 회색부분은 지난 모임인지 아닌지 여부에 따라 색상 바뀌는 부분)
해당 chip 컴포넌트를 베이스로 모임에서 사용되는 chip들을 따로 만들어 두었습니다.
기본 틀은 chip컴포넌트에서 받아오고 varint (참여 완료 등..)에 따라 모양을 구체화하는 식으로 만들었습니다.
실제 사용 코드 예시
기타 참고사항