[feat] 홈페이지, 나의 CD UI 변경사항 반영

src/assets/icons/index.ts

@@ -47,3 +47,5 @@ export { default as BgCd } from './icn_bg_cd.svg?react'
 export { default as BgHeadphone } from './icn_bg_headphone.svg?react'
 export { default as BgMusic } from './icn_bg_music.svg?react'
 export { default as Volume } from './icn_volume.svg?react'
+export { default as CtaArrow } from './icn_cta_arrow.svg?react'
+export { default as LikeStroke } from './icn_like_stroke.svg?react'

src/assets/images/index.ts

@@ -13,3 +13,4 @@ export { default as LogoHologram } from './img_logo_hologram.png'
 export { default as OpacityCharacterBlue } from './img_opacity_character_blue.png'
 export { default as OpacityCharacterPink } from './img_opacity_character_pink.png'
 export { default as OpacityMusic } from './img_opacity_music.png'
+export { default as HomeCharacter } from './img_character_home.png'

src/entities/playlist/api/playlist.ts

@@ -69,3 +69,8 @@ export const getPlaylistViewCounts = (playlistId: number) => {
 export const getMyRepresentativePlaylist = () => {
   return api.get<MyRepresentResponse>('/main/playlist/mypage/me/representative')
 }
+
+// 좋아요한 플레이리스트 조회
+export const getMyLikedCdList = (sort: string) => {
+  return api.get<MyCdListResponse>(`/main/playlist/mypage/me/likes?sort=${sort}`)
+}

src/entities/playlist/model/useMyPlaylist.ts

@@ -8,6 +8,7 @@ import {
   deleteMyPagePlaylist,
   setPrimaryPlaylist,
   getMyRepresentativePlaylist,
+  getMyLikedCdList,
 } from '@/entities/playlist/api/playlist'
 
 export const useMyCdList = (sort: string) => {
@@ -75,3 +76,11 @@ export const useMyRepresentativePlaylist = () => {
     queryFn: () => getMyRepresentativePlaylist(),
   })
 }
+
+export const useMyLikedCdList = (sort: string) => {
+  return useQuery({
+    queryKey: ['myLikedCdList', sort],
+    queryFn: () => getMyLikedCdList(sort),
+    refetchOnMount: 'always',
+  })
+}

src/entities/playlist/model/usePlaylists.ts

@@ -42,10 +42,11 @@ export const useShufflePlaylists = (size: number = 5) => {
   })
 }
 
-export const usePlaylistDetail = (playlistId: number) => {
+export const usePlaylistDetail = (playlistId: number | null) => {
   return useQuery({
     queryKey: ['playlistDetail', playlistId],
-    queryFn: () => getPlaylistDetail(playlistId),
+    queryFn: () => getPlaylistDetail(playlistId as number),
+    enabled: !!playlistId,
   })
 }
 

src/entities/playlist/types/playlist.ts

@@ -3,7 +3,7 @@ import type { MusicGenreId } from '@/shared/config/musicGenres'
 export interface MyCdInfo {
   playlistId: number
   playlistName: string
-  isRepresentative: boolean
+  isPublic: boolean
 }
 
 export type MyCdListResponse = (MyCdInfo & OnlyCdResponse)[]

src/features/like/api/like.ts

@@ -0,0 +1,13 @@
+import { api } from '@/shared/api/httpClient'
+
+export const postLike = (playlistId: number) => {
+  return api.post(`/main/likes/${playlistId}`)
+}
+
+export const deleteLike = (playlistId: number) => {
+  return api.delete(`/main/likes/${playlistId}`)
+}
+
+export const getLikeStatus = (playlistId: number) => {
+  return api.get(`/main/likes/${playlistId}`)
+}

src/features/like/index.ts

@@ -0,0 +1,3 @@
+export { default as useLike } from './model/useLike'
+export * from './api/like'
+export { default as LikeButton } from './ui/LikeButton'

src/features/like/model/useLike.ts

@@ -0,0 +1,58 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { useAuthStore } from '@/features/auth/store/authStore'
+import { postLike, deleteLike, getLikeStatus } from '@/features/like/api/like'
+
+const useLike = (playlistId: number, initialIsLiked: boolean) => {
+  const queryClient = useQueryClient()
+  const [isLiked, setIsLiked] = useState(initialIsLiked)
+  const navigate = useNavigate()
+  const { isLogin } = useAuthStore()
+
+  const likeMutation = useMutation({
+    mutationFn: (playlistId: number) => postLike(playlistId),
+    onSuccess: () => {
+      setIsLiked(true)
+      queryClient.invalidateQueries({ queryKey: ['playlistDetail', playlistId] })
+    },
+  })
+
+  const unlikeMutation = useMutation({
+    mutationFn: (playlistId: number) => deleteLike(playlistId),
+    onSuccess: () => {
+      setIsLiked(false)
+      queryClient.invalidateQueries({ queryKey: ['playlistDetail', playlistId] })
+    },
+  })
+
+  const toggleLike = () => {
+    if (!isLogin) {
+      navigate('/login')
+      return
+    }
+
+    if (likeMutation.isPending || unlikeMutation.isPending) return
+
+    if (isLiked) {
+      unlikeMutation.mutate(playlistId)
+    } else {
+      likeMutation.mutate(playlistId)
+    }
+  }
+
+  return { liked: isLiked, toggleLike, likeMutation, unlikeMutation }
+}
+
+export default useLike
+
+export const useLikeStatus = (playlistId: number, options?: { enabled?: boolean }) => {
+  return useQuery({
+    queryKey: ['likeStatus', playlistId],
+    queryFn: () => getLikeStatus(playlistId),
+    staleTime: 0,
+    enabled: playlistId !== undefined && (options?.enabled ?? true),
+  })
+}

src/features/like/ui/LikeButton.tsx

@@ -0,0 +1,63 @@
+import React from 'react'
+
+import styled, { useTheme } from 'styled-components'
+
+import { Like, LikeStroke } from '@/assets/icons'
+import { useLike } from '@/features/like'
+import { flexRowCenter, myCdButton } from '@/shared/styles/mixins'
+import SvgButton from '@/shared/ui/SvgButton'
+
+interface LikeButtonProps {
+  playlistId: number
+  isLiked: boolean
+  type?: 'HOME' | 'DISCOVER' | 'MY'
+}
+
+const ICON_STYLE = {
+  HOME: { size: 20, Icon: Like },
+  DISCOVER: { size: 24, Icon: LikeStroke },
+  MY: { size: 16, Icon: LikeStroke },
+} as const
+
+const LikeButton = ({ playlistId, isLiked, type = 'HOME' }: LikeButtonProps) => {
+  const theme = useTheme()
+  const { liked, toggleLike } = useLike(playlistId, isLiked)
+
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.stopPropagation()
+    toggleLike()
+  }
+
+  const { size, Icon } = ICON_STYLE[type] ?? ICON_STYLE.HOME
+  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>
+  )
+}
+
+export default LikeButton
+
+const Wrapper = styled.div<{ $opacity?: number; $isMy: boolean }>`
+  opacity: ${({ $opacity }) => $opacity};
+  ${flexRowCenter};
+  ${({ $isMy }) => $isMy && myCdButton};
+`

