Merge pull request #106 from dnd-side-project/refactor/#104/discover-mycd

[refactor] 둘러보기, 나의 cd 코드 리팩토링

Author: maylh

src/app/providers/PlayerProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, useState, useContext, type ReactNode } from 'react'
+import { createContext, useState, useContext, useRef, useCallback, type ReactNode } from 'react'
 
 import type { PlaylistInfo } from '@/entities/playlist'
 
@@ -13,6 +13,8 @@ type PlaylistContextType = {
   nextTrack: () => void
   prevTrack: () => void
   updateCurrentTime: (time: number) => void
+  playerRef: React.MutableRefObject<YT.Player | null>
+  handlePlayerStateChange: (event: YT.OnStateChangeEvent) => void
 }
 
 interface PlaylistProviderProps {
@@ -23,37 +25,58 @@ const PlaylistContext = createContext<PlaylistContextType | undefined>(undefined
 
 const PlaylistProvider = ({ children }: PlaylistProviderProps) => {
   const [currentPlaylist, setCurrentPlaylist] = useState<PlaylistInfo | null>(null)
-  const [currentTrackIndex, setCurrentTrackIndex] = useState<number>(0)
-  const [isPlaying, setIsPlaying] = useState<boolean>(false)
-  const [currentTime, setCurrentTime] = useState<number>(0)
+  const [currentTrackIndex, setCurrentTrackIndex] = useState(0)
+  const [currentTime, setCurrentTime] = useState(0)
+  const [isPlaying, setIsPlaying] = useState(false)
+
+  const playerRef = useRef<YT.Player | null>(null)
 
   const setPlaylist = (playlist: PlaylistInfo, trackIndex?: number, time?: number) => {
     setCurrentPlaylist(playlist)
     if (trackIndex !== undefined) setCurrentTrackIndex(trackIndex)
     if (time !== undefined) setCurrentTime(time)
     setIsPlaying(true)
+
+    if (playerRef.current) {
+      if (time !== undefined) playerRef.current.seekTo(time, true)
+      playerRef.current.playVideo()
+    }
   }
 
-  const play = () => setIsPlaying(true)
-  const pause = () => setIsPlaying(false)
+  const play = useCallback(() => {
+    if (playerRef.current) playerRef.current.playVideo()
+    setIsPlaying(true)
+  }, [])
+
+  const pause = useCallback(() => {
+    if (playerRef.current) playerRef.current.pauseVideo()
+    setIsPlaying(false)
+  }, [])
 
-  const nextTrack = () => {
+  const nextTrack = useCallback(() => {
     if (currentPlaylist && currentTrackIndex < currentPlaylist.songs.length - 1) {
-      setCurrentTrackIndex((prevIndex) => prevIndex + 1)
+      setCurrentTrackIndex((prev) => prev + 1)
       setCurrentTime(0)
+      if (playerRef.current) playerRef.current.seekTo(0, true)
     }
-  }
+  }, [currentPlaylist, currentTrackIndex])
 
-  const prevTrack = () => {
+  const prevTrack = useCallback(() => {
     if (currentTrackIndex > 0) {
-      setCurrentTrackIndex((prevIndex) => prevIndex - 1)
+      setCurrentTrackIndex((prev) => prev - 1)
       setCurrentTime(0)
+      if (playerRef.current) playerRef.current.seekTo(0, true)
     }
-  }
+  }, [currentTrackIndex])
 
-  const updateCurrentTime = (time: number) => {
-    setCurrentTime(time)
-  }
+  const updateCurrentTime = (time: number) => setCurrentTime(time)
+
+  const handlePlayerStateChange = useCallback(
+    (event: YT.OnStateChangeEvent) => {
+      if (event.data === window.YT.PlayerState.ENDED) nextTrack()
+    },
+    [nextTrack]
+  )
 
   const value = {
     currentPlaylist,
@@ -66,6 +89,8 @@ const PlaylistProvider = ({ children }: PlaylistProviderProps) => {
     nextTrack,
     prevTrack,
     updateCurrentTime,
+    playerRef,
+    handlePlayerStateChange,
   }
 
   return <PlaylistContext.Provider value={value}>{children}</PlaylistContext.Provider>
@@ -75,8 +100,6 @@ export default PlaylistProvider
 
 export const usePlaylist = () => {
   const context = useContext(PlaylistContext)
-  if (context === undefined) {
-    throw new Error('usePlaylist must be used within a PlaylistProvider')
-  }
+  if (!context) throw new Error('usePlaylist must be used within a PlaylistProvider')
   return context
 }

src/pages/discover/commentData.json

@@ -1,6 +1,5 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useParams } from 'react-router-dom'
-import type { YouTubeEvent } from 'react-youtube'
 
 import styled from 'styled-components'
 
@@ -20,18 +19,19 @@ import { PlaylistLayout, YoutubePlayer } from '@/widgets/playlist'
 const DiscoverPage = () => {
   const { id: playlistId } = useParams()
   const {
-    setPlaylist,
-    isPlaying,
     currentPlaylist,
     currentTrackIndex,
-    nextTrack,
-    prevTrack,
+    currentTime,
+    isPlaying,
+    playerRef,
+    setPlaylist,
     play,
     pause,
-    currentTime,
-    updateCurrentTime,
+    nextTrack,
+    prevTrack,
+    handlePlayerStateChange,
   } = usePlaylist()
-  const playerRef = useRef<YT.Player | null>(null)
+
   const [showCoachmark, setShowCoachmark] = useState(false)
   const [isMuted, setIsMuted] = useState<boolean | null>(null)
 
@@ -96,8 +96,6 @@ const DiscoverPage = () => {
     return [playlistAsInfo, ...shufflePlaylists]
   }, [playlistAsInfo, shufflePlaylists])
 
-  console.log(playlistsData)
-
   const videoId = currentPlaylist
     ? getVideoId(currentPlaylist.songs[currentTrackIndex]?.youtubeUrl)
     : null
@@ -109,11 +107,11 @@ const DiscoverPage = () => {
     if (!currentPlaylist && playlistsData.length > 0 && isReady) {
       const initialPlaylist =
         playlistsData.find((p) => p.playlistId === Number(playlistId)) || playlistsData[0]
-
       setPlaylist(initialPlaylist, 0, 0)
     }
-  }, [playlistsData, currentPlaylist, playlistId, setPlaylist])
+  }, [playlistsData, currentPlaylist, playlistId, setPlaylist, isReady])
 
