From 901cfd7e1b1fb1d7b7242a28b53ac636895440f7 Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Thu, 23 Apr 2026 15:02:12 +0900
Subject: [PATCH] =?UTF-8?q?fix(responsive):=20Phase=203=20spec=20complianc?=
 =?UTF-8?q?e=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Blog: 태그 필터 칩 바 모바일 가로 스크롤 추가
- BlogMarketing: FAB 전 탭에서 표시 + 대시보드 480px 1컬럼
- Subscription: PullToRefresh refreshKey 패턴 적용, FAB→공고 목록 탭 이동
- Todo: FAB 라벨 "할일 추가"로 spec 일치

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/pages/blog-marketing/BlogMarketing.css |  2 +-
 src/pages/blog-marketing/BlogMarketing.jsx |  4 +-
 src/pages/blog/Blog.css                    |  7 +++
 src/pages/subscription/Subscription.jsx    | 57 +++++-----------------
 src/pages/todo/Todo.jsx                    |  6 +--
 5 files changed, 25 insertions(+), 51 deletions(-)

diff --git a/src/pages/blog-marketing/BlogMarketing.css b/src/pages/blog-marketing/BlogMarketing.css
index 4ac6ae8..9b2e998 100644
--- a/src/pages/blog-marketing/BlogMarketing.css
+++ b/src/pages/blog-marketing/BlogMarketing.css
@@ -142,7 +142,7 @@
   .bm-header h1 { font-size: 1.2rem; }
   .bm-status { display: none; }
   .bm-tab { padding: 6px 10px; font-size: 0.8rem; }
-  .bm-dash-cards { grid-template-columns: repeat(2, 1fr); }
+  .bm-dash-cards { grid-template-columns: 1fr; }
   .bm-research-form { flex-direction: column; }
   .bm-analysis-card__scores { gap: 10px; }
   .bm-write-actions { flex-direction: column; }
diff --git a/src/pages/blog-marketing/BlogMarketing.jsx b/src/pages/blog-marketing/BlogMarketing.jsx
index 131661c..e32a379 100644
--- a/src/pages/blog-marketing/BlogMarketing.jsx
+++ b/src/pages/blog-marketing/BlogMarketing.jsx
@@ -137,9 +137,7 @@ export default function BlogMarketing() {
       {tab === 'write' && <WriteTab />}
       {tab === 'posts' && <PostsTab />}
 
-      {tab === 'research' && (
-        <FAB onClick={() => setTab('research')} label="키워드 분석" />
-      )}
+      <FAB onClick={() => setTab('research')} label="키워드 분석" />
     </div>
     </PullToRefresh>
   );
diff --git a/src/pages/blog/Blog.css b/src/pages/blog/Blog.css
index 7978bba..6f7eaee 100644
--- a/src/pages/blog/Blog.css
+++ b/src/pages/blog/Blog.css
@@ -490,6 +490,13 @@
 
     .blog-list.is-visible .blog-category-filter {
         margin-bottom: 8px;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+        flex-wrap: nowrap;
+    }
+
+    .blog-list.is-visible .blog-category-filter > * {
+        flex-shrink: 0;
     }
 
     .blog-list.is-visible .blog-pagination {
diff --git a/src/pages/subscription/Subscription.jsx b/src/pages/subscription/Subscription.jsx
index 75dd36e..b4884b6 100644
--- a/src/pages/subscription/Subscription.jsx
+++ b/src/pages/subscription/Subscription.jsx
@@ -4,7 +4,6 @@ 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';
 
 // ── 상수 ───────────────────────────────────────────────────────────────────────
@@ -1302,19 +1301,18 @@ function ProfileTab() {
 function Subscription() {
     const isMobile = useIsMobile();
     const [activeTab, setActiveTab] = useState(0);
-    const [filterSheetOpen, setFilterSheetOpen] = useState(false);
+    const [refreshKey, setRefreshKey] = useState(0);
+
+    const handleRefresh = useCallback(async () => {
+        setRefreshKey(k => k + 1);
+    }, []);
 
     const handleFABClick = useCallback(() => {
-        if (activeTab === 0) {
-            // DashboardTab — open filter sheet or scroll to collect
-            setFilterSheetOpen(true);
-        } else {
-            setFilterSheetOpen(true);
-        }
-    }, [activeTab]);
+        setActiveTab(1); // 공고 목록 탭으로 이동
+    }, []);
 
     return (
-        <PullToRefresh onRefresh={useCallback(async () => {}, [])}>
+        <PullToRefresh onRefresh={handleRefresh}>
         <div className="sub">
             {/* Header */}
             <div className="sub-header">
@@ -1344,42 +1342,13 @@ function Subscription() {
 
             {/* Body */}
             <div className="sub-body">
-                {activeTab === 0 && <DashboardTab />}
-                {activeTab === 1 && <AnnouncementsTab />}
-                {activeTab === 2 && <MatchesTab />}
-                {activeTab === 3 && <ProfileTab />}
+                {activeTab === 0 && <DashboardTab key={`dash-${refreshKey}`} />}
+                {activeTab === 1 && <AnnouncementsTab key={`ann-${refreshKey}`} />}
+                {activeTab === 2 && <MatchesTab key={`match-${refreshKey}`} />}
+                {activeTab === 3 && <ProfileTab key={`prof-${refreshKey}`} />}
             </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="공고 등록" />
+            <FAB onClick={handleFABClick} label="공고 목록" />
         </div>
         </PullToRefresh>
     );
diff --git a/src/pages/todo/Todo.jsx b/src/pages/todo/Todo.jsx
index 1a0b65b..c1d66f2 100644
--- a/src/pages/todo/Todo.jsx
+++ b/src/pages/todo/Todo.jsx
@@ -260,7 +260,7 @@ const Todo = () => {
                     className="button primary"
                     onClick={() => setFormOpen((v) => !v)}
                 >
-                    {formOpen ? '취소' : '+ 태스크 추가'}
+                    {formOpen ? '취소' : '+ 할일 추가'}
                 </button>
                 <button
                     type="button"
@@ -383,12 +383,12 @@ const Todo = () => {
             <MobileSheet
                 open={addSheetOpen}
                 onClose={() => { setAddSheetOpen(false); setForm(emptyForm); }}
-                title="태스크 추가"
+                title="할일 추가"
             >
                 {addForm}
             </MobileSheet>
 
-            <FAB onClick={() => setAddSheetOpen(true)} label="태스크 추가" />
+            <FAB onClick={() => setAddSheetOpen(true)} label="할일 추가" />
         </div>
         </PullToRefresh>
     );