<template>
  <div id="app">
    <h1>사용자 목록</h1>
    <!-- 데이터가 로드되면 목록을 출력하고, 로드되지 않았으면 로딩 메시지를 표시 -->
    <ul v-if="users.length">
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.phone }}
      </li>
    </ul>
    <p v-else>Loading...</p>
  </div>
</template>

<script>
import {ref, onMounted} from 'vue';
import axios from 'axios'; // axios 불러오기

export default {
  name: 'App',
  setup() {
    const users = ref([]); // 사용자 목록을 저장할 ref 변수

    const fetchUsers = async () => {
      try {
        const response = await axios.get('/api/all'); // 엔드포인트를 적절히 변경
        users.value = response.data; // 데이터를 users 배열에 저장
      } catch (error) {
        console.error('데이터를 가져오는 중 오류가 발생했습니다:', error);
      }
    };

    // 컴포넌트가 마운트될 때 fetchUsers 함수를 호출하여 데이터 가져오기
    onMounted(() => {
      fetchUsers();
    });

    return {
      users,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
