수원맛집100
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>경기도 용인 음식점 검색</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header -->
<header>
<h1>경기도 용인 음식점 & 카페 검색</h1>
<nav>
<a href="#cafes">카페</a> |
<a href="#korean">한식</a> |
<a href="#japanese">일식</a> |
<a href="#vietnamese">베트남</a> |
<a href="#thai">타이</a>
</nav>
</header>
<!-- Search Bar -->
<section id="search-section">
<input type="text" id="search" placeholder="음식점 이름, 카테고리 입력">
</section>
<!-- Results -->
<section id="results"></section>
<!-- Footer -->
<footer>
<p>© 2026 Yongin Food Directory</p>
</footer>
<!-- Script -->
<script>
// 예시 데이터 (실제 운영 시 DB/API에서 불러오기)
const restaurants = [
{
id: 1,
name: "용인 카페 블루",
category: "카페",
address: "용인시 수지구 ○○로 123",
phone: "031-123-4567",
description: "감성적인 분위기의 카페",
region: "용인",
verified_count: 4
},
{
id: 2,
name: "스시 하나 용인점",
category: "일식",
address: "용인시 기흥구 △△길 45",
phone: "031-987-6543",
description: "신선한 초밥 전문점",
region: "용인",
verified_count: 4
},
{
id: 3,
name: "포하노이 용인점",
category: "베트남",
address: "용인시 처인구 ○○동 77",
phone: "031-555-8888",
description: "정통 베트남 쌀국수 전문점",
region: "용인",
verified_count: 4
}
];
// 검색 기능
document.getElementById('search').addEventListener('input', function(e) {
const query = e.target.value.toLowerCase();
const filtered = restaurants.filter(r =>
r.name.toLowerCase().includes(query) ||
r.category.toLowerCase().includes(query) ||
r.region.toLowerCase().includes(query)
);
document.getElementById('results').innerHTML = filtered.map(r => `
<div class="restaurant-card">
<h2>${r.name}</h2>
<p><strong>카테고리:</strong> ${r.category}</p>
<p><strong>지역:</strong> ${r.region}</p>
<p><strong>주소:</strong> ${r.address}</p>
<p><strong>전화:</strong> ${r.phone}</p>
<p><strong>설명:</strong> ${r.description}</p>
</div>
`).join('');
});
</script>
</body>
</html>