부동산 정보 페이지 추가
This commit is contained in:
@@ -71,3 +71,27 @@ export const IconTodo = () =>
|
|||||||
<line x1="17" y1="12" x2="21" y2="12" />
|
<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" />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|||||||
@@ -86,6 +86,9 @@
|
|||||||
--accent-blog: #c084fc;
|
--accent-blog: #c084fc;
|
||||||
--accent-lotto: #34d399;
|
--accent-lotto: #34d399;
|
||||||
--accent-stock: #38bdf8;
|
--accent-stock: #38bdf8;
|
||||||
|
--accent-realestate: #f43f5e;
|
||||||
|
--accent-subscription: #f43f5e;
|
||||||
|
--accent-todo: #f472b6;
|
||||||
--accent-travel: #fb923c;
|
--accent-travel: #fb923c;
|
||||||
--accent-lab: #fbbf24;
|
--accent-lab: #fbbf24;
|
||||||
|
|
||||||
|
|||||||
1026
src/pages/realestate/RealEstate.css
Normal file
1026
src/pages/realestate/RealEstate.css
Normal file
File diff suppressed because it is too large
Load Diff
909
src/pages/realestate/RealEstate.jsx
Normal file
909
src/pages/realestate/RealEstate.jsx
Normal file
@@ -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='© <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;
|
||||||
1167
src/pages/subscription/Subscription.css
Normal file
1167
src/pages/subscription/Subscription.css
Normal file
File diff suppressed because it is too large
Load Diff
1214
src/pages/subscription/Subscription.jsx
Normal file
1214
src/pages/subscription/Subscription.jsx
Normal file
File diff suppressed because it is too large
Load Diff
@@ -4,6 +4,7 @@ import {
|
|||||||
IconBlog,
|
IconBlog,
|
||||||
IconLotto,
|
IconLotto,
|
||||||
IconStock,
|
IconStock,
|
||||||
|
IconBuilding,
|
||||||
IconTravel,
|
IconTravel,
|
||||||
IconLab,
|
IconLab,
|
||||||
IconTodo,
|
IconTodo,
|
||||||
@@ -15,6 +16,8 @@ const Lotto = lazy(() => import('./pages/lotto/Lotto'));
|
|||||||
const Travel = lazy(() => import('./pages/travel/Travel'));
|
const Travel = lazy(() => import('./pages/travel/Travel'));
|
||||||
const Stock = lazy(() => import('./pages/stock/Stock'));
|
const Stock = lazy(() => import('./pages/stock/Stock'));
|
||||||
const StockTrade = lazy(() => import('./pages/stock/StockTrade'));
|
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 EffectLab = lazy(() => import('./pages/effect-lab/EffectLab'));
|
||||||
const Todo = lazy(() => import('./pages/todo/Todo'));
|
const Todo = lazy(() => import('./pages/todo/Todo'));
|
||||||
|
|
||||||
@@ -55,6 +58,15 @@ export const navLinks = [
|
|||||||
icon: <IconStock />,
|
icon: <IconStock />,
|
||||||
accent: '#60a5fa',
|
accent: '#60a5fa',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: 'realestate',
|
||||||
|
label: 'Realestate',
|
||||||
|
path: '/realestate',
|
||||||
|
subtitle: '부동산',
|
||||||
|
description: '청약 자격 비교, 일정 관리, 관심 단지 정보를 관리하는 공간',
|
||||||
|
icon: <IconBuilding />,
|
||||||
|
accent: '#f43f5e',
|
||||||
|
},
|
||||||
{
|
{
|
||||||
id: 'travel',
|
id: 'travel',
|
||||||
label: 'Travel',
|
label: 'Travel',
|
||||||
@@ -105,6 +117,14 @@ export const appRoutes = [
|
|||||||
path: 'stock/trade',
|
path: 'stock/trade',
|
||||||
element: <StockTrade />,
|
element: <StockTrade />,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: 'realestate',
|
||||||
|
element: <Subscription />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'realestate/property',
|
||||||
|
element: <RealEstate />,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: 'travel',
|
path: 'travel',
|
||||||
element: <Travel />,
|
element: <Travel />,
|
||||||
|
|||||||
Reference in New Issue
Block a user