refactor(subscription): StatusBadge 컴포넌트 추출 + 스모크

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UHXzpsZQxKG9hQmNRfZjRS

src/pages/subscription/Subscription.jsx

@@ -5,23 +5,13 @@ import PullToRefresh from '../../components/PullToRefresh';
 import FAB from '../../components/FAB';
 import DistrictTierEditor from './components/DistrictTierEditor';
 import NotificationSettings from './components/NotificationSettings';
+import StatusBadge from './components/StatusBadge';
 import './Subscription.css';
 import {
     STATUS_CONFIG, HOUSE_TYPE_LABELS, TABS, STATUS_FILTERS, DEFAULT_PROFILE,
     extractTier, fmt, fmtFull, getDDays, getDDayColor, fmtDateTime, apiPatch, fmtPrice,
 } from './subscriptionUtils';
 
-// ── StatusBadge ──────────────────────────────────────────────────────────────
-function StatusBadge({ status, size }) {
-    const cfg = STATUS_CONFIG[status] || { color: '#94a3b8', bg: 'rgba(148,163,184,0.1)' };
-    const cls = size === 'lg' ? 'sub-badge sub-badge--lg' : 'sub-badge';
-    return (
-        <span className={cls} style={{ color: cfg.color, background: cfg.bg }}>
-            {status || '알 수 없음'}
-        </span>
-    );
-}
-
 // ── DashboardTab ─────────────────────────────────────────────────────────────
 function DashboardTab() {
     const [dashboard, setDashboard] = useState(null);

src/pages/subscription/components/StatusBadge.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { STATUS_CONFIG } from '../subscriptionUtils';
+
+function StatusBadge({ status, size }) {
+    const cfg = STATUS_CONFIG[status] || { color: '#94a3b8', bg: 'rgba(148,163,184,0.1)' };
+    const cls = size === 'lg' ? 'sub-badge sub-badge--lg' : 'sub-badge';
+    return (
+        <span className={cls} style={{ color: cfg.color, background: cfg.bg }}>
+            {status || '알 수 없음'}
+        </span>
+    );
+}
+
+export default StatusBadge;

src/pages/subscription/components/StatusBadge.test.jsx

@@ -0,0 +1,14 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import StatusBadge from './StatusBadge.jsx';
+
+describe('StatusBadge', () => {
+  it('status 라벨 렌더', () => {
+    render(<StatusBadge status="청약중" />);
+    expect(screen.getByText('청약중')).toBeInTheDocument();
+  });
+  it('미정의 status → "알 수 없음" 폴백', () => {
+    render(<StatusBadge status={null} />);
+    expect(screen.getByText('알 수 없음')).toBeInTheDocument();
+  });
+});