Merge pull request #220 from dnd-side-project/fix/#217/qa-feed-curation

[fix] 홈, 검색, 피드, 큐레이션 관련 QA

Author: maylh

src/app/providers/PlayerProvider.tsx

@@ -53,14 +53,17 @@ const PlaylistProvider = ({ children }: PlaylistProviderProps) => {
     if (time !== undefined) setCurrentTime(time)
 
     const isSamePlaylist = currentPlaylist?.playlistId === playlist.playlistId
-
     setIsPlaying((prev) => (isSamePlaylist ? prev : autoPlay))
 
     if (playerRef.current) {
-      if (time !== undefined) playerRef.current.seekTo(time, true)
-
-      if (!isSamePlaylist && autoPlay) {
-        playerRef.current.playVideo()
+      try {
+        const state = playerRef.current.getPlayerState()
+        if (state === -1 || state === undefined) return
+
+        if (time !== undefined) playerRef.current.seekTo(time, true)
+        if (!isSamePlaylist && autoPlay) playerRef.current.playVideo()
+      } catch {
+        // 플레이어 미준비 상태는 onReady에서 처리
       }
     }
   }

src/entities/playlist/model/usePlaylists.ts

@@ -64,7 +64,10 @@ export const useShufflePlaylists = (size: number = 5) => {
   })
 }
 
