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

Refactor/#443 캐러셀 컴포넌트 및 썸네일 컴포넌트 리팩터링 #454

Merged
merged 9 commits into from
Sep 27, 2023

Conversation

ukkodeveloper
Copy link
Collaborator

📝작업 내용

  • styled-components dom 속성 에러를 방지하기 위한 $ prefix 적용
  • 캐러셀 아이템에서 사용되는 앨범 이미지 커버에 Thumbnail 컴포넌트 적용
  • Thumbnail 컴포넌트에 borderRadius 속성 추가

#️⃣연관된 이슈

close #442 #443

@github-actions
Copy link

github-actions bot commented Sep 25, 2023

Unit Test Results

  82 files    82 suites   13s ⏱️
313 tests 313 ✔️ 0 💤 0
316 runs  316 ✔️ 0 💤 0

Results for commit 2b27b4c.

♻️ This comment has been updated with latest results.

@ukkodeveloper ukkodeveloper self-assigned this Sep 26, 2023
@ukkodeveloper ukkodeveloper added [ 🌞 FE ] 프론트엔드 크루들의 빛나는 개발 이야기 하나둘셋 호! ✨ Feat 꼼꼼한 기능 구현 중요하죠 labels Sep 26, 2023
Copy link
Collaborator

@Creative-Lee Creative-Lee left a comment

Choose a reason for hiding this comment

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

꼼꼼하게 변경해주셨네요~
변경 사항 확인했습니다~ 고생하셨어요 ~

@@ -91,3 +86,5 @@ const PlayingTime = styled.div`
const PlayingTimeText = styled.p`
padding-top: 2px;
`;

const PlayIcon = styled.img``;
Copy link
Collaborator

Choose a reason for hiding this comment

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

💬💬💬(매우 사소) width, height를 명시적으로 적어주는건 어떨까요?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

width와 height 명시해주었습니다.

@@ -16,13 +17,13 @@ const CarouselItem = ({ votingSong }: CarouselItemProps) => {
return (
<Wrapper>
<CollectingLink to={`${ROUTE_PATH.COLLECT}/${id}`}>
<Album src={albumCoverUrl} />
<Thumbnail src={albumCoverUrl} size="xl" borderRadius={0} />
Copy link
Collaborator

Choose a reason for hiding this comment

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

💬💬💬(매우 사소) 아래 카테고리의 앨범 자켓 radius를 4px로 맞추는김에 통일 시켰었는데,
0px 인게 나으려나요?

Copy link
Collaborator

Choose a reason for hiding this comment

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

저도 동감합니다 border-radius: 4px에서 0으로 바뀐 이유가 있나용?

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

기존 코드에서 0px이었기 때문에 ThumbnailborderRadius를 뚫어 놓고, 0px로 두었습니다. 기존 캐러셀 아이템을 만들 때 그렇게 정했던 이유은, 너무 같은 radius로만 표현하면 단조롭다고 생각해서였고요. 다들 통일감 있는 걸 선호하신다는 의견 반영해서 4px로 두겠습니다! 👍

@@ -16,13 +17,13 @@ const CarouselItem = ({ votingSong }: CarouselItemProps) => {
return (
<Wrapper>
<CollectingLink to={`${ROUTE_PATH.COLLECT}/${id}`}>
<Album src={albumCoverUrl} />
<Thumbnail src={albumCoverUrl} size="xl" borderRadius={0} />
Copy link
Collaborator

Choose a reason for hiding this comment

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

저도 동감합니다 border-radius: 4px에서 0으로 바뀐 이유가 있나용?

@ukkodeveloper ukkodeveloper merged commit 3ed2f31 into main Sep 27, 2023
@ukkodeveloper ukkodeveloper deleted the refactor/#443 branch September 27, 2023 04:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[ 🌞 FE ] 프론트엔드 크루들의 빛나는 개발 이야기 하나둘셋 호! ✨ Feat 꼼꼼한 기능 구현 중요하죠
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

[REFACTOR] Album 자켓 이미지 Thumbnail 컴포넌트 사용하여 적용
3 participants