From d2dae3d042d6be3a3d55053a65c10fb1fd675c8a Mon Sep 17 00:00:00 2001
From: gahusb <bgg8988@gmail.com>
Date: Thu, 9 Jul 2026 17:51:15 +0900
Subject: [PATCH] =?UTF-8?q?refactor(subscription):=20StatusBadge=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EC=B6=9C=20+?=
 =?UTF-8?q?=20=EC=8A=A4=EB=AA=A8=ED=81=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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            | 12 +-----------
 src/pages/subscription/components/StatusBadge.jsx  | 14 ++++++++++++++
 .../subscription/components/StatusBadge.test.jsx   | 14 ++++++++++++++
 3 files changed, 29 insertions(+), 11 deletions(-)
 create mode 100644 src/pages/subscription/components/StatusBadge.jsx
 create mode 100644 src/pages/subscription/components/StatusBadge.test.jsx

diff --git a/src/pages/subscription/Subscription.jsx b/src/pages/subscription/Subscription.jsx
index 9881475..24f708a 100644
--- a/src/pages/subscription/Subscription.jsx
+++ b/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);
diff --git a/src/pages/subscription/components/StatusBadge.jsx b/src/pages/subscription/components/StatusBadge.jsx
new file mode 100644
index 0000000..66c5e3e
--- /dev/null
+++ b/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;
diff --git a/src/pages/subscription/components/StatusBadge.test.jsx b/src/pages/subscription/components/StatusBadge.test.jsx
new file mode 100644
index 0000000..148191b
--- /dev/null
+++ b/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();
+  });
+});