refactor: 전체 프론트엔드 하드코딩 색상 → CSS 변수 일괄 치환
447+ 파일, 4500+ 줄 변경: - gray-* → border/bg-muted/text-foreground/text-muted-foreground - blue-* → primary/ring - red-* → destructive - green-* → emerald (일관성) - indigo-* → primary - yellow/orange → amber (통일) - dark mode 변형도 시맨틱 토큰으로 변환 Made-with: Cursor
This commit is contained in:
@@ -102,26 +102,26 @@ export function TableHistoryModal({
|
||||
const getOperationIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case "INSERT":
|
||||
return <Plus className="h-4 w-4 text-green-600" />;
|
||||
return <Plus className="h-4 w-4 text-emerald-600" />;
|
||||
case "UPDATE":
|
||||
return <FileEdit className="h-4 w-4 text-blue-600" />;
|
||||
return <FileEdit className="h-4 w-4 text-primary" />;
|
||||
case "DELETE":
|
||||
return <Trash2 className="h-4 w-4 text-red-600" />;
|
||||
return <Trash2 className="h-4 w-4 text-destructive" />;
|
||||
default:
|
||||
return <Clock className="h-4 w-4 text-gray-600" />;
|
||||
return <Clock className="h-4 w-4 text-muted-foreground" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getOperationBadge = (type: string) => {
|
||||
switch (type) {
|
||||
case "INSERT":
|
||||
return <span className="text-sm font-medium text-green-600">추가</span>;
|
||||
return <span className="text-sm font-medium text-emerald-600">추가</span>;
|
||||
case "UPDATE":
|
||||
return <span className="text-sm font-medium text-blue-600">수정</span>;
|
||||
return <span className="text-sm font-medium text-primary">수정</span>;
|
||||
case "DELETE":
|
||||
return <span className="text-sm font-medium text-red-600">삭제</span>;
|
||||
return <span className="text-sm font-medium text-destructive">삭제</span>;
|
||||
default:
|
||||
return <span className="text-sm font-medium text-gray-600">{type}</span>;
|
||||
return <span className="text-sm font-medium text-muted-foreground">{type}</span>;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -301,8 +301,8 @@ export function TableHistoryModal({
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
{timeline.map((event, index) => (
|
||||
<div key={index} className="relative border-l-2 border-gray-200 pb-6 pl-8 last:border-l-0">
|
||||
<div className="absolute top-0 -left-3 rounded-full border-2 border-gray-200 bg-white p-1">
|
||||
<div key={index} className="relative border-l-2 border-border pb-6 pl-8 last:border-l-0">
|
||||
<div className="absolute top-0 -left-3 rounded-full border-2 border-border bg-white p-1">
|
||||
{getOperationIcon(event.operation_type)}
|
||||
</div>
|
||||
|
||||
@@ -325,12 +325,12 @@ export function TableHistoryModal({
|
||||
<p className="text-muted-foreground text-xs font-medium">변경된 항목:</p>
|
||||
<div className="space-y-1">
|
||||
{event.changes.map((change, idx) => (
|
||||
<div key={idx} className="rounded bg-gray-50 p-2 text-xs">
|
||||
<div key={idx} className="rounded bg-muted p-2 text-xs">
|
||||
<span className="font-mono font-medium">{change.column}</span>
|
||||
<div className="mt-1 flex items-center gap-2">
|
||||
<span className="text-red-600 line-through">{change.oldValue || "(없음)"}</span>
|
||||
<span className="text-destructive line-through">{change.oldValue || "(없음)"}</span>
|
||||
<span>→</span>
|
||||
<span className="font-medium text-green-600">{change.newValue || "(없음)"}</span>
|
||||
<span className="font-medium text-emerald-600">{change.newValue || "(없음)"}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -355,7 +355,7 @@ export function TableHistoryModal({
|
||||
</div>
|
||||
) : (
|
||||
<table className="w-full text-xs">
|
||||
<thead className="sticky top-0 border-b bg-gray-50">
|
||||
<thead className="sticky top-0 border-b bg-muted">
|
||||
<tr>
|
||||
{!recordId && <th className="p-2 text-left font-medium">레코드</th>}
|
||||
<th className="p-2 text-left font-medium">작업</th>
|
||||
@@ -370,11 +370,11 @@ export function TableHistoryModal({
|
||||
{detailRecords.map((record) => {
|
||||
const displayValue = getDisplayValue(record);
|
||||
return (
|
||||
<tr key={record.log_id} className="border-b hover:bg-gray-50">
|
||||
<tr key={record.log_id} className="border-b hover:bg-muted">
|
||||
{!recordId && (
|
||||
<td className="p-2">
|
||||
{displayValue ? (
|
||||
<span className="font-medium text-gray-900">{displayValue}</span>
|
||||
<span className="font-medium text-foreground">{displayValue}</span>
|
||||
) : (
|
||||
<span className="text-muted-foreground text-xs">-</span>
|
||||
)}
|
||||
@@ -382,8 +382,8 @@ export function TableHistoryModal({
|
||||
)}
|
||||
<td className="p-2">{getOperationBadge(record.operation_type)}</td>
|
||||
<td className="p-2 font-mono">{record.changed_column}</td>
|
||||
<td className="max-w-[200px] truncate p-2 text-red-600">{record.old_value || "-"}</td>
|
||||
<td className="max-w-[200px] truncate p-2 text-green-600">{record.new_value || "-"}</td>
|
||||
<td className="max-w-[200px] truncate p-2 text-destructive">{record.old_value || "-"}</td>
|
||||
<td className="max-w-[200px] truncate p-2 text-emerald-600">{record.new_value || "-"}</td>
|
||||
<td className="p-2">{record.changed_by}</td>
|
||||
<td className="text-muted-foreground p-2">{formatDate(record.changed_at)}</td>
|
||||
</tr>
|
||||
|
||||
Reference in New Issue
Block a user