web-page/src/pages/listings/Listings.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;