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' && ( + + )} {/* ═══ LYRICS TAB ═══ */} @@ -1760,6 +1766,10 @@ export default function MusicStudio() { accentColor={accentColor} /> )} + + {tab === 'library' && ( + setTab('create')} label="음악 생성" /> + )} ); }