Merge pull request #95 from dnd-side-project/fix/#94/index

[fix] 둘러보기 selectedIndex 오류 수정

Author: maylh

src/features/swipe/ui/SwipeCarousel.tsx

@@ -32,6 +32,7 @@ const SwipeCarousel = ({ children, data, onSelectIndexChange }: SwipeCarouselPro
     if (!emblaApi || data.length === 0) return
 
     const selectedIndex = emblaApi.selectedScrollSnap()
+    console.log('selectedIndex ', selectedIndex)
     onSelectIndexChange?.(selectedIndex) // 부모에 알림
     const newId = data[selectedIndex]?.playlistId
 

src/pages/discover/index.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useNavigate, useParams } from 'react-router-dom'
 import type { YouTubeEvent } from 'react-youtube'
 
 import styled from 'styled-components'
@@ -34,6 +34,8 @@ const DiscoverPage = () => {
   const playerRef = useRef<YT.Player | null>(null)
   const [showCoachmark, setShowCoachmark] = useState(false)
   const [isMuted, setIsMuted] = useState<boolean | null>(null)
+  const [, setCurrentIndex] = useState(0)
+  const navigate = useNavigate()
 
   // 코치마크
   useEffect(() => {
@@ -81,15 +83,28 @@ const DiscoverPage = () => {
 
   // 최종 배열
   const playlistsData = useMemo(() => {
-    if (playlistAsInfo) {
-      return [
-        playlistAsInfo,
-        ...shufflePlaylists.filter((p) => p.playlistId !== playlistAsInfo.playlistId),
-      ]
+    if (!playlistAsInfo) {
+      return shufflePlaylists
     }
-    return shufflePlaylists
+    // URL에서 가져온 플레이리스트를 playlistsData 배열에 추가
+    // 기존에 shufflePlaylists에 있는 경우, 순서를 변경하지 않고 추가
+    const existingPlaylist = shufflePlaylists.find(
+      (p) => p.playlistId === playlistAsInfo.playlistId
+    )
+    if (existingPlaylist) {
+      return shufflePlaylists
+    }
+    return [playlistAsInfo, ...shufflePlaylists]
   }, [playlistAsInfo, shufflePlaylists])
 
+  // 플레이리스트 ID로 인덱스를 찾는 함수를 추가합니다.
+  const getPlaylistIndexById = useCallback(
+    (id: number) => {
+      return playlistsData.findIndex((p) => p.playlistId === id)
+    },
+    [playlistsData]
+  )
+
   const videoId = currentPlaylist
     ? getVideoId(currentPlaylist.songs[currentTrackIndex]?.youtubeUrl)
     : null
@@ -98,12 +113,14 @@ const DiscoverPage = () => {
 
   // 최초 playlist 초기화
   useEffect(() => {
-    if (!currentPlaylist && playlistsData.length > 0 && isReady) {
-      const initialPlaylist =
-        playlistsData.find((p) => p.playlistId === Number(playlistId)) || playlistsData[0]
+    if (playlistsData.length > 0 && isReady) {
+      const initialIndex = getPlaylistIndexById(Number(playlistId))
+      const initialPlaylist = playlistsData[initialIndex > -1 ? initialIndex : 0]
+
+      setCurrentIndex(initialIndex > -1 ? initialIndex : 0)
       setPlaylist(initialPlaylist, 0, 0)
     }
-  }, [playlistsData, currentPlaylist, playlistId, setPlaylist])
+  }, [playlistsData, playlistId, getPlaylistIndexById, setPlaylist])
 
   // // URL을 현재 선택된 플레이리스트로 동기화
   // useEffect(() => {
@@ -155,15 +172,34 @@ const DiscoverPage = () => {
   // 캐러셀 스와이프 시 현재 플레이리스트 업데이트
   const handleSelectPlaylist = useCallback(
     (index: number) => {
+      // 현재 인덱스 상태를 업데이트
+      setCurrentIndex(index)
+
       const selectedPlaylist = playlistsData[index]
       if (selectedPlaylist && currentPlaylist?.playlistId !== selectedPlaylist.playlistId) {
         setPlaylist(selectedPlaylist, 0, 0)
+
+        // URL을 동기화
+        const newId = selectedPlaylist.playlistId
+        if (Number(playlistId) !== newId) {
+          navigate(`/discover/${newId}`, { replace: true })
+        }
       }
+
       if (index === playlistsData.length - 1 && hasNextPage && !isFetchingNextPage) {
         fetchNextPage()
       }
     },
-    [setPlaylist, currentPlaylist, playlistsData, fetchNextPage, hasNextPage, isFetchingNextPage]
+    [
+      setPlaylist,
+      currentPlaylist,
+      playlistsData,
+      fetchNextPage,
+      hasNextPage,
+      isFetchingNextPage,
+      navigate,
+      playlistId,
+    ]
   )
 
   const handlePlayerStateChange = useCallback(

src/shared/ui/Cd.tsx

@@ -59,6 +59,7 @@ const Cd = ({ variant, bgColor = 'default', stickers }: CdProps) => {
             key={`${cdItemId}-${xCoordinate}-${yCoordinate}`}
             src={src}
             alt="cd-sticker"
+            // crossOrigin="anonymous"
             style={{
               position: 'absolute',
               left: xCoordinate * ratio,

src/widgets/chat/ChatBottomSheet.tsx

@@ -55,8 +55,6 @@ const ChatBottomSheet = ({ isOpen, onClose, roomId, creatorId }: ChatBottomSheet
     }
   }
 
-  console.log(allMessages)
-
   return (
     <BottomSheet isOpen={isOpen} onClose={onClose} height="fit-content">
       <Title>실시간 채팅</Title>