sb-front/src/views/UsersView.vue

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const { users, loading, error } = storeToRefs(userStore)

const form = reactive({
  name: '',
  email: '',
})
const submitting = ref(false)
const formError = ref(null)

onMounted(() => {
  userStore.fetchUsers()
})

async function handleSubmit() {
  formError.value = null
  if (!form.name.trim() || !form.email.trim()) {
    formError.value = '이름과 이메일을 모두 입력하세요.'
    return
  }
  submitting.value = true
  try {
    await userStore.addUser({ name: form.name.trim(), email: form.email.trim() })
    form.name = ''
    form.email = ''
  } catch (e) {
    formError.value = e.response?.data?.message || e.message || '등록에 실패했습니다.'
  } finally {
    submitting.value = false
  }
}

async function handleRemove(user) {
  if (!confirm(`'${user.name}' 사용자를 삭제하시겠습니까?`)) return
  try {
    await userStore.removeUser(user.id)
  } catch (e) {
    alert(e.response?.data?.message || e.message || '삭제에 실패했습니다.')
  }
}

function formatDate(value) {
  if (!value) return '-'
  const d = new Date(value)
  return Number.isNaN(d.getTime()) ? value : d.toLocaleString()
}
</script>

<template>
  <main class="users">
    <h1>사용자 관리</h1>

    <form class="user-form" @submit.prevent="handleSubmit">
      <input v-model="form.name" type="text" placeholder="이름" :disabled="submitting" />
      <input v-model="form.email" type="email" placeholder="이메일" :disabled="submitting" />
      <button type="submit" :disabled="submitting">
        {{ submitting ? '등록 중...' : '추가' }}
      </button>
    </form>
    <p v-if="formError" class="msg error">{{ formError }}</p>

    <div class="status">
      <button type="button" :disabled="loading" @click="userStore.fetchUsers()">새로고침</button>
      <span v-if="loading">불러오는 중...</span>
      <span v-else>총 {{ users.length }}명</span>
    </div>
    <p v-if="error" class="msg error">{{ error }}</p>

    <table v-if="users.length" class="user-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>이름</th>
          <th>이메일</th>
          <th>생성일</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
          <td>{{ user.email }}</td>
          <td>{{ formatDate(user.createdAt) }}</td>
          <td>
            <button type="button" class="danger" @click="handleRemove(user)">삭제</button>
          </td>
        </tr>
      </tbody>
    </table>
    <p v-else-if="!loading" class="msg">등록된 사용자가 없습니다.</p>
  </main>
</template>

<style scoped>
.users {
  max-width: 800px;
  margin: 0 auto;
  padding: 1.5rem;
}

h1 {
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
}

.user-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.user-form input {
  flex: 1 1 180px;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-background-soft);
  color: var(--color-text);
}

button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-background-soft);
  color: var(--color-text);
  cursor: pointer;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

button.danger,
button.danger:hover {
  border-color: #c0392b;
  color: #c0392b;
}

.status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 0.5rem;
}

.user-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
}

.user-table th,
.user-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}

.msg {
  margin: 0.5rem 0;
  color: var(--color-text);
}

.msg.error {
  color: #c0392b;
}
</style>