같은 사주 인기 코인

{
  "success": true,
  "data": {
    "dayMaster": "庚",
    "dayMasterName": "경금",
    "totalUsers": 12847,
    "coins": [
      {
        "rank": 1,
        "symbol": "BTC",
        "name": "비트코인",
        "percentage": 42,
        "change24h": "+2.3%",
        "positive": true
      },
      {
        "rank": 2,
        "symbol": "ETH",
        "name": "이더리움",
        "percentage": 28,
        "change24h": "+1.8%",
        "positive": true
      },
      {
        "rank": 3,
        "symbol": "XRP",
        "name": "리플",
        "percentage": 15,
        "change24h": "-0.5%",
        "positive": false
      },
      {
        "rank": 4,
        "symbol": "SOL",
        "name": "솔라나",
        "percentage": 10,
        "change24h": "+4.2%",
        "positive": true
      },
      {
        "rank": 5,
        "symbol": "DOGE",
        "name": "도지코인",
        "percentage": 5,
        "change24h": "+0.8%",
        "positive": true
      }
    ],
    "updatedAt": "2026-01-20T10:00:00.000Z"
  }
}

function PopularCoinsWidget({ dayMaster }) {
  const { data } = useSWR(`/v1/analytics/popular-coins?dayMaster=${dayMaster}`);

  return (
    <div className="insight-card">
      <h3>같은 사주 인기 코인</h3>
      <p>{data.dayMasterName} 일간 투자자 선호</p>
      {data.coins.map((coin) => (
        <div key={coin.symbol} className="coin-row">
          <span>{coin.rank}</span>
          <span>{coin.symbol}</span>
          <div className="bar" style={{ width: `${coin.percentage}%` }} />
          <span className={coin.positive ? 'green' : 'red'}>
            {coin.change24h}
          </span>
        </div>
      ))}
    </div>
  );
}