1ㅊㅏ완료

frontend/employee/index.vue

@@ -47,7 +47,7 @@
                 <th style="width: 150px">소속사</th>
                 <th style="width: 120px">직급</th>
                 <th style="width: 100px">상태</th>
-                <th style="width: 80px">상세</th>
+                <th style="width: 120px">관리</th>
               </tr>
             </thead>
             <tbody>
@@ -69,10 +69,18 @@
                 <td>
                   <NuxtLink 
                     :to="`/employee/${emp.employeeId}`" 
-                    class="btn btn-sm btn-outline-primary"
+                    class="btn btn-sm btn-outline-primary me-1"
+                    title="상세보기"
                   >
                     <i class="bi bi-eye"></i>
                   </NuxtLink>
+                  <button 
+                    class="btn btn-sm btn-outline-danger"
+                    @click.stop="confirmDelete(emp)"
+                    title="삭제"
+                  >
+                    <i class="bi bi-trash"></i>
+                  </button>
                 </td>
               </tr>
               <tr v-if="!isLoading && filteredEmployees.length === 0">
@@ -153,6 +161,37 @@
       </div>
     </div>
     <div class="modal-backdrop fade show" v-if="showCreateModal"></div>
+    
+    <!-- 삭제 확인 모달 -->
+    <div class="modal fade" :class="{ show: showDeleteModal }" :style="{ display: showDeleteModal ? 'block' : 'none' }">
+      <div class="modal-dialog">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title text-danger">
+              <i class="bi bi-exclamation-triangle me-2"></i>직원 삭제
+            </h5>
+            <button type="button" class="btn-close" @click="showDeleteModal = false"></button>
+          </div>
+          <div class="modal-body">
+            <p>
+              <strong>{{ deleteTarget?.employeeName }}</strong> ({{ deleteTarget?.employeeEmail }}) 님을 삭제하시겠습니까?
+            </p>
+            <div class="alert alert-warning small">
+              <i class="bi bi-info-circle me-1"></i>
+              주간보고가 있는 경우 비활성화 처리됩니다.
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" @click="showDeleteModal = false">취소</button>
+            <button type="button" class="btn btn-danger" @click="deleteEmployee" :disabled="isDeleting">
+              <span v-if="isDeleting" class="spinner-border spinner-border-sm me-1"></span>
+              <i v-else class="bi bi-trash me-1"></i>삭제
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="modal-backdrop fade show" v-if="showDeleteModal"></div>
   </div>
 </template>
 
@@ -164,7 +203,10 @@ const employees = ref<any[]>([])
 const searchKeyword = ref('')
 const filterStatus = ref('')
 const showCreateModal = ref(false)
+const showDeleteModal = ref(false)
+const deleteTarget = ref<any>(null)
 const isLoading = ref(true)
+const isDeleting = ref(false)
 
 const newEmployee = ref({
   employeeName: '',
@@ -243,6 +285,32 @@ async function createEmployee() {
     alert(e.data?.message || e.message || '등록에 실패했습니다.')
   }
 }
+
+function confirmDelete(emp: any) {
+  deleteTarget.value = emp
+  showDeleteModal.value = true
+}
+
+async function deleteEmployee() {
+  if (!deleteTarget.value) return
+  
+  isDeleting.value = true
+  try {
+    const res = await $fetch<{ success: boolean; action: string; message: string }>(
+      `/api/employee/${deleteTarget.value.employeeId}/delete`,
+      { method: 'DELETE' }
+    )
+    
+    alert(res.message)
+    showDeleteModal.value = false
+    deleteTarget.value = null
+    await loadEmployees()
+  } catch (e: any) {
+    alert(e.data?.message || e.message || '삭제에 실패했습니다.')
+  } finally {
+    isDeleting.value = false
+  }
+}
 </script>
 
 <style scoped>