diff --git a/frontend/src/features/songs/components/KillingPartTrack.tsx b/frontend/src/features/songs/components/KillingPartTrack.tsx index 73547b41..6c412c9e 100644 --- a/frontend/src/features/songs/components/KillingPartTrack.tsx +++ b/frontend/src/features/songs/components/KillingPartTrack.tsx @@ -45,7 +45,7 @@ const KillingPartTrack = ({ }: KillingPartTrackProps) => { const { showToast } = useToastContext(); const { seekTo, pause, playerState, videoPlayer } = useVideoPlayerContext(); - const { calculatedLikeCount, heartIcon, toggleKillingPartLikes } = useKillingPartLikes({ + const { heartIcon, toggleKillingPartLikes } = useKillingPartLikes({ likeCount, likeStatus, songId, @@ -189,11 +189,9 @@ const KillingPartTrack = ({ aria-label="나의 킬링파트 삭제하기" > - Delete - Share ) : ( @@ -203,14 +201,12 @@ const KillingPartTrack = ({ aria-label={`${rank}등 킬링파트 좋아요 하기`} > - {`${calculatedLikeCount} Likes`} - Share )} @@ -286,8 +282,10 @@ const ButtonWithIcon = css` flex-direction: column; gap: 2px; align-items: center; + justify-content: center; - width: 44px; + width: 38px; + height: 100%; `; const DeleteButton = styled.button` @@ -302,17 +300,17 @@ const ShareButton = styled.button` ${ButtonWithIcon} `; -const ButtonTitle = styled.span` - font-size: 8px; -`; +// const ButtonTitle = styled.span` +// font-size: 8px; +// `; const ButtonIcon = styled.img` width: 22px; height: 22px; @media (max-width: ${({ theme }) => theme.breakPoints.xxs}) { - width: 18px; - height: 18px; + width: 20px; + height: 20px; } `; @@ -339,6 +337,7 @@ const ProgressBar = styled.progress` const ButtonContainer = styled.div` display: flex; align-items: center; + height: 100%; `; const FLexContainer = styled.div` diff --git a/frontend/src/features/songs/components/SongItemList.tsx b/frontend/src/features/songs/components/SongItemList.tsx index 67b1118b..6a380e15 100644 --- a/frontend/src/features/songs/components/SongItemList.tsx +++ b/frontend/src/features/songs/components/SongItemList.tsx @@ -19,7 +19,7 @@ const SongItemList = ({ genre }: SongItemListProps) => { return ( <> - {`${GENRES[genre]} Top 10`} + {`${GENRES[genre]}`} {songs?.map(({ id, albumCoverUrl, title, singer, totalLikeCount }, i) => ( diff --git a/frontend/src/features/songs/constants/genres.ts b/frontend/src/features/songs/constants/genres.ts index a885de3f..ad8147da 100644 --- a/frontend/src/features/songs/constants/genres.ts +++ b/frontend/src/features/songs/constants/genres.ts @@ -1,14 +1,14 @@ const GENRES = { - ALL: '전체', - DANCE: '댄스', - HIPHOP: '힙합', - BALLAD: '발라드', - POP: '팝', - RHYTHM_AND_BLUES: 'R&B/Soul', - INDIE: '인디', - ROCK_METAL: '락/메탈', + ALL: 'S-HOOK 유저 Pick!', + DANCE: '신나는 댄스 음악에 몸을 맡겨볼까요?', + HIPHOP: 'Hip! Hop!', + BALLAD: '감성에 젖어들다', + POP: '팝 즐기기', + RHYTHM_AND_BLUES: '리듬 속으로, 소울 있게', + INDIE: '인디 밴드를 좋아한다면?', + ROCK_METAL: '무아지경의 세계로, ROCK & ROLE', TROT: '트로트', - FOLK_BLUES: '포크/블루스', + FOLK_BLUES: '부드러운 무드', JAZZ: '재즈', CLASSIC: '클래식', J_POP: 'J-POP', diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx index 7d93ba7e..15c858e8 100644 --- a/frontend/src/pages/MainPage.tsx +++ b/frontend/src/pages/MainPage.tsx @@ -19,7 +19,7 @@ const MainPage = () => { return ( shook 메인 페이지 - 현재 킬링파트 등록중인 노래 + 최근 등록된 노래 {recentSongs.map((recentSong) => (