diff --git a/apps/web/src/app/tosing/AddListModal.tsx b/apps/web/src/app/tosing/AddListModal.tsx index cc73033..508ca49 100644 --- a/apps/web/src/app/tosing/AddListModal.tsx +++ b/apps/web/src/app/tosing/AddListModal.tsx @@ -8,7 +8,6 @@ import { DialogHeader, DialogTitle, } from '@/components/ui/dialog'; -import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import useAddSongList, { type TabType } from '@/hooks/useAddSongList'; import { useLikeSongQuery } from '@/queries/likeSongQuery'; import { useSaveSongQuery } from '@/queries/saveSongQuery'; @@ -17,28 +16,31 @@ import useAuthStore from '@/stores/useAuthStore'; import ModalSongItem from './ModalSongItem'; interface AddListModalProps { + type: TabType; isOpen: boolean; onClose: () => void; } -export default function AddListModal({ isOpen, onClose }: AddListModalProps) { - const { - activeTab, - setActiveTab, - songSelected, - handleToggleSelect, - handleConfirmAdd, - totalSelectedCount, - } = useAddSongList(); +const MODAL_TITLE: Record = { + like: '즐겨찾기에서 추가', + save: '재생목록에서 추가', +}; + +export default function AddListModal({ type, isOpen, onClose }: AddListModalProps) { + const { songSelected, handleToggleSelect, handleConfirmAdd, totalSelectedCount } = + useAddSongList(); const { isAuthenticated } = useAuthStore(); - const { data: likedSongs, isLoading: isLoadingLikedSongs } = useLikeSongQuery(isAuthenticated); + const { data: likedSongs, isLoading: isLoadingLikedSongs } = useLikeSongQuery( + isAuthenticated && type === 'like', + ); - const { data: saveSongFolders, isLoading: isLoadingSongFolders } = - useSaveSongQuery(isAuthenticated); + const { data: saveSongFolders, isLoading: isLoadingSongFolders } = useSaveSongQuery( + isAuthenticated && type === 'save', + ); - const isLoading = isLoadingLikedSongs || isLoadingSongFolders; + const isLoading = type === 'like' ? isLoadingLikedSongs : isLoadingSongFolders; const handleClickConfirm = () => { handleConfirmAdd(); @@ -49,65 +51,42 @@ export default function AddListModal({ isOpen, onClose }: AddListModalProps) { !open && onClose()}> - 플레이리스트에 추가할 노래 선택 + {MODAL_TITLE[type]} -
- setActiveTab(value as TabType)} - className="flex w-full flex-1 flex-col overflow-y-auto" - > -
- - 즐겨찾기 - 재생목록 - -
- -
- -
- {likedSongs && - likedSongs.map((song, index) => ( - - ))} -
-
+
+ {type === 'like' && + likedSongs && + likedSongs.map((song, index) => ( + + ))} - -
- {saveSongFolders && - saveSongFolders.map((songFolder, index) => { - return ( -
-
-

{songFolder.folder_name}

+ {type === 'save' && + saveSongFolders && + saveSongFolders.map((songFolder, index) => ( +
+
+

{songFolder.folder_name}

- - {songFolder.songList.length}곡 - -
- {songFolder.songList.map((song, index) => ( - - ))} -
- ); - })} + + {songFolder.songList.length}곡 +
- -
- + {songFolder.songList.map((song, index) => ( + + ))} +
+ ))}
diff --git a/apps/web/src/app/tosing/AddSongButton.tsx b/apps/web/src/app/tosing/AddSongButton.tsx index d044452..7a51d12 100644 --- a/apps/web/src/app/tosing/AddSongButton.tsx +++ b/apps/web/src/app/tosing/AddSongButton.tsx @@ -1,39 +1,53 @@ 'use client'; -import { AirplayIcon } from 'lucide-react'; +import { ListPlus, Star } from 'lucide-react'; import { useState } from 'react'; import { toast } from 'sonner'; import { Button } from '@/components/ui/button'; +import { type TabType } from '@/hooks/useAddSongList'; import useAuthStore from '@/stores/useAuthStore'; import AddListModal from './AddListModal'; export default function AddSongButton() { - const [isModalOpen, setIsModalOpen] = useState(false); + const [openModal, setOpenModal] = useState(null); const { isAuthenticated } = useAuthStore(); - const handleAddSong = () => { + const handleOpenModal = (type: TabType) => { if (!isAuthenticated) { toast.error('로그인하고 저장한 노래에서 곡을 추가해보세요!'); return; } - setIsModalOpen(true); + setOpenModal(type); }; + return ( <> - +
+ + +
- {/* 모달도 여기서 렌더링 */} - setIsModalOpen(false)} /> + {openModal && ( + setOpenModal(null)} /> + )} ); } diff --git a/apps/web/src/app/tosing/page.tsx b/apps/web/src/app/tosing/page.tsx index b45bb3e..36565c9 100644 --- a/apps/web/src/app/tosing/page.tsx +++ b/apps/web/src/app/tosing/page.tsx @@ -7,7 +7,7 @@ export default function HomePage() { return (
-

노래방 플레이리스트

+

플레이리스트

diff --git a/apps/web/src/components/SongSummary.tsx b/apps/web/src/components/SongSummary.tsx index 4279a57..7555aa9 100644 --- a/apps/web/src/components/SongSummary.tsx +++ b/apps/web/src/components/SongSummary.tsx @@ -1,10 +1,7 @@ 'use client'; -import { getPrimaryArtistName } from '@repo/constants'; - import MarqueeText from '@/components/MarqueeText'; import SongBadges from '@/components/SongBadges'; -import { useCurrentArtistOfMonthQuery } from '@/queries/artistVoteQuery'; import { Song } from '@/types/song'; import { cn } from '@/utils/cn'; import { splitDisplay } from '@/utils/songDisplay'; @@ -32,12 +29,6 @@ export default function SongSummary({ song, className }: SongSummaryProps) { const titleParts = splitDisplay(title_ko, title); const artistParts = splitDisplay(artist_ko, artist); - // songs.artist는 "IU(Feat.최백호)"처럼 원문 그대로라, artists 마스터에 등록된 정규화된 - // 이름과 곧이곧대로 비교하면 우승 아티스트의 피처링·듀엣 곡에 배지가 빠진다. - // 맨 앞에 적힌 주 아티스트만 뽑아 비교한다. - const { data: artistOfMonth } = useCurrentArtistOfMonthQuery(); - const isArtistOfMonth = !!artistOfMonth && artistOfMonth.artist === getPrimaryArtistName(artist); - return (
{/* min-w-0가 없으면 MarqueeText가 부모를 밀어내 번호 영역이 잘린다 */} @@ -57,13 +48,6 @@ export default function SongSummary({ song, className }: SongSummaryProps) { {artistParts.secondary} )} - {isArtistOfMonth && ( - - {/* month는 'YYYY-MM-DD'(매월 1일)라 앞 7자리만 잘라 쓴다. - "이달"이 언제인지는 곡 카드만 보면 알 수 없어 선정된 달을 함께 적는다. */} - 🏆 {artistOfMonth.month.slice(0, 7)} 이달의 아티스트 - - )}
{/* 번호는 자릿수가 달라도 세로로 맞아떨어지도록 고정폭 + tabular-nums */} diff --git a/apps/web/src/hooks/useAddSongList.ts b/apps/web/src/hooks/useAddSongList.ts index 25543be..7977348 100644 --- a/apps/web/src/hooks/useAddSongList.ts +++ b/apps/web/src/hooks/useAddSongList.ts @@ -7,8 +7,6 @@ import { usePostToSingSongMutation } from '@/queries/tosingSongQuery'; export type TabType = 'like' | 'save'; export default function useAddSongList() { - const [activeTab, setActiveTab] = useState('like'); - const [songSelected, setSongSelected] = useState([]); const { mutate: postToSingSong } = usePostToSingSongMutation(); @@ -27,8 +25,6 @@ export default function useAddSongList() { const totalSelectedCount = songSelected.length; return { - activeTab, - setActiveTab, songSelected, handleToggleSelect, handleConfirmAdd,