src/features/share/ui/ShareButton.tsx

@@ -9,15 +9,16 @@ import GuestCharacter from '@/assets/images/img_character_guest.png'
 import MemberCharacter from '@/assets/images/img_character_member.png'
 import type { CdCustomData } from '@/entities/playlist'
 import ShareImage from '@/features/share/ui/ShareImage'
-import { flexRowCenter } from '@/shared/styles/mixins'
+import { flexRowCenter, myCdButton } from '@/shared/styles/mixins'
 import { BottomSheet, Button, Cd, ScrollCarousel, SvgButton } from '@/shared/ui'
 
 interface ShareButtonProps {
   playlistId: number
   stickers?: CdCustomData[]
+  type?: 'MY' | 'DISCOVER'
 }
 
-const ShareButton = ({ playlistId, stickers }: ShareButtonProps) => {
+const ShareButton = ({ playlistId, stickers, type = 'DISCOVER' }: ShareButtonProps) => {
   const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false)
   const [selectedIndex, setSelectedIndex] = useState(0)
   const { toast } = useToast()
@@ -83,7 +84,10 @@ const ShareButton = ({ playlistId, stickers }: ShareButtonProps) => {
 
   return (
     <>
-      <SvgButton icon={Share} width={24} height={24} onClick={handleShare} />
+      <ButtonWrapper $isMy={type === 'MY'} onClick={handleShare}>
+        <SvgButton icon={Share} width={type === 'MY' ? 16 : 24} height={type === 'MY' ? 16 : 24} />
+        {type === 'MY' && <p>공유</p>}
+      </ButtonWrapper>
 
       <BottomSheet
         isOpen={isBottomSheetOpen}
@@ -140,3 +144,8 @@ const ButtonBar = styled.div`
     flex: 1;
   }
 `
+
+const ButtonWrapper = styled.div<{ $isMy: boolean }>`
+  ${flexRowCenter};
+  ${({ $isMy }) => $isMy && myCdButton};
+`

src/pages/home/config/messages.ts

@@ -4,6 +4,6 @@ export const BUTTON_TEXT = {
 } as const
 
 export const TITLE_TEXT = {
-  MEMBER: (name: string) => `${name}님! 오늘의 첫 곡,\n여기서 시작하세요`,
+  MEMBER: (name: string) => `${name}님!\n 오늘의 첫 곡, 여기서 시작하세요`,
   GUEST: `오늘의 무드에 어울리는 \n 플레이리스트를 들어 보세요`,
 } as const