Feat/#472 스와이프시 url이 변경되도록 한다. (#485)

* feat: 킬링파트 듣기 스와이프시 songId를 통한 url 변경

* fix: Home과 Login 링크로 가지지 않는 버그 수정

- 버그 원인은 해당 링크로 이동시 모든 refCallback(createPlayerOnObserve)이 실행됨
- YoutubeIframe에 ref로 넘겨서 임시적으로 해결하였는데 정확한 원인은 분석하지 못함

* feat: 킬링파트 공유 버튼 클릭시 현재 페이지 링크 복사

* fix: Youtube 컴포넌트에서 url을 바꾸던 것을 SongDetailItem으로 이동

- PartCollectingPage에서도 동작하는 버그 수정
- YoutubeIframe에 ref가 걸려있어서 위로 올라갈때 감지되지 않는 버그 수정

* refactor: url에 useParams와 ROUTH_PATH를 활용하도록 변경

* refactor: useValidParams로 변경

* refactor: url을 변경하는 ref 태그를 최대한 아래쪽에 배치

* refactor: preventScrollReset 삭제

frontend/src/features/songs/components/KillingPartTrack.tsx

@@ -27,7 +27,7 @@ interface KillingPartTrackProps {
 }
 
 const KillingPartTrack = ({
-  killingPart: { id: partId, rank, start, end, partVideoUrl, likeCount, likeStatus },
+  killingPart: { id: partId, rank, start, end, likeCount, likeStatus },
   songId,
   isNowPlayingTrack,
   setNowPlayingTrack,
@@ -57,7 +57,7 @@ const KillingPartTrack = ({
       memberId: user?.memberId,
     });
 
-    await copyClipboard(partVideoUrl);
+    await copyClipboard(window.location.href);
     showToast('영상 링크가 복사되었습니다.');
   };
 

frontend/src/features/songs/components/SongDetailItem.tsx

@@ -1,4 +1,5 @@
-import { forwardRef } from 'react';
+import { forwardRef, useCallback, useRef } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { styled } from 'styled-components';
 import KillingPartInterface from '@/features/songs/components/KillingPartInterface';
 import Thumbnail from '@/features/songs/components/Thumbnail';
@@ -8,12 +9,37 @@ import Flex from '@/shared/components/Flex';
 import Spacing from '@/shared/components/Spacing';
 import SRHeading from '@/shared/components/SRHeading';
 import TimerProvider from '@/shared/components/Timer/TimerProvider';
+import ROUTE_PATH from '@/shared/constants/path';
+import useValidParams from '@/shared/hooks/useValidParams';
+import createObserver from '@/shared/utils/createObserver';
 import type { SongDetail } from '@/shared/types/song';
 
 interface SongDetailItemProps extends SongDetail {}
 
 const SongDetailItem = forwardRef<HTMLDivElement, SongDetailItemProps>(
   ({ id, killingParts, singer, title, songVideoId, albumCoverUrl }, ref) => {
+    const navigate = useNavigate();
+    const { genre } = useValidParams();
+
+    const observerRef = useRef<IntersectionObserver | null>(null);
+
+    const navigateToCurrentSongId: React.RefCallback<HTMLDivElement> = useCallback((domNode) => {
+      const navigateToCurrentSong = () => {
+        navigate(`/${ROUTE_PATH.SONG_DETAILS}/${id}/${genre}`, {
+          replace: true,
+        });
+      };
+
+      if (domNode !== null) {
+        observerRef.current = createObserver(navigateToCurrentSong);
+        observerRef.current.observe(domNode);
+
+        return;
+      }
+
+      observerRef.current?.disconnect();
+    }, []);
+
     return (
       <Container ref={ref} role="article" data-song-id={id}>
         <SRHeading>킬링파트 듣기 페이지</SRHeading>
@@ -32,6 +58,7 @@ const SongDetailItem = forwardRef<HTMLDivElement, SongDetailItemProps>(
             <KillingPartInterface killingParts={killingParts} songId={id} />
           </TimerProvider>
         </VideoPlayerProvider>
+        <div ref={navigateToCurrentSongId} />
       </Container>
     );
   }

frontend/src/features/youtube/components/Youtube.tsx

@@ -5,13 +5,14 @@ import createObserver from '@/shared/utils/createObserver';
 import useVideoPlayerContext from '../hooks/useVideoPlayerContext';
 
 interface YoutubeProps {
-  videoId: string;
   start?: number;
+  videoId: string;
 }
 
-const Youtube = ({ videoId, start = 0 }: YoutubeProps) => {
+const Youtube = ({ start = 0, videoId }: YoutubeProps) => {
   const { initPlayer, bindUpdatePlayerStateEvent } = useVideoPlayerContext();
   const [loading, setLoading] = useState(true);
+
   const observerRef = useRef<IntersectionObserver | null>();
 
   const createPlayerOnObserve: React.RefCallback<HTMLImageElement> = useCallback((domNode) => {
@@ -39,6 +40,7 @@ const Youtube = ({ videoId, start = 0 }: YoutubeProps) => {
     if (domNode !== null) {
       observerRef.current = createObserver(createYoutubePlayer);
       observerRef.current.observe(domNode);
+
       return;
     }