From 542ff8315dad180d3de14552ec40a2df5b98f573 Mon Sep 17 00:00:00 2001 From: ukkodeveloper Date: Fri, 4 Aug 2023 09:53:37 +0900 Subject: [PATCH] =?UTF-8?q?Feat/#198=20=EB=85=B8=EB=9E=98=20=EB=93=A3?= =?UTF-8?q?=EA=B8=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9B=B9=20=EC=A0=91?= =?UTF-8?q?=EA=B7=BC=EC=84=B1=20=EC=88=98=EC=A0=95=20(#202)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: mock 데이터 albumCoverUrl 추가 * chore: 사용하지 않는 dummy album 이미지 삭제 * feat: song detail 타입 변경 * feat: albumCoverUrl API 에 맞게 수정 * fix: youtube player auto player 끄기(접근성 고려) * feat: 웹 접근성 처리 * refactor: li 태그 아래 a태그 오도록 수정 --- frontend/src/components/@common/SRHeading.tsx | 18 ++-------- .../@common/ToggleGroup/ToggleGroup.tsx | 8 ++++- .../components/CommentList/CommentList.tsx | 8 +++-- .../PopularSongItem/PopularSongItem.style.ts | 4 +-- .../PopularSongItem/PopularSongItem.tsx | 4 ++- .../components/PopularSongItem/Thumbnail.tsx | 2 +- frontend/src/components/Youtube/Youtube.tsx | 2 +- frontend/src/pages/SongPage/SongPage.tsx | 12 ++++--- .../pages/SongPopularPage/SongPopularPage.tsx | 34 ++++++++++++------- 9 files changed, 51 insertions(+), 41 deletions(-) diff --git a/frontend/src/components/@common/SRHeading.tsx b/frontend/src/components/@common/SRHeading.tsx index 43266fa8f..130fe1ec7 100644 --- a/frontend/src/components/@common/SRHeading.tsx +++ b/frontend/src/components/@common/SRHeading.tsx @@ -1,20 +1,6 @@ import styled from 'styled-components'; -interface SRHeadingProps { - children: string; -} - -const SRHeading = ({ children: pageName }: SRHeadingProps) => { - return ( - - {pageName} - - ); -}; - -export default SRHeading; - -const Heading = styled.h1` +const SRHeading = styled.h1` position: absolute; left: -9999px; top: -9999px; @@ -22,3 +8,5 @@ const Heading = styled.h1` height: 1px; overflow: hidden; `; + +export default SRHeading; diff --git a/frontend/src/components/@common/ToggleGroup/ToggleGroup.tsx b/frontend/src/components/@common/ToggleGroup/ToggleGroup.tsx index 1ac269378..1c7d023ca 100644 --- a/frontend/src/components/@common/ToggleGroup/ToggleGroup.tsx +++ b/frontend/src/components/@common/ToggleGroup/ToggleGroup.tsx @@ -40,7 +40,13 @@ const ToggleButton = ({ index, children, ...props }: ToggleButtonProps) => { }; return ( - + {children} ); diff --git a/frontend/src/components/CommentList/CommentList.tsx b/frontend/src/components/CommentList/CommentList.tsx index fcde7bb3f..86a2c41c8 100644 --- a/frontend/src/components/CommentList/CommentList.tsx +++ b/frontend/src/components/CommentList/CommentList.tsx @@ -5,6 +5,7 @@ import shookshook from '@/assets/icon/shookshook.svg'; import useFetch from '@/hooks/@common/useFetch'; import { useMutation } from '@/hooks/@common/useMutation'; import { Spacing } from '../@common'; +import SRHeading from '../@common/SRHeading'; import useToastContext from '../@common/Toast/hooks/useToastContext'; import Comment from './Comment'; @@ -56,9 +57,10 @@ const CommentList = ({ songId, partId }: CommentListProps) => { } return ( -
+ <> -

댓글 {comments.length}개

+ 댓글 목록 +

댓글 {comments.length}개

