refactor: useLayoutEffect로 실행하던 스크롤 이동 로직 refCallback으로 변경

frontend/src/features/songs/hooks/useSongDetailEntries.ts

@@ -1,22 +1,23 @@
-import { useLayoutEffect, useRef } from 'react';
+import { useCallback } from 'react';
 import useFetch from '@/shared/hooks/useFetch';
 import useValidParams from '@/shared/hooks/useValidParams';
 import { getSongDetailEntries } from '../remotes/songs';
 import type { Genre } from '../types/Song.type';
 
 const useSongDetailEntries = () => {
   const { id: songIdParams, genre: genreParams } = useValidParams();
-  const currentSongDetailItemRef = useRef<HTMLDivElement>(null);
 
   const { data: songDetailEntries } = useFetch(() =>
     getSongDetailEntries(Number(songIdParams), genreParams as Genre)
   );
 
-  useLayoutEffect(() => {
-    currentSongDetailItemRef.current?.scrollIntoView({ behavior: 'instant', block: 'start' });
-  }, [songDetailEntries]);
+  const scrollIntoCurrentSong: React.RefCallback<HTMLDivElement> = useCallback((dom) => {
+    if (dom === null) return;
 
-  return { songDetailEntries, currentSongDetailItemRef };
+    dom.scrollIntoView({ behavior: 'instant', block: 'start' });
+  }, []);
+
+  return { songDetailEntries, scrollIntoCurrentSong };
 };
 
 export default useSongDetailEntries;

frontend/src/pages/SongDetailListPage.tsx

@@ -12,7 +12,7 @@ const SongDetailListPage = () => {
   const { isOpen, closeModal } = useModal(true);
   const [onboarding, setOnboarding] = useLocalStorage<boolean>('onboarding', true);
 
-  const { songDetailEntries, currentSongDetailItemRef } = useSongDetailEntries();
+  const { songDetailEntries, scrollIntoCurrentSong } = useSongDetailEntries();
 
   const {
     extraPrevSongDetails,
@@ -60,7 +60,7 @@ const SongDetailListPage = () => {
           <SongDetailItem key={prevSongDetail.id} {...prevSongDetail} />
         ))}
 
-        <SongDetailItem ref={currentSongDetailItemRef} key={currentSong.id} {...currentSong} />
+        <SongDetailItem ref={scrollIntoCurrentSong} key={currentSong.id} {...currentSong} />
 
         {nextSongs.map((nextSongDetail) => (
           <SongDetailItem key={nextSongDetail.id} {...nextSongDetail} />