Merge pull request #207 from dnd-side-project/feat/#194/feed-cd-api

[feat] 피드 CD 재생 API 연결

Author: maylh

src/entities/playlist/api/playlist.ts

@@ -5,6 +5,8 @@ import type {
   PlaylistDetail,
   PlaylistParams,
   PlaylistResponse,
+  CarouselParams,
+  CarouselCdListResponse,
 } from '@/entities/playlist/types/playlist'
 import { api } from '@/shared/api/httpClient'
 
@@ -72,3 +74,17 @@ export const postPlaylistConfirm = (playlistId: number) => {
 export const getPlaylistViewCounts = (playlistId: number) => {
   return api.get(`/main/playlist/browse/view-counts/${playlistId}`)
 }
+
+// 피드 플레이리스트 캐러셀 조회
+export const getCdCarousel = (shareCode: string, params: CarouselParams) => {
+  return api.get<CarouselCdListResponse>(`/main/playlist/feed/${shareCode}/carousel`, {
+    params,
+  })
+}
+
+// 피드 좋아요한 플레이리스트 캐러셀 조회
+export const getLikedCdCarousel = (shareCode: string, params: CarouselParams) => {
+  return api.get<CarouselCdListResponse>(`/main/playlist/feed/${shareCode}/likes/carousel`, {
+    params,
+  })
+}

src/entities/playlist/model/useMyCd.ts

@@ -53,6 +53,7 @@ export const useMyCdActions = (cdId: number, options?: { enabled?: boolean }) =>
     mutationKey: ['patchMyCdPublic', cdId],
     mutationFn: () => patchMyCdPublic(cdId),
     onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['playlistDetail', cdId] })
       queryClient.invalidateQueries({ queryKey: ['getTracklist', cdId] })
       queryClient.invalidateQueries({ queryKey: ['myCdList'] })
       queryClient.invalidateQueries({ queryKey: ['feedCdList'] })

src/entities/playlist/model/usePlaylists.ts

@@ -10,7 +10,9 @@ import {
 } from '@tanstack/react-query'
 
 import {
+  getCdCarousel,
   getCdList,
+  getLikedCdCarousel,
   getLikedCdList,
   getMyPlaylistDetail,
   getPlaylistDetail,
@@ -24,6 +26,8 @@ import type {
   PlaylistResponse,
   CdListParams,
   FEED_CD_LIST_TAB_TYPE,
+  CarouselParams,
+  CarouselDirection,
 } from '@/entities/playlist/types/playlist'
 import { useAuthStore, type ShareCode } from '@/features/auth'
 
@@ -146,3 +150,39 @@ export const useFeedCdList = ({
     enabled: !!shareCode,
   })
 }
+
+type PageParam = { cursor: number; direction: CarouselDirection } | undefined
+
+export const useCarouselCdList = (
+  type: FEED_CD_LIST_TAB_TYPE, // cds or likes
+  shareCode: string,
+  params: CarouselParams
+) => {
+  return useInfiniteQuery({
+    queryKey: ['feedCdList', type, shareCode, params.sort, params.anchorId],
+
+    queryFn: ({ pageParam }: { pageParam: PageParam }) => {
+      const fetchFn = type === 'cds' ? getCdCarousel : getLikedCdCarousel
+
+      return fetchFn(shareCode, {
+        ...params,
+        cursor: pageParam?.cursor,
+        direction: pageParam?.direction,
+      })
+    },
+
+    initialPageParam: undefined as PageParam,
+
+    getNextPageParam: (lastPage): PageParam => {
+      if (!lastPage.hasNext || lastPage.nextCursor === null) return undefined
+      return { cursor: lastPage.nextCursor, direction: 'NEXT' }
+    },
+
+    getPreviousPageParam: (firstPage): PageParam => {
+      if (!firstPage.hasPrev || firstPage.prevCursor === null) return undefined
+      return { cursor: firstPage.prevCursor, direction: 'PREV' }
+    },
+
+    enabled: !!shareCode,
+  })
+}

src/entities/playlist/types/playlist.ts

@@ -95,3 +95,24 @@ export interface PlaylistParams {
   cursorId?: number
   size?: number
 }
+
+export type CarouselDirection = 'NEXT' | 'PREV'
+export type CarouselSort = 'POPULAR' | 'RECENT'
+
+export interface CarouselParams {
+  anchorId?: number
+  direction?: CarouselDirection
+  cursor?: number
+  sort?: CarouselSort
+  limit?: number
+}
+
+export interface CarouselCdListResponse {
+  content: (CdBasicInfo & OnlyCdResponse)[]
+  prevCursor: number | null
+  nextCursor: number | null
+  size: number
+  hasPrev: boolean
+  hasNext: boolean
+  totalCount: number
+}

