부동산 정보 페이지 추가

src/components/Icons.jsx

@@ -71,3 +71,27 @@ export const IconTodo = () =>
             <line x1="17" y1="12" x2="21" y2="12" />
         </>
     );
+
+export const IconSubscription = () =>
+    svg(
+        <>
+            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+            <polyline points="14,2 14,8 20,8" />
+            <polyline points="9,15 11,17 15,13" />
+            <line x1="9" y1="10" x2="15" y2="10" />
+        </>
+    );
+
+export const IconBuilding = () =>
+    svg(
+        <>
+            <rect x="3" y="3" width="18" height="18" rx="2" />
+            <path d="M9 21V9" />
+            <rect x="6" y="6" width="3" height="3" />
+            <rect x="11" y="6" width="3" height="3" />
+            <rect x="16" y="6" width="2" height="3" />
+            <rect x="11" y="11" width="3" height="3" />
+            <rect x="16" y="11" width="2" height="3" />
+            <rect x="11" y="16" width="3" height="3" />
+        </>
+    );

src/index.css

@@ -82,12 +82,15 @@
     --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
 
     /* ── Page Accent Colors ──────────────────────────────────────────── */
-    --accent-home:   #00d4ff;
-    --accent-blog:   #c084fc;
-    --accent-lotto:  #34d399;
-    --accent-stock:  #38bdf8;
-    --accent-travel: #fb923c;
-    --accent-lab:    #fbbf24;
+    --accent-home:        #00d4ff;
+    --accent-blog:        #c084fc;
+    --accent-lotto:       #34d399;
+    --accent-stock:       #38bdf8;
+    --accent-realestate:    #f43f5e;
+    --accent-subscription:  #f43f5e;
+    --accent-todo:          #f472b6;
+    --accent-travel:      #fb923c;
+    --accent-lab:         #fbbf24;
 
     /* ── Convenience alias ───────────────────────────────────────────── */
     --accent: var(--neon-cyan);

src/pages/realestate/RealEstate.jsx

