feat: 마이페이지에서 나의 킬링파트는 유튜브 링크 공유로 변경

woowacourse-teams · Oct 18, 2023 · eb9d592 · eb9d592
1 parent bebe44f
commit eb9d592
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 7 deletions.
diff --git 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<SongDetail, 'title' | 'singer' | 'albumCoverUrl'> &
+export type LikeKillingPart = Pick<
+  SongDetail,
+  'title' | 'singer' | 'albumCoverUrl' | 'songVideoId'
+> &
   Pick<KillingPart, 'start' | 'end'> & {
     songId: number;
     partId: number;
@@ -55,7 +58,12 @@ const MyPartList = () => {
       <Spacing direction="vertical" size={24} />
 
       {partTabItems.map((option) => (
-        <PartList key={option.tab} parts={option.parts} isShow={tab === option.tab} />
+        <PartList
+          key={option.tab}
+          parts={option.parts}
+          isShow={tab === option.tab}
+          tab={option.tab}
+        />
       ))}
     </>
   );

diff --git 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
@@ -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 (
     <PartListContainer>
       {parts.map((part) => (
-        <PartItem key={part.partId} {...part} />
+        <PartItem key={part.partId} tab={tab} {...part} />
       ))}
     </PartListContainer>
   );