gahusb
a087c3d1e5
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UHXzpsZQxKG9hQmNRfZjRS
1072 lines
47 KiB
Markdown
1072 lines
47 KiB
Markdown
# 실매물 매물·안전마진 UI Implementation Plan
|
||
|
||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||
|
||
**Goal:** `/realestate/listings` 신규 페이지에 실매물(매매/전세) 매물 목록·판정 tier·안전마진 체커·예산 계산기·조건 편집을 구현한다.
|
||
|
||
**Architecture:** 전용 모듈 `src/pages/listings/`. 순수헬퍼(tier/금액) → api.js 헬퍼 8종 → 자립형 탭 3개(매물/판정도구/조건, 각자 api 호출·Subscription 탭 패턴) → Listings shell + routes 배선. 각 탭은 `vi.mock('../../../api')`로 스모크 테스트.
|
||
|
||
**Tech Stack:** React 18 + Vite, Vitest + @testing-library/react, 기존 `apiGet/apiPost/apiPut` 헬퍼.
|
||
|
||
## Global Constraints
|
||
|
||
- **API는 항상 상대경로** `/api/realestate/*`, 전부 `src/api.js`의 `apiGet/apiPost/apiPut` 경유.
|
||
- **`regulation_flags`/`reasons`는 이미 배열 — `JSON.parse` 금지, 그대로 `.map` 렌더.**
|
||
- **어떤 응답 필드가 객체여도 JSX 자식으로 직접 렌더 금지** (tier/금액/문자열/배열-칩만 렌더).
|
||
- **disclaimer 응답에 있으면 반드시 노출** (safety-check·budget 결과).
|
||
- 금액은 **만원 단위**. 판정 색: 🟢`#34d399`/🟡`#f59e0b`/🔴`#f87171`/⚪`#94a3b8`.
|
||
- tier: 임차 safety_tier=안전/주의/위험/보류, 매매 valuation_tier=저평가/시세/고가/보류. 표본<3→"보류".
|
||
- 응답 방어적 파싱: `data.listings ?? []`, `data.matches ?? []`, `data.criteria ?? data`.
|
||
- 테스트: Vitest `import { describe, it, expect } from 'vitest'`, 실행 `npm run test:run`, `*.test.js(x)` 동일 디렉토리. jest-dom은 `src/test-setup.js`에서 전역 등록됨(테스트 파일에 import 불필요).
|
||
- 스타일: Subscription CSS 변수 재사용(`--text-bright/--text-dim/--text-muted/--surface/--surface-raised/--line/--radius-sm`), 클래스 `lst-*`.
|
||
- 커밋은 web-ui 경로, 변경 파일만 명시적 `git add`. 커밋 trailer:
|
||
```
|
||
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
||
Claude-Session: https://claude.ai/code/session_01UHXzpsZQxKG9hQmNRfZjRS
|
||
```
|
||
|
||
---
|
||
|
||
### Task 1: 순수 헬퍼 `listingsUtils.js` (tier/금액 매핑)
|
||
|
||
**Files:**
|
||
- Create: `src/pages/listings/listingsUtils.js`
|
||
- Test: `src/pages/listings/listingsUtils.test.js`
|
||
|
||
**Interfaces:**
|
||
- Produces: `tierMeta(kind:'safety'|'valuation', tier:string) => {emoji, color, label}`; `formatMoney(manwon) => string`; `formatRatio(ratio) => string`; `SAFETY_TIER_META`, `VALUATION_TIER_META`.
|
||
|
||
- [ ] **Step 1: Write the failing test** — Create `src/pages/listings/listingsUtils.test.js`:
|
||
|
||
```js
|
||
import { describe, it, expect } from 'vitest';
|
||
import { tierMeta, formatMoney, formatRatio } from './listingsUtils.js';
|
||
|
||
describe('tierMeta', () => {
|
||
it('safety 4종 이모지·색·label', () => {
|
||
expect(tierMeta('safety', '안전')).toMatchObject({ emoji: '🟢', color: '#34d399', label: '안전' });
|
||
expect(tierMeta('safety', '주의').emoji).toBe('🟡');
|
||
expect(tierMeta('safety', '위험').color).toBe('#f87171');
|
||
expect(tierMeta('safety', '보류').emoji).toBe('⚪');
|
||
});
|
||
it('valuation 4종', () => {
|
||
expect(tierMeta('valuation', '저평가')).toMatchObject({ emoji: '🟢', color: '#34d399', label: '저평가' });
|
||
expect(tierMeta('valuation', '시세').emoji).toBe('🟡');
|
||
expect(tierMeta('valuation', '고가').color).toBe('#f87171');
|
||
});
|
||
it('미정의 tier는 회색⚪ + 원문 label, undefined는 빈 label', () => {
|
||
expect(tierMeta('safety', '없는거')).toMatchObject({ emoji: '⚪', color: '#94a3b8', label: '없는거' });
|
||
expect(tierMeta('valuation', undefined).label).toBe('');
|
||
});
|
||
});
|
||
|
||
describe('formatMoney (만원 정밀 표기)', () => {
|
||
it('만/억 경계', () => {
|
||
expect(formatMoney(9999)).toBe('9,999만');
|
||
expect(formatMoney(10000)).toBe('1억');
|
||
expect(formatMoney(15000)).toBe('1억 5,000만');
|
||
expect(formatMoney(32000)).toBe('3억 2,000만');
|
||
});
|
||
it('null/빈값/NaN → -', () => {
|
||
expect(formatMoney(null)).toBe('-');
|
||
expect(formatMoney('')).toBe('-');
|
||
expect(formatMoney('abc')).toBe('-');
|
||
});
|
||
});
|
||
|
||
describe('formatRatio', () => {
|
||
it('비율 → 퍼센트 1자리', () => {
|
||
expect(formatRatio(0.812)).toBe('81.2%');
|
||
expect(formatRatio(1.05)).toBe('105.0%');
|
||
});
|
||
it('null → -', () => {
|
||
expect(formatRatio(null)).toBe('-');
|
||
});
|
||
});
|
||
```
|
||
|
||
- [ ] **Step 2: Run test to verify it fails**
|
||
|
||
Run: `npm run test:run -- src/pages/listings/listingsUtils.test.js`
|
||
Expected: FAIL — `Failed to resolve import "./listingsUtils.js"`.
|
||
|
||
- [ ] **Step 3: Write the implementation** — Create `src/pages/listings/listingsUtils.js`:
|
||
|
||
```js
|
||
/* 실매물 판정 tier / 금액 포맷 순수 헬퍼 */
|
||
const C = { green: '#34d399', yellow: '#f59e0b', red: '#f87171', gray: '#94a3b8' };
|
||
|
||
export const SAFETY_TIER_META = Object.freeze({
|
||
'안전': { emoji: '🟢', color: C.green },
|
||
'주의': { emoji: '🟡', color: C.yellow },
|
||
'위험': { emoji: '🔴', color: C.red },
|
||
'보류': { emoji: '⚪', color: C.gray },
|
||
});
|
||
|
||
export const VALUATION_TIER_META = Object.freeze({
|
||
'저평가': { emoji: '🟢', color: C.green },
|
||
'시세': { emoji: '🟡', color: C.yellow },
|
||
'고가': { emoji: '🔴', color: C.red },
|
||
'보류': { emoji: '⚪', color: C.gray },
|
||
});
|
||
|
||
export const tierMeta = (kind, tier) => {
|
||
const map = kind === 'valuation' ? VALUATION_TIER_META : SAFETY_TIER_META;
|
||
if (Object.hasOwn(map, tier)) return { ...map[tier], label: tier };
|
||
return { emoji: '⚪', color: C.gray, label: tier ?? '' };
|
||
};
|
||
|
||
export const formatMoney = (manwon) => {
|
||
if (manwon == null || manwon === '') return '-';
|
||
const n = Number(manwon);
|
||
if (Number.isNaN(n)) return '-';
|
||
const eok = Math.floor(n / 10000);
|
||
const rest = n % 10000;
|
||
if (eok > 0 && rest > 0) return `${eok}억 ${rest.toLocaleString('ko-KR')}만`;
|
||
if (eok > 0) return `${eok}억`;
|
||
return `${n.toLocaleString('ko-KR')}만`;
|
||
};
|
||
|
||
export const formatRatio = (ratio) => {
|
||
if (ratio == null) return '-';
|
||
const n = Number(ratio);
|
||
if (Number.isNaN(n)) return '-';
|
||
return `${(n * 100).toFixed(1)}%`;
|
||
};
|
||
```
|
||
|
||
- [ ] **Step 4: Run test to verify it passes**
|
||
|
||
Run: `npm run test:run -- src/pages/listings/listingsUtils.test.js`
|
||
Expected: PASS (3 describe 전부).
|
||
|
||
- [ ] **Step 5: Commit**
|
||
|
||
```bash
|
||
git add src/pages/listings/listingsUtils.js src/pages/listings/listingsUtils.test.js
|
||
git commit -m "feat(listings): 실매물 tier/금액 순수 헬퍼 + 테스트"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 2: API 헬퍼 8종 (`src/api.js`)
|
||
|
||
**Files:**
|
||
- Modify: `src/api.js` (파일 끝에 추가)
|
||
|
||
**Interfaces:**
|
||
- Produces: `getListings(params)`, `collectListings()`, `getListingsCollectStatus()`, `getListingsCriteria()`, `putListingsCriteria(body)`, `getListingsMatches()`, `safetyCheck(body)`, `budgetCalc(body)`.
|
||
|
||
- [ ] **Step 1: Add API helpers** — `src/api.js` 맨 끝(마지막 export 뒤)에 추가:
|
||
|
||
```js
|
||
// ── Realestate Listings / 안전마진 / 예산 (실매물) ──
|
||
// GET /api/realestate/listings → { listings: [...] } (+판정 join)
|
||
export const getListings = ({ dong, deal_type, tier, matched_only, page = 1, size = 20 } = {}) => {
|
||
const q = new URLSearchParams();
|
||
if (dong) q.set('dong', dong);
|
||
if (deal_type) q.set('deal_type', deal_type);
|
||
if (tier) q.set('tier', tier);
|
||
if (matched_only) q.set('matched_only', 'true');
|
||
q.set('page', String(page));
|
||
q.set('size', String(size));
|
||
return apiGet(`/api/realestate/listings?${q.toString()}`);
|
||
};
|
||
export const collectListings = () => apiPost('/api/realestate/listings/collect');
|
||
export const getListingsCollectStatus = () => apiGet('/api/realestate/listings/collect/status');
|
||
export const getListingsCriteria = () => apiGet('/api/realestate/listings/criteria');
|
||
export const putListingsCriteria = (body) => apiPut('/api/realestate/listings/criteria', body);
|
||
export const getListingsMatches = () => apiGet('/api/realestate/listings/matches');
|
||
export const safetyCheck = (body) => apiPost('/api/realestate/safety-check', body);
|
||
export const budgetCalc = (body) => apiPost('/api/realestate/budget', body);
|
||
```
|
||
|
||
- [ ] **Step 2: Verify no syntax break**
|
||
|
||
Run: `npm run test:run -- src/api`
|
||
Expected: (api.js has no dedicated test) — instead run `npm run build 2>&1 | tail -3`
|
||
Expected: `✓ built` (no syntax error). If build not desired here, run `node --check` is N/A for ESM+JSX; rely on Task 6 build. Minimum: `npx eslint src/api.js` → 0 new errors.
|
||
|
||
- [ ] **Step 3: Commit**
|
||
|
||
```bash
|
||
git add src/api.js
|
||
git commit -m "feat(listings): realestate 실매물/안전마진/예산 API 헬퍼 8종"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 3: `ListingsTab.jsx` (매물 목록 + 필터 + 수집)
|
||
|
||
**Files:**
|
||
- Create: `src/pages/listings/components/ListingsTab.jsx`
|
||
- Test: `src/pages/listings/components/ListingsTab.test.jsx`
|
||
|
||
**Interfaces:**
|
||
- Consumes (Task 1): `tierMeta`, `formatMoney`, `formatRatio`. (Task 2): `getListings`, `collectListings`, `getListingsCollectStatus`.
|
||
- Produces: `ListingsTab` 기본 export (자립형, props 없음).
|
||
|
||
- [ ] **Step 1: Write the failing smoke test** — Create `src/pages/listings/components/ListingsTab.test.jsx`:
|
||
|
||
```jsx
|
||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||
import { render, screen, waitFor } from '@testing-library/react';
|
||
|
||
vi.mock('../../../api', () => ({
|
||
getListings: vi.fn(),
|
||
collectListings: vi.fn(),
|
||
getListingsCollectStatus: vi.fn(),
|
||
}));
|
||
import { getListings, getListingsCollectStatus } from '../../../api';
|
||
import ListingsTab from './ListingsTab.jsx';
|
||
|
||
beforeEach(() => {
|
||
vi.clearAllMocks();
|
||
getListingsCollectStatus.mockResolvedValue({ status: 'never_run' });
|
||
});
|
||
|
||
describe('ListingsTab', () => {
|
||
it('빈 목록이면 안내 문구', async () => {
|
||
getListings.mockResolvedValue({ listings: [] });
|
||
render(<ListingsTab />);
|
||
await waitFor(() => expect(screen.getByText(/매물이 없습니다|수집/)).toBeInTheDocument());
|
||
});
|
||
|
||
it('매물+판정 tier·배열 필드를 크래시 없이 렌더 (매매=valuation, 배열 그대로)', async () => {
|
||
getListings.mockResolvedValue({ listings: [{
|
||
id: 1, complex_name: '상도더샵', dong: '상도동', deal_type: '매매',
|
||
price: 95000, valuation_tier: '고가', ratio: 1.08,
|
||
regulation_flags: ['토지거래허가'], reasons: ['호가가 최근 실거래 대비 8% 높음'],
|
||
}] });
|
||
render(<ListingsTab />);
|
||
await waitFor(() => expect(screen.getByText('상도더샵')).toBeInTheDocument());
|
||
expect(screen.getByText(/고가/)).toBeInTheDocument();
|
||
expect(screen.getByText('토지거래허가')).toBeInTheDocument();
|
||
expect(screen.getByText(/호가가 최근 실거래/)).toBeInTheDocument();
|
||
});
|
||
});
|
||
```
|
||
|
||
- [ ] **Step 2: Run test to verify it fails**
|
||
|
||
Run: `npm run test:run -- src/pages/listings/components/ListingsTab.test.jsx`
|
||
Expected: FAIL — `Failed to resolve import "./ListingsTab.jsx"`.
|
||
|
||
- [ ] **Step 3: Write the component** — Create `src/pages/listings/components/ListingsTab.jsx`:
|
||
|
||
```jsx
|
||
import React, { useEffect, useState } from 'react';
|
||
import { getListings, collectListings, getListingsCollectStatus } from '../../../api';
|
||
import { tierMeta, formatMoney, formatRatio } from '../listingsUtils';
|
||
|
||
const DEAL_TYPES = ['전체', '전세', '반전세', '매매'];
|
||
|
||
const ListingCard = ({ l }) => {
|
||
const isSale = l.deal_type === '매매';
|
||
const tv = isSale ? l.valuation_tier : l.safety_tier;
|
||
const meta = tierMeta(isSale ? 'valuation' : 'safety', tv);
|
||
const price = l.price ?? l.deposit ?? l.amount;
|
||
const flags = Array.isArray(l.regulation_flags) ? l.regulation_flags : [];
|
||
const reasons = Array.isArray(l.reasons) ? l.reasons : [];
|
||
return (
|
||
<div className="lst-card">
|
||
<div className="lst-card__head">
|
||
{tv && <span className="lst-tier" style={{ color: meta.color }}>{meta.emoji} {meta.label}</span>}
|
||
<strong className="lst-card__name">{l.complex_name || l.name || l.dong || '(매물)'}</strong>
|
||
{l.deal_type && <span className="lst-card__deal">{l.deal_type}</span>}
|
||
{l.dong && <span className="lst-card__dong">{l.dong}</span>}
|
||
</div>
|
||
<div className="lst-card__body">
|
||
{price != null && <span className="lst-card__price">{formatMoney(price)}</span>}
|
||
{l.area != null && <span className="lst-card__area">{l.area}m²</span>}
|
||
{l.ratio != null && <span className="lst-card__ratio">비율 {formatRatio(l.ratio)}</span>}
|
||
</div>
|
||
{flags.length > 0 && (
|
||
<div className="lst-flags">{flags.map((f, i) => <span key={i} className="lst-flag">{f}</span>)}</div>
|
||
)}
|
||
{reasons.length > 0 && <div className="lst-card__reasons">{reasons.join(' · ')}</div>}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const ListingsTab = () => {
|
||
const [listings, setListings] = useState([]);
|
||
const [dealType, setDealType] = useState('전체');
|
||
const [matchedOnly, setMatchedOnly] = useState(false);
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState('');
|
||
const [collectStatus, setCollectStatus] = useState(null);
|
||
const [collecting, setCollecting] = useState(false);
|
||
|
||
const load = async () => {
|
||
setLoading(true);
|
||
setError('');
|
||
try {
|
||
const data = await getListings({
|
||
deal_type: dealType === '전체' ? undefined : dealType,
|
||
matched_only: matchedOnly,
|
||
size: 50,
|
||
});
|
||
setListings(Array.isArray(data) ? data : (data.listings ?? []));
|
||
} catch (e) {
|
||
setError(e?.message ?? String(e));
|
||
setListings([]);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const loadStatus = async () => {
|
||
try { setCollectStatus(await getListingsCollectStatus()); } catch { /* noop */ }
|
||
};
|
||
|
||
useEffect(() => { load(); }, [dealType, matchedOnly]); // eslint-disable-line react-hooks/exhaustive-deps
|
||
useEffect(() => { loadStatus(); }, []);
|
||
|
||
const handleCollect = async () => {
|
||
setCollecting(true);
|
||
try {
|
||
await collectListings();
|
||
setTimeout(() => { loadStatus(); load(); setCollecting(false); }, 3000);
|
||
} catch (e) {
|
||
setError(e?.message ?? String(e));
|
||
setCollecting(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<div className="lst-tab">
|
||
<div className="lst-toolbar">
|
||
<div className="lst-filter">
|
||
{DEAL_TYPES.map((d) => (
|
||
<button key={d} type="button" className={`lst-filter-btn ${dealType === d ? 'is-active' : ''}`}
|
||
onClick={() => setDealType(d)}>{d}</button>
|
||
))}
|
||
</div>
|
||
<div className="lst-toolbar__right">
|
||
<button type="button" className={`lst-filter-btn ${matchedOnly ? 'is-active' : ''}`}
|
||
onClick={() => setMatchedOnly((v) => !v)}>매칭만</button>
|
||
<button type="button" className="lst-filter-btn is-primary" onClick={handleCollect} disabled={collecting}>
|
||
{collecting ? '수집 중…' : '수집 실행'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{collectStatus && (
|
||
<p className="lst-status">
|
||
수집 상태: {collectStatus.status === 'never_run' ? '미실행' : collectStatus.status}
|
||
{collectStatus.total_count != null && ` · 총 ${collectStatus.total_count}건`}
|
||
{collectStatus.error && <span style={{ color: '#f87171' }}> · 오류: {collectStatus.error}</span>}
|
||
</p>
|
||
)}
|
||
|
||
{error && <p className="lst-error">{error}</p>}
|
||
|
||
{loading ? (
|
||
<p className="lst-empty">불러오는 중…</p>
|
||
) : listings.length === 0 ? (
|
||
<p className="lst-empty">조건에 맞는 매물이 없습니다. ‘수집 실행’으로 매물을 모아보세요.</p>
|
||
) : (
|
||
<div className="lst-grid">
|
||
{listings.map((l) => <ListingCard key={l.id ?? `${l.complex_name}-${l.dong}`} l={l} />)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default ListingsTab;
|
||
```
|
||
|
||
- [ ] **Step 4: Run test to verify it passes**
|
||
|
||
Run: `npm run test:run -- src/pages/listings/components/ListingsTab.test.jsx`
|
||
Expected: PASS (2 케이스).
|
||
|
||
- [ ] **Step 5: Commit**
|
||
|
||
```bash
|
||
git add src/pages/listings/components/ListingsTab.jsx src/pages/listings/components/ListingsTab.test.jsx
|
||
git commit -m "feat(listings): 매물 목록 탭(필터·판정 tier·수집) + 스모크 테스트"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 4: `ToolsTab.jsx` (안전마진 체커 + 예산 계산기)
|
||
|
||
**Files:**
|
||
- Create: `src/pages/listings/components/ToolsTab.jsx`
|
||
- Test: `src/pages/listings/components/ToolsTab.test.jsx`
|
||
|
||
**Interfaces:**
|
||
- Consumes (Task 1): `tierMeta`, `formatMoney`, `formatRatio`. (Task 2): `safetyCheck`, `budgetCalc`.
|
||
- Produces: `ToolsTab` 기본 export (자립형).
|
||
|
||
- [ ] **Step 1: Write the failing smoke test** — Create `src/pages/listings/components/ToolsTab.test.jsx`:
|
||
|
||
```jsx
|
||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||
import { render, screen } from '@testing-library/react';
|
||
|
||
vi.mock('../../../api', () => ({ safetyCheck: vi.fn(), budgetCalc: vi.fn() }));
|
||
import ToolsTab from './ToolsTab.jsx';
|
||
|
||
beforeEach(() => vi.clearAllMocks());
|
||
|
||
describe('ToolsTab', () => {
|
||
it('안전마진·예산 카드 헤딩과 disclaimer 안내를 렌더', () => {
|
||
render(<ToolsTab />);
|
||
expect(screen.getByText('안전마진 체커')).toBeInTheDocument();
|
||
expect(screen.getByText('예산 계산기')).toBeInTheDocument();
|
||
// 제출 버튼 존재
|
||
expect(screen.getAllByRole('button', { name: /판정|계산/ }).length).toBeGreaterThan(0);
|
||
});
|
||
});
|
||
```
|
||
|
||
- [ ] **Step 2: Run test to verify it fails**
|
||
|
||
Run: `npm run test:run -- src/pages/listings/components/ToolsTab.test.jsx`
|
||
Expected: FAIL — `Failed to resolve import "./ToolsTab.jsx"`.
|
||
|
||
- [ ] **Step 3: Write the component** — Create `src/pages/listings/components/ToolsTab.jsx`:
|
||
|
||
```jsx
|
||
import React, { useState } from 'react';
|
||
import { safetyCheck, budgetCalc } from '../../../api';
|
||
import { tierMeta, formatMoney, formatRatio } from '../listingsUtils';
|
||
|
||
const DEAL_TYPES = ['전세', '반전세', '매매'];
|
||
|
||
/* ── 안전마진 체커 ── */
|
||
const SafetyCard = () => {
|
||
const [form, setForm] = useState({ area: '', deal_type: '전세', amount: '', dong: '' });
|
||
const [res, setRes] = useState(null);
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState('');
|
||
const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));
|
||
|
||
const submit = async (e) => {
|
||
e.preventDefault();
|
||
if (!form.area || !form.amount) return;
|
||
setLoading(true); setError(''); setRes(null);
|
||
try {
|
||
const r = await safetyCheck({
|
||
area: Number(form.area), deal_type: form.deal_type,
|
||
amount: Number(form.amount), dong: form.dong || undefined,
|
||
});
|
||
setRes(r);
|
||
} catch (e2) { setError(e2?.message ?? String(e2)); }
|
||
finally { setLoading(false); }
|
||
};
|
||
|
||
const isSale = form.deal_type === '매매';
|
||
const meta = res ? tierMeta(isSale ? 'valuation' : 'safety', res.tier) : null;
|
||
|
||
return (
|
||
<section className="lst-panel">
|
||
<h3 className="lst-panel__title">안전마진 체커</h3>
|
||
<p className="lst-panel__sub">면적·거래유형·금액으로 전세가율/호가율 적정성을 즉시 판정합니다.</p>
|
||
<form className="lst-form" onSubmit={submit}>
|
||
<input className="lst-input" placeholder="면적(m²)" value={form.area}
|
||
onChange={(e) => set('area', e.target.value)} />
|
||
<select className="lst-input" value={form.deal_type} onChange={(e) => set('deal_type', e.target.value)}>
|
||
{DEAL_TYPES.map((d) => <option key={d} value={d}>{d}</option>)}
|
||
</select>
|
||
<input className="lst-input" placeholder="금액(만원)" value={form.amount}
|
||
onChange={(e) => set('amount', e.target.value)} />
|
||
<input className="lst-input" placeholder="동(선택)" value={form.dong}
|
||
onChange={(e) => set('dong', e.target.value)} />
|
||
<button className="lst-filter-btn is-primary" type="submit" disabled={loading || !form.area || !form.amount}>
|
||
{loading ? '판정 중…' : '판정'}
|
||
</button>
|
||
</form>
|
||
{error && <p className="lst-error">{error}</p>}
|
||
{res && (
|
||
<div className="lst-result">
|
||
<div className="lst-result__row">
|
||
<span className="lst-tier" style={{ color: meta.color }}>{meta.emoji} {meta.label}</span>
|
||
{res.ratio != null && <span>비율 {formatRatio(res.ratio)}</span>}
|
||
{res.median != null && <span>중앙값 {formatMoney(res.median)}</span>}
|
||
{res.sample != null && <span>표본 {res.sample}건</span>}
|
||
{res.is_toheo && <span className="lst-flag">토지거래허가</span>}
|
||
</div>
|
||
{res.disclaimer && <p className="lst-disclaimer">※ {res.disclaimer}</p>}
|
||
</div>
|
||
)}
|
||
</section>
|
||
);
|
||
};
|
||
|
||
/* ── 예산 계산기 ── */
|
||
const BudgetCard = () => {
|
||
const [form, setForm] = useState({
|
||
equity: '', annual_income: '', is_homeless: true, is_householder: true, is_first_home: false, target_dong: '',
|
||
});
|
||
const [res, setRes] = useState(null);
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState('');
|
||
const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));
|
||
|
||
const submit = async (e) => {
|
||
e.preventDefault();
|
||
if (!form.equity) return;
|
||
setLoading(true); setError(''); setRes(null);
|
||
try {
|
||
const r = await budgetCalc({
|
||
equity: Number(form.equity),
|
||
annual_income: form.annual_income ? Number(form.annual_income) : null,
|
||
is_homeless: form.is_homeless ? 1 : 0,
|
||
is_householder: form.is_householder ? 1 : 0,
|
||
is_first_home: form.is_first_home ? 1 : 0,
|
||
target_dong: form.target_dong || undefined,
|
||
});
|
||
setRes(r);
|
||
} catch (e2) { setError(e2?.message ?? String(e2)); }
|
||
finally { setLoading(false); }
|
||
};
|
||
|
||
return (
|
||
<section className="lst-panel">
|
||
<h3 className="lst-panel__title">예산 계산기</h3>
|
||
<p className="lst-panel__sub">자기자본·소득 기준 전세/매매 한도와 지역 규제를 계산합니다.</p>
|
||
<form className="lst-form" onSubmit={submit}>
|
||
<input className="lst-input" placeholder="자기자본(만원)" value={form.equity}
|
||
onChange={(e) => set('equity', e.target.value)} />
|
||
<input className="lst-input" placeholder="연소득(만원, 선택)" value={form.annual_income}
|
||
onChange={(e) => set('annual_income', e.target.value)} />
|
||
<input className="lst-input" placeholder="대상 동(선택)" value={form.target_dong}
|
||
onChange={(e) => set('target_dong', e.target.value)} />
|
||
<label className="lst-check"><input type="checkbox" checked={form.is_homeless}
|
||
onChange={(e) => set('is_homeless', e.target.checked)} /> 무주택</label>
|
||
<label className="lst-check"><input type="checkbox" checked={form.is_householder}
|
||
onChange={(e) => set('is_householder', e.target.checked)} /> 세대주</label>
|
||
<label className="lst-check"><input type="checkbox" checked={form.is_first_home}
|
||
onChange={(e) => set('is_first_home', e.target.checked)} /> 생애최초</label>
|
||
<button className="lst-filter-btn is-primary" type="submit" disabled={loading || !form.equity}>
|
||
{loading ? '계산 중…' : '계산'}
|
||
</button>
|
||
</form>
|
||
{error && <p className="lst-error">{error}</p>}
|
||
{res && (
|
||
<div className="lst-result">
|
||
{res.jeonse && (
|
||
<div className="lst-result__block">
|
||
<strong>전세</strong>
|
||
<span>대출한도 {formatMoney(res.jeonse.loan_limit)}</span>
|
||
<span>최대 보증금 {formatMoney(res.jeonse.max_deposit)}</span>
|
||
{res.jeonse.notes && <span className="lst-note">{res.jeonse.notes}</span>}
|
||
</div>
|
||
)}
|
||
{res.purchase && (
|
||
<div className="lst-result__block">
|
||
<strong>매매</strong>
|
||
{res.purchase.ltv_pct != null && <span>LTV {res.purchase.ltv_pct}%</span>}
|
||
<span>대출한도 {formatMoney(res.purchase.loan_cap)}</span>
|
||
<span>최대 매수가 {formatMoney(res.purchase.max_price)}</span>
|
||
{res.purchase.dsr_note && <span className="lst-note">{res.purchase.dsr_note}</span>}
|
||
{Array.isArray(res.purchase.regulation_flags) && res.purchase.regulation_flags.length > 0 && (
|
||
<div className="lst-flags">{res.purchase.regulation_flags.map((f, i) => <span key={i} className="lst-flag">{f}</span>)}</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
{res.region && (
|
||
<div className="lst-result__block">
|
||
<strong>지역</strong>
|
||
{res.region.is_toheo && <span className="lst-flag">토지거래허가</span>}
|
||
{res.region.is_regulated && <span className="lst-flag">규제지역</span>}
|
||
{res.region.notes && <span className="lst-note">{res.region.notes}</span>}
|
||
</div>
|
||
)}
|
||
{res.disclaimer && <p className="lst-disclaimer">※ {res.disclaimer}</p>}
|
||
</div>
|
||
)}
|
||
</section>
|
||
);
|
||
};
|
||
|
||
const ToolsTab = () => (
|
||
<div className="lst-tools">
|
||
<SafetyCard />
|
||
<BudgetCard />
|
||
</div>
|
||
);
|
||
|
||
export default ToolsTab;
|
||
```
|
||
|
||
- [ ] **Step 4: Run test to verify it passes**
|
||
|
||
Run: `npm run test:run -- src/pages/listings/components/ToolsTab.test.jsx`
|
||
Expected: PASS (1 케이스).
|
||
|
||
- [ ] **Step 5: Commit**
|
||
|
||
```bash
|
||
git add src/pages/listings/components/ToolsTab.jsx src/pages/listings/components/ToolsTab.test.jsx
|
||
git commit -m "feat(listings): 판정 도구 탭(안전마진 체커+예산 계산기, disclaimer) + 스모크"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 5: `CriteriaTab.jsx` (조건 편집)
|
||
|
||
**Files:**
|
||
- Create: `src/pages/listings/components/CriteriaTab.jsx`
|
||
- Test: `src/pages/listings/components/CriteriaTab.test.jsx`
|
||
|
||
**Interfaces:**
|
||
- Consumes (Task 2): `getListingsCriteria`, `putListingsCriteria`.
|
||
- Produces: `CriteriaTab` 기본 export (자립형).
|
||
|
||
- [ ] **Step 1: Write the failing smoke test** — Create `src/pages/listings/components/CriteriaTab.test.jsx`:
|
||
|
||
```jsx
|
||
import { describe, it, expect, vi, beforeEach } from 'vitest';
|
||
import { render, screen, waitFor } from '@testing-library/react';
|
||
|
||
vi.mock('../../../api', () => ({ getListingsCriteria: vi.fn(), putListingsCriteria: vi.fn() }));
|
||
import { getListingsCriteria } from '../../../api';
|
||
import CriteriaTab from './CriteriaTab.jsx';
|
||
|
||
beforeEach(() => {
|
||
vi.clearAllMocks();
|
||
getListingsCriteria.mockResolvedValue({
|
||
id: 1, dongs: ['신대방동', '상도동'], deal_types: ['전세', '매매'], max_deposit: 32000,
|
||
max_sale_price: null, min_area: 40, house_types: ['아파트'], min_safety_tier: null,
|
||
notify_enabled: 1, equity: null, annual_income: null, is_homeless: 1, is_householder: 0, is_first_home: 0,
|
||
});
|
||
});
|
||
|
||
describe('CriteriaTab', () => {
|
||
it('criteria를 로드해 자기자본·연소득 입력과 동 목록을 렌더', async () => {
|
||
render(<CriteriaTab />);
|
||
await waitFor(() => expect(screen.getByLabelText(/자기자본/)).toBeInTheDocument());
|
||
expect(screen.getByLabelText(/연소득/)).toBeInTheDocument();
|
||
expect(screen.getByDisplayValue('신대방동, 상도동')).toBeInTheDocument();
|
||
});
|
||
});
|
||
```
|
||
|
||
- [ ] **Step 2: Run test to verify it fails**
|
||
|
||
Run: `npm run test:run -- src/pages/listings/components/CriteriaTab.test.jsx`
|
||
Expected: FAIL — `Failed to resolve import "./CriteriaTab.jsx"`.
|
||
|
||
- [ ] **Step 3: Write the component** — Create `src/pages/listings/components/CriteriaTab.jsx`:
|
||
|
||
```jsx
|
||
import React, { useEffect, useState } from 'react';
|
||
import { getListingsCriteria, putListingsCriteria } from '../../../api';
|
||
|
||
const DEAL_TYPES = ['전세', '반전세', '매매'];
|
||
const HOUSE_TYPES = ['아파트', '오피스텔', '빌라'];
|
||
const SAFETY_TIERS = ['', '안전', '주의', '위험'];
|
||
|
||
const toList = (s) => String(s ?? '').split(',').map((x) => x.trim()).filter(Boolean);
|
||
const numOrNull = (v) => (v === '' || v == null ? null : Number(v));
|
||
|
||
const CriteriaTab = () => {
|
||
const [c, setC] = useState(null); // 편집 중 폼 상태 (dongs/house_types는 문자열/배열)
|
||
const [loading, setLoading] = useState(true);
|
||
const [saving, setSaving] = useState(false);
|
||
const [msg, setMsg] = useState('');
|
||
|
||
useEffect(() => {
|
||
(async () => {
|
||
setLoading(true);
|
||
try {
|
||
const data = await getListingsCriteria();
|
||
setC({ ...data, dongs: (data.dongs ?? []).join(', ') });
|
||
} catch (e) {
|
||
setMsg('불러오기 실패: ' + (e?.message ?? e));
|
||
} finally { setLoading(false); }
|
||
})();
|
||
}, []);
|
||
|
||
const set = (k, v) => setC((prev) => ({ ...prev, [k]: v }));
|
||
const toggleArr = (k, val) => setC((prev) => {
|
||
const arr = Array.isArray(prev[k]) ? prev[k] : [];
|
||
return { ...prev, [k]: arr.includes(val) ? arr.filter((x) => x !== val) : [...arr, val] };
|
||
});
|
||
|
||
const save = async () => {
|
||
setSaving(true); setMsg('');
|
||
try {
|
||
const payload = {
|
||
dongs: toList(c.dongs),
|
||
deal_types: c.deal_types ?? [],
|
||
house_types: c.house_types ?? [],
|
||
max_deposit: numOrNull(c.max_deposit),
|
||
max_sale_price: numOrNull(c.max_sale_price),
|
||
min_area: numOrNull(c.min_area),
|
||
equity: numOrNull(c.equity),
|
||
annual_income: numOrNull(c.annual_income),
|
||
min_safety_tier: c.min_safety_tier || null,
|
||
notify_enabled: c.notify_enabled ? 1 : 0,
|
||
is_homeless: c.is_homeless ? 1 : 0,
|
||
is_householder: c.is_householder ? 1 : 0,
|
||
is_first_home: c.is_first_home ? 1 : 0,
|
||
};
|
||
const updated = await putListingsCriteria(payload);
|
||
setC({ ...updated, dongs: (updated.dongs ?? []).join(', ') });
|
||
setMsg('저장 완료');
|
||
setTimeout(() => setMsg(''), 2000);
|
||
} catch (e) {
|
||
setMsg('저장 실패: ' + (e?.message ?? e));
|
||
} finally { setSaving(false); }
|
||
};
|
||
|
||
if (loading || !c) return <p className="lst-empty">불러오는 중…</p>;
|
||
|
||
return (
|
||
<section className="lst-panel">
|
||
<div className="lst-panel__head">
|
||
<div>
|
||
<h3 className="lst-panel__title">매물 매칭 조건</h3>
|
||
<p className="lst-panel__sub">자기자본·연소득을 넣어야 매매 예산상한·전세 max_deposit이 매칭에 반영됩니다.</p>
|
||
</div>
|
||
<div className="lst-panel__actions">
|
||
{msg && <span className={msg.startsWith('저장 완료') ? 'lst-ok' : 'lst-error'}>{msg}</span>}
|
||
<button className="lst-filter-btn is-primary" onClick={save} disabled={saving}>
|
||
{saving ? '저장 중…' : '저장'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="lst-criteria">
|
||
<label className="lst-field">
|
||
<span>관심 동 (쉼표 구분)</span>
|
||
<input className="lst-input" value={c.dongs} onChange={(e) => set('dongs', e.target.value)} />
|
||
</label>
|
||
|
||
<div className="lst-field">
|
||
<span>거래 유형</span>
|
||
<div className="lst-chks">
|
||
{DEAL_TYPES.map((d) => (
|
||
<label key={d} className="lst-check"><input type="checkbox"
|
||
checked={(c.deal_types ?? []).includes(d)} onChange={() => toggleArr('deal_types', d)} /> {d}</label>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="lst-field">
|
||
<span>주택 유형</span>
|
||
<div className="lst-chks">
|
||
{HOUSE_TYPES.map((h) => (
|
||
<label key={h} className="lst-check"><input type="checkbox"
|
||
checked={(c.house_types ?? []).includes(h)} onChange={() => toggleArr('house_types', h)} /> {h}</label>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<label className="lst-field">
|
||
<span>전세 최대 보증금 (만원)</span>
|
||
<input className="lst-input" value={c.max_deposit ?? ''} onChange={(e) => set('max_deposit', e.target.value)} />
|
||
</label>
|
||
<label className="lst-field">
|
||
<span>매매 예산 상한 (만원)</span>
|
||
<input className="lst-input" value={c.max_sale_price ?? ''} onChange={(e) => set('max_sale_price', e.target.value)} />
|
||
</label>
|
||
<label className="lst-field">
|
||
<span>최소 면적 (m²)</span>
|
||
<input className="lst-input" value={c.min_area ?? ''} onChange={(e) => set('min_area', e.target.value)} />
|
||
</label>
|
||
<label className="lst-field">
|
||
<span>자기자본 (만원)</span>
|
||
<input className="lst-input" value={c.equity ?? ''} onChange={(e) => set('equity', e.target.value)} />
|
||
</label>
|
||
<label className="lst-field">
|
||
<span>연소득 (만원)</span>
|
||
<input className="lst-input" value={c.annual_income ?? ''} onChange={(e) => set('annual_income', e.target.value)} />
|
||
</label>
|
||
<label className="lst-field">
|
||
<span>최소 안전등급</span>
|
||
<select className="lst-input" value={c.min_safety_tier ?? ''} onChange={(e) => set('min_safety_tier', e.target.value)}>
|
||
{SAFETY_TIERS.map((t) => <option key={t} value={t}>{t || '제한 없음'}</option>)}
|
||
</select>
|
||
</label>
|
||
|
||
<div className="lst-field lst-field--chks">
|
||
<label className="lst-check"><input type="checkbox" checked={!!c.is_homeless}
|
||
onChange={(e) => set('is_homeless', e.target.checked)} /> 무주택</label>
|
||
<label className="lst-check"><input type="checkbox" checked={!!c.is_householder}
|
||
onChange={(e) => set('is_householder', e.target.checked)} /> 세대주</label>
|
||
<label className="lst-check"><input type="checkbox" checked={!!c.is_first_home}
|
||
onChange={(e) => set('is_first_home', e.target.checked)} /> 생애최초</label>
|
||
<label className="lst-check"><input type="checkbox" checked={!!c.notify_enabled}
|
||
onChange={(e) => set('notify_enabled', e.target.checked)} /> 텔레그램 알림</label>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
);
|
||
};
|
||
|
||
export default CriteriaTab;
|
||
```
|
||
|
||
- [ ] **Step 4: Run test to verify it passes**
|
||
|
||
Run: `npm run test:run -- src/pages/listings/components/CriteriaTab.test.jsx`
|
||
Expected: PASS (1 케이스).
|
||
|
||
- [ ] **Step 5: Commit**
|
||
|
||
```bash
|
||
git add src/pages/listings/components/CriteriaTab.jsx src/pages/listings/components/CriteriaTab.test.jsx
|
||
git commit -m "feat(listings): 조건 편집 탭(equity·소득 포함 부분 PUT) + 스모크"
|
||
```
|
||
|
||
---
|
||
|
||
### Task 6: `Listings` shell + 스타일 + 라우팅 배선 + 문서
|
||
|
||
**Files:**
|
||
- Create: `src/pages/listings/Listings.jsx`
|
||
- Create: `src/pages/listings/Listings.css`
|
||
- Modify: `src/routes.jsx` (lazy import + appRoutes 항목)
|
||
- Modify: `src/pages/subscription/Subscription.jsx` (헤더에 "실매물 →" 링크 — 안전한 최소 삽입)
|
||
- Modify: `CLAUDE.md` (web-ui 루트, 페이지 구조 표 + API 표)
|
||
- Test: `src/pages/listings/Listings.test.jsx`
|
||
|
||
**Interfaces:**
|
||
- Consumes (Task 3/4/5): `ListingsTab`, `ToolsTab`, `CriteriaTab`.
|
||
- Produces: `Listings` 기본 export (라우트 엘리먼트).
|
||
|
||
- [ ] **Step 1: Write the failing smoke test** — Create `src/pages/listings/Listings.test.jsx`:
|
||
|
||
```jsx
|
||
import { describe, it, expect, vi } from 'vitest';
|
||
import { render, screen, fireEvent } from '@testing-library/react';
|
||
|
||
vi.mock('./components/ListingsTab.jsx', () => ({ default: () => <div>LISTINGS_TAB</div> }));
|
||
vi.mock('./components/ToolsTab.jsx', () => ({ default: () => <div>TOOLS_TAB</div> }));
|
||
vi.mock('./components/CriteriaTab.jsx', () => ({ default: () => <div>CRITERIA_TAB</div> }));
|
||
vi.mock('react-router-dom', () => ({ Link: ({ children }) => <a>{children}</a> }));
|
||
import Listings from './Listings.jsx';
|
||
|
||
describe('Listings', () => {
|
||
it('기본 매물 탭 렌더 + 탭 전환', () => {
|
||
render(<Listings />);
|
||
expect(screen.getByText('LISTINGS_TAB')).toBeInTheDocument();
|
||
fireEvent.click(screen.getByRole('button', { name: '판정 도구' }));
|
||
expect(screen.getByText('TOOLS_TAB')).toBeInTheDocument();
|
||
fireEvent.click(screen.getByRole('button', { name: '조건' }));
|
||
expect(screen.getByText('CRITERIA_TAB')).toBeInTheDocument();
|
||
});
|
||
});
|
||
```
|
||
|
||
- [ ] **Step 2: Run test to verify it fails**
|
||
|
||
Run: `npm run test:run -- src/pages/listings/Listings.test.jsx`
|
||
Expected: FAIL — `Failed to resolve import "./Listings.jsx"`.
|
||
|
||
- [ ] **Step 3: Write the shell** — Create `src/pages/listings/Listings.jsx`:
|
||
|
||
```jsx
|
||
import React, { useState } from 'react';
|
||
import { Link } from 'react-router-dom';
|
||
import ListingsTab from './components/ListingsTab';
|
||
import ToolsTab from './components/ToolsTab';
|
||
import CriteriaTab from './components/CriteriaTab';
|
||
import './Listings.css';
|
||
|
||
const TABS = [
|
||
{ id: 'listings', label: '매물' },
|
||
{ id: 'tools', label: '판정 도구' },
|
||
{ id: 'criteria', label: '조건' },
|
||
];
|
||
|
||
const Listings = () => {
|
||
const [tab, setTab] = useState('listings');
|
||
return (
|
||
<div className="lst">
|
||
<header className="lst-header">
|
||
<div>
|
||
<p className="lst-kicker">실매물 · 안전마진</p>
|
||
<h1>매물 · 안전마진</h1>
|
||
<p className="lst-sub">매매/전세 실매물 수집 · 전세가율·호가율 판정 · 예산 계산.</p>
|
||
</div>
|
||
<Link className="lst-filter-btn" to="/realestate">청약으로 →</Link>
|
||
</header>
|
||
|
||
<div className="lst-tabbar">
|
||
{TABS.map((t) => (
|
||
<button key={t.id} type="button"
|
||
className={`lst-tabbtn ${tab === t.id ? 'is-active' : ''}`}
|
||
onClick={() => setTab(t.id)}>{t.label}</button>
|
||
))}
|
||
</div>
|
||
|
||
{tab === 'listings' && <ListingsTab />}
|
||
{tab === 'tools' && <ToolsTab />}
|
||
{tab === 'criteria' && <CriteriaTab />}
|
||
|
||
<p className="lst-foot-disclaimer">
|
||
※ 모든 판정·계산은 참고용 근사치입니다. 등기부 선순위·토지거래허가·정책 수치는 반드시 원문/전문가로 확인하세요.
|
||
</p>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default Listings;
|
||
```
|
||
|
||
- [ ] **Step 4: Write the stylesheet** — Create `src/pages/listings/Listings.css`:
|
||
|
||
```css
|
||
/* 실매물 매물·안전마진 (lst-*) — Subscription 다크 토큰 재사용 */
|
||
.lst { display: grid; gap: 18px; padding: 20px; max-width: 1100px; margin: 0 auto; }
|
||
.lst-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
|
||
.lst-kicker { margin: 0 0 4px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #f43f5e; }
|
||
.lst-header h1 { margin: 0; font-size: 24px; color: var(--text-bright); }
|
||
.lst-sub { margin: 6px 0 0; color: var(--text-muted); font-size: 13px; }
|
||
|
||
.lst-tabbar { display: flex; gap: 6px; border-bottom: 1px solid var(--line); }
|
||
.lst-tabbtn { border: none; background: none; color: var(--text-dim); padding: 10px 16px; cursor: pointer; font-size: 14px; border-bottom: 2px solid transparent; }
|
||
.lst-tabbtn.is-active { color: var(--text-bright); border-bottom-color: #f43f5e; }
|
||
|
||
.lst-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
|
||
.lst-toolbar__right { display: flex; gap: 6px; }
|
||
.lst-filter { display: flex; gap: 4px; flex-wrap: wrap; }
|
||
.lst-filter-btn { border: 1px solid var(--line); background: var(--surface); color: var(--text-dim); border-radius: 8px; padding: 6px 12px; font-size: 12px; cursor: pointer; text-decoration: none; }
|
||
.lst-filter-btn.is-active { color: var(--text-bright); border-color: #f43f5e; }
|
||
.lst-filter-btn.is-primary { color: #fff; background: #f43f5e; border-color: #f43f5e; }
|
||
.lst-filter-btn:disabled { opacity: 0.5; cursor: default; }
|
||
|
||
.lst-status { font-size: 12px; color: var(--text-muted); margin: 0; }
|
||
.lst-error { color: #f9b6b1; border: 1px solid rgba(249,182,177,0.4); border-radius: 12px; padding: 10px; background: rgba(249,182,177,0.1); margin: 0; font-size: 13px; }
|
||
.lst-ok { color: #34d399; font-size: 12px; }
|
||
.lst-empty { color: var(--text-muted); text-align: center; padding: 32px 0; }
|
||
|
||
.lst-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
|
||
.lst-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; display: grid; gap: 6px; }
|
||
.lst-card__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
|
||
.lst-tier { font-size: 12px; font-weight: 700; }
|
||
.lst-card__name { font-size: 14px; color: var(--text-bright); }
|
||
.lst-card__deal { font-size: 11px; color: #60a5fa; }
|
||
.lst-card__dong { font-size: 11px; color: var(--text-muted); }
|
||
.lst-card__body { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-dim); }
|
||
.lst-card__price { color: #f59e0b; font-weight: 600; }
|
||
.lst-card__reasons { font-size: 11px; color: var(--text-muted); }
|
||
.lst-flags { display: flex; gap: 4px; flex-wrap: wrap; }
|
||
.lst-flag { font-size: 10px; padding: 2px 6px; border-radius: 4px; background: rgba(244,63,94,0.12); color: #f87171; }
|
||
|
||
.lst-tools { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
|
||
.lst-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; display: grid; gap: 10px; }
|
||
.lst-panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
|
||
.lst-panel__actions { display: flex; gap: 8px; align-items: center; }
|
||
.lst-panel__title { margin: 0; font-size: 15px; color: var(--text-bright); }
|
||
.lst-panel__sub { margin: 0; font-size: 12px; color: var(--text-muted); }
|
||
.lst-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
|
||
.lst-input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-raised); color: inherit; font-size: 13px; min-width: 100px; flex: 1 1 100px; }
|
||
.lst-check { font-size: 12px; color: var(--text-dim); display: inline-flex; gap: 4px; align-items: center; }
|
||
.lst-chks { display: flex; gap: 12px; flex-wrap: wrap; }
|
||
.lst-result { display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
|
||
.lst-result__row { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; align-items: center; }
|
||
.lst-result__block { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 13px; }
|
||
.lst-result__block strong { color: var(--text-bright); }
|
||
.lst-note { font-size: 11px; color: var(--text-muted); }
|
||
.lst-disclaimer { font-size: 11px; color: #cbd5e1; margin: 0; line-height: 1.45; }
|
||
|
||
.lst-criteria { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
|
||
.lst-field { display: grid; gap: 4px; font-size: 12px; color: var(--text-dim); }
|
||
.lst-field > span { font-size: 11px; color: var(--text-muted); }
|
||
.lst-field--chks { grid-column: 1 / -1; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
|
||
|
||
.lst-foot-disclaimer { font-size: 11px; color: #64748b; text-align: center; margin: 8px 0 0; }
|
||
|
||
@media (max-width: 640px) {
|
||
.lst { padding: 12px; }
|
||
.lst-tools { grid-template-columns: 1fr; }
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 5: Wire the route** — `src/routes.jsx`:
|
||
|
||
(a) 상단 lazy import 블록에 (다른 `const X = lazy(...)` 근처, 예: `Subscription` import 뒤) 추가:
|
||
```js
|
||
const Listings = lazy(() => import('./pages/listings/Listings'));
|
||
```
|
||
(b) `appRoutes` 배열의 `{ path: 'realestate', element: <Subscription /> },` 바로 뒤에 추가:
|
||
```js
|
||
{
|
||
path: 'realestate/listings',
|
||
element: <Listings />,
|
||
},
|
||
```
|
||
|
||
- [ ] **Step 6: Add cross-link in Subscription** — `src/pages/subscription/Subscription.jsx`:
|
||
|
||
`import { apiGet, apiPost, apiPut, apiDelete } from '../../api';` 뒤(파일 상단 import 블록)에 추가:
|
||
```js
|
||
import { Link } from 'react-router-dom';
|
||
```
|
||
그리고 `const TABS = ['대시보드', '공고 목록', '매칭 결과', '내 프로필'];` 를 사용하는 최상위 탭바 렌더 지점에 "실매물" 링크를 넣기 어려우면(파일이 큼), **최소 침습**으로: 메인 반환 JSX 최상단(페이지 컨테이너 여는 태그 직후)에 아래 배너 한 줄을 추가. 정확한 앵커는 `return (` 이후 첫 번째 최상위 `<div` 자식 시작 지점. 구현자는 파일을 읽고 페이지 헤더 영역을 찾아 삽입:
|
||
```jsx
|
||
<div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 8 }}>
|
||
<Link to="/realestate/listings" style={{ fontSize: 12, color: '#f43f5e', textDecoration: 'none' }}>
|
||
실매물 · 안전마진 →
|
||
</Link>
|
||
</div>
|
||
```
|
||
> 앵커를 확실히 못 찾으면 이 링크 삽입은 생략하고 report에 남길 것(라우트는 Task 6 Step 5로 이미 접근 가능). Listings→청약 링크는 shell에 이미 있음.
|
||
|
||
- [ ] **Step 7: Run tests + lint + build**
|
||
|
||
Run: `npm run test:run`
|
||
Expected: 전체 통과 (신규 5개 테스트 파일 포함), 기존 회귀 없음. 통과 수 기록.
|
||
|
||
Run: `npm run lint`
|
||
Expected: 신규 파일 관련 에러 0 (기존 사전 경고 무시).
|
||
|
||
Run: `npm run build`
|
||
Expected: `✓ built` 성공.
|
||
|
||
- [ ] **Step 8: Update `web-ui/CLAUDE.md`** — 페이지 구조 표에 행 추가(`/realestate/property` 행 근처):
|
||
```markdown
|
||
| `/realestate/listings` | `Listings` | 실매물 매매/전세 — 매물 목록+판정 tier / 안전마진 체커·예산 계산기 / 조건 편집 (3탭) |
|
||
```
|
||
API 엔드포인트 표에 realestate listings 8행 추가(부동산 섹션 근처):
|
||
```markdown
|
||
| 부동산-매물 | GET | `/api/realestate/listings?dong=&deal_type=&tier=&matched_only=&page=&size=` — { listings: [...] } |
|
||
| 부동산-매물 | POST/GET | `/api/realestate/listings/collect`, `/collect/status` |
|
||
| 부동산-매물 | GET/PUT | `/api/realestate/listings/criteria` (부분 업데이트) |
|
||
| 부동산-매물 | GET | `/api/realestate/listings/matches` — { matches: [...] } |
|
||
| 부동산-안전마진 | POST | `/api/realestate/safety-check` — body { area, deal_type, amount(만원), dong? } → { median, ratio, tier, sample, is_toheo, disclaimer } |
|
||
| 부동산-예산 | POST | `/api/realestate/budget` — body { equity, annual_income, is_homeless, is_householder, is_first_home, target_dong? } → { jeonse, purchase, region, disclaimer } |
|
||
```
|
||
|
||
- [ ] **Step 9: Commit**
|
||
|
||
```bash
|
||
git add src/pages/listings/Listings.jsx src/pages/listings/Listings.css src/pages/listings/Listings.test.jsx src/routes.jsx src/pages/subscription/Subscription.jsx CLAUDE.md
|
||
git commit -m "feat(listings): Listings shell+스타일+라우트 배선 + 청약 교차링크 + 문서"
|
||
```
|
||
|
||
- [ ] **Step 10: Manual verification (dev server)**
|
||
|
||
`npm run dev` → `http://localhost:3007/realestate/listings` 접속. 3탭(매물/판정도구/조건) 전환, 조건 탭 로드(criteria 200), 안전마진·예산 폼 제출 → disclaimer 노출 확인. 매물은 수집 전이라 빈 상태 안내가 정상. (수집 실행 후 실데이터로 매물 카드 필드 확인 — 필요 시 후속 조정.)
|
||
|
||
---
|
||
|
||
## Self-Review 결과
|
||
|
||
**Spec coverage** (설계 §1–§10):
|
||
- §2 계약 8종 → Task 2 ✅
|
||
- §3 라우팅·교차링크 → Task 6 ✅
|
||
- §4 컴포넌트 구조(utils+3탭+shell) → Task 1/3/4/5/6 ✅
|
||
- §5 API 레이어 → Task 2 ✅
|
||
- §6 안전장치(disclaimer·보류·배열 그대로·방어적 파싱) → Task 3(ListingCard)·Task 4(disclaimer)·Task 5 ✅
|
||
- §7 스타일 lst-* → Task 6 ✅
|
||
- §8 테스트 → Task 1(utils)·Task 3/4/5/6(스모크) ✅
|
||
- §9 완료 기준 → Task 6 Step 7·10 ✅
|
||
- §10 리스크(매물 아이템 방어적 렌더) → Task 3 ListingCard 옵셔널 필드 ✅
|
||
|
||
**Placeholder scan:** 모든 코드/명령/기대출력 구체값. Task 6 Step 6의 Subscription 링크 앵커는 "못 찾으면 생략+report"로 명시(플레이스홀더 아님, 안전 폴백). ✅
|
||
|
||
**Type consistency:** `tierMeta(kind,tier)`/`formatMoney`/`formatRatio`(Task1) ↔ Task3/4 사용 일치. api 헬퍼 8종(Task2) ↔ Task3/4/5 import 일치. `ListingsTab`/`ToolsTab`/`CriteriaTab` 기본 export ↔ Task6 shell import 일치. ✅
|
||
|
||
**참고 — routes.jsx/Subscription 라인:** 근사치. 실제 편집은 앵커 문자열로 확인 후 삽입.
|