From 31a3c4e6faf1f8741da1f30e207f0f3bd994ba68 Mon Sep 17 00:00:00 2001
From: GulSam00 <gulsamcono@gmail.com>
Date: Sat, 24 May 2025 09:13:19 +0900
Subject: [PATCH 1/5] =?UTF-8?q?design=20:=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20?=
 =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=86=92=EC=9D=B4=20=EC=A1=B0?=
 =?UTF-8?q?=EC=A0=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/library/like/page.tsx | 2 +-
 apps/web/src/app/library/save/page.tsx | 4 ++--
 apps/web/src/app/tosing/page.tsx       | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/web/src/app/library/like/page.tsx b/apps/web/src/app/library/like/page.tsx
index cecf515..b52b78e 100644
--- a/apps/web/src/app/library/like/page.tsx
+++ b/apps/web/src/app/library/like/page.tsx
@@ -43,7 +43,7 @@ export default function LikePage() {
 
       <Separator className="mb-4" />
 
-      <ScrollArea className="h-[calc(100vh-12rem)]">
+      <ScrollArea className="h-[calc(100vh-16rem)]">
         {likedSongs.map(song => (
           <SongItem
             key={song.song_id}
diff --git a/apps/web/src/app/library/save/page.tsx b/apps/web/src/app/library/save/page.tsx
index b666e2b..696fcfc 100644
--- a/apps/web/src/app/library/save/page.tsx
+++ b/apps/web/src/app/library/save/page.tsx
@@ -190,8 +190,8 @@ export default function Page() {
         )}
       </div>
 
-      <ScrollArea className="h-[calc(100vh-12rem)] px-2">
-        <div className="space-y-4">
+      <ScrollArea className="h-[calc(100vh-16rem)] p-2">
+        <div className="space-y-2">
           {saveSongFolderList &&
             saveSongFolderList.map((folder, index) => (
               <FolderCard
diff --git a/apps/web/src/app/tosing/page.tsx b/apps/web/src/app/tosing/page.tsx
index 40e3f67..bbf0c06 100644
--- a/apps/web/src/app/tosing/page.tsx
+++ b/apps/web/src/app/tosing/page.tsx
@@ -26,7 +26,7 @@ export default function HomePage() {
           <span>곡 추가</span>
         </Button>
       </div>
-      <ScrollArea className="h-[calc(100vh-12rem)] px-2 py-4">
+      <ScrollArea className="h-[calc(100vh-16rem)] px-2 py-4">
         <SongList />
       </ScrollArea>
 

From 35e93d8fd6432ed9904d6992ed2f0c9cb28d3622 Mon Sep 17 00:00:00 2001
From: GulSam00 <gulsamcono@gmail.com>
Date: Sat, 24 May 2025 10:38:54 +0900
Subject: [PATCH 2/5] =?UTF-8?q?feat=20:=20tosing=20=EB=AA=A8=EB=8B=AC?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=9E=AC=EC=83=9D=EB=AA=A9=EB=A1=9D=20?=
 =?UTF-8?q?=ED=83=AD=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/package.json                    |  3 +-
 apps/web/src/Footer.tsx                  |  3 +-
 apps/web/src/app/library/save/page.tsx   |  1 +
 apps/web/src/app/tosing/AddListModal.tsx | 56 ++++++++++++++++++---
 apps/web/src/app/tosing/SongList.tsx     |  3 +-
 apps/web/src/components/ui/accordion.tsx | 64 ++++++++++++++++++++++++
 apps/web/src/queries/saveSongQuery.ts    |  1 +
 apps/web/src/queries/tosingSongQuery.ts  |  4 ++
 8 files changed, 123 insertions(+), 12 deletions(-)
 create mode 100644 apps/web/src/components/ui/accordion.tsx

diff --git a/apps/web/package.json b/apps/web/package.json
index 2f7c389..8ab50c2 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -16,6 +16,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@next/bundle-analyzer": "^15.3.2",
+    "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-checkbox": "^1.1.5",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
@@ -23,7 +24,7 @@
     "@radix-ui/react-scroll-area": "^1.2.4",
     "@radix-ui/react-select": "^2.2.4",
     "@radix-ui/react-separator": "^1.1.2",
-    "@radix-ui/react-slot": "^1.1.2",
+    "@radix-ui/react-slot": "^1.2.0",
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.2.6",
     "@repo/open-api": "workspace:*",
diff --git a/apps/web/src/Footer.tsx b/apps/web/src/Footer.tsx
index 51e5ebf..3a7cbf0 100644
--- a/apps/web/src/Footer.tsx
+++ b/apps/web/src/Footer.tsx
@@ -15,11 +15,12 @@ const navigation = [
 
 export default function Footer() {
   const pathname = usePathname();
+  const navPath = pathname.split('/')[1];
 
   return (
     <footer className="bg-background fixed bottom-0 flex h-8 w-[360px] justify-between">
       {navigation.map(item => {
-        const isActive = pathname === item.href;
+        const isActive = '/' + navPath === item.href;
         return (
           <Button
             asChild
diff --git a/apps/web/src/app/library/save/page.tsx b/apps/web/src/app/library/save/page.tsx
index 696fcfc..01cd512 100644
--- a/apps/web/src/app/library/save/page.tsx
+++ b/apps/web/src/app/library/save/page.tsx
@@ -125,6 +125,7 @@ export default function Page() {
   const handleRenameFolder = (dstFolderId: string, dstFolderName: string) => {
     setSelectedFolderId(dstFolderId);
     setSelectedFolderName(dstFolderName);
+
     setModalType('renameFolder');
   };
 
diff --git a/apps/web/src/app/tosing/AddListModal.tsx b/apps/web/src/app/tosing/AddListModal.tsx
index 1930e56..f2a4117 100644
--- a/apps/web/src/app/tosing/AddListModal.tsx
+++ b/apps/web/src/app/tosing/AddListModal.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import StaticLoading from '@/components/StaticLoading';
 import { Button } from '@/components/ui/button';
 import {
   Dialog,
@@ -12,6 +13,8 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import useAddListModal from '@/hooks/useAddSongList';
 import { useLikeSongQuery } from '@/queries/likeSongQuery';
 import { useRecentSongQuery } from '@/queries/recentSongQuery';
+import { useSaveSongFolderQuery } from '@/queries/saveSongFolderQuery';
+import { useSaveSongQuery } from '@/queries/saveSongQuery';
 
 import ModalSongItem from './ModalSongItem';
 
@@ -30,8 +33,17 @@ export default function AddListModal({ isOpen, onClose }: AddListModalProps) {
     totalSelectedCount,
   } = useAddListModal();
 
-  const { data: likedSongs } = useLikeSongQuery();
-  const { data: recentSongs } = useRecentSongQuery();
+  const { data: likedSongs, isLoading: isLoadingLikedSongs } = useLikeSongQuery();
+  const { data: recentSongs, isLoading: isLoadingRecentSongs } = useRecentSongQuery();
+
+  const { data: saveSongFolders, isLoading: isLoadingSongFolders } = useSaveSongQuery();
+  const { data: saveSongFolderList, isLoading: isLoadingSaveFolderList } = useSaveSongFolderQuery();
+
+  console.log('saveSongFolders', saveSongFolders);
+  console.log('saveSongFolderList', saveSongFolderList);
+
+  const isLoading =
+    isLoadingLikedSongs || isLoadingRecentSongs || isLoadingSongFolders || isLoadingSaveFolderList;
 
   const handleClickConfirm = () => {
     handleConfirmAdd();
@@ -39,7 +51,7 @@ export default function AddListModal({ isOpen, onClose }: AddListModalProps) {
   };
 
   return (
-    <Dialog open={isOpen} onOpenChange={open => !open && onClose()}>
+    <Dialog open={isOpen && !isLoading} onOpenChange={open => !open && onClose()}>
       <DialogContent className="flex h-[500px] flex-col gap-0 p-0 sm:max-w-[450px]">
         <DialogHeader className="p-6 pb-2">
           <DialogTitle>플레이리스트에 추가할 노래 선택</DialogTitle>
@@ -52,19 +64,20 @@ export default function AddListModal({ isOpen, onClose }: AddListModalProps) {
             className="flex w-full flex-1 flex-col overflow-y-auto"
           >
             <div>
-              <TabsList className="my-2 grid w-full grid-cols-2">
-                <TabsTrigger value="liked">좋아요한 노래</TabsTrigger>
-                <TabsTrigger value="recent">최근 부른 노래</TabsTrigger>
+              <TabsList className="my-2 grid w-full grid-cols-3">
+                <TabsTrigger value="like">좋아요</TabsTrigger>
+                <TabsTrigger value="save">재생목록</TabsTrigger>
+                <TabsTrigger value="recent">최근곡</TabsTrigger>
               </TabsList>
             </div>
 
             <div className="flex-1 overflow-y-auto">
-              <TabsContent value="liked" className="mt-0 h-full">
+              <TabsContent value="like" className="mt-0 h-full">
                 <div className="h-full pr-2">
                   {likedSongs &&
                     likedSongs.map((song, index) => (
                       <ModalSongItem
-                        key={song.song_id + 'liked' + index}
+                        key={song.song_id + 'like' + index}
                         song={song}
                         isSelected={songSelected.includes(song.song_id)}
                         onToggleSelect={handleToggleSelect}
@@ -73,6 +86,33 @@ export default function AddListModal({ isOpen, onClose }: AddListModalProps) {
                 </div>
               </TabsContent>
 
+              <TabsContent value="save" className="mt-0 h-full">
+                <div className="h-full pr-2">
+                  {saveSongFolders &&
+                    saveSongFolders.map((songFolder, index) => {
+                      return (
+                        <div key={songFolder.folder_id + index}>
+                          <div className="flex justify-between border-b-1 text-lg font-bold">
+                            <h3>{songFolder.folder_name}</h3>
+
+                            <span className="text-muted-foreground text-sm">
+                              {songFolder.songList.length}곡
+                            </span>
+                          </div>
+                          {songFolder.songList.map((song, index) => (
+                            <ModalSongItem
+                              key={song.song_id + 'save' + index}
+                              song={song}
+                              isSelected={songSelected.includes(song.song_id)}
+                              onToggleSelect={handleToggleSelect}
+                            />
+                          ))}
+                        </div>
+                      );
+                    })}
+                </div>
+              </TabsContent>
+
               <TabsContent value="recent" className="mt-0 h-full">
                 <div className="h-full pr-2">
                   {recentSongs &&
diff --git a/apps/web/src/app/tosing/SongList.tsx b/apps/web/src/app/tosing/SongList.tsx
index c84cb59..87a409e 100644
--- a/apps/web/src/app/tosing/SongList.tsx
+++ b/apps/web/src/app/tosing/SongList.tsx
@@ -47,8 +47,6 @@ export default function SongList() {
     }),
   );
 
-  if (isLoading) return <StaticLoading />;
-
   return (
     <DndContext
       sensors={sensors}
@@ -56,6 +54,7 @@ export default function SongList() {
       onDragEnd={handleDragEnd}
       modifiers={[restrictToVerticalAxis]}
     >
+      {isLoading && <StaticLoading />}
       <SortableContext
         items={toSingSongs.map((item: ToSingSong) => item.songs.id)}
         strategy={verticalListSortingStrategy}
diff --git a/apps/web/src/components/ui/accordion.tsx b/apps/web/src/components/ui/accordion.tsx
new file mode 100644
index 0000000..7b7a515
--- /dev/null
+++ b/apps/web/src/components/ui/accordion.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { ChevronDownIcon } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/utils/cn';
+
+function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('border-b last:border-b-0', className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn('pt-0 pb-4', className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/apps/web/src/queries/saveSongQuery.ts b/apps/web/src/queries/saveSongQuery.ts
index 59f1040..3aa5668 100644
--- a/apps/web/src/queries/saveSongQuery.ts
+++ b/apps/web/src/queries/saveSongQuery.ts
@@ -12,6 +12,7 @@ export function useSaveSongQuery() {
         return [];
       }
       const rawData: SaveSong[] = response.data;
+      console.log('rawData', rawData);
       const songFolders: SaveSongFolder[] = [];
 
       rawData.forEach(item => {
diff --git a/apps/web/src/queries/tosingSongQuery.ts b/apps/web/src/queries/tosingSongQuery.ts
index 42d911a..9960ba3 100644
--- a/apps/web/src/queries/tosingSongQuery.ts
+++ b/apps/web/src/queries/tosingSongQuery.ts
@@ -35,6 +35,7 @@ export function usePostToSingSongMutation() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['toSingSong'] });
       queryClient.invalidateQueries({ queryKey: ['likeSong'] });
+      queryClient.invalidateQueries({ queryKey: ['saveSongFolder'] });
       queryClient.invalidateQueries({ queryKey: ['recentSong'] });
     },
     onError: error => {
@@ -53,6 +54,7 @@ export function usePostToSingSongArrayMutation() {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ['toSingSong'] });
       queryClient.invalidateQueries({ queryKey: ['likeSong'] });
+      queryClient.invalidateQueries({ queryKey: ['saveSongFolder'] });
       queryClient.invalidateQueries({ queryKey: ['recentSong'] });
     },
     onError: error => {
@@ -84,6 +86,7 @@ export function useDeleteToSingSongMutation() {
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: ['toSingSong'] });
       queryClient.invalidateQueries({ queryKey: ['likeSong'] });
+      queryClient.invalidateQueries({ queryKey: ['saveSongFolder'] });
       queryClient.invalidateQueries({ queryKey: ['recentSong'] });
     },
   });
@@ -111,6 +114,7 @@ export function useDeleteToSingSongArrayMutation() {
     onSettled: () => {
       queryClient.invalidateQueries({ queryKey: ['toSingSong'] });
       queryClient.invalidateQueries({ queryKey: ['likeSong'] });
+      queryClient.invalidateQueries({ queryKey: ['saveSongFolder'] });
       queryClient.invalidateQueries({ queryKey: ['recentSong'] });
     },
   });

From 8b2a1e41de28af975ca2088584853aed6e3c1b53 Mon Sep 17 00:00:00 2001
From: GulSam00 <gulsamcono@gmail.com>
Date: Sat, 24 May 2025 11:02:26 +0900
Subject: [PATCH 3/5] =?UTF-8?q?feat=20:=20api\songs\save\folder\route.ts?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95.=20=EA=B3=A1=20=EC=A0=80=EC=9E=A5=20?=
 =?UTF-8?q?=EC=8B=9C=20=EA=B0=9C=EC=88=98=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/app/api/songs/save/folder/route.ts | 13 +++++++++++--
 apps/web/src/app/search/AddFolderModal.tsx      |  9 ++++++---
 apps/web/src/app/tosing/AddListModal.tsx        |  7 +------
 apps/web/src/app/tosing/page.tsx                |  2 +-
 apps/web/src/lib/api/saveSong.ts                |  1 -
 apps/web/src/types/song.ts                      | 11 +++++++++++
 6 files changed, 30 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/app/api/songs/save/folder/route.ts b/apps/web/src/app/api/songs/save/folder/route.ts
index d8419e9..efd97ca 100644
--- a/apps/web/src/app/api/songs/save/folder/route.ts
+++ b/apps/web/src/app/api/songs/save/folder/route.ts
@@ -11,7 +11,7 @@ export async function GET(): Promise<NextResponse<ApiResponse<SaveSongFolderList
     const userId = await getAuthenticatedUser(supabase);
 
     // save_activities에서 song_id 목록을 가져옴
-    const { data, error: saveError } = await supabase
+    const { data: saveFolders, error: saveError } = await supabase
       .from('save_folders')
       .select('*')
       .eq('user_id', userId)
@@ -19,12 +19,21 @@ export async function GET(): Promise<NextResponse<ApiResponse<SaveSongFolderList
 
     if (saveError) throw saveError;
 
-    const saveSongFolderList = data.map(folder => ({
+    const { data: saveActivities, error: saveActivitiesError } = await supabase
+      .from('save_activities')
+      .select('*')
+      .eq('user_id', userId)
+      .order('updated_at', { ascending: false });
+
+    if (saveActivitiesError) throw saveActivitiesError;
+
+    const saveSongFolderList = saveFolders.map(folder => ({
       id: folder.id,
       user_id: folder.user_id,
       folder_name: folder.folder_name,
       created_at: folder.created_at,
       updated_at: folder.updated_at,
+      songItem: saveActivities.filter(activity => activity.folder_id === folder.id),
     }));
 
     return NextResponse.json({ success: true, data: saveSongFolderList });
diff --git a/apps/web/src/app/search/AddFolderModal.tsx b/apps/web/src/app/search/AddFolderModal.tsx
index 5f359ab..e175667 100644
--- a/apps/web/src/app/search/AddFolderModal.tsx
+++ b/apps/web/src/app/search/AddFolderModal.tsx
@@ -21,7 +21,8 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { useSaveSongFolderQuery } from '@/queries/saveSongFolderQuery';
-import { SaveSongFolderList, SearchSong } from '@/types/song';
+import { useSaveSongQuery } from '@/queries/saveSongQuery';
+import { SaveSongFolder, SaveSongFolderList, SearchSong } from '@/types/song';
 
 interface IProps {
   modalType: '' | 'POST' | 'PATCH';
@@ -38,7 +39,9 @@ export default function AddFolderModal({
   postSaveSong,
   patchSaveSong,
 }: IProps) {
-  const { data: saveSongFolderList, isLoading } = useSaveSongFolderQuery();
+  const { data: saveSongFolderList, isLoading: isLoadingSaveFolderList } = useSaveSongFolderQuery();
+
+  const isLoading = isLoadingSaveFolderList;
 
   const [folderName, setFolderName] = useState<string>('');
   const [isExistingPlaylist, setIsExistingPlaylist] = useState(false);
@@ -126,7 +129,7 @@ export default function AddFolderModal({
                 {saveSongFolderList &&
                   saveSongFolderList.map(folder => (
                     <SelectItem key={folder.id} value={folder.folder_name}>
-                      {folder.folder_name}
+                      {folder.folder_name} ({folder.songItem.length}곡)
                     </SelectItem>
                   ))}
               </SelectContent>
diff --git a/apps/web/src/app/tosing/AddListModal.tsx b/apps/web/src/app/tosing/AddListModal.tsx
index f2a4117..216e60a 100644
--- a/apps/web/src/app/tosing/AddListModal.tsx
+++ b/apps/web/src/app/tosing/AddListModal.tsx
@@ -37,13 +37,8 @@ export default function AddListModal({ isOpen, onClose }: AddListModalProps) {
   const { data: recentSongs, isLoading: isLoadingRecentSongs } = useRecentSongQuery();
 
   const { data: saveSongFolders, isLoading: isLoadingSongFolders } = useSaveSongQuery();
-  const { data: saveSongFolderList, isLoading: isLoadingSaveFolderList } = useSaveSongFolderQuery();
 
-  console.log('saveSongFolders', saveSongFolders);
-  console.log('saveSongFolderList', saveSongFolderList);
-
-  const isLoading =
-    isLoadingLikedSongs || isLoadingRecentSongs || isLoadingSongFolders || isLoadingSaveFolderList;
+  const isLoading = isLoadingLikedSongs || isLoadingRecentSongs || isLoadingSongFolders;
 
   const handleClickConfirm = () => {
     handleConfirmAdd();
diff --git a/apps/web/src/app/tosing/page.tsx b/apps/web/src/app/tosing/page.tsx
index bbf0c06..9d43660 100644
--- a/apps/web/src/app/tosing/page.tsx
+++ b/apps/web/src/app/tosing/page.tsx
@@ -26,7 +26,7 @@ export default function HomePage() {
           <span>곡 추가</span>
         </Button>
       </div>
-      <ScrollArea className="h-[calc(100vh-16rem)] px-2 py-4">
+      <ScrollArea className="h-[calc(100vh-16rem)] px-2 py-5">
         <SongList />
       </ScrollArea>
 
diff --git a/apps/web/src/lib/api/saveSong.ts b/apps/web/src/lib/api/saveSong.ts
index c8bf131..fa971b1 100644
--- a/apps/web/src/lib/api/saveSong.ts
+++ b/apps/web/src/lib/api/saveSong.ts
@@ -5,7 +5,6 @@ import { instance } from './client';
 
 export async function getSaveSong() {
   const response = await instance.get<ApiResponse<SaveSong[]>>('/songs/save');
-
   return response.data;
 }
 
diff --git a/apps/web/src/types/song.ts b/apps/web/src/types/song.ts
index 75f83c5..4168a7e 100644
--- a/apps/web/src/types/song.ts
+++ b/apps/web/src/types/song.ts
@@ -32,6 +32,16 @@ export interface SaveSong extends Song {
   updated_at: Date;
 }
 
+export interface SaveActivity {
+  id: string;
+  user_id: string;
+  song_id: string;
+  folder_id: string;
+
+  created_at: string;
+  updated_at: string;
+}
+
 export interface SaveSongFolder {
   folder_id: string;
   folder_name: string;
@@ -42,6 +52,7 @@ export interface SaveSongFolderList {
   id: string;
   user_id: string;
   folder_name: string;
+  songItem: SaveActivity[];
 
   created_at: string;
   updated_at: string;

From 7c16fe1bc261dcfdfa5c8eae644d40ab0b06b20f Mon Sep 17 00:00:00 2001
From: GulSam00 <gulsamcono@gmail.com>
Date: Sat, 24 May 2025 11:04:44 +0900
Subject: [PATCH 4/5] =?UTF-8?q?chore=20:pnpm-lock=20=EC=9D=B4=EC=8A=88=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pnpm-lock.yaml | 129 ++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 127 insertions(+), 2 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 848e0e5..5b3fea6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -145,6 +145,9 @@ importers:
       '@next/bundle-analyzer':
         specifier: ^15.3.2
         version: 15.3.2
+      '@radix-ui/react-accordion':
+        specifier: ^1.2.11
+        version: 1.2.11(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-checkbox':
         specifier: ^1.1.5
         version: 1.2.3(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -167,8 +170,8 @@ importers:
         specifier: ^1.1.2
         version: 1.1.4(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       '@radix-ui/react-slot':
-        specifier: ^1.1.2
-        version: 1.2.0(@types/react@19.0.10)(react@19.1.0)
+        specifier: ^1.2.0
+        version: 1.2.2(@types/react@19.0.10)(react@19.1.0)
       '@radix-ui/react-tabs':
         specifier: ^1.1.3
         version: 1.1.9(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -1825,6 +1828,19 @@ packages:
   '@radix-ui/primitive@1.1.2':
     resolution: {integrity: sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==}
 
+  '@radix-ui/react-accordion@1.2.11':
+    resolution: {integrity: sha512-l3W5D54emV2ues7jjeG1xcyN7S3jnK3zE2zHqgn0CmMsy9lNJwmgcrmaxS+7ipw15FAivzKNzH3d5EcGoFKw0A==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-arrow@1.1.4':
     resolution: {integrity: sha512-qz+fxrqgNxG0dYew5l7qR3c7wdgRu1XVUHGnGYX7rg5HM4p9SWaRmJwfgR3J0SgyUKayLmzQIun+N6rWRgiRKw==}
     peerDependencies:
@@ -1864,6 +1880,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-collapsible@1.1.11':
+    resolution: {integrity: sha512-2qrRsVGSCYasSz1RFOorXwl0H7g7J1frQtgpQgYrt+MOidtPAINHn9CPovQXb83r8ahapdx3Tu0fa/pdFFSdPg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-collection@1.1.4':
     resolution: {integrity: sha512-cv4vSf7HttqXilDnAnvINd53OTl1/bjUYVZrkFnA7nwmY9Ob2POUy0WY0sfqBAe1s5FyKsyceQlqiEGPYNTadg==}
     peerDependencies:
@@ -1890,6 +1919,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-collection@1.1.7':
+    resolution: {integrity: sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-compose-refs@1.0.0':
     resolution: {integrity: sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==}
     peerDependencies:
@@ -2135,6 +2177,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-primitive@2.1.3':
+    resolution: {integrity: sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-roving-focus@1.1.7':
     resolution: {integrity: sha512-C6oAg451/fQT3EGbWHbCQjYTtbyjNO1uzQgMzwyivcHT3GKNEmu1q3UuREhN+HzHAVtv3ivMVK08QlC+PkYw9Q==}
     peerDependencies:
@@ -2210,6 +2265,15 @@ packages:
       '@types/react':
         optional: true
 
+  '@radix-ui/react-slot@1.2.3':
+    resolution: {integrity: sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==}
+    peerDependencies:
+      '@types/react': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+
   '@radix-ui/react-tabs@1.1.9':
     resolution: {integrity: sha512-KIjtwciYvquiW/wAFkELZCVnaNLBsYNhTNcvl+zfMAbMhRkcvNuCLXDDd22L0j7tagpzVh/QwbFpwAATg7ILPw==}
     peerDependencies:
@@ -9482,6 +9546,23 @@ snapshots:
 
   '@radix-ui/primitive@1.1.2': {}
 
+  '@radix-ui/react-accordion@1.2.11(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-collapsible': 1.1.11(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-collection': 1.1.7(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.0.10)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.0.10)(react@19.1.0)
+      '@radix-ui/react-direction': 1.1.1(@types/react@19.0.10)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.0.10)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.0.10)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.0.10
+      '@types/react-dom': 19.0.4(@types/react@19.0.10)
+
   '@radix-ui/react-arrow@1.1.4(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/react-primitive': 2.1.0(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -9516,6 +9597,22 @@ snapshots:
       '@types/react': 19.0.10
       '@types/react-dom': 19.0.4(@types/react@19.0.10)
 
+  '@radix-ui/react-collapsible@1.1.11(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.2
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.0.10)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.0.10)(react@19.1.0)
+      '@radix-ui/react-id': 1.1.1(@types/react@19.0.10)(react@19.1.0)
+      '@radix-ui/react-presence': 1.1.4(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.0.10)(react@19.1.0)
+      '@radix-ui/react-use-layout-effect': 1.1.1(@types/react@19.0.10)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.0.10
+      '@types/react-dom': 19.0.4(@types/react@19.0.10)
+
   '@radix-ui/react-collection@1.1.4(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.0.10)(react@19.1.0)
@@ -9540,6 +9637,18 @@ snapshots:
       '@types/react': 19.0.10
       '@types/react-dom': 19.0.4(@types/react@19.0.10)
 
+  '@radix-ui/react-collection@1.1.7(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.0.10)(react@19.1.0)
+      '@radix-ui/react-context': 1.1.2(@types/react@19.0.10)(react@19.1.0)
+      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.0.10)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.0.10
+      '@types/react-dom': 19.0.4(@types/react@19.0.10)
+
   '@radix-ui/react-compose-refs@1.0.0(react@18.3.1)':
     dependencies:
       '@babel/runtime': 7.27.0
@@ -9780,6 +9889,15 @@ snapshots:
       '@types/react': 19.0.10
       '@types/react-dom': 19.0.4(@types/react@19.0.10)
 
+  '@radix-ui/react-primitive@2.1.3(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-slot': 1.2.3(@types/react@19.0.10)(react@19.1.0)
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+    optionalDependencies:
+      '@types/react': 19.0.10
+      '@types/react-dom': 19.0.4(@types/react@19.0.10)
+
   '@radix-ui/react-roving-focus@1.1.7(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.2
@@ -9872,6 +9990,13 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.0.10
 
+  '@radix-ui/react-slot@1.2.3(@types/react@19.0.10)(react@19.1.0)':
+    dependencies:
+      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.0.10)(react@19.1.0)
+      react: 19.1.0
+    optionalDependencies:
+      '@types/react': 19.0.10
+
   '@radix-ui/react-tabs@1.1.9(@types/react-dom@19.0.4(@types/react@19.0.10))(@types/react@19.0.10)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.2

From 1a88cde310237f1b5a620d902e88e629d8930a4a Mon Sep 17 00:00:00 2001
From: GulSam00 <gulsamcono@gmail.com>
Date: Sat, 24 May 2025 11:07:40 +0900
Subject: [PATCH 5/5] =?UTF-8?q?chore=20:=20=EB=B2=84=EC=A0=84=201.4.0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/package.json          | 2 +-
 apps/web/public/changelog.json | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 8ab50c2..2674eaa 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "type": "module",
   "private": true,
   "scripts": {
diff --git a/apps/web/public/changelog.json b/apps/web/public/changelog.json
index fe0a7bc..521564b 100644
--- a/apps/web/public/changelog.json
+++ b/apps/web/public/changelog.json
@@ -23,5 +23,14 @@
       "인기곡 페이지의 데이터를 산정하는 방식을 개선했습니다.",
       "로그아웃 이슈를 해결했습니다."
     ]
+  },
+
+  "1.4.0": {
+    "title": "버전 1.4.0",
+    "message": [
+      "스크롤 디자인 높이를 조정했습니다.",
+      "부를곡 페이지에서 재생목록을 통해 노래를 추가할 수 있습니다.",
+      "로직을 수정하여 검색 페이지에서 재생목록으로 저장 시 재생목록의 개수를 확인할 수 있습니다."
+    ]
   }
 }