sb-front/src/views/UsersView.vue

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

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" />
      <IconBtn icon="plus" title="추가" variant="primary" type="submit" :disabled="submitting" />
    </form>
    <p v-if="formError" class="msg error">{{ formError }}</p>

    <div class="status">
      <IconBtn icon="refresh" title="새로고침" size="sm" :disabled="loading" @click="userStore.fetchUsers()" />
      <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>
            <IconBtn icon="trash" title="삭제" variant="danger" size="sm" @click="handleRemove(user)" />
          </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;
}

@media (max-width: 768px) {
  .users {
    padding: 1rem;
    max-width: 100%;
  }
  .user-table thead {
    display: none;
  }
  .user-table,
  .user-table tbody,
  .user-table tr,
  .user-table td {
    display: block;
  }
  .user-table tr {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.6rem;
    row-gap: 0.15rem;
    padding: 0.6rem 0.1rem;
    border-bottom: 1px solid var(--color-border);
  }
  .user-table td {
    border: 0;
    padding: 0;
    font-size: 0.85rem;
  }
  .user-table td:nth-child(1)::before {
    content: '#';
  }
  .user-table td:nth-child(2) {
    font-weight: 600;
    font-size: 0.95rem;
  }
  .user-table td:nth-child(3) {
    width: 100%;
    opacity: 0.75;
    font-size: 0.8rem;
  }
  .user-table td:nth-child(4) {
    display: none; /* 생성일은 모바일에서 숨김 */
  }
  .user-table td:nth-child(5) {
    margin-left: auto;
  }
}
</style>