// Map.jsx — territorial map visualization with planted flags
// The hero centerpiece: a stylized district map with flags
const { useState, useEffect, useRef } = React;
const TERRITORIES = [
{ id: "yeonnam", name: "연남동", x: 18, y: 28, flag: "@kim_food", visits: 47, color: "#C13A2C" },
{ id: "seongsu", name: "성수동", x: 62, y: 22, flag: "@hana.eats", visits: 38, color: "#1F3A2E" },
{ id: "ikseon", name: "익선동", x: 44, y: 44, flag: "@regular_jay", visits: 64, color: "#C13A2C" },
{ id: "mangwon", name: "망원동", x: 26, y: 58, flag: "@manghan", visits: 29, color: "#B8893A" },
{ id: "euljiro", name: "을지로", x: 56, y: 64, flag: "@old_seoul", visits: 81, color: "#C13A2C" },
{ id: "yeonhui", name: "연희동", x: 14, y: 72, flag: "@daily_y", visits: 22, color: "#1F3A2E" },
{ id: "hapjeong", name: "합정", x: 36, y: 14, flag: "—", visits: 0, color: null },
{ id: "jongno", name: "종로", x: 76, y: 40, flag: "—", visits: 0, color: null },
];
function Flag({ x, y, color, label, visits, delay = 0, planted = true }) {
const [shown, setShown] = useState(false);
useEffect(() => {
const t = setTimeout(() => setShown(true), delay);
return () => clearTimeout(t);
}, [delay]);
if (!planted || !color) {
return (
);
}
return (
{label}
{visits}회
);
}
function MapVisual({ planted = TERRITORIES.length, animKey = 0 }) {
return (
);
}
window.MapVisual = MapVisual;
window.TERRITORIES = TERRITORIES;