@@ -88,7 +90,7 @@ const CommentList = ({ songId, partId }: CommentListProps) => { ))} -
+ ); }; diff --git a/frontend/src/components/PopularSongItem/PopularSongItem.style.ts b/frontend/src/components/PopularSongItem/PopularSongItem.style.ts index 46b4f1c71..0bb1eb116 100644 --- a/frontend/src/components/PopularSongItem/PopularSongItem.style.ts +++ b/frontend/src/components/PopularSongItem/PopularSongItem.style.ts @@ -1,6 +1,6 @@ import { styled } from 'styled-components'; -export const Grid = styled.li` +export const Grid = styled.div` display: grid; column-gap: 8px; padding: 6px 0; @@ -8,7 +8,7 @@ export const Grid = styled.li` 'rank thumbnail title' 26px 'rank thumbnail singer' 26px 'rank thumbnail info' 18px - / 14px 70px auto; + / 14px 70px; color: ${({ theme: { color } }) => color.white}; `; diff --git a/frontend/src/components/PopularSongItem/PopularSongItem.tsx b/frontend/src/components/PopularSongItem/PopularSongItem.tsx index ee8515590..ad2a2cd81 100644 --- a/frontend/src/components/PopularSongItem/PopularSongItem.tsx +++ b/frontend/src/components/PopularSongItem/PopularSongItem.tsx @@ -16,7 +16,9 @@ const PopularSongItem = ({ rank, albumCoverUrl, title, singer, totalVoteCount }: {title} {singer} - {new Intl.NumberFormat('ko-KR').format(totalVoteCount)} votes + + {new Intl.NumberFormat('ko-KR').format(totalVoteCount)} votes + ); }; diff --git a/frontend/src/components/PopularSongItem/Thumbnail.tsx b/frontend/src/components/PopularSongItem/Thumbnail.tsx index 816dd474b..18122bfaf 100644 --- a/frontend/src/components/PopularSongItem/Thumbnail.tsx +++ b/frontend/src/components/PopularSongItem/Thumbnail.tsx @@ -11,7 +11,7 @@ const Thumbnail = ({ ...props }: ThumbnailProps) => { return ( - + 노래 앨범 ); }; diff --git a/frontend/src/components/Youtube/Youtube.tsx b/frontend/src/components/Youtube/Youtube.tsx index b2cbfe41e..188d562e4 100644 --- a/frontend/src/components/Youtube/Youtube.tsx +++ b/frontend/src/components/Youtube/Youtube.tsx @@ -21,7 +21,7 @@ const Youtube = ({ videoId, start = 0 }: YoutubeProps) => { videoId, width: '100%', height: '100%', - playerVars: { start, autoplay: 1 }, + playerVars: { start }, }) ); } catch (error) { diff --git a/frontend/src/pages/SongPage/SongPage.tsx b/frontend/src/pages/SongPage/SongPage.tsx index 1d8f4ca89..03178cbb2 100644 --- a/frontend/src/pages/SongPage/SongPage.tsx +++ b/frontend/src/pages/SongPage/SongPage.tsx @@ -3,6 +3,7 @@ import { useParams, Link } from 'react-router-dom'; import { styled } from 'styled-components'; import { Spacing } from '@/components/@common'; import SRAlert from '@/components/@common/SRAlert'; +import SRHeading from '@/components/@common/SRHeading'; import { ToggleGroup } from '@/components/@common/ToggleGroup'; import { ToggleSwitch } from '@/components/@common/ToggleSwitch'; import CommentList from '@/components/CommentList/CommentList'; @@ -78,10 +79,11 @@ const SongPage = () => { return ( - 킬링파트 듣기 🎧 + 킬링파트 듣기 페이지 + 킬링파트 듣기 🎧 - + {title} {singer} @@ -91,7 +93,7 @@ const SongPage = () => { - + 킬링파트 듣기 @@ -99,7 +101,9 @@ const SongPage = () => { - 인기 많은 킬링파트를 들어보세요 🎧 + + 인기 많은 킬링파트를 들어보세요 🎧 + diff --git a/frontend/src/pages/SongPopularPage/SongPopularPage.tsx b/frontend/src/pages/SongPopularPage/SongPopularPage.tsx index c176dcdc5..599224b66 100644 --- a/frontend/src/pages/SongPopularPage/SongPopularPage.tsx +++ b/frontend/src/pages/SongPopularPage/SongPopularPage.tsx @@ -1,5 +1,7 @@ +import { styled } from 'styled-components'; import fetcher from '@/apis'; import { Spacing } from '@/components/@common'; +import SRHeading from '@/components/@common/SRHeading'; import PopularSongItem from '@/components/PopularSongItem'; import useFetch from '@/hooks/@common/useFetch'; import { PopularSongList, StyledLink, Title } from './SongPopularPage.style'; @@ -19,23 +21,25 @@ const SongPopularPage = () => { return ( <> + shook 메인 페이지 킬링파트 투표 많은순 {popularSongs.map(({ id, albumCoverUrl, title, singer, totalVoteCount }, i) => ( - - - +
  • + + + +
  • ))}
    @@ -43,3 +47,7 @@ const SongPopularPage = () => { }; export default SongPopularPage; + +const Li = styled.li` + width: 100%; +`;