[feat] 마이페이지 좋아요 기능 연결 및 /mycd 라우팅 처리

src/features/recommend/types/recommend.ts

@@ -6,12 +6,9 @@ export interface Playlist {
   creatorId: string
   creatorNickname: string
   songs: Track[]
-
-  // TODO : 스티커 정보는 둘 중 하나로 올 수 있음 추후 통일 필요
-  onlyCdResponse?: {
+  cdResponse?: {
     cdItems: CdCustomData[]
   }
-  cdItems?: CdCustomData[]
 }
 
 export type RecommendationsResponse = Playlist[]

src/pages/home/index.tsx

@@ -57,7 +57,7 @@ const HomePage = () => {
               key={item.playlistId}
               title={item.playlistName}
               username={item.creatorNickname}
-              stickers={item.onlyCdResponse?.cdItems}
+              stickers={item.cdResponse?.cdItems}
             />
           ))}
         </ScrollCarousel>
@@ -73,7 +73,7 @@ const HomePage = () => {
               title={playlist.playlistName}
               username={playlist.creatorNickname}
               songs={playlist.songs}
-              stickers={playlist.onlyCdResponse?.cdItems}
+              stickers={playlist.cdResponse?.cdItems}
             />
           ))}
         </ScrollCarousel>

src/pages/mypage/ui/main/components/MyLikedCdList.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import styled from 'styled-components'
@@ -7,16 +8,49 @@ import { useMyLikedCdList } from '@/entities/playlist/model/useMyCd'
 import { CdNameInfo } from '@/pages/mypage/ui/main/components'
 import { useSingleSelect } from '@/shared/lib/useSingleSelect'
 import { flexColCenter } from '@/shared/styles/mixins'
-import { Loading, Error, ContentHeader, Cd } from '@/shared/ui'
+import { Loading, Error, ContentHeader, Modal } from '@/shared/ui'
 import type { SortType } from '@/shared/ui/ContentHeader'
+import type { ModalProps } from '@/shared/ui/Modal'
+import { Playlist } from '@/widgets/playlist'
 
 const MyLikedCdList = () => {
   const navigate = useNavigate()
 
-  const { selected: currentSort, onSelect: setCurrentSort } = useSingleSelect<SortType>('POPULAR')
+  const [modal, setModal] = useState<ModalProps>({
+    isOpen: false,
+    title: '',
+    description: '',
+    ctaType: 'single',
+    confirmText: '',
+    cancelText: '',
+    onClose: () => {
+      setModal((prev) => ({ ...prev, isOpen: false }))
+    },
+    onConfirm: () => {},
+    onCancel: () => {
+      setModal((prev) => ({ ...prev, isOpen: false }))
+    },
+  })
 
+  const { selected: currentSort, onSelect: setCurrentSort } = useSingleSelect<SortType>('POPULAR')
   const { data: myLikedCdList, isLoading, isError, isSuccess } = useMyLikedCdList(currentSort)
 
+  const onLikedCdClick = (cdId: number, isPublic: boolean) => {
+    if (!cdId) return
+    if (!isPublic) {
+      setModal({
+        isOpen: true,
+        title: '비공개된 CD는 재생할 수 없어요.',
+        ctaType: 'single',
+        confirmText: '확인',
+        onClose: () => setModal((p) => ({ ...p, isOpen: false })),
+        onConfirm: () => setModal((p) => ({ ...p, isOpen: false })),
+      })
+      return
+    }
+    navigate(`/mypage/${cdId}/tracklist`)
+  }
+
   if (isLoading) return <Loading isLoading={isLoading} />
   if (isError || !isSuccess) return <Error />
 
@@ -40,20 +74,37 @@ const MyLikedCdList = () => {
         ) : (
           myLikedCdList?.map((item) => (
             <li key={item.playlistId}>
-              {/* TODO: 나의CD 이동 후 좋아요한 CD 재생은 각 브랜치 병합 이후 작업 */}
-              <CdButton type="button" onClick={() => navigate('/mycd')}>
-                {/* TODO: CD 컴포넌트 좋아요는 각 브랜치 병합 이후 작업 (10/20~) */}
-                <Cd
-                  variant="responsive"
+              <CdButton
+                type="button"
+                onClick={() => onLikedCdClick(item?.playlistId, item?.isPublic)}
+              >
+                <Playlist
+                  id={item.playlistId}
+                  key={item.playlistId}
+                  title={item.playlistName}
+                  username={item.playlistName}
                   stickers={item?.cdResponse?.cdItems}
-                  isPublic={item?.isPublic}
+                  cdVariant="responsive"
+                  isPublic={item.isPublic}
                 />
               </CdButton>
               <CdNameInfo title={item?.playlistName || ''} creator={item?.creatorNickname || ''} />
             </li>
           ))
         )}
       </CdListWrap>
+
+      <Modal
+        isOpen={modal.isOpen}
+        title={modal.title}
+        description={modal.description}
+        ctaType={modal.ctaType}
+        confirmText={modal.confirmText}
+        cancelText={modal.cancelText}
+        onClose={modal.onClose}
+        onConfirm={modal.onConfirm}
+        onCancel={modal.onCancel}
+      />
     </>
   )
 }
