diff --git a/frontend/src/features/member/components/MyPartList.tsx b/frontend/src/features/member/components/MyPartList.tsx index 8ca35f59..fb95df95 100644 --- a/frontend/src/features/member/components/MyPartList.tsx +++ b/frontend/src/features/member/components/MyPartList.tsx @@ -7,7 +7,10 @@ import PartList from './PartList'; import type { MyPageTab } from '../types/myPage'; import type { KillingPart, SongDetail } from '@/shared/types/song'; -export type LikeKillingPart = Pick & +export type LikeKillingPart = Pick< + SongDetail, + 'title' | 'singer' | 'albumCoverUrl' | 'songVideoId' +> & Pick & { songId: number; partId: number; @@ -55,7 +58,12 @@ const MyPartList = () => { {partTabItems.map((option) => ( - + ))} ); diff --git a/frontend/src/features/member/components/PartItem.tsx b/frontend/src/features/member/components/PartItem.tsx index 1b9557c2..dfeaa0ed 100644 --- a/frontend/src/features/member/components/PartItem.tsx +++ b/frontend/src/features/member/components/PartItem.tsx @@ -12,12 +12,24 @@ import sendGAEvent from '@/shared/googleAnalytics/sendGAEvent'; import { secondsToMinSec, toPlayingTimeText } from '@/shared/utils/convertTime'; import copyClipboard from '@/shared/utils/copyClipBoard'; import type { LikeKillingPart } from './MyPartList'; +import type { MyPageTab } from '../types/myPage'; const { BASE_URL } = process.env; -type PartItemProps = LikeKillingPart; +type PartItemProps = LikeKillingPart & { + tab: MyPageTab; +}; -const PartItem = ({ songId, albumCoverUrl, title, singer, start, end }: PartItemProps) => { +const PartItem = ({ + songId, + albumCoverUrl, + title, + singer, + start, + end, + songVideoId, + tab, +}: PartItemProps) => { const { showToast } = useToastContext(); const { user } = useAuthContext(); const navigate = useNavigate(); @@ -30,7 +42,12 @@ const PartItem = ({ songId, albumCoverUrl, title, singer, start, end }: PartItem memberId: user?.memberId, }); - copyClipboard(`${BASE_URL?.replace('/api', '')}/${ROUTE_PATH.SONG_DETAILS}${songId}/ALL`); + const shareLink = + tab === 'Like' + ? `${BASE_URL?.replace('/api', '')}/${ROUTE_PATH.SONG_DETAILS}${songId}/ALL` + : `https://youtu.be/${songVideoId}?start=${start}`; + + copyClipboard(shareLink); showToast('클립보드에 영상링크가 복사되었습니다.'); }; diff --git a/frontend/src/features/member/components/PartList.tsx b/frontend/src/features/member/components/PartList.tsx index 498ffbb0..6b3a45fc 100644 --- a/frontend/src/features/member/components/PartList.tsx +++ b/frontend/src/features/member/components/PartList.tsx @@ -2,15 +2,17 @@ import { useEffect } from 'react'; import styled from 'styled-components'; import PartItem from './PartItem'; import type { LikeKillingPart } from './MyPartList'; +import type { MyPageTab } from '../types/myPage'; interface PartListProps { parts: LikeKillingPart[]; isShow: boolean; + tab: MyPageTab; } const PART_LIST_SCROLL_TOP = 180; -const PartList = ({ parts, isShow }: PartListProps) => { +const PartList = ({ parts, isShow, tab }: PartListProps) => { useEffect(() => { if (window.scrollY > PART_LIST_SCROLL_TOP) { window.scrollTo({ top: PART_LIST_SCROLL_TOP, behavior: 'smooth' }); @@ -24,7 +26,7 @@ const PartList = ({ parts, isShow }: PartListProps) => { return ( {parts.map((part) => ( - + ))} );