From 6eca25b13fb130e10440eada2ee419a6696be7fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EB=8F=84=ED=98=84?=
 <77152650+Creative-Lee@users.noreply.github.com>
Date: Fri, 20 Oct 2023 12:02:50 +0900
Subject: [PATCH] =?UTF-8?q?Fix/#536=20=EB=A9=94=EC=9D=B8=20=EC=84=9C?=
 =?UTF-8?q?=EB=B8=8C=20=ED=83=80=EC=9D=B4=ED=8B=80=20=EB=B3=80=EA=B2=BD=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=93=A3=EA=B8=B0=20=EC=9D=B8=ED=84=B0=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=8A=A4=20=EB=B2=84=ED=8A=BC=20title=20=EB=AC=B8?=
 =?UTF-8?q?=EA=B5=AC=20=EC=82=AD=EC=A0=9C=20(#540)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 메인페이지 제목 변경

* design: 듣기 인터페이스 버튼 설명 타이틀 삭제

* refactor: 노래 타이틀 수정

* refactor: 메인 서브 타이틀 변경

부드러운 타이틀로 변경

* fix: lint 에러 수정
---
 .../songs/components/KillingPartTrack.tsx     | 21 +++++++++----------
 .../songs/components/SongItemList.tsx         |  2 +-
 .../src/features/songs/constants/genres.ts    | 18 ++++++++--------
 frontend/src/pages/MainPage.tsx               |  2 +-
 4 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/frontend/src/features/songs/components/KillingPartTrack.tsx b/frontend/src/features/songs/components/KillingPartTrack.tsx
index 73547b418..6c412c9ef 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="나의 킬링파트 삭제하기"
             >
               <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
index 67b1118bc..6a380e152 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 (
     <>
-      <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
index a885de3f5..ad8147daa 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 7d93ba7ea..15c858e8c 100644
--- 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) => (