@@ -80,6 +131,9 @@ const CdButton = styled.button`
   width: 100%;
   aspect-ratio: 1 / 1;
   border-radius: 10px;
+
+  & > {
+  }
 `
 
 const NoLikedWrapper = styled.div`

src/pages/mypage/ui/tracklist/index.tsx

@@ -49,6 +49,10 @@ const MypageTracklist = () => {
 
   const onModalClose = () => setModal((prev) => ({ ...prev, isOpen: false }))
 
+  const onCdPlayClick = () => {
+    navigate(`/mycd?id=${cdMetadata?.playlistId}${isFromMyCdList ? '' : '&type=LIKE'}`)
+  }
+
   const onCdDeleteClick = () => {
     setModal({
       isOpen: true,
@@ -125,8 +129,7 @@ const MypageTracklist = () => {
         stickers={cdMetadata?.cdResponse?.cdItems ?? []}
       />
       <ControlContainer>
-        {/* TODO: 모두 재생 브랜치 병합 후 작업 */}
-        <CdPlayButton type="button">
+        <CdPlayButton type="button" onClick={onCdPlayClick}>
           <StartBlack width={20} height={20} />
           모두 재생
         </CdPlayButton>
@@ -142,7 +145,6 @@ const MypageTracklist = () => {
         >
           <Share width={20} height={20} />
         </CdActionButton>
-        {/* TODO: 공개 토글 백엔드 API 답변 오면 추가 작업 */}
         {isMyCd && (
           <CdActionButton
             type="button"

src/shared/styles/globalStyle.ts

@@ -23,6 +23,10 @@ const GlobalStyle = createGlobalStyle`
     line-height: 1.5;
   }
 
+  button, input, textarea, select, a {
+    font-family: inherit;
+  }
+
   button {
     background: none;
     border: none;

src/shared/ui/Cd.tsx

@@ -9,7 +9,7 @@ import { THEME_IMAGES_MAP } from '@/pages/mypage/lib/customizeTheme'
 import { THEME_PROP_ID_OFFSET } from '@/pages/mypage/types/mypage'
 import { flexRowCenter, flexColCenter } from '@/shared/styles/mixins'
 
-interface CdProps {
+export interface CdProps {
   variant:
     | 'xxl'
     | 'xl'

src/widgets/playlist/Playlist.tsx

@@ -5,50 +5,66 @@ import styled from 'styled-components'
 import type { CdCustomData } from '@/entities/playlist'
 import { LikeButton } from '@/features/like'
 import Cd from '@/shared/ui/Cd'
+import type { CdProps } from '@/shared/ui/Cd'
 
 interface PlaylistProps {
   title: string
   username: string
   id: number
   stickers?: CdCustomData[]
+  cdVariant?: CdProps['variant']
+  isPublic?: boolean
 }
 
-const Playlist = ({ id, title, username, stickers }: PlaylistProps) => {
+const Playlist = ({
+  id,
+  title,
+  username,
+  stickers,
+  cdVariant = 'xl',
+  isPublic = true,
+}: PlaylistProps) => {
   const navigate = useNavigate()
 
+  // 마이페이지에서만 아래 옵션을 사용하고 있어 구분하기 위함
+  const isFromMypage = cdVariant === 'responsive'
+
   const handleClick = () => {
+    if (isFromMypage) return
     navigate(`/discover/${id}`)
   }
 
   return (
-    <Wrapper onClick={handleClick}>
-      <CdBox>
-        <Cd variant="xl" stickers={stickers} />
+    <Wrapper onClick={handleClick} $cdVariant={cdVariant}>
+      <CdBox $cdVariant={cdVariant}>
+        <Cd variant={cdVariant} stickers={stickers} isPublic={isPublic} />
         <ButtonContainer>
           <LikeButton playlistId={id} type="HOME" />
         </ButtonContainer>
       </CdBox>
-      <InfoBox>
-        <Title>{title}</Title>
-        <UserName>{username}</UserName>
-      </InfoBox>
+      {!isFromMypage && (
+        <InfoBox>
+          <Title>{title}</Title>
+          <UserName>{username}</UserName>
+        </InfoBox>
+      )}
     </Wrapper>
   )
 }
 
 export default Playlist
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{ $cdVariant: string }>`
   display: flex;
   flex-direction: column;
   gap: 12px;
-  width: 140px;
+  width: ${({ $cdVariant }) => ($cdVariant === 'responsive' ? '100%' : '140px')};
 `
 
-const CdBox = styled.div`
+const CdBox = styled.div<{ $cdVariant: string }>`
   position: relative;
-  width: 140px;
-  height: 140px;
+  width: ${({ $cdVariant }) => ($cdVariant === 'responsive' ? '100%' : '140px')};
+  aspect-ratio: 1 / 1;
   border-radius: 16px;
 
   display: flex;