src/pages/feed/FeedLayout.tsx

@@ -1,7 +1,16 @@
-import { Outlet } from 'react-router-dom'
+import { Outlet, useParams } from 'react-router-dom'
+
+import { useOwnerStatus } from '@/features/auth'
+import { Loading } from '@/shared/ui'
 
 const FeedLayout = () => {
-  return <Outlet />
+  const { shareCode = '' } = useParams()
+
+  const { data, isLoading } = useOwnerStatus(shareCode || '')
+
+  if (isLoading) return <Loading isLoading />
+
+  return <Outlet context={{ isOwner: data?.isOwner }} />
 }
 
 export default FeedLayout

src/pages/feed/cds/index.tsx

@@ -1,87 +1,5 @@
-import { useEffect, useCallback, useState, useMemo } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
+import { FeedCarousel } from '@/pages/feed/ui'
 
-import { useMyCdActions, useMyCdList } from '@/entities/playlist/model/useMyCd'
-import { CdViewerLayout } from '@/pages/feed/ui'
-import { Loading } from '@/shared/ui'
-
-const Cds = () => {
-  const navigate = useNavigate()
-  const { id: routePlaylistId } = useParams<{ id?: string }>()
-
-  const myCdPlaylist = useMyCdList('RECENT')
-
-  const playlistData = useMemo(() => {
-    return myCdPlaylist.data ?? []
-  }, [myCdPlaylist.data])
-
-  const isLoading = myCdPlaylist.isLoading
-  const isError = myCdPlaylist.isError
-
-  const [centerItem, setCenterItem] = useState<{
-    playlistId: number | null
-    playlistName: string
-  }>({ playlistId: null, playlistName: '' })
-
-  useEffect(() => {
-    if (isLoading || !playlistData.length) return
-
-    const routeId = routePlaylistId ? Number(routePlaylistId) : null
-    const found = routeId ? playlistData.find((p) => p.playlistId === routeId) : null
-
-    if (found) {
-      setCenterItem({
-        playlistId: found.playlistId,
-        playlistName: found.playlistName,
-      })
-    } else {
-      const first = playlistData[0]
-
-      setCenterItem({
-        playlistId: first.playlistId,
-        playlistName: first.playlistName,
-      })
-
-      navigate(`./${first.playlistId}`, { replace: true })
-    }
-  }, [playlistData, isLoading, routePlaylistId, navigate])
-
-  const handleCenterChange = useCallback(
-    (playlist: { playlistId: number; playlistName: string }) => {
-      setCenterItem(playlist)
-
-      const path = `./${playlist.playlistId}`
-
-      navigate(path, { replace: true })
-    },
-    [navigate]
-  )
-
-  const myCdDetail = useMyCdActions(Number(centerItem.playlistId), {
-    enabled: !!centerItem.playlistId,
-  })
-
-  const playlistDetail = myCdDetail.tracklist
-
-  if (isLoading) return <Loading isLoading />
-
-  if (isError) {
-    navigate('/error')
-    return null
-  }
-
-  return (
-    <>
-      <CdViewerLayout
-        playlistData={playlistData}
-        playlistDetail={playlistDetail}
-        centerItem={centerItem}
-        onCenterChange={handleCenterChange}
-        pageType="MY"
-        isOwner // TODO: 실제 값으로 수정 필요
-      />
-    </>
-  )
-}
+const Cds = () => <FeedCarousel type="cds" pageType="MY" />
 
 export default Cds

src/pages/feed/index.tsx

@@ -1,13 +1,13 @@
 import { useMemo, useState } from 'react'
-import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
+import { useNavigate, useOutletContext, useParams, useSearchParams } from 'react-router-dom'
 
 import styled, { css } from 'styled-components'
 
 import { Gear } from '@/assets/icons'
 import { FeedBg } from '@/assets/images'
 import { type FEED_CD_LIST_TAB_TYPE } from '@/entities/playlist'
 import { useUserProfile } from '@/entities/user'
-import { useOwnerStatus } from '@/features/auth'
+import { type ShareCodeOwnerResponse } from '@/features/auth'
 import { FeedCdList, FeedProfile } from '@/pages/feed/ui'
 import { FeedbackIcon } from '@/pages/feedback/ui'
 import { flexRowCenter } from '@/shared/styles/mixins'
