<div id="tour-search-widget">

  <form id="search-form">

    <label for="date">여행 날짜</label>

    <input type="date" id="date" name="date">

    <label for="concept">여행 컨셉</label>

    <select id="concept" name="concept">

      <option value="healing">힐링</option>

      <option value="activity">액티비티</option>

      <option value="local">로컬 체험</option>

    </select>

    <button type="button" id="search-button">검색</button>

  </form>

  <div id="search-results"></div>

</div>

<style>

#tour-search-widget {

  font-family: Arial, sans-serif;

  max-width: 400px;

  margin: 20px auto;

  padding: 15px;

  border: 1px solid #ccc;

  border-radius: 5px;

}

#search-form label {

  display: block;

  margin-bottom: 5px;

  font-weight: bold;

}

#search-form input, #search-form select, #search-form button {

  width: 100%;

  padding: 10px;

  margin-bottom: 10px;

  border: 1px solid #ddd;

  border-radius: 5px;

}

#search-results {

  margin-top: 20px;

}

</style>

<script>

document.getElementById('search-button').addEventListener('click', function () {

  const date = document.getElementById('date').value;

  const concept = document.getElementById('concept').value;

  // 예시 데이터

  const tourData = [

    { name: "힐링 투어", date: "2024-12-20", concept: "healing" },

    { name: "액티비티 투어", date: "2024-12-21", concept: "activity" },

    { name: "로컬 체험 투어", date: "2024-12-22", concept: "local" },

  ];

  const results = tourData.filter(tour => tour.date === date && tour.concept === concept);

  const resultsContainer = document.getElementById('search-results');

  resultsContainer.innerHTML = results.length

    ? results.map(tour => `<p>${tour.name}</p>`).join('')

    : '<p>검색 결과가 없습니다.</p>';

});

</script>