+ +

Calendar

Unified view of tickets, reports, and dispatch schedules.

+ ); +} diff --git a/src/app/(main)/calendar/page.tsx b/src/app/(main)/calendar/page.tsx new file mode 100644 index 0000000..9e19c39 --- /dev/null +++ b/src/app/(main)/calendar/page.tsx @@ -0,0 +1 @@ +export { default } from './CalendarClient'; diff --git a/src/app/(main)/daily-reports/page.tsx b/src/app/(main)/daily-reports/page.tsx new file mode 100644 index 0000000..a65d927 --- /dev/null +++ b/src/app/(main)/daily-reports/page.tsx @@ -0,0 +1,329 @@ +'use client'; + +import React, { useState, useEffect } from 'react'; +import { CalendarCheck, Send, CheckCircle2, ChevronDown, ChevronUp, AlertCircle, FileText, Clock, Eye, PenTool, Ticket } from 'lucide-react'; +import { useAuthStore } from '@/stores'; +import reportService from '@/services/reportService'; +import type { WorkReport } from '@/types'; + +export default function DailyReportsPage() { + const user = useAuthStore((s) => s.user); + const [reports, setReports] = useState([]); + const [todaySubmitted, setTodaySubmitted] = useState(false); + const [loading, setLoading] = useState(true); + const [error, setError] = useState(''); + const [form, setForm] = useState({ completedTasks: '', plannedTasks: '', issuesAndRisks: '', workHours: '8', blockerFlag: false, artifacts: '' }); + const [submitting, setSubmitting] = useState(false); + const [showForm, setShowForm] = useState(false); + const [selectedReport, setSelectedReport] = useState(null); + const [expanded, setExpanded] = useState>({}); + + // Feature 1: SR Auto-complete + const [srTickets, setSrTickets] = useState([]); + const [showSrPicker, setShowSrPicker] = useState(false); + const [selectedSrIds, setSelectedSrIds] = useState>(new Set()); + const [loadingSr, setLoadingSr] = useState(false); + + // Feature 2: Manager Review Tab + const [pendingReports, setPendingReports] = useState([]); + const [reviewTab, setReviewTab] = useState<'my' | 'pending'>('my'); + + const today = new Date().toISOString().split('T')[0]; + + const fetchReports = () => { + if (!user) return; + setLoading(true); + reportService.getAll({ reportType: 'DAILY', size: 50 }).then((res) => { + const list = res.data.content || []; + setReports(list); + setTodaySubmitted(list.some((r: any) => r.targetDate === today)); + }).catch(() => setError('Failed to load reports')) + .finally(() => setLoading(false)); + }; + + useEffect(() => { fetchReports(); }, [user]); + + // Feature 2: Fetch pending reports for MANAGER/ADMIN + useEffect(() => { + if (!user || user.roleCode === 'EMPLOYEE') return; + reportService.getAll({ status: 'SUBMITTED', reportType: 'DAILY', size: 50 }).then((res) => { + setPendingReports(res.data.content || []); + }).catch(() => {}); + }, [user]); + + // Feature 1: SR Auto-complete functions + const fetchSrTickets = async () => { + setLoadingSr(true); + try { + const res = await fetch(`/api/v1/reports/sr-auto-complete?date=${today}`); + const data = await res.json(); + if (data.success) setSrTickets(data.data); + setShowSrPicker(true); + } catch {} + setLoadingSr(false); + }; + + const appendSrToReport = () => { + const selected = srTickets.filter(t => selectedSrIds.has(t.ticketId)); + if (selected.length === 0) return; + const srText = selected.map(t => `[#${t.ticketId}] ${t.title}${t.resolutionNote ? ` → ${t.resolutionNote}` : ''}`).join('\n'); + setForm(f => ({ ...f, completedTasks: f.completedTasks + (f.completedTasks ? '\n\n[Resolved SR Tickets]\n' : '[Resolved SR Tickets]\n') + srText })); + setShowSrPicker(false); + }; + + // Feature 2: Manager review function + const handleReview = async (reportId: number, status: 'APPROVED' | 'REJECTED') => { + const comment = status === 'REJECTED' ? prompt('Rejection reason:') : ''; + if (status === 'REJECTED' && !comment) return; + try { + await reportService.review(reportId, status, comment || ''); + fetchReports(); // refresh both lists + // Re-fetch pending reports + if (user && user.roleCode !== 'EMPLOYEE') { + reportService.getAll({ status: 'SUBMITTED', reportType: 'DAILY', size: 50 }).then((res) => { + setPendingReports(res.data.content || []); + }).catch(() => {}); + } + } catch { alert('Review failed.'); } + }; + + const handleSubmit = async () => { + if (!form.completedTasks.trim()) return; + setSubmitting(true); + try { + await reportService.create({ + reportType: 'DAILY', + targetDate: today, + completedTasks: form.completedTasks, + plannedTasks: form.plannedTasks, + issuesAndRisks: form.issuesAndRisks, + status: 'SUBMITTED', + workHours: form.workHours ? parseFloat(form.workHours) : null, + blockerFlag: form.blockerFlag ? 'Y' : 'N', + artifacts: form.artifacts ? JSON.stringify([{ type: 'note', description: form.artifacts }]) : '[]', + }); + setForm({ completedTasks: '', plannedTasks: '', issuesAndRisks: '', workHours: '8', blockerFlag: false, artifacts: '' }); + setShowForm(false); + fetchReports(); + } catch { alert('Failed to submit.'); } + setSubmitting(false); + }; + + const todayReport = reports.find((r: any) => r.targetDate === today); + + return ( +

+ {/* Header */} +

+ +

Daily Reports

Track your daily work logs

+ {!showForm && !todaySubmitted && ( + + )} +

+ + {/* Tab switcher for MANAGER/ADMIN */} + {user && user.roleCode !== 'EMPLOYEE' && ( +

+ + +

+ )} + + {error && ( +

+ {error} +

+ )} + + {/* Today's report status / write form */} +

+ +

+ {todayReport ? "Today's Report" : 'New Daily Report'} +

+ {todaySubmitted && ( + + Submitted + + )} +

+ + {showForm && !todaySubmitted ? ( +

+ Today's date: {today} +

setForm(f => ({ ...f, completedTasks: e.target.value }))}
+                  placeholder="What did you work on today? (required)"
+                  className="w-full px-3 py-2.5 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none" rows={3} />
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                  <label className="text-xs font-medium text-text-muted mb-1.5 block">Plans for tomorrow</label>
+                  <textarea value={form.plannedTasks} onChange={(e) => setForm(f => ({ ...f, plannedTasks: e.target.value }))}
+                    placeholder="Next steps..."
+                    className="w-full px-3 py-2.5 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none" rows={2} />
+                </div>
+                <div>
+                  <label className="text-xs font-medium text-text-muted mb-1.5 block">Issues / Risks</label>
+                  <textarea value={form.issuesAndRisks} onChange={(e) => setForm(f => ({ ...f, issuesAndRisks: e.target.value }))}
+                    placeholder="Blockers or help needed..."
+                    className="w-full px-3 py-2.5 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none" rows={2} />
+                </div>
+              </div>
+              <div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+                <div>
+                  <label className="text-xs font-medium text-text-muted mb-1.5 block">Work Hours</label>
+                  <input type="number" value={form.workHours} onChange={(e) => setForm(f => ({ ...f, workHours: e.target.value }))}
+                    min="0" max="24" step="0.5"
+                    className="w-full px-3 py-2.5 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary" />
+                </div>
+                <div>
+                  <label className="text-xs font-medium text-text-muted mb-1.5 block">Has Blocker?</label>
+                  <label className="flex items-center gap-2 px-3 py-2.5 rounded-xl border border-border text-sm cursor-pointer hover:bg-gray-50">
+                    <input type="checkbox" checked={form.blockerFlag} onChange={(e) => setForm(f => ({ ...f, blockerFlag: e.target.checked }))} className="rounded" />
+                    <span className="text-sm text-text-main">{form.blockerFlag ? 'Yes' : 'No'}</span>
+                  </label>
+                </div>
+                <div>
+                  <label className="text-xs font-medium text-text-muted mb-1.5 block">Artifacts (link / note)</label>
+                  <input value={form.artifacts} onChange={(e) => setForm(f => ({ ...f, artifacts: e.target.value }))}
+                    placeholder="Git commit, doc link..."
+                    className="w-full px-3 py-2.5 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary" />
+                </div>
+              </div>
+              <div className="flex justify-end gap-3 pt-2">
+                <button onClick={() => setShowForm(false)} className="px-5 py-2 rounded-xl text-sm font-medium text-text-muted hover:bg-gray-100 transition-all">Cancel</button>
+                <button onClick={handleSubmit} disabled={submitting || !form.completedTasks.trim()}
+                  className="bg-primary hover:bg-primary-hover text-white px-6 py-2 rounded-xl text-sm font-semibold transition-all flex items-center gap-2 disabled:opacity-50">
+                  <Send className="w-4 h-4" /> {submitting ? 'Submitting...' : 'Submit'}
+                </button>
+              </div>
+            </div>
+          ) : todayReport ? (
+            <div className="p-4 sm:p-6">
+              <div className="bg-status-resolved-bg/40 rounded-xl p-4 sm:p-5 space-y-3">
+                <div>
+                  <p className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-1">Completed</p>
+                  <p className="text-sm text-text-main whitespace-pre-line">{todayReport.completedTasks || '-'}</p>
+                </div>
+                {todayReport.plannedTasks && <div>
+                  <p className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-1">Planned</p>
+                  <p className="text-sm text-text-main whitespace-pre-line">{todayReport.plannedTasks}</p>
+                </div>}
+                {todayReport.issuesAndRisks && <div>
+                  <p className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-1">Issues</p>
+                  <p className="text-sm text-text-main whitespace-pre-line">{todayReport.issuesAndRisks}</p>
+                </div>}
+                {todayReport.workHours && <div className="flex gap-4 text-xs text-text-muted">
+                  <span>⏱ {todayReport.workHours}h</span>
+                  {todayReport.blockerFlag === 'Y' && <span className="text-status-critical-text font-semibold">🚫 Blocker</span>}
+                </div>}
+              </div>
+            </div>
+          ) : (
+            <div className="p-8 text-center text-text-muted text-sm">
+              <CalendarCheck className="w-8 h-8 mx-auto mb-2 text-text-muted/40" />
+              <p>No report submitted today.</p>
+            </div>
+          )}
+        </div>
+
+        {/* Report history */}
+        <div className="bg-surface rounded-2xl shadow-card border border-border overflow-hidden">
+          <div className="px-4 sm:px-6 py-4 border-b border-border">
+            <h3 className="font-outfit font-semibold text-lg text-text-main">Report History</h3>
+          </div>
+          {loading ? (
+            <div className="p-8 text-center text-text-muted text-sm">Loading...</div>
+          ) : reviewTab === 'pending' ? (
+            pendingReports.length === 0 ? (
+              <div className="p-8 text-center text-text-muted text-sm">
+                <CheckCircle2 className="w-8 h-8 mx-auto mb-2 text-text-muted/40" />
+                <p>No pending reports for review.</p>
+              </div>
+            ) : (
+              <div className="divide-y divide-border">
+                {pendingReports.map((r: any) => (
+                  <div key={r.reportId} className="px-4 sm:px-6 py-4 hover:bg-gray-50/30 transition-colors">
+                    <div className="flex items-start justify-between gap-3">
+                      <div className="flex-1 min-w-0">
+                        <div className="flex items-center gap-2 mb-1">
+                          <span className="text-xs text-text-muted font-medium">{r.user?.name || `User #${r.user?.empId}`}</span>
+                          <span className="text-xs text-gray-300">|</span>
+                          <span className="text-sm font-semibold text-text-main">{r.targetDate}</span>
+                          <span className="text-[10px] font-medium px-2 py-0.5 rounded-full bg-status-pending-bg text-status-pending-text">SUBMITTED</span>
+                        </div>
+                        <p className="text-sm text-text-main line-clamp-2">{r.completedTasks}</p>
+                      </div>
+                    </div>
+                    <div className="flex gap-2 mt-3">
+                      <button onClick={() => handleReview(r.reportId, 'APPROVED')} className="px-4 py-2 bg-status-resolved-bg text-status-resolved-text rounded-xl text-xs font-semibold hover:bg-status-resolved-text hover:text-white transition-all">Approve</button>
+                      <button onClick={() => handleReview(r.reportId, 'REJECTED')} className="px-4 py-2 bg-status-critical-bg text-status-critical-text rounded-xl text-xs font-semibold hover:bg-status-critical-text hover:text-white transition-all">Reject</button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )
+          ) : reports.length === 0 ? (
+            <div className="p-8 text-center text-text-muted text-sm">
+              <FileText className="w-8 h-8 mx-auto mb-2 text-text-muted/40" />
+              <p>No daily reports yet.</p>
+            </div>
+          ) : (
+            <div className="divide-y divide-border">
+              {reports.map((r: any) => (
+                <div key={r.reportId} className="px-4 sm:px-6 py-4 hover:bg-gray-50/30 transition-colors">
+                  <div className="flex items-start justify-between gap-3">
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2 mb-1">
+                        <span className="text-sm font-semibold text-text-main">{r.targetDate}</span>
+                        <span className={`text-[10px] font-medium px-2 py-0.5 rounded-full ${
+                          r.status === 'SUBMITTED' || r.status === 'APPROVED'
+                            ? 'bg-status-resolved-bg text-status-resolved-text'
+                            : 'bg-status-pending-bg text-status-pending-text'
+                        }`}>{r.status}</span>
+                      </div>
+                      <p className="text-sm text-text-main line-clamp-2">{r.completedTasks}</p>
+                    </div>
+                    <button onClick={() => setSelectedReport(selectedReport === r.reportId ? null : r.reportId)} className="flex-shrink-0 p-2 text-text-muted hover:text-primary transition-colors">
+                      {selectedReport === r.reportId ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
+                    </button>
+                  </div>
+                  {selectedReport === r.reportId && (
+                    <div className="mt-3 pt-3 border-t border-border space-y-3 text-sm">
+                      <div><span className="text-xs font-semibold text-text-muted">Completed:</span><p className="text-text-main mt-0.5 whitespace-pre-line">{r.completedTasks}</p></div>
+                      {r.plannedTasks && <div><span className="text-xs font-semibold text-text-muted">Planned:</span><p className="text-text-main mt-0.5 whitespace-pre-line">{r.plannedTasks}</p></div>}
+                      {r.issuesAndRisks && <div><span className="text-xs font-semibold text-text-muted">Issues:</span><p className="text-text-main mt-0.5 whitespace-pre-line">{r.issuesAndRisks}</p></div>}
+                      {r.reviewComment && <div><span className="text-xs font-semibold text-text-muted">Review:</span><p className="text-text-main mt-0.5">{r.reviewComment}</p></div>}
+                      {user && user.roleCode !== 'EMPLOYEE' && r.status === 'SUBMITTED' && (
+                        <div className="flex gap-2 pt-2">
+                          <button onClick={() => handleReview(r.reportId, 'APPROVED')} className="px-4 py-2 bg-status-resolved-bg text-status-resolved-text rounded-xl text-xs font-semibold hover:bg-status-resolved-text hover:text-white transition-all">Approve</button>
+                          <button onClick={() => handleReview(r.reportId, 'REJECTED')} className="px-4 py-2 bg-status-critical-bg text-status-critical-text rounded-xl text-xs font-semibold hover:bg-status-critical-text hover:text-white transition-all">Reject</button>
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(main)/dispatch/manage/page.tsx b/src/app/(main)/dispatch/manage/page.tsx
new file mode 100644
index 0000000..e8d1060
--- /dev/null
+++ b/src/app/(main)/dispatch/manage/page.tsx
@@ -0,0 +1,157 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Plus, Pencil, Trash2, Search, AlertCircle } from 'lucide-react';
+import { useAuthStore } from '@/stores';
+import dispatchHistoryService from '@/services/dispatchHistoryService';
+import DispatchFormModal from '@/components/dispatch/DispatchFormModal';
+import type { DispatchHistory } from '@/types';
+
+export default function DispatchManagePage() {
+  const user = useAuthStore((s) => s.user);
+  const [items, setItems] = useState<DispatchHistory[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState('');
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editData, setEditData] = useState<Record<string, unknown> | null>(null);
+  const [deleteConfirm, setDeleteConfirm] = useState<number | null>(null);
+
+  const fetchData = () => {
+    dispatchHistoryService.getAll({ size: 100 }).then((res) => {
+      setItems(res.data.content || []);
+    }).catch(() => {
+      console.error('Failed to fetch dispatches');
+    }).finally(() => {
+      setLoading(false);
+    });
+  };
+
+  useEffect(() => { fetchData(); }, []);
+
+  const handleDelete = async (id: number) => {
+    try {
+      await dispatchHistoryService.deleteDispatch(id);
+      setDeleteConfirm(null);
+      fetchData();
+    } catch {
+      alert('Failed to delete dispatch.');
+    }
+  };
+
+  if (!user || user.roleCode === 'EMPLOYEE') {
+    return (
+      <div className="p-4 sm:p-6 lg:p-8">
+        <div className="max-w-7xl mx-auto text-center py-20">
+          <AlertCircle className="w-12 h-12 text-text-muted mx-auto mb-4" />
+          <h2 className="text-xl font-semibold text-text-main mb-2">Access Denied</h2>
+          <p className="text-text-muted text-sm">Only managers and admins can access this page.</p>
+        </div>
+      </div>
+    );
+  }
+
+  const filtered = items.filter((item) =>
+    item.projectName?.toLowerCase().includes(search.toLowerCase()) ||
+    item.roleTitle?.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
+          <div>
+            <h2 className="font-outfit text-2xl sm:text-3xl font-semibold text-text-main">Dispatch Management</h2>
+            <p className="text-text-muted text-sm mt-1">Manage employee project assignments</p>
+          </div>
+          <button
+            onClick={() => { setEditData(null); setModalOpen(true); }}
+            className="bg-primary hover:bg-primary-hover text-white px-4 py-2 rounded-xl text-sm font-semibold flex items-center gap-2 transition-all"
+          >
+            <Plus className="w-4 h-4" />
+            New Dispatch
+          </button>
+        </div>
+
+        <div className="bg-surface rounded-2xl shadow-card border border-border overflow-hidden">
+          <div className="p-4 sm:p-6 border-b border-border">
+            <div className="relative w-full sm:w-72">
+              <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-text-muted" />
+              <input
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="Search by project or role..."
+                className="w-full pl-9 pr-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+              />
+            </div>
+          </div>
+
+          <div className="overflow-x-auto">
+            <table className="w-full text-left border-collapse">
+              <thead>
+                <tr className="bg-gray-50/50">
+                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Project</th>
+                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Role</th>
+                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Employee</th>
+                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Period</th>
+                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="text-sm divide-y divide-gray-100">
+                {loading && <tr><td colSpan={5} className="py-8 text-center text-text-muted">Loading...</td></tr>}
+                {!loading && filtered.length === 0 && (
+                  <tr><td colSpan={5} className="py-8 text-center text-text-muted">No dispatch records found.</td></tr>
+                )}
+                {filtered.map((item) => (
+                  <tr key={item.dispatchId} className="hover:bg-gray-50 transition-colors">
+                    <td className="py-4 px-4 sm:px-6 font-medium text-text-main">{item.projectName || `Project #${item.projectId}`}</td>
+                    <td className="py-4 px-4 sm:px-6">
+                      <span className="text-xs font-medium bg-indigo-50 text-primary px-2 py-1 rounded-lg">{item.roleTitle}</span>
+                    </td>
+                    <td className="py-4 px-4 sm:px-6 text-text-muted">Emp #{item.empId}</td>
+                    <td className="py-4 px-4 sm:px-6 text-text-muted">
+                      {item.startDate} ~ {item.endDate || 'Present'}
+                    </td>
+                    <td className="py-4 px-4 sm:px-6">
+                      <div className="flex items-center gap-2">
+                        <button
+                          onClick={() => { setEditData(item as unknown as Record<string, unknown>); setModalOpen(true); }}
+                          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={() => setDeleteConfirm(item.dispatchId)}
+                          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>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <DispatchFormModal isOpen={modalOpen} onClose={() => setModalOpen(false)} onSaved={fetchData} editData={editData} />
+
+        {deleteConfirm && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={() => setDeleteConfirm(null)}>
+            <div className="bg-white rounded-2xl shadow-2xl p-6 w-full max-w-sm mx-4" onClick={(e) => e.stopPropagation()}>
+              <h3 className="font-outfit font-semibold text-lg text-text-main mb-2">Delete Dispatch</h3>
+              <p className="text-sm text-text-muted mb-4">Are you sure you want to delete this dispatch record?</p>
+              <div className="flex justify-end gap-3">
+                <button onClick={() => setDeleteConfirm(null)} className="px-4 py-2 rounded-xl text-sm font-medium text-text-muted hover:bg-gray-100 transition-colors">Cancel</button>
+                <button onClick={() => handleDelete(deleteConfirm)} className="px-4 py-2 rounded-xl text-sm font-semibold bg-status-critical-text text-white hover:bg-red-700 transition-colors">Delete</button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(main)/dispatch/page.tsx b/src/app/(main)/dispatch/page.tsx
new file mode 100644
index 0000000..c4207be
--- /dev/null
+++ b/src/app/(main)/dispatch/page.tsx
@@ -0,0 +1,523 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import {
+  Building2, Calendar, BadgeCheck, FileText, Ticket, Loader2,
+  Sparkles, Download, ChevronDown, ChevronUp, MapPin, Plus, X,
+  Search
+} from 'lucide-react';
+import { useAuthStore } from '@/stores';
+import employeeService, { type PortfolioEntry, type CreateDispatchRequest } from '@/services/employeeService';
+import projectService from '@/services/projectService';
+import type { EmployeeSearchResult, Project } from '@/types';
+
+function initialColor(name: string) {
+  const colors = [
+    'from-primary to-purple-400',
+    'from-dot-green to-emerald-400',
+    'from-dot-orange to-amber-400',
+    'from-dot-blue to-cyan-400',
+    'from-dot-pink to-rose-400',
+  ];
+  let hash = 0;
+  for (let i = 0; i < name.length; i++) hash = name.charCodeAt(i) + ((hash << 5) - hash);
+  return colors[Math.abs(hash) % colors.length];
+}
+
+function statusDot(status: string) {
+  const map: Record<string, string> = {
+    OPEN: 'bg-status-open-text', ASSIGNED: 'bg-blue-500', IN_PROGRESS: 'bg-status-pending-text',
+    RESOLVED: 'bg-status-resolved-text', CLOSED: 'bg-status-closed-text',
+  };
+  return <span className={`inline-block w-2 h-2 rounded-full ${map[status] || 'bg-gray-300'}`} />;
+}
+
+export default function DispatchPage() {
+  const user = useAuthStore((s) => s.user);
+  const [portfolio, setPortfolio] = useState<PortfolioEntry[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+  const [expanded, setExpanded] = useState<Record<number, boolean>>({});
+  const [generating, setGenerating] = useState<Record<number, boolean>>({});
+  
+  // Assign modal state
+  const [showAssignModal, setShowAssignModal] = useState(false);
+  const [employees, setEmployees] = useState<EmployeeSearchResult[]>([]);
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [empSearch, setEmpSearch] = useState('');
+  const [selectedEmp, setSelectedEmp] = useState<number | null>(null);
+  const [selectedProj, setSelectedProj] = useState<number | null>(null);
+  const [formData, setFormData] = useState({
+    roleTitle: '',
+    contributionRate: 100,
+    individualTech: '',
+    performedTasks: '',
+    startDate: new Date().toISOString().split('T')[0]
+  });
+  const [submitting, setSubmitting] = useState(false);
+  const [empSearchTimeout, setEmpSearchTimeout] = useState<NodeJS.Timeout | null>(null);
+
+  const fetchPortfolio = () => {
+    if (!user) return;
+    setLoading(true);
+    employeeService.getPortfolio(user.empId)
+      .then((res) => {
+        const data = Array.isArray(res.data) ? res.data : [];
+        setPortfolio(data);
+        const exp: Record<number, boolean> = {};
+        data.forEach((p) => { exp[p.dispatchId] = true; });
+        setExpanded(exp);
+      })
+      .catch(() => setError('Failed to load portfolio'))
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => { fetchPortfolio(); }, [user]);
+
+  // Fetch employees and projects when modal opens
+  useEffect(() => {
+    if (showAssignModal) {
+      projectService.getAll().then((res) => {
+        setProjects(res.data || []);
+      }).catch(console.error);
+    }
+  }, [showAssignModal]);
+
+  // Employee search with debouncing
+  useEffect(() => {
+    if (empSearchTimeout) clearTimeout(empSearchTimeout);
+    if (!empSearch.trim()) {
+      setEmployees([]);
+      return;
+    }
+    const timeout = setTimeout(() => {
+      employeeService.search(empSearch).then((res) => {
+        setEmployees(res.data || []);
+      }).catch(console.error);
+    }, 300);
+    setEmpSearchTimeout(timeout);
+    return () => clearTimeout(timeout);
+  }, [empSearch]);
+
+  const handleOpenAssignModal = () => {
+    setShowAssignModal(true);
+    setEmployees([]);
+    setProjects([]);
+    setSelectedEmp(null);
+    setSelectedProj(null);
+    setFormData({
+      roleTitle: '',
+      contributionRate: 100,
+      individualTech: '',
+      performedTasks: '',
+      startDate: new Date().toISOString().split('T')[0]
+    });
+  };
+
+  const handleCloseAssignModal = () => {
+    setShowAssignModal(false);
+    setEmployees([]);
+    setProjects([]);
+    setSelectedEmp(null);
+    setSelectedProj(null);
+    setFormData({
+      roleTitle: '',
+      contributionRate: 100,
+      individualTech: '',
+      performedTasks: '',
+      startDate: new Date().toISOString().split('T')[0]
+    });
+  };
+
+  const handleSubmitAssign = async () => {
+    if (!selectedEmp || !selectedProj) {
+      alert('직원과 프로젝트를 선택해주세요.');
+      return;
+    }
+    if (!formData.roleTitle || !formData.individualTech || !formData.performedTasks) {
+      alert('모든 필드를 입력해주세요.');
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      const payload: CreateDispatchRequest = {
+        employeeId: selectedEmp,
+        projectId: selectedProj,
+        roleTitle: formData.roleTitle,
+        contributionRate: formData.contributionRate,
+        individualTech: formData.individualTech,
+        performedTasks: formData.performedTasks,
+        startDate: formData.startDate || undefined
+      };
+      await employeeService.createDispatch(payload);
+      alert('파견이 등록되었습니다.');
+      handleCloseAssignModal();
+      fetchPortfolio();
+    } catch (err) {
+      console.error(err);
+      alert('파견 등록에 실패했습니다.');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const handleAutoComplete = async (entry: PortfolioEntry) => {
+    if (!user) return;
+    setGenerating((g) => ({ ...g, [entry.dispatchId]: true }));
+    const reportSummary = entry.reports.map((r) =>
+      `[${r.reportType} ${r.targetDate}] ${r.completedTasks}`
+    ).join('\n');
+    const ticketSummary = entry.resolvedTickets.map((t) =>
+      `- #${t.ticketId} ${t.title}${t.resolutionNote ? ` → ${t.resolutionNote}` : ''}`
+    ).join('\n');
+
+    let achievements = entry.achievements || '';
+    if (reportSummary) achievements += `\n\n[Reports Summary]\n${reportSummary}`;
+    if (ticketSummary) achievements += `\n\n[Resolved SR Tickets]\n${ticketSummary}`;
+
+    try {
+      await employeeService.updateAchievements(user.empId, entry.dispatchId, achievements);
+      setPortfolio((prev) => prev.map((p) =>
+        p.dispatchId === entry.dispatchId ? { ...p, achievements } : p
+      ));
+    } catch {
+      alert('Failed to save achievements. Please try again.');
+    }
+    setGenerating((g) => ({ ...g, [entry.dispatchId]: false }));
+  };
+
+  if (loading) {
+    return (
+      <div className="p-4 sm:p-6 lg:p-8 flex items-center justify-center min-h-[400px]">
+        <Loader2 className="w-6 h-6 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-4 sm:p-6 lg:p-8">
+        <div className="bg-red-50 text-red-600 px-4 py-3 rounded-xl text-sm">{error}</div>
+        <button onClick={fetchPortfolio} className="mt-3 text-sm text-primary hover:underline">Retry</button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mb-6 sm:mb-8">
+          <div>
+            <h2 className="font-outfit text-2xl sm:text-3xl font-semibold text-text-main tracking-tight">
+              {user?.roleCode === 'EMPLOYEE' ? 'My Portfolio' : 'Dispatch & Portfolio'}
+            </h2>
+            <p className="text-text-muted mt-1 text-sm">
+              {user?.roleCode === 'EMPLOYEE'
+                ? 'Career history with auto-bound report summaries and resolved SR tickets.'
+                : 'Manage employee dispatch assignments and career portfolios.'}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            {portfolio.length > 0 && (
+              <button onClick={() => {
+                let text = `=== Portfolio for ${user?.name} ===\n\n`;
+                portfolio.forEach((p) => {
+                  text += `Project: ${p.projectName}\nRole: ${p.roleTitle}\nPeriod: ${p.startDate}${p.endDate ? ` ~ ${p.endDate}` : ' ~ Present'}\nTech: ${p.individualTech}\nAchievements: ${p.achievements || '-'}\n\n`;
+                });
+                const blob = new Blob([text], { type: 'text/plain' });
+                const a = document.createElement('a');
+                a.href = URL.createObjectURL(blob); a.download = `portfolio_${user?.name || 'export'}.txt`; a.click();
+                URL.revokeObjectURL(a.href);
+              }} className="flex items-center gap-2 text-xs text-text-muted hover:text-primary transition-colors bg-gray-50 px-3 py-2 rounded-xl">
+                <Download className="w-4 h-4" />
+                Export
+              </button>
+            )}
+            {(user?.roleCode === 'MANAGER' || user?.roleCode === 'ADMIN') && (
+              <button
+                onClick={handleOpenAssignModal}
+                className="flex items-center gap-2 bg-primary text-white px-4 py-2 rounded-xl text-sm font-semibold hover:bg-primary-hover transition-colors shadow-sm"
+              >
+                <Plus className="w-4 h-4" />
+                Assign Employee
+              </button>
+            )}
+          </div>
+        </div>
+
+        {portfolio.length === 0 && (
+          <div className="bg-surface rounded-2xl p-8 sm:p-12 text-center border border-border">
+            <Building2 className="w-12 h-12 mx-auto mb-4 text-text-muted/40" />
+            <p className="text-text-muted">No dispatch history found.</p>
+          </div>
+        )}
+
+        {/* Timeline */}
+        <div className="relative space-y-0">
+          {portfolio.map((entry, idx) => (
+            <div key={entry.dispatchId} className="relative flex gap-4 sm:gap-6 pb-8">
+              {/* Timeline rail */}
+              <div className="flex flex-col items-center">
+                <div className={`w-4 h-4 rounded-full bg-gradient-to-br ${initialColor(entry.projectName)} ring-4 ring-white z-10 flex-shrink-0`} />
+                {idx < portfolio.length - 1 && <div className="w-0.5 flex-1 bg-gray-200 mt-1" />}
+              </div>
+
+              {/* Card */}
+              <div className="flex-1 min-w-0 bg-surface rounded-2xl shadow-card border border-border overflow-hidden">
+                <div className="px-4 sm:px-6 py-4 flex flex-col sm:flex-row items-start sm:items-center gap-3 border-b border-border bg-gradient-to-r from-indigo-50/30 to-transparent">
+                  <Building2 className="w-5 h-5 text-primary flex-shrink-0" />
+                  <div className="flex-1 min-w-0">
+                    <h3 className="font-outfit font-semibold text-lg text-text-main">{entry.projectName}</h3>
+                    <p className="text-xs text-text-muted mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-1">
+                      <span className="flex items-center gap-1"><BadgeCheck className="w-3 h-3" />{entry.roleTitle}</span>
+                      <span className="flex items-center gap-1"><Calendar className="w-3 h-3" />{entry.startDate}{entry.endDate ? ` ~ ${entry.endDate}` : ' ~ Present'}</span>
+                      <span>공수 {entry.contributionRate}%</span>
+                    </p>
+                  </div>
+                  <span className="text-xs bg-primary/10 text-primary px-2.5 py-1 rounded-full font-medium">{entry.contributionRate}%</span>
+                </div>
+
+                <div className="px-4 sm:px-6 py-4 space-y-3">
+                  <div>
+                    <p className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-1">Tech Stack</p>
+                    <div className="flex flex-wrap gap-1.5">
+                      {entry.individualTech.split(',').map((t, i) => (
+                        <span key={i} className="text-xs bg-gray-100 text-text-muted px-2 py-0.5 rounded-md">{t.trim()}</span>
+                      ))}
+                    </div>
+                  </div>
+
+                  <div>
+                    <p className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-1">Performed Tasks</p>
+                    <p className="text-sm text-text-main whitespace-pre-line">{entry.performedTasks}</p>
+                  </div>
+
+                  {/* Achievements */}
+                  <div className="bg-amber-50/50 rounded-xl p-4 border border-amber-100/50">
+                    <div className="flex items-center justify-between mb-2">
+                      <p className="text-xs font-semibold text-amber-800 uppercase tracking-wider flex items-center gap-1.5">
+                        <Sparkles className="w-3.5 h-3.5" />
+                        Achievements
+                      </p>
+                      <button
+                        onClick={() => handleAutoComplete(entry)}
+                        disabled={generating[entry.dispatchId]}
+                        className="flex items-center gap-1 text-xs font-medium text-primary hover:text-primary-hover disabled:opacity-50 transition-colors"
+                      >
+                        <Sparkles className="w-3 h-3" />
+                        {generating[entry.dispatchId] ? 'Generating...' : 'Auto-complete from Reports & SR'}
+                      </button>
+                    </div>
+                    <p className={`text-sm whitespace-pre-line ${entry.achievements ? 'text-text-main' : 'text-text-muted italic'}`}>
+                      {entry.achievements || 'Click auto-complete to generate from reports and resolved SR tickets.'}
+                    </p>
+                  </div>
+
+                  {/* Bound reports & tickets */}
+                  <button
+                    onClick={() => setExpanded((e) => ({ ...e, [entry.dispatchId]: !e[entry.dispatchId] }))}
+                    className="flex items-center gap-1 text-xs text-text-muted hover:text-primary transition-colors"
+                  >
+                    {expanded[entry.dispatchId] ? <ChevronUp className="w-3.5 h-3.5" /> : <ChevronDown className="w-3.5 h-3.5" />}
+                    {entry.reports.length} Reports · {entry.resolvedTickets.length} Resolved SR Tickets
+                  </button>
+
+                  {expanded[entry.dispatchId] && (
+                    <div className="space-y-2 pt-1">
+                      {entry.reports.map((r, i) => (
+                        <div key={i} className="flex items-start gap-2 text-sm bg-gray-50 rounded-lg px-3 py-2">
+                          <FileText className="w-4 h-4 text-text-muted mt-0.5 flex-shrink-0" />
+                          <div>
+                            <p className="text-xs text-text-muted">{r.reportType} · {r.targetDate}</p>
+                            <p className="text-text-main text-xs mt-0.5 line-clamp-2">{r.completedTasks}</p>
+                          </div>
+                        </div>
+                      ))}
+                      {entry.resolvedTickets.map((t, i) => (
+                        <div key={i} className="flex items-start gap-2 text-sm bg-green-50 rounded-lg px-3 py-2">
+                          <Ticket className="w-4 h-4 text-status-resolved-text mt-0.5 flex-shrink-0" />
+                          <div>
+                            <p className="text-xs text-text-muted flex items-center gap-1.5">
+                              #{t.ticketId} · {t.category}
+                              {statusDot('RESOLVED')}
+                            </p>
+                            <p className="text-text-main text-xs mt-0.5">{t.title}</p>
+                            {t.resolutionNote && <p className="text-status-resolved-text text-xs mt-0.5">→ {t.resolutionNote}</p>}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Assign Employee Modal */}
+      {showAssignModal && (
+        <div className="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4">
+          <div className="bg-surface rounded-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto shadow-2xl">
+            <div className="sticky top-0 bg-surface border-b border-border px-6 py-4 flex items-center justify-between">
+              <h3 className="font-outfit text-lg font-semibold text-text-main">Assign Employee to Project</h3>
+              <button onClick={handleCloseAssignModal} className="text-text-muted hover:text-text-main transition-colors">
+                <X className="w-5 h-5" />
+              </button>
+            </div>
+
+            <div className="p-6 space-y-5">
+              {/* Employee Search */}
+              <div>
+                <label className="block text-sm font-medium text-text-muted mb-1.5">Employee</label>
+                <div className="relative">
+                  <div className="flex items-center gap-2 bg-surface-container-low rounded-xl px-3 py-2.5 border border-border">
+                    <Search className="w-4 h-4 text-text-muted" />
+                    <input
+                      type="text"
+                      value={empSearch}
+                      onChange={(e) => setEmpSearch(e.target.value)}
+                      placeholder="Search by name..."
+                      className="flex-1 bg-transparent text-sm text-text-main placeholder:text-text-muted focus:outline-none"
+                    />
+                  </div>
+                  {employees.length > 0 && (
+                    <div className="absolute top-full left-0 right-0 mt-1 bg-surface border border-border rounded-xl shadow-lg max-h-48 overflow-y-auto z-10">
+                      {employees.map((emp) => (
+                        <button
+                          key={emp.empId}
+                          onClick={() => {
+                            setSelectedEmp(emp.empId);
+                            setEmployees([]);
+                            setEmpSearch(emp.name);
+                          }}
+                          className="w-full px-4 py-2.5 text-left hover:bg-surface-container-low transition-colors flex items-center justify-between"
+                        >
+                          <div>
+                            <p className="text-sm font-medium text-text-main">{emp.name}</p>
+                            <p className="text-xs text-text-muted">{emp.roleCode} · {emp.dispatchStatus}</p>
+                          </div>
+                          {selectedEmp === emp.empId && (
+                            <BadgeCheck className="w-4 h-4 text-primary" />
+                          )}
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+                {selectedEmp && (
+                  <p className="text-xs text-status-resolved-text mt-1 flex items-center gap-1">
+                    <BadgeCheck className="w-3 h-3" />
+                    Employee selected (ID: {selectedEmp})
+                  </p>
+                )}
+              </div>
+
+              {/* Project Selector */}
+              <div>
+                <label className="block text-sm font-medium text-text-muted mb-1.5">Project</label>
+                <select
+                  value={selectedProj ?? ''}
+                  onChange={(e) => setSelectedProj(Number(e.target.value) || null)}
+                  className="w-full bg-surface-container-low border border-border rounded-xl px-3 py-2.5 text-sm text-text-main focus:outline-none focus:ring-2 focus:ring-primary/20"
+                >
+                  <option value="">Select a project...</option>
+                  {projects.map((proj) => (
+                    <option key={proj.projectId} value={proj.projectId}>
+                      {proj.projectName} ({proj.projectType})
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {/* Role Title */}
+              <div>
+                <label className="block text-sm font-medium text-text-muted mb-1.5">Role Title</label>
+                <input
+                  type="text"
+                  value={formData.roleTitle}
+                  onChange={(e) => setFormData({ ...formData, roleTitle: e.target.value })}
+                  placeholder="e.g., Senior Backend Developer"
+                  className="w-full bg-surface-container-low border border-border rounded-xl px-3 py-2.5 text-sm text-text-main focus:outline-none focus:ring-2 focus:ring-primary/20"
+                />
+              </div>
+
+              {/* Contribution Rate */}
+              <div>
+                <label className="block text-sm font-medium text-text-muted mb-1.5">
+                  Contribution Rate: {formData.contributionRate}%
+                </label>
+                <input
+                  type="range"
+                  min="0"
+                  max="100"
+                  step="10"
+                  value={formData.contributionRate}
+                  onChange={(e) => setFormData({ ...formData, contributionRate: Number(e.target.value) })}
+                  className="w-full accent-primary"
+                />
+                <div className="flex justify-between text-xs text-text-muted mt-1">
+                  <span>0%</span>
+                  <span>100%</span>
+                </div>
+              </div>
+
+              {/* Individual Tech */}
+              <div>
+                <label className="block text-sm font-medium text-text-muted mb-1.5">Individual Tech Stack</label>
+                <textarea
+                  value={formData.individualTech}
+                  onChange={(e) => setFormData({ ...formData, individualTech: e.target.value })}
+                  placeholder="e.g., Java, Spring Boot, PostgreSQL, React"
+                  rows={2}
+                  className="w-full bg-surface-container-low border border-border rounded-xl px-3 py-2.5 text-sm text-text-main focus:outline-none focus:ring-2 focus:ring-primary/20 resize-none"
+                />
+              </div>
+
+              {/* Performed Tasks */}
+              <div>
+                <label className="block text-sm font-medium text-text-muted mb-1.5">Performed Tasks</label>
+                <textarea
+                  value={formData.performedTasks}
+                  onChange={(e) => setFormData({ ...formData, performedTasks: e.target.value })}
+                  placeholder="Describe main responsibilities and tasks..."
+                  rows={3}
+                  className="w-full bg-surface-container-low border border-border rounded-xl px-3 py-2.5 text-sm text-text-main focus:outline-none focus:ring-2 focus:ring-primary/20 resize-none"
+                />
+              </div>
+
+              {/* Start Date */}
+              <div>
+                <label className="block text-sm font-medium text-text-muted mb-1.5">Start Date</label>
+                <input
+                  type="date"
+                  value={formData.startDate}
+                  onChange={(e) => setFormData({ ...formData, startDate: e.target.value })}
+                  className="w-full bg-surface-container-low border border-border rounded-xl px-3 py-2.5 text-sm text-text-main focus:outline-none focus:ring-2 focus:ring-primary/20"
+                />
+              </div>
+            </div>
+
+            <div className="sticky bottom-0 bg-surface border-t border-border px-6 py-4 flex justify-end gap-3">
+              <button
+                onClick={handleCloseAssignModal}
+                className="px-4 py-2 text-sm font-medium text-text-muted hover:text-text-main transition-colors"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={handleSubmitAssign}
+                disabled={submitting || !selectedEmp || !selectedProj}
+                className="px-6 py-2 bg-primary text-white text-sm font-semibold rounded-xl hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+              >
+                {submitting && <Loader2 className="w-4 h-4 animate-spin" />}
+                {submitting ? 'Assigning...' : 'Assign Employee'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(main)/employees/page.tsx b/src/app/(main)/employees/page.tsx
new file mode 100644
index 0000000..7a75a9c
--- /dev/null
+++ b/src/app/(main)/employees/page.tsx
@@ -0,0 +1,841 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { Search, Plus, MoreHorizontal, X, Pencil, Trash2, AlertTriangle } from 'lucide-react';
+import employeeService from '@/services/employeeService';
+import { useCommonCodes } from '@/hooks/useCommonCodes';
+import { useAuthStore } from '@/stores';
+import type { Employee, RoleCode, EmpStatus, DispatchStatus } from '@/types';
+
+const statusColor: Record<string, string> = {
+  ACTIVE: 'bg-status-resolved-bg text-status-resolved-text',
+  ON_LEAVE: 'bg-status-pending-bg text-status-pending-text',
+  RESIGNED: 'bg-status-critical-bg text-status-critical-text',
+};
+
+const initialColors = ['bg-indigo-500', 'bg-purple-500', 'bg-blue-500', 'bg-green-500', 'bg-orange-500', 'bg-pink-500'];
+
+function getInitialColor(name: string, index: number) {
+  return initialColors[index % initialColors.length];
+}
+
+export default function EmployeesPage() {
+  const [filter, setFilter] = useState('all');
+  const [employees, setEmployees] = useState<Employee[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const router = useRouter();
+  const { user } = useAuthStore();
+
+  const { codes: empStatusCodes, loading: statusCodesLoading } = useCommonCodes('EMP_STATUS');
+  const { codes: empRoleCodes, loading: roleCodesLoading } = useCommonCodes('EMP_ROLE');
+
+  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 [editData, setEditData] = useState({
+    name: '',
+    email: '',
+    roleCode: 'EMPLOYEE' as RoleCode,
+    empStatus: 'ACTIVE' as EmpStatus,
+    dispatchStatus: 'WAITING' as DispatchStatus,
+  });
+  const [editingEmployee, setEditingEmployee] = useState<Employee | null>(null);
+
+  // Delete Confirmation State
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [deletingEmployee, setDeletingEmployee] = useState<Employee | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+
+  const fetchEmployees = async () => {
+    try {
+      setLoading(true);
+      const res = await employeeService.getAll({ size: 100 });
+      setEmployees(res.data.content);
+      setError(null);
+    } catch (err) {
+      setError('Failed to load employees. Please try again.');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!user) return;
+
+    if (user.roleCode === 'EMPLOYEE') {
+      setError('Only managers and admins can view employee list.');
+      setLoading(false);
+      return;
+    }
+
+    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);
+
+    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 = (emp: Employee) => {
+    setEditingEmployee(emp);
+    setEditData({
+      name: emp.name,
+      email: emp.email || '',
+      roleCode: emp.roleCode,
+      empStatus: emp.empStatus,
+      dispatchStatus: emp.dispatchStatus,
+    });
+    setEditModalError(null);
+    setIsEditModalOpen(true);
+  };
+
+  const handleCloseEditModal = () => {
+    setIsEditModalOpen(false);
+    setEditingEmployee(null);
+    setEditData({
+      name: '',
+      email: '',
+      roleCode: 'EMPLOYEE',
+      empStatus: 'ACTIVE',
+      dispatchStatus: 'WAITING',
+    });
+    setEditModalError(null);
+  };
+
+  const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, value } = e.target;
+    setEditData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  const handleUpdateSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (!editData.name.trim()) {
+      setEditModalError('Name is required.');
+      return;
+    }
+
+    if (!editingEmployee) return;
+
+    setIsUpdating(true);
+    setEditModalError(null);
+
+    try {
+      await employeeService.update(editingEmployee.empId, editData);
+      alert('Employee updated successfully!');
+      handleCloseEditModal();
+      await fetchEmployees();
+    } catch (err: any) {
+      setEditModalError(err.response?.data?.message || 'Failed to update employee. Please try again.');
+    } 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 [skillKeyword, setSkillKeyword] = useState('');
+  const [skillResults, setSkillResults] = useState<Employee[]>([]);
+
+  useEffect(() => {
+    if (!skillKeyword.trim()) { setSkillResults([]); return; }
+    const timer = setTimeout(() => {
+      employeeService.search(skillKeyword.trim()).then((res) => {
+        const empIds = new Set(res.data.map((r: any) => r.empId));
+        setSkillResults(employees.filter((e) => empIds.has(e.empId)));
+      }).catch(() => {});
+    }, 300);
+    return () => clearTimeout(timer);
+  }, [skillKeyword, employees]);
+
+  const displayList = skillKeyword.trim() ? skillResults : employees;
+  const filtered = filter === 'all' ? displayList : displayList.filter((e) => e.empStatus === filter);
+
+  const stats = [
+    { label: '전체', value: employees.length, color: 'text-text-main' },
+    { label: '재직', value: employees.filter((e) => e.empStatus === 'ACTIVE').length, color: 'text-status-resolved-text' },
+    { label: '파견중', value: employees.filter((e) => e.dispatchStatus === 'DISPATCHED').length, color: 'text-status-pending-text' },
+    { label: '휴직', value: employees.filter((e) => e.empStatus === 'ON_LEAVE').length, color: 'text-status-critical-text' },
+  ];
+
+  // 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>
+    );
+  }
+
+  // Edit Employee Modal
+  if (isEditModalOpen) {
+    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={handleCloseEditModal}
+            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">Edit Employee</h3>
+          <p className="text-text-muted text-sm mb-6">Update employee information</p>
+          
+          <form onSubmit={handleUpdateSubmit} className="space-y-4">
+            <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={editData.name}
+                onChange={handleEditInputChange}
+                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={editData.email}
+                onChange={handleEditInputChange}
+                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={editData.roleCode}
+                onChange={handleEditInputChange}
+                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={editData.empStatus}
+                  onChange={handleEditInputChange}
+                  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={editData.dispatchStatus}
+                  onChange={handleEditInputChange}
+                  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>
+            
+            {editModalError && (
+              <div className="bg-status-critical-bg border border-status-critical text-status-critical-text rounded-xl px-4 py-3 text-sm">
+                {editModalError}
+              </div>
+            )}
+            
+            <div className="flex gap-3 pt-4">
+              <button
+                type="button"
+                onClick={handleCloseEditModal}
+                disabled={isUpdating}
+                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={isUpdating}
+                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"
+              >
+                {isUpdating ? 'Updating...' : 'Save Changes'}
+              </button>
+            </div>
+          </form>
+        </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>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="p-4 sm:p-6 lg:p-8">
+        <div className="max-w-7xl mx-auto">
+          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mb-6 sm:mb-8">
+            <div>
+              <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>
+            <div className="h-10 w-32 bg-gray-200 rounded-xl animate-pulse" />
+          </div>
+
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+            {[1, 2, 3, 4].map((i) => (
+              <div key={i} className="bg-surface rounded-2xl p-5 border border-border">
+                <div className="h-3 w-12 bg-gray-200 rounded mb-2 animate-pulse" />
+                <div className="h-7 w-16 bg-gray-200 rounded animate-pulse" />
+              </div>
+            ))}
+          </div>
+
+          <div className="bg-surface rounded-2xl border border-border shadow-card overflow-hidden">
+            <div className="px-6 py-4 border-b border-border flex items-center justify-between">
+              <div className="flex space-x-2">
+                {[1, 2, 3, 4].map((i) => (
+                  <div key={i} className="h-8 w-16 bg-gray-200 rounded-lg animate-pulse" />
+                ))}
+              </div>
+              <div className="h-9 w-48 bg-gray-200 rounded-lg animate-pulse" />
+            </div>
+            <div className="p-6">
+              {[1, 2, 3, 4, 5].map((i) => (
+                <div key={i} className="flex items-center py-4 border-b border-gray-100 last:border-0">
+                  <div className="w-8 h-8 rounded-full bg-gray-200 mr-3 animate-pulse" />
+                  <div className="flex-1 h-4 bg-gray-200 rounded animate-pulse" />
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-4 sm:p-6 lg:p-8">
+        <div className="max-w-7xl mx-auto">
+          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mb-6 sm:mb-8">
+            <div>
+              <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>
+          </div>
+          <div className="bg-status-critical-bg border border-status-critical text-status-critical-text rounded-2xl p-6 sm:p-8 text-center">
+            <p className="font-medium">{error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (employees.length === 0) {
+    return (
+      <div className="p-4 sm:p-6 lg:p-8">
+        <div className="max-w-7xl mx-auto">
+          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mb-6 sm:mb-8">
+            <div>
+              <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>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mb-6 sm:mb-8">
+          <div>
+            <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">
+          {stats.map((s) => (
+            <div key={s.label} className="bg-surface rounded-2xl p-5 border border-border">
+              <p className="text-xs text-text-muted font-medium mb-1">{s.label}</p>
+              <p className={`font-outfit text-2xl font-semibold ${s.color}`}>{s.value}</p>
+            </div>
+          ))}
+        </div>
+
+        <div className="bg-surface rounded-2xl border border-border shadow-card overflow-hidden">
+          <div className="px-4 sm:px-6 py-4 border-b border-border flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
+            <div className="flex flex-wrap items-center gap-2">
+              <button
+                key="all"
+                onClick={() => setFilter('all')}
+                className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
+                  filter === 'all' ? 'bg-primary text-white' : 'text-text-muted hover:bg-gray-100'
+                }`}
+              >
+                전체
+              </button>
+              {statusCodesLoading ? (
+                <span className="text-xs text-text-muted">Loading...</span>
+              ) : (
+                empStatusCodes.map((code) => (
+                  <button
+                    key={code.codeValue}
+                    onClick={() => setFilter(code.codeValue)}
+                    className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
+                      filter === code.codeValue ? 'bg-primary text-white' : 'text-text-muted hover:bg-gray-100'
+                    }`}
+                  >
+                    {code.codeName}
+                  </button>
+                ))
+              )}
+            </div>
+            <div className="relative w-full sm:w-56">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted" />
+              <input
+                value={skillKeyword}
+                onChange={(e) => setSkillKeyword(e.target.value)}
+                className="w-full pl-9 pr-3 py-1.5 rounded-lg bg-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+                placeholder="Search by name or skill..."
+              />
+            </div>
+          </div>
+
+          <div className="overflow-x-auto">
+            {/* Desktop table */}
+            <div className="hidden md:block">
+              <table className="w-full text-left">
+                <thead>
+                  <tr className="bg-gray-50/50">
+                    <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">이름</th>
+                    <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">권한</th>
+                    <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">상태</th>
+                    <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">이메일</th>
+                    <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">액션</th>
+                  </tr>
+                </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">
+                      <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`}>
+                            {emp.name[0]}
+                          </div>
+                          <div className="min-w-0">
+                            <p className="font-medium text-text-main truncate">{emp.name}</p>
+                            <p className="text-xs text-text-muted truncate">{emp.email}</p>
+                          </div>
+                        </div>
+                      </td>
+                      <td className="py-4 px-4 sm:px-6">
+                        <span className="text-xs font-medium text-text-muted">{roleLabel[emp.roleCode] || emp.roleCode}</span>
+                      </td>
+                      <td className="py-4 px-4 sm:px-6">
+                        <span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${statusColor[emp.empStatus]}`}>
+                          {emp.empStatus === 'ACTIVE' ? '재직' : emp.empStatus === 'ON_LEAVE' ? '휴직' : '퇴사'}
+                          {emp.dispatchStatus === 'DISPATCHED' && (
+                            <span className="ml-1.5 px-1.5 py-0.5 rounded bg-blue-100 text-blue-600 text-[10px]">파견중</span>
+                          )}
+                        </span>
+                      </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>
+                        )}
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            {/* 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 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)}`}>
+                        {emp.name.charAt(0)}
+                      </div>
+                      <div className="flex-1 min-w-0">
+                        <p className="text-sm font-medium text-text-main truncate">{emp.name}</p>
+                        <p className="text-xs text-text-muted truncate">{roleLabel[emp.roleCode] || emp.roleCode}</p>
+                      </div>
+                    </div>
+                    <span className={`text-[10px] font-medium px-2.5 py-1 rounded-full ${statusColor[emp.empStatus] || 'bg-gray-100 text-gray-600'}`}>
+                      {emp.empStatus === 'ACTIVE' ? '재직' : emp.empStatus === 'ON_LEAVE' ? '휴직' : '퇴사'}
+                    </span>
+                  </div>
+                  <div className="grid grid-cols-2 gap-2 text-xs text-text-muted">
+                    <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>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(main)/issues/[id]/page.tsx b/src/app/(main)/issues/[id]/page.tsx
new file mode 100644
index 0000000..367e19c
--- /dev/null
+++ b/src/app/(main)/issues/[id]/page.tsx
@@ -0,0 +1,207 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { ChevronLeft, Clock, User, MessageSquare, Paperclip, Send, CheckCircle2, ArrowRight } from 'lucide-react';
+import Link from 'next/link';
+import ticketService from '@/services/ticketService';
+import type { IssueTicket, TicketComment } from '@/types';
+
+const statusFlow = ['OPEN', 'ASSIGNED', 'IN_PROGRESS', 'RESOLVED', 'CLOSED'];
+const statusColor: Record<string, string> = {
+  OPEN: 'bg-status-open-bg text-status-open-text',
+  ASSIGNED: 'bg-status-pending-bg text-status-pending-text',
+  IN_PROGRESS: 'bg-status-pending-bg text-status-pending-text',
+  RESOLVED: 'bg-status-resolved-bg text-status-resolved-text',
+  CLOSED: 'bg-gray-100 text-text-muted',
+};
+const statusLabel: Record<string, string> = {
+  OPEN: 'Open', ASSIGNED: 'Assigned', IN_PROGRESS: 'In Progress', RESOLVED: 'Resolved', CLOSED: 'Closed',
+};
+
+export default function IssueDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const resolvedParams = React.use(params);
+  const ticketId = parseInt(resolvedParams.id);
+  const [ticket, setTicket] = useState<IssueTicket | null>(null);
+  const [comments, setComments] = useState<TicketComment[]>([]);
+  const [newComment, setNewComment] = useState('');
+  const [status, setStatus] = useState('OPEN');
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    Promise.all([
+      ticketService.getTicket(ticketId),
+      ticketService.getComments(ticketId),
+    ]).then(([ticketRes, commentsRes]) => {
+      setTicket(ticketRes.data);
+      setComments(commentsRes.data);
+      setStatus(ticketRes.data.status);
+    }).catch(console.error).finally(() => setLoading(false));
+  }, [ticketId]);
+
+  const currentIdx = statusFlow.indexOf(status);
+  const canAdvance = currentIdx < statusFlow.length - 1;
+  const isClosed = status === 'CLOSED';
+
+  const handleAdvance = async () => {
+    if (!canAdvance) return;
+    const nextStatus = statusFlow[currentIdx + 1];
+    try {
+      await ticketService.updateStatus(ticketId, nextStatus);
+      setStatus(nextStatus);
+    } catch (err: unknown) {
+      alert((err as { message?: string })?.message || '상태 변경 실패');
+    }
+  };
+
+  const handlePostComment = async () => {
+    if (!newComment.trim()) return;
+    try {
+      const res = await ticketService.addComment(ticketId, newComment.trim());
+      setComments([...comments, res.data]);
+      setNewComment('');
+    } catch { alert('댓글 등록 실패'); }
+  };
+
+  if (loading) return <div className="flex items-center justify-center h-screen text-text-muted text-sm">Loading...</div>;
+  if (!ticket) return <div className="flex items-center justify-center h-screen text-text-muted text-sm">Ticket not found</div>;
+
+  return (
+    <div className="min-h-screen bg-canvas">
+      <div className="max-w-[1400px] mx-auto p-4 sm:p-6 lg:p-8">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-6">
+          <Link href="/issues" className="flex items-center text-sm text-text-muted hover:text-text-main transition-colors">
+            <ChevronLeft className="w-4 h-4 mr-1" /> Back to Issues
+          </Link>
+          <div className="flex flex-wrap items-center gap-3">
+            <span className={`text-xs font-semibold px-3 py-1.5 rounded-full ${statusColor[status]}`}>{statusLabel[status]}</span>
+            {!isClosed && (
+              <button onClick={handleAdvance} disabled={!canAdvance} className="bg-primary hover:bg-primary-hover disabled:opacity-40 disabled:cursor-not-allowed text-white text-xs font-semibold px-4 py-1.5 rounded-lg transition-all flex items-center">
+                {canAdvance ? <>Advance <ArrowRight className="w-3.5 h-3.5 ml-1.5" /></> : 'Completed'}
+              </button>
+            )}
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <div className="lg:col-span-2 space-y-6">
+            <div className="bg-surface rounded-2xl border border-border p-4 sm:p-6">
+              <h1 className="font-outfit text-xl font-semibold text-text-main mb-4">{ticket.title}</h1>
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 text-sm mb-4">
+                <div><span className="text-text-muted text-xs">Project</span><p className="font-medium text-text-main">{ticket.projectName || '-'}</p></div>
+                <div><span className="text-text-muted text-xs">Category</span><p className="font-medium text-text-main">{ticket.category}</p></div>
+                <div><span className="text-text-muted text-xs">Priority</span><p className={`font-medium ${ticket.priority === 'CRITICAL' ? 'text-status-critical-text' : 'text-text-main'}`}>{ticket.priority}</p></div>
+                <div><span className="text-text-muted text-xs">Due</span><p className="font-medium text-text-main flex items-center">{ticket.dueDate ? <><Clock className="w-3.5 h-3.5 mr-1 text-status-critical-text" />{new Date(ticket.dueDate).toLocaleDateString('ko-KR')}</> : '-'}</p></div>
+              </div>
+              <div className="bg-gray-50 rounded-xl p-4">
+                <p className="text-xs text-text-muted mb-1">Description</p>
+                <p className="text-sm text-text-main whitespace-pre-wrap">{ticket.description}</p>
+              </div>
+            </div>
+
+            <div className="bg-surface rounded-2xl border border-border p-4 sm:p-6">
+              <h3 className="font-outfit font-semibold text-sm text-text-main mb-5 flex items-center">
+                <MessageSquare className="w-4 h-4 mr-2 text-primary" /> Timeline ({comments.length})
+              </h3>
+              <div className="space-y-4">
+                {comments.map((c) => (
+                  <div key={c.commentId} className="flex space-x-3">
+                    <div className="w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-semibold flex-shrink-0 bg-primary">
+                      {(c.userName || 'U')[0]}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center space-x-2 mb-1">
+                        <span className="text-xs font-semibold text-text-main">{c.userName || 'User'}</span>
+                        <span className="text-[10px] text-text-muted">{new Date(c.createdAt).toLocaleString('ko-KR')}</span>
+                      </div>
+                      <p className="text-sm text-text-main whitespace-pre-wrap">{c.commentText}</p>
+                      {c.attachedFileUrl && (
+                        <div className="mt-1.5 inline-flex items-center px-2.5 py-1 rounded-lg bg-indigo-50 text-indigo-600 text-xs">
+                          <Paperclip className="w-3 h-3 mr-1" /> {c.attachedFileUrl.split('/').pop()}
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+
+              {!isClosed && (
+                <div className="mt-5 pt-4 border-t border-border">
+                  <div className="flex items-start space-x-3">
+                    <div className="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white text-xs font-semibold flex-shrink-0">A</div>
+                    <div className="flex-1">
+                      <textarea
+                        value={newComment}
+                        onChange={(e) => setNewComment(e.target.value)}
+                        placeholder="Type your analysis, script, or guidance..."
+                        className="w-full px-4 py-2.5 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent resize-none"
+                        rows={2}
+                      />
+                      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 mt-2">
+                        <label className="text-xs text-text-muted hover:text-text-main flex items-center cursor-pointer">
+                          <Paperclip className="w-3.5 h-3.5 mr-1" /> Attach file
+                          <input type="file" className="hidden" onChange={(e) => {
+                            const f = e.target.files?.[0];
+                            if (f) alert(`File selected: ${f.name}`); e.target.value = '';
+                          }} />
+                        </label>
+                        <button onClick={handlePostComment} className="bg-primary hover:bg-primary-hover text-white text-xs font-semibold px-4 py-2 rounded-lg transition-all flex items-center">
+                          <Send className="w-3.5 h-3.5 mr-1.5" /> Send
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="space-y-6">
+            <div className="bg-surface rounded-2xl border border-border p-4 sm:p-5">
+              <h4 className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-4">Assignment</h4>
+              <div className="space-y-3">
+                <div className="flex items-center justify-between">
+                  <span className="text-xs text-text-muted">Requester</span>
+                  <span className="text-xs font-medium text-text-main flex items-center"><User className="w-3 h-3 mr-1.5 text-dot-orange" />{ticket.requesterName || '-'}</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-xs text-text-muted">Assignee</span>
+                  <span className="text-xs font-medium text-text-main flex items-center"><User className="w-3 h-3 mr-1.5 text-primary" />{ticket.assigneeName || '미배정'}</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-xs text-text-muted">Created</span>
+                  <span className="text-xs font-medium text-text-main">{new Date(ticket.createdAt).toLocaleDateString('ko-KR')}</span>
+                </div>
+              </div>
+            </div>
+
+            <div className="bg-surface rounded-2xl border border-border p-4 sm:p-5">
+              <h4 className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-4">Progress</h4>
+              <div className="space-y-3">
+                {statusFlow.map((s, i) => {
+                  const idx = statusFlow.indexOf(status);
+                  const isActive = idx >= i;
+                  const isCurrent = status === s;
+                  return (
+                    <div key={s} className="flex items-center">
+                      <div className={`w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0 ${isCurrent ? 'bg-primary text-white' : isActive ? 'bg-status-resolved-bg text-status-resolved-text' : 'bg-gray-100 text-text-muted'}`}>
+                        {isActive && !isCurrent ? <CheckCircle2 className="w-3.5 h-3.5" /> : <span className="text-[10px] font-bold">{i + 1}</span>}
+                      </div>
+                      <span className={`ml-3 text-xs font-medium ${isCurrent ? 'text-text-main font-semibold' : isActive ? 'text-text-main' : 'text-text-muted'}`}>{statusLabel[s]}</span>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+            {ticket.resolutionNote && (
+              <div className="bg-surface rounded-2xl border border-border p-4 sm:p-5">
+                <h4 className="text-xs font-semibold text-text-muted uppercase tracking-wider mb-2">Resolution Note</h4>
+                <p className="text-sm text-text-main">{ticket.resolutionNote}</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(main)/issues/page.tsx b/src/app/(main)/issues/page.tsx
new file mode 100644
index 0000000..adf16ff
--- /dev/null
+++ b/src/app/(main)/issues/page.tsx
@@ -0,0 +1,341 @@
+'use client';
+
+import React, { useState, useEffect, useMemo } from 'react';
+import { Search, Plus, X } from 'lucide-react';
+import Link from 'next/link';
+import { useRouter, useSearchParams } from 'next/navigation';
+import TicketCard from '@/components/issues/KanbanBoard';
+import { KanbanColumn } from '@/components/issues/KanbanBoard';
+import ticketService from '@/services/ticketService';
+import type { IssueTicket, TicketCategory, TicketPriority } from '@/types';
+import { useCommonCodes } from '@/hooks/useCommonCodes';
+
+const columns = [
+  { key: 'OPEN', label: 'Open', color: 'bg-status-open-text' },
+  { key: 'ASSIGNED', label: 'Assigned', color: 'bg-status-pending-text' },
+  { key: 'IN_PROGRESS', label: 'In Progress', color: 'bg-status-pending-text' },
+  { key: 'DONE', label: 'Done', color: 'bg-status-resolved-text' },
+];
+
+function CreateTicketModal({ onClose, onSuccess }: { onClose: () => void; onSuccess: () => void }) {
+  const [formData, setFormData] = useState({
+    title: '',
+    description: '',
+    category: 'BUG',
+    priority: 'NORMAL',
+    projectId: '',
+  });
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState('');
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setSubmitting(true);
+
+    try {
+      await ticketService.createTicket({
+        title: formData.title,
+        description: formData.description,
+        category: formData.category as TicketCategory,
+        priority: formData.priority as TicketPriority,
+        projectId: formData.projectId ? parseInt(formData.projectId) : undefined,
+      });
+      onSuccess();
+      onClose();
+    } catch (err: any) {
+      setError(err.response?.data?.message || 'Failed to create ticket');
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+      <div className="bg-white rounded-2xl shadow-xl w-full max-w-lg mx-4 overflow-hidden">
+        <div className="flex justify-between items-center p-6 border-b border-border">
+          <h3 className="font-outfit text-xl font-semibold text-text-main">New SR Ticket</h3>
+          <button onClick={onClose} className="p-2 hover:bg-surface-container rounded-lg transition-colors">
+            <X className="w-5 h-5 text-text-muted" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+          {error && (
+            <div className="p-3 bg-error-container/20 border border-error text-error rounded-lg text-sm">
+              {error}
+            </div>
+          )}
+
+          <div>
+            <label className="block text-sm font-medium text-text-main mb-1.5">Title</label>
+            <input
+              type="text"
+              value={formData.title}
+              onChange={(e) => setFormData({ ...formData, title: e.target.value })}
+              className="w-full px-3 py-2.5 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+              placeholder="Brief description of the issue"
+              required
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-text-main mb-1.5">Description</label>
+            <textarea
+              value={formData.description}
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+              className="w-full px-3 py-2.5 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none"
+              placeholder="Detailed explanation, error logs, steps to reproduce..."
+              rows={4}
+              required
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-text-main mb-1.5">Category</label>
+              <select
+                value={formData.category}
+                onChange={(e) => setFormData({ ...formData, category: e.target.value })}
+                className="w-full px-3 py-2.5 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary bg-white"
+              >
+                <option value="">Select</option>
+                <option value="BUG">Bug</option>
+                <option value="SUPPORT">Support</option>
+                <option value="QA">QA</option>
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-text-main mb-1.5">Priority</label>
+              <select
+                value={formData.priority}
+                onChange={(e) => setFormData({ ...formData, priority: e.target.value })}
+                className="w-full px-3 py-2.5 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary bg-white"
+              >
+                <option value="LOW">Low</option>
+                <option value="NORMAL">Normal</option>
+                <option value="HIGH">High</option>
+                <option value="CRITICAL">Critical</option>
+              </select>
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-text-main mb-1.5">Project ID</label>
+            <input
+              type="number"
+              value={formData.projectId}
+              onChange={(e) => setFormData({ ...formData, projectId: e.target.value })}
+              className="w-full px-3 py-2.5 border border-border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+              placeholder="Enter project ID"
+            />
+          </div>
+
+          <div className="flex justify-end space-x-3 pt-4">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2.5 text-sm font-medium text-text-main bg-surface-container hover:bg-surface-container-high rounded-lg transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={submitting}
+              className="px-4 py-2.5 text-sm font-medium text-white bg-primary hover:opacity-90 rounded-lg transition-opacity disabled:opacity-50"
+            >
+              {submitting ? 'Creating...' : 'Create Ticket'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default function IssuesPage() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [tickets, setTickets] = useState<IssueTicket[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [searchKeyword, setSearchKeyword] = useState('');
+  const [filterCategory, setFilterCategory] = useState('ALL');
+  const [filterPriority, setFilterPriority] = useState('ALL');
+  const [showCreateModal, setShowCreateModal] = useState(false);
+  const [mobileColumn, setMobileColumn] = useState<string>(columns[0].key);
+
+  const { codes: priorities } = useCommonCodes('TICKET_PRIORITY');
+  const { codes: categories } = useCommonCodes('TICKET_CATEGORY');
+
+  useEffect(() => {
+    const q = searchParams.get('search');
+    if (q) setSearchKeyword(q);
+  }, [searchParams]);
+
+  useEffect(() => {
+    ticketService.getTickets({ size: 100 }).then((res) => {
+      setTickets(res.data.content);
+    }).catch(console.error).finally(() => setLoading(false));
+  }, []);
+
+  const refreshTickets = () => {
+    setLoading(true);
+    ticketService.getTickets({ size: 100 }).then((res) => {
+      setTickets(res.data.content);
+    }).catch(console.error).finally(() => setLoading(false));
+  };
+
+  const filtered = useMemo(() => {
+    return tickets.filter((t) => {
+      if (searchKeyword && !t.title.toLowerCase().includes(searchKeyword.toLowerCase())) return false;
+      if (filterCategory !== 'ALL' && t.category !== filterCategory) return false;
+      if (filterPriority !== 'ALL' && t.priority !== filterPriority) return false;
+      return true;
+    });
+  }, [tickets, searchKeyword, filterCategory, filterPriority]);
+
+  const grouped = useMemo(() => {
+    const map: Record<string, IssueTicket[]> = {};
+    columns.forEach((c) => { map[c.key] = []; });
+    filtered.forEach((t) => {
+      const colKey = t.status === 'RESOLVED' || t.status === 'CLOSED' ? 'DONE' : t.status;
+      if (map[colKey]) map[colKey].push(t);
+    });
+    return map;
+  }, [filtered]);
+
+  useEffect(() => {
+    const firstWithTickets = columns.find((col) => grouped[col.key]?.length > 0);
+    if (firstWithTickets) {
+      setMobileColumn(firstWithTickets.key);
+    }
+  }, [grouped]);
+
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mb-6">
+          <div>
+            <h2 className="font-outfit text-2xl font-semibold text-text-main tracking-tight">SR Issues</h2>
+            <p className="text-text-muted text-sm mt-0.5">Track and manage field support requests</p>
+          </div>
+          <div className="flex flex-wrap items-center gap-2 w-full sm:w-auto">
+            <button
+              onClick={() => setShowCreateModal(true)}
+              className="flex items-center space-x-2 px-4 py-2.5 bg-primary text-white text-sm font-medium rounded-lg hover:opacity-90 transition-opacity flex-1 sm:flex-none justify-center"
+            >
+              <Plus className="w-4 h-4" />
+              <span>New Ticket</span>
+            </button>
+            <select value={filterPriority} onChange={(e) => setFilterPriority(e.target.value)} className="text-xs bg-white border border-border rounded-lg px-3 py-2 text-text-main focus:outline-none focus:ring-2 focus:ring-primary">
+              <option value="ALL">All Priority</option>
+              {priorities.map((p) => (
+                <option key={p.codeValue} value={p.codeValue}>{p.codeName}</option>
+              ))}
+            </select>
+            <select value={filterCategory} onChange={(e) => setFilterCategory(e.target.value)} className="text-xs bg-white border border-border rounded-lg px-3 py-2 text-text-main focus:outline-none focus:ring-2 focus:ring-primary">
+              <option value="ALL">All Category</option>
+              {categories.map((c) => (
+                <option key={c.codeValue} value={c.codeValue}>{c.codeName}</option>
+              ))}
+            </select>
+          </div>
+        </div>
+
+        <div className="relative w-full mb-6">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted" />
+          <input
+            value={searchKeyword}
+            onChange={(e) => {
+              setSearchKeyword(e.target.value);
+              router.replace(`/issues?search=${encodeURIComponent(e.target.value)}`);
+            }}
+            placeholder="Search tickets by title..."
+            className="w-full sm:w-96 pl-10 pr-4 py-2.5 rounded-xl bg-white border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all"
+          />
+        </div>
+
+        {loading ? (
+          <div className="flex items-center justify-center h-64 text-text-muted text-sm">Loading tickets...</div>
+        ) : (
+          <>
+            {/* Mobile: column selector */}
+            <div className="md:hidden mb-4">
+              <select
+                value={mobileColumn}
+                onChange={(e) => setMobileColumn(e.target.value)}
+                className="w-full px-4 py-2.5 rounded-xl bg-white border border-border text-sm"
+              >
+                {columns.map((col) => (
+                  <option key={col.key} value={col.key}>
+                    {col.label} ({grouped[col.key]?.length || 0})
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            {/* Desktop: all columns */}
+            <div className="hidden md:flex gap-4 overflow-x-auto pb-2">
+              {columns.map((col) => (
+                <div key={col.key} className="flex-1 min-w-[220px]">
+                  <KanbanColumn title={col.label} count={grouped[col.key].length} color={col.color}>
+                    {grouped[col.key].map((ticket) => (
+                      <Link key={ticket.ticketId} href={`/issues/${ticket.ticketId}`}>
+                        <TicketCard
+                          ticket={{
+                            ticketId: ticket.ticketId,
+                            title: ticket.title,
+                            projectName: ticket.projectName,
+                            requesterName: ticket.requesterName,
+                            assigneeName: ticket.assigneeName,
+                            priority: ticket.priority,
+                            category: ticket.category,
+                            status: ticket.status,
+                            dueDate: ticket.dueDate,
+                            isImminent: ticket.isImminent,
+                          }}
+                        />
+                      </Link>
+                    ))}
+                  </KanbanColumn>
+                </div>
+              ))}
+            </div>
+
+            {/* Mobile: single column */}
+            <div className="md:hidden space-y-3">
+              {(grouped[mobileColumn] || []).map((ticket) => (
+                <Link key={ticket.ticketId} href={`/issues/${ticket.ticketId}`}>
+                  <TicketCard
+                    ticket={{
+                      ticketId: ticket.ticketId,
+                      title: ticket.title,
+                      projectName: ticket.projectName,
+                      requesterName: ticket.requesterName,
+                      assigneeName: ticket.assigneeName,
+                      priority: ticket.priority,
+                      category: ticket.category,
+                      status: ticket.status,
+                      dueDate: ticket.dueDate,
+                      isImminent: ticket.isImminent,
+                    }}
+                  />
+                </Link>
+              ))}
+              {(grouped[mobileColumn] || []).length === 0 && (
+                <div className="flex items-center justify-center h-32 text-text-muted text-sm bg-gray-50/30 rounded-2xl">
+                  No tickets in this column
+                </div>
+              )}
+            </div>
+          </>
+        )}
+      </div>
+
+      {showCreateModal && (
+        <CreateTicketModal onClose={() => setShowCreateModal(false)} onSuccess={refreshTickets} />
+      )}
+    </div>
+  );
+}
diff --git a/src/app/(main)/itam/checkin/page.tsx b/src/app/(main)/itam/checkin/page.tsx
new file mode 100644
index 0000000..2c3f10b
--- /dev/null
+++ b/src/app/(main)/itam/checkin/page.tsx
@@ -0,0 +1,371 @@
+'use client';
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { 
+  Scan, 
+  CheckCircle2, 
+  Monitor, 
+  AlertTriangle, 
+  Trash2, 
+  Camera,
+  History,
+  Info,
+  ArrowDownLeft,
+  Settings,
+  Wrench,
+  Search,
+  Loader2
+} from 'lucide-react';
+import Link from 'next/link';
+import AssetVoucherCard from '@/components/itam/AssetVoucherCard';
+import equipmentService from '@/services/equipmentService';
+import type { Equipment, EquipmentAssignment } from '@/types';
+
+interface ScannedAsset {
+  equipmentId: number;
+  model: string;
+  sn: string;
+  project: string;
+  user: string;
+  status: 'Normal' | 'Broken' | 'Missing';
+  conditionNote: string;
+}
+
+/**
+ * 자산 반입 (Check-in) 페이지
+ * 스캔 중심의 일괄 회수 및 상태 점검 프로세스를 제공합니다.
+ */
+export default function AssetCheckinPage() {
+  const [isFinished, setIsFinished] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [scannedAssets, setScannedAssets] = useState<ScannedAsset[]>([]);
+  const [error, setError] = useState<string | null>(null);
+
+  // Fetch IN_USE equipment on mount
+  useEffect(() => {
+    const fetchInUseEquipment = async () => {
+      try {
+        setIsLoading(true);
+        setError(null);
+        const response = await equipmentService.getAll({ status: 'IN_USE', size: 100 });
+        
+        if (response.success && response.data) {
+          const equipmentList = response.data.content || [];
+          
+          // Transform Equipment to ScannedAsset format
+          const transformed: ScannedAsset[] = equipmentList.map((equip: Equipment) => ({
+            equipmentId: equip.equipmentId,
+            model: `${equip.manufacturer} ${equip.modelName}`,
+            sn: equip.serialNumber,
+            project: '파견 프로젝트', // Will be populated from assignment data if available
+            user: '미확인', // Will be populated from assignment data if available
+            status: 'Normal',
+            conditionNote: 'Normal - 정상 반입'
+          }));
+          
+          setScannedAssets(transformed);
+        }
+      } catch (err) {
+        console.error('Failed to fetch IN_USE equipment:', err);
+        setError('사용 중인 장비 목록을 불러오지 못했습니다.');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchInUseEquipment();
+  }, []);
+
+  const handleStatusChange = useCallback((idx: number, newStatus: 'Normal' | 'Broken' | 'Missing') => {
+    setScannedAssets(prev => {
+      const updated = [...prev];
+      updated[idx] = {
+        ...updated[idx],
+        status: newStatus,
+        conditionNote: newStatus === 'Normal' ? 'Normal - 정상 반입' 
+          : newStatus === 'Broken' ? 'Broken - 파손됨, 수리 필요'
+          : 'Missing - 분실 처리 필요'
+      };
+      return updated;
+    });
+  }, []);
+
+  const handleRmaRequest = useCallback(async (equipmentId: number, condition: string) => {
+    try {
+      const today = new Date().toISOString().split('T')[0];
+      await equipmentService.addMaintenance(equipmentId, {
+        maintenanceType: 'REPAIR',
+        issueDescription: condition,
+        cost: 0,
+        reportedDate: today
+      });
+      alert('RMA 수리 요청이 생성되었습니다.');
+    } catch (err) {
+      console.error('Failed to create RMA:', err);
+      alert('RMA 수리 요청 생성에 실패했습니다.');
+    }
+  }, []);
+
+  const handleLossReport = useCallback(() => {
+    alert('변상/손실 보고서 발행 기능이 실행됩니다.\n(관리자 페이지로 이동합니다.)');
+  }, []);
+
+  const handleCheckinComplete = useCallback(async () => {
+    try {
+      setIsSubmitting(true);
+      
+      // Process each asset return
+      const results = await Promise.allSettled(
+        scannedAssets.map(asset => 
+          equipmentService.return_(asset.equipmentId, { conditionNote: asset.conditionNote })
+        )
+      );
+      
+      // Check for failures
+      const failures = results.filter(r => r.status === 'rejected');
+      if (failures.length > 0) {
+        console.error('Some returns failed:', failures);
+        alert(`반입 처리 중 ${failures.length}건 실패했습니다. 콘솔을 확인하세요.`);
+      } else {
+        setIsFinished(true);
+      }
+    } catch (err) {
+      console.error('Check-in failed:', err);
+      alert('반입 처리 중 오류가 발생했습니다.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [scannedAssets]);
+
+  // Loading state
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-canvas flex items-center justify-center">
+        <div className="text-center">
+          <Loader2 className="w-12 h-12 text-primary animate-spin mx-auto mb-4" />
+          <p className="text-text-muted font-bold">장비 목록을 불러오는 중...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error && scannedAssets.length === 0) {
+    return (
+      <div className="min-h-screen bg-canvas flex items-center justify-center">
+        <div className="text-center max-w-md">
+          <AlertTriangle className="w-12 h-12 text-red-500 mx-auto mb-4" />
+          <h2 className="text-xl font-bold text-text-main mb-2">오류 발생</h2>
+          <p className="text-text-muted mb-6">{error}</p>
+          <button 
+            onClick={() => window.location.reload()}
+            className="px-6 py-3 bg-primary text-white rounded-xl font-bold hover:bg-primary-hover transition-all"
+          >
+            다시 시도
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      {!isFinished && (
+        <div className="max-w-7xl mx-auto mb-6">
+          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+            <div>
+              <h2 className="text-xl font-bold text-text-main tracking-tight">Asset Check-in</h2>
+              <p className="text-xs text-text-muted mt-0.5">일괄 반입 및 상태 점검</p>
+            </div>
+            <button 
+              onClick={handleCheckinComplete}
+              disabled={isSubmitting || scannedAssets.length === 0}
+              className="bg-primary text-white px-6 py-2.5 rounded-xl text-xs font-bold hover:bg-primary-hover transition-all flex items-center disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isSubmitting ? (
+                <><Loader2 className="w-3.5 h-3.5 mr-2 animate-spin" />처리 중...</>
+              ) : (
+                <><CheckCircle2 className="w-3.5 h-3.5 mr-1.5" />반입 완료 ({scannedAssets.length}건)</>
+              )}
+            </button>
+          </div>
+        </div>
+      )}
+
+      <main>
+        <div className="max-w-7xl mx-auto">
+          
+          {isFinished ? (
+            <div className="animate-in zoom-in-95 duration-500">
+               <div className="text-center mb-10">
+              <div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <ArrowDownLeft className="w-10 h-10 text-blue-600" />
+                  </div>
+                  <h2 className="text-3xl font-bold text-text-main tracking-tight">반입 처리가 완료되었습니다</h2>
+                  <p className="text-text-muted mt-2 text-sm">장비가 창고 재고로 복귀되었으며 상태에 따른 후속 워크플로우가 시작되었습니다.</p>
+               </div>
+               
+               <AssetVoucherCard 
+                 type="CHECK_IN"
+                 id="VCH-2024-IN-8831"
+                 date={new Date().toISOString().slice(0, 16).replace('T', ' ')}
+                 project="삼성페이 고도화 (SI)"
+                 user="김현장"
+                 assets={scannedAssets.map(a => ({
+                   id: String(a.equipmentId),
+                   model: a.model,
+                   sn: a.sn,
+                   project: a.project,
+                   user: a.user,
+                   status: a.status
+                 }))}
+               />
+
+               <div className="mt-12 flex justify-center space-x-4">
+                   <Link href="/itam" className="px-10 py-4 bg-text-main text-white rounded-[24px] text-sm font-bold shadow-xl hover:opacity-90 transition-all">
+                     자산 관리 메인으로
+                   </Link>
+                   <Link href="/itam/rma" className="px-10 py-4 bg-surface border border-border text-text-muted rounded-[24px] text-sm font-bold hover:bg-gray-50 transition-all">
+                     RMA 수리 현황 보기
+                   </Link>
+               </div>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
+               
+               {/* Left: Scan Area (4 cols) */}
+               <div className="lg:col-span-4 space-y-6">
+                   <div className="bg-surface p-8 rounded-[40px] border border-border shadow-card sticky top-28">
+                     <h3 className="text-lg font-bold text-text-main mb-6 flex items-center">
+                       <Scan className="w-5 h-5 mr-2 text-blue-600" />
+                       장비 스캔
+                     </h3>
+                     
+                     <div className="aspect-square w-full bg-gray-900 rounded-[32px] relative overflow-hidden flex items-center justify-center group cursor-pointer">
+                        {/* Fake Camera View */}
+                        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1518770660439-4636190af475?auto=format&fit=crop&q=80&w=800')] bg-cover bg-center opacity-30 group-hover:opacity-40 transition-opacity"></div>
+                        <div className="absolute inset-0 flex items-center justify-center">
+                            <div className="w-48 h-48 border-2 border-blue-400/50 rounded-3xl relative">
+                               <div className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-0.5 bg-blue-400 animate-pulse shadow-[0_0_20px_rgba(59,130,246,0.8)]"></div>
+                            </div>
+                        </div>
+                        <div className="z-10 text-center">
+                           <Camera className="w-10 h-10 text-white mb-2 mx-auto opacity-50" />
+                           <p className="text-xs font-bold text-white uppercase tracking-widest">Scanning...</p>
+                        </div>
+                    </div>
+                    
+                    <div className="mt-6 space-y-4">
+                        <div className="relative">
+                           <Search className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted" />
+                           <input type="text" placeholder="시리얼 번호 수동 입력" className="w-full pl-10 pr-4 py-3 bg-gray-50 border border-border rounded-xl text-xs focus:ring-2 focus:ring-primary/20 outline-none transition-all font-mono" />
+                        </div>
+                        <div className="p-4 bg-blue-50 rounded-2xl border border-blue-100">
+                          <p className="text-[11px] text-blue-700 leading-relaxed font-bold">
+                            <Info className="w-3.5 h-3.5 inline mr-1 -mt-0.5" />
+                            장비를 스캔하면 기존 반출 정보 (프로젝트, 사용자) 가 자동으로 연결됩니다.
+                          </p>
+                       </div>
+                    </div>
+                  </div>
+               </div>
+
+               {/* Right: Asset List & Condition (8 cols) */}
+               <div className="lg:col-span-8 space-y-6">
+                   <div className="bg-surface p-8 rounded-[40px] border border-border shadow-card min-h-[600px]">
+                     <div className="flex items-center justify-between mb-8">
+                       <h3 className="text-lg font-bold text-text-main flex items-center">
+                         <History className="w-5 h-5 mr-2 text-text-muted" />
+                         반입 대기 목록
+                         <span className="ml-3 px-2.5 py-0.5 bg-gray-100 text-text-muted text-[10px] font-bold rounded-full">
+                           {scannedAssets.length} Assets
+                         </span>
+                       </h3>
+                     </div>
+
+                     {scannedAssets.length === 0 ? (
+                       <div className="text-center py-20">
+                         <Monitor className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+                         <p className="text-text-muted font-bold">반입 대기 장비가 없습니다.</p>
+                         <p className="text-text-muted text-sm mt-2">IN_USE 상태의 장비가 없습니다.</p>
+                       </div>
+                     ) : (
+                       <div className="space-y-4">
+                         {scannedAssets.map((asset, i) => (
+                           <div key={asset.equipmentId} className="group p-6 bg-gray-50/50 rounded-[32px] border border-border hover:bg-surface hover:border-blue-200 hover:shadow-xl hover:shadow-blue-500/5 transition-all">
+                             <div className="flex items-start justify-between">
+                               <div className="flex items-center">
+                                 <div className="w-12 h-12 rounded-2xl bg-surface border border-border flex items-center justify-center mr-4 shadow-card">
+                                   <Monitor className={`w-6 h-6 ${asset.status === 'Broken' ? 'text-orange-400' : 'text-text-muted'}`} />
+                                 </div>
+                                 <div>
+                                   <div className="flex items-center space-x-2 mb-0.5">
+                                      <p className="text-sm font-bold text-text-main">{asset.model}</p>
+                                      <span className="text-[9px] font-bold bg-gray-200 text-text-muted px-1.5 py-0.5 rounded uppercase tracking-tighter">SN: {asset.sn}</span>
+                                   </div>
+                                   <p className="text-[11px] text-text-muted">
+                                      <span className="font-bold text-text-muted">{asset.project}</span> ∙ {asset.user} 님이 사용 중
+                                   </p>
+                                 </div>
+                               </div>
+                               <button className="p-2 text-gray-300 hover:text-red-500 opacity-0 group-hover:opacity-100 transition-all">
+                                 <Trash2 className="w-4 h-4" />
+                               </button>
+                             </div>
+
+                             {/* Condition Selection */}
+                             <div className="mt-6 pt-6 border-t border-border flex items-center justify-between">
+                                <div className="flex space-x-2">
+                                   {['Normal', 'Broken', 'Missing'].map(status => (
+                                     <button
+                                       key={status}
+                                       onClick={() => handleStatusChange(i, status as 'Normal' | 'Broken' | 'Missing')}
+                                       className={`px-4 py-2 rounded-xl text-[10px] font-bold border transition-all ${
+                                         asset.status === status 
+                                           ? (status === 'Normal' ? 'bg-emerald-500 text-white border-emerald-500' : 
+                                              status === 'Broken' ? 'bg-orange-500 text-white border-orange-500' : 
+                                              'bg-red-500 text-white border-red-500')
+                                           : 'bg-surface text-text-muted border-border hover:border-gray-300'
+                                       }`}
+                                     >
+                                      {status}
+                                    </button>
+                                  ))}
+                               </div>
+
+                               {/* Contextual Action Trigger */}
+                               {asset.status === 'Broken' && (
+                                 <div 
+                                   className="flex items-center text-orange-600 animate-in fade-in slide-in-from-right-2 duration-300 cursor-pointer hover:text-orange-700"
+                                   onClick={() => handleRmaRequest(asset.equipmentId, asset.conditionNote)}
+                                 >
+                                    <Wrench className="w-3.5 h-3.5 mr-1.5" />
+                                    <span className="text-[10px] font-bold underline">수리 의뢰 (RMA) 자동 생성</span>
+                                 </div>
+                               )}
+                               {asset.status === 'Missing' && (
+                                 <div 
+                                   className="flex items-center text-red-600 animate-in fade-in slide-in-from-right-2 duration-300 cursor-pointer hover:text-red-700"
+                                   onClick={handleLossReport}
+                                 >
+                                    <AlertTriangle className="w-3.5 h-3.5 mr-1.5" />
+                                    <span className="text-[10px] font-bold underline">변상/손실 보고서 발행</span>
+                                 </div>
+                               )}
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+               </div>
+            </div>
+          )}
+
+        </div>
+      </main>
+
+    </div>
+  );
+}
diff --git a/src/app/(main)/itam/checkout/page.tsx b/src/app/(main)/itam/checkout/page.tsx
new file mode 100644
index 0000000..36ece9a
--- /dev/null
+++ b/src/app/(main)/itam/checkout/page.tsx
@@ -0,0 +1,551 @@
+'use client';
+
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { 
+  ChevronRight, 
+  Search, 
+  User, 
+  MapPin, 
+  Scan, 
+  CheckCircle2, 
+  PenTool,
+  ArrowUpRight,
+  Monitor,
+  ShieldCheck,
+  X,
+  Loader2
+} from 'lucide-react';
+import Link from 'next/link';
+import AssetVoucherCard from '@/components/itam/AssetVoucherCard';
+import equipmentService from '@/services/equipmentService';
+import employeeService from '@/services/employeeService';
+import type { Equipment, EmployeeSearchResult } from '@/types';
+
+interface SelectedAsset {
+  equipmentId: number;
+  model: string;
+  sn: string;
+  status: string;
+  manufacturer: string;
+  equipmentType: string;
+}
+
+/**
+ * 자산 반출 (Check-out) 마법사 페이지
+ * 프로젝트별 장비 배정과 책임 소재 증빙 프로세스를 제공합니다.
+ */
+export default function AssetCheckoutPage() {
+  const [step, setStep] = useState(1);
+  const [selectedProject, setSelectedProject] = useState('');
+  const [selectedUser, setSelectedUser] = useState<EmployeeSearchResult | null>(null);
+  const [selectedAssets, setSelectedAssets] = useState<SelectedAsset[]>([]);
+  const [isFinished, setIsFinished] = useState(false);
+  
+  // Loading & Error states
+  const [isLoadingAssets, setIsLoadingAssets] = useState(false);
+  const [isLoadingEmployees, setIsLoadingEmployees] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  
+  // Data states
+  const [availableEquipment, setAvailableEquipment] = useState<Equipment[]>([]);
+  const [searchResults, setSearchResults] = useState<EmployeeSearchResult[]>([]);
+  const [userSearchQuery, setUserSearchQuery] = useState('');
+  
+  // Debounce ref for employee search
+  const searchTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Fetch available equipment on mount
+  useEffect(() => {
+    const fetchAvailableEquipment = async () => {
+      setIsLoadingAssets(true);
+      setError(null);
+      try {
+        const response = await equipmentService.getAll({ status: 'AVAILABLE', size: 100 });
+        if (response.success) {
+          setAvailableEquipment(response.data.content);
+        }
+      } catch (err) {
+        setError('장비 목록을 불러오는데 실패했습니다.');
+        console.error('Failed to fetch equipment:', err);
+      } finally {
+        setIsLoadingAssets(false);
+      }
+    };
+    
+    fetchAvailableEquipment();
+  }, []);
+
+  // Debounced employee search
+  const handleUserSearch = useCallback(async (query: string) => {
+    setUserSearchQuery(query);
+    
+    // Clear existing timeout
+    if (searchTimeoutRef.current) {
+      clearTimeout(searchTimeoutRef.current);
+    }
+    
+    // Set new timeout for debounce (300ms)
+    searchTimeoutRef.current = setTimeout(async () => {
+      if (query.trim() === '') {
+        setSearchResults([]);
+        return;
+      }
+      
+      setIsLoadingEmployees(true);
+      try {
+        const response = await employeeService.search(query);
+        if (response.success) {
+          setSearchResults(response.data);
+        }
+      } catch (err) {
+        console.error('Failed to search employees:', err);
+      } finally {
+        setIsLoadingEmployees(false);
+      }
+    }, 300);
+  }, []);
+
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (searchTimeoutRef.current) {
+        clearTimeout(searchTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  // Handle asset selection toggle
+  const toggleAssetSelection = (equipment: Equipment) => {
+    const isSelected = selectedAssets.some(a => a.equipmentId === equipment.equipmentId);
+    
+    if (isSelected) {
+      setSelectedAssets(prev => prev.filter(a => a.equipmentId !== equipment.equipmentId));
+    } else {
+      setSelectedAssets(prev => [...prev, {
+        equipmentId: equipment.equipmentId,
+        model: `${equipment.manufacturer} ${equipment.modelName}`,
+        sn: equipment.serialNumber,
+        status: 'Normal',
+        manufacturer: equipment.manufacturer,
+        equipmentType: equipment.equipmentType
+      }]);
+    }
+  };
+
+  // Handle step 3 submission - assign equipment
+  const handleAssignEquipment = async () => {
+    if (!selectedUser || selectedAssets.length === 0) {
+      setError('사용자와 장비를 선택해 주세요.');
+      return;
+    }
+    
+    setIsSubmitting(true);
+    setError(null);
+    
+    try {
+      // Assign each selected equipment
+      for (const asset of selectedAssets) {
+        await equipmentService.assign(asset.equipmentId, selectedUser.empId, '초기 지급');
+      }
+      
+      // Success - show completion screen
+      setIsFinished(true);
+    } catch (err: any) {
+      setError(err?.response?.data?.message || '장비 배정에 실패했습니다. 다시 시도해 주세요.');
+      console.error('Failed to assign equipment:', err);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Generate voucher ID for completion screen
+  const generateVoucherId = () => {
+    const now = new Date();
+    const year = now.getFullYear();
+    const random = Math.floor(Math.random() * 9000) + 1000;
+    return `VCH-${year}-OUT-${random}`;
+  };
+
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      {!isFinished && (
+        <div className="max-w-7xl mx-auto mb-6">
+          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+            <h2 className="text-xl font-bold text-text-main tracking-tight">Asset Check-out</h2>
+            
+            <div className="flex items-center gap-2">
+              {[1, 2, 3].map((s) => (
+                <div key={s} className="flex items-center">
+                  <div className={`w-7 h-7 rounded-full flex items-center justify-center text-[10px] font-bold transition-all ${
+                    step === s ? 'bg-orange-500 text-white shadow-lg' : 
+                    step > s ? 'bg-emerald-500 text-white' : 'bg-slate-100 text-slate-400'
+                  }`}>
+                    {step > s ? <CheckCircle2 className="w-3.5 h-3.5" /> : s}
+                  </div>
+                  {s < 3 && <div className={`w-8 h-0.5 mx-1 ${step > s ? 'bg-emerald-500' : 'bg-slate-200'}`}></div>}
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+
+      <main>
+        <div className="max-w-7xl mx-auto">
+          
+          {isFinished ? (
+            <div className="animate-in zoom-in-95 duration-500">
+               <div className="text-center mb-10">
+                 <div className="w-20 h-20 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                   <CheckCircle2 className="w-10 h-10 text-emerald-600" />
+                 </div>
+                 <h2 className="text-3xl font-bold text-slate-900 tracking-tight">반출 처리가 완료되었습니다</h2>
+                 <p className="text-slate-500 mt-2 text-sm">해당 장비의 책임 소재가 사용자에게 배정되었으며 디지털 전표가 발행되었습니다.</p>
+               </div>
+               
+               <AssetVoucherCard 
+                 type="CHECK_OUT"
+                 id={generateVoucherId()}
+                 date={new Date().toISOString().slice(0, 16).replace('T', ' ')}
+                 project={selectedProject || '프로젝트명'}
+                 user={selectedUser?.name || '사용자명'}
+                 assets={selectedAssets.map(a => ({
+                   model: a.model,
+                   sn: a.sn,
+                   status: a.status
+                 }))}
+                 signature={selectedUser?.name || ''}
+               />
+
+               <div className="mt-12 flex justify-center space-x-4">
+                  <Link href="/itam" className="px-10 py-4 bg-slate-900 text-white rounded-[24px] text-sm font-bold shadow-xl hover:bg-slate-800 transition-all">
+                    자산 관리 메인으로
+                  </Link>
+                  <button onClick={() => window.print()} className="px-10 py-4 bg-white border border-slate-200 text-slate-600 rounded-[24px] text-sm font-bold hover:bg-slate-50 transition-all">
+                    전표 인쇄하기
+                  </button>
+               </div>
+            </div>
+          ) : (
+            <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
+              
+              {/* Error Banner */}
+              {error && (
+                <div className="bg-red-50 border border-red-200 rounded-2xl p-4 flex items-center justify-between">
+                  <p className="text-sm text-red-700 font-medium">{error}</p>
+                  <button onClick={() => setError(null)} className="text-red-500 hover:text-red-700">
+                    <X className="w-5 h-5" />
+                  </button>
+                </div>
+              )}
+
+              {/* Step 1: Project & User */}
+              {step === 1 && (
+                <div className="bg-white p-10 rounded-[40px] border border-slate-200 shadow-sm space-y-8">
+                  <div className="space-y-2">
+                    <h3 className="text-2xl font-bold text-slate-900">배정 대상 및 책임자 선정</h3>
+                    <p className="text-sm text-slate-500">장비가 사용될 프로젝트와 최종 책임 사용자를 지정해 주세요.</p>
+                  </div>
+                  
+                  <div className="grid grid-cols-2 gap-8">
+                    <div className="space-y-2">
+                      <label className="text-xs font-bold text-slate-400 uppercase tracking-widest ml-1">대상 프로젝트</label>
+                      <div className="relative">
+                        <MapPin className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
+                        <select 
+                          value={selectedProject}
+                          onChange={(e) => setSelectedProject(e.target.value)}
+                          className="w-full pl-12 pr-4 py-4 bg-slate-50 border border-slate-200 rounded-[20px] text-sm font-bold focus:ring-2 focus:ring-orange-500/20 outline-none transition-all appearance-none"
+                        >
+                          <option value="">프로젝트 선택</option>
+                          <option>삼성페이 고도화 (SI)</option>
+                          <option>카카오 유지보수</option>
+                          <option>본사 R&D 센터</option>
+                        </select>
+                      </div>
+                    </div>
+                    <div className="space-y-2">
+                      <label className="text-xs font-bold text-slate-400 uppercase tracking-widest ml-1">최종 책임 사용자 (End-User)</label>
+                      <div className="relative">
+                        <User className="absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
+                        <input 
+                          type="text" 
+                          value={userSearchQuery}
+                          onChange={(e) => handleUserSearch(e.target.value)}
+                          placeholder="사용자 성함 입력" 
+                          className="w-full pl-12 pr-4 py-4 bg-slate-50 border border-slate-200 rounded-[20px] text-sm font-bold focus:ring-2 focus:ring-orange-500/20 outline-none transition-all" 
+                        />
+                        
+                        {/* Search Results Dropdown */}
+                        {isLoadingEmployees && (
+                          <div className="absolute top-full left-0 right-0 mt-2 bg-white rounded-2xl border border-slate-200 shadow-lg p-4 text-center">
+                            <Loader2 className="w-5 h-5 text-slate-400 animate-spin mx-auto" />
+                            <p className="text-xs text-slate-500 mt-2">검색 중...</p>
+                          </div>
+                        )}
+                        
+                        {searchResults.length > 0 && !isLoadingEmployees && (
+                          <div className="absolute top-full left-0 right-0 mt-2 bg-white rounded-2xl border border-slate-200 shadow-lg overflow-hidden z-50">
+                            {searchResults.map((emp) => (
+                              <button
+                                key={emp.empId}
+                                onClick={() => {
+                                  setSelectedUser(emp);
+                                  setSearchResults([]);
+                                  setUserSearchQuery(emp.name);
+                                }}
+                                className="w-full px-4 py-3 text-left hover:bg-slate-50 border-b border-slate-100 last:border-b-0 transition-colors"
+                              >
+                                <div className="flex items-center justify-between">
+                                  <div>
+                                    <p className="text-sm font-bold text-slate-900">{emp.name}</p>
+                                    <p className="text-xs text-slate-500">{emp.email}</p>
+                                  </div>
+                                  <div className="flex items-center space-x-2">
+                                    <span className="text-[10px] font-bold text-slate-400 px-2 py-1 bg-slate-100 rounded-full">
+                                      {emp.roleCode}
+                                    </span>
+                                    <span className={`text-[10px] font-bold px-2 py-1 rounded-full ${
+                                      emp.dispatchStatus === 'DISPATCHED' 
+                                        ? 'bg-amber-100 text-amber-700' 
+                                        : 'bg-emerald-100 text-emerald-700'
+                                    }`}>
+                                      {emp.dispatchStatus === 'DISPATCHED' ? '파견중' : '대기'}
+                                    </span>
+                                  </div>
+                                </div>
+                              </button>
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                      
+                      {/* Selected User Display */}
+                      {selectedUser && (
+                        <div className="mt-3 p-3 bg-orange-50 border border-orange-100 rounded-xl flex items-center justify-between">
+                          <div className="flex items-center">
+                            <div className="w-8 h-8 bg-orange-200 rounded-full flex items-center justify-center mr-3">
+                              <User className="w-4 h-4 text-orange-700" />
+                            </div>
+                            <div>
+                              <p className="text-sm font-bold text-orange-900">{selectedUser.name}</p>
+                              <p className="text-xs text-orange-600">{selectedUser.email}</p>
+                            </div>
+                          </div>
+                          <button 
+                            onClick={() => {
+                              setSelectedUser(null);
+                              setUserSearchQuery('');
+                            }}
+                            className="text-orange-400 hover:text-orange-600"
+                          >
+                            <X className="w-4 h-4" />
+                          </button>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                  
+                  <div className="pt-8 border-t border-slate-100 flex justify-end">
+                    <button 
+                      onClick={() => setStep(2)}
+                      disabled={!selectedProject || !selectedUser}
+                      className="bg-slate-900 text-white px-10 py-4 rounded-[24px] text-sm font-bold shadow-xl shadow-slate-200 hover:bg-slate-800 disabled:opacity-30 disabled:cursor-not-allowed transition-all flex items-center"
+                    >
+                      다음 단계: 장비 선택
+                      <ChevronRight className="w-4 h-4 ml-2" />
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              {/* Step 2: Asset Selection */}
+              {step === 2 && (
+                <div className="bg-white p-10 rounded-[40px] border border-slate-200 shadow-sm space-y-8">
+                  <div className="space-y-2 text-center">
+                    <h3 className="text-2xl font-bold text-slate-900 tracking-tight">반출 장비 선택</h3>
+                    <p className="text-sm text-slate-500">사용자에게 배정할 사용 가능한 장비를 선택해 주세요.</p>
+                  </div>
+
+                  {/* Equipment List */}
+                  <div className="space-y-4">
+                    {isLoadingAssets ? (
+                      <div className="py-12 text-center">
+                        <Loader2 className="w-8 h-8 text-slate-400 animate-spin mx-auto" />
+                        <p className="text-sm text-slate-500 mt-4">장비 목록을 불러오는 중...</p>
+                      </div>
+                    ) : availableEquipment.length === 0 ? (
+                      <div className="py-12 text-center bg-slate-50 rounded-2xl">
+                        <Monitor className="w-12 h-12 text-slate-300 mx-auto" />
+                        <p className="text-sm font-bold text-slate-500 mt-4">사용 가능한 장비가 없습니다</p>
+                        <p className="text-xs text-slate-400 mt-1">재고 상태를 확인해 주세요.</p>
+                      </div>
+                    ) : (
+                      <div className="grid grid-cols-2 gap-4 max-h-96 overflow-y-auto p-2">
+                        {availableEquipment.map((equipment) => {
+                          const isSelected = selectedAssets.some(a => a.equipmentId === equipment.equipmentId);
+                          return (
+                            <button
+                              key={equipment.equipmentId}
+                              onClick={() => toggleAssetSelection(equipment)}
+                              className={`p-4 rounded-2xl border-2 text-left transition-all ${
+                                isSelected 
+                                  ? 'border-orange-500 bg-orange-50 shadow-md' 
+                                  : 'border-slate-200 bg-white hover:border-slate-300 hover:shadow-sm'
+                              }`}
+                            >
+                              <div className="flex items-start justify-between mb-2">
+                                <div className="w-10 h-10 rounded-xl bg-slate-100 flex items-center justify-center">
+                                  <Monitor className="w-5 h-5 text-slate-400" />
+                                </div>
+                                {isSelected && (
+                                  <CheckCircle2 className="w-5 h-5 text-orange-500" />
+                                )}
+                              </div>
+                              <p className="text-sm font-bold text-slate-900 truncate">
+                                {equipment.manufacturer} {equipment.modelName}
+                              </p>
+                              <p className="text-xs font-mono text-slate-500 mt-1 truncate">
+                                {equipment.serialNumber}
+                              </p>
+                              <div className="flex items-center mt-2 space-x-2">
+                                <span className="text-[10px] font-bold text-slate-400 px-2 py-1 bg-slate-100 rounded-full">
+                                  {equipment.equipmentType}
+                                </span>
+                              </div>
+                            </button>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Selected List */}
+                  {selectedAssets.length > 0 && (
+                    <div className="space-y-3">
+                      <p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-1">선택된 장비 ({selectedAssets.length})</p>
+                      {selectedAssets.map((asset) => (
+                        <div key={asset.equipmentId} className="flex items-center justify-between p-4 bg-slate-50 rounded-[20px] border border-slate-100">
+                          <div className="flex items-center">
+                            <div className="w-10 h-10 rounded-xl bg-white border border-slate-200 flex items-center justify-center mr-4 shadow-sm">
+                              <Monitor className="w-5 h-5 text-slate-400" />
+                            </div>
+                            <div>
+                              <p className="text-sm font-bold text-slate-900">{asset.model}</p>
+                              <p className="text-xs font-mono text-slate-400">{asset.sn}</p>
+                            </div>
+                          </div>
+                          <button 
+                            onClick={() => toggleAssetSelection({
+                              equipmentId: asset.equipmentId,
+                              manufacturer: asset.manufacturer,
+                              modelName: asset.model.replace(asset.manufacturer + ' ', ''),
+                              serialNumber: asset.sn,
+                              assetCode: '',
+                              equipmentType: asset.equipmentType as any,
+                              specifications: {},
+                              status: 'AVAILABLE' as any,
+                              purchaseDate: '',
+                              warrantyExpDate: '',
+                              version: 0
+                            })}
+                            className="text-[10px] font-bold text-red-400 hover:text-red-600 transition-colors"
+                          >
+                            삭제
+                          </button>
+                        </div>
+                      ))}
+                    </div>
+                  )}
+
+                  <div className="pt-8 border-t border-slate-100 flex justify-between items-center">
+                    <button onClick={() => setStep(1)} className="text-sm font-bold text-slate-400 hover:text-slate-600">이전 단계로</button>
+                    <button 
+                      onClick={() => setStep(3)}
+                      disabled={selectedAssets.length === 0}
+                      className="bg-slate-900 text-white px-10 py-4 rounded-[24px] text-sm font-bold shadow-xl shadow-slate-200 hover:bg-slate-800 disabled:opacity-30 disabled:cursor-not-allowed transition-all flex items-center"
+                    >
+                      다음 단계: 책임 확인 및 서명
+                      <ChevronRight className="w-4 h-4 ml-2" />
+                    </button>
+                  </div>
+                </div>
+              )}
+
+              {/* Step 3: Signature */}
+              {step === 3 && (
+                <div className="bg-white p-10 rounded-[40px] border border-slate-200 shadow-sm space-y-8">
+                   <div className="space-y-2 text-center">
+                    <h3 className="text-2xl font-bold text-slate-900 tracking-tight">최종 확인 및 서명</h3>
+                    <p className="text-sm text-slate-500">장비 인수 시 파손 및 분실에 대한 책임 소재를 확인하고 서명해 주세요.</p>
+                  </div>
+
+                  <div className="p-8 bg-orange-50/50 rounded-[32px] border border-orange-100 text-orange-900">
+                    <h4 className="text-sm font-bold mb-3 flex items-center">
+                      <ShieldCheck className="w-4 h-4 mr-2" />
+                      자산 인수 책임 선언문
+                    </h4>
+                    <p className="text-xs leading-relaxed opacity-80 italic">
+                      "본인은 위 명시된 프로젝트 수행을 위해 해당 자산을 정상적인 상태로 인수하였음을 확인합니다. 사용 중 발생하는 본인의 과실에 의한 파손 및 분실에 대해서는 회사의 자산 관리 규정에 따라 변상 또는 복구 책임이 있음을 인지하며, 프로젝트 종료 시 즉시 반납할 것을 약속합니다."
+                    </p>
+                  </div>
+
+                  {/* Summary of selected items */}
+                  <div className="bg-slate-50 rounded-2xl p-6 space-y-4">
+                    <div className="flex items-center justify-between pb-4 border-b border-slate-200">
+                      <span className="text-xs font-bold text-slate-500 uppercase">프로젝트</span>
+                      <span className="text-sm font-bold text-slate-900">{selectedProject}</span>
+                    </div>
+                    <div className="flex items-center justify-between pb-4 border-b border-slate-200">
+                      <span className="text-xs font-bold text-slate-500 uppercase">책임 사용자</span>
+                      <span className="text-sm font-bold text-slate-900">{selectedUser?.name}</span>
+                    </div>
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs font-bold text-slate-500 uppercase">배정 장비</span>
+                      <span className="text-sm font-bold text-slate-900">{selectedAssets.length} 대</span>
+                    </div>
+                  </div>
+
+                  <div className="max-w-sm mx-auto text-center">
+                     <label className="text-[10px] font-bold text-slate-400 uppercase mb-3 block tracking-widest">Digital Signature Area</label>
+                     <div className="aspect-[2/1] bg-slate-50 rounded-[24px] border-2 border-dashed border-slate-200 flex flex-col items-center justify-center group hover:bg-white hover:border-orange-300 transition-all cursor-pointer">
+                        <PenTool className="w-8 h-8 text-slate-200 group-hover:text-orange-300 transition-colors" />
+                        <p className="text-[10px] font-bold text-slate-300 mt-2">서명 영역 (자동 입력)</p>
+                        <div className="mt-4 px-6 py-2 bg-white border border-slate-200 rounded-xl font-cursive text-xl text-slate-700 shadow-sm">
+                           {selectedUser?.name || ''}
+                        </div>
+                     </div>
+                  </div>
+
+                  <div className="pt-8 border-t border-slate-100 flex justify-between items-center">
+                    <button onClick={() => setStep(2)} className="text-sm font-bold text-slate-400 hover:text-slate-600">이전 단계로</button>
+                    <button 
+                      onClick={handleAssignEquipment}
+                      disabled={isSubmitting || selectedAssets.length === 0}
+                      className="bg-orange-500 text-white px-12 py-4 rounded-[24px] text-sm font-bold shadow-xl shadow-orange-200 hover:bg-orange-600 disabled:opacity-50 disabled:cursor-not-allowed transition-all flex items-center"
+                    >
+                      {isSubmitting ? (
+                        <>
+                          <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                          처리 중...
+                        </>
+                      ) : (
+                        <>
+                          <ArrowUpRight className="w-4 h-4 mr-2" />
+                          반출 완료 및 전표 발행
+                        </>
+                      )}
+                    </button>
+                  </div>
+                </div>
+              )}
+
+            </div>
+          )}
+        </div>
+      </main>
+
+    </div>
+  );
+}
diff --git a/src/app/(main)/itam/history/[id]/page.tsx b/src/app/(main)/itam/history/[id]/page.tsx
new file mode 100644
index 0000000..7806a5d
--- /dev/null
+++ b/src/app/(main)/itam/history/[id]/page.tsx
@@ -0,0 +1,323 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import {
+  ArrowUpRight,
+  ArrowDownLeft,
+  Wrench,
+  Plus,
+  Calendar,
+  User,
+  MapPin,
+  Image as ImageIcon,
+  Loader2,
+  AlertCircle
+} from 'lucide-react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import equipmentService from '@/services/equipmentService';
+import type { Equipment, EquipmentAssignment, EquipmentMaintenance } from '@/types';
+
+interface TimelineItem {
+  id: number;
+  type: 'checkout' | 'checkin' | 'maintenance' | 'register';
+  label: string;
+  date: string;
+  description: string;
+  actor: string;
+  location: string;
+  photo: boolean;
+}
+
+/**
+ * 자산 상세 이력 페이지
+ * 특정 장비의 모든 이동 및 상태 변화 이력을 타임라인으로 표시합니다.
+ */
+export default function AssetHistoryPage({ params }: { params: Promise<{ id: string }> }) {
+  const router = useRouter();
+  const { id } = React.use(params);
+  const [equipment, setEquipment] = useState<Equipment | null>(null);
+  const [timeline, setTimeline] = useState<any[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [info, setInfo] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        const equipId = Number(id);
+        
+        if (!equipId || isNaN(equipId)) {
+          setInfo('Select an equipment to view its history.');
+          setLoading(false);
+          return;
+        }
+
+        if (isNaN(equipId)) {
+          setError('Invalid equipment ID');
+          setLoading(false);
+          return;
+        }
+
+        const [equipRes, assignmentsRes, maintenancesRes] = await Promise.all([
+          equipmentService.getOne(equipId),
+          equipmentService.getAssignments(equipId),
+          equipmentService.getMaintenances(equipId),
+        ]);
+
+        if (!equipRes.success || !assignmentsRes.success || !maintenancesRes.success) {
+          setError('Failed to fetch equipment history');
+          setLoading(false);
+          return;
+        }
+
+        setEquipment(equipRes.data);
+
+        const items: TimelineItem[] = [];
+
+        assignmentsRes.data.forEach((assignment) => {
+          items.push({
+            id: assignment.assignmentId,
+            type: 'checkout',
+            label: '반출 (현장 배정)',
+            date: assignment.assignedDate,
+            description: `${assignment.userName || 'Unknown'} 에게 장비가 지급되었습니다.`,
+            actor: '시스템',
+            location: '현장',
+            photo: false,
+          });
+
+          if (assignment.returnedDate) {
+            items.push({
+              id: assignment.assignmentId + 10000,
+              type: 'checkin',
+              label: '반납 완료',
+              date: assignment.returnedDate,
+              description: `장비가 반납되었습니다. 상태: ${assignment.condOnReturn || '확인됨'}`,
+              actor: '시스템',
+              location: '본사 창고',
+              photo: assignment.condOnReturn ? true : false,
+            });
+          }
+        });
+
+        maintenancesRes.data.forEach((maint) => {
+          const isResolved = !!maint.resolvedDate;
+          items.push({
+            id: maint.maintenanceId + 20000,
+            type: 'maintenance',
+            label: isResolved ? '정비 완료' : '정비 진행중',
+            date: isResolved ? maint.resolvedDate! : maint.reportedDate,
+            description: maint.actionTaken || maint.issueDescription,
+            actor: maint.reporterName || '시스템',
+            location: maint.maintenanceType === 'DISPOSAL' ? '폐기 처리' : '서비스 센터',
+            photo: true,
+          });
+        });
+
+        if (equipRes.data.purchaseDate) {
+          items.push({
+            id: 99999,
+            type: 'register',
+            label: '신규 자산 등록',
+            date: equipRes.data.purchaseDate,
+            description: `${equipRes.data.manufacturer} ${equipRes.data.modelName} 이 신규 입고되었습니다.`,
+            actor: '시스템',
+            location: '본사 창고',
+            photo: true,
+          });
+        }
+
+        items.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
+        setTimeline(items);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An error occurred');
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+  }, [id]);
+
+  const getIcon = (type: string) => {
+    switch (type) {
+      case 'checkout':
+        return <ArrowUpRight className="w-4 h-4 text-orange-500" />;
+      case 'checkin':
+        return <ArrowDownLeft className="w-4 h-4 text-blue-500" />;
+      case 'maintenance':
+        return <Wrench className="w-4 h-4 text-purple-500" />;
+      case 'register':
+        return <Plus className="w-4 h-4 text-emerald-500" />;
+      default:
+        return <Calendar className="w-4 h-4 text-slate-500" />;
+    }
+  };
+
+  const getStatusBadge = (status: string) => {
+    const statusMap: Record<string, { bg: string; text: string; label: string }> = {
+      AVAILABLE: { bg: 'bg-emerald-50', text: 'text-status-resolved-text', label: 'Available' },
+      IN_USE: { bg: 'bg-blue-50', text: 'text-status-open-text', label: 'In Use' },
+      REPAIRING: { bg: 'bg-amber-50', text: 'text-status-pending-text', label: 'Repairing' },
+      RETIRED: { bg: 'bg-gray-50', text: 'text-status-closed-text', label: 'Retired' },
+      LOST: { bg: 'bg-red-50', text: 'text-error', label: 'Lost' },
+    };
+    const s = statusMap[status] || statusMap.AVAILABLE;
+    return (
+      <span className={`text-xs font-bold ${s.text} ${s.bg} px-3 py-1 rounded-full border border-border`}>
+        {s.label}
+      </span>
+    );
+  };
+
+  if (info) {
+    return (
+      <div className="p-4 sm:p-6 lg:p-8">
+        <div className="max-w-7xl mx-auto">
+          <div className="bg-surface border border-border rounded-[24px] p-12 text-center">
+            <h3 className="text-lg font-bold text-text-main mb-2">{info}</h3>
+            <Link href="/itam" className="inline-block mt-4 px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary-hover transition-colors">
+              자산 관리 메인으로
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (loading) {
+    return (
+      <div className="p-4 sm:p-6 lg:p-8">
+        <div className="max-w-7xl mx-auto">
+          <div className="flex justify-center py-12">
+            <Loader2 className="w-8 h-8 animate-spin text-primary" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-4 sm:p-6 lg:p-8">
+        <div className="max-w-7xl mx-auto">
+          <div className="bg-red-50 border border-red-200 rounded-[24px] p-8 text-center">
+            <AlertCircle className="w-12 h-12 text-red-500 mx-auto mb-4" />
+            <h3 className="text-lg font-bold text-red-700 mb-2">Error Loading History</h3>
+            <p className="text-red-600 mb-4">{error}</p>
+            <div className="flex justify-center gap-4">
+              <button onClick={() => router.refresh()} className="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors">
+                Retry
+              </button>
+              <Link href="/itam" className="px-4 py-2 bg-surface border border-border text-text-muted rounded-lg hover:bg-gray-50 transition-colors">
+                자산 관리 메인으로
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (timeline.length === 0) {
+    return (
+      <div className="p-4 sm:p-6 lg:p-8">
+        <div className="max-w-7xl mx-auto">
+          <div className="flex items-center space-x-4 mb-8">
+            <div>
+              <h2 className="text-2xl font-bold text-text-main tracking-tight">Asset History</h2>
+              <p className="text-sm text-text-muted">
+                {equipment?.assetCode} | {equipment?.modelName}
+              </p>
+            </div>
+          </div>
+          <div className="bg-surface border border-border rounded-[24px] p-12 text-center">
+            <Calendar className="w-12 h-12 text-gray-300 mx-auto mb-4" />
+            <h3 className="text-lg font-bold text-text-main mb-2">No History Found</h3>
+            <p className="text-text-muted">This equipment has no recorded history.</p>
+            <Link
+              href="/itam"
+              className="inline-block mt-4 px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary-hover transition-colors"
+            >
+              자산 관리 메인으로
+            </Link>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="max-w-7xl mx-auto">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h2 className="text-2xl font-bold text-text-main tracking-tight">Asset History</h2>
+            <p className="text-sm text-text-muted">
+              {equipment?.assetCode} | {equipment?.modelName}
+            </p>
+          </div>
+          {equipment && getStatusBadge(equipment.status)}
+        </div>
+
+        {/* Timeline List */}
+        <div className="relative space-y-6 before:absolute before:inset-0 before:ml-5 before:-translate-x-px before:-h-6 before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-gray-200 before:to-gray-200">
+          {timeline.map((item) => (
+            <div key={item.id} className="relative flex items-start group">
+              {/* Dot Icon */}
+              <div
+                className={`absolute left-0 w-10 h-10 rounded-full border-4 border-canvas flex items-center justify-center z-10 transition-transform group-hover:scale-110 ${
+                  item.type === 'checkout'
+                    ? 'bg-orange-50'
+                    : item.type === 'checkin'
+                    ? 'bg-blue-50'
+                    : item.type === 'maintenance'
+                    ? 'bg-purple-50'
+                    : 'bg-emerald-50'
+                }`}
+              >
+                {getIcon(item.type)}
+              </div>
+
+              {/* Card Content */}
+              <div className="ml-14 flex-1 bg-surface p-6 rounded-[24px] border border-border shadow-card hover:shadow-float transition-all">
+                <div className="flex justify-between items-start mb-3">
+                  <div>
+                    <h4 className="text-sm font-bold text-text-main">{item.label}</h4>
+                    <div className="flex items-center text-[11px] text-text-muted mt-1 font-medium">
+                      <Calendar className="w-3 h-3 mr-1" />
+                      {item.date}
+                      <span className="mx-2 text-gray-200">|</span>
+                      <User className="w-3 h-3 mr-1" />
+                      {item.actor}
+                    </div>
+                  </div>
+                  <div className="flex items-center text-[10px] font-bold text-text-muted bg-gray-50 px-2 py-0.5 rounded border border-border uppercase">
+                    <MapPin className="w-2.5 h-2.5 mr-1" />
+                    {item.location}
+                  </div>
+                </div>
+
+                <p className="text-sm text-text-main leading-relaxed mb-4">{item.description}</p>
+
+                {/* Photo Evidence */}
+                {item.photo && (
+                  <div className="flex items-center space-x-2">
+                    <div className="w-16 h-16 rounded-xl bg-gray-100 border border-border flex items-center justify-center text-gray-300 relative group overflow-hidden cursor-pointer">
+                      <ImageIcon className="w-5 h-5" />
+                      <div className="absolute inset-0 bg-black/10 opacity-0 group-hover:opacity-100 transition-opacity"></div>
+                    </div>
+                    <p className="text-[10px] font-bold text-text-muted">장비 상태 사진 첨부됨</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(main)/itam/page.tsx b/src/app/(main)/itam/page.tsx
new file mode 100644
index 0000000..2ad76a6
--- /dev/null
+++ b/src/app/(main)/itam/page.tsx
@@ -0,0 +1,187 @@
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import { Plus, ArrowUpRight, ArrowDownLeft, History, Search, Layers, Download, Filter, FileText, Loader2 } from 'lucide-react';
+import Link from 'next/link';
+import AssetStatusOverview from '@/components/itam/AssetStatusOverview';
+import AssetInventory from '@/components/itam/AssetInventory';
+import equipmentService from '@/services/equipmentService';
+import { useCommonCodes } from '@/hooks/useCommonCodes';
+import type { Equipment } from '@/types';
+
+export default function ITAMDashboard() {
+  const [equipment, setEquipment] = useState<Equipment[]>([]);
+  const [summary, setSummary] = useState<Record<string, number>>({ ALL: 0 });
+  const [loading, setLoading] = useState(true);
+  const [filter, setFilter] = useState('ALL');
+  const [search, setSearch] = useState('');
+  const [page, setPage] = useState(0);
+  const [totalPages, setTotalPages] = useState(0);
+  const PAGE_SIZE = 10;
+
+  const { codes: equipmentStatusCodes, loading: codesLoading } = useCommonCodes('EQUIPMENT_STATUS');
+
+  const refresh = (p = 0) => {
+    setLoading(true);
+    setPage(p);
+    Promise.all([
+      equipmentService.getAll({ page: p, size: PAGE_SIZE }),
+      equipmentService.getSummary(),
+    ]).then(([eqRes, sumRes]) => {
+      setEquipment(eqRes.data.content);
+      setTotalPages(eqRes.data.totalPages);
+      const counts = sumRes.data || {};
+      counts.ALL = Object.values(counts).reduce((a: number, b: any) => a + (typeof b === 'number' ? b : 0), 0);
+      setSummary(counts);
+    }).catch(console.error).finally(() => setLoading(false));
+  };
+
+  useEffect(() => { refresh(); }, []);
+
+  const filtered = search || filter !== 'ALL'
+    ? equipment.filter((e) => {
+        if (filter !== 'ALL' && e.status !== filter) return false;
+        if (search && !e.modelName.toLowerCase().includes(search.toLowerCase()) && !e.assetCode.toLowerCase().includes(search.toLowerCase())) return false;
+        return true;
+      })
+    : equipment;
+
+  const [generatingPdf, setGeneratingPdf] = useState(false);
+  const pdfRef = useRef<HTMLDivElement>(null);
+  const allEquipmentRef = useRef<Equipment[]>([]);
+
+  const handleExportPdf = async () => {
+    setGeneratingPdf(true);
+    try {
+      if (allEquipmentRef.current.length === 0) {
+        const res = await equipmentService.getAll({ size: 1000 });
+        allEquipmentRef.current = res.data.content;
+      }
+      const items = allEquipmentRef.current;
+      const today = new Date().toISOString().split('T')[0];
+
+      // Build HTML content
+      const statusRow = (s: string) =>
+        `<span style="display:inline-block;padding:2px 10px;border-radius:12px;font-size:11px;font-weight:600;${
+          s === 'IN_USE' ? 'background:#dbeafe;color:#1d4ed8' :
+          s === 'AVAILABLE' ? 'background:#dcfce7;color:#15803d' :
+          s === 'REPAIRING' ? 'background:#fef3c7;color:#b45309' :
+          s === 'RETIRED' ? 'background:#f3f4f6;color:#6b7280' :
+          'background:#fce7f3;color:#be185d'
+        }">${s.replace('_', ' ')}</span>`;
+
+      const html = `
+        <div id="pdf-content" style="padding:40px;font-family:Inter,-apple-system,sans-serif;color:#1e293b;">
+          <div style="text-align:center;margin-bottom:24px;border-bottom:2px solid #1e293b;padding-bottom:16px;">
+            <h1 style="font-size:22px;font-weight:700;margin:0;letter-spacing:-0.5px;">IT 자산 관리 대장</h1>
+            <p style="font-size:12px;color:#64748b;margin:4px 0 0;">SR System HQ Helpdesk · 출력일: ${today}</p>
+          </div>
+          <table style="width:100%;border-collapse:collapse;font-size:11px;">
+            <thead>
+              <tr style="background:#1e293b;color:#fff;">
+                <th style="padding:8px 10px;text-align:left;font-weight:600;">자산코드</th>
+                <th style="padding:8px 10px;text-align:left;font-weight:600;">구분</th>
+                <th style="padding:8px 10px;text-align:left;font-weight:600;">제조사</th>
+                <th style="padding:8px 10px;text-align:left;font-weight:600;">모델명</th>
+                <th style="padding:8px 10px;text-align:left;font-weight:600;">시리얼번호</th>
+                <th style="padding:8px 10px;text-align:left;font-weight:600;">상태</th>
+                <th style="padding:8px 10px;text-align:left;font-weight:600;">구매일</th>
+                <th style="padding:8px 10px;text-align:right;font-weight:600;">보증만료</th>
+              </tr>
+            </thead>
+            <tbody>
+              ${items.map((e, i) => `
+                <tr style="${i % 2 === 0 ? 'background:#f8fafc' : ''}">
+                  <td style="padding:6px 10px;border-bottom:1px solid #e2e8f0;font-family:monospace;font-size:10px;">${e.assetCode}</td>
+                  <td style="padding:6px 10px;border-bottom:1px solid #e2e8f0;">${e.equipmentType}</td>
+                  <td style="padding:6px 10px;border-bottom:1px solid #e2e8f0;">${e.manufacturer}</td>
+                  <td style="padding:6px 10px;border-bottom:1px solid #e2e8f0;font-weight:500;">${e.modelName}</td>
+                  <td style="padding:6px 10px;border-bottom:1px solid #e2e8f0;font-family:monospace;font-size:10px;">${e.serialNumber}</td>
+                  <td style="padding:6px 10px;border-bottom:1px solid #e2e8f0;">${statusRow(e.status)}</td>
+                  <td style="padding:6px 10px;border-bottom:1px solid #e2e8f0;">${e.purchaseDate || '-'}</td>
+                  <td style="padding:6px 10px;border-bottom:1px solid #e2e8f0;text-align:right;">${e.warrantyExpDate || '-'}</td>
+                </tr>
+              `).join('')}
+            </tbody>
+          </table>
+          <div style="margin-top:20px;padding-top:16px;border-top:1px solid #e2e8f0;font-size:10px;color:#94a3b8;display:flex;justify-content:space-between;">
+            <span>총 ${items.length}건</span>
+            <span>SR System v1.0</span>
+          </div>
+        </div>
+      `;
+
+      // Create temp element and generate PDF
+      const element = document.createElement('div');
+      element.innerHTML = html;
+      document.body.appendChild(element);
+
+      const html2pdf = (await import('html2pdf.js')).default;
+      await html2pdf().set({
+        margin: [10, 10],
+        filename: `IT_Asset_Ledger_${today}.pdf`,
+        image: { type: 'jpeg', quality: 0.98 },
+        html2canvas: { scale: 2, useCORS: true },
+        jsPDF: { unit: 'mm', format: 'a4', orientation: 'landscape' },
+      }).from(element).save();
+
+      document.body.removeChild(element);
+    } catch (err) {
+      console.error('PDF export failed:', err);
+      alert('PDF export failed. Please try again.');
+    }
+    setGeneratingPdf(false);
+  };
+
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mb-6">
+          <div>
+            <h1 className="text-xl font-bold text-text-main tracking-tight flex items-center">
+              <Layers className="w-5 h-5 mr-3 text-primary" /> IT Asset Management
+            </h1>
+            <p className="text-sm text-text-muted mt-0.5">Total {summary.ALL || 0} assets · {summary.IN_USE || 0} in use · {summary.AVAILABLE || 0} available</p>
+          </div>
+          <div className="flex flex-wrap items-center gap-2 w-full sm:w-auto">
+            <div className="relative flex-1 sm:flex-none">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted" />
+              <input value={search} onChange={(e) => setSearch(e.target.value)} placeholder="Search assets..." className="pl-9 pr-3 py-2 rounded-xl bg-gray-100 border-none text-sm focus:outline-none focus:ring-2 focus:ring-primary w-full sm:w-48" />
+            </div>
+            <button onClick={handleExportPdf} disabled={generatingPdf} className="bg-surface text-text-main border border-border px-4 py-2 rounded-xl text-xs font-semibold hover:bg-gray-50 transition-all flex items-center disabled:opacity-50">
+              {generatingPdf ? <Loader2 className="w-3.5 h-3.5 mr-1.5 animate-spin" /> : <FileText className="w-3.5 h-3.5 mr-1.5" />}
+              {generatingPdf ? 'Generating...' : 'Export PDF'}
+            </button>
+            <Link href="/itam/register" className="bg-primary text-white px-4 py-2 rounded-xl text-xs font-semibold hover:bg-primary-hover transition-all flex items-center">
+              <Plus className="w-3.5 h-3.5 mr-1.5" /> Register
+            </Link>
+          </div>
+        </div>
+
+        <AssetStatusOverview summary={summary} filter={filter} onFilterChange={setFilter} />
+
+        <div className="flex flex-wrap items-center gap-2 mt-6 mb-4">
+          <Filter className="w-4 h-4 text-text-muted" />
+          <button key="ALL" onClick={() => setFilter('ALL')} className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${filter === 'ALL' ? 'bg-primary text-white' : 'bg-surface text-text-muted hover:bg-gray-100 border border-border'}`}>
+            All
+          </button>
+          {codesLoading ? (
+            <span className="text-xs text-text-muted">Loading...</span>
+          ) : (
+            equipmentStatusCodes.map((code) => (
+              <button key={code.codeValue} onClick={() => setFilter(code.codeValue)} className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${filter === code.codeValue ? 'bg-primary text-white' : 'bg-surface text-text-muted hover:bg-gray-100 border border-border'}`}>
+                {code.codeName}
+              </button>
+            ))
+          )}
+        </div>
+
+        {loading ? (
+          <div className="flex items-center justify-center h-48 text-text-muted text-sm">Loading assets...</div>
+        ) : (
+          <AssetInventory equipment={filtered} onRefresh={() => refresh(0)} currentPage={page} totalPages={totalPages} onPageChange={(p) => refresh(p)} />
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(main)/itam/register/page.tsx b/src/app/(main)/itam/register/page.tsx
new file mode 100644
index 0000000..13d63cb
--- /dev/null
+++ b/src/app/(main)/itam/register/page.tsx
@@ -0,0 +1,105 @@
+'use client';
+
+import React, { useState } from 'react';
+import { 
+  Layers, 
+  FileStack, 
+  Zap, 
+  ShieldCheck, 
+  ChevronRight,
+  Info
+} from 'lucide-react';
+import Link from 'next/link';
+import SingleRegistrationForm from '@/components/itam/SingleRegistrationForm';
+import BatchRegistrationView from '@/components/itam/BatchRegistrationView';
+
+/**
+ * 자산 등록 메인 페이지 (Registration Controller)
+ * 단건 등록과 대량 등록 모드를 전환하며 관리합니다.
+ */
+export default function AssetRegistrationPage() {
+  const [mode, setMode] = useState<'single' | 'batch'>('single');
+  const [registeredCount, setRegisteredCount] = useState(0);
+
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      
+      {/* Top Navigation & Mode Switcher */}
+      <div className="max-w-7xl mx-auto mb-6">
+        <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+          <div className="flex items-center gap-2 sm:gap-4">
+            <div>
+              <h2 className="text-xl font-bold text-text-main tracking-tight">New Asset Registration</h2>
+              <p className="text-xs text-text-muted mt-0.5">
+                <span className={mode === 'single' ? 'text-primary font-semibold' : ''}>Single Mode</span>
+                <ChevronRight className="w-3 h-3 mx-1 inline" />
+                <span className={mode === 'batch' ? 'text-primary font-semibold' : ''}>Batch Mode</span>
+              </p>
+            </div>
+          </div>
+
+          {/* Mode Switcher */}
+          <div className="flex gap-1 bg-slate-100 p-1 rounded-2xl border border-slate-200">
+            <button onClick={() => setMode('single')}
+              className={`px-3 sm:px-4 py-2 rounded-xl text-[10px] sm:text-xs font-bold transition-all whitespace-nowrap ${
+                mode === 'single' ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'
+              }`}
+            >
+              <Zap className="w-3 h-3 sm:w-3.5 sm:h-3.5 inline mr-1 sm:mr-2" />
+              <span className="hidden sm:inline">단건/연속 등록</span>
+              <span className="sm:hidden">단건</span>
+            </button>
+            <button onClick={() => setMode('batch')}
+              className={`px-3 sm:px-4 py-2 rounded-xl text-[10px] sm:text-xs font-bold transition-all whitespace-nowrap ${
+                mode === 'batch' ? 'bg-white text-slate-900 shadow-sm' : 'text-slate-500 hover:text-slate-700'
+              }`}
+            >
+              <FileStack className="w-3 h-3 sm:w-3.5 sm:h-3.5 inline mr-1 sm:mr-2" />
+              <span className="hidden sm:inline">대량(엑셀) 등록</span>
+              <span className="sm:hidden">대량</span>
+            </button>
+          </div>
+
+          <div className="hidden md:flex items-center gap-3">
+            <div className="text-right">
+              <p className="text-[10px] font-bold text-text-muted uppercase">Registered Today</p>
+              <p className="text-lg font-outfit font-bold text-text-main leading-none">{registeredCount} <span className="text-xs text-text-muted">Assets</span></p>
+            </div>
+            <ShieldCheck className="w-5 h-5 text-emerald-500" />
+          </div>
+        </div>
+      </div>
+
+      {/* Main Content Area */}
+      <div className="max-w-7xl mx-auto">
+          
+          {/* Mode Instructions (Contextual) */}
+          <div className="mb-8 flex items-start p-4 bg-indigo-50/50 rounded-2xl border border-indigo-100/50">
+            <div className="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center mr-3 flex-shrink-0">
+              <Info className="w-4 h-4 text-indigo-600" />
+            </div>
+            <div>
+              <h4 className="text-sm font-bold text-indigo-900">
+                {mode === 'single' ? '연속 등록 모드가 활성화되어 있습니다.' : '대량 등록 모드입니다.'}
+              </h4>
+              <p className="text-xs text-indigo-700 mt-1 leading-relaxed">
+                {mode === 'single' 
+                  ? '장비를 스캔하거나 정보를 입력한 후 [저장 후 계속]을 누르면 화면이 초기화되지 않고 즉시 다음 장비를 등록할 수 있습니다.' 
+                  : '엑셀 템플릿 양식에 맞춰 데이터를 작성한 후 업로드해 주세요. 시스템이 자동으로 유효성을 검사합니다.'}
+              </p>
+            </div>
+          </div>
+
+          {/* Dynamic Form Content */}
+          <div className="animate-in fade-in slide-in-from-bottom-4 duration-500">
+            {mode === 'single' ? (
+              <SingleRegistrationForm onRegisterSuccess={() => setRegisteredCount(prev => prev + 1)} />
+            ) : (
+              <BatchRegistrationView />
+            )}
+          </div>
+        </div>
+      </div>
+
+    );
+}
diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx
new file mode 100644
index 0000000..0d19ab8
--- /dev/null
+++ b/src/app/(main)/layout.tsx
@@ -0,0 +1,5 @@
+import MainShell from "@/components/layout/MainShell";
+
+export default function MainLayout({ children }: { children: React.ReactNode }) {
+  return <MainShell>{children}</MainShell>;
+}
diff --git a/src/app/(main)/page.tsx b/src/app/(main)/page.tsx
new file mode 100644
index 0000000..11c0306
--- /dev/null
+++ b/src/app/(main)/page.tsx
@@ -0,0 +1,289 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import {
+  FileText,
+  Users,
+  Monitor,
+  AlertCircle,
+  Plus,
+  ArrowRight,
+  TrendingUp,
+  Send,
+  CheckCircle2,
+  Calendar,
+} from 'lucide-react';
+import Link from 'next/link';
+import ticketService from '@/services/ticketService';
+import equipmentService from '@/services/equipmentService';
+import reportService from '@/services/reportService';
+import { useAuthStore } from '@/stores';
+
+interface StatCard {
+  title: string;
+  icon: React.ComponentType<{ className?: string }>;
+  iconColor: string;
+  iconBg: string;
+  borderColor: string;
+}
+
+export default function DashboardPage() {
+  const user = useAuthStore((s) => s.user);
+  const [openCount, setOpenCount] = useState<number | null>(null);
+  const [dispatchCount, setDispatchCount] = useState<number | null>(null);
+  const [inUseCount, setInUseCount] = useState<number | null>(null);
+  const [pendingReports, setPendingReports] = useState<number | null>(null);
+  const [recentTickets, setRecentTickets] = useState<any[]>([]);
+  const [dailyReport, setDailyReport] = useState({ completedTasks: '', plannedTasks: '', issuesAndRisks: '' });
+  const [reportSubmitted, setReportSubmitted] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    Promise.all([
+      ticketService.getTickets({ status: 'OPEN', size: 1 }).catch(() => null),
+      ticketService.getTickets({ size: 5 }).catch(() => null),
+      equipmentService.getSummary().catch(() => null),
+    ]).then(([openRes, recentRes, equipRes]) => {
+      if (openRes) setOpenCount(openRes.data.totalElements);
+      if (recentRes) setRecentTickets(recentRes.data.content || []);
+      if (equipRes?.data) setInUseCount(equipRes.data.IN_USE || 0);
+    });
+  }, []);
+
+  // Check if daily report already submitted today
+  useEffect(() => {
+    if (!user) return;
+    const today = new Date().toISOString().split('T')[0];
+    reportService.getAll({
+      reportType: 'DAILY',
+      size: 50,
+    }).then((res) => {
+      const submitted = (res.data.content || []).some((r: any) => r.targetDate === today);
+      setReportSubmitted(submitted);
+    }).catch(() => {});
+  }, [user]);
+
+  useEffect(() => {
+    if (!user || user.roleCode === 'EMPLOYEE') return;
+    import('@/services/reportService').then((m) =>
+      m.default.getAll({ status: 'SUBMITTED', size: 1 }).then((res) => {
+        setPendingReports(res.data.totalElements);
+      }).catch(() => {})
+    );
+    import('@/services/employeeService').then((m) =>
+      m.default.getAll({ size: 1 }).then((res) => {
+        setDispatchCount(res.data.content.filter((e: any) => e.dispatchStatus === 'DISPATCHED').length);
+      }).catch(() => {})
+    );
+  }, [user]);
+
+  const stats: (StatCard & { value: string; sub?: string })[] = [
+    {
+      title: 'Open SR Tickets',
+      value: openCount !== null ? String(openCount) : '...',
+      icon: AlertCircle, iconColor: 'text-status-open-text', iconBg: 'bg-status-open-bg',
+      borderColor: 'border-l-status-open-text',
+    },
+    {
+      title: 'Active Dispatches',
+      value: dispatchCount !== null ? String(dispatchCount) : '...',
+      sub: user?.roleCode === 'EMPLOYEE' ? '' : 'engineers',
+      icon: Users, iconColor: 'text-primary', iconBg: 'bg-indigo-50',
+      borderColor: 'border-l-primary',
+    },
+    {
+      title: 'IT Assets In-Use',
+      value: inUseCount !== null ? String(inUseCount) : '...',
+      icon: Monitor, iconColor: 'text-dot-orange', iconBg: 'bg-orange-50',
+      borderColor: 'border-l-dot-orange',
+    },
+    {
+      title: 'Pending Reports',
+      value: pendingReports !== null ? String(pendingReports) : '...',
+      icon: FileText, iconColor: 'text-dot-purple', iconBg: 'bg-purple-50',
+      borderColor: 'border-l-dot-purple',
+    },
+  ];
+
+  const statusBadge = (status: string) => {
+    const map: Record<string, { label: string; cls: string }> = {
+      OPEN:        { label: 'Open',        cls: 'bg-status-open-bg text-status-open-text' },
+      ASSIGNED:    { label: 'Assigned',    cls: 'bg-blue-50 text-blue-600' },
+      IN_PROGRESS: { label: 'In-Progress', cls: 'bg-status-pending-bg text-status-pending-text' },
+      RESOLVED:    { label: 'Resolved',    cls: 'bg-status-resolved-bg text-status-resolved-text' },
+      CLOSED:      { label: 'Closed',      cls: 'bg-status-closed-bg text-status-closed-text' },
+    };
+    const m = map[status] || { label: status, cls: 'bg-gray-100 text-gray-600' };
+    return <span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${m.cls}`}>{m.label}</span>;
+  };
+
+  const handleDailyReport = async () => {
+    if (!dailyReport.completedTasks.trim()) return;
+    setSubmitting(true);
+    try {
+      await reportService.create({
+        reportType: 'DAILY',
+        targetDate: new Date().toISOString().split('T')[0],
+        completedTasks: dailyReport.completedTasks,
+        plannedTasks: dailyReport.plannedTasks,
+        issuesAndRisks: dailyReport.issuesAndRisks,
+        supportRequested: '',
+        dispatchId: 0,
+        status: 'SUBMITTED',
+      });
+      setReportSubmitted(true);
+      setDailyReport({ completedTasks: '', plannedTasks: '', issuesAndRisks: '' });
+    } catch {
+      alert('Failed to submit daily report.');
+    }
+    setSubmitting(false);
+  };
+
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mb-6 sm:mb-8">
+          <div>
+            <h2 className="font-outfit text-2xl sm:text-3xl font-semibold text-text-main tracking-tight">Dashboard Overview</h2>
+            <p className="text-text-muted mt-1 text-sm">Welcome back{user ? `, ${user.name}` : ''}. Here is the latest status.</p>
+          </div>
+          <Link
+            href="/issues"
+            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" />
+            New SR Ticket
+          </Link>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 sm:gap-6 mb-6 sm:mb-8">
+          {stats.map((stat, i) => {
+            const Icon = stat.icon;
+            const isPendingReports = stat.title === 'Pending Reports';
+            const card = (
+              <div key={i} className={`bg-surface rounded-2xl p-6 shadow-card border border-border border-l-4 ${stat.borderColor} flex flex-col justify-between hover:shadow-soft transition-shadow ${isPendingReports ? 'cursor-pointer' : ''}`}>
+                <div className="flex justify-between items-start mb-4">
+                  <h3 className="text-text-muted text-sm font-medium">{stat.title}</h3>
+                  <div className={`w-8 h-8 rounded-full ${stat.iconBg} flex items-center justify-center ${stat.iconColor}`}>
+                    <Icon className="w-4 h-4" />
+                  </div>
+                </div>
+                <div className="flex items-end justify-between">
+                  <span className="font-outfit text-3xl font-semibold text-text-main">{stat.value}</span>
+                  {stat.sub && <span className="text-xs text-text-muted">{stat.sub}</span>}
+                </div>
+              </div>
+            );
+            return isPendingReports
+              ? <Link key={i} href="/work-reports/review">{card}</Link>
+              : card;
+          })}
+        </div>
+
+        {/* Daily Report Widget */}
+        <div className="bg-surface rounded-2xl shadow-card border border-border p-4 sm:p-6 mb-6">
+          <div className="flex items-center gap-2 mb-4">
+            <Calendar className="w-5 h-5 text-primary" />
+            <h3 className="font-outfit font-semibold text-lg text-text-main">Today's Daily Report</h3>
+            {reportSubmitted && (
+              <span className="ml-auto flex items-center gap-1 text-xs font-medium text-status-resolved-text bg-status-resolved-bg px-3 py-1 rounded-full">
+                <CheckCircle2 className="w-3.5 h-3.5" />
+                Submitted
+              </span>
+            )}
+          </div>
+          {reportSubmitted ? (
+            <div className="bg-status-resolved-bg/50 rounded-xl px-4 py-5 text-center">
+              <CheckCircle2 className="w-8 h-8 mx-auto mb-2 text-status-resolved-text" />
+              <p className="text-sm font-medium text-text-main">Today's report has been submitted.</p>
+              <p className="text-xs text-text-muted mt-1">
+                {new Date().toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' })}
+              </p>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              <div>
+                <label className="text-xs font-medium text-text-muted mb-1 block">What did you do today?</label>
+                <textarea
+                  value={dailyReport.completedTasks}
+                  onChange={(e) => setDailyReport(r => ({ ...r, completedTasks: e.target.value }))}
+                  placeholder="Completed tasks, fixes, meetings..."
+                  className="w-full px-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none"
+                  rows={2}
+                />
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                <div>
+                  <label className="text-xs font-medium text-text-muted mb-1 block">Plans for tomorrow</label>
+                  <textarea
+                    value={dailyReport.plannedTasks}
+                    onChange={(e) => setDailyReport(r => ({ ...r, plannedTasks: e.target.value }))}
+                    placeholder="Next steps..."
+                    className="w-full px-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none"
+                    rows={2}
+                  />
+                </div>
+                <div>
+                  <label className="text-xs font-medium text-text-muted mb-1 block">Issues / Risks</label>
+                  <textarea
+                    value={dailyReport.issuesAndRisks}
+                    onChange={(e) => setDailyReport(r => ({ ...r, issuesAndRisks: e.target.value }))}
+                    placeholder="Blockers, risks, or help needed..."
+                    className="w-full px-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none"
+                    rows={2}
+                  />
+                </div>
+              </div>
+              <div className="flex justify-end">
+                <button
+                  onClick={handleDailyReport}
+                  disabled={submitting || !dailyReport.completedTasks.trim()}
+                  className="bg-primary hover:bg-primary-hover text-white px-5 py-2 rounded-xl text-sm font-semibold transition-all flex items-center gap-2 disabled:opacity-50"
+                >
+                  <Send className="w-4 h-4" />
+                  {submitting ? 'Submitting...' : 'Submit Daily Report'}
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="bg-surface rounded-2xl shadow-card border border-border overflow-hidden">
+          <div className="px-4 sm:px-6 py-4 sm:py-5 border-b border-border flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
+            <h3 className="font-outfit font-semibold text-lg text-text-main">Recent SR Tickets</h3>
+            <Link href="/issues" className="text-sm font-medium text-primary hover:text-primary-hover flex items-center">
+              View all <ArrowRight className="w-4 h-4 ml-1" />
+            </Link>
+          </div>
+          <div className="overflow-x-auto">
+            <table className="w-full text-left border-collapse">
+              <thead>
+                <tr className="bg-gray-50/50">
+                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">ID</th>
+                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Project</th>
+                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Issue Title</th>
+                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Requester</th>
+                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Status</th>
+                </tr>
+              </thead>
+              <tbody className="text-sm divide-y divide-gray-100">
+                {recentTickets.length === 0 && (
+                  <tr><td colSpan={5} className="py-8 text-center text-text-muted text-sm">No tickets found.</td></tr>
+                )}
+                {recentTickets.map((t: any) => (
+                  <tr key={t.ticketId} className="hover:bg-gray-50 transition-colors cursor-pointer" onClick={() => window.location.href = `/issues/${t.ticketId}`}>
+                    <td className="py-4 px-4 sm:px-6 font-medium text-text-main">#{t.ticketId}</td>
+                    <td className="py-4 px-4 sm:px-6 text-text-muted">{t.projectName}</td>
+                    <td className="py-4 px-4 sm:px-6 font-medium text-text-main">{t.title}</td>
+                    <td className="py-4 px-4 sm:px-6 text-text-muted">{t.requesterName}</td>
+                    <td className="py-4 px-4 sm:px-6">{statusBadge(t.status)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(main)/profile/page.tsx b/src/app/(main)/profile/page.tsx
new file mode 100644
index 0000000..73209e5
--- /dev/null
+++ b/src/app/(main)/profile/page.tsx
@@ -0,0 +1,360 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { UserCircle, Mail, Briefcase, Calendar, Lock, Shield, CheckCircle, XCircle, AlertCircle } from 'lucide-react';
+import employeeService from '@/services/employeeService';
+import type { ApiResponse, Employee, DispatchHistory } from '@/types';
+
+interface EmployeeWithId extends Employee {
+  empId: number;
+}
+
+export default function ProfilePage() {
+  const router = useRouter();
+  const [employee, setEmployee] = useState<EmployeeWithId | null>(null);
+  const [dispatchHistories, setDispatchHistories] = useState<DispatchHistory[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Password change form state
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [passwordError, setPasswordError] = useState<string | null>(null);
+  const [passwordSuccess, setPasswordSuccess] = useState<string | null>(null);
+  const [isChangingPassword, setIsChangingPassword] = useState(false);
+
+  useEffect(() => {
+    loadProfile();
+  }, []);
+
+  const loadProfile = async () => {
+    try {
+      setLoading(true);
+      const empRes = await employeeService.getMe();
+      if (empRes.success && empRes.data) {
+        const empData = empRes.data as EmployeeWithId;
+        setEmployee(empData);
+
+        // Load dispatch histories
+        const historyRes = await employeeService.getDispatchHistories(empData.empId);
+        if (historyRes.success) {
+          const data = historyRes.data;
+          setDispatchHistories(Array.isArray(data) ? data : []);
+        }
+      }
+    } catch (err) {
+      setError('프로필 정보를 불러오는데 실패했습니다.');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handlePasswordChange = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setPasswordError(null);
+    setPasswordSuccess(null);
+
+    if (newPassword !== confirmPassword) {
+      setPasswordError('새 비밀번호가 일치하지 않습니다.');
+      return;
+    }
+
+    if (newPassword.length < 4) {
+      setPasswordError('새 비밀번호는 최소 4 자 이상이어야 합니다.');
+      return;
+    }
+
+    try {
+      setIsChangingPassword(true);
+      const res = await employeeService.changePassword(currentPassword, newPassword);
+      if (res.success) {
+        setPasswordSuccess('비밀번호가 성공적으로 변경되었습니다.');
+        setCurrentPassword('');
+        setNewPassword('');
+        setConfirmPassword('');
+      }
+    } catch (err: any) {
+      setPasswordError(err.response?.data?.message || '비밀번호 변경에 실패했습니다.');
+    } finally {
+      setIsChangingPassword(false);
+    }
+  };
+
+  const getRoleBadgeColor = (roleCode: string) => {
+    switch (roleCode) {
+      case 'ADMIN':
+        return 'bg-red-100 text-red-700 border-red-200';
+      case 'MANAGER':
+        return 'bg-indigo-100 text-indigo-700 border-indigo-200';
+      case 'EMPLOYEE':
+        return 'bg-gray-100 text-gray-700 border-gray-200';
+      default:
+        return 'bg-gray-100 text-gray-700 border-gray-200';
+    }
+  };
+
+  const getStatusBadgeColor = (status: string) => {
+    switch (status) {
+      case 'ACTIVE':
+        return 'bg-emerald-100 text-emerald-700 border-emerald-200';
+      case 'ON_LEAVE':
+        return 'bg-amber-100 text-amber-700 border-amber-200';
+      case 'RESIGNED':
+        return 'bg-gray-100 text-gray-700 border-gray-200';
+      default:
+        return 'bg-gray-100 text-gray-700 border-gray-200';
+    }
+  };
+
+  const getDispatchStatusBadgeColor = (status: string) => {
+    switch (status) {
+      case 'DISPATCHED':
+        return 'bg-blue-100 text-blue-700 border-blue-200';
+      case 'WAITING':
+        return 'bg-amber-100 text-amber-700 border-amber-200';
+      default:
+        return 'bg-gray-100 text-gray-700 border-gray-200';
+    }
+  };
+
+  const formatInitial = (name: string) => name.charAt(0).toUpperCase();
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-background">
+        <div className="text-center">
+          <div className="w-12 h-12 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
+          <p className="text-text-muted">로딩중...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error || !employee) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-background">
+        <div className="text-center">
+          <AlertCircle className="w-12 h-12 text-error mx-auto mb-4" />
+          <p className="text-text-main font-medium">{error || '프로필 정보를 찾을 수 없습니다.'}</p>
+          <button
+            onClick={() => router.push('/')}
+            className="mt-4 px-6 py-2 bg-primary text-white rounded-xl font-bold text-sm hover:bg-primary/90 transition-colors"
+          >
+            대시보드로 이동
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-background p-4 sm:p-6 lg:p-8">
+      <div className="max-w-7xl mx-auto space-y-8">
+        {/* Header */}
+        <div>
+          <h1 className="font-outfit text-2xl font-semibold text-text-main">내 프로필</h1>
+          <p className="text-text-muted text-sm mt-1">개인 정보 및 파견 이력을 관리합니다.</p>
+        </div>
+
+        {/* Profile Card */}
+        <div className="bg-surface border border-border rounded-2xl p-6 shadow-soft">
+          <div className="flex items-start gap-6">
+            {/* Avatar */}
+            <div className="w-24 h-24 rounded-full bg-gradient-to-br from-primary to-purple-400 flex items-center justify-center text-white text-3xl font-bold shadow-lg shadow-primary/20 flex-shrink-0">
+              {formatInitial(employee.name)}
+            </div>
+
+            {/* Info Grid */}
+            <div className="flex-1 grid grid-cols-2 gap-6">
+              <div>
+                <div className="flex items-center gap-2 text-text-muted text-xs mb-1">
+                  <UserCircle className="w-4 h-4" />
+                  <span>이름</span>
+                </div>
+                <p className="text-text-main font-semibold text-lg">{employee.name}</p>
+              </div>
+
+              <div>
+                <div className="flex items-center gap-2 text-text-muted text-xs mb-1">
+                  <Mail className="w-4 h-4" />
+                  <span>이메일</span>
+                </div>
+                <p className="text-text-main font-medium">{employee.email}</p>
+              </div>
+
+              <div>
+                <div className="flex items-center gap-2 text-text-muted text-xs mb-1">
+                  <Shield className="w-4 h-4" />
+                  <span>역할</span>
+                </div>
+                <span className={`inline-block px-3 py-1 rounded-full text-xs font-bold border ${getRoleBadgeColor(employee.roleCode)}`}>
+                  {employee.roleCode}
+                </span>
+              </div>
+
+              <div>
+                <div className="flex items-center gap-2 text-text-muted text-xs mb-1">
+                  <Briefcase className="w-4 h-4" />
+                  <span>재직 상태</span>
+                </div>
+                <span className={`inline-block px-3 py-1 rounded-full text-xs font-bold border ${getStatusBadgeColor(employee.empStatus)}`}>
+                  {employee.empStatus === 'ACTIVE' ? '재직' : employee.empStatus === 'ON_LEAVE' ? '휴직' : '퇴사'}
+                </span>
+              </div>
+
+              <div>
+                <div className="flex items-center gap-2 text-text-muted text-xs mb-1">
+                  <Briefcase className="w-4 h-4" />
+                  <span>파견 상태</span>
+                </div>
+                <span className={`inline-block px-3 py-1 rounded-full text-xs font-bold border ${getDispatchStatusBadgeColor(employee.dispatchStatus)}`}>
+                  {employee.dispatchStatus === 'DISPATCHED' ? '파견중' : '대기'}
+                </span>
+              </div>
+
+              <div>
+                <div className="flex items-center gap-2 text-text-muted text-xs mb-1">
+                  <Calendar className="w-4 h-4" />
+                  <span>입사일</span>
+                </div>
+                <p className="text-text-main font-medium">{employee.joinedDate}</p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Dispatch History */}
+        <div className="bg-surface border border-border rounded-2xl p-6 shadow-soft">
+          <div className="flex items-center justify-between mb-6">
+            <h2 className="font-outfit text-lg font-semibold text-text-main">파견 이력</h2>
+            <button
+              onClick={() => router.push(`/profile/portfolio`)}
+              className="text-primary text-sm font-bold hover:underline flex items-center gap-1"
+            >
+              포트폴리오 보기
+              <Briefcase className="w-4 h-4" />
+            </button>
+          </div>
+
+          {dispatchHistories.length === 0 ? (
+            <div className="text-center py-12">
+              <Briefcase className="w-12 h-12 text-text-muted/30 mx-auto mb-4" />
+              <p className="text-text-muted">등록된 파견 이력이 없습니다.</p>
+            </div>
+          ) : (
+            <div className="space-y-4">
+              {dispatchHistories.map((history, index) => (
+                <div
+                  key={history.dispatchId}
+                  className="border border-border rounded-xl p-4 hover:bg-surface-container-low transition-colors"
+                >
+                  <div className="flex items-start justify-between">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-3 mb-2">
+                        <span className="w-2 h-2 rounded-full bg-primary"></span>
+                        <h3 className="font-outfit font-semibold text-text-main">{history.projectName || '프로젝트'}</h3>
+                      </div>
+                      <div className="grid grid-cols-2 gap-4 text-sm">
+                        <div>
+                          <span className="text-text-muted">역할:</span>
+                          <span className="text-text-main ml-2 font-medium">{history.roleTitle}</span>
+                        </div>
+                        <div>
+                          <span className="text-text-muted">기간:</span>
+                          <span className="text-text-main ml-2 font-medium">
+                            {history.startDate} ~ {history.endDate || '재직중'}
+                          </span>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="text-right">
+                      <span className="text-xs text-text-muted">기여도</span>
+                      <p className="text-primary font-bold text-lg">{history.contributionRate}%</p>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Password Change Form */}
+        <div className="bg-surface border border-border rounded-2xl p-6 shadow-soft">
+          <div className="flex items-center gap-3 mb-6">
+            <Lock className="w-5 h-5 text-primary" />
+            <h2 className="font-outfit text-lg font-semibold text-text-main">비밀번호 변경</h2>
+          </div>
+
+          <form onSubmit={handlePasswordChange} className="space-y-4 max-w-md">
+            <div>
+              <label className="block text-sm font-medium text-text-muted mb-2">
+                현재 비밀번호
+              </label>
+              <input
+                type="password"
+                value={currentPassword}
+                onChange={(e) => setCurrentPassword(e.target.value)}
+                className="w-full px-4 py-3 border border-border rounded-xl bg-surface-container-lowest text-text-main placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
+                placeholder="현재 비밀번호를 입력하세요"
+                required
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-text-muted mb-2">
+                새 비밀번호
+              </label>
+              <input
+                type="password"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                className="w-full px-4 py-3 border border-border rounded-xl bg-surface-container-lowest text-text-main placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
+                placeholder="새 비밀번호를 입력하세요"
+                required
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-text-muted mb-2">
+                새 비밀번호 확인
+              </label>
+              <input
+                type="password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                className="w-full px-4 py-3 border border-border rounded-xl bg-surface-container-lowest text-text-main placeholder-text-muted focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
+                placeholder="새 비밀번호를 다시 입력하세요"
+                required
+              />
+            </div>
+
+            {passwordError && (
+              <div className="flex items-center gap-2 text-error text-sm bg-error-container/30 px-4 py-3 rounded-xl">
+                <XCircle className="w-4 h-4" />
+                <span>{passwordError}</span>
+              </div>
+            )}
+
+            {passwordSuccess && (
+              <div className="flex items-center gap-2 text-emerald-600 text-sm bg-emerald-50 px-4 py-3 rounded-xl">
+                <CheckCircle className="w-4 h-4" />
+                <span>{passwordSuccess}</span>
+              </div>
+            )}
+
+            <button
+              type="submit"
+              disabled={isChangingPassword}
+              className="w-full py-3 bg-primary text-white rounded-xl font-bold text-sm hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-all shadow-lg shadow-primary/20"
+            >
+              {isChangingPassword ? '변경중...' : '비밀번호 변경'}
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(main)/projects/page.tsx b/src/app/(main)/projects/page.tsx
new file mode 100644
index 0000000..d284abb
--- /dev/null
+++ b/src/app/(main)/projects/page.tsx
@@ -0,0 +1,311 @@
+'use client';
+import React, { useState, useEffect } from 'react';
+import { Plus, Pencil, Trash2, Search, AlertCircle } from 'lucide-react';
+import { useAuthStore } from '@/stores';
+import projectService from '@/services/projectService';
+import ProjectFormModal from '@/components/projects/ProjectFormModal';
+import type { Project, ProjectStatus } from '@/types';
+
+const statusColors: Record<ProjectStatus, string> = {
+  PREPARING: 'bg-blue-50 text-blue-600',
+  ONGOING: 'bg-amber-50 text-amber-600',
+  COMPLETED: 'bg-green-50 text-green-600',
+  HOLD: 'bg-gray-100 text-gray-500',
+};
+
+const statusLabels: Record<ProjectStatus, string> = {
+  PREPARING: 'Preparing',
+  ONGOING: 'Ongoing',
+  COMPLETED: 'Completed',
+  HOLD: 'Hold',
+};
+
+const statusFilterOptions: Array<{ value: string; label: string }> = [
+  { value: 'ALL', label: 'All' },
+  { value: 'PREPARING', label: 'Preparing' },
+  { value: 'ONGOING', label: 'Ongoing' },
+  { value: 'COMPLETED', label: 'Completed' },
+  { value: 'HOLD', label: 'Hold' },
+];
+
+export default function ProjectsPage() {
+  const user = useAuthStore((s) => s.user);
+  const role = user?.roleCode;
+
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [filter, setFilter] = useState('ALL');
+  const [search, setSearch] = useState('');
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editData, setEditData] = useState<Project | null>(null);
+
+  const [deleteId, setDeleteId] = useState<number | null>(null);
+
+  const fetchProjects = () => {
+    setLoading(true);
+    const statusParam = filter !== 'ALL' ? filter : undefined;
+    projectService.getAll(statusParam)
+      .then((res) => {
+        setProjects(res.data || []);
+        setError(null);
+      })
+      .catch((err) => {
+        console.error('Failed to fetch projects', err);
+        setError('Failed to load projects. Please try again.');
+      })
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    if (!user) return;
+    if (role === 'EMPLOYEE') {
+      setError('Access denied. Only managers and admins can view this page.');
+      setLoading(false);
+      return;
+    }
+    fetchProjects();
+  }, [user, filter]);
+
+  const handleEdit = (project: Project) => {
+    setEditData(project);
+    setModalOpen(true);
+  };
+
+  const handleNew = () => {
+    setEditData(null);
+    setModalOpen(true);
+  };
+
+  const handleDelete = async () => {
+    if (!deleteId) return;
+    try {
+      await projectService.deleteProject(deleteId);
+      setDeleteId(null);
+      fetchProjects();
+    } catch {
+      alert('Failed to delete project.');
+      setDeleteId(null);
+    }
+  };
+
+  // Access denied for EMPLOYEE
+  if (role === 'EMPLOYEE') {
+    return (
+      <div className="p-4 sm:p-6 lg:p-8">
+        <div className="max-w-7xl mx-auto text-center py-20">
+          <AlertCircle className="w-12 h-12 text-text-muted mx-auto mb-4" />
+          <h2 className="text-xl font-semibold text-text-main mb-2">Access Denied</h2>
+          <p className="text-text-muted text-sm">Only managers and admins can access this page.</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Loading skeleton
+  if (loading) {
+    return (
+      <div className="p-4 sm:p-6 lg:p-8">
+        <div className="max-w-7xl mx-auto">
+          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mb-6 sm:mb-8">
+            <div>
+              <div className="h-8 w-36 bg-gray-200 rounded animate-pulse mb-2" />
+              <div className="h-4 w-64 bg-gray-200 rounded animate-pulse" />
+            </div>
+            <div className="h-10 w-36 bg-gray-200 rounded-xl animate-pulse" />
+          </div>
+          <div className="bg-surface rounded-2xl border border-border shadow-card overflow-hidden">
+            <div className="px-6 py-4 border-b border-border flex items-center gap-2">
+              {[1, 2, 3, 4, 5].map((i) => (
+                <div key={i} className="h-8 w-20 bg-gray-200 rounded-lg animate-pulse" />
+              ))}
+            </div>
+            <div className="p-6 space-y-4">
+              {[1, 2, 3, 4, 5].map((i) => (
+                <div key={i} className="h-12 bg-gray-200 rounded animate-pulse" />
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error && !projects.length) {
+    return (
+      <div className="p-4 sm:p-6 lg:p-8">
+        <div className="max-w-7xl mx-auto">
+          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mb-6 sm:mb-8">
+            <div>
+              <h2 className="font-outfit text-2xl sm:text-3xl font-semibold text-text-main tracking-tight">Projects</h2>
+              <p className="text-text-muted mt-1 text-sm">Manage SI/SM project contracts and details.</p>
+            </div>
+          </div>
+          <div className="bg-status-critical-bg border border-status-critical text-status-critical-text rounded-2xl p-6 sm:p-8 text-center">
+            <p className="font-medium">{error}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Filtered + searched
+  const filtered = projects.filter((p) => {
+    const matchSearch = search.trim()
+      ? p.projectName.toLowerCase().includes(search.toLowerCase()) ||
+        p.contractCompany.toLowerCase().includes(search.toLowerCase())
+      : true;
+    return matchSearch;
+  });
+
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mb-6 sm:mb-8">
+          <div>
+            <h2 className="font-outfit text-2xl sm:text-3xl font-semibold text-text-main tracking-tight">Projects</h2>
+            <p className="text-text-muted mt-1 text-sm">Manage SI/SM project contracts and details.</p>
+          </div>
+          <button
+            onClick={handleNew}
+            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 gap-2"
+          >
+            <Plus className="w-4 h-4" />
+            New Project
+          </button>
+        </div>
+
+        <div className="bg-surface rounded-2xl border border-border shadow-card overflow-hidden">
+          {/* Filters bar */}
+          <div className="px-4 sm:px-6 py-4 border-b border-border flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
+            <div className="flex flex-wrap items-center gap-2">
+              {statusFilterOptions.map((opt) => (
+                <button
+                  key={opt.value}
+                  onClick={() => setFilter(opt.value)}
+                  className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
+                    filter === opt.value
+                      ? 'bg-primary text-white'
+                      : 'text-text-muted hover:bg-gray-100'
+                  }`}
+                >
+                  {opt.label}
+                </button>
+              ))}
+            </div>
+            <div className="relative w-full sm:w-56">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-text-muted" />
+              <input
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="Search by name or company..."
+                className="w-full pl-9 pr-3 py-1.5 rounded-lg bg-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+              />
+            </div>
+          </div>
+
+          {/* Table */}
+          <div className="overflow-x-auto">
+            <table className="w-full text-left">
+              <thead>
+                <tr className="bg-gray-50/50">
+                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">Name</th>
+                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">Contract Company</th>
+                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">Status</th>
+                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">Period</th>
+                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">Manager</th>
+                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="text-sm divide-y divide-gray-100">
+                {filtered.length === 0 && (
+                  <tr>
+                    <td colSpan={6} className="py-12 text-center text-text-muted">
+                      No projects found.
+                    </td>
+                  </tr>
+                )}
+                {filtered.map((project) => (
+                  <tr key={project.projectId} className="hover:bg-gray-50 transition-colors">
+                    <td className="py-4 px-4 sm:px-6">
+                      <div>
+                        <p className="font-medium text-text-main">{project.projectName}</p>
+                        <p className="text-xs text-text-muted">{project.projectType}</p>
+                      </div>
+                    </td>
+                    <td className="py-4 px-4 sm:px-6 text-text-muted">{project.contractCompany}</td>
+                    <td className="py-4 px-4 sm:px-6">
+                      <span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${statusColors[project.status]}`}>
+                        {statusLabels[project.status]}
+                      </span>
+                    </td>
+                    <td className="py-4 px-4 sm:px-6 text-text-muted whitespace-nowrap">
+                      {project.startDate} ~ {project.endDate || '—'}
+                    </td>
+                    <td className="py-4 px-4 sm:px-6 text-text-muted">
+                      {project.internalManager?.name || '—'}
+                    </td>
+                    <td className="py-4 px-4 sm:px-6">
+                      <div className="flex items-center gap-1">
+                        <button
+                          onClick={() => handleEdit(project)}
+                          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>
+                        {role === 'ADMIN' && (
+                          <button
+                            onClick={() => setDeleteId(project.projectId)}
+                            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>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        <ProjectFormModal
+          isOpen={modalOpen}
+          onClose={() => { setModalOpen(false); setEditData(null); }}
+          onSaved={fetchProjects}
+          editData={editData}
+        />
+
+        {/* Delete confirmation dialog */}
+        {deleteId !== null && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={() => setDeleteId(null)}>
+            <div className="bg-white rounded-2xl shadow-2xl p-6 w-full max-w-sm mx-4" onClick={(e) => e.stopPropagation()}>
+              <h3 className="font-outfit font-semibold text-lg text-text-main mb-2">Delete Project</h3>
+              <p className="text-sm text-text-muted mb-4">Are you sure you want to delete this project? This action cannot be undone.</p>
+              <div className="flex justify-end gap-3">
+                <button
+                  onClick={() => setDeleteId(null)}
+                  className="px-4 py-2 rounded-xl text-sm font-medium text-text-muted hover:bg-gray-100 transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleDelete}
+                  className="px-4 py-2 rounded-xl text-sm font-semibold bg-status-critical hover:bg-red-700 text-white transition-colors"
+                >
+                  Delete
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(main)/settings/codes/page.tsx b/src/app/(main)/settings/codes/page.tsx
new file mode 100644
index 0000000..70ac743
--- /dev/null
+++ b/src/app/(main)/settings/codes/page.tsx
@@ -0,0 +1,286 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Settings, Plus, Pencil, Trash2, X, Check } from 'lucide-react';
+import { useAuthStore } from '@/stores';
+import apiClient from '@/services/apiClient';
+
+interface CommonCode {
+  codeId: number;
+  groupCode: string;
+  codeValue: string;
+  codeName: string;
+  optionVal1?: string;
+  optionVal2?: string;
+  sortOrder: number;
+  isActive: string;
+}
+
+interface CommonCodeForm {
+  groupCode: string;
+  codeValue: string;
+  codeName: string;
+  optionVal1: string;
+  optionVal2: string;
+  sortOrder: number;
+  isActive: 'Y' | 'N';
+}
+
+export default function CommonCodesPage() {
+  const user = useAuthStore((s) => s.user);
+  const [groupCodes, setGroupCodes] = useState<string[]>([]);
+  const [selectedGroup, setSelectedGroup] = useState('');
+  const [codes, setCodes] = useState<CommonCode[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showModal, setShowModal] = useState(false);
+  const [editItem, setEditItem] = useState<CommonCode | null>(null);
+  const [form, setForm] = useState<CommonCodeForm>({ 
+    groupCode: '', 
+    codeValue: '', 
+    codeName: '', 
+    optionVal1: '', 
+    optionVal2: '', 
+    sortOrder: 1, 
+    isActive: 'Y' 
+  });
+
+  useEffect(() => {
+    apiClient.get('/common-codes').then((res: any) => {
+      if (res.success) {
+        const groups = [...new Set(res.data.map((c: CommonCode) => c.groupCode))] as string[];
+        setGroupCodes(groups);
+        if (groups.length > 0) setSelectedGroup(groups[0]);
+      }
+    }).catch(() => {}).finally(() => setLoading(false));
+  }, []);
+
+  useEffect(() => {
+    if (!selectedGroup) return;
+    apiClient.get('/common-codes', { params: { groupCode: selectedGroup } }).then((res: any) => {
+      if (res.success) setCodes(res.data);
+    }).catch(() => {});
+  }, [selectedGroup]);
+
+  const openCreate = () => {
+    setEditItem(null);
+    setForm({ groupCode: selectedGroup, codeValue: '', codeName: '', optionVal1: '', optionVal2: '', sortOrder: 1, isActive: 'Y' });
+    setShowModal(true);
+  };
+
+  const openEdit = (item: CommonCode) => {
+    setEditItem(item);
+    setForm({ 
+      groupCode: item.groupCode, 
+      codeValue: item.codeValue, 
+      codeName: item.codeName, 
+      optionVal1: item.optionVal1 || '', 
+      optionVal2: item.optionVal2 || '', 
+      sortOrder: item.sortOrder, 
+      isActive: item.isActive as 'Y' | 'N' 
+    });
+    setShowModal(true);
+  };
+
+  const handleSave = async () => {
+    try {
+      let res: any;
+      if (editItem) {
+        res = await apiClient.put(`/common-codes/${editItem.codeId}`, form);
+      } else {
+        res = await apiClient.post('/common-codes', form);
+      }
+      if (res?.success) { 
+        setShowModal(false); 
+        const refreshRes: any = await apiClient.get('/common-codes', { params: { groupCode: selectedGroup } });
+        if (refreshRes?.success) setCodes(refreshRes.data);
+      }
+    } catch (e) {
+      console.error('Save error:', e);
+    }
+  };
+
+  const handleDelete = async (id: number) => {
+    if (!confirm('Delete this code?')) return;
+    try {
+      await apiClient.delete(`/common-codes/${id}`);
+      const refreshRes: any = await apiClient.get('/common-codes', { params: { groupCode: selectedGroup } });
+      if (refreshRes?.success) setCodes(refreshRes.data);
+    } catch (e) {
+      console.error('Delete error:', e);
+    }
+  };
+
+  if (user?.roleCode !== 'ADMIN') {
+    return <div className="p-4 sm:p-6 lg:p-8 text-center text-text-muted">Access denied. Admin only.</div>;
+  }
+
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-3">
+            <Settings className="w-6 h-6 text-primary" />
+            <div>
+              <h2 className="font-outfit text-2xl font-semibold text-text-main tracking-tight">Common Codes</h2>
+              <p className="text-text-muted text-sm">Manage system code tables</p>
+            </div>
+          </div>
+          <button 
+            onClick={openCreate} 
+            className="bg-primary text-white px-4 py-2 rounded-xl text-xs font-semibold hover:bg-primary-hover transition-all flex items-center gap-1.5">
+            <Plus className="w-3.5 h-3.5" /> Add Code
+          </button>
+        </div>
+
+        <div className="flex gap-2 mb-4 flex-wrap">
+          {groupCodes.map(g => (
+            <button 
+              key={g} 
+              onClick={() => setSelectedGroup(g)}
+              className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${
+                selectedGroup === g ? 'bg-primary text-white' : 'bg-gray-100 text-text-muted hover:bg-gray-200'
+              }`}>
+              {g}
+            </button>
+          ))}
+        </div>
+
+        {loading ? (
+          <div className="text-center py-12 text-text-muted">Loading...</div>
+        ) : (
+          <div className="bg-surface rounded-2xl shadow-card border border-border overflow-hidden">
+            <table className="w-full text-left">
+              <thead>
+                <tr className="bg-gray-50/50 border-b border-border text-[10px] font-bold text-text-muted uppercase tracking-widest">
+                  <th className="px-4 sm:px-6 py-3">Code Value</th>
+                  <th className="px-4 sm:px-6 py-3">Code Name</th>
+                  <th className="px-4 sm:px-6 py-3 hidden sm:table-cell">Option1</th>
+                  <th className="px-4 sm:px-6 py-3 hidden md:table-cell">Option2</th>
+                  <th className="px-4 sm:px-6 py-3 hidden lg:table-cell">Order</th>
+                  <th className="px-4 sm:px-6 py-3">Active</th>
+                  <th className="px-4 sm:px-6 py-3 text-right">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-border text-sm">
+                {codes.map((c) => (
+                  <tr key={c.codeId} className="hover:bg-gray-50/30">
+                    <td className="px-4 sm:px-6 py-3 font-mono text-xs font-medium">{c.codeValue}</td>
+                    <td className="px-4 sm:px-6 py-3">{c.codeName}</td>
+                    <td className="px-4 sm:px-6 py-3 hidden sm:table-cell text-text-muted">{c.optionVal1 || '-'}</td>
+                    <td className="px-4 sm:px-6 py-3 hidden md:table-cell text-text-muted">{c.optionVal2 || '-'}</td>
+                    <td className="px-4 sm:px-6 py-3 hidden lg:table-cell text-text-muted">{c.sortOrder}</td>
+                    <td className="px-4 sm:px-6 py-3">
+                      {c.isActive === 'Y' ? (
+                        <Check className="w-4 h-4 text-status-resolved" />
+                      ) : (
+                        <X className="w-4 h-4 text-status-critical" />
+                      )}
+                    </td>
+                    <td className="px-4 sm:px-6 py-3 text-right">
+                      <button onClick={() => openEdit(c)} className="p-1 hover:text-primary">
+                        <Pencil className="w-3.5 h-3.5" />
+                      </button>
+                      <button onClick={() => handleDelete(c.codeId)} className="p-1 hover:text-status-critical ml-1">
+                        <Trash2 className="w-3.5 h-3.5" />
+                      </button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+            {codes.length === 0 && (
+              <div className="text-center py-12 text-text-muted">No codes found for this group.</div>
+            )}
+          </div>
+        )}
+
+        {showModal && (
+          <div 
+            className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm" 
+            onClick={() => setShowModal(false)}>
+            <div 
+              className="bg-white rounded-2xl shadow-xl w-full max-w-md mx-4 p-6" 
+              onClick={e => e.stopPropagation()}>
+              <h3 className="text-lg font-bold mb-4">{editItem ? 'Edit' : 'New'} Common Code</h3>
+              <div className="space-y-3">
+                <div>
+                  <label className="text-xs font-medium text-text-muted">Group Code</label>
+                  <input 
+                    value={form.groupCode} 
+                    onChange={e => setForm(f => ({ ...f, groupCode: e.target.value }))} 
+                    className="w-full px-3 py-2 border border-border rounded-lg text-sm" 
+                  />
+                </div>
+                <div>
+                  <label className="text-xs font-medium text-text-muted">Code Value</label>
+                  <input 
+                    value={form.codeValue} 
+                    onChange={e => setForm(f => ({ ...f, codeValue: e.target.value }))} 
+                    className="w-full px-3 py-2 border border-border rounded-lg text-sm" 
+                  />
+                </div>
+                <div>
+                  <label className="text-xs font-medium text-text-muted">Code Name</label>
+                  <input 
+                    value={form.codeName} 
+                    onChange={e => setForm(f => ({ ...f, codeName: e.target.value }))} 
+                    className="w-full px-3 py-2 border border-border rounded-lg text-sm" 
+                  />
+                </div>
+                <div>
+                  <label className="text-xs font-medium text-text-muted">Option 1</label>
+                  <input 
+                    value={form.optionVal1} 
+                    onChange={e => setForm(f => ({ ...f, optionVal1: e.target.value }))} 
+                    className="w-full px-3 py-2 border border-border rounded-lg text-sm" 
+                  />
+                </div>
+                <div>
+                  <label className="text-xs font-medium text-text-muted">Option 2</label>
+                  <input 
+                    value={form.optionVal2} 
+                    onChange={e => setForm(f => ({ ...f, optionVal2: e.target.value }))} 
+                    className="w-full px-3 py-2 border border-border rounded-lg text-sm" 
+                  />
+                </div>
+                <div className="flex gap-3">
+                  <div className="flex-1">
+                    <label className="text-xs font-medium text-text-muted">Sort Order</label>
+                    <input 
+                      type="number" 
+                      value={form.sortOrder} 
+                      onChange={e => setForm(f => ({ ...f, sortOrder: parseInt(e.target.value) || 0 }))} 
+                      className="w-full px-3 py-2 border border-border rounded-lg text-sm" 
+                    />
+                  </div>
+                  <div className="flex-1">
+                    <label className="text-xs font-medium text-text-muted">Active</label>
+                    <select 
+                      value={form.isActive} 
+                      onChange={e => setForm(f => ({ ...f, isActive: e.target.value as 'Y' | 'N' }))} 
+                      className="w-full px-3 py-2 border border-border rounded-lg text-sm bg-white">
+                      <option value="Y">Yes</option>
+                      <option value="N">No</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+              <div className="flex justify-end gap-3 mt-6">
+                <button 
+                  onClick={() => setShowModal(false)} 
+                  className="px-4 py-2 rounded-xl text-sm font-medium text-text-muted hover:bg-gray-100">
+                  Cancel
+                </button>
+                <button 
+                  onClick={handleSave} 
+                  className="px-4 py-2 rounded-xl text-sm font-medium bg-primary text-white hover:bg-primary-hover">
+                  Save
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(main)/training/page.tsx b/src/app/(main)/training/page.tsx
new file mode 100644
index 0000000..dc4641a
--- /dev/null
+++ b/src/app/(main)/training/page.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import TrainingDashboard from '@/components/training/TrainingDashboard';
+
+export default function TrainingPage() {
+  return <TrainingDashboard />;
+}
diff --git a/src/app/(main)/work-reports/page.tsx b/src/app/(main)/work-reports/page.tsx
new file mode 100644
index 0000000..19e5a81
--- /dev/null
+++ b/src/app/(main)/work-reports/page.tsx
@@ -0,0 +1,586 @@
+'use client';
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { FileText, Plus, Search, CheckCircle2, Clock, XCircle, Send, Eye, AlertCircle } from 'lucide-react';
+import reportService from '@/services/reportService';
+import { useCommonCodes } from '@/hooks/useCommonCodes';
+import type { WorkReport, ReportStatus } from '@/types';
+
+export default function WorkReportsPage() {
+  const [reports, setReports] = useState<WorkReport[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedTab, setSelectedTab] = useState<'list' | 'write'>('list');
+
+  const { codes: reportTypeCodes, loading: typeCodesLoading } = useCommonCodes('REPORT_TYPE');
+  const { codes: reportStatusCodes, loading: statusCodesLoading } = useCommonCodes('REPORT_STATUS');
+
+  const statusLabel = statusCodesLoading ? {} : Object.fromEntries(reportStatusCodes.map((c) => [c.codeValue, c.codeName]));
+  const statusColorMap = statusCodesLoading ? {} : Object.fromEntries(reportStatusCodes.map((c) => [c.codeValue, c.codeName === '임시저장' ? 'bg-gray-100 text-gray-700' : c.codeName === '제출됨' ? 'bg-status-pending-bg text-status-pending' : c.codeName === '승인' ? 'bg-status-resolved-bg text-status-resolved' : 'bg-status-critical-bg text-status-critical']));
+
+  const [srAutoComplete, setSrAutoComplete] = useState<string[]>([]);
+  const [form, setForm] = useState({
+    dispatchId: '',
+    reportType: 'WEEKLY',
+    targetDate: new Date().toISOString().split('T')[0],
+    completedTasks: '',
+    plannedTasks: '',
+    issuesAndRisks: '',
+    supportRequested: '',
+  });
+  const [submitStatus, setSubmitStatus] = useState<ReportStatus>('DRAFT');
+  const [formLoading, setFormLoading] = useState(false);
+  const [formError, setFormError] = useState<string | null>(null);
+
+  const [reviewStates, setReviewStates] = useState<Record<number, { comment: string; status: 'APPROVED' | 'REJECTED' }>>({});
+
+  const fetchReports = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const response = await reportService.getAll({ size: 50 });
+      if (response.success && response.data) {
+        setReports(response.data.content);
+      } else {
+        setError(response.message || '보고서를 불러오는데 실패했습니다.');
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : '보고서를 불러오는데 실패했습니다.');
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const fetchSrAutoComplete = useCallback(async () => {
+    const targetDate = form.targetDate;
+    try {
+      const response = await reportService.getSrAutoComplete(targetDate);
+      if (response.success && response.data) {
+        setSrAutoComplete(response.data);
+      }
+    } catch (err) {
+      console.error('SR 자동완성 로딩 실패:', err);
+    }
+  }, [form.targetDate]);
+
+  useEffect(() => {
+    fetchReports();
+  }, [fetchReports]);
+
+  useEffect(() => {
+    if (selectedTab === 'write') {
+      fetchSrAutoComplete();
+    }
+  }, [selectedTab, fetchSrAutoComplete]);
+
+  const handleFormChange = (field: string, value: string) => {
+    setForm((prev) => ({ ...prev, [field]: value }));
+    setFormError(null);
+  };
+
+  const handleCreateReport = async () => {
+    if (!form.dispatchId) {
+      setFormError('파견 이력을 선택해주세요.');
+      return;
+    }
+    if (!form.completedTasks.trim()) {
+      setFormError('완료 실적을 입력해주세요.');
+      return;
+    }
+
+    try {
+      setFormLoading(true);
+      setFormError(null);
+
+      const createData = {
+        dispatchId: parseInt(form.dispatchId, 10),
+        reportType: form.reportType as 'WEEKLY' | 'MONTHLY',
+        targetDate: form.targetDate,
+        completedTasks: form.completedTasks,
+        plannedTasks: form.plannedTasks,
+        issuesAndRisks: form.issuesAndRisks || null,
+        supportRequested: form.supportRequested || null,
+      };
+
+      const response = await reportService.create(createData);
+
+      if (response.success) {
+        if (submitStatus === 'SUBMITTED') {
+          const submittedReport = response.data;
+          await reportService.updateStatus(submittedReport.reportId, 'SUBMITTED');
+        }
+
+        alert(
+          submitStatus === 'SUBMITTED'
+            ? '보고서가 제출되었습니다. 관리자 결재를 기다려주세요.'
+            : '보고서가 임시저장되었습니다.',
+        );
+
+        setForm({
+          dispatchId: '',
+          reportType: 'WEEKLY',
+          targetDate: new Date().toISOString().split('T')[0],
+          completedTasks: '',
+          plannedTasks: '',
+          issuesAndRisks: '',
+          supportRequested: '',
+        });
+        setSubmitStatus('DRAFT');
+        setSelectedTab('list');
+        await fetchReports();
+      } else {
+        setFormError(response.message || '보고서 작성에 실패했습니다.');
+      }
+    } catch (err) {
+      setFormError(err instanceof Error ? err.message : '보고서 작성에 실패했습니다.');
+    } finally {
+      setFormLoading(false);
+    }
+  };
+
+  const handleSubmit = async (reportId: number) => {
+    try {
+      const response = await reportService.updateStatus(reportId, 'SUBMITTED');
+      if (response.success) {
+        alert('보고서가 제출되었습니다. 관리자 결재를 기다려주세요.');
+        await fetchReports();
+      } else {
+        alert(response.message || '제출에 실패했습니다.');
+      }
+    } catch (err) {
+      alert(err instanceof Error ? err.message : '제출에 실패했습니다.');
+    }
+  };
+
+  const handleReview = async (reportId: number, action: 'APPROVED' | 'REJECTED') => {
+    const reviewData = reviewStates[reportId] || { comment: '', status: action };
+
+    if (action === 'REJECTED' && !reviewData.comment.trim()) {
+      alert('반려 사유를 입력해주세요.');
+      return;
+    }
+
+    try {
+      const response = await reportService.review(reportId, action, reviewData.comment);
+      if (response.success) {
+        alert(action === 'APPROVED' ? '승인되었습니다.' : '반려되었습니다.');
+        setReviewStates((prev) => {
+          const next = { ...prev };
+          delete next[reportId];
+          return next;
+        });
+        await fetchReports();
+      } else {
+        alert(response.message || '결재 처리에 실패했습니다.');
+      }
+    } catch (err) {
+      alert(err instanceof Error ? err.message : '결재 처리에 실패했습니다.');
+    }
+  };
+
+  const handleReviewCommentChange = (reportId: number, comment: string) => {
+    setReviewStates((prev) => ({
+      ...prev,
+      [reportId]: { ...prev[reportId], comment, status: prev[reportId]?.status || 'REJECTED' },
+    }));
+  };
+
+  const stats = {
+    total: reports.length,
+    approved: reports.filter((r) => r.status === 'APPROVED').length,
+    pending: reports.filter((r) => r.status === 'SUBMITTED').length,
+    rejected: reports.filter((r) => r.status === 'REJECTED').length,
+  };
+
+  if (loading) {
+    return (
+      <div className="p-4 sm:p-6 lg:p-8 flex items-center justify-center min-h-[60vh]">
+        <div className="text-center">
+          <Clock className="w-12 h-12 text-primary mx-auto mb-4 animate-spin" />
+          <p className="text-text-muted">보고서를 불러오는 중...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-end gap-4 mb-6 sm:mb-8">
+          <div>
+            <h2 className="font-outfit text-2xl sm:text-3xl font-semibold text-text-main tracking-tight">Work Reports</h2>
+            <p className="text-text-muted mt-1 text-sm">주간/월간 업무 보고서를 작성하고 결재 상태를 추적합니다.</p>
+          </div>
+          <div className="flex flex-wrap gap-3 w-full sm:w-auto">
+            <button
+              onClick={() => setSelectedTab('list')}
+              className={`flex-1 sm:flex-none px-4 py-2.5 rounded-xl text-sm font-semibold transition-all flex items-center justify-center ${
+                selectedTab === 'list'
+                  ? 'bg-primary text-white shadow-soft'
+                  : 'border border-border text-text-main hover:bg-gray-50'
+              }`}
+            >
+              <FileText className="w-4 h-4 inline mr-1.5" />내 보고서
+            </button>
+            <button
+              onClick={() => setSelectedTab('write')}
+              className={`flex-1 sm:flex-none px-4 py-2.5 rounded-xl text-sm font-semibold transition-all flex items-center justify-center ${
+                selectedTab === 'write'
+                  ? 'bg-primary text-white shadow-soft'
+                  : 'border border-border text-text-main hover:bg-gray-50'
+              }`}
+            >
+              <Plus className="w-4 h-4 inline mr-1.5" />새 보고서
+            </button>
+          </div>
+        </div>
+
+        {/* Summary Stats */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+          <div className="bg-surface rounded-2xl p-5 border border-border">
+            <p className="text-xs text-text-muted">전체</p>
+            <p className="font-outfit text-2xl font-semibold text-text-main">{stats.total}</p>
+          </div>
+          <div className="bg-surface rounded-2xl p-5 border border-border">
+            <p className="text-xs text-text-muted">승인</p>
+            <p className="font-outfit text-2xl font-semibold text-status-resolved">{stats.approved}</p>
+          </div>
+          <div className="bg-surface rounded-2xl p-5 border border-border">
+            <p className="text-xs text-text-muted">대기</p>
+            <p className="font-outfit text-2xl font-semibold text-status-pending">{stats.pending}</p>
+          </div>
+          <div className="bg-surface rounded-2xl p-5 border border-border">
+            <p className="text-xs text-text-muted">반려</p>
+            <p className="font-outfit text-2xl font-semibold text-status-critical">{stats.rejected}</p>
+          </div>
+        </div>
+
+        {error ? (
+          <div className="bg-status-critical-bg border border-status-critical rounded-2xl p-6 mb-6">
+            <div className="flex items-start">
+              <AlertCircle className="w-5 h-5 text-status-critical mt-0.5 mr-3" />
+              <div>
+                <p className="text-status-critical font-semibold mb-1">데이터 로딩 오류</p>
+                <p className="text-status-critical text-sm">{error}</p>
+                <button
+                  onClick={fetchReports}
+                  className="mt-3 text-xs font-semibold text-status-critical underline hover:no-underline"
+                >
+                  다시 시도
+                </button>
+              </div>
+            </div>
+          </div>
+        ) : null}
+
+        {selectedTab === 'list' ? (
+          reports.length === 0 ? (
+            <div className="bg-surface rounded-2xl border border-border p-8 sm:p-12 text-center">
+              <FileText className="w-16 h-16 text-gray-300 mx-auto mb-4" />
+              <p className="text-text-main font-semibold mb-2">보고서가 없습니다</p>
+              <p className="text-text-muted text-sm mb-4">첫 번째 업무 보고서를 작성해보세요</p>
+              <button
+                onClick={() => setSelectedTab('write')}
+                className="px-6 py-2.5 bg-primary text-white rounded-xl text-sm font-semibold hover:bg-primary-hover transition-all"
+              >
+                <Plus className="w-4 h-4 inline mr-1.5" />보고서 작성
+              </button>
+            </div>
+          ) : (
+            <div className="bg-surface rounded-2xl border border-border shadow-card overflow-hidden">
+              {/* Desktop table */}
+              <div className="hidden md:block overflow-x-auto">
+                <table className="w-full text-left">
+                  <thead>
+                    <tr className="bg-gray-50/50">
+                      <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">ID</th>
+                      <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">Type</th>
+                      <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">Date</th>
+                      <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">Author</th>
+                      <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase whitespace-nowrap">Status</th>
+                      <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted uppercase text-right whitespace-nowrap">Action</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-100 text-sm">
+                    {reports.map((r) => (
+                      <tr key={r.reportId} className="hover:bg-gray-50 transition-colors">
+                        <td className="py-4 px-4 sm:px-6 font-medium text-text-main">{r.reportId}</td>
+                        <td className="py-4 px-4 sm:px-6 text-text-muted whitespace-nowrap">{r.reportType}</td>
+                        <td className="py-4 px-4 sm:px-6 text-text-muted whitespace-nowrap">{r.targetDate}</td>
+                        <td className="py-4 px-4 sm:px-6 text-text-muted">{r.userName || 'N/A'}</td>
+                        <td className="py-4 px-4 sm:px-6">
+                          <span
+                            className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${
+                              statusColorMap[r.status as keyof typeof statusColorMap] || 'bg-gray-100 text-gray-700'
+                            }`}
+                          >
+                            {statusLabel[r.status as keyof typeof statusLabel] || r.status}
+                          </span>
+                        </td>
+                        <td className="py-4 px-4 sm:px-6 text-right">
+                          {r.status === 'SUBMITTED' ? (
+                            <div className="flex justify-end space-x-1">
+                              <button
+                                onClick={() => handleReview(r.reportId, 'APPROVED')}
+                                className="p-1.5 text-status-resolved hover:bg-green-50 rounded-lg"
+                                title="승인"
+                              >
+                                <CheckCircle2 className="w-4 h-4" />
+                              </button>
+                              <button
+                                onClick={() => handleReview(r.reportId, 'REJECTED')}
+                                className="p-1.5 text-status-critical hover:bg-red-50 rounded-lg"
+                                title="반려"
+                              >
+                                <XCircle className="w-4 h-4" />
+                              </button>
+                            </div>
+                          ) : r.status === 'DRAFT' ? (
+                            <button
+                              onClick={() => handleSubmit(r.reportId)}
+                              className="p-1.5 text-primary hover:bg-indigo-50 rounded-lg"
+                              title="제출"
+                            >
+                              <Send className="w-4 h-4" />
+                            </button>
+                          ) : (
+                            <button onClick={() => alert(`Report #${r.reportId}\nStatus: ${r.status}\nDate: ${r.targetDate}\n\nCompleted:\n${r.completedTasks}\n\nPlanned:\n${r.plannedTasks}${r.issuesAndRisks ? `\n\nIssues:\n${r.issuesAndRisks}` : ''}${r.reviewComment ? `\n\nReview: ${r.reviewComment}` : ''}`)} className="p-1.5 text-text-muted hover:text-primary rounded-lg" title="조회">
+                              <Eye className="w-4 h-4" />
+                            </button>
+                          )}
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+
+              {/* Mobile cards */}
+              <div className="md:hidden space-y-3 p-4">
+                {reports.map((r) => (
+                  <div key={r.reportId} className="bg-surface rounded-2xl border border-border p-4 space-y-2">
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs font-bold text-text-muted">#{r.reportId}</span>
+                      <span className={`text-[10px] font-medium px-2 py-0.5 rounded-full ${statusColorMap[r.status as keyof typeof statusColorMap] || ''}`}>{statusLabel[r.status as keyof typeof statusLabel] || r.status}</span>
+                    </div>
+                    <p className="text-sm font-medium text-text-main">{r.reportType} · {r.targetDate}</p>
+                    <p className="text-xs text-text-muted line-clamp-2">{r.completedTasks}</p>
+                    <div className="flex items-center gap-2 pt-2 border-t border-border">
+                      {r.status === 'SUBMITTED' ? (
+                        <>
+                          <button onClick={() => handleReview(r.reportId, 'APPROVED')} className="flex-1 py-2 bg-green-50 text-status-resolved rounded-xl text-xs font-medium flex items-center justify-center gap-1"><CheckCircle2 className="w-3.5 h-3.5" /> 승인</button>
+                          <button onClick={() => handleReview(r.reportId, 'REJECTED')} className="flex-1 py-2 bg-red-50 text-status-critical rounded-xl text-xs font-medium flex items-center justify-center gap-1"><XCircle className="w-3.5 h-3.5" /> 반려</button>
+                        </>
+                      ) : r.status === 'DRAFT' ? (
+                        <button onClick={() => handleSubmit(r.reportId)} className="flex-1 py-2 bg-indigo-50 text-primary rounded-xl text-xs font-medium flex items-center justify-center gap-1"><Send className="w-3.5 h-3.5" /> 제출</button>
+                      ) : (
+                        <button onClick={() => alert(`Report #${r.reportId}\nStatus: ${r.status}\nDate: ${r.targetDate}\n\nCompleted:\n${r.completedTasks}\n\nPlanned:\n${r.plannedTasks}${r.issuesAndRisks ? `\n\nIssues:\n${r.issuesAndRisks}` : ''}${r.reviewComment ? `\n\nReview: ${r.reviewComment}` : ''}`)} className="flex-1 py-2 bg-gray-50 text-text-muted rounded-xl text-xs font-medium flex items-center justify-center gap-1"><Eye className="w-3.5 h-3.5" /> 조회</button>
+                      )}
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )
+        ) : (
+          /* Write Report Form */
+          <div className="bg-surface rounded-2xl border border-border p-4 sm:p-6">
+            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 mb-6 pb-4 border-b border-border">
+              <div className="flex flex-wrap items-center gap-3 w-full sm:w-auto">
+                <select
+                  value={form.reportType}
+                  onChange={(e) => handleFormChange('reportType', e.target.value)}
+                  className="text-sm bg-gray-50 border border-border rounded-lg px-3 py-2 text-text-main focus:outline-none focus:ring-2 focus:ring-primary"
+                >
+                  {typeCodesLoading ? (
+                    <option value="">Loading types...</option>
+                  ) : (
+                    reportTypeCodes.filter((c) => c.codeValue !== 'DAILY').map((code) => (
+                      <option key={code.codeValue} value={code.codeValue}>
+                        {code.codeName} ({code.codeValue})
+                      </option>
+                    ))
+                  )}
+                </select>
+                <input
+                  type="date"
+                  value={form.targetDate}
+                  onChange={(e) => handleFormChange('targetDate', e.target.value)}
+                  className="text-sm bg-gray-50 border border-border rounded-lg px-3 py-2 text-text-main focus:outline-none focus:ring-2 focus:ring-primary"
+                />
+                <select
+                  value={form.dispatchId}
+                  onChange={(e) => handleFormChange('dispatchId', e.target.value)}
+                  className="text-sm bg-gray-50 border border-border rounded-lg px-3 py-2 text-text-main focus:outline-none focus:ring-2 focus:ring-primary flex-1 sm:flex-none"
+                >
+                  <option value="">파견 이력 선택</option>
+                  <option value="1">Samsung Pay SI - 2024.01~</option>
+                  <option value="2">LG CNS SM - 2023.06~2023.12</option>
+                </select>
+              </div>
+              <div className="flex gap-2 w-full sm:w-auto">
+                <button
+                  onClick={() => setSubmitStatus('DRAFT')}
+                  className={`flex-1 sm:flex-none px-4 py-2 rounded-xl text-xs font-semibold transition-all ${
+                    submitStatus === 'DRAFT'
+                      ? 'bg-gray-200 text-text-main'
+                      : 'border border-border text-text-main hover:bg-gray-50'
+                  }`}
+                >
+                  임시저장
+                </button>
+                <button
+                  onClick={() => setSubmitStatus('SUBMITTED')}
+                  className={`flex-1 sm:flex-none px-4 py-2 rounded-xl text-xs font-semibold transition-all ${
+                    submitStatus === 'SUBMITTED'
+                      ? 'bg-primary text-white'
+                      : 'border border-primary text-primary hover:bg-indigo-50'
+                  }`}
+                >
+                  제출하기
+                </button>
+              </div>
+            </div>
+
+            {/* SR Auto-complete */}
+            <div className="mb-6 p-4 bg-indigo-50/50 rounded-xl border border-indigo-100/50">
+              <div className="flex items-center text-xs font-semibold text-indigo-600 mb-2">
+                <CheckCircle2 className="w-3.5 h-3.5 mr-1.5" /> SR 자동 연동 실적 (해당 주차)
+              </div>
+              <div className="space-y-1">
+                {srAutoComplete.length > 0 ? (
+                  srAutoComplete.map((sr, i) => (
+                    <div key={i} className="text-xs text-text-main flex items-center">
+                      <div className="w-1.5 h-1.5 rounded-full bg-primary mr-2" />
+                      {sr}
+                    </div>
+                  ))
+                ) : (
+                  <p className="text-xs text-text-muted">연동된 SR 내역이 없습니다.</p>
+                )}
+              </div>
+            </div>
+
+            {formError && (
+              <div className="mb-4 p-3 bg-status-critical-bg border border-status-critical rounded-xl">
+                <p className="text-xs text-status-critical flex items-center">
+                  <AlertCircle className="w-3.5 h-3.5 mr-1.5" />
+                  {formError}
+                </p>
+              </div>
+            )}
+
+            <div className="space-y-4">
+              <div>
+                <label className="block text-xs font-medium text-text-muted mb-1.5">완료 실적</label>
+                <textarea
+                  value={form.completedTasks}
+                  onChange={(e) => handleFormChange('completedTasks', e.target.value)}
+                  className="w-full px-4 py-2.5 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none"
+                  rows={3}
+                  placeholder="금주 완료한 업무 내역을 입력하세요..."
+                />
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-text-muted mb-1.5">차기 계획</label>
+                <textarea
+                  value={form.plannedTasks}
+                  onChange={(e) => handleFormChange('plannedTasks', e.target.value)}
+                  className="w-full px-4 py-2.5 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none"
+                  rows={3}
+                  placeholder="차주 예정 업무 계획을 입력하세요..."
+                />
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-xs font-medium text-text-muted mb-1.5">특이사항/리스크</label>
+                  <textarea
+                    value={form.issuesAndRisks}
+                    onChange={(e) => handleFormChange('issuesAndRisks', e.target.value)}
+                    className="w-full px-4 py-2.5 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none"
+                    rows={2}
+                    placeholder="현장 리스크가 있다면..."
+                  />
+                </div>
+                <div>
+                  <label className="block text-xs font-medium text-text-muted mb-1.5">본사 지원 요청</label>
+                  <textarea
+                    value={form.supportRequested}
+                    onChange={(e) => handleFormChange('supportRequested', e.target.value)}
+                    className="w-full px-4 py-2.5 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none"
+                    rows={2}
+                    placeholder="본사 지원이 필요하면..."
+                  />
+                </div>
+              </div>
+            </div>
+
+            <div className="mt-6 flex flex-col sm:flex-row justify-end gap-3">
+              <button
+                onClick={() => setSelectedTab('list')}
+                className="w-full sm:w-auto px-6 py-2.5 border border-border rounded-xl text-sm font-semibold text-text-main hover:bg-gray-50 transition-all"
+              >
+                취소
+              </button>
+              <button
+                onClick={handleCreateReport}
+                disabled={formLoading}
+                className="w-full sm:w-auto px-6 py-2.5 bg-primary text-white rounded-xl text-sm font-semibold hover:bg-primary-hover transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
+              >
+                {formLoading ? (
+                  <Clock className="w-4 h-4 mr-1.5 animate-spin" />
+                ) : submitStatus === 'SUBMITTED' ? (
+                  <Send className="w-4 h-4 mr-1.5" />
+                ) : null}
+                {formLoading ? '처리 중...' : submitStatus === 'SUBMITTED' ? '제출하기' : '임시저장'}
+              </button>
+            </div>
+          </div>
+        )}
+
+        {/* Review Modal for REJECTED */}
+        {Object.entries(reviewStates).map(([reportIdStr, state]) => {
+          const reportId = parseInt(reportIdStr, 10);
+          const report = reports.find((r) => r.reportId === reportId);
+          if (!report || state.status !== 'REJECTED') return null;
+
+          return (
+            <div key={reportId} className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
+              <div className="bg-surface rounded-2xl p-6 w-full max-w-md">
+                <h3 className="font-outfit text-xl font-semibold text-text-main mb-4">반려 사유 입력</h3>
+                <textarea
+                  value={state.comment}
+                  onChange={(e) => handleReviewCommentChange(reportId, e.target.value)}
+                  className="w-full px-4 py-2.5 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none mb-4"
+                  rows={4}
+                  placeholder="반려 사유를 구체적으로 입력해주세요..."
+                  autoFocus
+                />
+                <div className="flex justify-end space-x-3">
+                  <button
+                    onClick={() =>
+                      setReviewStates((prev) => {
+                        const next = { ...prev };
+                        delete next[reportId];
+                        return next;
+                      })
+                    }
+                    className="px-4 py-2 border border-border rounded-xl text-sm font-semibold text-text-main hover:bg-gray-50 transition-all"
+                  >
+                    취소
+                  </button>
+                  <button
+                    onClick={() => handleReview(reportId, 'REJECTED')}
+                    className="px-4 py-2 bg-status-critical text-white rounded-xl text-sm font-semibold hover:bg-red-600 transition-all"
+                  >
+                    반려 처리
+                  </button>
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/(main)/work-reports/review/page.tsx b/src/app/(main)/work-reports/review/page.tsx
new file mode 100644
index 0000000..ff29f50
--- /dev/null
+++ b/src/app/(main)/work-reports/review/page.tsx
@@ -0,0 +1,237 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { FileText, CheckCircle, XCircle, Eye, Search, AlertCircle } from 'lucide-react';
+import { useAuthStore } from '@/stores';
+import reportService from '@/services/reportService';
+import type { WorkReport, ReportSummary } from '@/types';
+
+const statusBadge = (status: string) => {
+  const map: Record<string, { label: string; cls: string }> = {
+    DRAFT:     { label: 'Draft',     cls: 'bg-gray-100 text-gray-600' },
+    SUBMITTED: { label: 'Submitted', cls: 'bg-status-pending-bg text-status-pending-text' },
+    APPROVED:  { label: 'Approved',  cls: 'bg-status-resolved-bg text-status-resolved-text' },
+    REJECTED:  { label: 'Rejected',  cls: 'bg-status-critical-bg text-status-critical-text' },
+  };
+  const m = map[status] || { label: status, cls: 'bg-gray-100 text-gray-600' };
+  return <span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${m.cls}`}>{m.label}</span>;
+};
+
+export default function ReportReviewPage() {
+  const router = useRouter();
+  const user = useAuthStore((s) => s.user);
+  const [summary, setSummary] = useState<ReportSummary | null>(null);
+  const [reports, setReports] = useState<WorkReport[]>([]);
+  const [filter, setFilter] = useState('SUBMITTED');
+  const [search, setSearch] = useState('');
+  const [loading, setLoading] = useState(true);
+  const [rejectModal, setRejectModal] = useState<{ open: boolean; reportId: number; comment: string }>({ open: false, reportId: 0, comment: '' });
+
+  const fetchData = async () => {
+    try {
+      const [summaryRes, listRes] = await Promise.all([
+        reportService.getSummary(),
+        reportService.getAll({ status: filter, size: 100 }),
+      ]);
+      setSummary(summaryRes.data);
+      setReports(listRes.data.content || []);
+    } catch {
+      // ignore
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, [filter]);
+
+  const handleApprove = async (reportId: number) => {
+    try {
+      await reportService.review(reportId, 'APPROVED', '');
+      fetchData();
+    } catch { alert('Failed to approve report.'); }
+  };
+
+  const handleReject = async () => {
+    if (!rejectModal.comment.trim()) return;
+    try {
+      await reportService.review(rejectModal.reportId, 'REJECTED', rejectModal.comment);
+      setRejectModal({ open: false, reportId: 0, comment: '' });
+      fetchData();
+    } catch { alert('Failed to reject report.'); }
+  };
+
+  if (!user || user.roleCode === 'EMPLOYEE') {
+    return (
+      <div className="p-4 sm:p-6 lg:p-8">
+        <div className="max-w-7xl mx-auto text-center py-20">
+          <AlertCircle className="w-12 h-12 text-text-muted mx-auto mb-4" />
+          <h2 className="text-xl font-semibold text-text-main mb-2">Access Denied</h2>
+          <p className="text-text-muted text-sm">Only managers and admins can access this page.</p>
+        </div>
+      </div>
+    );
+  }
+
+  const filtered = reports.filter(r =>
+    r.userName?.toLowerCase().includes(search.toLowerCase()) ||
+    r.reportType?.toLowerCase().includes(search.toLowerCase())
+  );
+
+  const statCards = [
+    { label: 'Submitted', value: summary?.submitted ?? 0, color: 'text-status-pending-text', bg: 'bg-status-pending-bg' },
+    { label: 'Approved', value: summary?.approved ?? 0, color: 'text-status-resolved-text', bg: 'bg-status-resolved-bg' },
+    { label: 'Rejected', value: summary?.rejected ?? 0, color: 'text-status-critical-text', bg: 'bg-status-critical-bg' },
+    { label: 'Draft', value: summary?.draft ?? 0, color: 'text-text-muted', bg: 'bg-gray-100' },
+  ];
+
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex items-center justify-between mb-6">
+          <div>
+            <h2 className="font-outfit text-2xl sm:text-3xl font-semibold text-text-main">Report Review Dashboard</h2>
+            <p className="text-text-muted text-sm mt-1">Approve or reject submitted work reports</p>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+          {statCards.map((s) => (
+            <div key={s.label} className="bg-surface rounded-2xl p-5 shadow-card border border-border">
+              <div className="flex items-center gap-3">
+                <div className={`w-10 h-10 rounded-xl ${s.bg} flex items-center justify-center ${s.color}`}>
+                  <FileText className="w-5 h-5" />
+                </div>
+                <div>
+                  <p className="text-xs text-text-muted font-medium">{s.label}</p>
+                  <p className={`font-outfit text-2xl font-semibold ${s.color}`}>{s.value}</p>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="bg-surface rounded-2xl shadow-card border border-border overflow-hidden">
+          <div className="p-4 sm:p-6 border-b border-border flex flex-col sm:flex-row gap-3 items-start sm:items-center justify-between">
+            <div className="flex items-center gap-2">
+              {['SUBMITTED', 'APPROVED', 'REJECTED', 'DRAFT'].map((s) => (
+                <button
+                  key={s}
+                  onClick={() => setFilter(s)}
+                  className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-all ${filter === s ? 'bg-primary text-white' : 'bg-gray-100 text-text-muted hover:bg-gray-200'}`}
+                >
+                  {s.charAt(0) + s.slice(1).toLowerCase()}
+                </button>
+              ))}
+            </div>
+            <div className="relative w-full sm:w-64">
+              <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-text-muted" />
+              <input
+                type="text"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                placeholder="Search by name or type..."
+                className="w-full pl-9 pr-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+              />
+            </div>
+          </div>
+
+          <div className="overflow-x-auto">
+            <table className="w-full text-left border-collapse">
+              <thead>
+                <tr className="bg-gray-50/50">
+                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Employee</th>
+                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Type</th>
+                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Date</th>
+                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Status</th>
+                  <th className="py-3 px-4 sm:px-6 text-xs font-semibold text-text-muted tracking-wider uppercase border-b border-border">Actions</th>
+                </tr>
+              </thead>
+              <tbody className="text-sm divide-y divide-gray-100">
+                {loading && (
+                  <tr><td colSpan={5} className="py-8 text-center text-text-muted">Loading...</td></tr>
+                )}
+                {!loading && filtered.length === 0 && (
+                  <tr><td colSpan={5} className="py-8 text-center text-text-muted">No reports found.</td></tr>
+                )}
+                {filtered.map((r) => (
+                  <tr key={r.reportId} className="hover:bg-gray-50 transition-colors">
+                    <td className="py-4 px-4 sm:px-6 font-medium text-text-main">{r.userName}</td>
+                    <td className="py-4 px-4 sm:px-6">
+                      <span className="text-xs font-medium bg-indigo-50 text-primary px-2 py-1 rounded-lg">{r.reportType}</span>
+                    </td>
+                    <td className="py-4 px-4 sm:px-6 text-text-muted">{r.targetDate}</td>
+                    <td className="py-4 px-4 sm:px-6">{statusBadge(r.status)}</td>
+                    <td className="py-4 px-4 sm:px-6">
+                      <div className="flex items-center gap-2">
+                        {r.status === 'SUBMITTED' && (
+                          <>
+                            <button
+                              onClick={() => handleApprove(r.reportId)}
+                              className="p-1.5 rounded-lg bg-status-resolved-bg text-status-resolved-text hover:bg-green-100 transition-colors"
+                              title="Approve"
+                            >
+                              <CheckCircle className="w-4 h-4" />
+                            </button>
+                            <button
+                              onClick={() => setRejectModal({ open: true, reportId: r.reportId, comment: '' })}
+                              className="p-1.5 rounded-lg bg-status-critical-bg text-status-critical-text hover:bg-red-100 transition-colors"
+                              title="Reject"
+                            >
+                              <XCircle className="w-4 h-4" />
+                            </button>
+                          </>
+                        )}
+                        <button
+                          onClick={() => router.push(`/work-reports`)}
+                          className="p-1.5 rounded-lg bg-gray-100 text-text-muted hover:bg-gray-200 transition-colors"
+                          title="View"
+                        >
+                          <Eye className="w-4 h-4" />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+
+        {rejectModal.open && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={() => setRejectModal({ ...rejectModal, open: false })}>
+            <div className="bg-white rounded-2xl shadow-2xl p-6 w-full max-w-md mx-4" onClick={(e) => e.stopPropagation()}>
+              <h3 className="font-outfit font-semibold text-lg text-text-main mb-2">Reject Report</h3>
+              <p className="text-sm text-text-muted mb-4">Please provide feedback for the rejection.</p>
+              <textarea
+                value={rejectModal.comment}
+                onChange={(e) => setRejectModal({ ...rejectModal, comment: e.target.value })}
+                placeholder="Required: reason for rejection..."
+                className="w-full px-3 py-2.5 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none"
+                rows={4}
+                autoFocus
+              />
+              <div className="flex justify-end gap-3 mt-4">
+                <button
+                  onClick={() => setRejectModal({ open: false, reportId: 0, comment: '' })}
+                  className="px-4 py-2 rounded-xl text-sm font-medium text-text-muted hover:bg-gray-100 transition-colors"
+                >
+                  Cancel
+                </button>
+                <button
+                  onClick={handleReject}
+                  disabled={!rejectModal.comment.trim()}
+                  className="px-4 py-2 rounded-xl text-sm font-semibold bg-status-critical-text text-white hover:bg-red-700 transition-colors disabled:opacity-50"
+                >
+                  Reject
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/favicon.ico b/src/app/favicon.ico
new file mode 100644
index 0000000..718d6fe
Binary files /dev/null and b/src/app/favicon.ico differ
diff --git a/src/app/globals.css b/src/app/globals.css
new file mode 100644
index 0000000..88ae136
--- /dev/null
+++ b/src/app/globals.css
@@ -0,0 +1,64 @@
+@import "tailwindcss";
+
+@theme {
+  --color-canvas: #F2F3F8;
+  --color-primary: #4F46E5;
+  --color-primary-hover: #3730A3;
+  --color-surface: #ffffff;
+  --color-border: #E5E7EB;
+  --color-text-main: #0b1c30;
+  --color-text-muted: #6B7280;
+
+  /* Semantic Status */
+  --color-status-open-bg: #EFF6FF;
+  --color-status-open-text: #3B82F6;
+  --color-status-resolved-bg: #ECFDF5;
+  --color-status-resolved-text: #10B981;
+  --color-status-pending-bg: #FFFBEB;
+  --color-status-pending-text: #F59E0B;
+  --color-status-critical-bg: #FEF2F2;
+  --color-status-critical-text: #EF4444;
+  --color-status-closed-bg: #F9FAFB;
+  --color-status-closed-text: #6B7280;
+
+  /* Surface Container */
+  --color-surface-container: #e5eeff;
+  --color-surface-container-high: #dce9ff;
+  --color-surface-container-highest: #d3e4fe;
+
+  /* Project Dots */
+  --color-dot-green: #22C55E;
+  --color-dot-orange: #F97316;
+  --color-dot-blue: #3B82F6;
+  --color-dot-pink: #EC4899;
+  --color-dot-purple: #A855F7;
+
+  --font-inter: var(--font-inter);
+  --font-outfit: var(--font-outfit);
+
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06);
+  --shadow-float: 0 4px 16px rgba(0, 0, 0, 0.08);
+  --shadow-modal: 0 20px 48px rgba(0, 0, 0, 0.14);
+}
+
+@layer base {
+  body {
+    @apply font-inter bg-canvas text-text-main;
+  }
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: #cbd5e1;
+  border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #94a3b8;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
new file mode 100644
index 0000000..0f668b3
--- /dev/null
+++ b/src/app/layout.tsx
@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { Inter, Outfit } from "next/font/google";
+import ParkingGuard from "@/components/layout/ParkingGuard";
+import "./globals.css";
+
+const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin"],
+});
+
+const outfit = Outfit({
+  variable: "--font-outfit",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "SR System - HQ Helpdesk",
+  description: "SM/SI 파견 직원 통합 지원 및 IT 자산 관리 포털",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="ko" className={`${inter.variable} ${outfit.variable} h-full antialiased`}>
+      <body className="h-full font-inter bg-canvas text-text-main overflow-hidden">
+        <ParkingGuard>
+          {children}
+        </ParkingGuard>
+      </body>
+    </html>
+  );
+}
diff --git a/src/components/dispatch/DispatchFormModal.tsx b/src/components/dispatch/DispatchFormModal.tsx
new file mode 100644
index 0000000..3fa45c4
--- /dev/null
+++ b/src/components/dispatch/DispatchFormModal.tsx
@@ -0,0 +1,233 @@
+'use client';
+
+import React, { useState, useEffect, useRef } from 'react';
+import { X, Search } from 'lucide-react';
+import dispatchHistoryService from '@/services/dispatchHistoryService';
+import employeeService from '@/services/employeeService';
+import projectService from '@/services/projectService';
+import type { EmployeeSearchResult, Project } from '@/types';
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  onSaved: () => void;
+  editData?: Record<string, unknown> | null;
+}
+
+export default function DispatchFormModal({ isOpen, onClose, onSaved, editData }: Props) {
+  const [empSearch, setEmpSearch] = useState('');
+  const [empResults, setEmpResults] = useState<EmployeeSearchResult[]>([]);
+  const [selectedEmp, setSelectedEmp] = useState<EmployeeSearchResult | null>(null);
+  const [projects, setProjects] = useState<Project[]>([]);
+  const [selectedProject, setSelectedProject] = useState<Project | null>(null);
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [roleTitle, setRoleTitle] = useState('');
+  const [contributionRate, setContributionRate] = useState(50);
+  const [individualTech, setIndividualTech] = useState('');
+  const [performedTasks, setPerformedTasks] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [showEmpDropdown, setShowEmpDropdown] = useState(false);
+  const debounceRef = useRef<number | undefined>(undefined);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    projectService.getAll().then((res) => {
+      setProjects(res.data || []);
+    }).catch(() => {});
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!editData) return;
+    /* eslint-disable react-hooks/set-state-in-effect */
+    setRoleTitle((editData.roleTitle as string) || '');
+    setContributionRate((editData.contributionRate as number) || 50);
+    setIndividualTech((editData.individualTech as string) || '');
+    setPerformedTasks((editData.performedTasks as string) || '');
+    setStartDate((editData.startDate as string) || '');
+    setEndDate((editData.endDate as string) || '');
+    /* eslint-enable react-hooks/set-state-in-effect */
+  }, [editData]);
+
+  const handleEmpSearch = (val: string) => {
+    setEmpSearch(val);
+    setShowEmpDropdown(true);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = window.setTimeout(() => {
+      if (val.trim().length >= 1) {
+        employeeService.search(val.trim()).then((res) => {
+          setEmpResults(res.data || []);
+        }).catch(() => {});
+      } else {
+        setEmpResults([]);
+      }
+    }, 300);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedEmp || !selectedProject) return;
+    setLoading(true);
+    try {
+      const payload = {
+        employeeId: selectedEmp.empId,
+        projectId: selectedProject.projectId,
+        roleTitle,
+        contributionRate,
+        individualTech,
+        performedTasks,
+        startDate: startDate || undefined,
+        endDate: endDate || undefined,
+      };
+      await dispatchHistoryService.create(payload);
+      onSaved();
+      onClose();
+    } catch {
+      alert('Failed to save dispatch.');
+    }
+    setLoading(false);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onClose}>
+      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-lg mx-4 max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
+        <div className="flex items-center justify-between p-6 border-b border-border">
+          <h3 className="font-outfit font-semibold text-lg text-text-main">New Dispatch</h3>
+          <button onClick={onClose} className="p-1 hover:bg-gray-100 rounded-lg transition-colors">
+            <X className="w-5 h-5 text-text-muted" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+          <div className="relative">
+            <label className="block text-xs font-medium text-text-muted mb-1.5">Employee</label>
+            <div className="relative">
+              <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-text-muted" />
+              <input
+                type="text"
+                value={empSearch}
+                onChange={(e) => handleEmpSearch(e.target.value)}
+                onFocus={() => setShowEmpDropdown(true)}
+                placeholder="Search employee name..."
+                className="w-full pl-9 pr-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+              />
+            </div>
+            {showEmpDropdown && empResults.length > 0 && (
+              <div className="absolute z-10 w-full mt-1 bg-white border border-border rounded-xl shadow-lg max-h-48 overflow-y-auto">
+                {empResults.map((e) => (
+                  <button
+                    key={e.empId}
+                    type="button"
+                    onClick={() => { setSelectedEmp(e); setEmpSearch(e.name); setShowEmpDropdown(false); }}
+                    className="w-full text-left px-3 py-2 text-sm hover:bg-gray-50 transition-colors"
+                  >
+                    {e.name} <span className="text-text-muted text-xs">({e.email})</span>
+                  </button>
+                ))}
+              </div>
+            )}
+            {selectedEmp && !showEmpDropdown && (
+              <p className="text-xs text-primary mt-1">Selected: {selectedEmp.name}</p>
+            )}
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-text-muted mb-1.5">Project</label>
+            <select
+              value={selectedProject?.projectId || ''}
+              onChange={(e) => {
+                const p = projects.find((p) => p.projectId === Number(e.target.value));
+                setSelectedProject(p || null);
+              }}
+              className="w-full px-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+            >
+              <option value="">Select project...</option>
+              {projects.map((p) => (
+                <option key={p.projectId} value={p.projectId}>{p.projectName}</option>
+              ))}
+            </select>
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-text-muted mb-1.5">Role Title</label>
+            <input
+              type="text"
+              value={roleTitle}
+              onChange={(e) => setRoleTitle(e.target.value)}
+              placeholder="e.g. Backend Developer"
+              className="w-full px-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-xs font-medium text-text-muted mb-1.5">Start Date</label>
+              <input
+                type="date"
+                value={startDate}
+                onChange={(e) => setStartDate(e.target.value)}
+                className="w-full px-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-text-muted mb-1.5">End Date</label>
+              <input
+                type="date"
+                value={endDate}
+                onChange={(e) => setEndDate(e.target.value)}
+                className="w-full px-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-text-muted mb-1.5">Contribution Rate: {contributionRate}%</label>
+            <input
+              type="range"
+              min={0}
+              max={100}
+              value={contributionRate}
+              onChange={(e) => setContributionRate(Number(e.target.value))}
+              className="w-full"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-text-muted mb-1.5">Tech Stack</label>
+            <textarea
+              value={individualTech}
+              onChange={(e) => setIndividualTech(e.target.value)}
+              placeholder="e.g. Java, Spring Boot, React..."
+              className="w-full px-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none"
+              rows={2}
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-text-muted mb-1.5">Performed Tasks</label>
+            <textarea
+              value={performedTasks}
+              onChange={(e) => setPerformedTasks(e.target.value)}
+              placeholder="Key tasks and responsibilities..."
+              className="w-full px-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none"
+              rows={3}
+            />
+          </div>
+
+          <div className="flex justify-end gap-3 pt-2">
+            <button type="button" onClick={onClose} className="px-4 py-2 rounded-xl text-sm font-medium text-text-muted hover:bg-gray-100 transition-colors">Cancel</button>
+            <button
+              type="submit"
+              disabled={loading || !selectedEmp || !selectedProject || !roleTitle.trim()}
+              className="px-4 py-2 rounded-xl text-sm font-semibold bg-primary text-white hover:bg-primary-hover transition-colors disabled:opacity-50"
+            >
+              {loading ? 'Saving...' : 'Create Dispatch'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/issues/CollaborationStream.tsx b/src/components/issues/CollaborationStream.tsx
new file mode 100644
index 0000000..6c0779d
--- /dev/null
+++ b/src/components/issues/CollaborationStream.tsx
@@ -0,0 +1,182 @@
+"use client";
+
+import React from 'react';
+import { 
+  User, 
+  Shield, 
+  MessageSquare, 
+  Lock, 
+  CheckCircle,
+  FileCode,
+  Send,
+  Paperclip
+} from 'lucide-react';
+
+/**
+ * CollaborationStream 컴포넌트
+ * 역할별 색상 코딩이 적용된 이슈 타임라인을 표시합니다.
+ */
+export default function CollaborationStream() {
+  const events = [
+    {
+      type: 'report',
+      role: 'field',
+      user: '김현장 (파견원)',
+      time: '14:20',
+      content: '결제 모듈 처리 속도가 현저히 느려지면서 서버가 다운되었습니다. 현재 CPU와 메모리가 임계치에 도달한 상태입니다.',
+      badge: 'Field Observation'
+    },
+    {
+      type: 'event',
+      user: 'System',
+      time: '14:22',
+      content: '본사 전문가 [이전문 아키텍트]가 배정되었습니다.',
+      isEvent: true
+    },
+    {
+      type: 'internal',
+      role: 'hq',
+      user: '이전문 (아키텍트)',
+      time: '14:35',
+      content: '현장 로그를 보니 GC(Garbage Collection)가 빈번하게 발생하고 있습니다. 힙 메모리 설정값이 실제 물리 메모리 대비 낮게 설정된 것 같습니다.',
+      badge: 'Internal Note',
+      isInternal: true
+    },
+    {
+      type: 'official',
+      role: 'hq',
+      user: '이전문 (아키텍트)',
+      time: '14:45',
+      content: '김현장님, 현재 메모리 고갈로 인한 행(Hang) 현상으로 보입니다. 우선 JVM 옵션 중 -Xmx 값을 4G에서 8G로 상향 조정해 주시기 바랍니다. 관련 명령어를 첨부합니다.',
+      code: 'export JAVA_OPTS="-Xms8g -Xmx8g -XX:+UseG1GC"',
+      badge: 'Official Solution'
+    }
+  ];
+
+  return (
+    <div className="flex flex-col h-full bg-slate-900/40 border border-slate-800 rounded-2xl shadow-xl overflow-hidden">
+      
+      {/* Stream Header */}
+      <div className="px-6 py-4 border-b border-slate-800 flex items-center justify-between bg-slate-900/80">
+        <div className="flex items-center space-x-2">
+          <MessageSquare className="w-4 h-4 text-indigo-400" />
+          <h3 className="text-xs font-bold text-slate-300 uppercase tracking-widest">Activity Stream</h3>
+        </div>
+        <div className="flex items-center space-x-4">
+          <div className="flex items-center space-x-1.5 text-[10px] font-bold text-slate-500 uppercase">
+            <div className="w-2 h-2 rounded-full bg-indigo-500"></div>
+            <span>HQ</span>
+          </div>
+          <div className="flex items-center space-x-1.5 text-[10px] font-bold text-slate-500 uppercase">
+            <div className="w-2 h-2 rounded-full bg-emerald-500"></div>
+            <span>Field</span>
+          </div>
+          <div className="flex items-center space-x-1.5 text-[10px] font-bold text-slate-500 uppercase">
+            <div className="w-2 h-2 rounded-full bg-slate-500"></div>
+            <span>Internal</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Stream Body */}
+      <div className="flex-1 overflow-y-auto p-6 space-y-8 custom-scrollbar">
+        {events.map((ev, i) => (
+          <div key={i} className={`relative pl-8 ${ev.isInternal ? 'opacity-70' : ''}`}>
+            {/* Timeline Line */}
+            {i !== events.length - 1 && (
+              <div className="absolute left-[15px] top-8 bottom-[-32px] w-[2px] bg-slate-800"></div>
+            )}
+            
+            {/* Timeline Node */}
+            <div className={`absolute left-0 top-0 w-8 h-8 rounded-full flex items-center justify-center z-10 border-2 shadow-lg ${
+              ev.isEvent ? 'bg-slate-800 border-slate-700' :
+              ev.role === 'hq' ? (ev.isInternal ? 'bg-slate-800 border-slate-700' : 'bg-indigo-600 border-indigo-400') :
+              'bg-emerald-600 border-emerald-400'
+            }`}>
+              {ev.isEvent ? <CheckCircle className="w-4 h-4 text-slate-400" /> :
+               ev.isInternal ? <Lock className="w-4 h-4 text-slate-400" /> :
+               <User className="w-4 h-4 text-white" />}
+            </div>
+
+            {/* Content Card */}
+            <div className={`rounded-2xl p-5 border shadow-sm ${
+              ev.isEvent ? 'bg-transparent border-transparent' :
+              ev.isInternal ? 'bg-slate-800/40 border-slate-700 text-slate-400' :
+              ev.role === 'hq' ? 'bg-indigo-900/20 border-indigo-500/20 text-slate-200' :
+              'bg-emerald-900/20 border-emerald-500/20 text-slate-200'
+            }`}>
+              {ev.isEvent ? (
+                <div className="text-sm font-medium text-slate-500 flex items-center">
+                  <span className="mr-2">{ev.content}</span>
+                  <span className="text-[10px] font-mono">{ev.time}</span>
+                </div>
+              ) : (
+                <>
+                  <div className="flex items-center justify-between mb-3">
+                    <div className="flex items-center space-x-2">
+                      <span className="text-sm font-bold text-white">{ev.user}</span>
+                      <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded uppercase tracking-wider ${
+                        ev.isInternal ? 'bg-slate-700 text-slate-400' :
+                        ev.role === 'hq' ? 'bg-indigo-500/20 text-indigo-400' :
+                        'bg-emerald-500/20 text-emerald-400'
+                      }`}>
+                        {ev.badge}
+                      </span>
+                    </div>
+                    <span className="text-[10px] font-mono text-slate-500">{ev.time}</span>
+                  </div>
+                  <p className="text-sm leading-relaxed mb-4">{ev.content}</p>
+                  
+                  {ev.code && (
+                    <div className="bg-slate-950 rounded-xl p-4 border border-slate-800 font-mono text-xs text-indigo-300 relative group">
+                      <div className="absolute top-2 right-2 p-1.5 hover:bg-slate-800 rounded text-slate-500 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <FileCode className="w-3.5 h-3.5" />
+                      </div>
+                      <code>{ev.code}</code>
+                    </div>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Stream Input */}
+      <div className="p-4 bg-slate-900/80 border-t border-slate-800 backdrop-blur-md">
+        <div className="max-w-4xl mx-auto flex items-end space-x-4">
+          <div className="flex-1 bg-slate-950 border border-slate-800 rounded-2xl p-3 focus-within:border-indigo-500/50 transition-colors shadow-inner">
+            <textarea 
+              placeholder="답변을 입력하거나 파일을 드래그하세요..."
+              className="w-full bg-transparent text-sm text-slate-200 focus:outline-none resize-none min-h-[40px] max-h-[200px]"
+              rows={2}
+            >

+ + +

+ +

+ Internal Note + + +

+ +

+ ); +} diff --git a/src/components/issues/DiagnosticCockpit.tsx b/src/components/issues/DiagnosticCockpit.tsx new file mode 100644 index 0000000..8d4aa8e --- /dev/null +++ b/src/components/issues/DiagnosticCockpit.tsx @@ -0,0 +1,102 @@ +"use client"; + +import React from 'react'; +import { + Activity, + Cpu, + Database, + Wifi, + Terminal, + Filter, + Maximize2 +} from 'lucide-react'; + +/** + * DiagnosticCockpit 컴포넌트 + * 현장의 실시간 시스템 메트릭과 에러 로그를 시각화합니다. + */ +export default function DiagnosticCockpit() { + const metrics = [ + { label: 'CPU Usage', value: 84, color: 'text-orange-500', bg: 'bg-orange-500/10', bar: 'bg-orange-500', icon: Cpu }, + { label: 'Memory', value: 92, color: 'text-red-500', bg: 'bg-red-500/10', bar: 'bg-red-500', icon: Database }, + { label: 'Latency', value: 124, unit: 'ms', color: 'text-yellow-500', bg: 'bg-yellow-500/10', bar: 'bg-yellow-500', icon: Wifi }, + ]; + + const logs = [ + { time: '14:20:12', type: 'ERROR', message: 'java.lang.OutOfMemoryError: Java heap space' }, + { time: '14:20:15', type: 'WARN', message: 'GC overhead limit exceeded' }, + { time: '14:21:03', type: 'INFO', message: 'Connection pool established (32/100)' }, + { time: '14:22:10', type: 'ERROR', message: 'Fail to process transaction [ID: TX-9002]' }, + { time: '14:22:45', type: 'DEBUG', message: 'Snapshot thread started' }, + ]; + + return ( +

+ + {/* Metrics Widgets */} +

+ {metrics.map((m, i) => ( +

+ +

+ {m.label} +

+ + {m.value}{m.unit || '%'} + +

+ ))} +

+ + {/* Log Viewer */} +

+ +

Field Diagnostic Logs

+ + +

+ +

+ {logs.map((log, i) => ( +

+ [{log.time}] + + {log.type} + + {log.message} +

+ ))} +

+ _ + Tailing logs from site... +

+ +

+ ); +} diff --git a/src/components/issues/KanbanBoard.tsx b/src/components/issues/KanbanBoard.tsx new file mode 100644 index 0000000..29aac59 --- /dev/null +++ b/src/components/issues/KanbanBoard.tsx @@ -0,0 +1,110 @@ +'use client'; + +import React from 'react'; +import { AlertCircle, Clock, CheckCircle2, User } from 'lucide-react'; + +export interface TicketCardData { + ticketId: number; + title: string; + projectName?: string; + requesterName?: string; + assigneeName?: string | null; + priority: string; + category: string; + status: string; + dueDate?: string | null; + isImminent?: boolean; +} + +const statusLabel: Record = { + OPEN: { color: 'text-status-open-text', bg: 'bg-status-open-bg', label: 'Open' }, + ASSIGNED: { color: 'text-blue-600', bg: 'bg-blue-50', label: 'Assigned' }, + IN_PROGRESS: { color: 'text-status-pending-text', bg: 'bg-status-pending-bg', label: 'In Progress' }, + RESOLVED: { color: 'text-status-resolved-text', bg: 'bg-status-resolved-bg', label: 'Resolved' }, + CLOSED: { color: 'text-status-closed-text', bg: 'bg-status-closed-bg', label: 'Closed' }, +}; + +const priorityConfig: Record = { + CRITICAL: { color: 'text-status-critical-text', bg: 'bg-status-critical-bg', label: '긴급' }, + HIGH: { color: 'text-status-pending-text', bg: 'bg-status-pending-bg', label: '높음' }, + NORMAL: { color: 'text-status-open-text', bg: 'bg-status-open-bg', label: '보통' }, + LOW: { color: 'text-text-muted', bg: 'bg-gray-100', label: '낮음' }, +}; + +const categoryLabel: Record = { + BUG: '버그', + FEATURE: '기능', + SUPPORT: '기술지원', + QA: 'QA', +}; + +export default function TicketCard({ ticket, onClick }: { ticket: TicketCardData; onClick?: () => void }) { + const pri = priorityConfig[ticket.priority] || priorityConfig.NORMAL; + const stat = statusLabel[ticket.status]; + + return ( +

+ + {pri.label} + + {stat && ( + + {stat.label} + + )} +

+ + {categoryLabel[ticket.category] || ticket.category} + +

+ +

+ {ticket.title} +

+ + {ticket.projectName && ( +

{ticket.projectName}

+ )} + +

+ + {ticket.assigneeName || ticket.requesterName || '-'} +

+ {ticket.dueDate && ( +

+ {ticket.isImminent ? : } + {new Date(ticket.dueDate).toLocaleDateString('ko-KR', { month: 'short', day: 'numeric' })} +

+ )} +

+ ); +} + +export function KanbanColumn({ title, count, color, children }: { title: string; count: number; color: string; children: React.ReactNode }) { + return ( +

{title}

+ {count} +

+ {count === 0 ? ( +

+ +

No tickets

+ ) : ( + children + )} +

+ ); +} diff --git a/src/components/issues/SopRoadmap.tsx b/src/components/issues/SopRoadmap.tsx new file mode 100644 index 0000000..18be5ba --- /dev/null +++ b/src/components/issues/SopRoadmap.tsx @@ -0,0 +1,109 @@ +"use client"; + +import React, { useState } from 'react'; +import { + ClipboardList, + CheckCircle2, + Circle, + ArrowRight, + Lightbulb, + AlertTriangle +} from 'lucide-react'; + +/** + * SopRoadmap 컴포넌트 + * 전문가가 제시하는 단계별 해결 절차와 진행률을 표시합니다. + */ +export default function SopRoadmap() { + const [steps, setSteps] = useState([ + { id: 1, title: 'JVM Heap 설정 확인', status: 'completed', description: '현재 설정된 -Xmx, -Xms 값을 서버 로그에서 확인' }, + { id: 2, title: 'JVM 옵션 상향 조정', status: 'in-progress', description: '기존 4G에서 8G로 변경 후 서비스 재기동' }, + { id: 3, title: '재기동 후 GC 로그 모니터링', status: 'pending', description: 'Full GC 발생 주기 및 처리 시간 확인' }, + { id: 4, title: '최종 안정성 검증', status: 'pending', description: '24시간 동안 메모리 누수 발생 여부 체크' }, + ]); + + const completedCount = steps.filter(s => s.status === 'completed').length; + const progress = Math.round((completedCount / steps.length) * 100); + + return ( +

+ + {/* Progress Card */} +

+ +

SOP Roadmap

+ + {progress}% Done + +

{completedCount} of {steps.length} steps completed

+ + {/* Step List */} +

+ {steps.map((step, i) => ( +

+ {step.status === 'completed' ? ( + + ) : step.status === 'in-progress' ? ( +

+ ) : ( + + )} +

+ {step.title} +

+ {step.status !== 'completed' && ( +

{step.description}

+ )} + + {step.status === 'in-progress' && ( + + )} +

+ ))} +

+ + {/* Expert Tips */} +

+ + Safety Reminder +

+ JVM 설정을 변경할 때는 서비스 가용성에 영향을 줄 수 있으므로, 반드시 **운영 시간 이후(PM 10:00)**에 작업을 진행해 주십시오. +

+ +

+ ); +} diff --git a/src/components/itam/AssetActionModal.tsx b/src/components/itam/AssetActionModal.tsx new file mode 100644 index 0000000..94eeca6 --- /dev/null +++ b/src/components/itam/AssetActionModal.tsx @@ -0,0 +1,232 @@ +'use client'; + +import React, { useState } from 'react'; +import { + X, + Plus, + ArrowUpRight, + ArrowDownLeft, + Wrench, + Camera, + Upload, + CheckCircle2, + AlertCircle +} from 'lucide-react'; + +interface AssetActionModalProps { + isOpen: boolean; + onClose: () => void; + asset?: any; +} + +/** + * IT 자산 통합 업무 처리 모달 + * 등록, 반입, 반출, 정비를 한 곳에서 처리합니다. + */ +export default function AssetActionModal({ isOpen, onClose, asset }: AssetActionModalProps) { + const [activeTab, setActiveTab] = useState<'checkout' | 'checkin' | 'maintenance' | 'register'>('checkout'); + + if (!isOpen) return null; + + const tabs = [ + { id: 'checkout', label: '반출 (배정)', icon: ArrowUpRight, color: 'text-orange-500 bg-orange-50' }, + { id: 'checkin', label: '반입 (회수)', icon: ArrowDownLeft, color: 'text-blue-500 bg-blue-50' }, + { id: 'maintenance', label: '정비 (수리)', icon: Wrench, color: 'text-purple-500 bg-purple-50' }, + { id: 'register', label: '신규 등록', icon: Plus, color: 'text-emerald-500 bg-emerald-50' }, + ]; + + return ( +

+ {/* Backdrop */} +

+ + {/* Modal Content */} +

+ + {/* Modal Header */} +

장비 업무 처리

자산의 상태 변경 및 이동 이력을 기록합니다.

+ +

+ + {/* Tabs */} +

+ {tabs.map((tab) => ( + + ))} +

+ + {/* Content Area */} +

+ + {/* Selected Asset Info (Summary) */} + {asset && ( +

+ +

{asset.id}

{asset.model}

현재 상태

+ + {asset.status} + +

+ )} + + {/* Form Content Based on Tab */} +

+ {activeTab === 'checkout' && ( + <> +

+ 대상 프로젝트 + +

+ 사용자 (파견원) 검색 +

+ +

김코딩

BACKEND · 삼성페이 SI

이현장

DBA · LG CNS SM

+ 지급 상태 코멘트 + +

+ 반출 예정일 + +

+ + )} + + {activeTab === 'checkin' && ( + <> +

+ 반입 사유 + +

+ 반납 상태 코멘트 + +

+ + )} + + {activeTab === 'maintenance' && ( + <> +

+ 증상 및 정비 사유 + +

+ 정비 업체 + +

+ 예상 완료일 + +

+ + )} + + {activeTab === 'register' && ( + <> +

+ 모델명 + +

+ 자산 유형 + +

+ 시리얼 번호 + +

+ + )} + + {/* Simple Photo Record Area (단순 기록용 사진 첨부) */} +

+ 상태 기록 사진 (단순 참고용) +

+ +

사진을 드래그하거나 클릭하여 첨부

+ +

+ 촬영하기 +

+ + {/* Modal Footer */} +

+ + +

+ ); +} diff --git a/src/components/itam/AssetInventory.tsx b/src/components/itam/AssetInventory.tsx new file mode 100644 index 0000000..51ebf20 --- /dev/null +++ b/src/components/itam/AssetInventory.tsx @@ -0,0 +1,220 @@ +'use client'; + +import React, { useState } from 'react'; +import { + Laptop, + Monitor, + Smartphone, + Server, + User, + Calendar, + MoreVertical, + ExternalLink, + History, + ArrowUpRight, + ArrowDownLeft, + Wrench, + ChevronRight, + Image as ImageIcon, + X, + QrCode +} from 'lucide-react'; +import { useCommonCodes } from '@/hooks/useCommonCodes'; +import AssetLabel from './AssetLabel'; +import Link from 'next/link'; + +/** + * 자산 인벤토리 리스트 컴포넌트 + * IT 자산의 상세 목록을 출력하며 개별 액션을 제공합니다. + */ +export default function AssetInventory({ equipment, onRefresh, currentPage, totalPages, onPageChange }: { equipment: import('@/types').Equipment[]; onRefresh: () => void; currentPage?: number; totalPages?: number; onPageChange?: (page: number) => void }) { + const [labelAsset, setLabelAsset] = useState(null); + const { codes: equipmentStatusCodes, loading: statusCodesLoading } = useCommonCodes('EQUIPMENT_STATUS'); + + const statusLabel = statusCodesLoading ? {} : Object.fromEntries(equipmentStatusCodes.map((c) => [c.codeValue, c.codeName])); + const getTypeIcon = (type: string) => { + switch (type) { + case 'LAPTOP': return ; + case 'SERVER': return ; + case 'MONITOR': return ; + default: return ; + } + }; + + const getStatusStyle = (status: string) => { + switch (status) { + case 'IN_USE': return 'bg-green-50 text-green-600 border-green-100'; + case 'AVAILABLE': return 'bg-blue-50 text-blue-600 border-blue-100'; + case 'REPAIRING': return 'bg-orange-50 text-orange-600 border-orange-100'; + case 'RETIRED': return 'bg-gray-100 text-gray-500 border-gray-200'; + default: return 'bg-gray-50 text-gray-600 border-gray-100'; + } + }; + + const getStatusDot = (status: string) => { + switch (status) { + case 'IN_USE': return 'bg-green-500'; + case 'AVAILABLE': return 'bg-blue-500'; + case 'REPAIRING': return 'bg-orange-500'; + default: return 'bg-gray-400'; + } + }; + + return ( +

+ {/* Desktop table */} +

+ + + + + + + + + + + + + {equipment.map((asset) => ( + + + + + + + + + ))} + +

Photo	Asset ID & Type	Model & Serial	Project / User	Status	Context Actions
+ {(() => { + let imgs: { url: string }[] = []; + if (asset.images) { + try { imgs = typeof asset.images === 'string' ? JSON.parse(asset.images) : asset.images; } catch {} + } + return imgs.length > 0 ? ( + + + + ) : ( + + + + ); + })()} +	+ + + {getTypeIcon(asset.equipmentType)} + + + {asset.assetCode} + {asset.equipmentType} + + +	+ {asset.modelName} + {asset.serialNumber} +	+ {asset.manufacturer} + Purchased: {asset.purchaseDate} +	+ + + {statusLabel[asset.status as keyof typeof statusLabel] \|\| asset.status} + +	+ + {asset.status === 'AVAILABLE' ? ( + + + + ) : asset.status === 'IN_USE' ? ( + + + + ) : null} + + + + + + +

Photo

Asset ID & Type

Model & Serial

Project / User

Status

Context Actions

+ {(() => { + let imgs: { url: string }[] = []; + if (asset.images) { + try { imgs = typeof asset.images === 'string' ? JSON.parse(asset.images) : asset.images; } catch {} + } + return imgs.length > 0 ? ( +

+ ) : ( +

+ +

+ ); + })()} +

+ {getTypeIcon(asset.equipmentType)} +

{asset.assetCode}

{asset.equipmentType}

{asset.modelName}

{asset.serialNumber}

{asset.manufacturer}

Purchased: {asset.purchaseDate}

+ +

+ {statusLabel[asset.status as keyof typeof statusLabel] || asset.status} + +

+ {asset.status === 'AVAILABLE' ? ( + + + + ) : asset.status === 'IN_USE' ? ( + + + + ) : null} + + + + + +

+ + {/* Mobile cards */} +

+ {equipment.map((asset) => ( +

+ {(() => { + let imgs: {url:string}[] = []; + try { imgs = typeof asset.images === 'string' ? JSON.parse(asset.images) : (asset.images || []); } catch {} + return imgs.length > 0 ? ( +

+ ) : ( +

{getTypeIcon(asset.equipmentType)}

+ ); + })()} +

{asset.modelName}

{asset.serialNumber}

+ + {statusLabel[asset.status as keyof typeof statusLabel] || asset.status} + +

Code: {asset.assetCode}

Type: {asset.equipmentType}

Maker: {asset.manufacturer}

Date: {asset.purchaseDate}

+ + {asset.status === 'AVAILABLE' ? ( + Assign + ) : null} +

+ ))} +

+ + {/* Pagination - shows on both mobile and desktop */} +

Showing {equipment.length} assets

+ {totalPages !== undefined && totalPages > 1 && ( +

+ {Array.from({ length: Math.min(totalPages, 10) }, (_, i) => i).map((p) => ( + + ))} +

+ )} +

+ {labelAsset && ( + setLabelAsset(null)} + /> + )} +

+ ); +} diff --git a/src/components/itam/AssetLabel.tsx b/src/components/itam/AssetLabel.tsx new file mode 100644 index 0000000..aba197b --- /dev/null +++ b/src/components/itam/AssetLabel.tsx @@ -0,0 +1,87 @@ +'use client'; + +import React, { useEffect, useRef } from 'react'; +import QRCode from 'qrcode'; + +interface Props { + assetCode: string; + modelName: string; + serialNumber: string; + manufacturer: string; + purchaseDate: string; + onClose?: () => void; +} + +export default function AssetLabel({ assetCode, modelName, serialNumber, manufacturer, purchaseDate, onClose }: Props) { + const canvasRef = useRef(null); + + useEffect(() => { + if (canvasRef.current) { + QRCode.toCanvas(canvasRef.current, assetCode, { + width: 160, + margin: 1, + color: { dark: '#1e293b', light: '#ffffff' }, + }); + } + }, [assetCode]); + + const handlePrint = async () => { + const w = window.open('', '_blank'); + if (!w) return; + + // Generate QR as data URL + const qrCanvas = document.createElement('canvas'); + qrCanvas.width = 160; + qrCanvas.height = 160; + await QRCode.toCanvas(qrCanvas, assetCode, { width: 160, margin: 1 }); + const qrDataUrl = qrCanvas.toDataURL(); + + w.document.write(` + +

SR System

${assetCode}

+ Model: ${modelName}
+ S/N: ${serialNumber}
+ Maker: ${manufacturer}
+ Date: ${purchaseDate} +

+ + + `); + w.document.close(); + }; + + return ( +

e.stopPropagation()}> +

SR System · Asset Label

+ ); +} diff --git a/src/components/itam/AssetStatusOverview.tsx b/src/components/itam/AssetStatusOverview.tsx new file mode 100644 index 0000000..f7533a8 --- /dev/null +++ b/src/components/itam/AssetStatusOverview.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import { Box, CheckCircle2, Wrench, History, TrendingUp } from 'lucide-react'; + +export default function AssetStatusOverview({ + summary, + filter, + onFilterChange, +}: { + summary: Record; + filter: string; + onFilterChange: (f: string) => void; +}) { + const stats = [ + { label: 'Total Assets', value: summary.ALL || 0, icon: Box, color: 'text-primary bg-indigo-50', key: 'ALL' }, + { label: 'In Use', value: summary.IN_USE || 0, icon: CheckCircle2, color: 'text-green-600 bg-green-50', key: 'IN_USE' }, + { label: 'Available', value: summary.AVAILABLE || 0, icon: History, color: 'text-blue-600 bg-blue-50', key: 'AVAILABLE' }, + { label: 'Under Repair', value: summary.REPAIRING || 0, icon: Wrench, color: 'text-orange-600 bg-orange-50', key: 'REPAIRING' }, + ]; + + return ( +

+ {stats.map((stat) => ( + + ))} +

+ ); +} diff --git a/src/components/itam/AssetVoucherCard.tsx b/src/components/itam/AssetVoucherCard.tsx new file mode 100644 index 0000000..ac763ac --- /dev/null +++ b/src/components/itam/AssetVoucherCard.tsx @@ -0,0 +1,138 @@ +'use client'; + +import React from 'react'; +import { + FileText, + ShieldCheck, + Calendar, + User, + MapPin, + ArrowUpRight, + ArrowDownLeft, + PenTool +} from 'lucide-react'; + +interface AssetVoucherCardProps { + type: 'CHECK_OUT' | 'CHECK_IN'; + id: string; + date: string; + project: string; + user: string; + assets: any[]; + signature?: string; +} + +/** + * 디지털 전표(Voucher) UI 컴포넌트 + * 반입/반출 증빙 자료를 시각화합니다. + */ +export default function AssetVoucherCard({ + type, + id, + date, + project, + user, + assets, + signature +}: AssetVoucherCardProps) { + const isCheckout = type === 'CHECK_OUT'; + + return ( +

+ {/* Voucher Header */} +

+ +

Digital Voucher

{id}

+ {isCheckout ? 'CHECK-OUT (반출/배정)' : 'CHECK-IN (반입/회수)'} +

+ + + {date} + +

+ + {/* Voucher Body */} +

+ {/* Info Grid */} +

대상 프로젝트

{project}

책임 사용자

{user}

+ + {/* Asset List */} +

대상 자산 목록 ({assets.length}건)

+ {assets.map((asset, i) => ( +

+ {isCheckout ? : } +

{asset.model}

{asset.sn}

+ + {asset.status || 'Normal'} + +

+ ))} +

+ + {/* Declaration & Signature */} +

+ + 인수/반납 확인 완료 +

+ 본 전표에 기재된 장비의 {isCheckout ? '인수' : '반납'}를 확인하며, {isCheckout ? '파손 및 분실 시 회사 규정에 따른 책임' : '재고 복귀'}를 승인합니다. +

+ {signature ? ( + {signature} + ) : ( + + )} +

Signature

{user}

+ + {/* Footer Branding */} +

SR-SYSTEM ITAM INFRA

+ + +

+ ); +} diff --git a/src/components/itam/BarcodeScanner.tsx b/src/components/itam/BarcodeScanner.tsx new file mode 100644 index 0000000..38de013 --- /dev/null +++ b/src/components/itam/BarcodeScanner.tsx @@ -0,0 +1,145 @@ +'use client'; + +import React, { useEffect, useRef, useState, useCallback } from 'react'; +import { Html5Qrcode } from 'html5-qrcode'; +import { X, Camera, AlertCircle, ZoomIn, ZoomOut } from 'lucide-react'; + +interface BarcodeScannerProps { + onScan: (value: string) => void; + onClose: () => void; +} + +export default function BarcodeScanner({ onScan, onClose }: BarcodeScannerProps) { + const containerRef = useRef(null); + const [error, setError] = useState(''); + const [zoom, setZoom] = useState(1); + const [zoomMax, setZoomMax] = useState(3); + const [supportsZoom, setSupportsZoom] = useState(false); + const initializedRef = useRef(false); + const scannerRef = useRef(null); + const trackRef = useRef(null); + + const applyZoom = useCallback(async (level: number, video?: HTMLVideoElement | null) => { + const v = video || (document.querySelector('#sr-barcode-scanner video') as HTMLVideoElement | null); + if (v && v.srcObject) { + if (trackRef.current && supportsZoom) { + try { await trackRef.current.applyConstraints({ advanced: [{ zoom: level }] as any }); } catch { } + } + (v as HTMLElement).style.transform = `scale(${level})`; + } + }, [supportsZoom]); + + useEffect(() => { + // StrictMode guard: skip second effect run + if (initializedRef.current) return; + initializedRef.current = true; + + const el = containerRef.current; + if (!el) return; + + const id = 'sr-barcode-scanner'; + el.id = id; + el.innerHTML = ''; + + let cancelled = false; + const s = new Html5Qrcode(id); + scannerRef.current = s; + + const startWithFacing = async (facingMode: 'environment' | 'user') => { + await s.start( + { facingMode }, + { fps: 30 }, + (decodedText) => { + if (cancelled) return; + try { s.stop(); } catch { } + onScan(decodedText); + }, + () => {} + ); + // Set up zoom after camera starts + setTimeout(() => { + if (cancelled) return; + const video = el.querySelector('video'); + if (video && video.srcObject) { + (video as HTMLElement).style.transition = 'transform 0.2s'; + (video as HTMLElement).style.transformOrigin = 'center center'; + const track = (video.srcObject as MediaStream).getVideoTracks()[0]; + if (track) { + trackRef.current = track; + const caps = track.getCapabilities() as any; + if (caps?.zoom) { setSupportsZoom(true); setZoomMax(caps.zoom.max || 3); } + } + } + }, 300); + }; + + startWithFacing('environment').catch(() => { + return startWithFacing('user'); + }).catch((err: unknown) => { + if (cancelled) return; + const msg = err instanceof Error ? err.message : String(err); + const isIOS = navigator.userAgent.includes('iPhone') || navigator.userAgent.includes('iPad'); + if (msg.includes('NotAllowed') || msg.includes('Permission')) { + setError(isIOS ? 'Camera denied. Settings → Safari → Camera → Allow.' : 'Camera permission denied.'); + } else if (msg.includes('NotFound')) { + setError('No camera found on this device.'); + } else { + setError(msg); + } + }); + + return () => { + cancelled = true; + try { s.stop(); } catch { } + }; + }, []); + + const handleZoomIn = () => { + const newZoom = Math.min(zoom + 0.5, zoomMax); + setZoom(newZoom); + applyZoom(newZoom); + }; + const handleZoomOut = () => { + const newZoom = Math.max(zoom - 0.5, 0.5); + setZoom(newZoom); + applyZoom(newZoom); + }; + + return ( +

e.stopPropagation()}> +

+ + Scan Barcode +

+ +

+ + {error ? ( +

+ +

{error}

+ +

+ ) : ( + <> +

+ + {zoom.toFixed(1)}x + +

Position the barcode or QR code within the scanning area

+ + )} +

+ ); +} diff --git a/src/components/itam/BatchRegistrationView.tsx b/src/components/itam/BatchRegistrationView.tsx new file mode 100644 index 0000000..4483128 --- /dev/null +++ b/src/components/itam/BatchRegistrationView.tsx @@ -0,0 +1,300 @@ +'use client'; + +import React, { useState } from 'react'; +import { + Download, + Upload, + FileSpreadsheet, + AlertTriangle, + CheckCircle2, + RefreshCcw, + Zap +} from 'lucide-react'; +import equipmentService from '@/services/equipmentService'; +import type { Equipment, EquipmentType } from '@/types'; + +interface ParsedItem { + row: number; + data: Partial; + error?: string; +} + +interface ValidationResult { + row: number; + status: 'Error' | 'Warning' | 'Success'; + field: string; + value: string; + message: string; +} + +/** + * 대량 등록 (엑셀) 뷰 컴포넌트 + * 엑셀 업로드 및 데이터 유효성 검증 프로세스를 제공합니다. + */ +export default function BatchRegistrationView() { + const [isUploaded, setIsUploaded] = useState(false); + const [inputText, setInputText] = useState(''); + const [parsedItems, setParsedItems] = useState([]); + const [validationResults, setValidationResults] = useState([]); + const [isProcessing, setIsProcessing] = useState(false); + const [successCount, setSuccessCount] = useState(0); + const [errorCount, setErrorCount] = useState(0); + + const typeMapping: Record = { + 'LAPTOP': 'LAPTOP', + 'MONITOR': 'MONITOR', + 'TEST_DEVICE': 'TEST_DEVICE', + 'ACCESSORY': 'ACCESSORY', + }; + + const parseInput = () => { + const lines = inputText.trim().split('\n'); + const items: ParsedItem[] = []; + const errors: ValidationResult[] = []; + + lines.forEach((line, index) => { + const row = index + 1; + const parts = line.split(',').map(p => p.trim()); + + if (parts.length < 7) { + errors.push({ + row, + status: 'Error', + field: 'Format', + value: line, + message: '필수 항목이 부족합니다 (7 개 항목 필요)', + }); + items.push({ row, data: {}, error: 'Invalid format' }); + return; + } + + const [equipmentType, manufacturer, modelName, serialNumber, assetCode, location, purchaseDate] = parts; + + if (!typeMapping[equipmentType.toUpperCase()]) { + errors.push({ + row, + status: 'Error', + field: 'EquipmentType', + value: equipmentType, + message: '허용되지 않는 장비 유형입니다 (LAPTOP, MONITOR, TEST_DEVICE, ACCESSORY)', + }); + items.push({ row, data: {}, error: 'Invalid type' }); + return; + } + + items.push({ + row, + data: { + equipmentType: typeMapping[equipmentType.toUpperCase()], + manufacturer, + modelName, + serialNumber, + assetCode, + specifications: { location }, + status: 'AVAILABLE', + purchaseDate, + warrantyExpDate: '', + }, + }); + + if (errors.length === 0) { + errors.push({ + row, + status: 'Success', + field: 'All', + value: '-', + message: '정상', + }); + } + }); + + setParsedItems(items); + setValidationResults(errors); + setIsUploaded(true); + }; + + const handleBatchRegister = async () => { + setIsProcessing(true); + setSuccessCount(0); + setErrorCount(0); + + const validItems = parsedItems.filter(item => !item.error); + + for (const item of validItems) { + try { + await equipmentService.create(item.data); + setSuccessCount(prev => prev + 1); + } catch (error: any) { + setErrorCount(prev => prev + 1); + setValidationResults(prev => prev.map(res => + res.row === item.row + ? { ...res, status: 'Error', message: error.response?.data?.message || '등록 실패' } + : res + )); + } + } + + setIsProcessing(false); + }; + + const handleReset = () => { + setIsUploaded(false); + setInputText(''); + setParsedItems([]); + setValidationResults([]); + setSuccessCount(0); + setErrorCount(0); + }; + + return ( +

+ + {/* Step 1: Template & Upload */} +

+ {/* Template Card */} +

+ +

1. 템플릿 양식 다운로드

+ 정해진 엑셀 양식에 맞춰 데이터를 작성해야 오류 없이 일괄 등록이 가능합니다. 필수 입력 항목인 [모델명, 자산유형, 시리얼] 을 반드시 포함해 주세요. +

+ +

+ + {/* Upload Card - Textarea Input */} +

+ +

2. 데이터 입력

+ 각 줄마다 장비를 입력하세요: type,manufacturer,model,serial,assetCode,location,purchaseDate +

setInputText(e.target.value)}
+              placeholder={`LAPTOP,Samsung,NT500,SN-001,AST-2025-001,Seoul,2025-01-15
+MONITOR,LG,27UP850,SN-002,AST-2025-002,Busan,2025-02-20`}
+              className="w-full h-40 p-4 bg-slate-50 border border-slate-200 rounded-xl text-xs font-mono focus:ring-2 focus:ring-primary/20 outline-none resize-none"
+            />
+          </div>
+          <button
+            onClick={parseInput}
+            disabled={!inputText.trim()}
+            className="mt-4 flex items-center justify-center w-full py-4 bg-primary text-white rounded-2xl text-xs font-bold hover:bg-primary-hover transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            <CheckCircle2 className="w-4 h-4 mr-2" />
+            데이터 파싱 및 검증
+          </button>
+        </div>
+      </div>
+
+      {/* Step 2: Validation Results (Visible only after upload) */}
+      {isUploaded && (
+        <div className="bg-white rounded-[32px] border border-slate-200 shadow-lg overflow-hidden animate-in slide-in-from-top-4 duration-500">
+          <div className="px-8 py-6 border-b border-slate-100 bg-slate-50/50 flex items-center justify-between">
+            <div className="flex items-center space-x-4">
+              <h3 className="text-sm font-bold text-slate-900 flex items-center">
+                <CheckCircle2 className="w-4 h-4 mr-2 text-emerald-500" />
+                데이터 유효성 검증 결과
+              </h3>
+              <div className="flex items-center space-x-2">
+                <span className="px-2 py-0.5 bg-red-50 text-red-500 text-[10px] font-bold rounded border border-red-100">
+                  Error {validationResults.filter(r => r.status === 'Error').length}
+                </span>
+                <span className="px-2 py-0.5 bg-emerald-50 text-emerald-500 text-[10px] font-bold rounded border border-emerald-100">
+                  Success {validationResults.filter(r => r.status === 'Success').length}
+                </span>
+                {successCount > 0 && (
+                  <span className="px-2 py-0.5 bg-blue-50 text-blue-500 text-[10px] font-bold rounded border border-blue-100">
+                    Registered {successCount}
+                  </span>
+                )}
+              </div>
+            </div>
+            <button onClick={handleReset} className="flex items-center text-[11px] font-bold text-slate-400 hover:text-slate-600 transition-colors">
+              <RefreshCcw className="w-3.5 h-3.5 mr-1.5" />
+              다시 업로드
+            </button>
+          </div>
+
+          <div className="overflow-x-auto">
+            <table className="w-full text-left border-collapse">
+              <thead>
+                <tr className="bg-slate-50 border-b border-slate-100 text-[10px] font-bold text-slate-400 uppercase tracking-widest">
+                  <th className="px-8 py-4">행 (Row)</th>
+                  <th className="px-8 py-4">검증 상태</th>
+                  <th className="px-8 py-4">대상 필드</th>
+                  <th className="px-8 py-4">입력 값</th>
+                  <th className="px-8 py-4">메시지</th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-100">
+                {validationResults.map((res, idx) => (
+                  <tr key={idx} className="hover:bg-slate-50/50 transition-colors">
+                    <td className="px-8 py-4 text-xs font-mono font-bold text-slate-500">{res.row}</td>
+                    <td className="px-8 py-4">
+                      <span className={`inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold border ${
+                        res.status === 'Error' ? 'bg-red-50 text-red-500 border-red-100' :
+                        res.status === 'Warning' ? 'bg-orange-50 text-orange-500 border-orange-100' :
+                        'bg-emerald-50 text-emerald-500 border-emerald-100'
+                      }`}>
+                        {res.status === 'Error' && <AlertTriangle className="w-3 h-3 mr-1.5" />}
+                        {res.status}
+                      </span>
+                    </td>
+                    <td className="px-8 py-4 text-xs font-bold text-slate-700">{res.field}</td>
+                    <td className="px-8 py-4 text-xs font-mono text-slate-500">{res.value}</td>
+                    <td className="px-8 py-4 text-xs text-slate-600">{res.message}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          <div className="px-8 py-6 bg-slate-50/50 border-t border-slate-100 flex items-center justify-between">
+            <p className="text-xs text-slate-500">
+              <span className="font-bold text-red-500">주의:</span> 오류가 있는 행을 모두 수정해야 일괄 등록이 가능합니다.
+            </p>
+            <button 
+              onClick={handleBatchRegister}
+              disabled={isProcessing || validationResults.some(r => r.status === 'Error')}
+              className="bg-primary text-white px-8 py-3 rounded-2xl text-xs font-bold hover:bg-primary-hover transition-all disabled:opacity-50 disabled:cursor-not-allowed flex items-center"
+            >
+              {isProcessing ? (
+                <>
+                  <RefreshCcw className="w-4 h-4 mr-2 animate-spin" />
+                  등록 중... ({successCount}건 완료)
+                </>
+              ) : (
+                `일괄 등록 완료 (${parsedItems.filter(i => !i.error).length}건)`
+              )}
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Batch Tips */}
+      <div className="p-6 bg-slate-900 rounded-[32px] text-white flex items-center justify-between">
+        <div className="flex items-center space-x-4">
+          <div className="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center">
+            <Zap className="w-5 h-5 text-primary" />
+          </div>
+          <div>
+            <h4 className="text-sm font-bold">대량 등록 팁</h4>
+            <p className="text-[11px] text-slate-400 mt-0.5">시리얼 번호가 중복될 경우 시스템이 자동으로 기존 자산 업데이트 또는 오류로 분류합니다.</p>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  );
+}
diff --git a/src/components/itam/SingleRegistrationForm.tsx b/src/components/itam/SingleRegistrationForm.tsx
new file mode 100644
index 0000000..0fabe37
--- /dev/null
+++ b/src/components/itam/SingleRegistrationForm.tsx
@@ -0,0 +1,440 @@
+'use client';
+
+import React, { useState } from 'react';
+import { 
+  Camera, 
+  Scan, 
+  CheckCircle2, 
+  PlusCircle, 
+  Trash2, 
+  History,
+  Monitor,
+  Cpu,
+  Database,
+  Image as ImageIcon,
+  AlertCircle,
+  QrCode
+} from 'lucide-react';
+import equipmentService from '@/services/equipmentService';
+import { useCommonCodes } from '@/hooks/useCommonCodes';
+import type { Equipment, EquipmentType } from '@/types';
+import AssetLabel from './AssetLabel';
+import BarcodeScanner from './BarcodeScanner';
+
+interface SingleRegistrationFormProps {
+  onRegisterSuccess: () => void;
+}
+
+/**
+ * 단건/연속 등록 폼 컴포넌트
+ * 전문가 자문을 반영한 지능형 필드와 스캔 기능을 포함합니다.
+ */
+export default function SingleRegistrationForm({ onRegisterSuccess }: SingleRegistrationFormProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [tempList, setTempList] = useState<any[]>([]);
+  const [uploadedImages, setUploadedImages] = useState<{ url: string; name: string }[]>([]);
+  const [uploadingImage, setUploadingImage] = useState(false);
+  const [labelAsset, setLabelAsset] = useState<{ assetCode: string; modelName: string; serialNumber: string; manufacturer: string; purchaseDate: string } | null>(null);
+  const [showScanner, setShowScanner] = useState(false);
+
+  const { codes: equipmentTypeCodes, loading: typeCodesLoading } = useCommonCodes('EQUIPMENT_TYPE');
+
+  const [formData, setFormData] = useState<Partial<Equipment>>({
+    equipmentType: 'LAPTOP',
+    manufacturer: '',
+    modelName: '',
+    serialNumber: '',
+    assetCode: '',
+    specifications: {} as Record<string, string>,
+    status: 'AVAILABLE',
+    purchaseDate: '',
+    warrantyExpDate: '',
+  });
+
+  const typeMapping: Record<string, EquipmentType> = {
+    'LAPTOP': 'LAPTOP',
+    'DESKTOP': 'ACCESSORY',
+    'SERVER': 'ACCESSORY',
+    'MONITOR': 'MONITOR',
+  };
+
+  const getSmartSpec = (type: string) => {
+    switch (type) {
+      case 'LAPTOP': return JSON.stringify({ os: 'Win 11 Pro', ram: '16GB', storage: '512GB' });
+      case 'DESKTOP': return JSON.stringify({ os: 'Win 11 Pro', ram: '32GB', storage: '1TB' });
+      case 'SERVER': return JSON.stringify({ os: 'Linux Ubuntu 22.04', ram: '64GB', storage: '2TB' });
+      case 'MONITOR': return JSON.stringify({ size: '27inch', resolution: '4K UHD' });
+      default: return '{}';
+    }
+  };
+
+  const handleInputChange = (field: keyof Equipment, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+    setErrorMessage(null);
+  };
+
+  const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files?.length) return;
+    setUploadingImage(true);
+    for (const file of Array.from(files)) {
+      try {
+        const form = new FormData();
+        form.append('file', file);
+        const res = await fetch('/api/v1/files/upload', { method: 'POST', body: form });
+        const data = await res.json();
+        if (data.success) {
+          setUploadedImages(prev => [...prev, { url: data.data, name: file.name }]);
+        }
+      } catch {
+        // skip failed uploads
+      }
+    }
+    setUploadingImage(false);
+    e.target.value = '';
+  };
+
+  const removeImage = (idx: number) => {
+    setUploadedImages(prev => prev.filter((_, i) => i !== idx));
+  };
+
+  const handleRegister = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsSubmitting(true);
+    setErrorMessage(null);
+
+    try {
+      const payload: Record<string, unknown> = {
+        ...formData,
+        equipmentType: typeMapping[formData.equipmentType as string] || 'LAPTOP',
+        specifications: (() => {
+          const spec = formData.specifications;
+          if (typeof spec === 'string') {
+            try { return JSON.parse(spec); } catch { return {} as Record<string, string>; }
+          }
+          return spec || {};
+        })(),
+      };
+      if (uploadedImages.length > 0) {
+        payload.images = JSON.stringify(uploadedImages);
+      }
+
+      await equipmentService.create(payload);
+
+      const p = payload as Record<string, string>;
+      setLabelAsset({
+        assetCode: p.assetCode || '',
+        modelName: p.modelName || '',
+        serialNumber: p.serialNumber || '',
+        manufacturer: p.manufacturer || '',
+        purchaseDate: p.purchaseDate || '',
+      });
+      
+      setTempList(prev => [{ 
+        id: formData.assetCode || `TMP-${Math.floor(Math.random()*1000)}`, 
+        type: formData.equipmentType, 
+        model: formData.modelName 
+      }, ...prev]);
+      
+      onRegisterSuccess();
+      
+      setFormData({
+        equipmentType: 'LAPTOP',
+        manufacturer: '',
+        modelName: '',
+        serialNumber: '',
+        assetCode: '',
+        specifications: {} as Record<string, string>,
+        status: 'AVAILABLE',
+      });
+      setUploadedImages([]);
+    } catch (error: any) {
+      setErrorMessage(error.response?.data?.message || '등록에 실패했습니다. 다시 시도해 주세요.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
+      
+      {/* Left: Input Form (8 cols) */}
+      <div className="lg:col-span-8 space-y-8">
+        <form onSubmit={handleRegister} className="bg-white p-8 rounded-[32px] border border-slate-200 shadow-sm space-y-8">
+          
+          {/* Section 1: Scan & Identity */}
+          <div className="space-y-4">
+            <h3 className="text-sm font-bold text-slate-400 uppercase tracking-widest flex items-center">
+              <Scan className="w-4 h-4 mr-2" />
+              Scan & Identification
+            </h3>
+            <div className="flex items-center space-x-6">
+              {/* Camera Scanner Button */}
+              <button type="button" onClick={() => setShowScanner(true)} className="relative w-full sm:w-48 h-24 sm:h-32 rounded-2xl sm:rounded-[24px] border-2 border-dashed flex flex-col items-center justify-center cursor-pointer transition-all border-slate-200 bg-slate-50 hover:border-primary hover:bg-primary/5">
+                <Camera className="w-6 h-6 sm:w-8 sm:h-8 text-slate-300 mb-1 sm:mb-2" />
+                <p className="text-[11px] sm:text-[10px] font-bold text-slate-400">바코드/QR 스캔</p>
+                <p className="text-[9px] sm:text-[8px] text-slate-300 mt-0.5 sm:mt-1">카메라로 인식</p>
+              </button>
+              <div className="flex-1 space-y-4">
+                <div className="space-y-1.5">
+                  <label className="text-xs font-bold text-slate-500 ml-1">자산 유형</label>
+                  <div className="flex space-x-2">
+                    {typeCodesLoading ? (
+                      <span className="text-xs text-slate-400">Loading...</span>
+                    ) : (
+                      equipmentTypeCodes.map((type) => (
+                        <button
+                          key={type.codeValue}
+                          type="button"
+                          onClick={() => handleInputChange('equipmentType', type.codeValue)}
+                          className={`flex-1 py-2.5 rounded-xl text-xs font-bold border transition-all ${
+                            formData.equipmentType === type.codeValue ? 'bg-slate-900 text-white border-slate-900 shadow-md' : 'bg-white text-slate-400 border-slate-200 hover:border-slate-300'
+                          }`}
+                        >
+                          {type.codeName}
+                        </button>
+                      ))
+                    )}
+                  </div>
+                </div>
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                  <div className="space-y-1.5">
+                    <label className="text-xs font-bold text-slate-500 ml-1">시리얼 번호 (S/N)</label>
+                    <input 
+                      type="text" 
+                      placeholder="스캔 시 자동 입력" 
+                      value={formData.serialNumber}
+                      onChange={(e) => handleInputChange('serialNumber', e.target.value)}
+                      className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-primary/20 outline-none transition-all font-mono" 
+                    />
+                  </div>
+                  <div className="space-y-1.5">
+                    <label className="text-xs font-bold text-slate-500 ml-1 flex items-center">
+                      하드웨어 사양 
+                      <span className="ml-2 text-[9px] text-primary bg-primary/10 px-1 rounded">Smart Default</span>
+                    </label>
+                    <input 
+                      type="text" 
+                      value={typeof formData.specifications === 'string' ? formData.specifications : JSON.stringify(formData.specifications)}
+                      onChange={(e) => handleInputChange('specifications', e.target.value)}
+                      className="w-full px-4 py-3 bg-indigo-50/30 border border-indigo-100 rounded-xl text-sm focus:ring-2 focus:ring-primary/20 outline-none transition-all" 
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Section 2: Details */}
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
+            <div className="space-y-1.5">
+              <label className="text-xs font-bold text-slate-500 ml-1">제조사</label>
+              <input 
+                type="text" 
+                placeholder="예: Samsung, LG, Apple"
+                value={formData.manufacturer}
+                onChange={(e) => handleInputChange('manufacturer', e.target.value)}
+                className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-primary/20 outline-none transition-all" 
+              />
+            </div>
+            <div className="space-y-1.5">
+              <label className="text-xs font-bold text-slate-500 ml-1">모델명</label>
+              <input 
+                type="text" 
+                placeholder="예: MacBook Pro 14"
+                value={formData.modelName}
+                onChange={(e) => handleInputChange('modelName', e.target.value)}
+                className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-primary/20 outline-none transition-all" 
+              />
+            </div>
+            <div className="space-y-1.5">
+              <label className="text-xs font-bold text-slate-500 ml-1">자산 코드</label>
+              <input 
+                type="text" 
+                placeholder="예: AST-2025-001"
+                value={formData.assetCode}
+                onChange={(e) => handleInputChange('assetCode', e.target.value)}
+                className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-primary/20 outline-none transition-all" 
+              />
+            </div>
+            <div className="space-y-1.5">
+              <label className="text-xs font-bold text-slate-500 ml-1">구매일</label>
+              <input 
+                type="date" 
+                value={formData.purchaseDate}
+                onChange={(e) => handleInputChange('purchaseDate', e.target.value)}
+                className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-primary/20 outline-none transition-all" 
+              />
+            </div>
+            <div className="space-y-1.5">
+              <label className="text-xs font-bold text-slate-500 ml-1">무상보증기간</label>
+              <input 
+                type="date" 
+                value={formData.warrantyExpDate}
+                onChange={(e) => handleInputChange('warrantyExpDate', e.target.value)}
+                className="w-full px-4 py-3 bg-slate-50 border border-slate-200 rounded-xl text-sm focus:ring-2 focus:ring-primary/20 outline-none transition-all" 
+              />
+            </div>
+          </div>
+
+          {/* Section 3: Equipment Photos (다중 업로드) */}
+          <div className="space-y-3">
+             <h3 className="text-sm font-bold text-slate-400 uppercase tracking-widest flex items-center">
+              <ImageIcon className="w-4 h-4 mr-2" />
+              Equipment Photos
+              <span className="ml-2 text-[9px] text-primary bg-primary/10 px-1.5 py-0.5 rounded">Multiple</span>
+            </h3>
+            <div className="flex flex-wrap gap-3">
+              {uploadedImages.map((img, i) => (
+                <div key={i} className="relative group w-24 h-24 rounded-2xl overflow-hidden border border-slate-200">
+                  <img src={img.url} alt={img.name} className="w-full h-full object-cover" />
+                  <button type="button" onClick={() => removeImage(i)} className="absolute top-1 right-1 w-5 h-5 bg-black/50 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all">
+                    <Trash2 className="w-3 h-3 text-white" />
+                  </button>
+                  <div className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/50 to-transparent p-1">
+                    <p className="text-[8px] text-white truncate">{img.name}</p>
+                  </div>
+                </div>
+              ))}
+              <label className="w-24 h-24 border-2 border-dashed border-slate-200 rounded-2xl flex flex-col items-center justify-center hover:bg-slate-50 hover:border-slate-300 transition-all cursor-pointer">
+                {uploadingImage ? (
+                  <div className="w-5 h-5 border-2 border-slate-300 border-t-primary rounded-full animate-spin" />
+                ) : (
+                  <>
+                    <PlusCircle className="w-6 h-6 text-slate-300 mb-1" />
+                    <p className="text-[8px] font-bold text-slate-400 text-center px-1">Add Photo</p>
+                  </>
+                )}
+                <input type="file" accept="image/*" multiple className="hidden" onChange={handleImageUpload} disabled={uploadingImage} />
+              </label>
+            </div>
+          </div>
+
+          {/* Error Message */}
+          {errorMessage && (
+            <div className="p-4 bg-red-50 border border-red-100 rounded-xl flex items-center">
+              <AlertCircle className="w-4 h-4 text-red-500 mr-2" />
+              <p className="text-xs text-red-600 font-medium">{errorMessage}</p>
+            </div>
+          )}
+
+          {/* Submit Button (Continuous Mode UX) */}
+          <div className="pt-6 border-t border-slate-100 flex items-center justify-between">
+            <p className="text-xs text-slate-400 flex items-center">
+              <AlertCircle className="w-3.5 h-3.5 mr-1.5" />
+              저장 시 자동으로 다음 장비 등록 상태로 전환됩니다.
+            </p>
+            <div className="flex space-x-3">
+              <button 
+                type="button" 
+                onClick={() => setFormData({
+                  equipmentType: 'LAPTOP',
+                  manufacturer: '',
+                  modelName: '',
+                  serialNumber: '',
+                  assetCode: '',
+                  specifications: {} as Record<string, string>,
+                  status: 'AVAILABLE',
+                  purchaseDate: '',
+                  warrantyExpDate: '',
+                })}
+                className="px-6 py-3 rounded-2xl text-sm font-bold text-slate-500 hover:bg-slate-100 transition-all"
+              >
+                초기화
+              </button>
+              <button 
+                type="submit" 
+                disabled={isSubmitting}
+                className="bg-slate-900 text-white px-10 py-3 rounded-2xl text-sm font-bold shadow-xl shadow-slate-200 hover:bg-slate-800 transition-all flex items-center disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                <CheckCircle2 className="w-4 h-4 mr-2" />
+                {isSubmitting ? '등록 중...' : '저장 후 계속 (Next)'}
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+
+      {/* Right: Temp Registered List (4 cols) */}
+      <div className="lg:col-span-4 space-y-6">
+        <div className="bg-white p-6 rounded-[32px] border border-slate-200 shadow-sm">
+          <div className="flex items-center justify-between mb-6">
+            <h3 className="text-sm font-bold text-slate-900 flex items-center">
+              <History className="w-4 h-4 mr-2 text-primary" />
+              임시 등록 리스트
+            </h3>
+            <span className="text-[11px] font-bold bg-slate-100 px-2 py-0.5 rounded-full text-slate-500">
+              {tempList.length}건 대기
+            </span>
+          </div>
+
+          <div className="space-y-3">
+            {tempList.length === 0 ? (
+              <div className="py-12 flex flex-col items-center justify-center text-slate-300">
+                <Database className="w-10 h-10 mb-2 opacity-20" />
+                <p className="text-xs font-bold">아직 등록된 자산이 없습니다.</p>
+              </div>
+            ) : (
+              tempList.map((item, idx) => (
+                <div key={idx} className="group p-4 bg-slate-50 rounded-2xl border border-slate-100 flex items-center justify-between hover:bg-white hover:border-primary/20 hover:shadow-sm transition-all">
+                  <div className="flex items-center">
+                    <div className="w-8 h-8 rounded-lg bg-white border border-slate-200 flex items-center justify-center mr-3">
+                      <Cpu className="w-4 h-4 text-slate-400" />
+                    </div>
+                    <div>
+                      <p className="text-[10px] font-bold text-slate-400">{item.id}</p>
+                      <p className="text-xs font-bold text-slate-900">{item.model}</p>
+                    </div>
+                  </div>
+                  <button className="p-2 opacity-0 group-hover:opacity-100 text-slate-300 hover:text-red-500 transition-all">
+                    <Trash2 className="w-4 h-4" />
+                  </button>
+                </div>
+              ))
+            )}
+          </div>
+
+          {tempList.length > 0 && (
+            <button className="w-full mt-6 bg-primary text-white py-3 rounded-2xl text-xs font-bold shadow-lg shadow-primary/20 hover:bg-primary-hover transition-all">
+              최종 일괄 전송 ({tempList.length}건)
+            </button>
+          )}
+        </div>
+
+        {/* Pro Tip Card */}
+        <div className="bg-gradient-to-br from-slate-800 to-slate-900 p-6 rounded-[32px] text-white">
+          <h4 className="text-xs font-bold text-primary mb-2 uppercase tracking-widest">Pro Tip</h4>
+          <p className="text-xs text-slate-300 leading-relaxed">
+            바코드 스캔 시 모델 정보가 DB에 있다면 모든 사양 정보가 자동으로 채워집니다. 시리얼 번호 중복 여부도 실시간으로 체크됩니다.
+          </p>
+        </div>
+      </div>
+      {showScanner && (
+        <BarcodeScanner
+          onScan={(value) => {
+            if (value.length >= 8 && /^[A-Za-z0-9-]+$/.test(value)) {
+              if (value.startsWith('HQ-') || value.startsWith('AST-')) {
+                setFormData((prev) => ({ ...prev, assetCode: value }));
+              } else {
+                setFormData((prev) => ({ ...prev, serialNumber: value }));
+              }
+            }
+            setShowScanner(false);
+          }}
+          onClose={() => setShowScanner(false)}
+        />
+      )}
+      {labelAsset && (
+        <AssetLabel
+          assetCode={labelAsset.assetCode}
+          modelName={labelAsset.modelName}
+          serialNumber={labelAsset.serialNumber}
+          manufacturer={labelAsset.manufacturer}
+          purchaseDate={labelAsset.purchaseDate}
+          onClose={() => setLabelAsset(null)}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/src/components/layout/AuthGuard.tsx b/src/components/layout/AuthGuard.tsx
new file mode 100644
index 0000000..d02a29d
--- /dev/null
+++ b/src/components/layout/AuthGuard.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { useRouter, usePathname } from 'next/navigation';
+import { ShieldAlert } from 'lucide-react';
+import { useAuthStore } from '@/stores';
+import { getCookie } from '@/lib/cookie';
+
+const publicPaths = ['/login'];
+
+export default function AuthGuard({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const { isAuthenticated, fetchMe, tryRefresh, accessToken } = useAuthStore();
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (publicPaths.includes(pathname)) {
+      setLoading(false);
+      return;
+    }
+
+    const init = async () => {
+      const token = accessToken || localStorage.getItem('accessToken') || getCookie('accessToken');
+
+      if (!token) {
+        const hasRefresh = localStorage.getItem('refreshToken');
+        if (hasRefresh) {
+          const renewed = await tryRefresh();
+          if (renewed) {
+            await fetchMe().catch(() => {
+              router.replace('/login');
+              return;
+            });
+            setLoading(false);
+            return;
+          }
+        }
+        router.replace('/login');
+        return;
+      }
+
+      if (!isAuthenticated) {
+        await fetchMe().catch(() => {
+          router.replace('/login');
+          return;
+        });
+      }
+      setLoading(false);
+    };
+
+    init();
+  }, [pathname]);
+
+  if (publicPaths.includes(pathname)) return <>{children}</>;
+
+  if (loading) {
+    return (
+      <div className="h-screen flex items-center justify-center bg-canvas">
+        <div className="text-center">
+          <ShieldAlert className="w-10 h-10 text-primary mx-auto mb-3 animate-pulse" />
+          <p className="text-text-muted text-sm">인증 확인 중...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+}
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
new file mode 100644
index 0000000..de29766
--- /dev/null
+++ b/src/components/layout/Header.tsx
@@ -0,0 +1,93 @@
+"use client";
+
+import React, { useEffect, useState } from 'react';
+import { Search, Calendar, MessageSquare, Bell, ChevronsRight, ChevronsLeft, Plus, Menu } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { useAuthStore, useNotificationStore } from '@/stores';
+import NotificationDropdown from './NotificationDropdown';
+import UserDropdown from './UserDropdown';
+
+const Header = ({ toggleSidebar, isCollapsed, onOpenMobile }: { toggleSidebar: () => void, isCollapsed: boolean, onOpenMobile?: () => void }) => {
+  const router = useRouter();
+  const unreadCount = useNotificationStore((s) => s.unreadCount);
+  const startPolling = useNotificationStore((s) => s.startPolling);
+  const [searchVal, setSearchVal] = useState('');
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  useEffect(() => {
+    startPolling();
+  }, []);
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (searchVal.trim()) {
+      router.push(`/issues?search=${encodeURIComponent(searchVal.trim())}`);
+    }
+  };
+
+  return (
+    <header className="h-16 bg-surface border-b border-border flex items-center justify-between px-6 shrink-0 z-30 shadow-sm">
+      <div className="flex items-center flex-1">
+        <button 
+          onClick={toggleSidebar}
+          className="mr-4 lg:mr-6 text-text-muted hover:text-text-main transition-colors p-1 hover:bg-gray-100 rounded-lg lg:block hidden"
+        >
+          {isCollapsed ? <ChevronsRight className="w-5 h-5" /> : <ChevronsLeft className="w-5 h-5" />}
+        </button>
+        <button 
+          onClick={() => onOpenMobile?.()}
+          className="mr-4 lg:mr-6 text-text-muted hover:text-text-main transition-colors p-1 hover:bg-gray-100 rounded-lg lg:hidden block"
+        >
+          <Menu className="w-5 h-5" />
+        </button>
+        <form onSubmit={handleSearch} className="relative w-full max-w-md">
+          <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            <Search className="w-4 h-4 text-gray-400" />
+          </div>
+          <input
+            type="text"
+            value={searchVal}
+            onChange={(e) => setSearchVal(e.target.value)}
+            placeholder="Search issues, assets, employees..."
+            className="block w-full pl-10 pr-3 py-2 border-none rounded-xl bg-gray-100 text-sm focus:outline-none focus:ring-2 focus:ring-primary focus:bg-white transition-all text-text-main"
+          />
+        </form>
+      </div>
+
+      <div className="flex items-center space-x-4">
+        <button onClick={() => router.push('/calendar')} className="p-2 text-text-muted hover:bg-gray-100 rounded-full transition-colors" title="일정 보기">
+          <Calendar className="w-5 h-5" />
+        </button>
+        <button className="p-2 text-text-muted hover:bg-gray-100 rounded-full transition-colors relative" title="메시지 보기">
+          <MessageSquare className="w-5 h-5" />
+        </button>
+        <div className="relative">
+          <button
+            onClick={() => setIsDropdownOpen(!isDropdownOpen)}
+            className="p-2 text-text-muted hover:bg-gray-100 rounded-full transition-colors relative mr-2"
+          >
+            <Bell className="w-5 h-5" />
+            {unreadCount > 0 && (
+              <span className="absolute -top-0.5 -right-0.5 w-5 h-5 bg-status-critical-text text-white text-[10px] font-bold rounded-full flex items-center justify-center border-2 border-white">
+                {unreadCount > 99 ? '99+' : unreadCount}
+              </span>
+            )}
+          </button>
+          <NotificationDropdown isOpen={isDropdownOpen} onClose={() => setIsDropdownOpen(false)} />
+        </div>
+
+        <Link href="/issues" className="bg-primary hover:bg-primary-hover text-white px-4 py-2 rounded-xl text-xs font-semibold shadow-soft transition-all flex items-center">
+          <Plus className="w-3.5 h-3.5 mr-1.5" />
+          New SR
+        </Link>
+        
+        <div className="h-8 w-px bg-gray-200"></div>
+
+        <UserDropdown />
+      </div>
+    </header>
+  );
+};
+
+export default Header;
diff --git a/src/components/layout/MainShell.tsx b/src/components/layout/MainShell.tsx
new file mode 100644
index 0000000..e64cf66
--- /dev/null
+++ b/src/components/layout/MainShell.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import React, { useState } from 'react';
+import Sidebar from './Sidebar';
+import Header from './Header';
+import AuthGuard from './AuthGuard';
+import MobileBottomNav from './MobileBottomNav';
+
+export default function MainShell({ children }: { children: React.ReactNode }) {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const toggleSidebar = () => setIsCollapsed(!isCollapsed);
+
+  return (
+    <AuthGuard>
+      <div className="h-full flex overflow-hidden">
+        {/* Desktop Sidebar - hidden on mobile */}
+        <div className="hidden lg:block">
+          <Sidebar isCollapsed={isCollapsed} />
+        </div>
+        
+        {/* Mobile sidebar overlay (drawer) */}
+        {mobileMenuOpen && (
+          <div className="fixed inset-0 z-50 lg:hidden" onClick={() => setMobileMenuOpen(false)}>
+            <div className="absolute inset-0 bg-black/40" />
+            <div className="absolute left-0 top-0 bottom-0 w-[250px] bg-white shadow-xl" onClick={(e) => e.stopPropagation()}>
+              <Sidebar isCollapsed={false} />
+            </div>
+          </div>
+        )}
+        
+        <div className="flex-1 flex flex-col min-w-0 bg-canvas">
+          <Header toggleSidebar={toggleSidebar} isCollapsed={isCollapsed} onOpenMobile={() => setMobileMenuOpen(true)} />
+          
+          <main className="flex-1 overflow-auto pb-16 lg:pb-0">
+            {children}
+          </main>
+        </div>
+      </div>
+      {/* Mobile bottom navigation */}
+      <MobileBottomNav />
+    </AuthGuard>
+  );
+}
diff --git a/src/components/layout/MobileBottomNav.tsx b/src/components/layout/MobileBottomNav.tsx
new file mode 100644
index 0000000..024d2ec
--- /dev/null
+++ b/src/components/layout/MobileBottomNav.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { LayoutDashboard, Ticket, Link2, Monitor, FileText } from 'lucide-react';
+
+const navItems = [
+  { name: 'Dashboard', href: '/', icon: LayoutDashboard },
+  { name: 'Issues', href: '/issues', icon: Ticket },
+  { name: 'Dispatch', href: '/dispatch', icon: Link2 },
+  { name: 'ITAM', href: '/itam', icon: Monitor },
+  { name: 'Reports', href: '/work-reports', icon: FileText },
+];
+
+export default function MobileBottomNav() {
+  const pathname = usePathname();
+  return (
+    <nav className="fixed bottom-0 inset-x-0 z-50 bg-white border-t border-border flex items-center justify-around py-1 safe-area-bottom lg:hidden shadow-[0_-2px_10px_rgba(0,0,0,0.06)]">
+      {navItems.map((item) => {
+        const Icon = item.icon;
+        const isActive = pathname === item.href || pathname.startsWith(item.href + '/');
+        return (
+          <Link key={item.name} href={item.href} className={`flex flex-col items-center py-1 px-3 rounded-xl transition-colors ${isActive ? 'text-primary' : 'text-text-muted'}`}>
+            <Icon className="w-5 h-5" />
+            <span className="text-[10px] font-medium mt-0.5">{item.name}</span>
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}
diff --git a/src/components/layout/NotificationDropdown.tsx b/src/components/layout/NotificationDropdown.tsx
new file mode 100644
index 0000000..6e43225
--- /dev/null
+++ b/src/components/layout/NotificationDropdown.tsx
@@ -0,0 +1,167 @@
+"use client";
+
+import React, { useEffect, useRef } from 'react';
+import { Bell, Check, AlertCircle, Info, AlertTriangle, XCircle } from 'lucide-react';
+import { useNotificationStore } from '@/stores';
+
+const formatTimeAgo = (dateString: string): string => {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSec = Math.floor(diffMs / 1000);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHour = Math.floor(diffMin / 60);
+  const diffDay = Math.floor(diffHour / 24);
+
+  if (diffSec < 60) return '방금 전';
+  if (diffMin < 60) return `${diffMin}분 전`;
+  if (diffHour < 24) return `${diffHour}시간 전`;
+  if (diffDay < 7) return `${diffDay}일 전`;
+  if (diffDay < 30) return `${Math.floor(diffDay / 7)}주 전`;
+  return date.toLocaleDateString('ko-KR');
+};
+
+const getTypeIcon = (type: string) => {
+  switch (type) {
+    case 'SR_TICKET':
+      return <AlertCircle className="w-4 h-4 text-blue-500" />;
+    case 'SR_UPDATE':
+      return <Info className="w-4 h-4 text-indigo-500" />;
+    case 'SLA_WARNING':
+      return <AlertTriangle className="w-4 h-4 text-amber-500" />;
+    case 'REPORT_APPROVED':
+    case 'REPORT_REJECTED':
+      return <Check className="w-4 h-4 text-emerald-500" />;
+    case 'EQUIPMENT':
+      return <Bell className="w-4 h-4 text-purple-500" />;
+    case 'ERROR':
+      return <XCircle className="w-4 h-4 text-red-500" />;
+    default:
+      return <Bell className="w-4 h-4 text-gray-500" />;
+  }
+};
+
+interface NotificationDropdownProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const NotificationDropdown = ({ isOpen, onClose }: NotificationDropdownProps) => {
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const notifications = useNotificationStore((s) => s.notifications);
+  const markAsRead = useNotificationStore((s) => s.markAsRead);
+  const fetchNotifications = useNotificationStore((s) => s.fetchNotifications);
+
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      fetchNotifications();
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOpen, onClose, fetchNotifications]);
+
+  const handleNotificationClick = async (id: number) => {
+    await markAsRead(id);
+  };
+
+  const handleMarkAllRead = async () => {
+    const unreadIds = notifications.filter((n) => !n.isRead).map((n) => n.notificationId);
+    for (const id of unreadIds) {
+      await markAsRead(id);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  const unreadNotifications = notifications.filter((n) => !n.isRead);
+
+  return (
+    <div
+      ref={dropdownRef}
+      className="absolute right-0 top-full mt-2 w-96 bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden z-50"
+      style={{ maxHeight: '500px' }}
+    >
+      {/* Header */}
+      <div className="px-4 py-3 border-b border-gray-100 flex items-center justify-between bg-gray-50">
+        <h3 className="text-sm font-semibold text-text-main">알림</h3>
+        {unreadNotifications.length > 0 && (
+          <button
+            onClick={handleMarkAllRead}
+            className="text-xs text-primary hover:text-primary-hover font-medium transition-colors"
+          >
+            모두 읽음
+          </button>
+        )}
+      </div>
+
+      {/* Notification List */}
+      <div className="overflow-y-auto" style={{ maxHeight: '420px' }}>
+        {notifications.length === 0 ? (
+          <div className="px-4 py-8 text-center">
+            <Bell className="w-8 h-8 text-gray-300 mx-auto mb-2" />
+            <p className="text-sm text-text-muted">알림이 없습니다</p>
+          </div>
+        ) : (
+          <ul className="divide-y divide-gray-50">
+            {notifications.map((notification) => (
+              <li
+                key={notification.notificationId}
+                onClick={() => handleNotificationClick(notification.notificationId)}
+                className={`px-4 py-3 cursor-pointer transition-colors hover:bg-gray-50 ${
+                  !notification.isRead ? 'bg-blue-50/50 hover:bg-blue-50' : ''
+                }`}
+              >
+                <div className="flex items-start gap-3">
+                  <div className="shrink-0 mt-0.5">{getTypeIcon(notification.type)}</div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center justify-between gap-2 mb-1">
+                      <p
+                        className={`text-sm font-medium truncate ${
+                          !notification.isRead ? 'text-text-main' : 'text-text-muted'
+                        }`}
+                      >
+                        {notification.title}
+                      </p>
+                      {!notification.isRead && (
+                        <span className="w-2 h-2 bg-primary rounded-full shrink-0" />
+                      )}
+                    </div>
+                    <p className="text-xs text-text-muted line-clamp-2 mb-1">
+                      {notification.message}
+                    </p>
+                    <span className="text-[10px] text-text-muted">
+                      {formatTimeAgo(notification.createdAt)}
+                    </span>
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+
+      {/* Footer */}
+      {notifications.length > 0 && (
+        <div className="px-4 py-2 border-t border-gray-100 bg-gray-50 text-center">
+          <button
+            onClick={onClose}
+            className="text-xs text-text-muted hover:text-text-main transition-colors"
+          >
+            닫기
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default NotificationDropdown;
diff --git a/src/components/layout/ParkingGuard.tsx b/src/components/layout/ParkingGuard.tsx
new file mode 100644
index 0000000..537e366
--- /dev/null
+++ b/src/components/layout/ParkingGuard.tsx
@@ -0,0 +1,87 @@
+"use client";
+
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { Moon, RefreshCw, Clock } from 'lucide-react';
+
+const BACKOFF_MS = [5_000, 10_000, 20_000, 40_000, 60_000];
+
+export default function ParkingGuard({ children }: { children: React.ReactNode }) {
+  const [status, setStatus] = useState<'loading' | 'parked' | 'online'>('loading');
+  const backoffIdx = useRef(0);
+  const timerRef = useRef<number | undefined>(undefined);
+
+  const checkHealth = useCallback(async () => {
+    try {
+      const res = await fetch('/api/v1/health');
+      if (!res.ok) { setStatus('parked'); return; }
+      const body = await res.json();
+      setStatus(body.data?.parked ? 'parked' : 'online');
+    } catch {
+      setStatus('parked');
+    }
+  }, []);
+
+  useEffect(() => {
+    checkHealth();
+
+    const onVisible = () => {
+      if (document.visibilityState === 'visible') {
+        clearTimeout(timerRef.current);
+        backoffIdx.current = 0;
+        checkHealth();
+      }
+    };
+    document.addEventListener('visibilitychange', onVisible);
+    return () => {
+      document.removeEventListener('visibilitychange', onVisible);
+      clearTimeout(timerRef.current);
+    };
+  }, [checkHealth]);
+
+  useEffect(() => {
+    if (status !== 'parked') return;
+    const delay = BACKOFF_MS[Math.min(backoffIdx.current, BACKOFF_MS.length - 1)];
+    if (backoffIdx.current < BACKOFF_MS.length - 1) backoffIdx.current++;
+    timerRef.current = window.setTimeout(checkHealth, delay);
+    return () => clearTimeout(timerRef.current);
+  }, [status, checkHealth]);
+
+  if (status === 'loading') return null;
+
+  if (status === 'parked') {
+    return (
+      <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
+        <div className="bg-surface rounded-2xl shadow-xl max-w-md w-full mx-4 p-8 text-center">
+          <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-amber-50 flex items-center justify-center">
+            <Moon className="w-8 h-8 text-amber-500" />
+          </div>
+
+          <h2 className="text-xl font-semibold text-text-main mb-2 font-outfit">
+            서버 점검 시간입니다
+          </h2>
+
+          <div className="bg-amber-50 rounded-xl px-4 py-3 mb-5 text-sm text-amber-800">
+            <div className="flex items-center justify-center gap-2">
+              <Clock className="w-4 h-4" />
+              <span>점검 시간: 토/일요일 · 평일 20:00~08:00</span>
+            </div>
+          </div>
+
+          <p className="text-sm text-text-muted mb-4">
+            백엔드 서버가 절전 모드입니다. 서버가 기동되면 자동으로 접속됩니다.
+          </p>
+
+          <button
+            onClick={() => { backoffIdx.current = 0; checkHealth(); }}
+            className="w-full flex items-center justify-center gap-2 bg-primary hover:bg-primary-hover text-white px-5 py-2.5 rounded-xl text-sm font-semibold transition-all shadow-soft"
+          >
+            <RefreshCw className="w-4 h-4" />
+            서버 상태 확인
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return <>{children}</>;
+}
diff --git a/src/components/layout/ParkingOverlay.tsx b/src/components/layout/ParkingOverlay.tsx
new file mode 100644
index 0000000..d678730
--- /dev/null
+++ b/src/components/layout/ParkingOverlay.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import React, { useState, useEffect } from 'react';
+import { Moon, Sun, Clock, Send, CheckCircle, Power } from 'lucide-react';
+import { useParkingStore } from '@/stores';
+
+const RESUME_SCHEDULE = '월요일 08:00';
+
+const ParkingOverlay = () => {
+  const { parked, checking, wakeLoading, wakeSent, wakeMessage, requestWake, dismissWake } = useParkingStore();
+  const [reason, setReason] = useState('');
+
+  if (checking || !parked) return null;
+
+  const now = new Date();
+  const day = now.getDay();
+  const hour = now.getHours();
+  const isWeekend = day === 0 || day === 6;
+
+  const resumeTime = isWeekend
+    ? '월요일 08:00'
+    : `오늘 ${hour < 8 ? '08:00' : '다음 영업일 08:00'}`;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
+      <div className="bg-surface rounded-2xl shadow-xl max-w-md w-full mx-4 p-8 text-center">
+        <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-amber-50 flex items-center justify-center">
+          <Moon className="w-8 h-8 text-amber-500" />
+        </div>
+
+        <h2 className="text-xl font-semibold text-text-main mb-2 font-outfit">
+          서버 점검 시간입니다
+        </h2>
+
+        <div className="bg-amber-50 rounded-xl px-4 py-3 mb-5 text-sm text-amber-800 space-y-1">
+          <div className="flex items-center justify-center gap-2">
+            <Clock className="w-4 h-4" />
+            <span>예상 재기동: <strong>{resumeTime}</strong></span>
+          </div>
+          <div className="text-amber-600 text-xs">
+            점검 시간: 토/일요일 (주말) · 평일 20:00~08:00
+          </div>
+        </div>
+
+        {!wakeSent ? (
+          <>
+            <p className="text-sm text-text-muted mb-4">
+              긴급하게 서버가 필요하면 아래 버튼으로 관리자에게 기동 요청을 보낼 수 있습니다.
+            </p>
+
+            <input
+              type="text"
+              value={reason}
+              onChange={(e) => setReason(e.target.value)}
+              placeholder="요청 사유 (예: 긴급 SR 처리)"
+              className="w-full px-4 py-2.5 border border-border rounded-xl text-sm mb-3 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent bg-white"
+              maxLength={100}
+            />
+
+            <button
+              onClick={() => requestWake(reason || '긴급 서버 기동 요청')}
+              disabled={wakeLoading}
+              className="w-full flex items-center justify-center gap-2 bg-primary hover:bg-primary-hover text-white px-5 py-2.5 rounded-xl text-sm font-semibold transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-soft"
+            >
+              {wakeLoading ? (
+                <span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
+              ) : (
+                <>
+                  <Power className="w-4 h-4" />
+                  서버 기동 요청
+                </>
+              )}
+            </button>
+          </>
+        ) : (
+          <div className="bg-emerald-50 rounded-xl px-4 py-5">
+            <CheckCircle className="w-8 h-8 text-emerald-500 mx-auto mb-2" />
+            <p className="text-sm text-emerald-800 font-medium mb-1">요청이 전송되었습니다</p>
+            <p className="text-xs text-emerald-600">{wakeMessage}</p>
+            <button
+              onClick={dismissWake}
+              className="mt-3 text-xs text-text-muted hover:text-text-main underline"
+            >
+              다시 요청하기
+            </button>
+          </div>
+        )}
+
+        <div className="mt-5 pt-4 border-t border-border">
+          <a
+            href="mailto:admin@example.com"
+            className="text-xs text-text-muted hover:text-primary transition-colors"
+          >
+            관리자 직접 연락: admin@example.com
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ParkingOverlay;
diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx
new file mode 100644
index 0000000..22d263a
--- /dev/null
+++ b/src/components/layout/Sidebar.tsx
@@ -0,0 +1,315 @@
+"use client";
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import { 
+  LayoutDashboard, 
+  Ticket, 
+  Link2, 
+  Monitor, 
+  FileText, 
+  Plus, 
+  Lightbulb,
+  ChevronDown,
+  PlusCircle,
+  ArrowUpRight,
+  ArrowDownLeft,
+  History,
+  BookOpen,
+  Users,
+  ClipboardCheck,
+  CalendarDays,
+  Settings,
+  CheckSquare,
+  Briefcase,
+} from 'lucide-react';
+import { useAuthStore } from '@/stores';
+
+/**
+ * SR 시스템의 메인 사이드바 컴포넌트
+ * ITAM 하위 메뉴를 포함하도록 고도화되었습니다.
+ */
+const Sidebar = ({ isCollapsed }: { isCollapsed?: boolean }) => {
+  const pathname = usePathname();
+  const router = useRouter();
+  const [isItamOpen, setIsItamOpen] = useState(pathname.startsWith('/itam'));
+  const user = useAuthStore((s) => s.user);
+  const role = user?.roleCode;
+  const isMgmt = role === 'MANAGER' || role === 'ADMIN';
+
+  const menuItems = [
+    { name: 'Dashboard', href: '/', icon: LayoutDashboard },
+    { name: 'SR Issues', href: '/issues', icon: Ticket },
+    { name: 'Dispatch', href: '/dispatch', icon: Link2 },
+  ];
+
+  const itamSubItems = [
+    { name: 'Asset Hub', href: '/itam', icon: Monitor },
+    { name: 'Register', href: '/itam/register', icon: PlusCircle },
+    { name: 'Check-out', href: '/itam/checkout', icon: ArrowUpRight },
+    { name: 'Check-in', href: '/itam/checkin', icon: ArrowDownLeft },
+    { name: 'History', href: '/itam', icon: History },
+  ];
+
+  const projects = [
+    { name: 'Samsung Pay SI', dot: 'bg-dot-green' },
+    { name: 'LG CNS SM', dot: 'bg-dot-orange' },
+    { name: 'Kakao Maintenance', dot: 'bg-dot-blue' },
+  ];
+
+  return (
+    <aside 
+      className={`bg-surface border-r border-border flex flex-col justify-between flex-shrink-0 transition-all duration-300 relative z-20 overflow-hidden ${
+        isCollapsed ? 'w-[64px]' : 'w-[250px]'
+      }`}
+    >
+      <div className="flex-1 overflow-y-auto no-scrollbar">
+        {/* 로고 영역 */}
+        <div className={`h-16 flex items-center border-b border-border transition-all sticky top-0 bg-surface z-10 ${isCollapsed ? 'justify-center' : 'px-6'}`}>
+          <div className="w-6 h-6 rounded-full bg-gradient-to-tr from-primary to-purple-400 flex-shrink-0 shadow-lg shadow-primary/20"></div>
+          {!isCollapsed && (
+            <h1 className="font-outfit font-semibold text-lg text-text-main tracking-wide ml-3 whitespace-nowrap">SR System.</h1>
+          )}
+        </div>
+
+        {/* 메인 메뉴 */}
+        <div className={`py-6 ${isCollapsed ? 'px-1' : 'px-4'}`}>
+          {!isCollapsed && (
+            <p className="text-[10px] font-bold text-text-muted tracking-[0.12em] mb-4 px-2 uppercase whitespace-nowrap">Main Menu</p>
+          )}
+          <nav className="space-y-1">
+            {menuItems.map((item) => {
+              const Icon = item.icon;
+              const isActive = pathname === item.href;
+              return (
+                <Link
+                  key={item.name}
+                  href={item.href}
+                  title={isCollapsed ? item.name : ''}
+                  className={`flex items-center rounded-xl font-bold text-xs transition-all ${
+                    isCollapsed ? 'justify-center py-3' : 'px-3 py-2.5'
+                  } ${
+                    isActive 
+                      ? 'bg-primary text-white shadow-lg shadow-primary/20' 
+                      : 'text-text-muted hover:bg-gray-50 hover:text-text-main'
+                  }`}
+                >
+                  <Icon className={`w-4.5 h-4.5 flex-shrink-0 ${isCollapsed ? '' : 'mr-3'}`} />
+                  {!isCollapsed && <span className="whitespace-nowrap">{item.name}</span>}
+                </Link>
+              );
+            })}
+
+            {/* Projects link (management only) */}
+            {isMgmt && (
+              <Link
+                href="/projects"
+                className={`flex items-center rounded-xl font-bold text-xs transition-all ${
+                  isCollapsed ? 'justify-center py-3' : 'px-3 py-2.5'
+                } ${
+                  pathname === '/projects'
+                    ? 'bg-primary text-white shadow-lg shadow-primary/20'
+                    : 'text-text-muted hover:bg-gray-50 hover:text-text-main'
+                }`}
+              >
+                <Briefcase className={`w-4.5 h-4.5 flex-shrink-0 ${isCollapsed ? '' : 'mr-3'}`} />
+                {!isCollapsed && <span className="whitespace-nowrap">Projects</span>}
+              </Link>
+            )}
+
+            {/* ITAM Group Menu */}
+            <div className="space-y-1">
+               <button
+                 onClick={() => !isCollapsed && setIsItamOpen(!isItamOpen)}
+                 className={`w-full flex items-center justify-between rounded-xl font-bold text-xs transition-all ${
+                   isCollapsed ? 'justify-center py-3' : 'px-3 py-2.5'
+                 } ${
+                   pathname.startsWith('/itam') && !isCollapsed
+                    ? 'text-primary'
+                    : 'text-text-muted hover:bg-gray-50 hover:text-text-main'
+                 }`}
+               >
+                 <div className="flex items-center">
+                    <Monitor className={`w-4.5 h-4.5 flex-shrink-0 ${isCollapsed ? '' : 'mr-3'}`} />
+                    {!isCollapsed && <span className="whitespace-nowrap">ITAM (Assets)</span>}
+                 </div>
+                 {!isCollapsed && (
+                   <ChevronDown className={`w-3.5 h-3.5 transition-transform duration-300 ${isItamOpen ? 'rotate-180' : ''}`} />
+                 )}
+               </button>
+               
+               {/* ITAM Sub Items */}
+               {isItamOpen && !isCollapsed && (
+                 <div className="pl-6 space-y-1 mt-1 animate-in slide-in-from-top-2 duration-300">
+                    {itamSubItems.map((sub) => {
+                      const SubIcon = sub.icon;
+                      const isActive = pathname === sub.href;
+                      return (
+                        <Link
+                          key={sub.name}
+                          href={sub.href}
+                          className={`flex items-center px-3 py-2 rounded-lg text-[11px] font-bold transition-all ${
+                            isActive 
+                              ? 'text-primary bg-indigo-50/50' 
+                              : 'text-text-muted hover:text-text-main hover:bg-gray-50'
+                          }`}
+                        >
+                          <SubIcon className="w-3.5 h-3.5 mr-2.5" />
+                          <span className="whitespace-nowrap">{sub.name}</span>
+                        </Link>
+                      );
+                    })}
+                 </div>
+               )}
+            </div>
+
+            <Link
+              href="/work-reports"
+              className={`flex items-center rounded-xl font-bold text-xs transition-all ${
+                isCollapsed ? 'justify-center py-3' : 'px-3 py-2.5'
+              } ${
+                pathname === '/work-reports'
+                  ? 'bg-primary text-white shadow-lg shadow-primary/20' 
+                  : 'text-text-muted hover:bg-gray-50 hover:text-text-main'
+              }`}
+            >
+              <FileText className={`w-4.5 h-4.5 flex-shrink-0 ${isCollapsed ? '' : 'mr-3'}`} />
+              {!isCollapsed && <span className="whitespace-nowrap">Work Reports</span>}
+            </Link>
+
+            <Link
+              href="/daily-reports"
+              className={`flex items-center rounded-xl font-bold text-xs transition-all ${
+                isCollapsed ? 'justify-center py-3' : 'px-3 py-2.5'
+              } ${
+                pathname === '/daily-reports'
+                  ? 'bg-primary text-white shadow-lg shadow-primary/20' 
+                  : 'text-text-muted hover:bg-gray-50 hover:text-text-main'
+              }`}
+            >
+              <ClipboardCheck className={`w-4.5 h-4.5 flex-shrink-0 ${isCollapsed ? '' : 'mr-3'}`} />
+              {!isCollapsed && <span className="whitespace-nowrap">Daily Report</span>}
+            </Link>
+
+            {isMgmt && (
+              <Link
+                href="/work-reports/review"
+                className={`flex items-center rounded-xl font-bold text-xs transition-all ${
+                  isCollapsed ? 'justify-center py-3' : 'px-3 py-2.5'
+                } ${
+                  pathname === '/work-reports/review'
+                    ? 'bg-primary text-white shadow-lg shadow-primary/20' 
+                    : 'text-text-muted hover:bg-gray-50 hover:text-text-main'
+                }`}
+              >
+                <CheckSquare className={`w-4.5 h-4.5 flex-shrink-0 ${isCollapsed ? '' : 'mr-3'}`} />
+                {!isCollapsed && <span className="whitespace-nowrap">Report Review</span>}
+              </Link>
+            )}
+
+            {role === 'ADMIN' && (
+              <Link
+                href="/settings/codes"
+                className={`flex items-center rounded-xl font-bold text-xs transition-all ${
+                  isCollapsed ? 'justify-center py-3' : 'px-3 py-2.5'
+                } ${
+                  pathname === '/settings/codes'
+                    ? 'bg-primary text-white shadow-lg shadow-primary/20' 
+                    : 'text-text-muted hover:bg-gray-50 hover:text-text-main'
+                }`}
+              >
+                <Settings className={`w-4.5 h-4.5 flex-shrink-0 ${isCollapsed ? '' : 'mr-3'}`} />
+                {!isCollapsed && <span className="whitespace-nowrap">Settings</span>}
+              </Link>
+            )}
+
+            <Link
+              href="/calendar"
+              className={`flex items-center rounded-xl font-bold text-xs transition-all ${
+                isCollapsed ? 'justify-center py-3' : 'px-3 py-2.5'
+              } ${
+                pathname === '/calendar'
+                  ? 'bg-primary text-white shadow-lg shadow-primary/20' 
+                  : 'text-text-muted hover:bg-gray-50 hover:text-text-main'
+              }`}
+            >
+              <CalendarDays className={`w-4.5 h-4.5 flex-shrink-0 ${isCollapsed ? '' : 'mr-3'}`} />
+              {!isCollapsed && <span className="whitespace-nowrap">Calendar</span>}
+            </Link>
+
+            {isMgmt && (
+              <Link
+                href="/employees"
+                className={`flex items-center rounded-xl font-bold text-xs transition-all ${
+                  isCollapsed ? 'justify-center py-3' : 'px-3 py-2.5'
+                } ${
+                  pathname === '/employees'
+                    ? 'bg-primary text-white shadow-lg shadow-primary/20' 
+                    : 'text-text-muted hover:bg-gray-50 hover:text-text-main'
+                }`}
+              >
+                <Users className={`w-4.5 h-4.5 flex-shrink-0 ${isCollapsed ? '' : 'mr-3'}`} />
+                {!isCollapsed && <span className="whitespace-nowrap">Employees</span>}
+              </Link>
+            )}
+          </nav>
+        </div>
+
+        {/* 내 프로젝트 */}
+        <div className={`border-t border-border mt-4 pt-6 ${isCollapsed ? 'px-1 py-2' : 'px-4 py-2'}`}>
+          <div className={`flex items-center justify-between mb-4 ${isCollapsed ? 'justify-center' : 'px-2'}`}>
+            {!isCollapsed ? (
+              <>
+                <p className="text-[10px] font-bold text-text-muted tracking-[0.12em] uppercase whitespace-nowrap">My Projects</p>
+                <button onClick={() => router.push('/dispatch')} className="text-text-muted hover:text-text-main">
+                  <Plus className="w-3.5 h-3.5" />
+                </button>
+              </>
+            ) : (
+              <p className="text-[10px] font-bold text-text-muted uppercase">MY</p>
+            )}
+          </div>
+          <nav className="space-y-1">
+            {projects.map((project) => (
+              <Link
+                key={project.name}
+                href="/dispatch"
+                title={isCollapsed ? project.name : ''}
+                className={`flex items-center hover:bg-gray-50 rounded-xl text-xs font-bold text-text-muted transition-colors ${
+                  isCollapsed ? 'justify-center py-2' : 'px-3 py-2'
+                }`}
+              >
+                <span className={`w-2 h-2 rounded-full flex-shrink-0 ${project.dot} ${isCollapsed ? '' : 'mr-3'}`}></span>
+                {!isCollapsed && <span className="whitespace-nowrap">{project.name}</span>}
+              </Link>
+            ))}
+          </nav>
+        </div>
+      </div>
+
+      {/* 하단 정보 카드 */}
+        <div className={`${isCollapsed ? 'p-2' : 'p-6'}`}>
+        {isCollapsed ? (
+          <button className="w-10 h-10 mx-auto bg-primary rounded-xl flex items-center justify-center text-white shadow-soft hover:bg-primary-hover transition-colors">
+            <Lightbulb className="w-5 h-5" />
+          </button>
+        ) : (
+          <div className="bg-indigo-50/50 rounded-2xl p-4 border border-indigo-100/50 text-center relative overflow-hidden group">
+            <div className="absolute -top-4 -right-4 w-12 h-12 bg-primary/10 rounded-full opacity-50 blur-xl group-hover:scale-150 transition-transform duration-700"></div>
+            <div className="w-8 h-8 mx-auto bg-white rounded-full flex items-center justify-center shadow-sm mb-3">
+              <span className="text-lg"><Lightbulb className="w-4.5 h-4.5 text-primary" /></span>
+            </div>
+            <h4 className="font-bold text-xs text-slate-800 mb-1.5 whitespace-nowrap">Need Assistance?</h4>
+            <p className="text-[10px] text-slate-500 leading-relaxed mb-4">현장 장비 부족이나 기술적 이슈는 즉시 보고하세요.</p>
+            <button onClick={() => router.push('/issues')} className="w-full py-2 bg-white rounded-xl text-[10px] font-bold text-primary shadow-sm hover:shadow-md transition-all border border-indigo-100">
+              HQ에 긴급 메시지
+            </button>
+          </div>
+        )}
+      </div>
+    </aside>
+  );
+};
+
+export default Sidebar;
diff --git a/src/components/layout/UserDropdown.tsx b/src/components/layout/UserDropdown.tsx
new file mode 100644
index 0000000..9bee207
--- /dev/null
+++ b/src/components/layout/UserDropdown.tsx
@@ -0,0 +1,75 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+import Link from 'next/link';
+import { UserCircle, Settings, LogOut, ChevronDown } from 'lucide-react';
+import { useAuthStore } from '@/stores';
+
+export default function UserDropdown() {
+  const user = useAuthStore((s) => s.user);
+  const logout = useAuthStore((s) => s.logout);
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    if (open) document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  const roleLabel: Record<string, string> = {
+    ADMIN: '최고관리자',
+    MANAGER: '본사관리자',
+    EMPLOYEE: '파견직원',
+  };
+
+  return (
+    <div className="relative" ref={ref}>
+      <button
+        onClick={() => setOpen(!open)}
+        className="flex items-center gap-3 pl-2 pr-1.5 py-1 rounded-xl hover:bg-gray-50 transition-all"
+      >
+        <div className="text-right hidden md:block">
+          <p className="text-sm font-medium text-text-main leading-tight">{user?.name || 'User'}</p>
+          <p className="text-xs text-text-muted">{roleLabel[user?.roleCode || ''] || user?.roleCode || 'HQ Center'}</p>
+        </div>
+        <div className="w-9 h-9 rounded-full bg-gradient-to-br from-primary to-purple-400 flex items-center justify-center text-white text-sm font-semibold shadow-sm flex-shrink-0">
+          {user?.name?.[0] || 'U'}
+        </div>
+        <ChevronDown className={`w-4 h-4 text-text-muted transition-transform ${open ? 'rotate-180' : ''}`} />
+      </button>
+
+      {open && (
+        <div className="absolute right-0 top-12 w-56 bg-white rounded-xl shadow-lg border border-border overflow-hidden z-50">
+          <div className="px-4 py-3 border-b border-border">
+            <p className="text-sm font-semibold text-text-main">{user?.name || 'User'}</p>
+            <p className="text-xs text-text-muted mt-0.5">{user?.email || ''}</p>
+          </div>
+
+          <div className="py-1">
+            <Link href="/profile" onClick={() => setOpen(false)} className="flex items-center gap-3 px-4 py-2.5 text-sm text-text-main hover:bg-gray-50 transition-colors">
+              <UserCircle className="w-4 h-4 text-text-muted" />
+              프로필 정보
+            </Link>
+
+            {user?.roleCode === 'ADMIN' && (
+              <Link href="/settings/codes" onClick={() => setOpen(false)} className="flex items-center gap-3 px-4 py-2.5 text-sm text-text-main hover:bg-gray-50 transition-colors">
+                <Settings className="w-4 h-4 text-text-muted" />
+                설정 (공통코드)
+              </Link>
+            )}
+          </div>
+
+          <div className="border-t border-border py-1">
+            <button onClick={() => { logout(); setOpen(false); window.location.href = '/login'; }} className="flex items-center gap-3 px-4 py-2.5 text-sm text-status-critical-text hover:bg-red-50 transition-colors w-full text-left">
+              <LogOut className="w-4 h-4" />
+              로그아웃
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/projects/ProjectFormModal.tsx b/src/components/projects/ProjectFormModal.tsx
new file mode 100644
index 0000000..8831096
--- /dev/null
+++ b/src/components/projects/ProjectFormModal.tsx
@@ -0,0 +1,335 @@
+'use client';
+import React, { useState, useEffect, useRef } from 'react';
+import { X, Search } from 'lucide-react';
+import projectService from '@/services/projectService';
+import employeeService from '@/services/employeeService';
+import type { Project, EmployeeSearchResult } from '@/types';
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  onSaved: () => void;
+  editData?: Project | null;
+}
+
+export default function ProjectFormModal({ isOpen, onClose, onSaved, editData }: Props) {
+  const isEdit = !!editData;
+
+  const [projectName, setProjectName] = useState('');
+  const [projectType, setProjectType] = useState<string>('SI');
+  const [contractCompany, setContractCompany] = useState('');
+  const [endUserCompany, setEndUserCompany] = useState('');
+  const [contractType, setContractType] = useState<string>('TURN_KEY');
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [workLocationType, setWorkLocationType] = useState<string>('ON_SITE');
+  const [workAddress, setWorkAddress] = useState('');
+  const [techEnvironment, setTechEnvironment] = useState('');
+  const [mainTaskDesc, setMainTaskDesc] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Internal manager search
+  const [mgrSearch, setMgrSearch] = useState('');
+  const [mgrResults, setMgrResults] = useState<EmployeeSearchResult[]>([]);
+  const [selectedMgr, setSelectedMgr] = useState<EmployeeSearchResult | null>(null);
+  const [showMgrDropdown, setShowMgrDropdown] = useState(false);
+  const debounceRef = useRef<number | undefined>(undefined);
+
+  // Pre-populate on edit
+  useEffect(() => {
+    if (!editData) {
+      resetForm();
+      return;
+    }
+    setProjectName(editData.projectName || '');
+    setProjectType(editData.projectType || 'SI');
+    setContractCompany(editData.contractCompany || '');
+    setEndUserCompany(editData.endUserCompany || '');
+    setContractType(editData.contractType || 'TURN_KEY');
+    setStartDate(editData.startDate || '');
+    setEndDate(editData.endDate || '');
+    setWorkLocationType(editData.workLocationType || 'ON_SITE');
+    setWorkAddress(editData.workAddress || '');
+    setTechEnvironment(editData.techEnvironment || '');
+    setMainTaskDesc(editData.mainTaskDesc || '');
+    if (editData.internalManager) {
+      setSelectedMgr(editData.internalManager as EmployeeSearchResult);
+      setMgrSearch(editData.internalManager.name);
+    }
+  }, [editData, isOpen]);
+
+  const resetForm = () => {
+    setProjectName('');
+    setProjectType('SI');
+    setContractCompany('');
+    setEndUserCompany('');
+    setContractType('TURN_KEY');
+    setStartDate('');
+    setEndDate('');
+    setWorkLocationType('ON_SITE');
+    setWorkAddress('');
+    setTechEnvironment('');
+    setMainTaskDesc('');
+    setMgrSearch('');
+    setSelectedMgr(null);
+    setError(null);
+  };
+
+  const handleMgrSearch = (val: string) => {
+    setMgrSearch(val);
+    setShowMgrDropdown(true);
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = window.setTimeout(() => {
+      if (val.trim().length >= 1) {
+        employeeService.search(val.trim()).then((res) => {
+          setMgrResults(res.data || []);
+        }).catch(() => {});
+      } else {
+        setMgrResults([]);
+      }
+    }, 300);
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!projectName.trim() || !contractCompany.trim() || !startDate) {
+      setError('Project name, contract company, and start date are required.');
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const payload: Record<string, unknown> = {
+        projectName: projectName.trim(),
+        projectType,
+        contractCompany: contractCompany.trim(),
+        endUserCompany: endUserCompany.trim() || undefined,
+        contractType,
+        startDate,
+        endDate: endDate || undefined,
+        workLocationType,
+        workAddress: workAddress.trim() || undefined,
+        techEnvironment: techEnvironment.trim() || undefined,
+        mainTaskDesc: mainTaskDesc.trim() || undefined,
+        internalManagerId: selectedMgr?.empId || null,
+      };
+      if (isEdit) {
+        await projectService.update(editData!.projectId, payload);
+      } else {
+        await projectService.create(payload);
+      }
+      onSaved();
+      onClose();
+      resetForm();
+    } catch {
+      setError('Failed to save project. Please try again.');
+    }
+    setLoading(false);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onClose}>
+      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-xl mx-4 max-h-[90vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
+        <div className="flex items-center justify-between p-6 border-b border-border">
+          <h3 className="font-outfit font-semibold text-lg text-text-main">
+            {isEdit ? 'Edit Project' : 'New Project'}
+          </h3>
+          <button onClick={onClose} className="p-1 hover:bg-gray-100 rounded-lg transition-colors">
+            <X className="w-5 h-5 text-text-muted" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+          <div>
+            <label className="block text-xs font-medium text-text-muted mb-1.5">
+              Project Name <span className="text-status-critical-text">*</span>
+            </label>
+            <input
+              type="text"
+              value={projectName}
+              onChange={(e) => setProjectName(e.target.value)}
+              placeholder="e.g. Samsung Pay SI"
+              className="w-full px-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+            />
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-xs font-medium text-text-muted mb-1.5">Project Type</label>
+              <select
+                value={projectType}
+                onChange={(e) => setProjectType(e.target.value)}
+                className="w-full px-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+              >
+                <option value="SI">SI</option>
+                <option value="SM">SM</option>
+                <option value="MIGRATION">MIGRATION</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-text-muted mb-1.5">Contract Type</label>
+              <select
+                value={contractType}
+                onChange={(e) => setContractType(e.target.value)}
+                className="w-full px-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+              >
+                <option value="TURN_KEY">TURN_KEY</option>
+                <option value="MM">MM</option>
+              </select>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-xs font-medium text-text-muted mb-1.5">
+                Contract Company <span className="text-status-critical-text">*</span>
+              </label>
+              <input
+                type="text"
+                value={contractCompany}
+                onChange={(e) => setContractCompany(e.target.value)}
+                placeholder="e.g. Samsung Electronics"
+                className="w-full px-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-text-muted mb-1.5">End User Company</label>
+              <input
+                type="text"
+                value={endUserCompany}
+                onChange={(e) => setEndUserCompany(e.target.value)}
+                placeholder="e.g. Samsung SDS"
+                className="w-full px-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-xs font-medium text-text-muted mb-1.5">
+                Start Date <span className="text-status-critical-text">*</span>
+              </label>
+              <input
+                type="date"
+                value={startDate}
+                onChange={(e) => setStartDate(e.target.value)}
+                className="w-full px-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-text-muted mb-1.5">End Date</label>
+              <input
+                type="date"
+                value={endDate}
+                onChange={(e) => setEndDate(e.target.value)}
+                className="w-full px-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-xs font-medium text-text-muted mb-1.5">Work Location Type</label>
+              <select
+                value={workLocationType}
+                onChange={(e) => setWorkLocationType(e.target.value)}
+                className="w-full px-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+              >
+                <option value="ON_SITE">ON_SITE</option>
+                <option value="REMOTE">REMOTE</option>
+                <option value="HYBRID">HYBRID</option>
+              </select>
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-text-muted mb-1.5">Work Address</label>
+              <input
+                type="text"
+                value={workAddress}
+                onChange={(e) => setWorkAddress(e.target.value)}
+                placeholder="e.g. Seoul, Gangnam-gu"
+                className="w-full px-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+              />
+            </div>
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-text-muted mb-1.5">Tech Environment</label>
+            <input
+              type="text"
+              value={techEnvironment}
+              onChange={(e) => setTechEnvironment(e.target.value)}
+              placeholder="e.g. Java, Spring Boot, React, PostgreSQL"
+              className="w-full px-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+            />
+          </div>
+
+          <div>
+            <label className="block text-xs font-medium text-text-muted mb-1.5">Main Task Description</label>
+            <textarea
+              value={mainTaskDesc}
+              onChange={(e) => setMainTaskDesc(e.target.value)}
+              placeholder="Describe the main tasks and goals of the project..."
+              className="w-full px-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none"
+              rows={3}
+            />
+          </div>
+
+          {/* Internal Manager Search */}
+          <div className="relative">
+            <label className="block text-xs font-medium text-text-muted mb-1.5">Internal Manager</label>
+            <div className="relative">
+              <Search className="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-text-muted" />
+              <input
+                type="text"
+                value={mgrSearch}
+                onChange={(e) => handleMgrSearch(e.target.value)}
+                onFocus={() => setShowMgrDropdown(true)}
+                placeholder="Search manager by name..."
+                className="w-full pl-9 pr-3 py-2 rounded-xl border border-border text-sm focus:outline-none focus:ring-2 focus:ring-primary"
+              />
+            </div>
+            {showMgrDropdown && mgrResults.length > 0 && (
+              <div className="absolute z-10 w-full mt-1 bg-white border border-border rounded-xl shadow-lg max-h-48 overflow-y-auto">
+                {mgrResults.map((emp) => (
+                  <button
+                    key={emp.empId}
+                    type="button"
+                    onClick={() => { setSelectedMgr(emp); setMgrSearch(emp.name); setShowMgrDropdown(false); }}
+                    className="w-full text-left px-3 py-2 text-sm hover:bg-gray-50 transition-colors"
+                  >
+                    {emp.name} <span className="text-text-muted text-xs">({emp.email})</span>
+                  </button>
+                ))}
+              </div>
+            )}
+            {selectedMgr && !showMgrDropdown && (
+              <p className="text-xs text-primary mt-1">Selected: {selectedMgr.name}</p>
+            )}
+          </div>
+
+          {error && (
+            <div className="bg-status-critical-bg border border-status-critical text-status-critical-text rounded-xl px-4 py-3 text-sm">
+              {error}
+            </div>
+          )}
+
+          <div className="flex justify-end gap-3 pt-2">
+            <button type="button" onClick={onClose} className="px-4 py-2 rounded-xl text-sm font-medium text-text-muted hover:bg-gray-100 transition-colors">
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={loading || !projectName.trim() || !contractCompany.trim() || !startDate}
+              className="px-4 py-2 rounded-xl text-sm font-semibold bg-primary text-white hover:bg-primary-hover transition-colors disabled:opacity-50"
+            >
+              {loading ? 'Saving...' : isEdit ? 'Save Changes' : 'Create Project'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/training/TrainingDashboard.tsx b/src/components/training/TrainingDashboard.tsx
new file mode 100644
index 0000000..b0df6b5
--- /dev/null
+++ b/src/components/training/TrainingDashboard.tsx
@@ -0,0 +1,286 @@
+'use client';
+
+import React, { useEffect, useState, useCallback } from 'react';
+import { BookOpen, CheckCircle2, Clock, PlayCircle, BarChart3, RefreshCw } from 'lucide-react';
+import trainingService from '@/services/trainingService';
+import type { TrainingProgress, TrainingSummary } from '@/types';
+
+interface TrainingCardProps {
+  courseName: string;
+  progressRate: number;
+  status: string;
+  progressId?: number;
+  onUpdate?: (progressId: number, data: { progressRate?: number; status?: string }) => void;
+}
+
+const statusConfig = {
+  NOT_STARTED: { label: '미수강', icon: Clock, color: 'text-text-muted', bg: 'bg-gray-100' },
+  ONGOING: { label: '진행중', icon: PlayCircle, color: 'text-status-pending-text', bg: 'bg-status-pending-bg' },
+  COMPLETED: { label: '완료', icon: CheckCircle2, color: 'text-status-resolved-text', bg: 'bg-status-resolved-bg' },
+};
+
+function TrainingCard({ courseName, progressRate, status, progressId, onUpdate }: TrainingCardProps) {
+  const cfg = statusConfig[status as keyof typeof statusConfig] || statusConfig.NOT_STARTED;
+  const StatusIcon = cfg.icon;
+
+  const handleUpdate = useCallback(() => {
+    if (!onUpdate || !progressId) return;
+
+    let nextStatus: string;
+    let nextProgress: number;
+
+    if (status === 'NOT_STARTED') {
+      nextStatus = 'ONGOING';
+      nextProgress = 10;
+    } else if (status === 'ONGOING') {
+      nextProgress = Math.min(progressRate + 25, 100);
+      nextStatus = nextProgress === 100 ? 'COMPLETED' : 'ONGOING';
+    } else {
+      return;
+    }
+
+    onUpdate(progressId, { progressRate: nextProgress, status: nextStatus });
+  }, [onUpdate, progressId, status, progressRate]);
+
+  return (
+    <div className="bg-surface rounded-2xl border border-border p-5 hover:shadow-soft transition-all">
+      <div className="flex items-start justify-between mb-4">
+        <div className="w-10 h-10 rounded-xl bg-indigo-50 flex items-center justify-center text-primary">
+          <BookOpen className="w-5 h-5" />
+        </div>
+        <span className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${cfg.color} ${cfg.bg}`}>
+          <StatusIcon className="w-3 h-3 mr-1" />
+          {cfg.label}
+        </span>
+      </div>
+      <h3 className="font-semibold text-sm text-text-main mb-3 line-clamp-2 min-h-[2.5rem]">{courseName}</h3>
+      <div className="space-y-2">
+        <div className="flex justify-between text-xs text-text-muted">
+          <span>진도율</span>
+          <span className="font-medium text-text-main">{progressRate}%</span>
+        </div>
+        <div className="w-full h-2 bg-gray-100 rounded-full overflow-hidden">
+          <div
+            className="h-full rounded-full transition-all duration-500"
+            style={{
+              width: `${progressRate}%`,
+              backgroundColor: progressRate === 100 ? '#10B981' : progressRate > 50 ? '#4F46E5' : '#F59E0B',
+            }}
+          />
+        </div>
+        {status !== 'COMPLETED' && onUpdate && (
+          <button
+            onClick={handleUpdate}
+            className="w-full mt-3 text-xs text-primary hover:text-primary-container font-medium flex items-center justify-center gap-1"
+          >
+            <RefreshCw className="w-3 h-3" />
+            진도 업데이트
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface SummaryStats {
+  total: number;
+  completed: number;
+  ongoing: number;
+  notStarted: number;
+  avgProgress: number;
+}
+
+function calculateSummary(progresses: TrainingProgress[]): SummaryStats {
+  const total = progresses.length;
+  const completed = progresses.filter((p) => p.status === 'COMPLETED').length;
+  const ongoing = progresses.filter((p) => p.status === 'ONGOING').length;
+  const notStarted = progresses.filter((p) => p.status === 'NOT_STARTED').length;
+  const avgProgress = total > 0 ? Math.round(progresses.reduce((sum, p) => sum + p.progressRate, 0) / total) : 0;
+
+  return { total, completed, ongoing, notStarted, avgProgress };
+}
+
+export default function TrainingDashboard() {
+  const [progresses, setProgresses] = useState<TrainingProgress[]>([]);
+  const [summaries, setSummaries] = useState<TrainingSummary[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  const fetchData = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      const [progressRes, summaryRes] = await Promise.all([
+        trainingService.getMyProgress(),
+        trainingService.getSummary(),
+      ]);
+
+      if (progressRes.success && progressRes.data) {
+        setProgresses(progressRes.data);
+      }
+      if (summaryRes.success && summaryRes.data) {
+        setSummaries(summaryRes.data);
+      }
+    } catch (err) {
+      const message = err && typeof err === 'object' && 'message' in err ? (err as { message: string }).message : '데이터를 불러오지 못했습니다';
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const handleUpdateProgress = useCallback(
+    async (progressId: number, data: { progressRate?: number; status?: string }) => {
+      try {
+        const res = await trainingService.update(progressId, data);
+        if (res.success && res.data) {
+          setProgresses((prev) => prev.map((p) => (p.progressId === progressId ? res.data! : p)));
+        }
+      } catch (err) {
+        const message = err && typeof err === 'object' && 'message' in err ? (err as { message: string }).message : '진도 업데이트에 실패했습니다';
+        setError(message);
+      }
+    },
+    [],
+  );
+
+  const summary = calculateSummary(progresses);
+
+  if (loading) {
+    return (
+      <div className="p-4 sm:p-6 lg:p-8">
+        <div className="max-w-7xl mx-auto">
+          <div className="flex justify-between items-end mb-8">
+            <div>
+              <h2 className="font-outfit text-3xl font-semibold text-text-main tracking-tight">Training</h2>
+              <p className="text-text-muted mt-1 text-sm">Track your internal training progress and course completion.</p>
+            </div>
+          </div>
+          <div className="flex items-center justify-center py-20">
+            <div className="text-center">
+              <RefreshCw className="w-8 h-8 text-primary animate-spin mx-auto mb-4" />
+              <p className="text-text-muted text-sm">교육 데이터를 불러오는 중...</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="p-4 sm:p-6 lg:p-8">
+        <div className="max-w-7xl mx-auto">
+          <div className="flex justify-between items-end mb-8">
+            <div>
+              <h2 className="font-outfit text-3xl font-semibold text-text-main tracking-tight">Training</h2>
+              <p className="text-text-muted mt-1 text-sm">Track your internal training progress and course completion.</p>
+            </div>
+          </div>
+          <div className="flex items-center justify-center py-20">
+            <div className="text-center">
+              <div className="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center mx-auto mb-4">
+                <RefreshCw className="w-6 h-6 text-error" />
+              </div>
+              <p className="text-error font-medium mb-2">{error}</p>
+              <button
+                onClick={fetchData}
+                className="text-primary hover:text-primary-container text-sm font-medium"
+              >
+                다시 시도
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="p-4 sm:p-6 lg:p-8">
+      <div className="max-w-7xl mx-auto">
+        <div className="flex justify-between items-end mb-8">
+          <div>
+            <h2 className="font-outfit text-3xl font-semibold text-text-main tracking-tight">Training</h2>
+            <p className="text-text-muted mt-1 text-sm">Track your internal training progress and course completion.</p>
+          </div>
+          <div className="flex items-center space-x-2 text-sm text-text-muted">
+            <BarChart3 className="w-4 h-4" />
+            <span>
+              평균 진도율 <strong className="text-text-main">{summary.avgProgress}%</strong>
+            </span>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
+          <div className="bg-surface rounded-2xl p-5 border border-border">
+            <p className="text-xs text-text-muted font-medium mb-1">전체 과정</p>
+            <p className="font-outfit text-2xl font-semibold text-text-main">{summary.total}</p>
+          </div>
+          <div className="bg-surface rounded-2xl p-5 border border-border">
+            <p className="text-xs text-text-muted font-medium mb-1">완료</p>
+            <p className="font-outfit text-2xl font-semibold text-status-resolved-text">{summary.completed}</p>
+          </div>
+          <div className="bg-surface rounded-2xl p-5 border border-border">
+            <p className="text-xs text-text-muted font-medium mb-1">진행중</p>
+            <p className="font-outfit text-2xl font-semibold text-status-pending-text">{summary.ongoing}</p>
+          </div>
+          <div className="bg-surface rounded-2xl p-5 border border-border">
+            <p className="text-xs text-text-muted font-medium mb-1">미수강</p>
+            <p className="font-outfit text-2xl font-semibold text-text-muted">{summary.notStarted}</p>
+          </div>
+        </div>
+
+        {summaries.length > 0 && (
+          <div className="bg-surface rounded-2xl border border-border p-5 mb-8">
+            <h3 className="font-outfit text-lg font-semibold text-text-main mb-4">교육 과정별 통계</h3>
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead>
+                  <tr className="border-b border-border">
+                    <th className="text-left py-3 px-4 font-medium text-text-muted uppercase tracking-wider">Course Name</th>
+                    <th className="text-center py-3 px-4 font-medium text-text-muted uppercase tracking-wider">Total Enrolled</th>
+                    <th className="text-center py-3 px-4 font-medium text-text-muted uppercase tracking-wider">Completed</th>
+                    <th className="text-center py-3 px-4 font-medium text-text-muted uppercase tracking-wider">Avg Progress</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {summaries.map((s, i) => (
+                    <tr key={i} className="border-b border-border last:border-0 hover:bg-surface-container-low">
+                      <td className="py-3 px-4 text-text-main font-medium">{s.courseName}</td>
+                      <td className="py-3 px-4 text-center text-text-muted">{s.totalEnrolled}</td>
+                      <td className="py-3 px-4 text-center text-status-resolved-text">{s.completedCount}</td>
+                      <td className="py-3 px-4 text-center">
+                        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-primary-fixed text-on-primary-fixed">
+                          {s.avgProgress}%
+                        </span>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        )}
+
+        {progresses.length === 0 ? (
+          <div className="text-center py-20">
+            <BookOpen className="w-12 h-12 text-text-muted mx-auto mb-4 opacity-50" />
+            <p className="text-text-muted text-sm">등록된 교육 과정이 없습니다.</p>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
+            {progresses.map((course) => (
+              <TrainingCard key={course.progressId} {...course} onUpdate={handleUpdateProgress} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ui/Badge.tsx b/src/components/ui/Badge.tsx
new file mode 100644
index 0000000..7dfefc1
--- /dev/null
+++ b/src/components/ui/Badge.tsx
@@ -0,0 +1,31 @@
+'use client';
+
+import React from 'react';
+
+interface BadgeProps {
+  variant?: 'open' | 'in-progress' | 'resolved' | 'closed' | 'critical';
+  children: React.ReactNode;
+  className?: string;
+}
+
+const variantStyles = {
+  open: 'bg-[#EFF6FF] text-[#3B82F6]',
+  'in-progress': 'bg-[#FFFBEB] text-[#F59E0B]',
+  resolved: 'bg-[#ECFDF5] text-[#10B981]',
+  closed: 'bg-[#F9FAFB] text-[#6B7280]',
+  critical: 'bg-[#FEF2F2] text-[#EF4444] font-semibold',
+};
+
+export default function Badge({
+  variant = 'closed',
+  children,
+  className = '',
+}: BadgeProps) {
+  return (
+    <span
+      className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${variantStyles[variant]} ${className}`}
+    >
+      {children}
+    </span>
+  );
+}
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
new file mode 100644
index 0000000..e244444
--- /dev/null
+++ b/src/components/ui/Button.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import React from 'react';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger';
+  size?: 'sm' | 'md' | 'lg';
+  loading?: boolean;
+  children: React.ReactNode;
+}
+
+export default function Button({
+  variant = 'primary',
+  size = 'md',
+  loading = false,
+  disabled,
+  children,
+  className = '',
+  ...props
+}: ButtonProps) {
+  const baseStyles = 'inline-flex items-center justify-center font-semibold rounded-xl transition-all disabled:opacity-60 disabled:cursor-not-allowed';
+  
+  const variantStyles = {
+    primary: 'bg-[#4F46E5] hover:bg-[#4338CA] text-white',
+    secondary: 'bg-[#8a4cfc] hover:bg-[#712AE2] text-white',
+    outline: 'border border-[#4F46E5] text-[#4F46E5] hover:bg-[#4F46E5]/10',
+    ghost: 'text-text-main hover:bg-[#F3F4F6]',
+    danger: 'bg-[#EF4444] hover:bg-[#DC2626] text-white',
+  };
+
+  const sizeStyles = {
+    sm: 'px-3 py-1.5 text-xs',
+    md: 'px-5 py-2.5 text-sm',
+    lg: 'px-6 py-3 text-base',
+  };
+
+  return (
+    <button
+      className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${className}`}
+      disabled={disabled || loading}
+      {...props}
+    >
+      {loading && (
+        <span className="w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin mr-2" />
+      )}
+      {children}
+    </button>
+  );
+}
diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx
new file mode 100644
index 0000000..18cbd66
--- /dev/null
+++ b/src/components/ui/Card.tsx
@@ -0,0 +1,25 @@
+'use client';
+
+import React from 'react';
+
+interface CardProps {
+  children: React.ReactNode;
+  className?: string;
+  hover?: boolean;
+}
+
+export default function Card({
+  children,
+  className = '',
+  hover = false,
+}: CardProps) {
+  return (
+    <div
+      className={`bg-white rounded-2xl border border-[#E5E7EB] p-6 ${
+        hover ? 'hover:shadow-float transition-shadow' : 'shadow-card'
+      } ${className}`}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/src/components/ui/Input.tsx b/src/components/ui/Input.tsx
new file mode 100644
index 0000000..0363c04
--- /dev/null
+++ b/src/components/ui/Input.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import React from 'react';
+
+interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  icon?: React.ReactNode;
+}
+
+export default function Input({
+  label,
+  error,
+  icon,
+  className = '',
+  ...props
+}: InputProps) {
+  return (
+    <div className="w-full">
+      {label && (
+        <label className="block text-sm font-medium text-text-main mb-1.5">
+          {label}
+        </label>
+      )}
+      <div className="relative">
+        {icon && (
+          <div className="absolute left-3 top-1/2 -translate-y-1/2 text-text-muted">
+            {icon}
+          </div>
+        )}
+        <input
+          className={`w-full px-4 py-2.5 rounded-xl border bg-white text-text-main text-sm focus:outline-none focus:ring-2 focus:ring-[#4F46E5] focus:border-transparent transition-all ${
+            icon ? 'pl-10' : ''
+          } ${
+            error
+              ? 'border-[#EF4444] focus:ring-[#EF4444]'
+              : 'border-[#E5E7EB]'
+          } ${className}`}
+          {...props}
+        />
+      </div>
+      {error && (
+        <p className="mt-1 text-xs text-[#EF4444]">{error}</p>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts
new file mode 100644
index 0000000..bd2a054
--- /dev/null
+++ b/src/components/ui/index.ts
@@ -0,0 +1,4 @@
+export { default as Button } from './Button';
+export { default as Input } from './Input';
+export { default as Badge } from './Badge';
+export { default as Card } from './Card';
diff --git a/src/hooks/useCommonCodes.ts b/src/hooks/useCommonCodes.ts
new file mode 100644
index 0000000..3c3421d
--- /dev/null
+++ b/src/hooks/useCommonCodes.ts
@@ -0,0 +1,31 @@
+import { useState, useEffect } from 'react';
+import commonCodeService from '@/services/commonCodeService';
+
+interface CodeItem {
+  codeValue: string;
+  codeName: string;
+  sortOrder: number;
+}
+
+export function useCommonCodes(groupCode: string): { codes: CodeItem[]; loading: boolean } {
+  const [codes, setCodes] = useState<CodeItem[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    setLoading(true);
+    commonCodeService.getByGroup(groupCode)
+      .then((res) => {
+        if (res.success && res.data) {
+          setCodes(res.data.map((c: any) => ({
+            codeValue: c.codeValue,
+            codeName: c.codeName,
+            sortOrder: c.sortOrder,
+          })));
+        }
+      })
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, [groupCode]);
+
+  return { codes, loading };
+}
diff --git a/src/lib/cookie.ts b/src/lib/cookie.ts
new file mode 100644
index 0000000..6c7b14c
--- /dev/null
+++ b/src/lib/cookie.ts
@@ -0,0 +1,13 @@
+export function setCookie(name: string, value: string, days = 7) {
+  const expires = new Date(Date.now() + days * 864e5).toUTCString();
+  document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/; SameSite=Lax`;
+}
+
+export function getCookie(name: string): string | null {
+  const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
+  return match ? decodeURIComponent(match[1]) : null;
+}
+
+export function removeCookie(name: string) {
+  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; SameSite=Lax`;
+}
diff --git a/src/middleware.ts b/src/middleware.ts
new file mode 100644
index 0000000..e9755be
--- /dev/null
+++ b/src/middleware.ts
@@ -0,0 +1,9 @@
+import { NextResponse } from 'next/server';
+
+export function middleware() {
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/api/:path*'],
+};
diff --git a/src/mocks/data/assignments.ts b/src/mocks/data/assignments.ts
new file mode 100644
index 0000000..7d63716
--- /dev/null
+++ b/src/mocks/data/assignments.ts
@@ -0,0 +1,5 @@
+export const assignments = [
+  { assignmentId: 1, equipmentId: 1, userId: 3, userName: '김현장', assignedDate: '2026-02-01', returnedDate: null, condOnAssign: '미개봉 신품', condOnReturn: null },
+  { assignmentId: 2, equipmentId: 3, userId: 4, userName: '박파견', assignedDate: '2026-02-15', returnedDate: null, condOnAssign: '신품', condOnReturn: null },
+  { assignmentId: 3, equipmentId: 6, userId: 5, userName: '이전문', assignedDate: '2026-01-15', returnedDate: null, condOnAssign: '미개봉 신품', condOnReturn: null },
+];
diff --git a/src/mocks/data/comments.ts b/src/mocks/data/comments.ts
new file mode 100644
index 0000000..1e8d8a8
--- /dev/null
+++ b/src/mocks/data/comments.ts
@@ -0,0 +1,7 @@
+export const comments = [
+  { commentId: 1, ticketId: 1, userId: 3, userName: '김현장', commentText: '오라클 실행 계획 첨부합니다. Full Scan 발생 구간 확인 부탁드립니다.', attachedFileUrl: '/mock/exec_plan.png', createdAt: '2026-05-20T09:30:00Z' },
+  { commentId: 2, ticketId: 1, userId: 5, userName: '이전문 (본사)', commentText: '인덱스 힌트 사용해보세요: /*+ INDEX(emp IDX_EMP_DEPT) */\n통계 정보 갱신도 필요해 보입니다.', attachedFileUrl: null, createdAt: '2026-05-20T10:15:00Z' },
+  { commentId: 3, ticketId: 1, userId: 3, userName: '김현장', commentText: '힌트 적용 후 3초→0.5초로 개선되었습니다! ✅ 감사합니다.', attachedFileUrl: null, createdAt: '2026-05-20T11:00:00Z' },
+  { commentId: 4, ticketId: 3, userId: 6, userName: '최개발', commentText: '빌드 로그 첨부합니다. Dockerfile 45번째 라인 에러.', attachedFileUrl: '/mock/build_log.txt', createdAt: '2026-05-18T11:30:00Z' },
+  { commentId: 5, ticketId: 3, userId: 5, userName: '이전문 (본사)', commentText: 'Node 버전 mismatch 문제로 확인됩니다. .nvmrc 파일 확인해보세요.', attachedFileUrl: null, createdAt: '2026-05-18T14:00:00Z' },
+];
diff --git a/src/mocks/data/commonCodes.ts b/src/mocks/data/commonCodes.ts
new file mode 100644
index 0000000..ed10457
--- /dev/null
+++ b/src/mocks/data/commonCodes.ts
@@ -0,0 +1,16 @@
+export const commonCodes = [
+  { codeId: 1, groupCode: 'EMP_ROLE', codeValue: 'ADMIN', codeName: '최고관리자', sortOrder: 1, isActive: 'Y' },
+  { codeId: 2, groupCode: 'EMP_ROLE', codeValue: 'MANAGER', codeName: '본사관리자', sortOrder: 2, isActive: 'Y' },
+  { codeId: 3, groupCode: 'EMP_ROLE', codeValue: 'EMPLOYEE', codeName: '파견직원', sortOrder: 3, isActive: 'Y' },
+  { codeId: 4, groupCode: 'EMP_STATUS', codeValue: 'ACTIVE', codeName: '재직', sortOrder: 1, isActive: 'Y' },
+  { codeId: 5, groupCode: 'EMP_STATUS', codeValue: 'ON_LEAVE', codeName: '휴직', sortOrder: 2, isActive: 'Y' },
+  { codeId: 6, groupCode: 'EMP_STATUS', codeValue: 'RESIGNED', codeName: '퇴사', sortOrder: 3, isActive: 'Y' },
+  { codeId: 7, groupCode: 'TICKET_CATEGORY', codeValue: 'BUG', codeName: '버그', sortOrder: 1, isActive: 'Y' },
+  { codeId: 8, groupCode: 'TICKET_CATEGORY', codeValue: 'FEATURE', codeName: '기능', sortOrder: 2, isActive: 'Y' },
+  { codeId: 9, groupCode: 'TICKET_CATEGORY', codeValue: 'SUPPORT', codeName: '지원', sortOrder: 3, isActive: 'Y' },
+  { codeId: 10, groupCode: 'TICKET_CATEGORY', codeValue: 'QA', codeName: '품질', sortOrder: 4, isActive: 'Y' },
+  { codeId: 11, groupCode: 'EQUIP_TYPE', codeValue: 'LAPTOP', codeName: '노트북', sortOrder: 1, isActive: 'Y' },
+  { codeId: 12, groupCode: 'EQUIP_TYPE', codeValue: 'MONITOR', codeName: '모니터', sortOrder: 2, isActive: 'Y' },
+  { codeId: 13, groupCode: 'EQUIP_TYPE', codeValue: 'TEST_DEVICE', codeName: '테스트장비', sortOrder: 3, isActive: 'Y' },
+  { codeId: 14, groupCode: 'EQUIP_TYPE', codeValue: 'ACCESSORY', codeName: '액세서리', sortOrder: 4, isActive: 'Y' },
+];
diff --git a/src/mocks/data/dispatchHistories.ts b/src/mocks/data/dispatchHistories.ts
new file mode 100644
index 0000000..348c83e
--- /dev/null
+++ b/src/mocks/data/dispatchHistories.ts
@@ -0,0 +1,4 @@
+export const dispatchHistories = [
+  { dispatchId: 1, empId: 3, projectId: 1, startDate: '2025-01-01', endDate: null, roleTitle: 'BACKEND', contributionRate: 100, individualTech: 'Java 17, Spring Boot, Oracle', performedTasks: '차세대 결제 시스템 API 개발, 성능 튜닝', achievements: '결제 처리 시간 40% 개선', clientFeedback: null, internalRating: null },
+  { dispatchId: 2, empId: 4, projectId: 2, startDate: '2024-06-01', endDate: null, roleTitle: 'DBA', contributionRate: 100, individualTech: 'Oracle 11g, SQL Tuning, DataGuard', performedTasks: '운영 DB 모니터링, 장애 대응, 쿼리 튜닝', achievements: '월간 장애 건수 60% 감소', clientFeedback: null, internalRating: null },
+];
diff --git a/src/mocks/data/employees.ts b/src/mocks/data/employees.ts
new file mode 100644
index 0000000..339e1d4
--- /dev/null
+++ b/src/mocks/data/employees.ts
@@ -0,0 +1,9 @@
+export const employees = [
+  { empId: 1, loginId: 'admin', name: '김관리', email: 'admin@hq.com', roleCode: 'ADMIN' as const, empStatus: 'ACTIVE' as const, dispatchStatus: 'WAITING' as const, joinedDate: '2020-01-01', leftDate: null },
+  { empId: 2, loginId: 'manager1', name: '이매니저', email: 'manager@hq.com', roleCode: 'MANAGER' as const, empStatus: 'ACTIVE' as const, dispatchStatus: 'WAITING' as const, joinedDate: '2021-03-15', leftDate: null },
+  { empId: 3, loginId: 'kim', name: '김현장', email: 'kim@client.com', roleCode: 'EMPLOYEE' as const, empStatus: 'ACTIVE' as const, dispatchStatus: 'DISPATCHED' as const, joinedDate: '2022-06-01', leftDate: null },
+  { empId: 4, loginId: 'park', name: '박파견', email: 'park@client.com', roleCode: 'EMPLOYEE' as const, empStatus: 'ACTIVE' as const, dispatchStatus: 'DISPATCHED' as const, joinedDate: '2023-02-10', leftDate: null },
+  { empId: 5, loginId: 'lee', name: '이전문', email: 'lee@hq.com', roleCode: 'MANAGER' as const, empStatus: 'ACTIVE' as const, dispatchStatus: 'WAITING' as const, joinedDate: '2019-11-20', leftDate: null },
+  { empId: 6, loginId: 'choi', name: '최개발', email: 'choi@client.com', roleCode: 'EMPLOYEE' as const, empStatus: 'ACTIVE' as const, dispatchStatus: 'DISPATCHED' as const, joinedDate: '2023-08-05', leftDate: null },
+  { empId: 7, loginId: 'jung', name: '정휴직', email: 'jung@hq.com', roleCode: 'EMPLOYEE' as const, empStatus: 'ON_LEAVE' as const, dispatchStatus: 'WAITING' as const, joinedDate: '2021-07-01', leftDate: null },
+];
diff --git a/src/mocks/data/equipment.ts b/src/mocks/data/equipment.ts
new file mode 100644
index 0000000..c01ba86
--- /dev/null
+++ b/src/mocks/data/equipment.ts
@@ -0,0 +1,8 @@
+export const equipment = [
+  { equipmentId: 1, equipmentType: 'LAPTOP' as const, manufacturer: 'Apple', modelName: 'MacBook Pro 16 M3', serialNumber: 'F2G8H3J9K1', assetCode: 'HQ-LP-2026-0001', specifications: { cpu: 'M3 Pro', ram: '36GB', ssd: '512GB' }, status: 'IN_USE' as const, purchaseDate: '2026-01-15', warrantyExpDate: '2028-01-15', version: 0 },
+  { equipmentId: 2, equipmentType: 'LAPTOP' as const, manufacturer: 'Apple', modelName: 'MacBook Pro 14 M3', serialNumber: 'A1B2C3D4E5', assetCode: 'HQ-LP-2026-0002', specifications: { cpu: 'M3', ram: '18GB', ssd: '512GB' }, status: 'AVAILABLE' as const, purchaseDate: '2026-02-01', warrantyExpDate: '2028-02-01', version: 0 },
+  { equipmentId: 3, equipmentType: 'MONITOR' as const, manufacturer: 'LG', modelName: '27UN880 Ergo', serialNumber: 'LG-27U-001', assetCode: 'HQ-MO-2026-0001', specifications: { size: '27"', resolution: '4K UHD', panel: 'IPS' }, status: 'IN_USE' as const, purchaseDate: '2026-01-20', warrantyExpDate: '2028-01-20', version: 0 },
+  { equipmentId: 4, equipmentType: 'LAPTOP' as const, manufacturer: 'Samsung', modelName: 'Galaxy Book4 Pro', serialNumber: 'SAMSUNG-001', assetCode: 'HQ-LP-2026-0003', specifications: { cpu: 'Ultra 7', ram: '16GB', ssd: '256GB' }, status: 'REPAIRING' as const, purchaseDate: '2026-03-01', warrantyExpDate: '2028-03-01', version: 0 },
+  { equipmentId: 5, equipmentType: 'MONITOR' as const, manufacturer: 'Dell', modelName: 'U2723QE', serialNumber: 'DELL-U27-002', assetCode: 'HQ-MO-2026-0002', specifications: { size: '27"', resolution: '4K', panel: 'IPS Black' }, status: 'AVAILABLE' as const, purchaseDate: '2026-04-01', warrantyExpDate: '2028-04-01', version: 0 },
+  { equipmentId: 6, equipmentType: 'ACCESSORY' as const, manufacturer: 'Logitech', modelName: 'MX Master 3S', serialNumber: 'LOG-MX-001', assetCode: 'HQ-AC-2026-0001', specifications: { type: 'Mouse', connection: 'Bluetooth' }, status: 'IN_USE' as const, purchaseDate: '2026-01-10', warrantyExpDate: '2027-01-10', version: 0 },
+];
diff --git a/src/mocks/data/maintenances.ts b/src/mocks/data/maintenances.ts
new file mode 100644
index 0000000..41c0db5
--- /dev/null
+++ b/src/mocks/data/maintenances.ts
@@ -0,0 +1,3 @@
+export const maintenances = [
+  { maintenanceId: 1, equipmentId: 4, reportedBy: 3, maintenanceType: 'REPAIR' as const, issueDescription: '키보드 침수 작동 불가', actionTaken: '공식 서비스센터 키보드 상판 교체 완료', cost: 250000, reportedDate: '2026-05-10', resolvedDate: '2026-05-15' },
+];
diff --git a/src/mocks/data/notifications.ts b/src/mocks/data/notifications.ts
new file mode 100644
index 0000000..dd12b19
--- /dev/null
+++ b/src/mocks/data/notifications.ts
@@ -0,0 +1,6 @@
+export const notifications = [
+  { notificationId: 1, type: 'TICKET', title: 'SR 티켓 배정됨', message: 'SR-2026-003 CI/CD 배포 실패 건이 이전문 매니저에게 배정되었습니다.', isRead: false, createdAt: '2026-05-21T09:00:00Z' },
+  { notificationId: 2, type: 'REPORT', title: '보고서 반려', message: '주간 보고서(WR-2026-05-W1)가 반려되었습니다. 피드백을 확인해주세요.', isRead: false, createdAt: '2026-05-20T14:00:00Z' },
+  { notificationId: 3, type: 'TICKET', title: 'SLA 임박 ⚠️', message: 'SR-2026-001 JVM 메모리 릭 건 SLA 데드라인이 4시간 남았습니다.', isRead: false, createdAt: '2026-05-21T07:00:00Z' },
+  { notificationId: 4, type: 'EQUIPMENT', title: '장비 수리 완료', message: 'Galaxy Book4 Pro 키보드 수리가 완료되어 창고 입고되었습니다.', isRead: true, createdAt: '2026-05-19T16:00:00Z' },
+];
diff --git a/src/mocks/data/projects.ts b/src/mocks/data/projects.ts
new file mode 100644
index 0000000..c6aa335
--- /dev/null
+++ b/src/mocks/data/projects.ts
@@ -0,0 +1,5 @@
+export const projects = [
+  { projectId: 1, projectType: 'SI' as const, projectName: '삼성페이 고도화 (SI)', contractCompany: '삼성전자', endUserCompany: '삼성전자', contractType: 'TURN_KEY' as const, status: 'ONGOING' as const, startDate: '2025-01-01', endDate: '2026-12-31', workLocationType: 'ON_SITE' as const, workAddress: '서울시 서초구', techEnvironment: 'Java 17, Spring Boot, Oracle 19c', mainTaskDesc: '삼성페이 차세대 시스템 구축', internalManagerId: 1 },
+  { projectId: 2, projectType: 'SM' as const, projectName: 'LG CNS SM 운영', contractCompany: 'LG CNS', endUserCompany: 'LG CNS', contractType: 'MM' as const, status: 'ONGOING' as const, startDate: '2024-01-01', endDate: '2026-06-30', workLocationType: 'HYBRID' as const, workAddress: '서울시 강남구', techEnvironment: 'Java 11, Spring, Oracle 11g', mainTaskDesc: 'LG CNS 시스템 유지보수', internalManagerId: 2 },
+  { projectId: 3, projectType: 'SM' as const, projectName: 'Kakao Maintenance', contractCompany: '카카오', endUserCompany: '카카오', contractType: 'MM' as const, status: 'ONGOING' as const, startDate: '2024-06-01', endDate: '2025-12-31', workLocationType: 'REMOTE' as const, workAddress: '경기도 판교', techEnvironment: 'Kotlin, Spring Cloud, MySQL', mainTaskDesc: '카카오 서비스 운영 유지보수', internalManagerId: 2 },
+];
diff --git a/src/mocks/data/reports.ts b/src/mocks/data/reports.ts
new file mode 100644
index 0000000..87e0e0c
--- /dev/null
+++ b/src/mocks/data/reports.ts
@@ -0,0 +1,5 @@
+export const reports = [
+  { reportId: 1, dispatchId: 1, userId: 3, userName: '김현장', reportType: 'WEEKLY' as const, targetDate: '2026-05-15', completedTasks: 'SR 3건 해결 완료 (DB튜닝, 배포파이프라인, 모니터링)', plannedTasks: '차주 성능 테스트 진행, 인덱스 리뷰', issuesAndRisks: '납기 일정 협의 필요', supportRequested: null, status: 'APPROVED' as const, reviewerId: 2, reviewerName: '이매니저', reviewComment: '수고하셨습니다.', createdAt: '2026-05-15T10:00:00Z', updatedAt: '2026-05-16T09:00:00Z' },
+  { reportId: 2, dispatchId: 1, userId: 3, userName: '김현장', reportType: 'WEEKLY' as const, targetDate: '2026-05-22', completedTasks: '오라클 튜닝 2건, 장애 대응 1건', plannedTasks: 'DBA 정기 점검, 교육 수강', issuesAndRisks: null, supportRequested: null, status: 'SUBMITTED' as const, reviewerId: null, reviewerName: null, reviewComment: null, createdAt: '2026-05-22T10:00:00Z', updatedAt: '2026-05-22T10:00:00Z' },
+  { reportId: 3, dispatchId: 2, userId: 4, userName: '박파견', reportType: 'WEEKLY' as const, targetDate: '2026-05-08', completedTasks: 'DB 모니터링, 장애 대응 2건', plannedTasks: '인덱스 튜닝 작업 예정', issuesAndRisks: '장비 SSD 불량 교체 필요', supportRequested: '노트북 SSD 교체 요청', status: 'REJECTED' as const, reviewerId: 2, reviewerName: '이매니저', reviewComment: '완료 실적에 SR 연동 내용 상세 보강 요망', createdAt: '2026-05-08T09:00:00Z', updatedAt: '2026-05-09T14:00:00Z' },
+];
diff --git a/src/mocks/data/tickets.ts b/src/mocks/data/tickets.ts
new file mode 100644
index 0000000..57fa344
--- /dev/null
+++ b/src/mocks/data/tickets.ts
@@ -0,0 +1,9 @@
+export const tickets = [
+  { ticketId: 1, projectId: 1, requesterId: 3, requesterName: '김현장', assigneeId: null, assigneeName: null, category: 'BUG' as const, priority: 'CRITICAL' as const, title: 'JVM 메모리 릭 및 Heap Dump 분석 요청', description: 'Prod 서비스 JVM 메모리 사용량 지속 증가, Full GC 빈도 높음', status: 'OPEN' as const, dueDate: '2026-05-22', resolvedAt: null, resolutionNote: null, slaWarnFlag: 'N' as const, createdAt: '2026-05-20T09:00:00Z', updatedAt: '2026-05-20T09:00:00Z' },
+  { ticketId: 2, projectId: 2, requesterId: 4, requesterName: '박파견', assigneeId: null, assigneeName: null, category: 'SUPPORT' as const, priority: 'HIGH' as const, title: '사내망 방화벽 정책 가이드 필요', description: '파견지 사내망 연동을 위한 방화벽 정책 가이드 요청', status: 'OPEN' as const, dueDate: '2026-05-25', resolvedAt: null, resolutionNote: null, slaWarnFlag: 'N' as const, createdAt: '2026-05-19T14:00:00Z', updatedAt: '2026-05-19T14:00:00Z' },
+  { ticketId: 3, projectId: 1, requesterId: 6, requesterName: '최개발', assigneeId: 5, assigneeName: '이전문', category: 'BUG' as const, priority: 'CRITICAL' as const, title: 'CI/CD 파이프라인 staging 배포 실패', description: 'Staging 환경 배포 시 Docker build 실패', status: 'ASSIGNED' as const, dueDate: '2026-05-22', resolvedAt: null, resolutionNote: null, slaWarnFlag: 'N' as const, createdAt: '2026-05-18T11:00:00Z', updatedAt: '2026-05-19T09:00:00Z' },
+  { ticketId: 4, projectId: 3, requesterId: 4, requesterName: '박파견', assigneeId: 2, assigneeName: '이매니저', category: 'SUPPORT' as const, priority: 'NORMAL' as const, title: 'MacBook Pro 배터리 교체 요청', description: '배터리 성능 78%로 교체 주기 도래', status: 'IN_PROGRESS' as const, dueDate: '2026-05-30', resolvedAt: null, resolutionNote: null, slaWarnFlag: 'N' as const, createdAt: '2026-05-17T10:00:00Z', updatedAt: '2026-05-18T15:00:00Z' },
+  { ticketId: 5, projectId: 2, requesterId: 3, requesterName: '김현장', assigneeId: 5, assigneeName: '이전문', category: 'SUPPORT' as const, priority: 'HIGH' as const, title: 'VPN 접속 연장 요청', description: '원격 접속 VPN 인증서 만료 예정', status: 'RESOLVED' as const, dueDate: '2026-05-20', resolvedAt: '2026-05-19T17:00:00Z', resolutionNote: 'VPN 인증서 재발급 완료', slaWarnFlag: 'N' as const, createdAt: '2026-05-16T08:00:00Z', updatedAt: '2026-05-19T17:00:00Z' },
+  { ticketId: 6, projectId: 1, requesterId: 6, requesterName: '최개발', assigneeId: 5, assigneeName: '이전문', category: 'BUG' as const, priority: 'HIGH' as const, title: 'DB 커넥션 풀 고갈 문제 분석', description: '특정 시간대에 DB 커넥션 풀이 고갈되는 현상', status: 'CLOSED' as const, dueDate: '2026-05-18', resolvedAt: '2026-05-17T12:00:00Z', resolutionNote: 'Connection leak, 코드 수정 완료', slaWarnFlag: 'N' as const, createdAt: '2026-05-15T09:00:00Z', updatedAt: '2026-05-17T12:00:00Z' },
+  { ticketId: 7, projectId: 1, requesterId: 3, requesterName: '김현장', assigneeId: null, assigneeName: null, category: 'QA' as const, priority: 'HIGH' as const, title: '오라클 쿼리 튜닝 필요 (Full Scan)', description: '실행 계획 상 Full Scan 발생, 인덱스 튜닝 필요', status: 'OPEN' as const, dueDate: '2026-05-28', resolvedAt: null, resolutionNote: null, slaWarnFlag: 'N' as const, createdAt: '2026-05-21T08:00:00Z', updatedAt: '2026-05-21T08:00:00Z' },
+];
diff --git a/src/mocks/data/training.ts b/src/mocks/data/training.ts
new file mode 100644
index 0000000..42974d8
--- /dev/null
+++ b/src/mocks/data/training.ts
@@ -0,0 +1,8 @@
+export const training = [
+  { progressId: 1, userId: 3, courseName: 'Next.js Enterprise Architecture', progressRate: 75, status: 'ONGOING' as const, updatedAt: '2026-05-15T10:00:00Z' },
+  { progressId: 2, userId: 3, courseName: 'SpringBoot JPA Masterclass', progressRate: 100, status: 'COMPLETED' as const, updatedAt: '2026-04-20T10:00:00Z' },
+  { progressId: 3, userId: 3, courseName: 'Oracle SQL Tuning & Optimization', progressRate: 30, status: 'ONGOING' as const, updatedAt: '2026-05-18T10:00:00Z' },
+  { progressId: 4, userId: 3, courseName: 'Kubernetes for DevOps Engineers', progressRate: 0, status: 'NOT_STARTED' as const, updatedAt: '2026-05-01T10:00:00Z' },
+  { progressId: 5, userId: 3, courseName: 'React 19 Advanced Patterns', progressRate: 100, status: 'COMPLETED' as const, updatedAt: '2026-03-15T10:00:00Z' },
+  { progressId: 6, userId: 3, courseName: 'Cloud Architecture on AWS', progressRate: 0, status: 'NOT_STARTED' as const, updatedAt: '2026-05-01T10:00:00Z' },
+];
diff --git a/src/mocks/handler.ts b/src/mocks/handler.ts
new file mode 100644
index 0000000..90b72ca
--- /dev/null
+++ b/src/mocks/handler.ts
@@ -0,0 +1,535 @@
+import MockAdapter from 'axios-mock-adapter';
+import type { AxiosInstance } from 'axios';
+import type { RoleCode } from '@/types';
+import { employees as _employees } from './data/employees';
+import { projects as _projects } from './data/projects';
+import { dispatchHistories as _dispatchHistories } from './data/dispatchHistories';
+import { tickets as _tickets } from './data/tickets';
+import { comments as _comments } from './data/comments';
+import { equipment as _equipment } from './data/equipment';
+import { assignments as _assignments } from './data/assignments';
+import { maintenances as _maintenances } from './data/maintenances';
+import { reports as _reports } from './data/reports';
+import { training as _training } from './data/training';
+import { notifications as _notifications } from './data/notifications';
+import { commonCodes as _commonCodes } from './data/commonCodes';
+
+interface MockUser {
+  loginId: string;
+  password: string;
+  name: string;
+  role: RoleCode;
+}
+
+const MOCK_USERS: MockUser[] = [
+  { loginId: 'admin', password: 'admin123', name: 'Admin', role: 'ADMIN' },
+  { loginId: 'manager', password: 'manager123', name: 'Manager Kim', role: 'MANAGER' },
+  { loginId: 'employee', password: 'emp123', name: 'Employee Lee', role: 'EMPLOYEE' },
+];
+
+function paginate<T>(arr: T[], page = 0, size = 20) {
+  const start = page * size;
+  const content = arr.slice(start, start + size);
+  return { content, totalElements: arr.length, totalPages: Math.ceil(arr.length / size), number: page, size };
+}
+
+let initialized = false;
+
+export function setupMocks(instance: AxiosInstance) {
+  if (typeof window === 'undefined' || initialized) return;
+  initialized = true;
+
+  const mock = new MockAdapter(instance, { delayResponse: 200 });
+
+  const s: Record<string, any[]> = {
+    employees: _employees,
+    projects: _projects,
+    dispatchHistories: _dispatchHistories,
+    tickets: _tickets,
+    comments: _comments,
+    equipment: _equipment,
+    assignments: _assignments,
+    maintenances: _maintenances,
+    reports: _reports,
+    training: _training,
+    notifications: _notifications,
+    commonCodes: _commonCodes,
+  };
+
+  /* Auth */
+  mock.onPost('/auth/login').reply((config) => {
+    const { loginId, password } = JSON.parse(config.data);
+    const mockUser = MOCK_USERS.find((u) => u.loginId === loginId && u.password === password);
+    if (!mockUser) {
+      return [401, { success: false, message: '아이디 또는 비밀번호가 일치하지 않습니다.', errorCode: 'AUTH_001' }];
+    }
+    const emp = s.employees.find((e: any) => e.loginId === loginId) || s.employees[0];
+    const accessToken = `mock-jwt-${mockUser.loginId}-${Date.now()}`;
+    const refreshToken = `mock-refresh-${mockUser.loginId}-${Date.now()}`;
+    return [200, { success: true, message: '로그인 성공', data: { accessToken, refreshToken, employee: emp } }];
+  });
+
+  mock.onPost('/auth/refresh').reply((config) => {
+    const { refreshToken } = JSON.parse(config.data);
+    if (!refreshToken || !refreshToken.startsWith('mock-refresh-')) {
+      return [401, { success: false, message: '유효하지 않은 리프레시 토큰입니다.', errorCode: 'AUTH_002' }];
+    }
+    const loginId = refreshToken.split('-')[2];
+    const emp = s.employees.find((e: any) => e.loginId === loginId) || s.employees[0];
+    const accessToken = `mock-jwt-${loginId}-${Date.now()}`;
+    const newRefreshToken = `mock-refresh-${loginId}-${Date.now()}`;
+    return [200, { success: true, message: '토큰 갱신 성공', data: { accessToken, refreshToken: newRefreshToken, employee: emp } }];
+  });
+
+  mock.onGet('/employees/me').reply((config) => {
+    const authHeader = config.headers?.Authorization;
+    if (authHeader && typeof authHeader === 'string' && authHeader.startsWith('Bearer ')) {
+      const token = authHeader.replace('Bearer ', '');
+      const loginId = token.split('-')[2];
+      const emp = s.employees.find((e: any) => e.loginId === loginId);
+      if (emp) return [200, { success: true, message: 'OK', data: emp }];
+    }
+    return [200, { success: true, message: 'OK', data: s.employees[0] }];
+  });
+
+  mock.onGet('/employees').reply((config) => [200, { success: true, message: 'OK', data: paginate(s.employees, config.params?.page, config.params?.size) }]);
+
+  mock.onGet(/\/employees\/search/).reply((config) => {
+    const keyword = (config.params?.keyword || '').toLowerCase();
+    const filtered = s.employees.filter((e: any) => e.name.toLowerCase().includes(keyword) || e.email.toLowerCase().includes(keyword));
+    return [200, { success: true, message: 'OK', data: filtered.map((e: any) => ({ empId: e.empId, name: e.name, roleCode: e.roleCode, dispatchStatus: e.dispatchStatus, email: e.email })) }];
+  });
+
+  mock.onGet(/\/employees\/\d+$/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/employees\/(\d+)$/)?.[1] || '0');
+    const emp = s.employees.find((e: any) => e.empId === id);
+    if (!emp) return [404, { success: false, message: 'Not found' }];
+    return [200, { success: true, message: 'OK', data: emp }];
+  });
+
+  mock.onGet(/\/employees\/\d+\/dispatch-histories/).reply(() => [200, { success: true, message: 'OK', data: s.dispatchHistories }]);
+
+  /* Tickets */
+  mock.onGet('/tickets').reply((config) => {
+    let result = [...s.tickets];
+    const { category, priority, status, searchKeyword } = config.params || {};
+    if (category && category !== 'ALL') result = result.filter((t: any) => t.category === category);
+    if (priority && priority !== 'ALL') result = result.filter((t: any) => t.priority === priority);
+    if (status && status !== 'ALL') result = result.filter((t: any) => t.status === status);
+    if (searchKeyword) result = result.filter((t: any) => t.title.toLowerCase().includes(searchKeyword.toLowerCase()));
+    return [200, { success: true, message: 'OK', data: paginate(result, config.params?.page, config.params?.size) }];
+  });
+
+  mock.onGet(/\/tickets\/(\d+)$/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/tickets\/(\d+)$/)?.[1] || '0');
+    const ticket = s.tickets.find((t: any) => t.ticketId === id);
+    if (!ticket) return [404, { success: false, message: 'Not found' }];
+    ticket.isImminent = ticket.dueDate ? new Date(ticket.dueDate).getTime() - Date.now() < 86400000 : false;
+    return [200, { success: true, message: 'OK', data: ticket }];
+  });
+
+  mock.onPost(/\/tickets\/(\d+)\/comments/).reply((config) => {
+    const ticketId = parseInt(config.url?.match(/\/tickets\/(\d+)\/comments/)?.[1] || '0');
+    const { commentText, attachedFileUrl } = JSON.parse(config.data);
+    const newComment = { commentId: Date.now(), ticketId, userId: 1, userName: 'Admin User (본사)', commentText, attachedFileUrl: attachedFileUrl || null, createdAt: new Date().toISOString() };
+    return [201, { success: true, message: '등록 완료', data: newComment }];
+  });
+
+  mock.onGet(/\/tickets\/(\d+)\/comments/).reply((config) => {
+    const ticketId = parseInt(config.url?.match(/\/tickets\/(\d+)\/comments/)?.[1] || '0');
+    return [200, { success: true, message: 'OK', data: s.comments.filter((c: any) => c.ticketId === ticketId) }];
+  });
+
+  mock.onPut(/\/tickets\/(\d+)\/status/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/tickets\/(\d+)\/status/)?.[1] || '0');
+    const ticket = s.tickets.find((t: any) => t.ticketId === id);
+    if (ticket) ticket.status = config.params?.status || ticket.status;
+    return [200, { success: true, message: '상태 변경 완료', data: ticket }];
+  });
+
+  mock.onPut(/\/tickets\/(\d+)\/resolve/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/tickets\/(\d+)\/resolve/)?.[1] || '0');
+    const ticket = s.tickets.find((t: any) => t.ticketId === id);
+    if (ticket) { ticket.status = 'RESOLVED'; ticket.resolutionNote = JSON.parse(config.data).resolutionNote; ticket.resolvedAt = new Date().toISOString(); }
+    return [200, { success: true, message: '해결 처리 완료', data: ticket }];
+  });
+
+  mock.onDelete(/\/tickets\/(\d+)$/).reply(204);
+
+  /* Equipment */
+  mock.onGet('/equipment').reply((config) => {
+    let result = [...s.equipment];
+    const { type, status, manufacturer } = config.params || {};
+    if (type) result = result.filter((e: any) => e.equipmentType === type);
+    if (status) result = result.filter((e: any) => e.status === status);
+    if (manufacturer) result = result.filter((e: any) => e.manufacturer === manufacturer);
+    return [200, { success: true, message: 'OK', data: paginate(result, config.params?.page, config.params?.size) }];
+  });
+
+  mock.onGet(/\/equipment\/(\d+)$/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/equipment\/(\d+)$/)?.[1] || '0');
+    const equip = s.equipment.find((e: any) => e.equipmentId === id);
+    if (!equip) return [404, { success: false, message: 'Not found' }];
+    return [200, { success: true, message: 'OK', data: equip }];
+  });
+
+  mock.onPost('/equipment').reply((config) => {
+    const body = JSON.parse(config.data);
+    const newEquip = { equipmentId: Date.now(), ...body, version: 0 };
+    s.equipment.push(newEquip);
+    return [201, { success: true, message: '등록 완료', data: newEquip }];
+  });
+
+  mock.onPost(/\/equipment\/(\d+)\/assign/).reply((config) => {
+    const equipId = parseInt(config.url?.match(/\/equipment\/(\d+)\/assign/)?.[1] || '0');
+    const { assigneeId, conditionNote } = JSON.parse(config.data);
+    const equip = s.equipment.find((e: any) => e.equipmentId === equipId);
+    if (!equip || equip.status !== 'AVAILABLE') return [400, { success: false, message: '지급 가능한 재고 상태가 아닙니다.', errorCode: 'EQP_ERR_001' }];
+    equip.status = 'IN_USE';
+    const assignment = { assignmentId: Date.now(), equipmentId: equipId, userId: assigneeId, userName: s.employees.find((e: any) => e.empId === assigneeId)?.name || '', assignedDate: new Date().toISOString().split('T')[0], returnedDate: null, condOnAssign: conditionNote, condOnReturn: null };
+    s.assignments.push(assignment);
+    return [200, { success: true, message: '장비 지급 완료', data: assignment }];
+  });
+
+  mock.onPut(/\/equipment\/(\d+)\/return/).reply((config) => {
+    const equipId = parseInt(config.url?.match(/\/equipment\/(\d+)\/return/)?.[1] || '0');
+    const { conditionNote } = JSON.parse(config.data);
+    const equip = s.equipment.find((e: any) => e.equipmentId === equipId);
+    if (equip) equip.status = 'AVAILABLE';
+    const active = s.assignments.find((a: any) => a.equipmentId === equipId && !a.returnedDate);
+    if (active) { active.returnedDate = new Date().toISOString().split('T')[0]; active.condOnReturn = conditionNote; }
+    return [200, { success: true, message: '반납 완료', data: active }];
+  });
+
+  mock.onGet('/equipment/summary').reply(() => {
+    const counts: Record<string, number> = {};
+    s.equipment.forEach((e: any) => { counts[e.status] = (counts[e.status] || 0) + 1; });
+    counts.ALL = Object.values(counts).reduce((a: number, b: any) => a + (typeof b === 'number' ? b : 0), 0);
+    return [200, { success: true, message: 'OK', data: { counts } }];
+  });
+
+  /* Reports */
+  mock.onGet('/reports').reply((config) => {
+    let result = [...s.reports];
+    const { reportType, status } = config.params || {};
+    if (reportType) result = result.filter((r: any) => r.reportType === reportType);
+    if (status) result = result.filter((r: any) => r.status === status);
+    return [200, { success: true, message: 'OK', data: paginate(result, config.params?.page, config.params?.size) }];
+  });
+
+  mock.onPost('/reports').reply((config) => {
+    const body = JSON.parse(config.data);
+    const newReport = { reportId: Date.now(), ...body, createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() };
+    s.reports.push(newReport);
+    return [201, { success: true, message: '보고서 생성 완료', data: newReport }];
+  });
+
+  mock.onPut(/\/reports\/(\d+)\/review/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/reports\/(\d+)\/review/)?.[1] || '0');
+    const { status, reviewComment } = JSON.parse(config.data);
+    const report = s.reports.find((r: any) => r.reportId === id);
+    if (report) { report.status = status; report.reviewComment = reviewComment || null; }
+    return [200, { success: true, message: '결재 처리 완료', data: report }];
+  });
+
+  mock.onGet('/reports/sr-auto-complete').reply(() => [200, { success: true, message: 'OK', data: ['SR-2026-042: 오라클 인덱스 튜닝 완료', 'SR-2026-043: 배포 파이프라인 오류 수정'] }]);
+
+  /* Training */
+  mock.onGet('/training/me').reply(() => [200, { success: true, message: 'OK', data: s.training }]);
+  mock.onGet('/training/summary').reply(() => {
+    const byCourse: Record<string, any> = {};
+    s.training.forEach((t: any) => {
+      if (!byCourse[t.courseName]) byCourse[t.courseName] = { total: 0, completed: 0, totalRate: 0 };
+      byCourse[t.courseName].total++;
+      if (t.status === 'COMPLETED') byCourse[t.courseName].completed++;
+      byCourse[t.courseName].totalRate += t.progressRate;
+    });
+    const summary = Object.entries(byCourse).map(([courseName, v]) => ({ courseName, totalEnrolled: v.total, completedCount: v.completed, avgProgress: Math.round(v.totalRate / v.total) }));
+    return [200, { success: true, message: 'OK', data: summary }];
+  });
+
+  mock.onPut(/\/training\/(\d+)$/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/training\/(\d+)/)?.[1] || '0');
+    const body = JSON.parse(config.data);
+    const prog = s.training.find((t: any) => t.progressId === id);
+    if (prog) { if (body.progressRate !== undefined) prog.progressRate = body.progressRate; if (body.status) prog.status = body.status; }
+    return [200, { success: true, message: 'OK', data: prog }];
+  });
+
+  /* Notifications */
+  mock.onGet('/notifications/unread').reply(() => [200, { success: true, message: 'OK', data: { count: s.notifications.filter((n: any) => !n.isRead).length } }]);
+  mock.onGet('/notifications').reply(() => [200, { success: true, message: 'OK', data: s.notifications }]);
+  mock.onPut(/\/notifications\/(\d+)\/read$/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/notifications\/(\d+)\/read/)?.[1] || '0');
+    const n = s.notifications.find((x: any) => x.notificationId === id);
+    if (n) n.isRead = true;
+    return [200, { success: true, message: 'OK', data: null }];
+  });
+
+  /* Parking */
+  mock.onGet('/health').reply(() => {
+    const now = new Date();
+    const day = now.getDay();
+    const hour = now.getHours();
+    const parked = day === 0 || day === 6 || hour < 8 || hour >= 20;
+    return [200, { success: true, message: 'OK', data: { parked } }];
+  });
+
+  mock.onPost('/wake').reply(() => new Promise((resolve) => {
+    setTimeout(() => {
+      resolve([200, { success: true, message: '관리자에게 기동 요청이 전송되었습니다. iLO4 원격 부팅이 진행됩니다.', data: { success: true, message: '관리자에게 기동 요청이 전송되었습니다. iLO4 원격 부팅이 진행됩니다.', estimatedWakeTime: '약 5~10분 소요' } }]);
+    }, 3000);
+  }));
+
+  /* Projects */
+  mock.onGet('/projects').reply((config) => {
+    let result = [...s.projects];
+    const { status } = config.params || {};
+    if (status) result = result.filter((p: any) => p.status === status);
+    return [200, { success: true, message: 'OK', data: result }];
+  });
+
+  mock.onGet(/\/projects\/\d+/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/projects\/(\d+)/)?.[1] || '0');
+    const project = s.projects.find((p: any) => p.projectId === id);
+    if (!project) return [404, { success: false, message: 'Not found' }];
+    return [200, { success: true, message: 'OK', data: project }];
+  });
+
+  mock.onPost('/projects').reply((config) => {
+    const body = JSON.parse(config.data);
+    const newProject = { projectId: Date.now(), ...body, createdAt: new Date().toISOString() };
+    s.projects.push(newProject);
+    return [201, { success: true, message: '프로젝트가 등록되었습니다', data: newProject }];
+  });
+
+  mock.onPut(/\/projects\/(\d+)/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/projects\/(\d+)/)?.[1] || '0');
+    const body = JSON.parse(config.data);
+    const project = s.projects.find((p: any) => p.projectId === id);
+    if (!project) return [404, { success: false, message: 'Not found' }];
+    Object.assign(project, body);
+    return [200, { success: true, message: '프로젝트가 수정되었습니다', data: project }];
+  });
+
+  mock.onDelete(/\/projects\/(\d+)/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/projects\/(\d+)/)?.[1] || '0');
+    const idx = s.projects.findIndex((p: any) => p.projectId === id);
+    if (idx === -1) return [404, { success: false, message: 'Not found' }];
+    s.projects.splice(idx, 1);
+    return [200, { success: true, message: '프로젝트가 삭제되었습니다', data: null }];
+  });
+
+  /* Common Codes */
+  mock.onGet('/common-codes').reply((config) => {
+    let result = [...s.commonCodes];
+    const { groupCode } = config.params || {};
+    if (groupCode) result = result.filter((c: any) => c.groupCode === groupCode);
+    return [200, { success: true, message: 'OK', data: result }];
+  });
+
+  mock.onGet('/common-codes/groups').reply(() => {
+    const groups = [...new Set(s.commonCodes.map((c: any) => c.groupCode))];
+    return [200, { success: true, message: 'OK', data: groups }];
+  });
+
+  mock.onPost('/common-codes').reply((config) => {
+    const body = JSON.parse(config.data);
+    const newCode = { codeId: Date.now(), ...body };
+    s.commonCodes.push(newCode);
+    return [200, { success: true, message: '생성 완료', data: newCode }];
+  });
+
+  mock.onPut(/\/common-codes\/\d+/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/common-codes\/(\d+)/)?.[1] || '0');
+    const body = JSON.parse(config.data);
+    const idx = s.commonCodes.findIndex((c: any) => c.codeId === id);
+    if (idx === -1) return [404, { success: false, message: 'Not found' }];
+    s.commonCodes[idx] = { ...s.commonCodes[idx], ...body };
+    return [200, { success: true, message: '수정 완료', data: s.commonCodes[idx] }];
+  });
+
+  mock.onDelete(/\/common-codes\/\d+/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/common-codes\/(\d+)/)?.[1] || '0');
+    const idx = s.commonCodes.findIndex((c: any) => c.codeId === id);
+    if (idx === -1) return [404, { success: false, message: 'Not found' }];
+    s.commonCodes.splice(idx, 1);
+    return [200, { success: true, message: '삭제 완료', data: null }];
+  });
+
+  /* Calendar Events */
+  mock.onGet('/calendar/events').reply(() => {
+    const events: any[] = [];
+    const now = new Date();
+    // Ticket due dates
+    s.tickets.forEach((t: any) => {
+      if (t.dueDate) events.push({ eventType: 'TICKET_DUE', sourceId: t.ticketId, title: t.title, eventDate: t.dueDate.split('T')[0], color: '#3B82F6', linkUrl: `/issues/${t.ticketId}` });
+    });
+    return [200, { success: true, message: 'OK', data: events }];
+  });
+
+  /* Employee CRUD */
+  mock.onPost('/employees').reply((config) => {
+    const body = JSON.parse(config.data);
+    const newEmp = { empId: Date.now(), ...body, password: 'encoded', createdAt: new Date().toISOString() };
+    s.employees.push(newEmp);
+    return [200, { success: true, message: '직원이 생성되었습니다', data: newEmp }];
+  });
+
+  mock.onPut(/\/employees\/(\d+)/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/employees\/(\d+)/)?.[1] || '0');
+    const body = JSON.parse(config.data);
+    const emp = s.employees.find((e: any) => e.empId === id);
+    if (!emp) return [404, { success: false, message: 'Not found' }];
+    Object.assign(emp, body);
+    return [200, { success: true, message: '직원이 수정되었습니다', data: emp }];
+  });
+
+  mock.onDelete(/\/employees\/(\d+)/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/employees\/(\d+)/)?.[1] || '0');
+    const idx = s.employees.findIndex((e: any) => e.empId === id);
+    if (idx === -1) return [404, { success: false, message: 'Not found' }];
+    s.employees.splice(idx, 1);
+    return [200, { success: true, message: '직원이 삭제되었습니다', data: null }];
+  });
+
+  mock.onPut('/employees/me/password').reply(() => [200, { success: true, message: '비밀번호가 변경되었습니다', data: null }]);
+
+  mock.onGet(/\/employees\/(\d+)\/portfolio/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/employees\/(\d+)\/portfolio/)?.[1] || '0');
+    const emp = s.employees.find((e: any) => e.empId === id);
+    const dispatchList = s.dispatchHistories.filter((d: any) => d.empId === id);
+    const portfolio = dispatchList.map((d: any) => ({
+      dispatchHistory: d,
+      projectName: s.projects.find((p: any) => p.projectId === d.projectId)?.projectName || '',
+      reports: s.reports.filter((r: any) => r.dispatchId === d.dispatchId),
+      resolvedTickets: s.tickets.filter((t: any) => {
+        const project = s.projects.find((p: any) => p.projectId === d.projectId);
+        return project && t.projectId === project.projectId;
+      }),
+    }));
+    return [200, { success: true, message: 'OK', data: portfolio }];
+  });
+
+  mock.onPut(/\/employees\/(\d+)\/dispatch-histories\/(\d+)\/achievements/).reply(() => [200, { success: true, message: 'OK', data: null }]);
+
+  /* Dispatch History CRUD */
+  mock.onGet('/dispatch-histories').reply((config) => {
+    let result = [...s.dispatchHistories];
+    const { empId, projectId } = config.params || {};
+    if (empId) result = result.filter((d: any) => d.empId === Number(empId));
+    if (projectId) result = result.filter((d: any) => d.projectId === Number(projectId));
+    return [200, { success: true, message: 'OK', data: { content: result, totalElements: result.length, totalPages: 1, number: 0, size: result.length } }];
+  });
+
+  mock.onGet(/\/dispatch-histories\/(\d+)/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/dispatch-histories\/(\d+)/)?.[1] || '0');
+    const dh = s.dispatchHistories.find((d: any) => d.dispatchId === id);
+    if (!dh) return [404, { success: false, message: 'Not found' }];
+    return [200, { success: true, message: 'OK', data: dh }];
+  });
+
+  mock.onGet('/dispatch-histories/active').reply(() => [200, { success: true, message: 'OK', data: s.dispatchHistories.filter((d: any) => !d.endDate) }]);
+
+  mock.onPut(/\/dispatch-histories\/(\d+)\/end/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/dispatch-histories\/(\d+)\/end/)?.[1] || '0');
+    const dh = s.dispatchHistories.find((d: any) => d.dispatchId === id);
+    if (dh) dh.endDate = new Date().toISOString().split('T')[0];
+    return [200, { success: true, message: '파견이 종료되었습니다', data: dh }];
+  });
+
+  /* Tickets - additional */
+  mock.onPost('/tickets').reply((config) => {
+    const body = JSON.parse(config.data);
+    const newTicket = { ticketId: Date.now(), ...body, status: 'OPEN', createdAt: new Date().toISOString(), updatedAt: new Date().toISOString() };
+    s.tickets.push(newTicket);
+    return [200, { success: true, message: '티켓이 생성되었습니다', data: newTicket }];
+  });
+
+  mock.onDelete(/\/tickets\/(\d+)\/comments\/(\d+)/).reply(() => [200, { success: true, message: '삭제 완료', data: null }]);
+
+  /* Equipment - additional */
+  mock.onPut(/\/equipment\/(\d+)/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/equipment\/(\d+)/)?.[1] || '0');
+    const body = JSON.parse(config.data);
+    const equip = s.equipment.find((e: any) => e.equipmentId === id);
+    if (!equip) return [404, { success: false, message: 'Not found' }];
+    Object.assign(equip, body);
+    return [200, { success: true, message: '수정 완료', data: equip }];
+  });
+
+  mock.onDelete(/\/equipment\/(\d+)/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/equipment\/(\d+)/)?.[1] || '0');
+    const idx = s.equipment.findIndex((e: any) => e.equipmentId === id);
+    if (idx === -1) return [404, { success: false, message: 'Not found' }];
+    s.equipment.splice(idx, 1);
+    return [200, { success: true, message: '삭제 완료', data: null }];
+  });
+
+  mock.onGet(/\/equipment\/(\d+)\/assignments/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/equipment\/(\d+)\/assignments/)?.[1] || '0');
+    return [200, { success: true, message: 'OK', data: s.assignments.filter((a: any) => a.equipmentId === id) }];
+  });
+
+  mock.onGet(/\/equipment\/(\d+)\/maintenances/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/equipment\/(\d+)\/maintenances/)?.[1] || '0');
+    return [200, { success: true, message: 'OK', data: s.maintenances.filter((m: any) => m.equipmentId === id) }];
+  });
+
+  mock.onPost(/\/equipment\/(\d+)\/maintenance/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/equipment\/(\d+)\/maintenance/)?.[1] || '0');
+    const body = JSON.parse(config.data);
+    const newMaint = { maintenanceId: Date.now(), equipmentId: id, ...body, reportedDate: new Date().toISOString().split('T')[0] };
+    s.maintenances.push(newMaint);
+    return [200, { success: true, message: '등록 완료', data: newMaint }];
+  });
+
+  /* Reports - additional */
+  mock.onGet(/\/reports\/(\d+)/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/reports\/(\d+)/)?.[1] || '0');
+    const report = s.reports.find((r: any) => r.reportId === id);
+    if (!report) return [404, { success: false, message: 'Not found' }];
+    return [200, { success: true, message: 'OK', data: report }];
+  });
+
+  mock.onPut(/\/reports\/(\d+)\/status/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/reports\/(\d+)\/status/)?.[1] || '0');
+    const { status } = config.params || {};
+    const report = s.reports.find((r: any) => r.reportId === id);
+    if (report) report.status = status || report.status;
+    return [200, { success: true, message: '상태 변경 완료', data: report }];
+  });
+
+  mock.onDelete(/\/reports\/(\d+)/).reply((config) => {
+    const id = parseInt(config.url?.match(/\/reports\/(\d+)/)?.[1] || '0');
+    const idx = s.reports.findIndex((r: any) => r.reportId === id);
+    if (idx === -1) return [404, { success: false, message: 'Not found' }];
+    s.reports.splice(idx, 1);
+    return [200, { success: true, message: '삭제 완료', data: null }];
+  });
+
+  mock.onGet('/reports/summary').reply(() => [200, { success: true, message: 'OK', data: { submitted: s.reports.filter((r: any) => r.status === 'SUBMITTED').length, approved: s.reports.filter((r: any) => r.status === 'APPROVED').length, rejected: s.reports.filter((r: any) => r.status === 'REJECTED').length, draft: s.reports.filter((r: any) => r.status === 'DRAFT').length } }]);
+
+  /* Projects - my */
+  mock.onGet('/projects/my').reply((config) => {
+    const empId = 3; // default employee
+    const dispatchProjects = s.dispatchHistories
+      .filter((d: any) => d.empId === empId)
+      .map((d: any) => s.projects.find((p: any) => p.projectId === d.projectId))
+      .filter(Boolean);
+    return [200, { success: true, message: 'OK', data: dispatchProjects }];
+  });
+
+  /* Training */
+  mock.onGet('/training').reply((config) => {
+    const { userId } = config.params || {};
+    let result = [...s.training];
+    if (userId) result = result.filter((t: any) => t.userId === Number(userId));
+    return [200, { success: true, message: 'OK', data: result }];
+  });
+
+  /* File upload */
+  mock.onPost('/files/upload').reply(() => [200, { success: true, message: '업로드 완료', data: { url: '/uploads/mock-file.png', name: 'mock-file.png' } }]);
+
+  mock.onAny().passThrough();
+}
diff --git a/src/services/apiClient.ts b/src/services/apiClient.ts
new file mode 100644
index 0000000..737f2ae
--- /dev/null
+++ b/src/services/apiClient.ts
@@ -0,0 +1,83 @@
+import axios, { type AxiosInstance, AxiosError } from 'axios';
+import type { ApiResponse } from '@/types';
+import { setCookie, removeCookie } from '@/lib/cookie';
+import { setupMocks } from '@/mocks/handler';
+
+interface TypedAxios extends AxiosInstance {
+  get<T>(url: string, config?: Record<string, unknown>): Promise<T>;
+  post<T>(url: string, data?: unknown, config?: Record<string, unknown>): Promise<T>;
+  put<T>(url: string, data?: unknown, config?: Record<string, unknown>): Promise<T>;
+  delete<T>(url: string, config?: Record<string, unknown>): Promise<T>;
+}
+
+interface AxiosRequestConfigWithSentinel {
+  sentinel?: boolean;
+}
+
+const instance = axios.create({
+  baseURL: '/api/v1',
+  timeout: 10000,
+  headers: { 'Content-Type': 'application/json' },
+});
+
+instance.interceptors.request.use((config) => {
+  if (typeof window !== 'undefined') {
+    const token = localStorage.getItem('accessToken');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+  }
+  return config;
+});
+
+instance.interceptors.response.use(
+  (res) => res.data,
+  async (err: AxiosError<ApiResponse<null>>) => {
+    const status = err.response?.status;
+    const originalRequest = err.config;
+    const configWithSentinel = originalRequest as typeof originalRequest & AxiosRequestConfigWithSentinel;
+
+    // Treat 401/403 as auth errors -> refresh or redirect to login
+    if ((status === 401 || status === 403) && typeof window !== 'undefined' && originalRequest && !configWithSentinel.sentinel) {
+      try {
+        const refreshToken = localStorage.getItem('refreshToken');
+        if (refreshToken) {
+          configWithSentinel.sentinel = true;
+          const res = await axios.post('/api/v1/auth/refresh', { refreshToken });
+          const { accessToken, refreshToken: newRefresh } = res.data.data;
+          localStorage.setItem('accessToken', accessToken);
+          if (newRefresh) localStorage.setItem('refreshToken', newRefresh);
+          setCookie('accessToken', accessToken);
+          configWithSentinel.headers.Authorization = `Bearer ${accessToken}`;
+          return instance(configWithSentinel);
+        }
+      } catch {
+        // refresh failed
+      }
+      localStorage.removeItem('accessToken');
+      localStorage.removeItem('refreshToken');
+      removeCookie('accessToken');
+      window.location.href = '/login';
+      return Promise.reject({ errorCode: 'UNAUTHORIZED', message: '인증이 만료되었습니다.', status });
+    }
+
+    if ((status === 502 || status === 503) && typeof window !== 'undefined') {
+      import('@/stores').then(({ useParkingStore }) => {
+        useParkingStore.getState().checkParking();
+      });
+    }
+
+    const errorCode = err.response?.data?.errorCode;
+    const message = err.response?.data?.message || err.message;
+    return Promise.reject({ errorCode, message, status });
+  },
+);
+
+const apiClient = instance as TypedAxios;
+
+// Mock — enabled for development (static import ensures synchronous setup)
+if (typeof window !== 'undefined' && process.env.NODE_ENV !== 'production') {
+  setupMocks(instance);
+}
+
+export default apiClient;
diff --git a/src/services/commonCodeService.ts b/src/services/commonCodeService.ts
new file mode 100644
index 0000000..01bfb63
--- /dev/null
+++ b/src/services/commonCodeService.ts
@@ -0,0 +1,16 @@
+import apiClient from './apiClient';
+import type { ApiResponse, CommonCode } from '@/types';
+
+const commonCodeService = {
+  getByGroup(groupCode: string) {
+    return apiClient.get<ApiResponse<CommonCode[]>>('/common-codes', {
+      params: { groupCode },
+    });
+  },
+
+  getAllGroups() {
+    return apiClient.get<ApiResponse<CommonCode[]>>('/common-codes');
+  },
+};
+
+export default commonCodeService;
diff --git a/src/services/dispatchHistoryService.ts b/src/services/dispatchHistoryService.ts
new file mode 100644
index 0000000..9f6b61c
--- /dev/null
+++ b/src/services/dispatchHistoryService.ts
@@ -0,0 +1,27 @@
+import apiClient from './apiClient';
+import type { ApiResponse, Page, DispatchHistory } from '@/types';
+
+const dispatchHistoryService = {
+  getByEmployee: (empId: number) =>
+    apiClient.get<ApiResponse<DispatchHistory[]>>(`/dispatch-histories/employee/${empId}`),
+
+  getActive: () =>
+    apiClient.get<ApiResponse<DispatchHistory[]>>('/dispatch-histories/active'),
+
+  getAll: (params?: Record<string, unknown>) =>
+    apiClient.get<ApiResponse<Page<DispatchHistory>>>('/dispatch-histories', { params }),
+
+  getById: (id: number) =>
+    apiClient.get<ApiResponse<DispatchHistory>>(`/dispatch-histories/${id}`),
+
+  create: (data: Record<string, unknown>) =>
+    apiClient.post<ApiResponse<DispatchHistory>>('/dispatch-histories', data),
+
+  endDispatch: (id: number) =>
+    apiClient.put<ApiResponse<DispatchHistory>>(`/dispatch-histories/${id}/end`),
+
+  deleteDispatch: (id: number) =>
+    apiClient.delete<ApiResponse<null>>(`/dispatch-histories/${id}`),
+};
+
+export default dispatchHistoryService;
diff --git a/src/services/employeeService.ts b/src/services/employeeService.ts
new file mode 100644
index 0000000..ddac03f
--- /dev/null
+++ b/src/services/employeeService.ts
@@ -0,0 +1,97 @@
+import apiClient from './apiClient';
+import type { ApiResponse, Employee, EmployeeSearchResult, Page, DispatchHistory, Project } from '@/types';
+
+const employeeService = {
+  login(credentials: { loginId: string; password: string }) {
+    return apiClient.post<ApiResponse<{ accessToken: string; refreshToken: string; employee: Employee }>>('/auth/login', credentials);
+  },
+
+  refresh(refreshToken: string) {
+    return apiClient.post<ApiResponse<{ accessToken: string; refreshToken: string; employee: Employee }>>('/auth/refresh', { refreshToken });
+  },
+
+  getAll(params?: { roleCode?: string; empStatus?: string; dispatchStatus?: string; page?: number; size?: number }) {
+    return apiClient.get<ApiResponse<Page<Employee>>>('/employees', { params });
+  },
+
+  getOne(empId: number) {
+    return apiClient.get<ApiResponse<Employee>>(`/employees/${empId}`);
+  },
+
+  getMe() {
+    return apiClient.get<ApiResponse<Employee>>('/employees/me');
+  },
+
+  search(keyword: string) {
+    return apiClient.get<ApiResponse<EmployeeSearchResult[]>>('/employees/search', {
+      params: { keyword },
+    });
+  },
+
+  create(data: Partial<Employee>) {
+    return apiClient.post<ApiResponse<Employee>>('/employees', data);
+  },
+
+  update(empId: number, data: Partial<Employee>) {
+    return apiClient.put<ApiResponse<Employee>>(`/employees/${empId}`, data);
+  },
+
+  delete(empId: number) {
+    return apiClient.delete<ApiResponse<void>>(`/employees/${empId}`);
+  },
+
+  getDispatchHistories(empId: number) {
+    return apiClient.get<ApiResponse<DispatchHistory[]>>(`/employees/${empId}/dispatch-histories`);
+  },
+
+  getPortfolio(empId: number) {
+    return apiClient.get<ApiResponse<PortfolioEntry[]>>(`/employees/${empId}/portfolio`);
+  },
+
+  updateAchievements(empId: number, dispatchId: number, achievements: string) {
+    return apiClient.put<ApiResponse<void>>(`/employees/${empId}/dispatch-histories/${dispatchId}/achievements`, { achievements });
+  },
+
+  createDispatch(data: CreateDispatchRequest) {
+    return apiClient.post<ApiResponse<DispatchHistory>>('/dispatch-histories', data);
+  },
+
+  endDispatch(dispatchId: number) {
+    return apiClient.put<ApiResponse<DispatchHistory>>(`/dispatch-histories/${dispatchId}/end`);
+  },
+
+  getActiveDispatches() {
+    return apiClient.get<ApiResponse<DispatchHistory[]>>('/dispatch-histories/active');
+  },
+
+  changePassword(currentPassword: string, newPassword: string) {
+    return apiClient.put<ApiResponse<void>>('/employees/me/password', { currentPassword, newPassword });
+  },
+};
+
+export interface PortfolioEntry {
+  dispatchId: number;
+  projectName: string;
+  roleTitle: string;
+  contributionRate: number;
+  individualTech: string;
+  performedTasks: string;
+  achievements: string | null;
+  startDate: string;
+  endDate: string | null;
+  internalRating: number | null;
+  reports: { targetDate: string; reportType: string; completedTasks: string }[];
+  resolvedTickets: { ticketId: number; title: string; category: string; resolutionNote: string | null }[];
+}
+
+export interface CreateDispatchRequest {
+  employeeId: number;
+  projectId: number;
+  roleTitle: string;
+  contributionRate: number;
+  individualTech: string;
+  performedTasks: string;
+  startDate?: string;
+}
+
+export default employeeService;
diff --git a/src/services/equipmentService.ts b/src/services/equipmentService.ts
new file mode 100644
index 0000000..2bf7dfe
--- /dev/null
+++ b/src/services/equipmentService.ts
@@ -0,0 +1,52 @@
+import apiClient from './apiClient';
+import type { ApiResponse, Page, Equipment, EquipmentAssignment, EquipmentMaintenance } from '@/types';
+
+const equipmentService = {
+  getAll(params?: { type?: string; status?: string; manufacturer?: string; page?: number; size?: number }) {
+    return apiClient.get<ApiResponse<Page<Equipment>>>('/equipment', { params });
+  },
+
+  getOne(equipId: number) {
+    return apiClient.get<ApiResponse<Equipment>>(`/equipment/${equipId}`);
+  },
+
+  create(data: Partial<Equipment>) {
+    return apiClient.post<ApiResponse<Equipment>>('/equipment', data);
+  },
+
+  update(equipId: number, data: Partial<Equipment>) {
+    return apiClient.put<ApiResponse<Equipment>>(`/equipment/${equipId}`, data);
+  },
+
+  delete(equipId: number) {
+    return apiClient.delete<ApiResponse<void>>(`/equipment/${equipId}`);
+  },
+
+  assign(equipId: number, assigneeId: number, conditionNote: string) {
+    return apiClient.post<ApiResponse<EquipmentAssignment>>(`/equipment/${equipId}/assign`, {
+      assigneeId, conditionNote,
+    });
+  },
+
+  return_(equipId: number, data: { conditionNote?: string }) {
+    return apiClient.put<ApiResponse<EquipmentAssignment>>(`/equipment/${equipId}/return`, data);
+  },
+
+  getAssignments(equipId: number) {
+    return apiClient.get<ApiResponse<EquipmentAssignment[]>>(`/equipment/${equipId}/assignments`);
+  },
+
+  getMaintenances(equipId: number) {
+    return apiClient.get<ApiResponse<EquipmentMaintenance[]>>(`/equipment/${equipId}/maintenances`);
+  },
+
+  addMaintenance(equipId: number, data: Partial<EquipmentMaintenance>) {
+    return apiClient.post<ApiResponse<EquipmentMaintenance>>(`/equipment/${equipId}/maintenance`, data);
+  },
+
+  getSummary() {
+    return apiClient.get<ApiResponse<Record<string, number>>>('/equipment/summary');
+  },
+};
+
+export default equipmentService;
diff --git a/src/services/index.ts b/src/services/index.ts
new file mode 100644
index 0000000..0d5234a
--- /dev/null
+++ b/src/services/index.ts
@@ -0,0 +1,7 @@
+export { default as apiClient } from './apiClient';
+export { default as ticketService } from './ticketService';
+export { default as equipmentService } from './equipmentService';
+export { default as reportService } from './reportService';
+export { default as employeeService } from './employeeService';
+export { default as trainingService } from './trainingService';
+export { default as notificationService } from './notificationService';
diff --git a/src/services/notificationService.ts b/src/services/notificationService.ts
new file mode 100644
index 0000000..afd3a67
--- /dev/null
+++ b/src/services/notificationService.ts
@@ -0,0 +1,20 @@
+import apiClient from './apiClient';
+import type { ApiResponse, Notification } from '@/types';
+
+const notificationService = {
+  getUnreadCount() {
+    return apiClient.get<ApiResponse<{ count: number }>>('/notifications/unread');
+  },
+
+  getAll(page = 0, size = 20) {
+    return apiClient.get<ApiResponse<Notification[]>>('/notifications', {
+      params: { page, size },
+    });
+  },
+
+  markAsRead(notificationId: number) {
+    return apiClient.put<ApiResponse<void>>(`/notifications/${notificationId}/read`);
+  },
+};
+
+export default notificationService;
diff --git a/src/services/projectService.ts b/src/services/projectService.ts
new file mode 100644
index 0000000..1d5d58f
--- /dev/null
+++ b/src/services/projectService.ts
@@ -0,0 +1,32 @@
+import apiClient from './apiClient';
+import type { ApiResponse, Project } from '@/types';
+
+const projectService = {
+  getMyProjects(): Promise<ApiResponse<Project[]>> {
+    return apiClient.get('/projects/my');
+  },
+
+  getProject(projectId: number): Promise<ApiResponse<Project>> {
+    return apiClient.get(`/projects/${projectId}`);
+  },
+
+  getAll(status?: string): Promise<ApiResponse<Project[]>> {
+    return apiClient.get('/projects', {
+      params: status ? { status } : undefined,
+    });
+  },
+
+  create(data: Record<string, unknown>): Promise<ApiResponse<Project>> {
+    return apiClient.post('/projects', data);
+  },
+
+  update(projectId: number, data: Record<string, unknown>): Promise<ApiResponse<Project>> {
+    return apiClient.put(`/projects/${projectId}`, data);
+  },
+
+  deleteProject(projectId: number): Promise<ApiResponse<void>> {
+    return apiClient.delete(`/projects/${projectId}`);
+  },
+};
+
+export default projectService;
diff --git a/src/services/reportService.ts b/src/services/reportService.ts
new file mode 100644
index 0000000..8e5877f
--- /dev/null
+++ b/src/services/reportService.ts
@@ -0,0 +1,44 @@
+import apiClient from './apiClient';
+import type { ApiResponse, Page, ReportSummary, WorkReport } from '@/types';
+
+const reportService = {
+  getAll(params?: { reportType?: string; status?: string; userId?: number; page?: number; size?: number }) {
+    return apiClient.get<ApiResponse<Page<WorkReport>>>('/reports', { params });
+  },
+
+  getOne(reportId: number) {
+    return apiClient.get<ApiResponse<WorkReport>>(`/reports/${reportId}`);
+  },
+
+  create(data: Partial<WorkReport>) {
+    return apiClient.post<ApiResponse<WorkReport>>('/reports', data);
+  },
+
+  updateStatus(reportId: number, status: string) {
+    return apiClient.put<ApiResponse<WorkReport>>(`/reports/${reportId}/status`, null, {
+      params: { status },
+    });
+  },
+
+  review(reportId: number, status: 'APPROVED' | 'REJECTED', reviewComment: string) {
+    return apiClient.put<ApiResponse<WorkReport>>(`/reports/${reportId}/review`, {
+      status, reviewComment,
+    });
+  },
+
+  delete(reportId: number) {
+    return apiClient.delete<ApiResponse<void>>(`/reports/${reportId}`);
+  },
+
+  getSummary() {
+    return apiClient.get<ApiResponse<ReportSummary>>('/reports/summary');
+  },
+
+  getSrAutoComplete(targetDate: string) {
+    return apiClient.get<ApiResponse<string[]>>('/reports/sr-auto-complete', {
+      params: { targetDate },
+    });
+  },
+};
+
+export default reportService;
diff --git a/src/services/ticketService.ts b/src/services/ticketService.ts
new file mode 100644
index 0000000..b24f11b
--- /dev/null
+++ b/src/services/ticketService.ts
@@ -0,0 +1,56 @@
+import apiClient from './apiClient';
+import type { ApiResponse, Page, IssueTicket, TicketComment } from '@/types';
+
+export interface TicketFilterParams {
+  category?: string;
+  priority?: string;
+  status?: string;
+  searchKeyword?: string;
+  page?: number;
+  size?: number;
+}
+
+const ticketService = {
+  getTickets(params?: TicketFilterParams) {
+    return apiClient.get<ApiResponse<Page<IssueTicket>>>('/tickets', { params });
+  },
+
+  getTicket(ticketId: number) {
+    return apiClient.get<ApiResponse<IssueTicket>>(`/tickets/${ticketId}`);
+  },
+
+  createTicket(data: Partial<IssueTicket>) {
+    return apiClient.post<ApiResponse<IssueTicket>>('/tickets', data);
+  },
+
+  updateStatus(ticketId: number, status: string, assigneeId?: number) {
+    return apiClient.put<ApiResponse<IssueTicket>>(`/tickets/${ticketId}/status`, null, {
+      params: { status, assigneeId },
+    });
+  },
+
+  resolveTicket(ticketId: number, resolutionNote: string) {
+    return apiClient.put<ApiResponse<IssueTicket>>(`/tickets/${ticketId}/resolve`, { resolutionNote });
+  },
+
+  deleteTicket(ticketId: number) {
+    return apiClient.delete<ApiResponse<void>>(`/tickets/${ticketId}`);
+  },
+
+  getComments(ticketId: number) {
+    return apiClient.get<ApiResponse<TicketComment[]>>(`/tickets/${ticketId}/comments`);
+  },
+
+  addComment(ticketId: number, commentText: string, attachedFileUrl?: string) {
+    return apiClient.post<ApiResponse<TicketComment>>(`/tickets/${ticketId}/comments`, {
+      commentText,
+      attachedFileUrl,
+    });
+  },
+
+  deleteComment(ticketId: number, commentId: number) {
+    return apiClient.delete<ApiResponse<void>>(`/tickets/${ticketId}/comments/${commentId}`);
+  },
+};
+
+export default ticketService;
diff --git a/src/services/trainingService.ts b/src/services/trainingService.ts
new file mode 100644
index 0000000..cc79bdd
--- /dev/null
+++ b/src/services/trainingService.ts
@@ -0,0 +1,29 @@
+import apiClient from './apiClient';
+import type { ApiResponse, TrainingProgress } from '@/types';
+
+const trainingService = {
+  getMyProgress() {
+    return apiClient.get<ApiResponse<TrainingProgress[]>>('/training/me');
+  },
+
+  getByUser(userId: number) {
+    return apiClient.get<ApiResponse<TrainingProgress[]>>('/training', {
+      params: { userId },
+    });
+  },
+
+  update(progressId: number, data: { progressRate?: number; status?: string }) {
+    return apiClient.put<ApiResponse<TrainingProgress>>(`/training/${progressId}`, data);
+  },
+
+  getSummary() {
+    return apiClient.get<ApiResponse<Array<{
+      courseName: string;
+      totalEnrolled: number;
+      completedCount: number;
+      avgProgress: number;
+    }>>>('/training/summary');
+  },
+};
+
+export default trainingService;
diff --git a/src/services/wakeService.ts b/src/services/wakeService.ts
new file mode 100644
index 0000000..00d2c32
--- /dev/null
+++ b/src/services/wakeService.ts
@@ -0,0 +1,12 @@
+import apiClient from './apiClient';
+import type { ApiResponse, WakeRequest, WakeResponse } from '@/types';
+
+const wakeService = {
+  requestWake: (data: WakeRequest) =>
+    apiClient.post<ApiResponse<WakeResponse>>('/wake', data),
+
+  checkStatus: () =>
+    apiClient.get<ApiResponse<{ parked: boolean }>>('/health'),
+};
+
+export default wakeService;
diff --git a/src/stores/authStore.ts b/src/stores/authStore.ts
new file mode 100644
index 0000000..42bf068
--- /dev/null
+++ b/src/stores/authStore.ts
@@ -0,0 +1,87 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { Employee, LoginRequest } from '@/types';
+import employeeService from '@/services/employeeService';
+import { setCookie, removeCookie } from '@/lib/cookie';
+
+interface AuthState {
+  user: Employee | null;
+  accessToken: string | null;
+  refreshToken: string | null;
+  isAuthenticated: boolean;
+  login: (credentials: LoginRequest) => Promise<Employee>;
+  logout: () => void;
+  fetchMe: () => Promise<void>;
+  setUser: (user: Employee) => void;
+  tryRefresh: () => Promise<boolean>;
+}
+
+export const useAuthStore = create<AuthState>()(
+  persist(
+    (set, get) => ({
+      user: null,
+      accessToken: null,
+      refreshToken: null,
+      isAuthenticated: false,
+
+      login: async (credentials) => {
+        const res = await employeeService.login(credentials);
+        const { accessToken, refreshToken, employee } = res.data;
+        if (typeof window !== 'undefined') {
+          localStorage.setItem('accessToken', accessToken);
+          if (refreshToken) localStorage.setItem('refreshToken', refreshToken);
+          setCookie('accessToken', accessToken);
+        }
+        set({ user: employee, accessToken, refreshToken, isAuthenticated: true });
+        return employee;
+      },
+
+      logout: () => {
+        if (typeof window !== 'undefined') {
+          localStorage.removeItem('accessToken');
+          localStorage.removeItem('refreshToken');
+          removeCookie('accessToken');
+        }
+        set({ user: null, accessToken: null, refreshToken: null, isAuthenticated: false });
+      },
+
+      fetchMe: async () => {
+        try {
+          const res = await employeeService.getMe();
+          set({ user: res.data, isAuthenticated: true });
+        } catch {
+          get().logout();
+        }
+      },
+
+      setUser: (user) => set({ user, isAuthenticated: true }),
+
+      tryRefresh: async () => {
+        try {
+          const refreshToken = get().refreshToken;
+          if (!refreshToken) return false;
+          const res = await employeeService.refresh(refreshToken);
+          const { accessToken, refreshToken: newRefresh } = res.data;
+          if (typeof window !== 'undefined') {
+            localStorage.setItem('accessToken', accessToken);
+            if (newRefresh) localStorage.setItem('refreshToken', newRefresh);
+            setCookie('accessToken', accessToken);
+          }
+          set({ accessToken, refreshToken: newRefresh || refreshToken });
+          return true;
+        } catch {
+          return false;
+        }
+      },
+    }),
+    {
+      name: 'auth-storage',
+      partialize: (state) => ({
+        user: state.user,
+        accessToken: state.accessToken,
+        refreshToken: state.refreshToken,
+        isAuthenticated: state.isAuthenticated,
+      }),
+    },
+  ),
+);
diff --git a/src/stores/index.ts b/src/stores/index.ts
new file mode 100644
index 0000000..f84062d
--- /dev/null
+++ b/src/stores/index.ts
@@ -0,0 +1,3 @@
+export { useAuthStore } from './authStore';
+export { useNotificationStore } from './notificationStore';
+export { useParkingStore } from './parkingStore';
diff --git a/src/stores/notificationStore.ts b/src/stores/notificationStore.ts
new file mode 100644
index 0000000..8683434
--- /dev/null
+++ b/src/stores/notificationStore.ts
@@ -0,0 +1,59 @@
+import { create } from 'zustand';
+import notificationService from '@/services/notificationService';
+import type { Notification } from '@/types';
+
+interface NotificationState {
+  unreadCount: number;
+  notifications: Notification[];
+  polling: boolean;
+  fetchUnreadCount: () => Promise<void>;
+  fetchNotifications: () => Promise<void>;
+  markAsRead: (id: number) => Promise<void>;
+  startPolling: () => void;
+  stopPolling: () => void;
+}
+
+let pollingTimer: ReturnType<typeof setInterval> | null = null;
+
+export const useNotificationStore = create<NotificationState>()((set, get) => ({
+  unreadCount: 0,
+  notifications: [],
+  polling: false,
+
+  fetchUnreadCount: async () => {
+    try {
+      const res = await notificationService.getUnreadCount();
+      set({ unreadCount: res.data.count });
+    } catch { /* ignore polling errors */ }
+  },
+
+  fetchNotifications: async () => {
+    try {
+      const res = await notificationService.getAll();
+      set({ notifications: res.data });
+    } catch { /* ignore */ }
+  },
+
+  markAsRead: async (id) => {
+    await notificationService.markAsRead(id);
+    get().fetchUnreadCount();
+    get().fetchNotifications();
+  },
+
+  startPolling: () => {
+    if (pollingTimer) return;
+    get().fetchUnreadCount();
+    pollingTimer = setInterval(() => {
+      get().fetchUnreadCount();
+    }, 30000);
+    set({ polling: true });
+  },
+
+  stopPolling: () => {
+    if (pollingTimer) {
+      clearInterval(pollingTimer);
+      pollingTimer = null;
+    }
+    set({ polling: false });
+  },
+}));
diff --git a/src/stores/parkingStore.ts b/src/stores/parkingStore.ts
new file mode 100644
index 0000000..1e0768d
--- /dev/null
+++ b/src/stores/parkingStore.ts
@@ -0,0 +1,77 @@
+import { create } from 'zustand';
+import wakeService from '@/services/wakeService';
+
+interface ParkingState {
+  parked: boolean;
+  checking: boolean;
+  wakeLoading: boolean;
+  wakeSent: boolean;
+  wakeMessage: string;
+  checkParking: () => Promise<void>;
+  requestWake: (reason: string) => Promise<void>;
+  dismissWake: () => void;
+}
+
+const isParkingHours = (): boolean => {
+  const now = new Date();
+  const day = now.getDay();
+  const hour = now.getHours();
+  // Weekend (Sat=6, Sun=0) → always parked
+  if (day === 0 || day === 6) return true;
+  // Weekday 20:00 ~ 08:00 → parked
+  if (hour < 8 || hour >= 20) return true;
+  return false;
+};
+
+export const useParkingStore = create<ParkingState>()((set, get) => ({
+  parked: false,
+  checking: true,
+  wakeLoading: false,
+  wakeSent: false,
+  wakeMessage: '',
+
+  checkParking: async () => {
+    set({ checking: true });
+    try {
+      const res = await wakeService.checkStatus();
+      if (res.data.parked) {
+        set({ parked: true, checking: false });
+        return;
+      }
+    } catch {
+      // Network error → check if within parking hours
+      if (isParkingHours()) {
+        set({ parked: true, checking: false });
+        return;
+      }
+    }
+    set({ parked: false, checking: false });
+  },
+
+  requestWake: async (reason: string) => {
+    set({ wakeLoading: true, wakeSent: false, wakeMessage: '' });
+    try {
+      const name = typeof window !== 'undefined'
+        ? localStorage.getItem('userName') || 'Unknown'
+        : 'Unknown';
+      const res = await wakeService.requestWake({
+        requestedBy: name,
+        reason,
+        requestedAt: new Date().toISOString(),
+      });
+      set({
+        wakeLoading: false,
+        wakeSent: true,
+        wakeMessage: res.data.message,
+      });
+    } catch {
+      set({
+        wakeLoading: false,
+        wakeSent: true,
+        wakeMessage: '요청이 전송되었습니다. 관리자가 확인 후 서버를 기동합니다.',
+      });
+    }
+  },
+
+  dismissWake: () => set({ wakeSent: false, wakeMessage: '' }),
+}));
diff --git a/src/types/index.ts b/src/types/index.ts
new file mode 100644
index 0000000..5ba4180
--- /dev/null
+++ b/src/types/index.ts
@@ -0,0 +1,318 @@
+// ============================================
+// 공통 응답 타입
+// ============================================
+export interface ApiResponse<T> {
+  success: boolean;
+  message: string;
+  data: T;
+  errorCode?: string;
+}
+
+export interface Page<T> {
+  content: T[];
+  totalElements: number;
+  totalPages: number;
+  number: number;
+  size: number;
+}
+
+// ============================================
+// 공용 코드/상태 유니온
+// ============================================
+export type RoleCode = 'ADMIN' | 'MANAGER' | 'EMPLOYEE';
+export type EmpStatus = 'ACTIVE' | 'ON_LEAVE' | 'RESIGNED';
+export type DispatchStatus = 'WAITING' | 'DISPATCHED';
+
+export type TicketStatus = 'OPEN' | 'ASSIGNED' | 'IN_PROGRESS' | 'RESOLVED' | 'CLOSED';
+export type TicketCategory = 'BUG' | 'FEATURE' | 'SUPPORT' | 'QA';
+export type TicketPriority = 'LOW' | 'NORMAL' | 'HIGH' | 'CRITICAL';
+
+export type ReportType = 'DAILY' | 'WEEKLY' | 'MONTHLY' | 'RETURN';
+export type ReportStatus = 'DRAFT' | 'SUBMITTED' | 'APPROVED' | 'REJECTED';
+
+export type EquipmentType = 'LAPTOP' | 'MONITOR' | 'TEST_DEVICE' | 'ACCESSORY';
+export type EquipmentStatus = 'AVAILABLE' | 'IN_USE' | 'REPAIRING' | 'RETIRED' | 'LOST';
+export type MaintenanceType = 'REPAIR' | 'UPGRADE' | 'INSPECTION' | 'DISPOSAL';
+
+export type ProjectType = 'SI' | 'SM' | 'MIGRATION';
+export type ContractType = 'TURN_KEY' | 'MM';
+export type ProjectStatus = 'PREPARING' | 'ONGOING' | 'COMPLETED' | 'HOLD';
+export type WorkLocationType = 'ON_SITE' | 'REMOTE' | 'HYBRID';
+
+export type TrainingStatus = 'NOT_STARTED' | 'ONGOING' | 'COMPLETED';
+
+// ============================================
+// Employee (직원)
+// ============================================
+export interface Employee {
+  empId: number;
+  loginId: string;
+  name: string;
+  email: string;
+  roleCode: RoleCode;
+  empStatus: EmpStatus;
+  dispatchStatus: DispatchStatus;
+  joinedDate: string;
+  leftDate: string | null;
+}
+
+export interface EmployeeSearchResult {
+  empId: number;
+  name: string;
+  roleCode: RoleCode;
+  dispatchStatus: DispatchStatus;
+  email: string;
+}
+
+// ============================================
+// Project (프로젝트)
+// ============================================
+export interface Project {
+  projectId: number;
+  projectType: ProjectType;
+  projectName: string;
+  contractCompany: string;
+  endUserCompany: string;
+  contractType: ContractType;
+  status: ProjectStatus;
+  startDate: string;
+  endDate: string;
+  workLocationType: WorkLocationType;
+  workAddress: string;
+  techEnvironment: string;
+  mainTaskDesc: string;
+  internalManagerId: number | null;
+  internalManager?: { empId: number; name: string; email: string; } | null;
+}
+
+// ============================================
+// DispatchHistory (파견 이력 / 포트폴리오)
+// ============================================
+export interface DispatchHistory {
+  dispatchId: number;
+  empId: number;
+  projectId: number;
+  projectName?: string;
+  startDate: string;
+  endDate: string | null;
+  roleTitle: string;
+  contributionRate: number;
+  individualTech: string;
+  performedTasks: string;
+  achievements: string | null;
+  clientFeedback: string | null;
+  internalRating: number | null;
+}
+
+// ============================================
+// IssueTicket (SR 티켓)
+// ============================================
+export interface IssueTicket {
+  ticketId: number;
+  projectId: number;
+  projectName?: string;
+  requesterId: number;
+  requesterName?: string;
+  assigneeId: number | null;
+  assigneeName?: string | null;
+  category: TicketCategory;
+  priority: TicketPriority;
+  title: string;
+  description: string;
+  status: TicketStatus;
+  dueDate: string | null;
+  resolvedAt: string | null;
+  resolutionNote: string | null;
+  slaWarnFlag: 'Y' | 'N';
+  isImminent?: boolean;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface TicketComment {
+  commentId: number;
+  ticketId: number;
+  userId: number;
+  userName?: string;
+  commentText: string;
+  attachedFileUrl: string | null;
+  createdAt: string;
+}
+
+// ============================================
+// WorkReport (업무 보고서)
+// ============================================
+export interface WorkReport {
+  reportId: number;
+  dispatchId: number;
+  userId: number;
+  userName?: string;
+  reportType: ReportType;
+  targetDate: string;
+  completedTasks: string;
+  plannedTasks: string;
+  issuesAndRisks: string | null;
+  supportRequested: string | null;
+  status: ReportStatus;
+  workHours?: number | null;
+  blockerFlag?: string;
+  artifacts?: string;
+  reviewerId: number | null;
+  reviewerName?: string | null;
+  reviewComment: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+// ============================================
+// Equipment (IT 자산)
+// ============================================
+export interface EquipmentImage {
+  url: string;
+  name: string;
+  uploadedAt: string;
+}
+
+export interface Equipment {
+  equipmentId: number;
+  equipmentType: EquipmentType;
+  manufacturer: string;
+  modelName: string;
+  serialNumber: string;
+  assetCode: string;
+  specifications: Record<string, string>;
+  status: EquipmentStatus;
+  purchaseDate: string;
+  warrantyExpDate: string;
+  version: number;
+  images?: EquipmentImage[] | string;
+}
+
+export interface EquipmentAssignment {
+  assignmentId: number;
+  equipmentId: number;
+  userId: number;
+  userName?: string;
+  assignedDate: string;
+  returnedDate: string | null;
+  condOnAssign: string;
+  condOnReturn: string | null;
+}
+
+export interface EquipmentMaintenance {
+  maintenanceId: number;
+  equipmentId: number;
+  reportedBy: number;
+  reporterName?: string;
+  maintenanceType: MaintenanceType;
+  issueDescription: string;
+  actionTaken: string | null;
+  cost: number;
+  reportedDate: string;
+  resolvedDate: string | null;
+}
+
+// ============================================
+// Training (교육 진도)
+// ============================================
+export interface TrainingProgress {
+  progressId: number;
+  userId: number;
+  courseName: string;
+  progressRate: number;
+  status: TrainingStatus;
+  updatedAt: string;
+}
+
+export interface TrainingSummary {
+  courseName: string;
+  totalEnrolled: number;
+  completedCount: number;
+  avgProgress: number;
+}
+
+// ============================================
+// Notification (알림)
+// ============================================
+export interface Notification {
+  notificationId: number;
+  type: string;
+  title: string;
+  message: string;
+  isRead: boolean;
+  linkUrl?: string;
+  createdAt: string;
+}
+
+// ============================================
+// CalendarEvent (통합 일정)
+// ============================================
+export interface CalendarEvent {
+  eventType: 'TICKET_DUE' | 'REPORT_DUE' | 'DISPATCH_START' | 'DISPATCH_END';
+  sourceId: number;
+  title: string;
+  description?: string;
+  eventDate: string;
+  color: string;
+  linkUrl?: string;
+}
+
+// ============================================
+// ReportSummary (보고서 결재 요약)
+// ============================================
+export interface ReportSummary {
+  submitted: number;
+  approved: number;
+  rejected: number;
+  draft: number;
+}
+
+// ============================================
+// Parking (서버 파킹)
+// ============================================
+export interface ParkingStatus {
+  parked: boolean;
+  message: string;
+  resumeTime: string;
+  parkingSchedule: string;
+}
+
+export interface WakeRequest {
+  requestedBy: string;
+  reason: string;
+  requestedAt: string;
+}
+
+export interface WakeResponse {
+  success: boolean;
+  message: string;
+  estimatedWakeTime: string | null;
+}
+
+// ============================================
+// Auth
+// ============================================
+export interface LoginRequest {
+  loginId: string;
+  password: string;
+}
+
+export interface LoginResponse {
+  accessToken: string;
+  refreshToken: string;
+  employee: Employee;
+}
+
+// ============================================
+// Common Code
+// ============================================
+export interface CommonCode {
+  codeId: number;
+  groupCode: string;
+  codeValue: string;
+  codeName: string;
+  optionVal1: string | null;
+  optionVal2: string | null;
+  sortOrder: number;
+  isActive: 'Y' | 'N';
+}
diff --git a/start.sh b/start.sh
new file mode 100755
index 0000000..fb0e8a1
--- /dev/null
+++ b/start.sh
@@ -0,0 +1,210 @@
+#!/bin/bash
+
+PROJECT_DIR="$(cd "$(dirname "$0")" && pwd)"
+HTTPS_PROXY_PID_FILE="/tmp/sr-system-https-proxy.pid"
+BACKEND_LOG="/tmp/backend.log"
+FRONTEND_LOG="/tmp/frontend.log"
+
+# --- Helper functions ---
+
+# Wait until a given port is free (no LISTEN state).
+# Usage: wait_port_free <port> <timeout_seconds>
+# Returns 0 if free, 1 if timeout.
+wait_port_free() {
+  local port=$1
+  local timeout=${2:-15}
+  local waited=0
+  while [ $waited -lt $timeout ]; do
+    if ! lsof -i :"$port" -P -n -s TCP:LISTEN >/dev/null 2>&1; then
+      # Port is free — no LISTEN socket
+      return 0
+    fi
+    sleep 1
+    waited=$((waited + 1))
+  done
+  # One last check
+  if ! lsof -i :"$port" -P -n -s TCP:LISTEN >/dev/null 2>&1; then
+    return 0
+  fi
+  return 1
+}
+
+# Wait until the backend health endpoint responds.
+# Usage: wait_backend_ready <timeout_seconds>
+# Returns 0 if ready, 1 if timeout.
+wait_backend_ready() {
+  local timeout=${1:-60}
+  local waited=0
+  while [ $waited -lt $timeout ]; do
+    if curl -sf http://localhost:8080/api/v1/health >/dev/null 2>&1; then
+      return 0
+    fi
+    # Also check if the JVM process is still alive
+    sleep 2
+    waited=$((waited + 2))
+  done
+  return 1
+}
+
+# Kill all processes listening on a port, then wait for release.
+# Usage: stop_port <port> <timeout_seconds>
+stop_port() {
+  local port=$1
+  local timeout=${2:-10}
+  if lsof -ti:"$port" >/dev/null 2>&1; then
+    kill -9 "$(lsof -ti:"$port")" 2>/dev/null || true
+    wait_port_free "$port" "$timeout" || true
+    return 0
+  fi
+  return 1
+}
+
+# Stop the Gradle daemon for the backend project.
+  stop_gradle_daemon() {
+  if [ -f "$PROJECT_DIR/backend/gradlew" ]; then
+    cd "$PROJECT_DIR/backend"
+    DB_PASSWORD='!Tp@rtner$' ./gradlew --stop >/dev/null 2>&1 || true
+  fi
+}
+
+# --- Main commands ---
+
+case "${1:-}" in
+  stop)
+    echo "=== SR System - Stopping Services ==="
+    if [ -f "$HTTPS_PROXY_PID_FILE" ]; then
+      kill "$(cat "$HTTPS_PROXY_PID_FILE")" 2>/dev/null && echo "  HTTPS proxy stopped." || true
+      rm -f "$HTTPS_PROXY_PID_FILE"
+    fi
+
+    if stop_port 8080; then
+      echo "  Backend stopped."
+    else
+      echo "  Backend not running."
+    fi
+
+    if lsof -ti:3000 >/dev/null 2>&1; then
+      kill -9 "$(lsof -ti:3000)" 2>/dev/null
+      echo "  Frontend stopped."
+    else
+      echo "  Frontend not running."
+    fi
+
+    if lsof -ti:3443 >/dev/null 2>&1; then
+      kill -9 "$(lsof -ti:3443)" 2>/dev/null
+      echo "  HTTPS proxy stopped."
+    fi
+
+    echo "  Stopping Gradle daemon..."
+    stop_gradle_daemon
+    echo "=== Done ==="
+    exit 0
+    ;;
+  restart)
+    "$0" stop
+    # Port and daemon are fully released after stop
+    "$0"
+    exit 0
+    ;;
+  https)
+    # Start services first
+    "$0" 2>/dev/null
+    echo ""
+    CERT="$PROJECT_DIR/192.168.31.168+2.pem"
+    KEY="$PROJECT_DIR/192.168.31.168+2-key.pem"
+    if [ ! -f "$CERT" ]; then
+      echo "SSL certificate not found. Creating..."
+      mkcert 192.168.31.168 localhost 127.0.0.1 2>/dev/null
+      echo "  Cert created."
+      echo ""
+      echo "  To trust on iPhone:"
+      echo "  1. Open http://192.168.31.168:3000/192.168.31.168+2.pem in Safari"
+      echo "  2. Download and install the profile"
+      echo "  3. Settings → General → About → Certificate Trust Settings → Enable"
+    fi
+    echo "[3/3] Starting HTTPS proxy (WebSocket enabled)..."
+    nohup node "$PROJECT_DIR/https-proxy.js" "$CERT" "$KEY" localhost 3000 3443 0.0.0.0 > /tmp/https-proxy.log 2>&1 &
+    HTTPS_PID=$!
+    echo "$HTTPS_PID" > "$HTTPS_PROXY_PID_FILE"
+    echo "  Waiting for HTTPS proxy..."
+    for i in $(seq 1 5); do
+      sleep 1
+      if curl -sk -o /dev/null https://192.168.31.168:3443/ 2>/dev/null; then break; fi
+    done
+    echo ""
+    echo "  iPhone: https://192.168.31.168:3443"
+    echo ""
+    echo "  Note: iOS shows 'Not Secure'. Tap 'Show Details' -> 'Visit This Website'."
+    echo "  Camera works after accepting the certificate."
+    exit 0
+    ;;
+esac
+
+echo "=== SR System - Starting Services ==="
+
+# ---- Backend ----
+if lsof -ti:8080 >/dev/null 2>&1; then
+  BACKEND_PID=$(lsof -ti:8080)
+  echo "[1/2] Backend already running (PID: $BACKEND_PID)"
+else
+  echo "[1/2] Starting Spring Boot backend..."
+
+  # 1. Ensure port 8080 is fully released (handle TIME_WAIT from killed processes)
+  if lsof -i :8080 -P -n >/dev/null 2>&1; then
+    echo "  Port 8080 in use — waiting for release..."
+    kill -9 "$(lsof -ti:8080)" 2>/dev/null || true
+    if ! wait_port_free 8080 15; then
+      echo "  ERROR: Port 8080 still bound after 15s. Aborting."
+      exit 1
+    fi
+  fi
+
+  # 2. Stop any stale Gradle daemon (avoids "daemon already running" race)
+  echo "  Stopping any stale Gradle daemon..."
+  stop_gradle_daemon
+
+  # 3. Start backend via bootRun
+  echo "  Starting bootRun..."
+  cd "$PROJECT_DIR/backend"
+  DB_PASSWORD='!Tp@rtner$' nohup ./gradlew bootRun --no-daemon > "$BACKEND_LOG" 2>&1 &
+  BACKEND_PID=$!
+  echo "  Backend PID: $BACKEND_PID"
+
+  # 4. Wait for backend to become ready (up to 60s)
+  echo "  Waiting for backend on port 8080..."
+  if wait_backend_ready 60; then
+    echo "  Backend ready!"
+  else
+    echo "  Backend failed to start. Check $BACKEND_LOG"
+    tail -30 "$BACKEND_LOG" 2>/dev/null || true
+    exit 1
+  fi
+fi
+
+# ---- Frontend ----
+if lsof -ti:3000 >/dev/null 2>&1; then
+  FRONTEND_PID=$(lsof -ti:3000)
+  echo "[2/2] Frontend already running (PID: $FRONTEND_PID)"
+else
+  echo "[2/2] Starting Next.js frontend..."
+  cd "$PROJECT_DIR"
+  nohup npx next dev -H 0.0.0.0 -p 3000 > "$FRONTEND_LOG" 2>&1 &
+  FRONTEND_PID=$!
+  echo "  Frontend PID: $FRONTEND_PID"
+  sleep 3
+fi
+
+echo ""
+echo "=== SR System is running ==="
+echo "  Local:    http://localhost:3000"
+echo "  Network:  http://192.168.31.168:3000"
+echo "  Backend:  http://localhost:8080"
+echo ""
+echo "  For iPhone camera (HTTPS):"
+echo "    ./start.sh https"
+echo ""
+echo "Commands:"
+echo "  ./start.sh          - Start services"
+echo "  ./start.sh https    - Start + HTTPS proxy (for iPhone camera)"
+echo "  ./start.sh stop     - Stop all services"
+echo "  ./start.sh restart  - Restart all services"
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..cf9c65d
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}