Merge pull request #177 from dnd-side-project/develop

[deploy] release v1.1.0

Author: maylh

package.json

@@ -1,7 +1,7 @@
 {
   "name": "dnd-13th-8-frontend",
   "private": true,
-  "version": "1.0.4",
+  "version": "1.1.0",
   "type": "module",
   "engines": {
     "node": "22.12.0"

src/app/providers/ChatProvider.tsx

@@ -0,0 +1,22 @@
+import { createContext, useContext, type ReactNode } from 'react'
+
+import { useChatSocket } from '@/features/chat/model/sendMessage'
+
+interface ChatProviderProps {
+  roomId: string
+  children: ReactNode
+}
+
+export const ChatContext = createContext<ReturnType<typeof useChatSocket> | null>(null)
+
+export const ChatProvider = ({ roomId, children }: ChatProviderProps) => {
+  const chat = useChatSocket(roomId)
+
+  return <ChatContext.Provider value={chat}>{children}</ChatContext.Provider>
+}
+
+export const useChat = () => {
+  const ctx = useContext(ChatContext)
+  if (!ctx) throw new Error('useChat 사용 오류: ChatProvider 내부에서 호출하세요')
+  return ctx
+}

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/app/providers/index.ts

@@ -1,6 +1,8 @@
+import { ChatProvider } from '@/app/providers/ChatProvider'
+
 import { default as PlayerProvider } from './PlayerProvider'
 import QueryProvider from './QueryProvider'
 import ThemeProvider from './ThemeProvider'
 import { ToastProvider, useToast } from './ToastProvider'
 
-export { QueryProvider, ThemeProvider, PlayerProvider, ToastProvider, useToast }
+export { QueryProvider, ThemeProvider, PlayerProvider, ToastProvider, useToast, ChatProvider }

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/chat/api/chat.ts

@@ -2,6 +2,7 @@ import type {
   ChatCountResponse,
   ChatHistoryParams,
   ChatHistoryResponse,
+  ListenerNumResponse,
 } from '@/features/chat/types/chat'
 import { api } from '@/shared/api/httpClient'
 
@@ -18,3 +19,7 @@ export const deleteChatMessage = async (roomId: string, messageId: string) => {
 export const getChatCount = (roomId: string) => {
   return api.get<ChatCountResponse>(`/chat/rooms/${roomId}/count/chat`)
 }
+
+export const getListenerCount = (roomId: string) => {
+  return api.get<ListenerNumResponse>(`/chat/rooms/${roomId}/count/member`)
+}