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

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

Merged
merged 5 commits into from
Oct 20, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
aab5670
fix: 메인페이지 제목 변경
Creative-Lee Oct 19, 2023
d4f6ee4
design: 듣기 인터페이스 버튼 설명 타이틀 삭제
Creative-Lee Oct 20, 2023
4e9bf27
refactor: 노래 타이틀 수정
Creative-Lee Oct 20, 2023
00980d8
refactor: 메인 서브 타이틀 변경
Creative-Lee Oct 20, 2023
6cfc157
fix: lint 에러 수정
Creative-Lee Oct 20, 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
21 changes: 10 additions & 11 deletions frontend/src/features/songs/components/KillingPartTrack.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>
</>
) : (
Expand All @@ -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>
</>
)}
Expand Down Expand Up @@ -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`
Expand All @@ -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;
}
`;

Expand All @@ -339,6 +337,7 @@ const ProgressBar = styled.progress`
const ButtonContainer = styled.div`
display: flex;
align-items: center;
height: 100%;
`;

const FLexContainer = styled.div`
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/features/songs/components/SongItemList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
Expand Down
18 changes: 9 additions & 9 deletions frontend/src/features/songs/constants/genres.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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',
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/pages/MainPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const MainPage = () => {
return (
<Container>
<SRHeading>shook 메인 페이지</SRHeading>
<Title>현재 킬링파트 등록중인 노래</Title>
<Title>최근 등록된 노래</Title>
<Spacing direction="vertical" size={16} />
<CollectionCarousel>
{recentSongs.map((recentSong) => (
Expand Down
Loading