From 326d54c73f392e2497bca15896ce93cf33818d26 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Thu, 23 Apr 2026 14:54:04 +0900
Subject: [PATCH] =?UTF-8?q?feat(music):=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=E2=80=94=20FAB=20+=20=ED=92=80?=
 =?UTF-8?q?=EB=8B=A4=EC=9A=B4=20=EB=A6=AC=ED=94=84=EB=A0=88=EC=8B=9C=20+?=
 =?UTF-8?q?=201=EC=BB=AC=EB=9F=BC=20=EB=9D=BC=EC=9D=B4=EB=B8=8C=EB=9F=AC?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/music/MusicStudio.css | 12 ++++++++++++
 src/pages/music/MusicStudio.jsx | 10 ++++++++++
 2 files changed, 22 insertions(+)

diff --git a/src/pages/music/MusicStudio.css b/src/pages/music/MusicStudio.css
index dfc1c51..8ad99ff 100644
--- a/src/pages/music/MusicStudio.css
+++ b/src/pages/music/MusicStudio.css
@@ -1696,6 +1696,18 @@
 /* ═══════════════════════════════════════════════════
    MOBILE
 ═══════════════════════════════════════════════════ */
+@media (max-width: 768px) {
+    .ms-tabs {
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .ms-tabs > * {
+        flex-shrink: 0;
+        white-space: nowrap;
+    }
+}
+
 @media (max-width: 480px) {
     .ms-header__title {
         font-size: clamp(44px, 14vw, 70px);
diff --git a/src/pages/music/MusicStudio.jsx b/src/pages/music/MusicStudio.jsx
index 8521672..3019820 100644
--- a/src/pages/music/MusicStudio.jsx
+++ b/src/pages/music/MusicStudio.jsx
@@ -16,6 +16,9 @@ import {
     generateStyleBoost,
     generateVideo,
 } from '../../api';
+import { useIsMobile } from '../../hooks/useIsMobile';
+import PullToRefresh from '../../components/PullToRefresh';
+import FAB from '../../components/FAB';
 import './MusicStudio.css';
 import AudioPlayer from './components/AudioPlayer';
 import { fmtTime } from './components/AudioPlayer';
@@ -512,6 +515,7 @@ const Library = ({ tracks, onDelete, onRefresh, onExtend, onVocalRemoval, onCove
 ───────────────────────────────────────────── */
 export default function MusicStudio() {
     /* ── 탭 ── */
+    const isMobile = useIsMobile();
     const [tab, setTab] = useState('create');
 
     /* ── Provider 상태 ── */
@@ -1123,6 +1127,7 @@ export default function MusicStudio() {
 
             {/* ═══ LIBRARY TAB ═══ */}
             {tab === 'library' && (
+                <PullToRefresh onRefresh={loadLibrary}>
                 <Library
                     tracks={library}
                     loading={libLoading}
@@ -1137,6 +1142,7 @@ export default function MusicStudio() {
                     onVideoGenerate={handleVideoGenerate}
                     isGenerating={isGenerating}
                 />
+                </PullToRefresh>
             )}
 
             {/* ═══ LYRICS TAB ═══ */}
@@ -1760,6 +1766,10 @@ export default function MusicStudio() {
                     accentColor={accentColor}
                 />
             )}
+
+            {tab === 'library' && (
+                <FAB onClick={() => setTab('create')} label="음악 생성" />
+            )}
         </div>
     );
 }