@@ -0,0 +1,909 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import { Link } from 'react-router-dom';
+import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
+import L from 'leaflet';
+import {
+    BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip,
+    ResponsiveContainer, Cell,
+} from 'recharts';
+import { apiGet, apiPost, apiPut, apiDelete } from '../../api';
+import 'leaflet/dist/leaflet.css';
+import './RealEstate.css';
+
+// ── 샘플 데이터 ────────────────────────────────────────────────────────────────
+const SAMPLE_COMPLEXES = [
+    {
+        id: 1,
+        name: '래미안 원베일리',
+        address: '서울 서초구 반포동',
+        lat: 37.5065,
+        lng: 126.9942,
+        units: 2990,
+        types: ['59㎡', '84㎡', '114㎡'],
+        avgPricePerPyeong: 9500,
+        subscriptionStart: '2024-01-08',
+        subscriptionEnd: '2024-01-10',
+        resultDate: '2024-01-15',
+        status: '완료',
+        priority: 'high',
+        tags: ['강남권', '한강뷰', '역세권', '브랜드'],
+        naverUrl: '',
+        floorPlanUrl: '',
+        memo: '반포동 재건축 단지. 경쟁률 수백대 1 예상.',
+    },
+    {
+        id: 2,
+        name: '올림픽파크 포레온',
+        address: '서울 강동구 둔촌동',
+        lat: 37.5284,
+        lng: 127.1340,
+        units: 12032,
+        types: ['39㎡', '49㎡', '59㎡', '84㎡'],
+        avgPricePerPyeong: 3800,
+        subscriptionStart: '2022-12-05',
+        subscriptionEnd: '2022-12-07',
+        resultDate: '2022-12-12',
+        status: '완료',
+        priority: 'high',
+        tags: ['대단지', '역세권', '재건축'],
+        naverUrl: '',
+        floorPlanUrl: '',
+        memo: '역대 최대 규모 재건축 단지.',
+    },
+    {
+        id: 3,
+        name: '힐스테이트 동탄',
+        address: '경기 화성시 동탄2신도시',
+        lat: 37.2001,
+        lng: 127.0724,
+        units: 1534,
+        types: ['59㎡', '74㎡', '84㎡'],
+        avgPricePerPyeong: 1850,
+        subscriptionStart: '2026-04-10',
+        subscriptionEnd: '2026-04-12',
+        resultDate: '2026-04-17',
+        status: '청약예정',
+        priority: 'normal',
+        tags: ['동탄2', '신도시', 'SRT'],
+        naverUrl: '',
+        floorPlanUrl: '',
+        memo: '동탄 핵심 입지. 교통 개선 기대.',
+    },
+    {
+        id: 4,
+        name: '롯데캐슬 마곡',
+        address: '서울 강서구 마곡동',
+        lat: 37.5626,
+        lng: 126.8295,
+        units: 868,
+        types: ['59㎡', '84㎡'],
+        avgPricePerPyeong: 4200,
+        subscriptionStart: '2026-03-20',
+        subscriptionEnd: '2026-03-22',
+        resultDate: '2026-03-27',
+        status: '청약중',
+        priority: 'high',
+        tags: ['마곡', '9호선', '공항철도'],
+        naverUrl: '',
+        floorPlanUrl: '',
+        memo: '마곡 업무지구 직주근접. 강서 핵심 입지.',
+    },
+];
+
+const STATUS_CONFIG = {
+    '청약예정': { color: '#00d4ff', bg: 'rgba(0,212,255,0.12)' },
+    '청약중':   { color: '#34d399', bg: 'rgba(52,211,153,0.12)' },
+    '결과발표': { color: '#f59e0b', bg: 'rgba(245,158,11,0.12)' },
+    '완료':     { color: '#6b7280', bg: 'rgba(107,114,128,0.10)' },
+};
+
+const PRIORITY_LABELS = { high: '★ 최우선', normal: '보통', low: '낮음' };
+
+const EMPTY_FORM = {
+    name: '', address: '', lat: '', lng: '',
+    units: '', types: '', avgPricePerPyeong: '',
+    subscriptionStart: '', subscriptionEnd: '', resultDate: '',
+    status: '청약예정', priority: 'normal',
+    tags: '', naverUrl: '', floorPlanUrl: '', memo: '',
+};
+
+const TABS = ['목록', '일정', '분석'];
+
+// ── 유틸 함수 ──────────────────────────────────────────────────────────────────
+const formatDate = (d) => {
+    if (!d) return '-';
+    return new Date(d).toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric' });
+};
+
+const formatPrice = (v) => {
+    if (!v) return '-';
+    return `${v.toLocaleString()}만원`;
+};
+
+const getDDays = (dateStr) => {
+    if (!dateStr) return null;
+    const target = new Date(dateStr);
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    target.setHours(0, 0, 0, 0);
+    const diff = Math.ceil((target - today) / (1000 * 60 * 60 * 24));
+    if (diff === 0) return 'D-Day';
+    if (diff > 0) return `D-${diff}`;
+    return `D+${Math.abs(diff)}`;
+};
+
+const createMarkerIcon = (status, isSelected = false) => {
+    const cfg = STATUS_CONFIG[status] || STATUS_CONFIG['완료'];
+    const size = isSelected ? 18 : 12;
+    return L.divIcon({
+        className: '',
+        html: `<div style="
+            width:${size}px;height:${size}px;border-radius:50%;
+            background:${cfg.color};
+            box-shadow:0 0 ${isSelected ? 16 : 8}px ${cfg.color};
+            border:2px solid rgba(255,255,255,${isSelected ? 0.6 : 0.25});
+            transition:all 0.2s;
+        "></div>`,
+        iconSize: [size, size],
+        iconAnchor: [size / 2, size / 2],
+        popupAnchor: [0, -(size / 2 + 4)],
+    });
+};
+
+// ── 지도 중심 이동 (react-leaflet 내부 훅) ────────────────────────────────────
+const MapFlyTo = ({ position, zoom }) => {
+    const map = useMap();
+    useEffect(() => {
+        if (position) {
+            map.flyTo(position, zoom ?? 14, { duration: 1.0 });
+        }
+    }, [position, zoom, map]);
+    return null;
+};
+
+// ── 단지 카드 ──────────────────────────────────────────────────────────────────
+const ComplexCard = ({ complex, isSelected, onClick }) => {
+    const cfg = STATUS_CONFIG[complex.status] || STATUS_CONFIG['완료'];
+    const dday = getDDays(complex.subscriptionStart);
+    const isUpcoming = complex.status === '청약예정' || complex.status === '청약중';
+
+    return (
+        <div className={`re-card ${isSelected ? 'is-selected' : ''}`} onClick={onClick}>
+            <div className="re-card__top">
+                <span className="re-badge" style={{ color: cfg.color, background: cfg.bg }}>
+                    {complex.status}
+                </span>
+                {complex.priority === 'high' && <span className="re-priority-star">★</span>}
+            </div>
+            <h3 className="re-card__name">{complex.name}</h3>
+            <p className="re-card__address">{complex.address}</p>
+            <div className="re-card__stats">
+                <span>{complex.units.toLocaleString()}세대</span>
+                <span className="re-card__dot">·</span>
+                <span style={{ color: '#f59e0b' }}>{formatPrice(complex.avgPricePerPyeong)}/평</span>
+            </div>
+            <div className="re-chip-group">
+                {complex.types.map((t) => (
+                    <span key={t} className="re-chip">{t}</span>
+                ))}
+            </div>
+            {isUpcoming && dday && (
+                <div className="re-card__dday" style={{ color: cfg.color }}>
+                    청약 {dday}
+                </div>
+            )}
+        </div>
+    );
+};
+
+// ── 인라인 지도 + 단지 상세 패널 ──────────────────────────────────────────────
+const RightPanel = ({ complexes, selectedComplex, onSelectComplex, onEdit, onDelete }) => {
+    const cfg = selectedComplex
+        ? STATUS_CONFIG[selectedComplex.status] || STATUS_CONFIG['완료']
+        : null;
+
+    const mapCenter = useMemo(() => {
+        if (selectedComplex) return [selectedComplex.lat, selectedComplex.lng];
+        if (complexes.length === 0) return [37.5665, 126.9780];
+        return [
+            complexes.reduce((s, c) => s + c.lat, 0) / complexes.length,
+            complexes.reduce((s, c) => s + c.lng, 0) / complexes.length,
+        ];
+    }, []); // 초기 중심값만 계산 (flyTo로 이후 이동)
+
+    return (
+        <div className="re-right-panel">
+            {/* ── 지도 ── */}
+            <div className="re-panel re-panel--map">
+                <div className="re-mini-map-wrap">
+                    <MapContainer
+                        key="inline-map"
+                        center={mapCenter}
+                        zoom={10}
+                        className="re-map"
+                        scrollWheelZoom
+                        zoomControl={false}
+                    >
+                        <MapFlyTo
+                            position={selectedComplex ? [selectedComplex.lat, selectedComplex.lng] : null}
+                            zoom={14}
+                        />
+                        <TileLayer
+                            url="https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png"
+                            attribution='&copy; <a href="https://carto.com">CartoDB</a>'
+                        />
+                        {complexes.map((c) => (
+                            <Marker
+                                key={c.id}
+                                position={[c.lat, c.lng]}
+                                icon={createMarkerIcon(c.status, selectedComplex?.id === c.id)}
+                                eventHandlers={{ click: () => onSelectComplex(c) }}
+                            >
+                                <Popup>
+                                    <div className="re-popup">
+                                        <strong>{c.name}</strong>
+                                        <span>{c.address}</span>
+                                        <span>{c.status} · {c.units.toLocaleString()}세대</span>
+                                        <span>{formatPrice(c.avgPricePerPyeong)}/평</span>
+                                    </div>
+                                </Popup>
+                            </Marker>
+                        ))}
+                    </MapContainer>
+                    {selectedComplex && (
+                        <div className="re-map-label">
+                            <span style={{ color: cfg.color }}>●</span> {selectedComplex.name}
+                        </div>
+                    )}
+                </div>
+            </div>
+
+            {/* ── 상세 패널 ── */}
+            {selectedComplex ? (
+                <div className="re-detail" key={selectedComplex.id}>
+                    <div className="re-detail__header">
+                        <div>
+                            <span className="re-badge re-badge--lg" style={{ color: cfg.color, background: cfg.bg }}>
+                                {selectedComplex.status}
+                            </span>
+                            <h2 className="re-detail__name">{selectedComplex.name}</h2>
+                            <p className="re-detail__address">{selectedComplex.address}</p>
+                        </div>
+                        <div className="re-detail__header-actions">
+                            <button className="button ghost small" onClick={onEdit}>편집</button>
+                            <button className="button danger small" onClick={onDelete}>삭제</button>
+                        </div>
+                    </div>
+
+                    <div className="re-detail__section">
+                        <div className="re-detail__stats-grid">
+                            <div className="re-stat">
+                                <p className="re-stat__label">세대수</p>
+                                <p className="re-stat__value">{selectedComplex.units.toLocaleString()}</p>
+                            </div>
+                            <div className="re-stat">
+                                <p className="re-stat__label">평당가</p>
+                                <p className="re-stat__value" style={{ color: '#f59e0b' }}>
+                                    {formatPrice(selectedComplex.avgPricePerPyeong)}
+                                </p>
+                            </div>
+                            <div className="re-stat">
+                                <p className="re-stat__label">우선순위</p>
+                                <p className="re-stat__value" style={{ fontSize: 13 }}>
+                                    {PRIORITY_LABELS[selectedComplex.priority]}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="re-detail__section">
+                        <p className="re-detail__section-title">평형대</p>
+                        <div className="re-chip-group">
+                            {selectedComplex.types.map((t) => (
+                                <span key={t} className="re-chip re-chip--lg">{t}</span>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className="re-detail__section">
+                        <p className="re-detail__section-title">청약 일정</p>
+                        <div className="re-timeline">
+                            <div className="re-timeline__item">
+                                <div className="re-timeline__dot re-timeline__dot--start" />
+                                <div>
+                                    <p className="re-timeline__label">청약 시작</p>
+                                    <p className="re-timeline__date">{formatDate(selectedComplex.subscriptionStart)}</p>
+                                </div>
+                            </div>
+                            <div className="re-timeline__item">
+                                <div className="re-timeline__dot" />
+                                <div>
+                                    <p className="re-timeline__label">청약 마감</p>
+                                    <p className="re-timeline__date">{formatDate(selectedComplex.subscriptionEnd)}</p>
+                                </div>
+                            </div>
+                            <div className="re-timeline__item">
+                                <div className="re-timeline__dot re-timeline__dot--result" />
+                                <div>
+                                    <p className="re-timeline__label">당첨 발표</p>
+                                    <p className="re-timeline__date">{formatDate(selectedComplex.resultDate)}</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    {selectedComplex.tags.length > 0 && (
+                        <div className="re-detail__section">
+                            <p className="re-detail__section-title">특징</p>
+                            <div className="re-chip-group">
+                                {selectedComplex.tags.map((tag) => (
+                                    <span key={tag} className="re-chip re-chip--tag">{tag}</span>
+                                ))}
+                            </div>
+                        </div>
+                    )}
+
+                    {selectedComplex.memo && (
+                        <div className="re-detail__section">
+                            <p className="re-detail__section-title">메모</p>
+                            <p className="re-detail__memo">{selectedComplex.memo}</p>
+                        </div>
+                    )}
+
+                    <div className="re-detail__actions">
+                        {selectedComplex.naverUrl ? (
+                            <a href={selectedComplex.naverUrl} target="_blank" rel="noreferrer" className="button primary small">
+                                네이버 부동산 →
+                            </a>
+                        ) : (
+                            <a
+                                href={`https://new.land.naver.com/search?query=${encodeURIComponent(selectedComplex.name)}`}
+                                target="_blank"
+                                rel="noreferrer"
+                                className="button ghost small"
+                            >
+                                네이버 검색 →
+                            </a>
+                        )}
+                        {selectedComplex.floorPlanUrl && (
+                            <a href={selectedComplex.floorPlanUrl} target="_blank" rel="noreferrer" className="button ghost small">
+                                평면도 보기
+                            </a>
+                        )}
+                    </div>
+                </div>
+            ) : (
+                <div className="re-detail re-detail--empty">
+                    <div className="re-detail__empty-icon">🏢</div>
+                    <p>카드 또는 지도 마커를 클릭하면<br />단지 상세 정보가 표시됩니다</p>
+                </div>
+            )}
+        </div>
+    );
+};
+
+// ── 청약 일정 타임라인 ─────────────────────────────────────────────────────────
+const ScheduleView = ({ complexes }) => {
+    const events = complexes
+        .filter((c) => c.subscriptionStart)
+        .flatMap((c) => [
+            { date: c.subscriptionStart, label: '청약 시작', complex: c, type: 'start' },
+            { date: c.subscriptionEnd, label: '청약 마감', complex: c, type: 'end' },
+            { date: c.resultDate, label: '당첨 발표', complex: c, type: 'result' },
+        ])
+        .filter((e) => e.date)
+        .sort((a, b) => new Date(a.date) - new Date(b.date));
+
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+
+    const upcoming = events.filter((e) => new Date(e.date) >= today);
+    const past = events.filter((e) => new Date(e.date) < today).reverse();
+
+    const EventItem = ({ event }) => {
+        const cfg = STATUS_CONFIG[event.complex.status] || STATUS_CONFIG['완료'];
+        const dday = getDDays(event.date);
+        return (
+            <div className={`re-schedule-item re-schedule-item--${event.type}`}>
+                <div className="re-schedule-item__date">
+                    <span className="re-schedule-item__dday" style={{ color: cfg.color }}>{dday}</span>
+                    <span className="re-schedule-item__datestr">{formatDate(event.date)}</span>
+                </div>
+                <div className="re-schedule-item__dot" style={{ background: cfg.color, boxShadow: `0 0 6px ${cfg.color}` }} />
+                <div className="re-schedule-item__content">
+                    <p className="re-schedule-item__complex">{event.complex.name}</p>
+                    <p className="re-schedule-item__label">{event.label}</p>
+                </div>
+            </div>
+        );
+    };
+
+    return (
+        <div className="re-schedule">
+            {upcoming.length > 0 && (
+                <div className="re-schedule-section">
+                    <h4 className="re-schedule-section__title">예정 일정</h4>
+                    {upcoming.map((e, i) => <EventItem key={i} event={e} />)}
+                </div>
+            )}
+            {past.length > 0 && (
+                <div className="re-schedule-section">
+                    <h4 className="re-schedule-section__title re-schedule-section__title--past">지난 일정</h4>
+                    {past.map((e, i) => <EventItem key={i} event={e} />)}
+                </div>
+            )}
+            {events.length === 0 && <p className="re-empty">등록된 청약 일정이 없습니다.</p>}
+        </div>
+    );
+};
+
+// ── 가격 분석 ──────────────────────────────────────────────────────────────────
+const PriceAnalysis = ({ complexes }) => {
+    const chartData = [...complexes]
+        .filter((c) => c.avgPricePerPyeong > 0)
+        .sort((a, b) => b.avgPricePerPyeong - a.avgPricePerPyeong)
+        .map((c) => ({
+            name: c.name.length > 9 ? c.name.slice(0, 9) + '…' : c.name,
+            price: c.avgPricePerPyeong,
+            status: c.status,
+            fullName: c.name,
+        }));
+
+    const CustomTooltip = ({ active, payload }) => {
+        if (!active || !payload?.length) return null;
+        return (
+            <div className="re-chart-tooltip">
+                <p>{payload[0].payload.fullName}</p>
+                <p className="re-chart-tooltip__value">{payload[0].value.toLocaleString()}만원/평</p>
+            </div>
+        );
+    };
+
+    const prices = complexes.map((c) => c.avgPricePerPyeong).filter((v) => v > 0);
+    const avg = prices.length ? Math.round(prices.reduce((s, v) => s + v, 0) / prices.length) : 0;
+    const max = prices.length ? Math.max(...prices) : 0;
+    const min = prices.length ? Math.min(...prices) : 0;
+
+    return (
+        <div className="re-analysis">
+            <div className="re-analysis__stats">
+                <div className="re-stat-card">
+                    <p className="re-stat-card__label">평균 평당가</p>
+                    <p className="re-stat-card__value">{formatPrice(avg)}</p>
+                </div>
+                <div className="re-stat-card">
+                    <p className="re-stat-card__label">최고 평당가</p>
+                    <p className="re-stat-card__value" style={{ color: '#f59e0b' }}>{formatPrice(max)}</p>
+                </div>
+                <div className="re-stat-card">
+                    <p className="re-stat-card__label">최저 평당가</p>
+                    <p className="re-stat-card__value" style={{ color: '#34d399' }}>{formatPrice(min)}</p>
+                </div>
+            </div>
+
+            <div className="re-panel">
+                <div className="re-panel__head">
+                    <div>
+                        <p className="re-panel__eyebrow">가격 비교</p>
+                        <h3>단지별 평당가</h3>
+                        <p className="re-panel__sub">관심 단지의 평당 분양가를 비교합니다.</p>
+                    </div>
+                </div>
+                <div className="re-chart-wrapper">
+                    <ResponsiveContainer width="100%" height={280}>
+                        <BarChart data={chartData} margin={{ top: 10, right: 20, left: 10, bottom: 50 }}>
+                            <CartesianGrid strokeDasharray="3 3" stroke="rgba(255,255,255,0.05)" vertical={false} />
+                            <XAxis
+                                dataKey="name"
+                                stroke="var(--text-dim)"
+                                tick={{ fill: 'var(--text-dim)', fontSize: 11 }}
+                                angle={-20}
+                                textAnchor="end"
+                                height={60}
+                            />
+                            <YAxis
+                                stroke="var(--text-dim)"
+                                tick={{ fill: 'var(--text-dim)', fontSize: 11 }}
+                                tickFormatter={(v) => `${(v / 1000).toFixed(1)}k`}
+                                width={44}
+                            />
+                            <Tooltip content={<CustomTooltip />} cursor={{ fill: 'rgba(255,255,255,0.03)' }} />
+                            <Bar dataKey="price" radius={[4, 4, 0, 0]}>
+                                {chartData.map((entry, index) => {
+                                    const cfg = STATUS_CONFIG[entry.status] || STATUS_CONFIG['완료'];
+                                    return <Cell key={index} fill={cfg.color} fillOpacity={0.75} />;
+                                })}
+                            </Bar>
+                        </BarChart>
+                    </ResponsiveContainer>
+                </div>
+            </div>
+
+            <div className="re-panel">
+                <div className="re-panel__head">
+                    <div>
+                        <p className="re-panel__eyebrow">비교표</p>
+                        <h3>단지 상세 비교</h3>
+                    </div>
+                </div>
+                <div className="re-table-wrapper">
+                    <table className="re-table">
+                        <thead>
+                            <tr>
+                                <th>단지명</th>
+                                <th>상태</th>
+                                <th>세대수</th>
+                                <th>평형대</th>
+                                <th>평당가</th>
+                                <th>청약 시작</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {complexes.map((c) => {
+                                const cfg = STATUS_CONFIG[c.status] || STATUS_CONFIG['완료'];
+                                return (
+                                    <tr key={c.id}>
+                                        <td className="re-table__name">{c.name}</td>
+                                        <td>
+                                            <span className="re-badge" style={{ color: cfg.color, background: cfg.bg }}>
+                                                {c.status}
+                                            </span>
+                                        </td>
+                                        <td>{c.units.toLocaleString()}</td>
+                                        <td>{c.types.join(', ')}</td>
+                                        <td style={{ color: '#f59e0b', fontWeight: 600 }}>
+                                            {formatPrice(c.avgPricePerPyeong)}
+                                        </td>
+                                        <td>{formatDate(c.subscriptionStart)}</td>
+                                    </tr>
+                                );
+                            })}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+// ── 단지 추가/편집 모달 ────────────────────────────────────────────────────────
+const ComplexModal = ({ complex, onClose, onSave }) => {
+    const [form, setForm] = useState(
+        complex
+            ? {
+                ...complex,
+                types: complex.types.join(', '),
+                tags: complex.tags.join(', '),
+                lat: String(complex.lat),
+                lng: String(complex.lng),
+                units: String(complex.units),
+                avgPricePerPyeong: String(complex.avgPricePerPyeong),
+            }
+            : { ...EMPTY_FORM }
+    );
+
+    const set = (field) => (e) => setForm((prev) => ({ ...prev, [field]: e.target.value }));
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        onSave({
+            ...form,
+            lat: parseFloat(form.lat) || 37.5665,
+            lng: parseFloat(form.lng) || 126.9780,
+            units: parseInt(form.units) || 0,
+            avgPricePerPyeong: parseInt(form.avgPricePerPyeong) || 0,
+            types: form.types.split(',').map((t) => t.trim()).filter(Boolean),
+            tags: form.tags.split(',').map((t) => t.trim()).filter(Boolean),
+        });
+    };
+
+    return (
+        <div className="re-modal-overlay" onClick={onClose}>
+            <div className="re-modal" onClick={(e) => e.stopPropagation()}>
+                <div className="re-modal__header">
+                    <h3>{complex ? '단지 편집' : '새 단지 추가'}</h3>
+                    <button className="re-modal__close" onClick={onClose}>✕</button>
+                </div>
+                <form className="re-modal__form" onSubmit={handleSubmit}>
+                    <div className="re-form-section">
+                        <p className="re-form-section__title">기본 정보</p>
+                        <div className="re-form-row">
+                            <label className="re-form-label">
+                                단지명 *
+                                <input className="re-form-input" value={form.name} onChange={set('name')} placeholder="단지명 입력" required />
+                            </label>
+                            <label className="re-form-label">
+                                상태
+                                <select className="re-form-input" value={form.status} onChange={set('status')}>
+                                    {Object.keys(STATUS_CONFIG).map((s) => (
+                                        <option key={s} value={s}>{s}</option>
+                                    ))}
+                                </select>
+                            </label>
+                        </div>
+                        <label className="re-form-label">
+                            주소
+                            <input className="re-form-input" value={form.address} onChange={set('address')} placeholder="서울 서초구 반포동" />
+                        </label>
+                        <div className="re-form-row">
+                            <label className="re-form-label">
+                                위도 (lat)
+                                <input className="re-form-input" value={form.lat} onChange={set('lat')} placeholder="37.5665" type="number" step="0.0001" />
+                            </label>
+                            <label className="re-form-label">
+                                경도 (lng)
+                                <input className="re-form-input" value={form.lng} onChange={set('lng')} placeholder="126.9780" type="number" step="0.0001" />
+                            </label>
+                        </div>
+                    </div>
+
+                    <div className="re-form-section">
+                        <p className="re-form-section__title">단지 정보</p>
+                        <div className="re-form-row">
+                            <label className="re-form-label">
+                                세대수
+                                <input className="re-form-input" value={form.units} onChange={set('units')} placeholder="2990" type="number" />
+                            </label>
+                            <label className="re-form-label">
+                                평당가 (만원)
+                                <input className="re-form-input" value={form.avgPricePerPyeong} onChange={set('avgPricePerPyeong')} placeholder="4500" type="number" />
+                            </label>
+                        </div>
+                        <div className="re-form-row">
+                            <label className="re-form-label">
+                                평형대 (쉼표 구분)
+                                <input className="re-form-input" value={form.types} onChange={set('types')} placeholder="59㎡, 84㎡, 114㎡" />
+                            </label>
+                            <label className="re-form-label">
+                                우선순위
+                                <select className="re-form-input" value={form.priority} onChange={set('priority')}>
+                                    <option value="high">★ 최우선</option>
+                                    <option value="normal">보통</option>
+                                    <option value="low">낮음</option>
+                                </select>
+                            </label>
+                        </div>
+                        <label className="re-form-label">
+                            특징 태그 (쉼표 구분)
+                            <input className="re-form-input" value={form.tags} onChange={set('tags')} placeholder="강남권, 역세권, 브랜드" />
+                        </label>
+                    </div>
+
+                    <div className="re-form-section">
+                        <p className="re-form-section__title">청약 일정</p>
+                        <div className="re-form-row re-form-row--three">
+                            <label className="re-form-label">
+                                청약 시작
+                                <input className="re-form-input" type="date" value={form.subscriptionStart} onChange={set('subscriptionStart')} />
+                            </label>
+                            <label className="re-form-label">
+                                청약 마감
+                                <input className="re-form-input" type="date" value={form.subscriptionEnd} onChange={set('subscriptionEnd')} />
+                            </label>
+                            <label className="re-form-label">
+                                당첨 발표
+                                <input className="re-form-input" type="date" value={form.resultDate} onChange={set('resultDate')} />
+                            </label>
+                        </div>
+                    </div>
+
+                    <div className="re-form-section">
+                        <p className="re-form-section__title">링크 & 메모</p>
+                        <label className="re-form-label">
+                            네이버 부동산 URL
+                            <input className="re-form-input" value={form.naverUrl} onChange={set('naverUrl')} placeholder="https://new.land.naver.com/complexes/..." />
+                        </label>
+                        <label className="re-form-label">
+                            평면도 URL
+                            <input className="re-form-input" value={form.floorPlanUrl} onChange={set('floorPlanUrl')} placeholder="https://..." />
+                        </label>
+                        <label className="re-form-label">
+                            메모
+                            <textarea
+                                className="re-form-input re-form-textarea"
+                                value={form.memo}
+                                onChange={set('memo')}
+                                placeholder="관심 포인트, 분석 내용 등"
+                                rows={3}
+                            />
+                        </label>
+                    </div>
+
+                    <div className="re-modal__footer">
+                        <button type="button" className="button ghost" onClick={onClose}>취소</button>
+                        <button type="submit" className="button primary">{complex ? '저장' : '추가'}</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+// ── 메인 컴포넌트 ──────────────────────────────────────────────────────────────
+const RealEstate = () => {
+    const [complexes, setComplexes] = useState(SAMPLE_COMPLEXES);
+    const [selectedComplex, setSelectedComplex] = useState(null);
+    const [activeTab, setActiveTab] = useState('목록');
+    const [filterStatus, setFilterStatus] = useState('전체');
+    const [showModal, setShowModal] = useState(false);
+    const [editingComplex, setEditingComplex] = useState(null);
+
+    useEffect(() => {
+        apiGet('/api/realestate/complexes')
+            .then((data) => {
+                if (Array.isArray(data) && data.length > 0) setComplexes(data);
+            })
+            .catch(() => {});
+    }, []);
+
+    const handleAdd = async (data) => {
+        const newComplex = { ...data, id: Date.now() };
+        setComplexes((prev) => [...prev, newComplex]);
+        setShowModal(false);
+        try { await apiPost('/api/realestate/complexes', data); } catch {}
+    };
+
+    const handleUpdate = async (data) => {
+        setComplexes((prev) => prev.map((c) => (c.id === data.id ? data : c)));
+        if (selectedComplex?.id === data.id) setSelectedComplex(data);
+        setEditingComplex(null);
+        setShowModal(false);
+        try { await apiPut(`/api/realestate/complexes/${data.id}`, data); } catch {}
+    };
+
+    const handleDelete = async (id) => {
+        if (!confirm('삭제하시겠습니까?')) return;
+        setComplexes((prev) => prev.filter((c) => c.id !== id));
+        if (selectedComplex?.id === id) setSelectedComplex(null);
+        try { await apiDelete(`/api/realestate/complexes/${id}`); } catch {}
+    };
+
+    const handleModalSave = (data) => {
+        if (editingComplex) {
+            handleUpdate({ ...editingComplex, ...data });
+        } else {
+            handleAdd(data);
+        }
+    };
+
+    const filteredComplexes = useMemo(() => {
+        if (filterStatus === '전체') return complexes;
+        return complexes.filter((c) => c.status === filterStatus);
+    }, [complexes, filterStatus]);
+
+    const stats = useMemo(() => ({
+        total: complexes.length,
+        upcoming: complexes.filter((c) => c.status === '청약예정').length,
+        active: complexes.filter((c) => c.status === '청약중').length,
+        avgPrice: complexes.length
+            ? Math.round(complexes.reduce((s, c) => s + c.avgPricePerPyeong, 0) / complexes.length)
+            : 0,
+    }), [complexes]);
+
+    return (
+        <div className="re">
+            {/* 헤더 */}
+            <header className="re-header">
+                <div>
+                    <p className="re-kicker">부동산 정보</p>
+                    <h1>관심 단지 관리</h1>
+                    <p className="re-sub">관심 있는 아파트 단지 정보를 수집하고 분석합니다.</p>
+                    <div className="re-header-actions">
+                        <button
+                            className="button primary"
+                            onClick={() => { setEditingComplex(null); setShowModal(true); }}
+                        >
+                            + 단지 추가
+                        </button>
+                        <Link to="/realestate" className="button ghost">← 청약 대시보드</Link>
+                        <a href="https://www.applyhome.co.kr" target="_blank" rel="noreferrer" className="button ghost">
+                            청약홈 →
+                        </a>
+                    </div>
+                </div>
+                <div className="re-stats-bar">
+                    <div className="re-stat-item">
+                        <p className="re-stat-item__value">{stats.total}</p>
+                        <p className="re-stat-item__label">관심 단지</p>
+                    </div>
+                    <div className="re-stat-item">
+                        <p className="re-stat-item__value" style={{ color: '#00d4ff' }}>{stats.upcoming}</p>
+                        <p className="re-stat-item__label">청약 예정</p>
+                    </div>
+                    <div className="re-stat-item">
+                        <p className="re-stat-item__value" style={{ color: '#34d399' }}>{stats.active}</p>
+                        <p className="re-stat-item__label">청약 중</p>
+                    </div>
+                    <div className="re-stat-item">
+                        <p className="re-stat-item__value" style={{ color: '#f59e0b' }}>
+                            {stats.avgPrice.toLocaleString()}만
+                        </p>
+                        <p className="re-stat-item__label">평균 평당가</p>
+                    </div>
+                </div>
+            </header>
+
+            {/* 탭 바 */}
+            <div className="re-tabs-bar">
+                <div className="re-tabs">
+                    {TABS.map((tab) => (
+                        <button
+                            key={tab}
+                            className={`re-tab ${activeTab === tab ? 'is-active' : ''}`}
+                            onClick={() => setActiveTab(tab)}
+                        >
+                            {tab}
+                        </button>
+                    ))}
+                </div>
+                {activeTab === '목록' && (
+                    <div className="re-filter">
+                        {['전체', ...Object.keys(STATUS_CONFIG)].map((s) => (
+                            <button
+                                key={s}
+                                className={`re-filter-btn ${filterStatus === s ? 'is-active' : ''}`}
+                                onClick={() => setFilterStatus(s)}
+                            >
+                                {s}
+                            </button>
+                        ))}
+                    </div>
+                )}
+            </div>
+
+            {/* 목록 탭 — 카드 + 지도/상세 */}
+            {activeTab === '목록' && (
+                <div className="re-list-layout">
+                    <div className="re-card-grid">
+                        {filteredComplexes.length === 0 ? (
+                            <p className="re-empty">등록된 단지가 없습니다.</p>
+                        ) : (
+                            filteredComplexes.map((c) => (
+                                <ComplexCard
+                                    key={c.id}
+                                    complex={c}
+                                    isSelected={selectedComplex?.id === c.id}
+                                    onClick={() => setSelectedComplex(c)}
+                                />
+                            ))
+                        )}
+                    </div>
+                    <RightPanel
+                        complexes={complexes}
+                        selectedComplex={selectedComplex}
+                        onSelectComplex={setSelectedComplex}
+                        onEdit={() => { setEditingComplex(selectedComplex); setShowModal(true); }}
+                        onDelete={() => handleDelete(selectedComplex.id)}
+                    />
+                </div>
+            )}
+
+            {activeTab === '일정' && (
+                <div className="re-panel">
+                    <div className="re-panel__head">
+                        <div>
+                            <p className="re-panel__eyebrow">캘린더</p>
+                            <h3>청약 일정</h3>
+                            <p className="re-panel__sub">청약 시작·마감·당첨 발표일을 타임라인으로 확인합니다.</p>
+                        </div>
+                    </div>
+                    <ScheduleView complexes={complexes} />
+                </div>
+            )}
+
+            {activeTab === '분석' && (
+                <PriceAnalysis complexes={complexes} />
+            )}
+
+            {showModal && (
+                <ComplexModal
+                    complex={editingComplex}
+                    onClose={() => { setShowModal(false); setEditingComplex(null); }}
+                    onSave={handleModalSave}
+                />
+            )}
+        </div>
+    );
+};
+
+export default RealEstate;

src/routes.jsx

@@ -4,6 +4,7 @@ import {
     IconBlog,
     IconLotto,
     IconStock,
+    IconBuilding,
     IconTravel,
     IconLab,
     IconTodo,
@@ -15,6 +16,8 @@ const Lotto = lazy(() => import('./pages/lotto/Lotto'));
 const Travel = lazy(() => import('./pages/travel/Travel'));
 const Stock = lazy(() => import('./pages/stock/Stock'));
 const StockTrade = lazy(() => import('./pages/stock/StockTrade'));
+const RealEstate = lazy(() => import('./pages/realestate/RealEstate'));
+const Subscription = lazy(() => import('./pages/subscription/Subscription'));
 const EffectLab = lazy(() => import('./pages/effect-lab/EffectLab'));
 const Todo = lazy(() => import('./pages/todo/Todo'));
 
@@ -55,6 +58,15 @@ export const navLinks = [
         icon: <IconStock />,
         accent: '#60a5fa',
     },
+    {
+        id: 'realestate',
+        label: 'Realestate',
+        path: '/realestate',
+        subtitle: '부동산',
+        description: '청약 자격 비교, 일정 관리, 관심 단지 정보를 관리하는 공간',
+        icon: <IconBuilding />,
+        accent: '#f43f5e',
+    },
     {
         id: 'travel',
         label: 'Travel',
@@ -105,6 +117,14 @@ export const appRoutes = [
         path: 'stock/trade',
         element: <StockTrade />,
     },
+    {
+        path: 'realestate',
+        element: <Subscription />,
+    },
+    {
+        path: 'realestate/property',
+        element: <RealEstate />,
+    },
     {
         path: 'travel',
         element: <Travel />,