Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FEAT] 필터칩 추가 #34

Merged
merged 3 commits into from
Jul 31, 2024
Merged

[FEAT] 필터칩 추가 #34

merged 3 commits into from
Jul 31, 2024

Conversation

moony1204
Copy link
Contributor

작성자: @moony1204

체크 리스트

  • 적절한 제목으로 수정했나요?
  • 상단에 이슈 번호를 기입했나요?
  • Target Branch를 올바르게 설정했나요?
  • Label을 알맞게 설정했나요?

작업 내역

  • 필터칩 추가 작업

비고

  • 필터칩 색상 랜덤으로 나오게 하였습니다

@moony1204 moony1204 added the feat label Jul 24, 2024
@moony1204 moony1204 requested review from chunzhi23 and chqkq July 24, 2024 01:40
@moony1204 moony1204 self-assigned this Jul 24, 2024
@moony1204 moony1204 linked an issue Jul 24, 2024 that may be closed by this pull request
1 task
Copy link

Copy link
Contributor

@chunzhi23 chunzhi23 Jul 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tabler Icons를 사용하면 관리가 편할 것 같습니다!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tabler Icons를 적용하는 데에 여기를 참고해 작업해주시면 좋겠습니다!

Copy link
Contributor

@chunzhi23 chunzhi23 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다. 아래 수정사항 외에는 이후 라이트/다크 색상을 찬찬히 바꾸면 좋을 것 같습니다!

)}
{isReset && (
<>
<ResetIcon />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ResetIcon에 hover 했을 때 cursor: pointer로 모양 바꾼다면 좋을 것 같습니다!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

반영했습니다

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tabler Icons를 적용하는 데에 여기를 참고해 작업해주시면 좋겠습니다!

return (
<div className={classes.filterChip} style={{ backgroundColor: isReset ? "#DFE2EB" : bgColor }}>
{!isReset && <span className={classes.label}>{label}</span>}
{!isReset && (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

{ !isReset && (
  <>
    ...
  </>
)}

위와 같이 처리해도 괜찮을 것 같습니다!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tabler icon 적용하였고 resetchip class 새로 만들어 나누어 리턴하는 방식으로 수정했습니다


const randomBackgroundColor = () => {
const colors = ["#DFE2EB", "#D1E4FF", "#F3DAFF"];
return colors[Math.floor(Math.random() * colors.length)];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

backgroundColor와 color를 FilterChip의 props로 받아오게 하면 좋을 것 같아요!

클립 색상을 어떻게 설정해야 하는지는 추후 논의가 필요할 것 같네요..! 노션에 올려두겠습니다 :)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요건 그냥 랜덤으로 되게 두었습니다

Copy link

@moony1204 moony1204 merged commit 1d3783d into develop Jul 31, 2024
1 check passed
@chunzhi23
Copy link
Contributor

고생하셨습니다

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

🚀 [FEAT] UI 컴포넌트를 개발합니다. (3)
2 participants