@

Initial commit: SB 프론트엔드 (Vue 3 + Vite)

- axios 공통 인스턴스 및 사용자 CRUD API 연동
- Pinia 사용자 스토어, 사용자 관리 화면(UsersView)
- /api -> Spring Boot(8080) dev 프록시 구성

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@

src/views/AboutView.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
+
+<style>
+@media (min-width: 1024px) {
+  .about {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

src/views/HomeView.vue

@@ -0,0 +1,9 @@
+<script setup>
+import TheWelcome from '../components/TheWelcome.vue'
+</script>
+
+<template>
+  <main>
+    <TheWelcome />
+  </main>
+</template>

src/views/UsersView.vue

@@ -0,0 +1,176 @@
+<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>