-export const usePlaylistDetail = (playlistId: number | null, options?: { enabled?: boolean }) => {
+export const usePlaylistDetail = (
+  playlistId: number | null | undefined, // TODO: mycd 레거시 정리 시 null 타입도 삭제
+  options?: { enabled?: boolean }
+) => {
   return useQuery({
     queryKey: ['playlistDetail', playlistId],
     queryFn: () => getPlaylistDetail(playlistId as number),
@@ -157,10 +160,11 @@ type PageParam = { cursor: number; direction: CarouselDirection } | undefined
 export const useCarouselCdList = (
   type: FEED_CD_LIST_TAB_TYPE, // cds or likes
   shareCode: string,
-  params: CarouselParams
+  params: CarouselParams,
+  options?: { enabled?: boolean }
 ) => {
   return useInfiniteQuery({
-    queryKey: ['feedCdList', type, shareCode, params.sort],
+    queryKey: ['feedCdList', type, shareCode, params.sort, params.anchorId],
 
     queryFn: ({ pageParam }: { pageParam: PageParam }) => {
       const fetchFn = type === 'cds' ? getCdCarousel : getLikedCdCarousel
@@ -195,6 +199,6 @@ export const useCarouselCdList = (
       return { cursor: firstPage.prevCursor, direction: 'PREV' }
     },
 
-    enabled: !!shareCode,
+    enabled: options?.enabled !== false && !!shareCode,
   })
 }

src/features/like/model/useLike.ts

@@ -18,6 +18,7 @@ export const useLikeStatus = (playlistId: number, options?: { enabled?: boolean
 interface UseLikeOptions {
   shouldNavigate?: boolean
   getNextId?: () => number | undefined
+  openLoginModal?: () => void
 }
 
 const useLike = (playlistId: number, options?: UseLikeOptions) => {
@@ -89,7 +90,7 @@ const useLike = (playlistId: number, options?: UseLikeOptions) => {
 
   const toggleLike = () => {
     if (!isLogin) {
-      navigate('/login')
+      options?.openLoginModal?.()
       return
     }
 

src/features/like/ui/LikeButton.tsx

@@ -1,4 +1,5 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 
 import styled, { useTheme } from 'styled-components'
 
@@ -7,6 +8,7 @@ import type { CdMetaResponse } from '@/entities/playlist'
 import { useLike } from '@/features/like'
 import { getNextId } from '@/shared/lib'
 import { myCdButton } from '@/shared/styles/mixins'
+import { Modal } from '@/shared/ui'
 import SvgButton from '@/shared/ui/SvgButton'
 
 interface LikeButtonProps {
@@ -23,13 +25,16 @@ const ICON_STYLE = {
 } as const
 
 const LikeButton = ({ playlistId, type = 'HOME', playlistData, activeIndex }: LikeButtonProps) => {
+  const [isModalOpen, setIsModalOpen] = useState(false)
   const theme = useTheme()
+  const navigate = useNavigate()
   const { liked, toggleLike } = useLike(playlistId, {
     shouldNavigate: type === 'MY',
     getNextId: () => {
       if (!playlistData || activeIndex === undefined) return undefined
       return getNextId(activeIndex, playlistData)
     },
+    openLoginModal: () => setIsModalOpen(true),
   })
 
   const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -41,25 +46,45 @@ const LikeButton = ({ playlistId, type = 'HOME', playlistData, activeIndex }: Li
   const opacity = type === 'HOME' ? (liked ? 1 : 0.2) : 1
 
   return (
-    <Wrapper $opacity={opacity} $isMy={type === 'MY'}>
-      <SvgButton
-        icon={Icon}
-        onClick={handleClick}
-        width={size}
-        height={size}
-        fill={
-          type === 'HOME'
-            ? liked
-              ? theme.COLOR['primary-normal']
-              : theme.COLOR['gray-200']
-            : liked
-              ? theme.COLOR['primary-normal']
-              : 'none'
-        }
-        stroke={liked ? theme.COLOR['primary-normal'] : theme.COLOR['gray-200']}
-      />
-      {type === 'MY' && <p>좋아요</p>}
-    </Wrapper>
+    <>
+      <Wrapper $opacity={opacity} $isMy={type === 'MY'}>
+        <SvgButton
+          icon={Icon}
+          onClick={handleClick}
+          width={size}
+          height={size}
+          fill={
+            type === 'HOME'
+              ? liked
+                ? theme.COLOR['primary-normal']
+                : theme.COLOR['gray-200']
+              : liked
+                ? theme.COLOR['primary-normal']
+                : 'none'
+          }
+          stroke={liked ? theme.COLOR['primary-normal'] : theme.COLOR['gray-200']}
+        />
+        {type === 'MY' && <p>좋아요</p>}
+      </Wrapper>
+
+      {isModalOpen && (
+        <Modal
+          isOpen={isModalOpen}
+          title="로그인 후 이용할 수 있어요"
+          ctaType="double"
+          onConfirm={() => {
+            navigate('/login')
+            setIsModalOpen(false)
+          }}
+          onCancel={() => {
+            setIsModalOpen(false)
+          }}
+          onClose={() => setIsModalOpen(false)}
+          confirmText="로그인하기"
+          cancelText="다음에 하기"
+        />
+      )}
+    </>
   )
 }
 

src/pages/curation/CurationLayout.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import { Outlet, useLocation, useNavigate, useParams } from 'react-router-dom'
+import { Outlet, useLocation, useMatch, useNavigate, useParams } from 'react-router-dom'
 
 import { LeftArrow } from '@/assets/icons'
 import { useBundlePlaylist } from '@/entities/bundle'
@@ -12,6 +12,8 @@ const CurationLayout = () => {
   const location = useLocation()
   const { bundleId, id: playlistId } = useParams()
 
+  const isTracklistPage = useMatch('/curation/:bundleId/play/:id/tracklist')
+
   const sectionTitle = useMemo(() => {
     return location.state?.sectionTitle || getRandomItem(HOME_SECTION_TITLES.TIME)
   }, [location.state?.sectionTitle])
@@ -26,15 +28,17 @@ const CurationLayout = () => {
 
   return (
     <div>
-      <Header
-        left={
-          <SvgButton
-            icon={LeftArrow}
-            onClick={() => navigate(playlistId ? `/curation/${bundleId}` : '/')}
-          />
-        }
-        center={<span>{playlistId ? data?.title : sectionTitle}</span>}
-      />
+      {!isTracklistPage && (
+        <Header
+          left={
+            <SvgButton
+              icon={LeftArrow}
+              onClick={() => navigate(playlistId ? `/curation/${bundleId}` : '/')}
+            />
+          }
+          center={<span>{playlistId ? data?.title : sectionTitle}</span>}
+        />
+      )}
 
       <Outlet context={data} />
     </div>

src/pages/curation/index.tsx

@@ -128,7 +128,7 @@ const TotalCount = styled.p`
 `
 
 const ContentSection = styled.section`
-  padding: 24px 0 0 0;
+  padding: 24px 0 60px 0;
 `
 
 const PlaylistItems = styled.div`

src/pages/curation/play/index.tsx

@@ -3,17 +3,18 @@ import { useNavigate, useOutletContext, useParams } from 'react-router-dom'
 
 import type { BundleInfo } from '@/entities/bundle'
 import { usePlaylistDetail, usePlaylistDetails } from '@/entities/playlist'
-import { CurationCarousel } from '@/pages/curation/ui'
+import { PlaylistCarousel } from '@/widgets/playlist'
 
 const CurationPlayer = () => {
   const bundle = useOutletContext<BundleInfo>()
+
   const navigate = useNavigate()
   const { id: routePlaylistId } = useParams()
 
   const ids = useMemo(() => bundle.playlists.map((p) => p.playlistId), [bundle])
   const { data: playlistData } = usePlaylistDetails(ids)
 
-  const routeId = routePlaylistId ? Number(routePlaylistId) : null
+  const routeId = Number(routePlaylistId)
 
   useEffect(() => {
     if (!playlistData || routeId) return
@@ -40,10 +41,11 @@ const CurationPlayer = () => {
   if (!playlistDetail || !playlistData) return null
 
   return (
-    <CurationCarousel
+    <PlaylistCarousel
       playlistData={playlistData}
       playlistDetail={playlistDetail}
       onCenterChange={handleCenterChange}
+      basePath={`/curation/${bundle.bundleId}/play`}
     />
   )
 }