weeklyreport/frontend/employee/[id].vue

<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>