Merge pull request #108 from dnd-side-project/feat/#107/discover-ux

[feat] 둘러보기 UX 개선사항 반영

Author: maylh

src/shared/ui/Link.tsx

@@ -6,11 +6,12 @@ import type { Track } from '@/entities/playlist'
 interface LinkProps {
   variant?: 'large' | 'small'
   data: Track
+  onClick?: () => void
 }
 
-const Link = ({ variant = 'large', data }: LinkProps) => {
+const Link = ({ variant = 'large', data, onClick }: LinkProps) => {
   return (
-    <LinkBox $variant={variant}>
+    <LinkBox $variant={variant} onClick={onClick}>
       <Thumbnail $thumbnail={data.youtubeThumbnail ?? undefined} $variant={variant}>
         {!data.youtubeThumbnail && (
           <Gallery width={variant === 'large' ? 24 : 20} height={variant === 'large' ? 24 : 20} />

src/widgets/playlist/PlaylistInfo.tsx

@@ -2,6 +2,7 @@ import { useNavigate } from 'react-router-dom'
 
 import styled from 'styled-components'
 
+import { usePlaylist } from '@/app/providers/PlayerProvider'
 import { Cancel } from '@/assets/icons'
 import type { PlaylistDetailResponse } from '@/entities/playlist'
 import { getGenreLabel } from '@/shared/lib'
@@ -17,6 +18,13 @@ interface PlaylistInfoProps {
 
 const PlaylistInfo = ({ playlistData, isLoading, isError }: PlaylistInfoProps) => {
   const navigate = useNavigate()
+  const { setPlaylist, currentPlaylist } = usePlaylist()
+
+  const handleClickTrack = (trackIndex: number) => {
+    if (!currentPlaylist) return
+    navigate(-1)
+    setPlaylist(currentPlaylist, trackIndex, 0)
+  }
 
   if (isError || !playlistData) {
     return (
@@ -50,7 +58,12 @@ const PlaylistInfo = ({ playlistData, isLoading, isError }: PlaylistInfoProps) =
         <TrackInfo>
           {playlistData.songs &&
             playlistData.songs.map((track, index) => (
-              <Link key={index} data={track} variant="large" />
+              <Link
+                key={track.id}
+                data={track}
+                variant="large"
+                onClick={() => handleClickTrack(index)}
+              />
             ))}
         </TrackInfo>
       </Content>

src/widgets/playlist/PlaylistLayout.tsx

@@ -80,7 +80,7 @@ const PlaylistLayout = ({
         )}
       </Container>
       <Wrapper>
-        <CdWrapper>
+        <CdWrapper $isPlaying={isPlaying}>
           {isMobile && (
             <VolumeButton playerRef={playerRef} isMuted={isMuted} setIsMuted={setIsMuted} />
           )}
@@ -130,6 +130,18 @@ const Container = styled.div`
   justify-content: space-between;
 `
 
-const CdWrapper = styled.div`
+const CdWrapper = styled.div<{ $isPlaying: boolean }>`
   position: relative;
+  animation: spin 40s linear infinite;
+  animation-play-state: ${(props) => (props.$isPlaying ? 'running' : 'paused')};
+  transform-origin: center;
+
+  @keyframes spin {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 `

src/widgets/playlist/YoutubePlayer.tsx

@@ -1,7 +1,7 @@
+import { useRef, useEffect } from 'react'
 import YouTube from 'react-youtube'
-import type { YouTubeProps, YouTubeEvent, YouTubePlayer } from 'react-youtube' //
+import type { YouTubeProps, YouTubeEvent, YouTubePlayer } from 'react-youtube'
 
-import { useDevice } from '@/shared/lib/useDevice'
 
 interface YoutubePlayerProps {
   videoId: string
@@ -10,23 +10,38 @@ interface YoutubePlayerProps {
 }
 
 function YoutubePlayer({ videoId, onReady, onStateChange }: YoutubePlayerProps) {
-  const deviceType = useDevice()
-  const isMobile = deviceType === 'mobile'
+  const playerRef = useRef<YouTubePlayer | null>(null)
+  const isFirstLoad = useRef(true)
 
   const playerOpts: YouTubeProps['opts'] = {
     playerVars: {
       autoplay: 1,
-      mute: isMobile ? 1 : 0,
+      mute: 0,
       playsinline: 1, // 모바일 인라인 재생
     },
   }
 
+  useEffect(() => {
+    if (!isFirstLoad.current && playerRef.current && videoId) {
+      // 첫 로딩 제외하고 loadVideoById 호출
+      try {
+        playerRef.current.loadVideoById(videoId)
+      } catch (e) {
+        console.error('loadVideoById 실패', e)
+      }
+    }
+    isFirstLoad.current = false
+  }, [videoId])
+
   return (
     <div style={{ width: 0, height: 0, overflow: 'hidden', position: 'absolute' }}>
       <YouTube
         videoId={videoId}
         opts={playerOpts}
-        onReady={onReady}
+        onReady={(e) => {
+          playerRef.current = e.target
+          onReady(e)
+        }}
         onStateChange={onStateChange}
       />
     </div>