From 7e9ecaa9c345bcad37fc4015f2bff45f066cb15c Mon Sep 17 00:00:00 2001
From: DOBOB_LAPTOP <creativedobob@gmail.com>
Date: Fri, 3 Nov 2023 20:00:48 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20effect=20=EC=82=AD=EC=A0=9C=20?=
 =?UTF-8?q?=EB=B0=8F=20callbackRef=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/SongDetailListPage.tsx | 72 +++++++++++------------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/frontend/src/pages/SongDetailListPage.tsx b/frontend/src/pages/SongDetailListPage.tsx
index 7c14447b..650041cc 100644
--- a/frontend/src/pages/SongDetailListPage.tsx
+++ b/frontend/src/pages/SongDetailListPage.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useLayoutEffect, useRef } from 'react';
+import { useCallback, useLayoutEffect, useRef } from 'react';
 import { styled } from 'styled-components';
 import swipeUpDown from '@/assets/icon/swipe-up-down.svg';
 import SongDetailItem from '@/features/songs/components/SongDetailItem';
@@ -36,23 +36,45 @@ const SongDetailListPage = () => {
     'next'
   );
 
-  const itemRef = useRef<HTMLDivElement>(null);
+  const prevObserverRef = useRef<IntersectionObserver | null>(null);
+  const nextObserverRef = useRef<IntersectionObserver | null>(null);
+
+  const getExtraPrevSongDetailsOnObserve: React.RefCallback<HTMLDivElement> = useCallback((dom) => {
+    if (dom === null) {
+      prevObserverRef.current?.disconnect();
+      return;
+    }
+
+    prevObserverRef.current = createObserver(() =>
+      fetchExtraPrevSongDetails(getFirstSongId(dom), genreParams as Genre)
+    );
+
+    prevObserverRef.current.observe(dom);
+  }, []);
+
+  const getExtraNextSongDetailsOnObserve: React.RefCallback<HTMLDivElement> = useCallback((dom) => {
+    if (dom === null) {
+      nextObserverRef.current?.disconnect();
+      return;
+    }
+
+    nextObserverRef.current = createObserver(() =>
+      fetchExtraNextSongDetails(getLastSongId(dom), genreParams as Genre)
+    );
+
+    nextObserverRef.current.observe(dom);
+  }, []);
 
-  const prevTargetRef = useRef<HTMLDivElement | null>(null);
-  const nextTargetRef = useRef<HTMLDivElement | null>(null);
+  const itemRef = useRef<HTMLDivElement>(null);
 
-  const getFirstSongId = () => {
-    const firstSongId = prevTargetRef.current?.nextElementSibling?.getAttribute(
-      'data-song-id'
-    ) as string;
+  const getFirstSongId = (dom: HTMLDivElement) => {
+    const firstSongId = dom.nextElementSibling?.getAttribute('data-song-id') as string;
 
     return Number(firstSongId);
   };
 
-  const getLastSongId = () => {
-    const lastSongId = nextTargetRef.current?.previousElementSibling?.getAttribute(
-      'data-song-id'
-    ) as string;
+  const getLastSongId = (dom: HTMLDivElement) => {
+    const lastSongId = dom.previousElementSibling?.getAttribute('data-song-id') as string;
 
     return Number(lastSongId);
   };
@@ -62,28 +84,6 @@ const SongDetailListPage = () => {
     closeModal();
   };
 
-  useEffect(() => {
-    if (!prevTargetRef.current) return;
-
-    const prevObserver = createObserver(() =>
-      fetchExtraPrevSongDetails(getFirstSongId(), genreParams as Genre)
-    );
-    prevObserver.observe(prevTargetRef.current);
-
-    return () => prevObserver.disconnect();
-  }, [fetchExtraPrevSongDetails, songDetailEntries, genreParams]);
-
-  useEffect(() => {
-    if (!nextTargetRef.current) return;
-
-    const nextObserver = createObserver(() =>
-      fetchExtraNextSongDetails(getLastSongId(), genreParams as Genre)
-    );
-    nextObserver.observe(nextTargetRef.current);
-
-    return () => nextObserver.disconnect();
-  }, [fetchExtraNextSongDetails, songDetailEntries, genreParams]);
-
   useLayoutEffect(() => {
     itemRef.current?.scrollIntoView({ behavior: 'instant', block: 'start' });
   }, [songDetailEntries]);
@@ -113,7 +113,7 @@ const SongDetailListPage = () => {
       )}
 
       <ItemContainer>
-        <ObservingTrigger ref={prevTargetRef} aria-hidden="true" />
+        <ObservingTrigger ref={getExtraPrevSongDetailsOnObserve} aria-hidden="true" />
 
         {extraPrevSongDetails?.map((extraPrevSongDetail) => (
           <SongDetailItem key={extraPrevSongDetail.id} {...extraPrevSongDetail} />
@@ -131,7 +131,7 @@ const SongDetailListPage = () => {
           <SongDetailItem key={extraNextSongDetail.id} {...extraNextSongDetail} />
         ))}
 
-        <ObservingTrigger ref={nextTargetRef} aria-hidden="true" />
+        <ObservingTrigger ref={getExtraNextSongDetailsOnObserve} aria-hidden="true" />
       </ItemContainer>
     </>
   );