feat(blog): 모바일 반응형 — FAB + 풀다운 리프레시 + 칩 필터

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

src/pages/blog-marketing/BlogMarketing.css

@@ -125,6 +125,18 @@
 .bm-empty { text-align: center; padding: 48px 20px; color: rgba(255,255,255,.25); font-size: 0.85rem; }
 
 /* ── 모바일 ───────────────────────────────────────────────────────────────── */
+@media (max-width: 768px) {
+  .bm-tabs {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .bm-tabs > * {
+    flex-shrink: 0;
+    white-space: nowrap;
+  }
+}
+
 @media (max-width: 480px) {
   .bm { padding: 16px 10px 60px; }
   .bm-header h1 { font-size: 1.2rem; }

src/pages/blog-marketing/BlogMarketing.jsx

@@ -1,4 +1,7 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { useIsMobile } from '../../hooks/useIsMobile';
+import PullToRefresh from '../../components/PullToRefresh';
+import FAB from '../../components/FAB';
 import {
   getBlogMarketingStatus,
   startResearch,
@@ -81,13 +84,18 @@ function usePollTask(onDone) {
 
 /* ══════════════════════════════════════════════════════════════════════════ */
 export default function BlogMarketing() {
+  const isMobile = useIsMobile();
   const [tab, setTab] = useState('dashboard');
   const [status, setStatus] = useState(null);
 
-  useEffect(() => {
-    getBlogMarketingStatus().then(setStatus).catch(() => {});
+  const loadStatus = useCallback(() => {
+    return getBlogMarketingStatus().then(setStatus).catch(() => {});
   }, []);
 
+  useEffect(() => {
+    loadStatus();
+  }, [loadStatus]);
+
   const tabs = [
     { id: 'dashboard', label: 'Dashboard' },
     { id: 'research', label: 'Research' },
@@ -96,6 +104,7 @@ export default function BlogMarketing() {
   ];
 
   return (
+    <PullToRefresh onRefresh={loadStatus}>
     <div className="bm">
       <header className="bm-header">
         <h1>Blog Lab</h1>
@@ -127,7 +136,12 @@ export default function BlogMarketing() {
       {tab === 'research' && <ResearchTab onGenerate={(id) => { setTab('write'); }} />}
       {tab === 'write' && <WriteTab />}
       {tab === 'posts' && <PostsTab />}
+
+      {tab === 'research' && (
+        <FAB onClick={() => setTab('research')} label="키워드 분석" />
+      )}
     </div>
+    </PullToRefresh>
   );
 }