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.

Sign up for GitHub

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/#166 메인페이지에서 킬링파트 등록 인기순 음악을 보여준다 #175

Merged
merged 20 commits into from
Aug 3, 2023
Merged

Feat/#166 메인페이지에서 킬링파트 등록 인기순 음악을 보여준다 #175

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
92e5fc7
feat: 인기있는 킬링파트 서버응답 msw 구현
cruelladevil Aug 1, 2023
66e0d18
feat: Thumbnail 컴포넌트 구현
cruelladevil Aug 1, 2023
6ce500a
feat: SongRankCard 컴포넌트 구현
cruelladevil Aug 1, 2023
7490919
feat: SongPopularPage 구현
cruelladevil Aug 1, 2023
ce93f0d
refactor: alt 속성을 prop으로 받지 않고, src prop을 thumbnail로 변경
cruelladevil Aug 1, 2023
942b4f6
feat: SongRankCard에 color white 적용
cruelladevil Aug 1, 2023
660b79d
feat: SongRankCard 스토리 작성
cruelladevil Aug 1, 2023
3b8a8e8
design: 미구현으로 인한 하드코딩된 votes 정보 주석처리
cruelladevil Aug 1, 2023
eee83f0
design: focus 및 active 시 background color 적용
cruelladevil Aug 1, 2023
fdda8cb
feat: lazy loading 및 default image 적용
cruelladevil Aug 1, 2023
1b5a397
design: font-weight 700으로 수정
cruelladevil Aug 2, 2023
1e1950a
fix: overflow hidden 수정 및 인라인 스타일 삭제
cruelladevil Aug 2, 2023
cf679c2
design: SongRankCard의 Link에서 active 요소 삭제
cruelladevil Aug 2, 2023
2cc5ef8
design: 태그를 시맨틱하게 수정
cruelladevil Aug 2, 2023
e948798
chore: 컴포넌트명을 PopularSongItem으로 수정
cruelladevil Aug 2, 2023
1f303f8
refactor: 인기있는 킬링파트 서버 엔드포인트 변경
cruelladevil Aug 3, 2023
90ab7f8
test: api fixture 백엔드와 동기화
cruelladevil Aug 3, 2023
ada740c
feat: 백엔드 응답 변경
cruelladevil Aug 3, 2023
1215b89
design: 썸네일 크기 및 간격 조정
cruelladevil Aug 3, 2023
34a9f69
Merge remote-tracking branch 'origin' into feat/#166
cruelladevil Aug 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions frontend/src/assets/icon/album-jacket-default.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 22 additions & 0 deletions frontend/src/components/SongRankCard/SongRankCard.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import popularSongs from '@/mocks/fixtures/popularSongs.json';
import SongRankCard from './SongRankCard';
import type { Meta, StoryObj } from '@storybook/react';

const meta: Meta<typeof SongRankCard> = {
component: SongRankCard,
};

export default meta;

type Story = StoryObj<typeof SongRankCard>;

const { thumbnail, title, singer } = popularSongs[0];

export const Default: Story = {
args: {
rank: 1,
thumbnail,
title,
singer,
},
};
52 changes: 52 additions & 0 deletions frontend/src/components/SongRankCard/SongRankCard.style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { styled } from 'styled-components';

export const Grid = styled.p`
cruelladevil marked this conversation as resolved.
Show resolved Hide resolved
display: grid;
cruelladevil marked this conversation as resolved.
Show resolved Hide resolved
column-gap: 12px;
padding: 6px 0;
grid-template:
'rank thumbnail title' 30px
'rank thumbnail singer' 30px
'rank thumbnail info' 20px
/ 20px 80px 200px;

color: ${({ theme: { color } }) => color.white};
`;

export const Rank = styled.div`
grid-area: rank;

display: flex;
justify-content: center;
align-items: center;

font-weight: 800;
`;

export const SongTitle = styled.div`
grid-area: title;

font-size: 16px;
font-weight: 800;

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`;

export const Singer = styled.div`
grid-area: singer;

font-size: 12px;

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`;
cruelladevil marked this conversation as resolved.
Show resolved Hide resolved

export const Info = styled.div`
grid-area: info;

color: #808191;
font-size: 12px;
`;
26 changes: 26 additions & 0 deletions frontend/src/components/SongRankCard/SongRankCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { Grid, Rank, Singer, SongTitle } from './SongRankCard.style';
import Thumbnail from './Thumbnail';

interface CardProps {
rank: number;
thumbnail: string;
title: string;
singer: string;
}

