<template>
  <div class="content-wrapper">
    <h1>가격조사 목록</h1>
    <table v-if="prcsList.length > 0">
      <thead>
      <tr>
        <th>ID</th>
        <th>상품명</th>
        <th>가격</th>
        <th>조사일</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="item in prcsList" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.productName }}</td>
        <td>{{ item.price }}</td>
        <td>{{ item.date }}</td>
      </tr>
      </tbody>
    </table>
    <p v-else>데이터가 없습니다.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      prcsList: [
        { id: 1, productName: '상품A', price: 10000, date: '2025-05-08' },
        { id: 2, productName: '상품B', price: 20000, date: '2025-05-09' }
      ]
    };
  }
};
</script>

<style scoped>
.content-wrapper {
  padding: 20px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
</style>