Merge pull request #174 from dnd-side-project/chore/#173/discover-api-v2

[chore] 둘러보기 서버 로직 변경 대응

Author: maylh

src/app/providers/PlayerProvider.tsx

@@ -1,14 +1,14 @@
 import { createContext, useState, useContext, useRef, useCallback, type ReactNode } from 'react'
 
-import type { PlaylistInfo } from '@/entities/playlist'
+import type { PlaylistDetail } from '@/entities/playlist'
 
 type PlaylistContextType = {
-  currentPlaylist: PlaylistInfo | null
+  currentPlaylist: PlaylistDetail | null
   currentTrackIndex: number
   currentTime: number
   isPlaying: boolean
   setPlaylist: (
-    playlist: PlaylistInfo,
+    playlist: PlaylistDetail,
     trackIndex?: number,
     time?: number,
     autoPlay?: boolean
@@ -20,6 +20,7 @@ type PlaylistContextType = {
   updateCurrentTime: (time: number) => void
   playerRef: React.MutableRefObject<YT.Player | null>
   handlePlayerStateChange: (event: YT.OnStateChangeEvent) => void
+  handlePlayerError: (event: YT.OnErrorEvent) => void
   unmuteOnce: () => void
 }
 
@@ -30,7 +31,7 @@ interface PlaylistProviderProps {
 const PlaylistContext = createContext<PlaylistContextType | undefined>(undefined)
 
 const PlaylistProvider = ({ children }: PlaylistProviderProps) => {
-  const [currentPlaylist, setCurrentPlaylist] = useState<PlaylistInfo | null>(null)
+  const [currentPlaylist, setCurrentPlaylist] = useState<PlaylistDetail | null>(null)
   const [currentTrackIndex, setCurrentTrackIndex] = useState(0)
   const [currentTime, setCurrentTime] = useState(0)
   const [isPlaying, setIsPlaying] = useState(false)
@@ -39,7 +40,7 @@ const PlaylistProvider = ({ children }: PlaylistProviderProps) => {
   const playerRef = useRef<YT.Player | null>(null)
 
   const setPlaylist = (
-    playlist: PlaylistInfo,
+    playlist: PlaylistDetail,
     trackIndex?: number,
     time?: number,
     autoPlay = true
@@ -112,6 +113,10 @@ const PlaylistProvider = ({ children }: PlaylistProviderProps) => {
     [nextTrack]
   )
 
+  const handlePlayerError = useCallback(() => {
+    nextTrack()
+  }, [nextTrack])
+
   const value = {
     currentPlaylist,
     currentTrackIndex,
@@ -128,6 +133,7 @@ const PlaylistProvider = ({ children }: PlaylistProviderProps) => {
     unmuteOnce,
     isMuted,
     setIsMuted,
+    handlePlayerError,
   }
 
   return <PlaylistContext.Provider value={value}>{children}</PlaylistContext.Provider>

src/entities/playlist/api/playlist.ts

@@ -1,6 +1,6 @@
 import type {
   CdMetaResponse,
-  PlaylistDetailResponse,
+  PlaylistDetail,
   PlaylistParams,
   PlaylistResponse,
 } from '@/entities/playlist/types/playlist'
@@ -18,7 +18,7 @@ export const getLikedCdList = (sort: string) => {
 
 // 나의 CD 트랙리스트 조회
 export const getTracklist = (cdId: number) => {
-  return api.get<PlaylistDetailResponse>(`/main/playlist/mypage/me/${cdId}`)
+  return api.get<PlaylistDetail>(`/main/playlist/mypage/me/${cdId}`)
 }
 
 // 나의 CD 공개여부 토글
@@ -33,12 +33,17 @@ export const deleteMyCd = (cdId: number) => {
 
 // 셔플된 플레이리스트 목록 조회
 export const getShufflePlaylists = (params: PlaylistParams) => {
-  return api.get<PlaylistResponse>('/main/playlist/browse', { params })
+  return api.get<PlaylistResponse>('/main/playlist/browse/v2', { params })
 }
 
 // 트랙리스트 상세 조회
 export const getPlaylistDetail = (cdId: number) => {
-  return api.get<PlaylistDetailResponse>(`/main/playlist/${cdId}`)
+  return api.get<PlaylistDetail>(`/main/playlist/${cdId}`)
+}
+
+// 내 트랙리스트 상세 조회
+export const getMyPlaylistDetail = (cdId: number) => {
+  return api.get<PlaylistDetail>(`/main/playlist/mypage/me/${cdId}`)
 }
 
 // 하트비트 시작

src/entities/playlist/model/usePlaylists.ts

@@ -1,41 +1,42 @@
 import {
   useInfiniteQuery,
   useMutation,
+  useQueries,
   useQuery,
   useQueryClient,
   type InfiniteData,
 } from '@tanstack/react-query'
 
 import {
+  getMyPlaylistDetail,
   getPlaylistDetail,
   getPlaylistViewCounts,
   getShufflePlaylists,
   postPlaylistConfirm,
   postPlaylistStart,
 } from '@/entities/playlist/api/playlist'
-import type { Cursor, PlaylistResponse } from '@/entities/playlist/types/playlist'
+import type { PlaylistDetail, PlaylistResponse } from '@/entities/playlist/types/playlist'
 import { useAuthStore } from '@/features/auth/store/authStore'
 import { isDowntimeNow } from '@/shared/lib/isDowntimeNow'
 
 export const useShufflePlaylists = (size: number = 5) => {
   return useInfiniteQuery<
     PlaylistResponse, // queryFn 반환 타입
     Error, // 에러 타입
-    InfiniteData<PlaylistResponse, Cursor>, // select 후 데이터 타입
+    InfiniteData<PlaylistResponse, number>, // select 후 데이터 타입
     ['playlists', number], // queryKey 타입
-    Cursor | undefined // pageParam 타입
+    number | undefined // pageParam 타입
   >({
     queryKey: ['playlists', size],
     queryFn: ({ pageParam }) =>
       getShufflePlaylists({
-        cursorPosition: pageParam?.position,
-        cursorCardId: pageParam?.cardId,
+        cursorId: pageParam,
         size,
       }),
     initialPageParam: undefined, // 첫 호출은 커서 없이 시작
     getNextPageParam: (lastPage) => {
-      if (lastPage.hasNext && lastPage.nextCursor) {
-        return lastPage.nextCursor // Cursor 타입
+      if (lastPage.hasNext) {
+        return lastPage.nextCursor
       }
       return undefined
     },
@@ -53,6 +54,14 @@ export const usePlaylistDetail = (playlistId: number | null, options?: { enabled
   })
 }
 
+export const useMyPlaylistDetail = (playlistId: number | null, options?: { enabled?: boolean }) => {
+  return useQuery({
+    queryKey: ['myPlaylistDetail', playlistId],
+    queryFn: () => getMyPlaylistDetail(playlistId as number),
+    enabled: options?.enabled ?? !!playlistId,
+  })
+}
+
 export const usePlaylistStartMutation = () => {
   const queryClient = useQueryClient()
 
@@ -81,3 +90,22 @@ export const usePlaylistViewCounts = (playlistId: number) => {
     queryFn: () => getPlaylistViewCounts(playlistId),
   })
 }
+
+export const usePlaylistDetails = (ids: number[]) => {
+  const results = useQueries({
+    queries: ids.map((id) => ({
+      queryKey: ['playlistDetail', id],
+      queryFn: () => getPlaylistDetail(id),
+      enabled: ids.length > 0,
+    })),
+  })
+
+  const isLoading = results.some((r) => r.isLoading)
+  const isError = results.some((r) => r.isError)
+  const data = results.reduce<PlaylistDetail[]>((acc, q) => {
+    if (q.data) acc.push(q.data)
+    return acc
+  }, [])
+
+  return { data, isLoading, isError }
+}

src/entities/playlist/types/playlist.ts

@@ -2,6 +2,7 @@ export interface CdBasicInfo {
   playlistId: number
   playlistName: string
   creatorNickname?: string
+  genre: string
   isPublic: boolean
 }
 
@@ -43,33 +44,15 @@ export interface Track {
 export interface Creator {
   creatorId: string
   creatorNickname: string
+  creatorProfileImageUrl?: string
 }
 
-export interface PlaylistDetail {
+export interface PlaylistDetail extends OnlyCdResponse, Creator {
   playlistId: number
   playlistName: string
-  genre: string
-  songs: Track[]
   isPublic: boolean
-}
-
-export interface PlaylistDetailResponse extends PlaylistDetail, OnlyCdResponse {
-  creatorId: string
-  creatorNickname: string
-  creatorProfileImageUrl?: string
-}
-
-export interface PlaylistInfo extends PlaylistDetail {
-  cardId?: number
-  position?: number
-  shareUrl?: string
-  totalTime?: string
-  creator: Creator
-
-  cdResponse?: {
-    cdItems: CdCustomData[]
-  }
-  cdItems?: CdCustomData[]
+  songs: Track[]
+  genre: string
 }
 
 // 커서 정보
@@ -79,14 +62,13 @@ export interface Cursor {
 }
 
 export interface PlaylistResponse {
-  content: PlaylistInfo[]
-  nextCursor: Cursor | null
+  content: number[] // playlistId 배열
+  nextCursor: number | null
   size: number
   hasNext: boolean
 }
 
 export interface PlaylistParams {
-  cursorPosition?: number
-  cursorCardId?: number
+  cursorId?: number
   size?: number
 }

src/features/swipe/ui/SwipeCarousel.tsx

@@ -4,23 +4,21 @@ import { useLocation, useNavigate, useParams } from 'react-router-dom'
 import useEmblaCarousel from 'embla-carousel-react'
 import styled from 'styled-components'
 
-import type { PlaylistInfo } from '@/entities/playlist'
-
-interface SwipeCarouselProps {
+interface SwipeCarouselProps<T extends { playlistId: number }> {
   children: React.ReactNode
-  data: PlaylistInfo[]
+  data: T[]
   axis: 'x' | 'y'
   onSelectIndexChange?: (activeIndex: number) => void
   basePath: string
 }
 
-const SwipeCarousel = ({
+const SwipeCarousel = <T extends { playlistId: number }>({
   children,
   data,
   axis,
   onSelectIndexChange,
   basePath,
-}: SwipeCarouselProps) => {
+}: SwipeCarouselProps<T>) => {
   const navigate = useNavigate()
   const { id: playlistId } = useParams()
   const location = useLocation()
@@ -36,6 +34,7 @@ const SwipeCarousel = ({
     startIndex: initialIndex > 0 ? initialIndex : 0, // 매치 실패 시 0번으로
     containScroll: axis === 'x' && data.length <= 3 ? false : 'trimSnaps',
   })
+
   // 슬라이드 선택 시 URL 업데이트
   const onSelect = useCallback(() => {
     if (!emblaApi || data.length === 0) return

src/pages/discover/DiscoverLayout.tsx

@@ -25,6 +25,7 @@ const Content = () => {
     currentTime,
     isPlaying,
     handlePlayerStateChange,
+    handlePlayerError,
   } = usePlaylist()
 
   const deviceType = useDevice()
@@ -69,6 +70,7 @@ const Content = () => {
           }}
           onStateChange={handlePlayerStateChange}
           setIsMuted={setIsMuted}
+          onError={handlePlayerError}
         />
       )}