diff --git a/src/app/(main)/employees/page.tsx b/src/app/(main)/employees/page.tsx
index 466c112..4171b07 100644
--- a/src/app/(main)/employees/page.tsx
+++ b/src/app/(main)/employees/page.tsx
@@ -1,13 +1,13 @@
 'use client';
 
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
-import { Search, Plus, MoreHorizontal, X, Pencil, Trash2, AlertTriangle, Upload, Camera, Link as LinkIcon, Clock, MapPin, Briefcase } from 'lucide-react';
+import { Search, X, Camera, Phone, Mail, Calendar, MapPin, GraduationCap, Briefcase, Ticket, FileText, ExternalLink } from 'lucide-react';
 import employeeService from '@/services/employeeService';
 import apiClient from '@/services/apiClient';
 import { useCommonCodes } from '@/hooks/useCommonCodes';
 import { useAuthStore } from '@/stores';
-import type { Employee, RoleCode, EmpStatus, DispatchStatus, DispatchHistory, Project, EquipmentAssignment } from '@/types';
+import type { Employee, RoleCode, EmpStatus, DispatchStatus } from '@/types';
 
 const statusColor: Record<string, string> = {
   ACTIVE: 'bg-status-resolved-bg text-status-resolved-text',
@@ -34,64 +34,11 @@ export default function EmployeesPage() {
 
   const roleLabel = roleCodesLoading ? {} : Object.fromEntries(empRoleCodes.map((c) => [c.codeValue, c.codeName]));
 
-  // Add Employee Modal State
-  const [isModalOpen, setIsModalOpen] = useState(false);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [modalError, setModalError] = useState<string | null>(null);
-  const [formData, setFormData] = useState({
-    loginId: '',
-    name: '',
-    email: '',
-    roleCode: 'EMPLOYEE' as RoleCode,
-    empStatus: 'ACTIVE' as EmpStatus,
-    dispatchStatus: 'WAITING' as DispatchStatus,
-  });
-
-  // Edit Modal State
-  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
-  const [isUpdating, setIsUpdating] = useState(false);
-  const [editModalError, setEditModalError] = useState<string | null>(null);
-  const [editingEmployee, setEditingEmployee] = useState<Employee | null>(null);
-
-  // Edit Modal - Section data
-  const [editBasic, setEditBasic] = useState({
-    name: '',
-    email: '',
-    phone: '',
-    joinedDate: '',
-    birthDate: '',
-    education: '',
-    major: '',
-    graduationDate: '',
-    residence: '',
-    profileImage: '',
-  });
-  const [editStatus, setEditStatus] = useState({
-    empStatus: 'ACTIVE' as EmpStatus,
-    leftDate: '',
-  });
-  const [editRole, setEditRole] = useState<RoleCode>('EMPLOYEE');
-  const [editDispatchStatus, setEditDispatchStatus] = useState<DispatchStatus>('WAITING');
-
-  // Edit Modal - Fetched data
-  const [equipmentList, setEquipmentList] = useState<EquipmentAssignment[]>([]);
-  const [dispatchHistories, setDispatchHistories] = useState<DispatchHistory[]>([]);
-  const [projects, setProjects] = useState<Project[]>([]);
-  const [editLoading, setEditLoading] = useState(false);
-
-  // Profile image upload
-  const fileInputRef = useRef<HTMLInputElement>(null);
-
-  // Confirmation dialogs within edit modal
-  const [showRoleConfirm, setShowRoleConfirm] = useState(false);
-  const [pendingRole, setPendingRole] = useState<RoleCode | null>(null);
-  const [showStatusConfirm, setShowStatusConfirm] = useState(false);
-  const [pendingStatus, setPendingStatus] = useState<EmpStatus | null>(null);
-
-  // Delete Confirmation State
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-  const [deletingEmployee, setDeletingEmployee] = useState<Employee | null>(null);
-  const [isDeleting, setIsDeleting] = useState(false);
+  // Detail Modal State
+  const [selectedEmployee, setSelectedEmployee] = useState<Employee | null>(null);
+  const [detailDispatch, setDetailDispatch] = useState<any[]>([]);
+  const [detailEquipment, setDetailEquipment] = useState<any[]>([]);
+  const [detailLoading, setDetailLoading] = useState(false);
 
   const fetchEmployees = async () => {
     try {
@@ -119,354 +66,32 @@ export default function EmployeesPage() {
     fetchEmployees();
   }, [user]);
 
-  const handleOpenModal = () => {
-    setIsModalOpen(true);
-    setFormData({
-      loginId: '',
-      name: '',
-      email: '',
-      roleCode: 'EMPLOYEE',
-      empStatus: 'ACTIVE',
-      dispatchStatus: 'WAITING',
-    });
-    setModalError(null);
-  };
-
-  const handleCloseModal = () => {
-    setIsModalOpen(false);
-    setFormData({
-      loginId: '',
-      name: '',
-      email: '',
-      roleCode: 'EMPLOYEE',
-      empStatus: 'ACTIVE',
-      dispatchStatus: 'WAITING',
-    });
-    setModalError(null);
-  };
-
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
-    const { name, value } = e.target;
-    setFormData((prev) => ({ ...prev, [name]: value }));
-  };
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    
-    if (!formData.loginId.trim() || !formData.name.trim()) {
-      setModalError('Login ID and Name are required.');
-      return;
-    }
-
-    setIsSubmitting(true);
-    setModalError(null);
+  const openDetail = async (emp: Employee) => {
+    setSelectedEmployee(emp);
+    setDetailLoading(true);
+    setDetailDispatch([]);
+    setDetailEquipment([]);
 
     try {
-      await employeeService.create(formData);
-      alert('Employee added successfully!');
-      handleCloseModal();
-      await fetchEmployees();
-    } catch (err: any) {
-      setModalError(err.response?.data?.message || 'Failed to add employee. Please try again.');
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  // Edit handlers
-  const handleEdit = async (emp: Employee) => {
-    setEditingEmployee(emp);
-    setEditModalError(null);
-    setEditLoading(true);
-
-    // Populate basic info
-    setEditBasic({
-      name: emp.name,
-      email: emp.email || '',
-      phone: emp.phone || '',
-      joinedDate: emp.joinedDate || '',
-      birthDate: emp.birthDate || '',
-      education: emp.education || '',
-      major: emp.major || '',
-      graduationDate: emp.graduationDate || '',
-      residence: emp.residence || '',
-      profileImage: emp.profileImage || '',
-    });
-    setEditStatus({
-      empStatus: emp.empStatus,
-      leftDate: emp.leftDate || '',
-    });
-    setEditRole(emp.roleCode);
-    setEditDispatchStatus(emp.dispatchStatus);
-
-    // Fetch related data in parallel
-    try {
-      const [equipRes, dispatchRes, projectsRes] = await Promise.allSettled([
-        apiClient.get<any>(`/employees/${emp.empId}/equipment`),
-        employeeService.getDispatchHistories(emp.empId),
-        apiClient.get<any>('/projects'),
+      const [dispatchRes, equipRes] = await Promise.all([
+        employeeService.getDispatchHistories(emp.empId).catch(() => null),
+        apiClient.get<any>(`/employees/${emp.empId}/equipment`).catch(() => null),
       ]);
 
-      if (equipRes.status === 'fulfilled' && equipRes.value.success) {
-        setEquipmentList(equipRes.value.data || []);
-      } else {
-        setEquipmentList([]);
-      }
-
-      if (dispatchRes.status === 'fulfilled' && dispatchRes.value.success) {
-        setDispatchHistories(dispatchRes.value.data || []);
-      } else {
-        setDispatchHistories([]);
-      }
-
-      if (projectsRes.status === 'fulfilled' && projectsRes.value.success) {
-        setProjects(projectsRes.value.data || []);
-      } else {
-        setProjects([]);
-      }
-    } catch (err) {
-      console.error('Failed to load edit modal data:', err);
-    } finally {
-      setEditLoading(false);
+      if (dispatchRes?.data) setDetailDispatch(dispatchRes.data);
+      if (equipRes?.data) setDetailEquipment(equipRes.data);
+    } catch {
+      // silently ignore
     }
 
-    setIsEditModalOpen(true);
+    setDetailLoading(false);
   };
 
-  const handleCloseEditModal = () => {
-    setIsEditModalOpen(false);
-    setEditingEmployee(null);
-    setEditModalError(null);
-    setEquipmentList([]);
-    setDispatchHistories([]);
-    setProjects([]);
-    setShowRoleConfirm(false);
-    setShowStatusConfirm(false);
-    setPendingRole(null);
-    setPendingStatus(null);
-  };
-
-  const handleBasicInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
-    const { name, value } = e.target;
-    setEditBasic((prev) => ({ ...prev, [name]: value }));
-  };
-
-  const handleProfileImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
-    const file = e.target.files?.[0];
-    if (!file || !editingEmployee) return;
-
-    try {
-      const form = new FormData();
-      form.append('file', file);
-      const uploadRes = await fetch('/api/v1/files/upload', { method: 'POST', body: form });
-      const uploadData = await uploadRes.json();
-      if (uploadData.success && uploadData.data) {
-        await employeeService.updateProfileImage(editingEmployee.empId, uploadData.data);
-        setEditBasic((prev) => ({ ...prev, profileImage: uploadData.data }));
-        // Update local employee list
-        setEmployees((prev) =>
-          prev.map((emp) =>
-            emp.empId === editingEmployee.empId ? { ...emp, profileImage: uploadData.data } : emp
-          )
-        );
-      }
-    } catch (err: any) {
-      setEditModalError(err.message || 'Failed to upload profile image.');
-    }
-    // Reset input
-    if (fileInputRef.current) fileInputRef.current.value = '';
-  };
-
-  const handleRemoveProfileImage = async () => {
-    if (!editingEmployee) return;
-    try {
-      await employeeService.updateProfileImage(editingEmployee.empId, '');
-      setEditBasic((prev) => ({ ...prev, profileImage: '' }));
-      setEmployees((prev) =>
-        prev.map((emp) =>
-          emp.empId === editingEmployee.empId ? { ...emp, profileImage: null } : emp
-        )
-      );
-    } catch (err: any) {
-      setEditModalError(err.message || 'Failed to remove profile image.');
-    }
-  };
-
-  const handleSaveBasicInfo = async () => {
-    if (!editingEmployee) return;
-    if (!editBasic.name.trim()) {
-      setEditModalError('Name is required.');
-      return;
-    }
-
-    setIsUpdating(true);
-    setEditModalError(null);
-
-    try {
-      const updateData: Record<string, unknown> = {
-        name: editBasic.name,
-        email: editBasic.email,
-        phone: editBasic.phone,
-        joinedDate: editBasic.joinedDate,
-        birthDate: editBasic.birthDate,
-        education: editBasic.education,
-        major: editBasic.major,
-        graduationDate: editBasic.graduationDate,
-        residence: editBasic.residence,
-        profileImage: editBasic.profileImage,
-      };
-      await employeeService.update(editingEmployee.empId, updateData as Partial<Employee>);
-      // Update local list
-      setEmployees((prev) =>
-        prev.map((emp) =>
-          emp.empId === editingEmployee.empId
-            ? { ...emp, ...editBasic, profileImage: editBasic.profileImage }
-            : emp
-        )
-      );
-      alert('Basic information updated successfully!');
-    } catch (err: any) {
-      setEditModalError(err.message || 'Failed to update basic information.');
-    } finally {
-      setIsUpdating(false);
-    }
-  };
-
-  const handleSaveStatus = async () => {
-    if (!editingEmployee) return;
-
-    if (editStatus.empStatus === 'RESIGNED' && !editStatus.leftDate) {
-      setEditModalError('Left date is required when changing to RESIGNED status.');
-      return;
-    }
-
-    setIsUpdating(true);
-    setEditModalError(null);
-
-    try {
-      await apiClient.put(`/employees/${editingEmployee.empId}/status`, {
-        empStatus: editStatus.empStatus,
-        leftDate: editStatus.empStatus === 'RESIGNED' ? editStatus.leftDate : null,
-      });
-      setEmployees((prev) =>
-        prev.map((emp) =>
-          emp.empId === editingEmployee.empId
-            ? { ...emp, empStatus: editStatus.empStatus, leftDate: editStatus.empStatus === 'RESIGNED' ? editStatus.leftDate : null }
-            : emp
-        )
-      );
-      setShowStatusConfirm(false);
-      setPendingStatus(null);
-      alert('Employee status updated successfully!');
-    } catch (err: any) {
-      setEditModalError(err.message || 'Failed to update employee status.');
-    } finally {
-      setIsUpdating(false);
-    }
-  };
-
-  const handleStatusChange = (newStatus: EmpStatus) => {
-    if (newStatus === editingEmployee?.empStatus) return;
-    if (newStatus === 'RESIGNED') {
-      setPendingStatus(newStatus);
-      setShowStatusConfirm(true);
-    } else {
-      setEditStatus((prev) => ({ ...prev, empStatus: newStatus }));
-      // Auto-save for non-resigned changes
-      setEditStatus((prev) => ({ ...prev, empStatus: newStatus }));
-      // Trigger save
-      setTimeout(() => {
-        handleSaveStatus();
-      }, 0);
-    }
-  };
-
-  const confirmStatusChange = () => {
-    if (pendingStatus) {
-      setEditStatus((prev) => ({ ...prev, empStatus: pendingStatus }));
-      setShowStatusConfirm(false);
-      setTimeout(() => {
-        handleSaveStatus();
-      }, 0);
-    }
-  };
-
-  const handleRoleChange = (newRole: RoleCode) => {
-    if (newRole === editingEmployee?.roleCode) return;
-    setPendingRole(newRole);
-    setShowRoleConfirm(true);
-  };
-
-  const confirmRoleChange = async () => {
-    if (!editingEmployee || !pendingRole) return;
-    setIsUpdating(true);
-    setEditModalError(null);
-    setShowRoleConfirm(false);
-
-    try {
-      await apiClient.put(`/employees/${editingEmployee.empId}/role`, { roleCode: pendingRole });
-      setEditRole(pendingRole);
-      setEmployees((prev) =>
-        prev.map((emp) =>
-          emp.empId === editingEmployee.empId ? { ...emp, roleCode: pendingRole! } : emp
-        )
-      );
-      alert('Role updated successfully!');
-    } catch (err: any) {
-      setEditModalError(err.message || 'Failed to update role.');
-    } finally {
-      setIsUpdating(false);
-      setPendingRole(null);
-    }
-  };
-
-  const handleDispatchStatusChange = async (newStatus: DispatchStatus) => {
-    if (!editingEmployee || newStatus === editingEmployee.dispatchStatus) return;
-    setIsUpdating(true);
-    setEditModalError(null);
-
-    try {
-      await apiClient.put(`/employees/${editingEmployee.empId}/dispatch-status`, { dispatchStatus: newStatus });
-      setEditDispatchStatus(newStatus);
-      setEmployees((prev) =>
-        prev.map((emp) =>
-          emp.empId === editingEmployee.empId ? { ...emp, dispatchStatus: newStatus } : emp
-        )
-      );
-    } catch (err: any) {
-      setEditModalError(err.message || 'Failed to update dispatch status.');
-    } finally {
-      setIsUpdating(false);
-    }
-  };
-
-  // Delete handlers
-  const handleDelete = (emp: Employee) => {
-    setDeletingEmployee(emp);
-    setIsDeleteDialogOpen(true);
-  };
-
-  const handleCloseDeleteDialog = () => {
-    setIsDeleteDialogOpen(false);
-    setDeletingEmployee(null);
-  };
-
-  const handleDeleteConfirm = async () => {
-    if (!deletingEmployee) return;
-
-    setIsDeleting(true);
-
-    try {
-      await employeeService.delete(deletingEmployee.empId);
-      alert('Employee deleted successfully!');
-      handleCloseDeleteDialog();
-      await fetchEmployees();
-    } catch (err: any) {
-      alert(err.response?.data?.message || 'Failed to delete employee. Please try again.');
-      handleCloseDeleteDialog();
-    } finally {
-      setIsDeleting(false);
-    }
+  const closeDetail = () => {
+    setSelectedEmployee(null);
+    setDetailDispatch([]);
+    setDetailEquipment([]);
+    setDetailLoading(false);
   };
 
   const [skillKeyword, setSkillKeyword] = useState('');
@@ -498,711 +123,235 @@ export default function EmployeesPage() {
     return new Date(dateStr).toLocaleDateString('ko-KR', { year: 'numeric', month: '2-digit', day: '2-digit' });
   };
 
-  const currentDispatch = dispatchHistories.find((d) => !d.endDate) || null;
-  const pastDispatches = dispatchHistories.filter((d) => d.endDate);
-
-  const getProjectById = (projectId: number) => {
-    return projects.find((p) => p.projectId === projectId) || null;
+  const educationLabel: Record<string, string> = {
+    HIGH_SCHOOL: '고졸',
+    ASSOCIATE: '전문대',
+    BACHELOR: '학사',
+    MASTER: '석사',
+    DOCTORATE: '박사',
   };
 
-  // Add Employee Modal
-  if (isModalOpen) {
-    return (
-      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-        <div className="bg-surface rounded-2xl shadow-xl max-w-md w-full mx-4 p-6 relative animate-in fade-in zoom-in duration-200">
-          <button
-            onClick={handleCloseModal}
-            className="absolute top-4 right-4 p-1.5 text-text-muted hover:text-text-main hover:bg-gray-100 rounded-lg transition-all"
-          >
-            <X className="w-5 h-5" />
-          </button>
-          
-          <h3 className="font-outfit text-xl font-semibold text-text-main mb-1">Add Employee</h3>
-          <p className="text-text-muted text-sm mb-6">Create a new employee account</p>
-          
-          <form onSubmit={handleSubmit} className="space-y-4">
-            <div>
-              <label className="block text-sm font-medium text-text-main mb-1.5">
-                Login ID <span className="text-status-critical-text">*</span>
-              </label>
-              <input
-                type="text"
-                name="loginId"
-                value={formData.loginId}
-                onChange={handleInputChange}
-                required
-                className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
-                placeholder="Enter login ID"
-              />
-            </div>
-            
-            <div>
-              <label className="block text-sm font-medium text-text-main mb-1.5">
-                Name <span className="text-status-critical-text">*</span>
-              </label>
-              <input
-                type="text"
-                name="name"
-                value={formData.name}
-                onChange={handleInputChange}
-                required
-                className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
-                placeholder="Enter full name"
-              />
-            </div>
-            
-            <div>
-              <label className="block text-sm font-medium text-text-main mb-1.5">Email</label>
-              <input
-                type="email"
-                name="email"
-                value={formData.email}
-                onChange={handleInputChange}
-                className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
-                placeholder="email@example.com"
-              />
-            </div>
-            
-            <div>
-              <label className="block text-sm font-medium text-text-main mb-1.5">Role</label>
-              <select
-                name="roleCode"
-                value={formData.roleCode}
-                onChange={handleInputChange}
-                className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
-              >
-                {roleCodesLoading ? (
-                  <option value="">Loading roles...</option>
-                ) : (
-                  empRoleCodes.map((code) => (
-                    <option key={code.codeValue} value={code.codeValue}>
-                      {code.codeName} ({code.codeValue})
-                    </option>
-                  ))
-                )}
-              </select>
-            </div>
-            
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <label className="block text-sm font-medium text-text-main mb-1.5">Employee Status</label>
-                <select
-                  name="empStatus"
-                  value={formData.empStatus}
-                  onChange={handleInputChange}
-                  className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
-                >
-                  {statusCodesLoading ? (
-                    <option value="">Loading status...</option>
-                  ) : (
-                    empStatusCodes.map((code) => (
-                      <option key={code.codeValue} value={code.codeValue}>
-                        {code.codeName} ({code.codeValue})
-                      </option>
-                    ))
-                  )}
-                </select>
-              </div>
-              
-              <div>
-                <label className="block text-sm font-medium text-text-main mb-1.5">Dispatch Status</label>
-                <select
-                  name="dispatchStatus"
-                  value={formData.dispatchStatus}
-                  onChange={handleInputChange}
-                  className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
-                >
-                  <option value="WAITING">대기 (WAITING)</option>
-                  <option value="DISPATCHED">파견중 (DISPATCHED)</option>
-                </select>
-              </div>
-            </div>
-            
-            {modalError && (
-              <div className="bg-status-critical-bg border border-status-critical text-status-critical-text rounded-xl px-4 py-3 text-sm">
-                {modalError}
-              </div>
-            )}
-            
-            <div className="flex gap-3 pt-4">
-              <button
-                type="button"
-                onClick={handleCloseModal}
-                disabled={isSubmitting}
-                className="flex-1 px-4 py-2.5 rounded-xl border border-border text-text-main text-sm font-medium hover:bg-gray-100 transition-all disabled:opacity-50"
-              >
-                Cancel
-              </button>
-              <button
-                type="submit"
-                disabled={isSubmitting}
-                className="flex-1 px-4 py-2.5 rounded-xl bg-primary hover:bg-primary-hover text-white text-sm font-semibold shadow-soft transition-all disabled:opacity-50 disabled:cursor-not-allowed"
-              >
-                {isSubmitting ? 'Adding...' : 'Add Employee'}
-              </button>
-            </div>
-          </form>
-        </div>
-      </div>
-    );
-  }
+  // ── Detail Modal ──
+  if (selectedEmployee) {
+    const emp = selectedEmployee;
+    const currentDispatch = detailDispatch.find((d: any) => !d.endDate) || null;
+    const activeEquipments = (detailEquipment || []).filter((eq: any) => !eq.returnedDate && eq.equipment);
 
-  // Edit Employee Modal - REDESIGNED
-  if (isEditModalOpen) {
     return (
-      <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/50 backdrop-blur-sm overflow-y-auto">
-        <div className="bg-surface rounded-2xl shadow-xl max-w-3xl w-full mx-4 my-8 relative animate-in fade-in zoom-in duration-200">
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm p-4" onClick={closeDetail}>
+        <div
+          className="bg-surface rounded-2xl shadow-xl max-w-lg w-full max-h-[85vh] overflow-y-auto animate-in fade-in zoom-in duration-200"
+          onClick={(e) => e.stopPropagation()}
+        >
           {/* Header */}
           <div className="sticky top-0 bg-surface rounded-t-2xl border-b border-border px-6 py-4 flex items-center justify-between z-10">
-            <div>
-              <h3 className="font-outfit text-xl font-semibold text-text-main">Edit Employee</h3>
-              <p className="text-text-muted text-sm">{editingEmployee?.name} ({editingEmployee?.loginId})</p>
-            </div>
+            <h3 className="font-outfit text-lg font-semibold text-text-main">Employee Detail</h3>
             <button
-              onClick={handleCloseEditModal}
+              onClick={closeDetail}
               className="p-1.5 text-text-muted hover:text-text-main hover:bg-gray-100 rounded-lg transition-all"
             >
               <X className="w-5 h-5" />
             </button>
           </div>
 
-          {editModalError && (
-            <div className="mx-6 mt-4 bg-status-critical-bg border border-status-critical text-status-critical-text rounded-xl px-4 py-3 text-sm">
-              {editModalError}
-            </div>
-          )}
-
-          {editLoading ? (
+          {detailLoading ? (
             <div className="p-6 space-y-6">
-              {[1, 2, 3, 4].map((i) => (
-                <div key={i} className="bg-white rounded-2xl border border-border p-5">
-                  <div className="h-5 w-32 bg-gray-200 rounded mb-4 animate-pulse" />
-                  <div className="grid grid-cols-2 gap-4">
-                    {[1, 2, 3, 4].map((j) => (
-                      <div key={j} className="h-10 bg-gray-100 rounded-xl animate-pulse" />
-                    ))}
+              <div className="bg-white rounded-2xl border border-border p-5">
+                <div className="flex items-center gap-4 mb-4">
+                  <div className="w-16 h-16 rounded-full bg-gray-200 animate-pulse" />
+                  <div className="space-y-2 flex-1">
+                    <div className="h-5 w-32 bg-gray-200 rounded animate-pulse" />
+                    <div className="h-4 w-24 bg-gray-200 rounded animate-pulse" />
                   </div>
                 </div>
-              ))}
+                <div className="grid grid-cols-2 gap-3">
+                  {[1, 2, 3, 4].map((i) => (
+                    <div key={i} className="h-4 bg-gray-100 rounded animate-pulse" />
+                  ))}
+                </div>
+              </div>
+              <div className="bg-white rounded-2xl border border-border p-5">
+                <div className="h-5 w-24 bg-gray-200 rounded mb-3 animate-pulse" />
+                <div className="h-16 bg-gray-100 rounded-xl animate-pulse" />
+              </div>
             </div>
           ) : (
-            <div className="p-6 space-y-6">
-              {/* SECTION 1: 기본 정보 */}
+            <div className="p-6 space-y-5">
+              {/* Profile Card */}
               <div className="bg-white rounded-2xl border border-border p-5">
-                <h4 className="font-outfit text-base font-semibold text-text-main mb-4 flex items-center gap-2">
-                  <span className="w-1.5 h-5 bg-primary rounded-full" />
-                  기본 정보
-                </h4>
-
-                {/* Profile Image */}
-                <div className="flex items-center gap-4 mb-5">
-                  <div className="relative">
-                    {editBasic.profileImage ? (
-                      <img
-                        src={editBasic.profileImage}
-                        alt={editBasic.name}
-                        className="w-16 h-16 rounded-full object-cover border-2 border-border"
-                      />
-                    ) : (
-                      <div className={`w-16 h-16 rounded-full ${getInitialColor(editBasic.name, 0)} flex items-center justify-center text-xl font-semibold text-white`}>
-                        {editBasic.name[0]}
-                      </div>
-                    )}
-                  </div>
-                  <div className="flex gap-2">
-                    <input
-                      ref={fileInputRef}
-                      type="file"
-                      accept="image/*"
-                      onChange={handleProfileImageUpload}
-                      className="hidden"
+                <div className="flex items-center gap-4 mb-4">
+                  {emp.profileImage ? (
+                    <img
+                      src={emp.profileImage}
+                      alt={emp.name}
+                      className="w-16 h-16 rounded-full object-cover border-2 border-border"
                     />
-                    <button
-                      type="button"
-                      onClick={() => fileInputRef.current?.click()}
-                      className="flex items-center gap-1.5 px-3 py-2 rounded-xl border border-border text-sm font-medium text-text-main hover:bg-gray-50 transition-all"
-                    >
-                      <Camera className="w-4 h-4" />
-                      Upload
-                    </button>
-                    {editBasic.profileImage && (
-                      <button
-                        type="button"
-                        onClick={handleRemoveProfileImage}
-                        className="flex items-center gap-1.5 px-3 py-2 rounded-xl border border-border text-sm font-medium text-status-critical-text hover:bg-red-50 transition-all"
-                      >
-                        <X className="w-4 h-4" />
-                        Remove
-                      </button>
-                    )}
+                  ) : (
+                    <div className={`w-16 h-16 rounded-full ${getInitialColor(emp.name, 0)} flex items-center justify-center text-xl font-semibold text-white`}>
+                      {emp.name[0]}
+                    </div>
+                  )}
+                  <div className="flex-1 min-w-0">
+                    <h4 className="font-outfit text-lg font-semibold text-text-main">{emp.name}</h4>
+                    <div className="flex flex-wrap items-center gap-1.5 mt-1">
+                      <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium bg-primary/10 text-primary">
+                        {roleLabel[emp.roleCode] || emp.roleCode}
+                      </span>
+                      <span className={`inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium ${statusColor[emp.empStatus]}`}>
+                        {emp.empStatus === 'ACTIVE' ? '재직' : emp.empStatus === 'ON_LEAVE' ? '휴직' : '퇴사'}
+                      </span>
+                      {emp.dispatchStatus === 'DISPATCHED' && (
+                        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[10px] font-medium bg-blue-100 text-blue-600">
+                          파견중
+                        </span>
+                      )}
+                    </div>
                   </div>
                 </div>
 
-                {/* Basic Info Fields */}
-                <div className="grid grid-cols-2 gap-4">
-                  <div>
-                    <label className="block text-xs font-medium text-text-muted mb-1">Name *</label>
-                    <input
-                      type="text"
-                      name="name"
-                      value={editBasic.name}
-                      onChange={handleBasicInputChange}
-                      className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-xs font-medium text-text-muted mb-1">Email</label>
-                    <input
-                      type="email"
-                      name="email"
-                      value={editBasic.email}
-                      onChange={handleBasicInputChange}
-                      className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-xs font-medium text-text-muted mb-1">Phone</label>
-                    <input
-                      type="tel"
-                      name="phone"
-                      value={editBasic.phone}
-                      onChange={handleBasicInputChange}
-                      className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
-                      placeholder="010-0000-0000"
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-xs font-medium text-text-muted mb-1">Joined Date</label>
-                    <input
-                      type="date"
-                      name="joinedDate"
-                      value={editBasic.joinedDate}
-                      onChange={handleBasicInputChange}
-                      className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-xs font-medium text-text-muted mb-1">Birth Date</label>
-                    <input
-                      type="date"
-                      name="birthDate"
-                      value={editBasic.birthDate}
-                      onChange={handleBasicInputChange}
-                      className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-xs font-medium text-text-muted mb-1">Education</label>
-                    <select
-                      name="education"
-                      value={editBasic.education}
-                      onChange={handleBasicInputChange}
-                      className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
-                    >
-                      <option value="">Select education</option>
-                      <option value="HIGH_SCHOOL">High School</option>
-                      <option value="ASSOCIATE">Associate</option>
-                      <option value="BACHELOR">Bachelor</option>
-                      <option value="MASTER">Master</option>
-                      <option value="DOCTORATE">Doctorate</option>
-                    </select>
-                  </div>
-                  <div>
-                    <label className="block text-xs font-medium text-text-muted mb-1">Major</label>
-                    <input
-                      type="text"
-                      name="major"
-                      value={editBasic.major}
-                      onChange={handleBasicInputChange}
-                      className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
-                    />
-                  </div>
-                  <div>
-                    <label className="block text-xs font-medium text-text-muted mb-1">Graduation Date</label>
-                    <input
-                      type="date"
-                      name="graduationDate"
-                      value={editBasic.graduationDate}
-                      onChange={handleBasicInputChange}
-                      className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
-                    />
-                  </div>
-                  <div className="col-span-2">
-                    <label className="block text-xs font-medium text-text-muted mb-1">Residence</label>
-                    <input
-                      type="text"
-                      name="residence"
-                      value={editBasic.residence}
-                      onChange={handleBasicInputChange}
-                      className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
-                    />
+                {/* Contact & Personal Info */}
+                <div className="grid grid-cols-2 gap-3 text-sm">
+                  {emp.email && (
+                    <div className="flex items-center gap-2 text-text-muted">
+                      <Mail className="w-3.5 h-3.5 flex-shrink-0" />
+                      <span className="truncate">{emp.email}</span>
+                    </div>
+                  )}
+                  {emp.phone && (
+                    <div className="flex items-center gap-2 text-text-muted">
+                      <Phone className="w-3.5 h-3.5 flex-shrink-0" />
+                      <span>{emp.phone}</span>
+                    </div>
+                  )}
+                  {emp.birthDate && (
+                    <div className="flex items-center gap-2 text-text-muted">
+                      <Calendar className="w-3.5 h-3.5 flex-shrink-0" />
+                      <span>{formatDate(emp.birthDate)}</span>
+                    </div>
+                  )}
+                  {emp.residence && (
+                    <div className="flex items-center gap-2 text-text-muted">
+                      <MapPin className="w-3.5 h-3.5 flex-shrink-0" />
+                      <span className="truncate">{emp.residence}</span>
+                    </div>
+                  )}
+                  {emp.education && (
+                    <div className="flex items-center gap-2 text-text-muted">
+                      <GraduationCap className="w-3.5 h-3.5 flex-shrink-0" />
+                      <span>{educationLabel[emp.education] || emp.education}{emp.major ? ` · ${emp.major}` : ''}</span>
+                    </div>
+                  )}
+                  {emp.graduationDate && (
+                    <div className="flex items-center gap-2 text-text-muted">
+                      <Calendar className="w-3.5 h-3.5 flex-shrink-0" />
+                      <span>졸업 {formatDate(emp.graduationDate)}</span>
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Current Dispatch */}
+              {currentDispatch && (
+                <div>
+                  <h5 className="text-xs font-semibold text-text-muted uppercase tracking-wide mb-2 flex items-center gap-1.5">
+                    <Briefcase className="w-3.5 h-3.5" />
+                    현재 파견
+                  </h5>
+                  <div className="bg-white rounded-2xl border border-border p-4">
+                    <div className="flex items-center justify-between mb-2">
+                      <p className="font-medium text-text-main">{currentDispatch.projectName || 'Project'}</p>
+                      <span className="text-xs text-text-muted">
+                        {formatDate(currentDispatch.startDate)} ~ 진행중
+                      </span>
+                    </div>
+                    {currentDispatch.roleTitle && (
+                      <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-indigo-50 text-indigo-600">
+                        {currentDispatch.roleTitle}
+                      </span>
+                    )}
                   </div>
                 </div>
+              )}
 
-                <div className="flex justify-end mt-4 pt-4 border-t border-border">
+              {/* Quick Links */}
+              <div>
+                <h5 className="text-xs font-semibold text-text-muted uppercase tracking-wide mb-2">빠른 이동</h5>
+                <div className="grid grid-cols-2 gap-2">
                   <button
-                    type="button"
-                    onClick={handleSaveBasicInfo}
-                    disabled={isUpdating}
-                    className="px-5 py-2.5 rounded-xl bg-primary hover:bg-primary-hover text-white text-sm font-semibold shadow-soft transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                    onClick={() => router.push(`/dispatch?empId=${emp.empId}`)}
+                    className="flex items-center gap-2 px-3 py-2.5 rounded-xl bg-white border border-border text-sm text-text-main hover:bg-gray-50 transition-all"
                   >
-                    {isUpdating ? 'Saving...' : 'Save Basic Info'}
+                    <Briefcase className="w-4 h-4 text-text-muted" />
+                    파견이력
+                  </button>
+                  <button
+                    onClick={() => router.push(`/itam?userId=${emp.empId}`)}
+                    className="flex items-center gap-2 px-3 py-2.5 rounded-xl bg-white border border-border text-sm text-text-main hover:bg-gray-50 transition-all"
+                  >
+                    <Camera className="w-4 h-4 text-text-muted" />
+                    지급장비
+                  </button>
+                  <button
+                    onClick={() => router.push('/profile/portfolio')}
+                    className="flex items-center gap-2 px-3 py-2.5 rounded-xl bg-white border border-border text-sm text-text-main hover:bg-gray-50 transition-all"
+                  >
+                    <FileText className="w-4 h-4 text-text-muted" />
+                    포트폴리오
+                  </button>
+                  <button
+                    onClick={() => router.push(`/issues?requesterId=${emp.empId}`)}
+                    className="flex items-center gap-2 px-3 py-2.5 rounded-xl bg-white border border-border text-sm text-text-main hover:bg-gray-50 transition-all"
+                  >
+                    <Ticket className="w-4 h-4 text-text-muted" />
+                    SR 티켓
+                  </button>
+                  <button
+                    onClick={() => router.push(`/work-reports?userId=${emp.empId}`)}
+                    className="flex items-center gap-2 px-3 py-2.5 rounded-xl bg-white border border-border text-sm text-text-main hover:bg-gray-50 transition-all col-span-2"
+                  >
+                    <FileText className="w-4 h-4 text-text-muted" />
+                    업무보고서
                   </button>
                 </div>
               </div>
 
-              {/* SECTION 2: 상태 & 권한 */}
-              <div className="bg-white rounded-2xl border border-border p-5">
-                <h4 className="font-outfit text-base font-semibold text-text-main mb-4 flex items-center gap-2">
-                  <span className="w-1.5 h-5 bg-secondary rounded-full" />
-                  상태 & 권한
-                </h4>
-
-                <div className="grid grid-cols-3 gap-4">
-                  {/* Employee Status */}
-                  <div>
-                    <label className="block text-xs font-medium text-text-muted mb-1">Employee Status</label>
-                    <select
-                      value={editStatus.empStatus}
-                      onChange={(e) => handleStatusChange(e.target.value as EmpStatus)}
-                      className={`w-full px-3 py-2.5 rounded-xl border text-sm font-medium focus:outline-none focus:ring-2 transition-all ${
-                        editStatus.empStatus === 'ACTIVE'
-                          ? 'bg-status-resolved-bg border-status-resolved text-status-resolved-text focus:ring-status-resolved'
-                          : editStatus.empStatus === 'ON_LEAVE'
-                          ? 'bg-status-pending-bg border-status-pending text-status-pending-text focus:ring-status-pending'
-                          : 'bg-status-critical-bg border-status-critical text-status-critical-text focus:ring-status-critical'
-                      }`}
-                    >
-                      <option value="ACTIVE">재직 (ACTIVE)</option>
-                      <option value="ON_LEAVE">휴직 (ON_LEAVE)</option>
-                      <option value="RESIGNED">퇴사 (RESIGNED)</option>
-                    </select>
-                  </div>
-
-                  {/* Role */}
-                  <div>
-                    <label className="block text-xs font-medium text-text-muted mb-1">Role</label>
-                    <select
-                      value={editRole}
-                      onChange={(e) => handleRoleChange(e.target.value as RoleCode)}
-                      className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
-                    >
-                      {roleCodesLoading ? (
-                        <option value="">Loading...</option>
-                      ) : (
-                        empRoleCodes.map((code) => (
-                          <option key={code.codeValue} value={code.codeValue}>
-                            {code.codeName}
-                          </option>
-                        ))
-                      )}
-                    </select>
-                  </div>
-
-                  {/* Dispatch Status */}
-                  <div>
-                    <label className="block text-xs font-medium text-text-muted mb-1">Dispatch Status</label>
-                    <select
-                      value={editDispatchStatus}
-                      onChange={(e) => handleDispatchStatusChange(e.target.value as DispatchStatus)}
-                      className="w-full px-3 py-2.5 rounded-xl bg-gray-50 border border-border text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all"
-                    >
-                      <option value="WAITING">대기 (WAITING)</option>
-                      <option value="DISPATCHED">파견중 (DISPATCHED)</option>
-                    </select>
-                  </div>
-                </div>
-
-                {/* Left Date (shown when RESIGNED) */}
-                {editStatus.empStatus === 'RESIGNED' && (
-                  <div className="mt-4 p-4 bg-status-critical-bg rounded-xl border border-status-critical/20">
-                    <label className="block text-xs font-medium text-status-critical-text mb-1">Left Date *</label>
-                    <input
-                      type="date"
-                      value={editStatus.leftDate}
-                      onChange={(e) => setEditStatus((prev) => ({ ...prev, leftDate: e.target.value }))}
-                      className="w-full px-3 py-2.5 rounded-xl bg-white border border-status-critical/30 text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-status-critical transition-all"
-                    />
-                  </div>
-                )}
-              </div>
-
-              {/* SECTION 3: 현재 지급 장비 */}
-              <div className="bg-white rounded-2xl border border-border p-5">
-                <h4 className="font-outfit text-base font-semibold text-text-main mb-4 flex items-center gap-2">
-                  <span className="w-1.5 h-5 bg-tertiary rounded-full" />
-                  현재 지급 장비
-                </h4>
-
-                {equipmentList.length === 0 ? (
-                  <div className="text-center py-6 text-text-muted text-sm">
-                    No equipment currently assigned.
+              {/* Assigned Equipment */}
+              <div>
+                <h5 className="text-xs font-semibold text-text-muted uppercase tracking-wide mb-2 flex items-center gap-1.5">
+                  <ExternalLink className="w-3.5 h-3.5" />
+                  지급 장비
+                </h5>
+                {activeEquipments.length === 0 ? (
+                  <div className="bg-white rounded-2xl border border-border p-4 text-center text-sm text-text-muted">
+                    현재 지급된 장비가 없습니다.
                   </div>
                 ) : (
-                  <div className="overflow-x-auto">
+                  <div className="bg-white rounded-2xl border border-border overflow-hidden">
                     <table className="w-full text-left text-sm">
                       <thead>
-                        <tr className="border-b border-border">
-                          <th className="py-2 px-3 text-xs font-semibold text-text-muted uppercase">자산코드</th>
-                          <th className="py-2 px-3 text-xs font-semibold text-text-muted uppercase">모델명</th>
-                          <th className="py-2 px-3 text-xs font-semibold text-text-muted uppercase">제조사</th>
-                          <th className="py-2 px-3 text-xs font-semibold text-text-muted uppercase">시리얼번호</th>
-                          <th className="py-2 px-3 text-xs font-semibold text-text-muted uppercase">지급일</th>
-                          <th className="py-2 px-3 text-xs font-semibold text-text-muted uppercase">상태</th>
+                        <tr className="bg-gray-50/50">
+                          <th className="py-2 px-3 text-[10px] font-semibold text-text-muted uppercase">자산코드</th>
+                          <th className="py-2 px-3 text-[10px] font-semibold text-text-muted uppercase">모델명</th>
+                          <th className="py-2 px-3 text-[10px] font-semibold text-text-muted uppercase">제조사</th>
+                          <th className="py-2 px-3 text-[10px] font-semibold text-text-muted uppercase">지급일</th>
                         </tr>
                       </thead>
                       <tbody className="divide-y divide-gray-100">
-                        {equipmentList
-                          .filter((eq) => !eq.returnedDate)
-                          .map((eq) => (
-                            <tr key={eq.assignmentId} className="hover:bg-gray-50">
-                              <td className="py-2.5 px-3 font-mono text-xs">{eq.equipment?.assetCode || '-'}</td>
-                              <td className="py-2.5 px-3">{eq.equipment?.modelName || '-'}</td>
-                              <td className="py-2.5 px-3">{eq.equipment?.manufacturer || '-'}</td>
-                              <td className="py-2.5 px-3 font-mono text-xs">{eq.equipment?.serialNumber || '-'}</td>
-                              <td className="py-2.5 px-3">{formatDate(eq.assignedDate)}</td>
-                              <td className="py-2.5 px-3">
-                                <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-status-pending-bg text-status-pending-text">
-                                  사용중
-                                </span>
-                              </td>
-                            </tr>
-                          ))}
+                        {activeEquipments.map((eq: any) => (
+                          <tr key={eq.assignmentId} className="hover:bg-gray-50">
+                            <td className="py-2 px-3 font-mono text-xs">{eq.equipment?.assetCode || '-'}</td>
+                            <td className="py-2 px-3">{eq.equipment?.modelName || '-'}</td>
+                            <td className="py-2 px-3">{eq.equipment?.manufacturer || '-'}</td>
+                            <td className="py-2 px-3 text-xs text-text-muted">{formatDate(eq.assignedDate)}</td>
+                          </tr>
+                        ))}
                       </tbody>
                     </table>
                   </div>
                 )}
-
-                <div className="mt-3 flex items-center gap-1.5 text-xs text-text-muted">
-                  <LinkIcon className="w-3.5 h-3.5" />
-                  <button
-                    onClick={() => router.push('/itam')}
-                    className="text-primary hover:underline"
-                  >
-                    Manage equipment in ITAM →
-                  </button>
-                </div>
-              </div>
-
-              {/* SECTION 4: 파견 정보 */}
-              <div className="bg-white rounded-2xl border border-border p-5">
-                <h4 className="font-outfit text-base font-semibold text-text-main mb-4 flex items-center gap-2">
-                  <span className="w-1.5 h-5 bg-status-open rounded-full" />
-                  파견 정보
-                </h4>
-
-                {/* Current Dispatch */}
-                {currentDispatch ? (
-                  <div className="mb-5 p-4 bg-status-open-bg rounded-xl border border-status-open/20">
-                    <div className="flex items-center gap-2 mb-2">
-                      <Briefcase className="w-4 h-4 text-status-open" />
-                      <span className="text-sm font-semibold text-text-main">현재 파견중</span>
-                    </div>
-                    <div className="grid grid-cols-2 gap-3 text-sm">
-                      <div>
-                        <span className="text-xs text-text-muted">프로젝트</span>
-                        <p className="font-medium text-text-main">{currentDispatch.projectName || '-'}</p>
-                      </div>
-                      <div>
-                        <span className="text-xs text-text-muted">역할</span>
-                        <p className="font-medium text-text-main">{currentDispatch.roleTitle || '-'}</p>
-                      </div>
-                      <div>
-                        <span className="text-xs text-text-muted">기간</span>
-                        <p className="font-medium text-text-main">
-                          {formatDate(currentDispatch.startDate)} ~ 진행중
-                        </p>
-                      </div>
-                      <div>
-                        <span className="text-xs text-text-muted">근무지</span>
-                        <p className="font-medium text-text-main flex items-center gap-1">
-                          <MapPin className="w-3 h-3" />
-                          {getProjectById(currentDispatch.projectId)?.workAddress || '-'}
-                        </p>
-                      </div>
-                    </div>
-                  </div>
-                ) : (
-                  <div className="mb-5 p-4 bg-gray-50 rounded-xl text-center text-sm text-text-muted">
-                    현재 파견된 프로젝트가 없습니다.
-                  </div>
-                )}
-
-                {/* Dispatch History */}
-                {pastDispatches.length > 0 && (
-                  <div>
-                    <h5 className="text-sm font-semibold text-text-main mb-3 flex items-center gap-1.5">
-                      <Clock className="w-4 h-4 text-text-muted" />
-                      파견 이력 ({pastDispatches.length})
-                    </h5>
-                    <div className="space-y-2">
-                      {pastDispatches.map((dh) => (
-                        <div
-                          key={dh.dispatchId}
-                          className="flex items-center justify-between p-3 rounded-xl border border-border hover:bg-gray-50 transition-all"
-                        >
-                          <div className="flex-1 min-w-0">
-                            <p className="text-sm font-medium text-text-main truncate">{dh.projectName || 'Project'}</p>
-                            <p className="text-xs text-text-muted">{dh.roleTitle}</p>
-                          </div>
-                          <div className="text-right flex-shrink-0 ml-4">
-                            <p className="text-xs text-text-muted">
-                              {formatDate(dh.startDate)} ~ {formatDate(dh.endDate)}
-                            </p>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                )}
-
-                <div className="mt-3 flex items-center gap-1.5 text-xs text-text-muted">
-                  <LinkIcon className="w-3.5 h-3.5" />
-                  <button
-                    onClick={() => router.push(`/profile/${editingEmployee?.empId}`)}
-                    className="text-primary hover:underline"
-                  >
-                    View full portfolio →
-                  </button>
-                </div>
               </div>
             </div>
           )}
-
-          {/* Modal Footer */}
-          <div className="sticky bottom-0 bg-surface rounded-b-2xl border-t border-border px-6 py-4 flex justify-end gap-3">
-            <button
-              type="button"
-              onClick={handleCloseEditModal}
-              disabled={isUpdating}
-              className="px-5 py-2.5 rounded-xl border border-border text-text-main text-sm font-medium hover:bg-gray-100 transition-all disabled:opacity-50"
-            >
-              Close
-            </button>
-          </div>
-        </div>
-
-        {/* Role Change Confirmation Dialog */}
-        {showRoleConfirm && (
-          <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm">
-            <div className="bg-surface rounded-2xl shadow-xl max-w-sm w-full mx-4 p-6 animate-in fade-in zoom-in duration-200">
-              <div className="flex items-center gap-3 mb-4">
-                <div className="w-10 h-10 rounded-full bg-status-pending-bg flex items-center justify-center flex-shrink-0">
-                  <AlertTriangle className="w-5 h-5 text-status-pending-text" />
-                </div>
-                <div>
-                  <h4 className="font-outfit text-lg font-semibold text-text-main">Confirm Role Change</h4>
-                  <p className="text-text-muted text-sm">Change role for {editingEmployee?.name}?</p>
-                </div>
-              </div>
-              <div className="bg-gray-50 rounded-xl px-4 py-3 mb-5">
-                <p className="text-sm text-text-main">
-                  Role will change from{' '}
-                  <span className="font-semibold">{roleLabel[editingEmployee?.roleCode || 'EMPLOYEE'] || editingEmployee?.roleCode}</span>
-                  {' '}to{' '}
-                  <span className="font-semibold">{roleLabel[pendingRole || 'EMPLOYEE'] || pendingRole}</span>
-                </p>
-              </div>
-              <div className="flex gap-3">
-                <button
-                  onClick={() => { setShowRoleConfirm(false); setPendingRole(null); }}
-                  className="flex-1 px-4 py-2.5 rounded-xl border border-border text-text-main text-sm font-medium hover:bg-gray-100 transition-all"
-                >
-                  Cancel
-                </button>
-                <button
-                  onClick={confirmRoleChange}
-                  className="flex-1 px-4 py-2.5 rounded-xl bg-primary hover:bg-primary-hover text-white text-sm font-semibold shadow-soft transition-all"
-                >
-                  Confirm
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-
-        {/* Status Change Confirmation Dialog (for RESIGNED) */}
-        {showStatusConfirm && (
-          <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm">
-            <div className="bg-surface rounded-2xl shadow-xl max-w-sm w-full mx-4 p-6 animate-in fade-in zoom-in duration-200">
-              <div className="flex items-center gap-3 mb-4">
-                <div className="w-10 h-10 rounded-full bg-status-critical-bg flex items-center justify-center flex-shrink-0">
-                  <AlertTriangle className="w-5 h-5 text-status-critical-text" />
-                </div>
-                <div>
-                  <h4 className="font-outfit text-lg font-semibold text-text-main">Confirm Status Change</h4>
-                  <p className="text-text-muted text-sm">Change status to RESIGNED?</p>
-                </div>
-              </div>
-              <div className="bg-status-critical-bg border border-status-critical/20 rounded-xl px-4 py-3 mb-5">
-                <p className="text-sm text-status-critical-text">
-                  This will mark <span className="font-semibold">{editingEmployee?.name}</span> as resigned.
-                  Please ensure the left date is set.
-                </p>
-              </div>
-              <div className="flex gap-3">
-                <button
-                  onClick={() => { setShowStatusConfirm(false); setPendingStatus(null); }}
-                  className="flex-1 px-4 py-2.5 rounded-xl border border-border text-text-main text-sm font-medium hover:bg-gray-100 transition-all"
-                >
-                  Cancel
-                </button>
-                <button
-                  onClick={confirmStatusChange}
-                  className="flex-1 px-4 py-2.5 rounded-xl bg-status-critical hover:bg-status-critical-hover text-white text-sm font-semibold shadow-soft transition-all"
-                >
-                  Confirm Resignation
-                </button>
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  // Delete Confirmation Dialog
-  if (isDeleteDialogOpen) {
-    return (
-      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
-        <div className="bg-surface rounded-2xl shadow-xl max-w-md w-full mx-4 p-6 relative animate-in fade-in zoom-in duration-200">
-          <div className="flex items-center gap-3 mb-4">
-            <div className="w-12 h-12 rounded-full bg-status-critical-bg flex items-center justify-center flex-shrink-0">
-              <AlertTriangle className="w-6 h-6 text-status-critical-text" />
-            </div>
-            <div>
-              <h3 className="font-outfit text-xl font-semibold text-text-main">Delete Employee</h3>
-              <p className="text-text-muted text-sm">This action cannot be undone</p>
-            </div>
-          </div>
-          
-          <div className="bg-gray-50 rounded-xl px-4 py-3 mb-6">
-            <p className="text-sm text-text-main">
-              Are you sure you want to delete <span className="font-semibold">{deletingEmployee?.name}</span>?
-            </p>
-            <p className="text-xs text-text-muted mt-1">
-              This will soft-delete the employee record and remove their access to the system.
-            </p>
-          </div>
-          
-          <div className="flex gap-3">
-            <button
-              type="button"
-              onClick={handleCloseDeleteDialog}
-              disabled={isDeleting}
-              className="flex-1 px-4 py-2.5 rounded-xl border border-border text-text-main text-sm font-medium hover:bg-gray-100 transition-all disabled:opacity-50"
-            >
-              Cancel
-            </button>
-            <button
-              type="button"
-              onClick={handleDeleteConfirm}
-              disabled={isDeleting}
-              className="flex-1 px-4 py-2.5 rounded-xl bg-status-critical hover:bg-status-critical-hover text-white text-sm font-semibold shadow-soft transition-all disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              {isDeleting ? 'Deleting...' : 'Delete'}
-            </button>
-          </div>
         </div>
       </div>
     );
@@ -1279,10 +428,6 @@ export default function EmployeesPage() {
               <h2 className="font-outfit text-2xl sm:text-3xl font-semibold text-text-main tracking-tight">Employees</h2>
               <p className="text-text-muted mt-1 text-sm">Manage employee records, dispatch status, and role assignments.</p>
             </div>
-            <button onClick={handleOpenModal} className="w-full sm:w-auto bg-primary hover:bg-primary-hover text-white px-5 py-2.5 rounded-xl text-sm font-semibold shadow-soft transition-all flex items-center justify-center">
-              <Plus className="w-4 h-4 mr-2" />
-              Add Employee
-            </button>
           </div>
           <div className="bg-surface rounded-2xl border border-border shadow-card p-12 text-center">
             <p className="text-text-muted text-lg">No employees found</p>
@@ -1300,10 +445,6 @@ export default function EmployeesPage() {
             <h2 className="font-outfit text-2xl sm:text-3xl font-semibold text-text-main tracking-tight">Employees</h2>
             <p className="text-text-muted mt-1 text-sm">Manage employee records, dispatch status, and role assignments.</p>
           </div>
-          <button onClick={handleOpenModal} className="w-full sm:w-auto bg-primary hover:bg-primary-hover text-white px-5 py-2.5 rounded-xl text-sm font-semibold shadow-soft transition-all flex items-center justify-center">
-            <Plus className="w-4 h-4 mr-2" />
-            Add Employee
-          </button>
         </div>
 
         <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
@@ -1369,7 +510,11 @@ export default function EmployeesPage() {
                 </thead>
                 <tbody className="divide-y divide-gray-100 text-sm">
                   {filtered.map((emp, idx) => (
-                    <tr key={emp.empId} className="hover:bg-gray-50 transition-colors">
+                    <tr
+                      key={emp.empId}
+                      onClick={() => openDetail(emp)}
+                      className="hover:bg-gray-50 transition-colors cursor-pointer"
+                    >
                       <td className="py-4 px-4 sm:px-6">
                         <div className="flex items-center">
                           <div className={`w-8 h-8 rounded-full ${getInitialColor(emp.name, idx)} flex items-center justify-center text-xs font-medium text-white mr-3 flex-shrink-0`}>
@@ -1394,33 +539,7 @@ export default function EmployeesPage() {
                       </td>
                       <td className="py-4 px-4 sm:px-6 text-text-muted truncate max-w-[150px] sm:max-w-none">{emp.email}</td>
                       <td className="py-4 px-4 sm:px-6">
-                        {user?.roleCode === 'ADMIN' && (
-                          <div className="flex items-center gap-1">
-                            <button
-                              onClick={() => handleEdit(emp)}
-                              className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
-                              title="Edit"
-                            >
-                              <Pencil className="w-3.5 h-3.5 text-text-muted hover:text-primary" />
-                            </button>
-                            <button
-                              onClick={() => handleDelete(emp)}
-                              className="p-1.5 hover:bg-red-50 rounded-lg transition-colors"
-                              title="Delete"
-                            >
-                              <Trash2 className="w-3.5 h-3.5 text-text-muted hover:text-status-critical-text" />
-                            </button>
-                          </div>
-                        )}
-                        {user?.roleCode !== 'ADMIN' && (
-                          <button
-                            onClick={() => router.push(`/profile/${emp.empId}`)}
-                            className="p-1.5 text-text-muted hover:text-primary hover:bg-gray-100 rounded-lg transition-all"
-                            title="View Profile"
-                          >
-                            <MoreHorizontal className="w-4 h-4" />
-                          </button>
-                        )}
+                        <span className="text-xs text-text-muted">View details →</span>
                       </td>
                     </tr>
                   ))}
@@ -1431,7 +550,11 @@ export default function EmployeesPage() {
             {/* Mobile cards */}
             <div className="md:hidden space-y-3">
               {filtered.map((emp, idx) => (
-                <div key={emp.empId} className="bg-surface rounded-2xl border border-border p-4 space-y-2">
+                <div
+                  key={emp.empId}
+                  onClick={() => openDetail(emp)}
+                  className="bg-surface rounded-2xl border border-border p-4 space-y-2 cursor-pointer hover:bg-gray-50 transition-colors"
+                >
                   <div className="flex items-center justify-between gap-3">
                     <div className="flex items-center gap-3 flex-1">
                       <div className={`w-10 h-10 rounded-full flex items-center justify-center text-white text-sm font-semibold ${getInitialColor(emp.name, idx)}`}>
@@ -1450,24 +573,6 @@ export default function EmployeesPage() {
                     <div className="truncate">Email: {emp.email}</div>
                     <div>상태: {emp.dispatchStatus === 'DISPATCHED' ? '파견중' : '대기'}</div>
                   </div>
-                  {user?.roleCode === 'ADMIN' && (
-                    <div className="flex items-center gap-2 pt-2 border-t border-gray-100">
-                      <button
-                        onClick={() => handleEdit(emp)}
-                        className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium text-text-muted hover:bg-gray-100 transition-all"
-                      >
-                        <Pencil className="w-3.5 h-3.5" />
-                        Edit
-                      </button>
-                      <button
-                        onClick={() => handleDelete(emp)}
-                        className="flex-1 flex items-center justify-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium text-status-critical-text hover:bg-red-50 transition-all"
-                      >
-                        <Trash2 className="w-3.5 h-3.5" />
-                        Delete
-                      </button>
-                    </div>
-                  )}
                 </div>
               ))}
             </div>