+  // 재생, 확인, 조회수 refetch
   useEffect(() => {
     if (!currentPlaylist || !isPlaying) return
     startPlaylist(currentPlaylist.playlistId)
@@ -135,21 +133,6 @@ const DiscoverPage = () => {
     }
   }, [currentPlaylist, isPlaying, startPlaylist, confirmPlaylist, refetchViewCounts])
 
-  // 현재 재생 시간 업데이트
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      if (playerRef.current) updateCurrentTime(playerRef.current.getCurrentTime())
-    }, 1000)
-    return () => clearInterval(intervalId)
-  }, [updateCurrentTime])
-
-  // 재생, 일시정지
-  useEffect(() => {
-    if (!playerRef.current) return
-    if (isPlaying) playerRef.current.playVideo()
-    else playerRef.current.pauseVideo()
-  }, [isPlaying])
-
   // 캐러셀 스와이프 시 현재 플레이리스트 업데이트
   const handleSelectPlaylist = useCallback(
     (index: number) => {
@@ -162,48 +145,26 @@ const DiscoverPage = () => {
         fetchNextPage()
       }
     },
-    [setPlaylist, currentPlaylist, playlistsData, fetchNextPage, hasNextPage, isFetchingNextPage]
+    [playlistsData, currentPlaylist, setPlaylist, hasNextPage, isFetchingNextPage, fetchNextPage]
   )
 
-  const handlePlayerStateChange = useCallback(
-    (event: YouTubeEvent) => {
-      if (event.data === window.YT.PlayerState.ENDED) nextTrack()
-    },
-    [nextTrack]
-  )
-
-  const handlePlayPause = () => {
-    if (isPlaying) pause()
-    else play()
-  }
-
-  const isCurrentlyPlaying = (() => {
-    if (!window.YT || !playerRef.current) return false
-    return isPlaying && playerRef.current.getPlayerState() === window.YT.PlayerState.PLAYING
-  })()
-
   return (
     <Page>
       {showCoachmark && <DiscoverCoachMark onClick={handleCloseCoachmark} />}
       <SwipeCarousel data={playlistsData} onSelectIndexChange={handleSelectPlaylist}>
         {playlistsData.map((data) => (
           <Slide key={data.playlistId}>
             <PlaylistLayout
-              key={data.playlistId}
               data={data}
               currentPlaylist={currentPlaylist}
               currentTrackIndex={currentTrackIndex}
               currentTime={currentTime}
-              isPlaying={isCurrentlyPlaying}
-              onPlayPause={handlePlayPause}
+              isPlaying={isPlaying}
+              onPlayPause={() => (isPlaying ? pause() : play())}
               onNext={nextTrack}
               onPrev={prevTrack}
               onSelectTrack={(trackIndex, time) => {
-                if (currentPlaylist) {
-                  setPlaylist(currentPlaylist, trackIndex)
-                  if (time !== undefined) playerRef.current?.seekTo(time, true)
-                  if (!isPlaying) play()
-                }
+                if (currentPlaylist) setPlaylist(currentPlaylist, trackIndex, time)
               }}
               playerRef={playerRef}
               isMuted={isMuted}
@@ -212,22 +173,16 @@ const DiscoverPage = () => {
           </Slide>
         ))}
       </SwipeCarousel>
-      {!showCoachmark && videoId && (
+
+      {videoId && (
         <YoutubePlayer
           videoId={videoId}
           onReady={(event) => {
             playerRef.current = event.target
-
-            // 현 상태 참조해서 동기화
+            playerRef.current?.seekTo(currentTime, true)
+            if (isPlaying) playerRef.current?.playVideo()
+            else playerRef.current?.pauseVideo()
             setIsMuted(playerRef.current?.isMuted() ?? null)
-
-            if (isPlaying) {
-              playerRef.current?.seekTo(currentTime, true)
-              playerRef.current?.playVideo()
-            } else {
-              playerRef.current?.seekTo(currentTime, true)
-              playerRef.current?.pauseVideo()
-            }
           }}
           onStateChange={handlePlayerStateChange}
         />
@@ -241,7 +196,6 @@ export default DiscoverPage
 const Slide = styled.div`
   flex: 0 0 100%;
 `
-
 const Page = styled.div`
   position: relative;
 `