[feat] /mycd playlistId 기반 라우팅 처리

src/features/swipe/ui/SwipeCarousel.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
 
 import useEmblaCarousel from 'embla-carousel-react'
 import styled from 'styled-components'
@@ -9,37 +9,45 @@ import type { PlaylistInfo } from '@/entities/playlist'
 interface SwipeCarouselProps {
   children: React.ReactNode
   data: PlaylistInfo[]
+  axis: 'x' | 'y'
   onSelectIndexChange?: (activeIndex: number) => void
+  basePath: string
 }
 
-const SwipeCarousel = ({ children, data, onSelectIndexChange }: SwipeCarouselProps) => {
+const SwipeCarousel = ({
+  children,
+  data,
+  axis,
+  onSelectIndexChange,
+  basePath,
+}: SwipeCarouselProps) => {
   const navigate = useNavigate()
   const { id: playlistId } = useParams()
+  const location = useLocation()
 
   const initialIndex =
     !isNaN(Number(playlistId)) && Number(playlistId) > 0
       ? data.findIndex((p) => p.playlistId === Number(playlistId))
       : 0
 
   const [emblaRef, emblaApi] = useEmblaCarousel({
-    axis: 'y',
-    loop: false,
+    axis,
+    loop: axis === 'x',
     startIndex: initialIndex > 0 ? initialIndex : 0, // 매치 실패 시 0번으로
+    containScroll: axis === 'x' && data.length <= 3 ? false : 'trimSnaps',
   })
-
   // 슬라이드 선택 시 URL 업데이트
   const onSelect = useCallback(() => {
     if (!emblaApi || data.length === 0) return
 
     const selectedIndex = emblaApi.selectedScrollSnap()
-    console.log('selectedIndex ', selectedIndex)
     onSelectIndexChange?.(selectedIndex) // 부모에 알림
-    const newId = data[selectedIndex]?.playlistId
 
+    const newId = data[selectedIndex]?.playlistId
     if (newId != null && playlistId !== String(newId)) {
-      navigate(`/discover/${newId}`, { replace: true })
+      navigate(`${basePath}/${newId}${location.search}`, { replace: true })
     }
-  }, [emblaApi, data, navigate, playlistId])
+  }, [emblaApi, data, navigate, playlistId, onSelectIndexChange, basePath, location.search])
 
   useEffect(() => {
     if (!emblaApi) return
@@ -51,9 +59,17 @@ const SwipeCarousel = ({ children, data, onSelectIndexChange }: SwipeCarouselPro
   }, [emblaApi, onSelect])
 
   return (
-    <EmblaViewport ref={emblaRef}>
-      <EmblaContainer>{children}</EmblaContainer>
-    </EmblaViewport>
+    <>
+      {axis === 'x' ? (
+        <div ref={emblaRef}>
+          <HorizontalContainer>{children}</HorizontalContainer>
+        </div>
+      ) : (
+        <EmblaViewport ref={emblaRef}>
+          <VerticaContainer>{children}</VerticaContainer>
+        </EmblaViewport>
+      )}
+    </>
   )
 }
 
@@ -64,8 +80,13 @@ const EmblaViewport = styled.div`
   overflow: hidden;
 `
 
-const EmblaContainer = styled.div`
+const VerticaContainer = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
 `
+
+const HorizontalContainer = styled.div`
+  display: flex;
+  touch-action: pan-x pinch-zoom;
+`

src/pages/discover/index.tsx

