jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 전체 프론트엔드 하드코딩 색상 → CSS 변수 일괄 치환

Browse Source 
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:
DDD1542
2026-03-09 14:31:59 +09:00
parent d967cf0a0d
commit 4f10b5e42d
447 changed files with 4520 additions and 4520 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx
View File

@@ -2527,21 +2527,21 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
{isDesignMode ? (
// 디자인 모드: 샘플 테이블
<div className="overflow-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<table className="min-w-full divide-y divide-border">
<thead className="bg-muted">
<tr>
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 1</th>
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 2</th>
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase">컬럼 3</th>
<th className="px-3 py-2 text-left text-xs font-medium text-muted-foreground uppercase">컬럼 1</th>
<th className="px-3 py-2 text-left text-xs font-medium text-muted-foreground uppercase">컬럼 2</th>
<th className="px-3 py-2 text-left text-xs font-medium text-muted-foreground uppercase">컬럼 3</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 bg-white">
<tr className="cursor-pointer hover:bg-gray-50">
<tbody className="divide-y divide-border bg-white">
<tr className="cursor-pointer hover:bg-muted">
<td className="px-3 py-2 text-sm whitespace-nowrap">데이터 1-1</td>
<td className="px-3 py-2 text-sm whitespace-nowrap">데이터 1-2</td>
<td className="px-3 py-2 text-sm whitespace-nowrap">데이터 1-3</td>
</tr>
<tr className="cursor-pointer hover:bg-gray-50">
<tr className="cursor-pointer hover:bg-muted">
<td className="px-3 py-2 text-sm whitespace-nowrap">데이터 2-1</td>
<td className="px-3 py-2 text-sm whitespace-nowrap">데이터 2-2</td>
<td className="px-3 py-2 text-sm whitespace-nowrap">데이터 2-3</td>
@@ -2607,16 +2607,16 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
<div className="overflow-auto">
{groupedLeftData.map((group, groupIdx) => (
<div key={groupIdx} className="mb-4">
<div className="bg-gray-100 px-3 py-2 text-sm font-semibold">
<div className="bg-muted px-3 py-2 text-sm font-semibold">
{group.groupKey} ({group.count}개)
</div>
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<table className="min-w-full divide-y divide-border">
<thead className="bg-muted">
<tr>
{columnsToShow.map((col, idx) => (
<th
key={idx}
className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
className="px-3 py-2 text-left text-xs font-medium tracking-wider text-muted-foreground uppercase"
style={{
width: col.width ? `${col.width}px` : "auto",
textAlign: col.align || "left",
@@ -2627,7 +2627,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
))}
</tr>
</thead>
<tbody className="divide-y divide-gray-200 bg-white">
<tbody className="divide-y divide-border bg-white">
{group.items.map((item, idx) => {
const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || "id";
const itemId = item[sourceColumn] || item.id || item.ID;
@@ -2646,7 +2646,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
{columnsToShow.map((col, colIdx) => (
<td
key={colIdx}
className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
className="px-3 py-2 text-sm whitespace-nowrap text-foreground"
style={{ textAlign: col.align || "left" }}
>
{formatCellValue(
@@ -2671,13 +2671,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
// 🔧 일반 테이블 렌더링 (그룹화 없음)
return (
<div className="overflow-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="sticky top-0 z-10 bg-gray-50">
<table className="min-w-full divide-y divide-border">
<thead className="sticky top-0 z-10 bg-muted">
<tr>
{columnsToShow.map((col, idx) => (
<th
key={idx}
className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
className="px-3 py-2 text-left text-xs font-medium tracking-wider text-muted-foreground uppercase"
style={{
width: col.width ? `${col.width}px` : "auto",
minWidth: "80px",
@@ -2689,7 +2689,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
))}
</tr>
</thead>
<tbody className="divide-y divide-gray-200 bg-white">
<tbody className="divide-y divide-border bg-white">
{filteredData.map((item, idx) => {
const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || "id";
const itemId = item[sourceColumn] || item.id || item.ID;
@@ -2708,7 +2708,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
{columnsToShow.map((col, colIdx) => (
<td
key={colIdx}
className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
className="px-3 py-2 text-sm whitespace-nowrap text-foreground"
style={{ textAlign: col.align || "left" }}
>
{formatCellValue(
@@ -2867,9 +2867,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
{hasChildren ? (
<div className="flex-shrink-0">
{isExpanded ? (
<ChevronDown className="h-4 w-4 text-gray-500" />
<ChevronDown className="h-4 w-4 text-muted-foreground" />
) : (
<ChevronRight className="h-4 w-4 text-gray-500" />
<ChevronRight className="h-4 w-4 text-muted-foreground" />
)}
</div>
) : (
@@ -2893,10 +2893,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
e.stopPropagation();
handleEditClick("left", item);
}}
className="rounded p-1 transition-colors hover:bg-gray-200"
className="rounded p-1 transition-colors hover:bg-muted/80"
title="수정"
>
<Pencil className="h-4 w-4 text-gray-600" />
<Pencil className="h-4 w-4 text-muted-foreground" />
</button>
{/* 삭제 버튼 */}
@@ -2905,10 +2905,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
e.stopPropagation();
handleDeleteClick("left", item);
}}
className="rounded p-1 transition-colors hover:bg-red-100"
className="rounded p-1 transition-colors hover:bg-destructive/10"
title="삭제"
>
<Trash2 className="h-4 w-4 text-red-600" />
<Trash2 className="h-4 w-4 text-destructive" />
</button>
{/* 항목별 추가 버튼 */}
@@ -2918,10 +2918,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
e.stopPropagation();
handleItemAddClick(item);
}}
className="rounded p-1 transition-colors hover:bg-gray-200"
className="rounded p-1 transition-colors hover:bg-muted/80"
title="하위 항목 추가"
>
<Plus className="h-4 w-4 text-gray-600" />
<Plus className="h-4 w-4 text-muted-foreground" />
</button>
)}
</div>
@@ -3154,7 +3154,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
<Button
variant="ghost"
size="sm"
className="h-7 w-7 p-0 text-red-500 hover:text-red-600"
className="h-7 w-7 p-0 text-destructive hover:text-destructive"
onClick={() => handleDeleteClick("right", item)}
>
<Trash2 className="h-3.5 w-3.5" />
@@ -3231,7 +3231,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
<Button
variant="ghost"
size="sm"
className="h-7 w-7 p-0 text-red-500 hover:text-red-600"
className="h-7 w-7 p-0 text-destructive hover:text-destructive"
onClick={(e) => {
e.stopPropagation();
handleDeleteClick("right", item);
@@ -3242,9 +3242,9 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
)}
{detailColumns.length > 0 &&
(isExpanded ? (
<ChevronUp className="h-4 w-4 text-gray-400" />
<ChevronUp className="h-4 w-4 text-muted-foreground/70" />
) : (
<ChevronDown className="h-4 w-4 text-gray-400" />
<ChevronDown className="h-4 w-4 text-muted-foreground/70" />
))}
</div>
</div>
@@ -3357,13 +3357,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
)}
</div>
<div className="overflow-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="sticky top-0 z-10 bg-gray-50">
<table className="min-w-full divide-y divide-border">
<thead className="sticky top-0 z-10 bg-muted">
<tr>
{columnsToShow.map((col, idx) => (
<th
key={idx}
className="px-3 py-2 text-left text-xs font-medium tracking-wider text-gray-500 uppercase"
className="px-3 py-2 text-left text-xs font-medium tracking-wider text-muted-foreground uppercase"
style={{
width: col.width ? `${col.width}px` : "auto",
textAlign: col.align || "left",
@@ -3376,13 +3376,13 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
{!isDesignMode &&
((componentConfig.rightPanel?.editButton?.enabled ?? true) ||
(componentConfig.rightPanel?.deleteButton?.enabled ?? true)) && (
<th className="px-3 py-2 text-right text-xs font-medium text-gray-500 uppercase">
<th className="px-3 py-2 text-right text-xs font-medium text-muted-foreground uppercase">
작업
</th>
)}
</tr>
</thead>
<tbody className="divide-y divide-gray-200 bg-white">
<tbody className="divide-y divide-border bg-white">
{filteredData.map((item, idx) => {
const itemId = item.id || item.ID;
@@ -3391,7 +3391,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
{columnsToShow.map((col, colIdx) => (
<td
key={colIdx}
className="px-3 py-2 text-sm whitespace-nowrap text-gray-900"
className="px-3 py-2 text-sm whitespace-nowrap text-foreground"
style={{ textAlign: col.align || "left" }}
>
{formatCellValue(
@@ -3430,10 +3430,10 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
e.stopPropagation();
handleDeleteClick("right", item);
}}
className="rounded p-1 transition-colors hover:bg-red-100"
className="rounded p-1 transition-colors hover:bg-destructive/10"
title={componentConfig.rightPanel?.deleteButton?.buttonLabel || "삭제"}
>
<Trash2 className="h-4 w-4 text-red-600" />
<Trash2 className="h-4 w-4 text-destructive" />
</button>
)}
</div>
@@ -3563,16 +3563,16 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
e.stopPropagation();
handleDeleteClick("right", item);
}}
className="rounded p-1 transition-colors hover:bg-red-100"
className="rounded p-1 transition-colors hover:bg-destructive/10"
title={componentConfig.rightPanel?.deleteButton?.buttonLabel || "삭제"}
>
<Trash2 className="h-4 w-4 text-red-600" />
<Trash2 className="h-4 w-4 text-destructive" />
</button>
)}
{/* 확장/접기 버튼 */}
<button
onClick={() => toggleRightItemExpansion(itemId)}
className="rounded p-1 transition-colors hover:bg-gray-200"
className="rounded p-1 transition-colors hover:bg-muted/80"
>
{isExpanded ? (
<ChevronUp className="text-muted-foreground h-5 w-5" />
@@ -3777,7 +3777,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
<div key={index}>
<Label htmlFor={col.name} className="text-xs sm:text-sm">
{col.label} {col.required && <span className="text-destructive">*</span>}
{isPreFilled && <span className="ml-2 text-[10px] text-blue-600">(자동 설정됨)</span>}
{isPreFilled && <span className="ml-2 text-[10px] text-primary">(자동 설정됨)</span>}
</Label>
<Input
id={col.name}