@@ -26,7 +26,7 @@ const FeedPage = () => {
   const [searchParams, setSearchParams] = useSearchParams()
   const navigate = useNavigate()
 
-  const { data: ownershipData, isLoading: isOwnershipLoading } = useOwnerStatus(shareCode || '')
+  const { isOwner: isMyFeed } = useOutletContext<ShareCodeOwnerResponse>()
   const {
     userProfile,
     isLoading: isProfileLoading,
@@ -49,7 +49,6 @@ const FeedPage = () => {
     },
   })
 
-  const isMyFeed = ownershipData?.isOwner ?? false
   const currentTab = (searchParams.get('tab') || 'cds') as FEED_CD_LIST_TAB_TYPE
 
   const TAB_LIST = useMemo(
@@ -74,8 +73,9 @@ const FeedPage = () => {
     setSearchParams({ tab: nextTab }, { replace: true })
   }
 
-  if ((isOwnershipLoading && !ownershipData) || isProfileLoading) return <Loading isLoading />
+  if (isProfileLoading) return <Loading isLoading />
   if (isProfileError) return <NotFound isFullPage isProfile />
+
   return (
     <FeedWrapper>
       <TopVisualBackground>

src/pages/feed/likes/index.tsx

@@ -1,91 +1,5 @@
-import { useEffect, useCallback, useState, useMemo, useRef } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
+import { FeedCarousel } from '@/pages/feed/ui'
 
-import { usePlaylistDetail } from '@/entities/playlist'
-import { useMyLikedCdList } from '@/entities/playlist/model/useMyCd'
-import { CdViewerLayout } from '@/pages/feed/ui'
-import { Loading } from '@/shared/ui'
-
-const Likes = () => {
-  const navigate = useNavigate()
-  const { id: routePlaylistId } = useParams<{ id?: string }>()
-
-  const likedCdPlaylist = useMyLikedCdList('RECENT')
-
-  const playlistData = useMemo(() => {
-    return likedCdPlaylist.data ?? []
-  }, [likedCdPlaylist.data])
-
-  const isLoading = likedCdPlaylist.isLoading
-  const isError = likedCdPlaylist.isError
-
-  const [centerItem, setCenterItem] = useState<{
-    playlistId: number | null
-    playlistName: string
-  }>({ playlistId: null, playlistName: '' })
-
-  const lastIndexRef = useRef<number>(0)
-  useEffect(() => {
-    if (likedCdPlaylist.isLoading || !playlistData.length) return
-
-    const routeId = routePlaylistId ? Number(routePlaylistId) : null
-    const currentIndex = playlistData.findIndex((p) => p.playlistId === routeId)
-
-    if (currentIndex !== -1) {
-      lastIndexRef.current = currentIndex
-      setCenterItem({
-        playlistId: playlistData[currentIndex].playlistId,
-        playlistName: playlistData[currentIndex].playlistName,
-      })
-    } else {
-      const nextItem = playlistData[lastIndexRef.current] || playlistData.at(-1)
-
-      if (nextItem) {
-        setCenterItem({
-          playlistId: nextItem.playlistId,
-          playlistName: nextItem.playlistName,
-        })
-
-        navigate(`../${nextItem.playlistId}`, { replace: true })
-      }
-    }
-  }, [playlistData, likedCdPlaylist.isLoading, routePlaylistId, navigate])
-
-  const handleCenterChange = useCallback(
-    (playlist: { playlistId: number; playlistName: string }) => {
-      setCenterItem(playlist)
-
-      const path = `../${playlist.playlistId}`
-
-      navigate(path, { replace: true })
-    },
-    [navigate]
-  )
-
-  const likedCdDetail = usePlaylistDetail(centerItem.playlistId, {
-    enabled: !!centerItem.playlistId,
-  })
-  const playlistDetail = likedCdDetail.data
-
-  if (isLoading) return <Loading isLoading />
-
-  if (isError) {
-    navigate('/error')
-    return null
-  }
-
-  return (
-    <>
-      <CdViewerLayout
-        playlistData={playlistData}
-        playlistDetail={playlistDetail}
-        centerItem={centerItem}
-        onCenterChange={handleCenterChange}
-        pageType="LIKE"
-        isOwner // TODO: 실제 값으로 수정 필요
-      />
-    </>
-  )
-}
+const Likes = () => <FeedCarousel type="likes" pageType="LIKE" />
 
 export default Likes