Fix/#536 메인 서브 타이틀 변경 및 듣기 인터페이스 버튼 title 문구 삭제 (#540)

* fix: 메인페이지 제목 변경 * design: 듣기 인터페이스 버튼 설명 타이틀 삭제 * refactor: 노래 타이틀 수정 * refactor: 메인 서브 타이틀 변경 부드러운 타이틀로 변경 * fix: lint 에러 수정
woowacourse-teams · Oct 20, 2023 · 6eca25b · 6eca25b
1 parent fc2ffb6
commit 6eca25b
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 22 deletions.
diff --git 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="나의 킬링파트 삭제하기"
             >
               <ButtonIcon src={trashIcon} alt="" />
-              <ButtonTitle>Delete</ButtonTitle>
             </DeleteButton>
             <ShareButton aria-label={'나의 킬링파트 유튜브 링크 공유하기'} onClick={copyMyPartUrl}>
               <ButtonIcon src={shareIcon} alt="" />
-              <ButtonTitle>Share</ButtonTitle>
             </ShareButton>
           </>
         ) : (
@@ -203,14 +201,12 @@ const KillingPartTrack = ({
               aria-label={`${rank}등 킬링파트 좋아요 하기`}
             >
               <ButtonIcon src={heartIcon} alt="" />
-              <ButtonTitle>{`${calculatedLikeCount} Likes`}</ButtonTitle>
             </LikeButton>
             <ShareButton
               aria-label={`${rank}등 킬링파트 링크 공유하기`}
               onClick={copyKillingPartUrl}
             >
               <ButtonIcon src={shareIcon} alt="" />
-              <ButtonTitle>Share</ButtonTitle>
             </ShareButton>
           </>
         )}
@@ -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
@@ -19,7 +19,7 @@ const SongItemList = ({ genre }: SongItemListProps) => {
 
   return (
     <>
-      <Title>{`${GENRES[genre]} Top 10`}</Title>
+      <Title>{`${GENRES[genre]}`}</Title>
       <Spacing direction="vertical" size={16} />
       <SongList>
         {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
@@ -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
@@ -19,7 +19,7 @@ const MainPage = () => {
   return (
     <Container>
       <SRHeading>shook 메인 페이지</SRHeading>
-      <Title>현재 킬링파트 등록중인 노래</Title>
+      <Title>최근 등록된 노래</Title>
       <Spacing direction="vertical" size={16} />
       <CollectionCarousel>
         {recentSongs.map((recentSong) => (