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) => (