const SongRankCard = ({ rank, thumbnail, title, singer }: CardProps) => {
return (
<Grid>
<Rank>{rank}</Rank>
<Thumbnail src={thumbnail} alt={`${title}-${singer}`} />
<SongTitle>{title}</SongTitle>
<Singer>{singer}</Singer>
{/*
TODO: 백엔드 구현 되어야 함
<Info>25,908 votes</Info>
*/}
</Grid>
);
};

export default SongRankCard;
9 changes: 9 additions & 0 deletions frontend/src/components/SongRankCard/Thumbnail.style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { styled } from 'styled-components';

export const Wrapper = styled.div`
width: 80px;
height: 80px;

border-radius: 10px;
cruelladevil marked this conversation as resolved.
Show resolved Hide resolved
overflow: 'hidden';
`;
24 changes: 24 additions & 0 deletions frontend/src/components/SongRankCard/Thumbnail.tsx
View file
Open in desktop
cruelladevil marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import defaultAlbumJacket from '@/assets/icon/album-jacket-default.svg';
import { Wrapper } from './Thumbnail.style';
import type { ImgHTMLAttributes, SyntheticEvent } from 'react';

interface ThumbnailProps extends ImgHTMLAttributes<HTMLImageElement> {}

const Thumbnail = ({ ...props }: ThumbnailProps) => {
Copy link
Collaborator

Choose a reason for hiding this comment

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

(props: ThumbnailProps) => { 이렇게 작성해도 될 것 같네요.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

const Thumbnail = ({ newProp, anyOtherProp, ...props }: ThumbnailProps) => {
위처럼 prop이 추가될 상황을 고려하고 작성하였습니다.
props와 { ...props}의 차이중 특별히 고려할 사항이 없으면 수정하지 않고 넘어가겠습니다 😊

const insertDefaultJacket = ({ currentTarget }: SyntheticEvent<HTMLImageElement>) => {
currentTarget.src = defaultAlbumJacket;
};

return (
<Wrapper>
<img
{...props}
style={{ borderRadius: '8px' }}
cruelladevil marked this conversation as resolved.
Show resolved Hide resolved
loading="lazy"
cruelladevil marked this conversation as resolved.
Show resolved Hide resolved
onError={insertDefaultJacket}
cruelladevil marked this conversation as resolved.
Show resolved Hide resolved
/>
</Wrapper>
);
};

export default Thumbnail;
1 change: 1 addition & 0 deletions frontend/src/components/SongRankCard/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './SongRankCard';
242 changes: 242 additions & 0 deletions frontend/src/mocks/fixtures/popularSongs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,242 @@
[
{
"id": 1,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 2,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 3,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 4,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 5,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 6,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/86/070/11286070_20230713181059_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Seven (feat. Latto) - Clean Ver.",
"singer": "정국"
},
{
"id": 7,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/86/070/11286070_20230713181059_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Seven (feat. Latto) - Clean Ver.",
"singer": "정국"
},
{
"id": 8,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/86/070/11286070_20230713181059_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Seven (feat. Latto) - Clean Ver.",
"singer": "정국"
},
{
"id": 9,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/86/070/11286070_20230713181059_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Seven (feat. Latto) - Clean Ver.",
"singer": "정국"
},
{
"id": 10,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/86/070/11286070_20230713181059_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Seven (feat. Latto) - Clean Ver.",
"singer": "정국"
},
{
"id": 11,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/11/297/11211297_20230410151046_500.jpg/melon/resize/120/quality/80/optimize",
"title": "I AM",
"singer": "IVE (아이브)"
},
{
"id": 12,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/11/297/11211297_20230410151046_500.jpg/melon/resize/120/quality/80/optimize",
"title": "I AM",
"singer": "IVE (아이브)"
},
{
"id": 13,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/11/297/11211297_20230410151046_500.jpg/melon/resize/120/quality/80/optimize",
"title": "I AM",
"singer": "IVE (아이브)"
},
{
"id": 14,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/11/297/11211297_20230410151046_500.jpg/melon/resize/120/quality/80/optimize",
"title": "I AM",
"singer": "IVE (아이브)"
},
{
"id": 15,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/11/297/11211297_20230410151046_500.jpg/melon/resize/120/quality/80/optimize",
"title": "I AM",
"singer": "IVE (아이브)"
},
{
"id": 16,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 17,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 18,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 19,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 20,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 21,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 22,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 23,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 24,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 25,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 26,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 27,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 28,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 29,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 30,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 31,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 32,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 33,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 34,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 35,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 36,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 37,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 38,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 39,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
},
{
"id": 40,
"thumbnail": "https://cdnimg.melon.co.kr/cm2/album/images/112/81/456/11281456_20230706180841_500.jpg/melon/resize/120/quality/80/optimize",
"title": "Super Shy",
"singer": "New Jeans"
}
]
Loading