@@ -60,7 +60,7 @@
   } = useShufflePlaylists()
 
   // shuffleData에서 실제 playlist 배열만 추출
   const shufflePlaylists = shuffleData?.pages.flatMap((page) => page.content) ?? []
 
   // PlaylistDetailResponse → PlaylistInfo 변환
   const playlistAsInfo = useMemo(() => {
@@ -151,7 +151,12 @@
   return (
     <Page>
       {showCoachmark && <DiscoverCoachMark onClose={handleCloseCoachmark} />}
-      <SwipeCarousel data={playlistsData} onSelectIndexChange={handleSelectPlaylist}>
+      <SwipeCarousel
+        data={playlistsData}
+        onSelectIndexChange={handleSelectPlaylist}
+        axis="y"
+        basePath="/discover"
+      >
         {playlistsData.map((data) => (
           <Slide key={data.playlistId}>
             <PlaylistLayout

src/pages/mycd/index.tsx

@@ -1,5 +1,5 @@
-import { useEffect, useCallback, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { useEffect, useCallback, useState, useMemo } from 'react'
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
 
 import styled from 'styled-components'
 
@@ -10,6 +10,7 @@ import { useMyCdList, useMyLikedCdList } from '@/entities/playlist/model/useMyCd
 import { useAuthStore } from '@/features/auth/store/authStore'
 import { useChatSocket } from '@/features/chat/model/sendMessage'
 import { HeaderTab, PlaylistCarousel } from '@/pages/mycd/ui'
+import type { MyCdTab } from '@/pages/mycd/ui/HeaderTab'
 import { getVideoId } from '@/shared/lib'
 import { useDevice } from '@/shared/lib/useDevice'
 import { flexColCenter, flexRowCenter } from '@/shared/styles/mixins'
@@ -29,22 +30,29 @@ const MyCdPage = () => {
     currentTime,
     playerRef,
   } = usePlaylist()
+
   const [isMuted, setIsMuted] = useState<boolean | null>(null)
-  const [selectedTab, setSelectedTab] = useState<'MY' | 'LIKE'>('MY')
   const { userInfo } = useAuthStore()
   const navigate = useNavigate()
   const deviceType = useDevice()
   const isMobile = deviceType === 'mobile'
 
-  const handleTabSelect = (tab: 'MY' | 'LIKE') => {
-    setSelectedTab(tab)
-  }
+  const { id: routePlaylistId } = useParams<{ id?: string }>()
+  const { search } = useLocation()
+  const typeParam = new URLSearchParams(search).get('type')
+  const [selectedTab, setSelectedTab] = useState<MyCdTab>(typeParam === 'LIKE' ? 'LIKE' : 'MY')
 
   const myCdPlaylist = useMyCdList('RECENT')
   const likedCdPlaylist = useMyLikedCdList('RECENT')
 
   const playlistQuery = selectedTab === 'MY' ? myCdPlaylist : likedCdPlaylist
-  const playlistData = playlistQuery.data
+
+  const playlistData = useMemo(
+    () => playlistQuery.data?.filter((p) => selectedTab !== 'MY' || p.isPublic), // my 탭일 경우 isPublic true만 필터링
+
+    [playlistQuery.data, selectedTab]
+  )
+
   const isError = playlistQuery.isError
 
   const [centerPlaylist, setCenterPlaylist] = useState<{
@@ -53,33 +61,65 @@ const MyCdPage = () => {
   }>({ playlistId: null, playlistName: '' })
 
   useEffect(() => {
-    if (playlistData && playlistData.length > 0 && centerPlaylist.playlistId === null) {
+    if (playlistQuery.isLoading || !playlistData) return
+
+    const routeId = routePlaylistId ? Number(routePlaylistId) : null
+    const found = routeId ? playlistData.find((p) => p.playlistId === routeId) : null
+
+    if (found) {
+      setCenterPlaylist({
+        playlistId: found.playlistId,
+        playlistName: found.playlistName,
+      })
+    } else if (playlistData.length > 0) {
       const first = playlistData[0]
       setCenterPlaylist({
         playlistId: first.playlistId,
         playlistName: first.playlistName,
       })
+
+      const path =
+        selectedTab === 'LIKE' ? `/mycd/${first.playlistId}?type=LIKE` : `/mycd/${first.playlistId}`
+
+      navigate(path, { replace: true })
     }
-  }, [playlistData, centerPlaylist.playlistId])
+  }, [playlistData, playlistQuery.isLoading, routePlaylistId, navigate, selectedTab])
+
+  /* 좋아요 탭 선택 시 url query param 반영 */
+  const handleTabSelect = (tab: MyCdTab) => {
+    setSelectedTab(tab)
+
+    const basePath = centerPlaylist.playlistId ? `/mycd/${centerPlaylist.playlistId}` : '/mycd'
+
+    const path = tab === 'LIKE' ? `${basePath}?type=LIKE` : basePath
 
-  // LoopCarousel 센터 컨텐츠 변경 핸들러
+    navigate(path, { replace: true })
+  }
+
+  /* 캐러셀 드래그 시 URL 갱신 */
   const handleCenterChange = useCallback(
     (playlist: { playlistId: number; playlistName: string }) => {
       if (playlist) {
         setCenterPlaylist({
           playlistId: playlist.playlistId,
           playlistName: playlist.playlistName,
         })
+
+        const path =
+          selectedTab === 'LIKE'
+            ? `/mycd/${playlist.playlistId}?type=LIKE`
+            : `/mycd/${playlist.playlistId}`
+
+        navigate(path, { replace: true })
       }
     },
-    []
+    [navigate, selectedTab]
   )
 
+  /* 플레이리스트 세팅 */
   const { data: playlistDetail } = usePlaylistDetail(centerPlaylist.playlistId)
-
   useEffect(() => {
     if (playlistDetail && userInfo) {
-      // 이미 같은 playlist면 재설정 안함
       if (currentPlaylist?.playlistId === playlistDetail.playlistId) return
 
       const convertedPlaylist = {

src/pages/mycd/tracklist/index.tsx

@@ -1,12 +1,11 @@
-import { useLocation } from 'react-router-dom'
+import { useParams } from 'react-router-dom'
 
 import { usePlaylistDetail } from '@/entities/playlist'
 import PlaylistInfo from '@/widgets/playlist/PlaylistInfo'
 
 const MyCdInfoPage = () => {
-  const location = useLocation()
-  const { playlistId } = location.state as { playlistId: number }
-  const { data, isLoading, isError } = usePlaylistDetail(Number(playlistId))
+  const { id } = useParams<{ id: string }>()
+  const { data, isLoading, isError } = usePlaylistDetail(Number(id))
 
   return <PlaylistInfo playlistData={data} isLoading={isLoading} isError={isError} />
 }

src/pages/mycd/ui/PlaylistCarousel.tsx

@@ -1,11 +1,12 @@
-import { useState, useCallback, type Key } from 'react'
+import { useState, useCallback, useEffect, type Key } from 'react'
+import { useParams } from 'react-router-dom'
 
 import styled from 'styled-components'
 
-import type { CdCustomData } from '@/entities/playlist'
+import type { CdCustomData, PlaylistInfo } from '@/entities/playlist'
+import { SwipeCarousel } from '@/features/swipe'
 import { flexRowCenter } from '@/shared/styles/mixins'
 import { Cd } from '@/shared/ui'
-import LoopCarousel from '@/shared/ui/LoopCarousel'
 
 interface CarouselPlaylist {
   playlistId: number
@@ -19,8 +20,18 @@ interface PlaylistCarouselProps {
 }
 
 const PlaylistCarousel = ({ data, onCenterChange }: PlaylistCarouselProps) => {
+  const { id: playlistId } = useParams()
   const [activeIndex, setActiveIndex] = useState(0)
 
+  // url 기준으로 active index 동기화
+  useEffect(() => {
+    if (!playlistId) return
+
+    const index = data.findIndex((p) => p.playlistId === Number(playlistId))
+
+    if (index >= 0) setActiveIndex(index)
+  }, [playlistId, data])
+
   const handleSelectIndex = useCallback(
     (index: number) => {
       setActiveIndex(index)
@@ -35,20 +46,34 @@ const PlaylistCarousel = ({ data, onCenterChange }: PlaylistCarouselProps) => {
     [data, onCenterChange]
   )
 
+  const playlistInfoData: PlaylistInfo[] = data.map((p) => ({
+    playlistId: p.playlistId,
+    playlistName: p.playlistName,
+    creator: { creatorId: '0', creatorNickname: '' },
+    genre: '',
+    songs: [],
+    isPublic: true,
+  }))
+
   return (
-    <LoopCarousel onSelectIndex={handleSelectIndex}>
+    <SwipeCarousel
+      data={playlistInfoData}
+      onSelectIndexChange={handleSelectIndex}
+      axis="x"
+      basePath="/mycd"
+    >
       {data.map((slide, index: Key) => (
         <EmblaSlide key={index}>
           <Slide $active={activeIndex === index}>
             <Cd
-              variant="carousel"
+              variant="mycd"
               bgColor="none"
               stickers={activeIndex === index ? slide.cdResponse.cdItems : []}
             />
           </Slide>
         </EmblaSlide>
       ))}
-    </LoopCarousel>
+    </SwipeCarousel>
   )
 }
 

src/shared/config/routesConfig.ts

@@ -63,8 +63,8 @@ export const routesConfig: RouteConfig[] = [
     isPrivate: true,
     isNotSuspense: true,
     children: [
-      { path: '', component: MyCdPage },
-      { path: 'tracklist', component: MyCdInfoPage },
+      { path: ':id?', component: MyCdPage },
+      { path: ':id?/tracklist', component: MyCdInfoPage },
     ],
   },
 

src/shared/ui/Cd.tsx

@@ -22,6 +22,7 @@ interface CdProps {
     | 'carousel'
     | 'responsive'
     | 'home'
+    | 'mycd'
   bgColor?: 'none' | 'default' | 'dark'
   stickers?: CdCustomData[]
   isPublic?: boolean
@@ -137,6 +138,7 @@ const sizeMap = {
   carousel: { container: 180, base: 180, borderRadius: 0 },
   responsive: { borderRadius: 10 },
   home: { container: 180, base: 180, borderRadius: 0 },
+  mycd: { container: 260, base: 260, borderRadius: 0 },
 } as const
 
 interface StyleProps {

src/widgets/playlist/ActionBar.tsx

@@ -31,7 +31,7 @@ const ActionBar = ({
     if (type === 'DISCOVER') {
       navigate(`/discover/${playlistId}/tracklist`)
     } else {
-      navigate(`/mycd/tracklist`, { state: { playlistId } })
+      navigate(`/mycd/${playlistId}/tracklist`)
     }
   }