feat(subscription): 모바일 반응형 — 바텀시트 필터 + FAB

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/pages/subscription/Subscription.jsx

@@ -1,6 +1,10 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { Link } from 'react-router-dom';
 import { apiGet, apiPost, apiPut, apiDelete } from '../../api';
+import { useIsMobile } from '../../hooks/useIsMobile';
+import PullToRefresh from '../../components/PullToRefresh';
+import FAB from '../../components/FAB';
+import MobileSheet from '../../components/MobileSheet';
 import './Subscription.css';
 
 // ── 상수 ───────────────────────────────────────────────────────────────────────
@@ -1296,9 +1300,21 @@ function ProfileTab() {
 
 // ── Subscription (Main) ──────────────────────────────────────────────────────
 function Subscription() {
+    const isMobile = useIsMobile();
     const [activeTab, setActiveTab] = useState(0);
+    const [filterSheetOpen, setFilterSheetOpen] = useState(false);
+
+    const handleFABClick = useCallback(() => {
+        if (activeTab === 0) {
+            // DashboardTab — open filter sheet or scroll to collect
+            setFilterSheetOpen(true);
+        } else {
+            setFilterSheetOpen(true);
+        }
+    }, [activeTab]);
 
     return (
+        <PullToRefresh onRefresh={useCallback(async () => {}, [])}>
         <div className="sub">
             {/* Header */}
             <div className="sub-header">
@@ -1333,7 +1349,39 @@ function Subscription() {
                 {activeTab === 2 && <MatchesTab />}
                 {activeTab === 3 && <ProfileTab />}
             </div>
+
+            <MobileSheet
+                open={filterSheetOpen}
+                onClose={() => setFilterSheetOpen(false)}
+                title="필터"
+                snap="half"
+            >
+                <div style={{ padding: '8px 0' }}>
+                    <p style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginBottom: 12 }}>
+                        탭을 선택하여 원하는 화면으로 이동하세요.
+                    </p>
+                    {TABS.map((tab, i) => (
+                        <button
+                            key={tab}
+                            onClick={() => { setActiveTab(i); setFilterSheetOpen(false); }}
+                            style={{
+                                display: 'block', width: '100%', padding: '12px 16px',
+                                textAlign: 'left', background: activeTab === i ? 'rgba(244,63,94,0.1)' : 'transparent',
+                                border: 'none', borderRadius: 8, cursor: 'pointer',
+                                color: activeTab === i ? '#f43f5e' : 'var(--text-primary)',
+                                fontSize: '0.9rem', fontWeight: activeTab === i ? 700 : 400,
+                                marginBottom: 4,
+                            }}
+                        >
+                            {tab}
+                        </button>
+                    ))}
+                </div>
+            </MobileSheet>
+
+            <FAB onClick={handleFABClick} label="공고 등록" />
         </div>
+        </PullToRefresh>
     );
 }