추가

frontend/employee/[id].vue

@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <AppHeader />
+    
+    <div class="container-fluid py-4">
+      <div class="mb-4">
+        <NuxtLink to="/employee" class="text-decoration-none">
+          <i class="bi bi-arrow-left me-1"></i> 목록으로
+        </NuxtLink>
+      </div>
+
+      <div class="row" v-if="employee">
+        <div class="col-lg-6">
+          <div class="card">
+            <div class="card-header d-flex justify-content-between align-items-center">
+              <h5 class="mb-0">
+                <i class="bi bi-person me-2"></i>사원 정보
+              </h5>
+              <span :class="employee.isActive ? 'badge bg-success' : 'badge bg-secondary'">
+                {{ employee.isActive ? '재직' : '퇴직' }}
+              </span>
+            </div>
+            <div class="card-body">
+              <form @submit.prevent="updateEmployee">
+                <div class="mb-3">
+                  <label class="form-label">이름 <span class="text-danger">*</span></label>
+                  <input type="text" class="form-control" v-model="form.employeeName" required />
+                </div>
+                <div class="mb-3">
+                  <label class="form-label">이메일 <span class="text-danger">*</span></label>
+                  <input type="email" class="form-control" v-model="form.employeeEmail" required />
+                </div>
+                <div class="mb-3">
+                  <label class="form-label">사번</label>
+                  <input type="text" class="form-control" v-model="form.employeeNumber" />
+                </div>
+                <div class="mb-3">
+                  <label class="form-label">직급</label>
+                  <select class="form-select" v-model="form.employeePosition">
+                    <option value="">선택</option>
+                    <option value="사원">사원</option>
+                    <option value="대리">대리</option>
+                    <option value="과장">과장</option>
+                    <option value="차장">차장</option>
+                    <option value="부장">부장</option>
+                    <option value="이사">이사</option>
+                  </select>
+                </div>
+                <div class="mb-3">
+                  <label class="form-label">연락처</label>
+                  <input type="text" class="form-control" v-model="form.employeePhone" />
+                </div>
+                <div class="mb-3">
+                  <label class="form-label">입사일</label>
+                  <input type="date" class="form-control" v-model="form.joinDate" />
+                </div>
+                <div class="mb-3">
+                  <div class="form-check">
+                    <input type="checkbox" class="form-check-input" id="isActive" v-model="form.isActive" />
+                    <label class="form-check-label" for="isActive">재직중</label>
+                  </div>
+                </div>
+                
+                <div class="d-flex gap-2">
+                  <button type="submit" class="btn btn-primary" :disabled="isSubmitting">
+                    <i class="bi bi-save me-1"></i> 저장
+                  </button>
+                  <NuxtLink to="/employee" class="btn btn-outline-secondary">취소</NuxtLink>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+
+        <div class="col-lg-6">
+          <div class="card">
+            <div class="card-header">
+              <i class="bi bi-clock-history me-2"></i>활동 이력
+            </div>
+            <div class="card-body">
+              <div class="mb-4">
+                <h6 class="text-muted">최근 로그인</h6>
+                <p class="mb-0">{{ employee.lastLoginAt ? formatDateTime(employee.lastLoginAt) : '-' }}</p>
+              </div>
+              <div class="mb-4">
+                <h6 class="text-muted">등록일</h6>
+                <p class="mb-0">{{ formatDateTime(employee.createdAt) }}</p>
+              </div>
+              <div>
+                <h6 class="text-muted">최종 수정</h6>
+                <p class="mb-0">{{ formatDateTime(employee.updatedAt) }}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="text-center py-5" v-else-if="isLoading">
+        <div class="spinner-border text-primary"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { fetchCurrentUser } = useAuth()
+const router = useRouter()
+const route = useRoute()
+
+const employee = ref<any>(null)
+const isLoading = ref(true)
+const isSubmitting = ref(false)
+
+const form = ref({
+  employeeName: '',
+  employeeEmail: '',
+  employeeNumber: '',
+  employeePosition: '',
+  employeePhone: '',
+  joinDate: '',
+  isActive: true
+})
+
+onMounted(async () => {
+  const user = await fetchCurrentUser()
+  if (!user) {
+    router.push('/login')
+    return
+  }
+  
+  await loadEmployee()
+})
+
+async function loadEmployee() {
+  isLoading.value = true
+  try {
+    const res = await $fetch<{ employee: any }>(`/api/employee/${route.params.id}/detail`)
+    employee.value = res.employee
+    
+    const e = res.employee
+    form.value = {
+      employeeName: e.employeeName || '',
+      employeeEmail: e.employeeEmail || '',
+      employeeNumber: e.employeeNumber || '',
+      employeePosition: e.employeePosition || '',
+      employeePhone: e.employeePhone || '',
+      joinDate: e.joinDate ? e.joinDate.split('T')[0] : '',
+      isActive: e.isActive
+    }
+  } catch (e: any) {
+    alert('사원 정보를 불러오는데 실패했습니다.')
+    router.push('/employee')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+async function updateEmployee() {
+  if (!form.value.employeeName || !form.value.employeeEmail) {
+    alert('이름과 이메일은 필수입니다.')
+    return
+  }
+  
+  isSubmitting.value = true
+  try {
+    await $fetch(`/api/employee/${route.params.id}/update`, {
+      method: 'PUT',
+      body: form.value
+    })
+    alert('저장되었습니다.')
+    await loadEmployee()
+  } catch (e: any) {
+    alert(e.data?.message || e.message || '저장에 실패했습니다.')
+  } finally {
+    isSubmitting.value = false
+  }
+}
+
+function formatDateTime(dateStr: string) {
+  if (!dateStr) return '-'
+  const d = new Date(dateStr)
+  return d.toLocaleString('ko-KR')
+}
+</script>

frontend/employee/index.vue

@@ -0,0 +1,209 @@
+<template>
+  <div>
+    <AppHeader />
+    
+    <div class="container-fluid py-4">
+      <div class="d-flex justify-content-between align-items-center mb-4">
+        <div>
+          <h4><i class="bi bi-people me-2"></i>사원 관리</h4>
+          <p class="text-muted mb-0">직원 정보 관리</p>
+        </div>
+        <button class="btn btn-primary" @click="showCreateModal = true">
+          <i class="bi bi-plus-lg me-1"></i> 사원 등록
+        </button>
+      </div>
+
+      <!-- 검색 -->
+      <div class="card mb-4">
+        <div class="card-body">
+          <div class="row g-3">
+            <div class="col-md-4">
+              <input 
+                type="text" 
+                class="form-control" 
+                v-model="searchKeyword"
+                placeholder="이름 또는 이메일 검색"
+                @keyup.enter="loadEmployees"
+              />
+            </div>
+            <div class="col-md-2 d-flex align-items-end">
+              <button class="btn btn-outline-secondary" @click="loadEmployees">
+                <i class="bi bi-search me-1"></i> 조회
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 사원 목록 -->
+      <div class="card">
+        <div class="table-responsive">
+          <table class="table table-hover mb-0">
+            <thead class="table-light">
+              <tr>
+                <th style="width: 100px">사번</th>
+                <th>이름</th>
+                <th>이메일</th>
+                <th style="width: 100px">직급</th>
+                <th style="width: 100px">상태</th>
+                <th style="width: 80px">상세</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="emp in employees" :key="emp.employeeId">
+                <td><code>{{ emp.employeeNumber || '-' }}</code></td>
+                <td><strong>{{ emp.employeeName }}</strong></td>
+                <td>{{ emp.employeeEmail }}</td>
+                <td>{{ emp.employeePosition || '-' }}</td>
+                <td>
+                  <span :class="emp.isActive ? 'badge bg-success' : 'badge bg-secondary'">
+                    {{ emp.isActive ? '재직' : '퇴직' }}
+                  </span>
+                </td>
+                <td>
+                  <NuxtLink 
+                    :to="`/employee/${emp.employeeId}`" 
+                    class="btn btn-sm btn-outline-primary"
+                  >
+                    <i class="bi bi-eye"></i>
+                  </NuxtLink>
+                </td>
+              </tr>
+              <tr v-if="employees.length === 0">
+                <td colspan="6" class="text-center py-5 text-muted">
+                  <i class="bi bi-inbox display-4"></i>
+                  <p class="mt-2 mb-0">사원 정보가 없습니다.</p>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+
+    <!-- 사원 등록 모달 -->
+    <div class="modal fade" :class="{ show: showCreateModal }" :style="{ display: showCreateModal ? 'block' : 'none' }">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title">사원 등록</h5>
+            <button type="button" class="btn-close" @click="showCreateModal = false"></button>
+          </div>
+          <div class="modal-body">
+            <div class="mb-3">
+              <label class="form-label">이름 <span class="text-danger">*</span></label>
+              <input type="text" class="form-control" v-model="newEmployee.employeeName" required />
+            </div>
+            <div class="mb-3">
+              <label class="form-label">이메일 <span class="text-danger">*</span></label>
+              <input type="email" class="form-control" v-model="newEmployee.employeeEmail" required />
+            </div>
+            <div class="mb-3">
+              <label class="form-label">사번</label>
+              <input type="text" class="form-control" v-model="newEmployee.employeeNumber" />
+            </div>
+            <div class="mb-3">
+              <label class="form-label">직급</label>
+              <select class="form-select" v-model="newEmployee.employeePosition">
+                <option value="">선택</option>
+                <option value="사원">사원</option>
+                <option value="대리">대리</option>
+                <option value="과장">과장</option>
+                <option value="차장">차장</option>
+                <option value="부장">부장</option>
+                <option value="이사">이사</option>
+              </select>
+            </div>
+            <div class="mb-3">
+              <label class="form-label">연락처</label>
+              <input type="text" class="form-control" v-model="newEmployee.employeePhone" />
+            </div>
+            <div class="mb-3">
+              <label class="form-label">입사일</label>
+              <input type="date" class="form-control" v-model="newEmployee.joinDate" />
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" @click="showCreateModal = false">취소</button>
+            <button type="button" class="btn btn-primary" @click="createEmployee">
+              <i class="bi bi-check-lg me-1"></i> 등록
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="modal-backdrop fade show" v-if="showCreateModal"></div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { fetchCurrentUser } = useAuth()
+const router = useRouter()
+
+const employees = ref<any[]>([])
+const searchKeyword = ref('')
+const showCreateModal = ref(false)
+
+const newEmployee = ref({
+  employeeName: '',
+  employeeEmail: '',
+  employeeNumber: '',
+  employeePosition: '',
+  employeePhone: '',
+  joinDate: ''
+})
+
+onMounted(async () => {
+  const user = await fetchCurrentUser()
+  if (!user) {
+    router.push('/login')
+    return
+  }
+  
+  await loadEmployees()
+})
+
+async function loadEmployees() {
+  try {
+    const query: Record<string, any> = {}
+    if (searchKeyword.value) query.keyword = searchKeyword.value
+    
+    const res = await $fetch<{ employees: any[] }>('/api/employee/list', { query })
+    employees.value = res.employees || []
+  } catch (e) {
+    console.error('Load employees error:', e)
+  }
+}
+
+async function createEmployee() {
+  if (!newEmployee.value.employeeName || !newEmployee.value.employeeEmail) {
+    alert('이름과 이메일은 필수입니다.')
+    return
+  }
+  
+  try {
+    await $fetch('/api/employee/create', {
+      method: 'POST',
+      body: newEmployee.value
+    })
+    showCreateModal.value = false
+    newEmployee.value = {
+      employeeName: '',
+      employeeEmail: '',
+      employeeNumber: '',
+      employeePosition: '',
+      employeePhone: '',
+      joinDate: ''
+    }
+    await loadEmployees()
+  } catch (e: any) {
+    alert(e.data?.message || e.message || '등록에 실패했습니다.')
+  }
+}
+</script>
+
+<style scoped>
+.modal.show {
+  background: rgba(0, 0, 0, 0.5);
+}
+</style>