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:
DDD1542
@@ -430,9 +430,9 @@ export default function NodeSettingModal({
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2 text-base sm:text-lg">
|
||||
{nodeType === "screen" ? (
|
||||
<Database className="h-5 w-5 text-blue-500" />
|
||||
<Database className="h-5 w-5 text-primary" />
|
||||
) : (
|
||||
<Database className="h-5 w-5 text-green-500" />
|
||||
<Database className="h-5 w-5 text-emerald-500" />
|
||||
)}
|
||||
{modalTitle}
|
||||
</DialogTitle>
|
||||
@@ -848,13 +848,13 @@ function TableRelationTab({
|
||||
</TableRow>
|
||||
) : (
|
||||
v2TableRelations.map((item) => (
|
||||
<TableRow key={item.id} className={item.source === "designer" ? "bg-orange-50/50" : ""}>
|
||||
<TableRow key={item.id} className={item.source === "designer" ? "bg-amber-50/50" : ""}>
|
||||
<TableCell className="text-xs">
|
||||
<Badge variant="outline" className={cn(
|
||||
"h-5 px-2",
|
||||
item.source === "designer"
|
||||
? "border-orange-400 text-orange-700 bg-orange-100"
|
||||
: "border-blue-400 text-blue-700 bg-blue-100"
|
||||
? "border-orange-400 text-orange-700 bg-amber-100"
|
||||
: "border-primary/60 text-primary bg-primary/10"
|
||||
)}>
|
||||
{item.source === "designer" ? "화면" : "DB"}
|
||||
</Badge>
|
||||
@@ -879,7 +879,7 @@ function TableRelationTab({
|
||||
{item.source === "designer" && "joinColumnRefs" in item && item.joinColumnRefs && item.joinColumnRefs.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1 mt-1">
|
||||
{item.joinColumnRefs.map((join, idx) => (
|
||||
<span key={idx} className="px-1.5 py-0.5 bg-orange-100 text-orange-600 text-[10px] rounded">
|
||||
<span key={idx} className="px-1.5 py-0.5 bg-amber-100 text-amber-600 text-[10px] rounded">
|
||||
{join.column}→{join.refTable}
|
||||
</span>
|
||||
))}
|
||||
@@ -888,10 +888,10 @@ function TableRelationTab({
|
||||
</TableCell>
|
||||
<TableCell className="text-xs">
|
||||
<span className={`px-2 py-1 rounded text-xs ${
|
||||
item.relation_type === "main" ? "bg-blue-100 text-blue-700" :
|
||||
item.relation_type === "main" ? "bg-primary/10 text-primary" :
|
||||
item.relation_type === "sub" ? "bg-purple-100 text-purple-700" :
|
||||
item.relation_type === "save" ? "bg-pink-100 text-pink-700" :
|
||||
"bg-gray-100 text-gray-700"
|
||||
"bg-muted text-foreground"
|
||||
}`}>
|
||||
{item.relation_type === "main" ? "메인" :
|
||||
item.relation_type === "sub" ? "필터" :
|
||||
@@ -1234,10 +1234,10 @@ function JoinSettingTab({
|
||||
|
||||
{/* 참조 정보 (이 테이블을 참조하는 다른 테이블들) */}
|
||||
{existingConfig?.referencedBy && existingConfig.referencedBy.length > 0 && (
|
||||
<div className="bg-green-50 border border-green-200 rounded-lg p-4">
|
||||
<div className="bg-emerald-50 border border-emerald-200 rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<GitBranch className="h-4 w-4 text-green-600" />
|
||||
<span className="text-sm font-medium text-green-800">이 테이블을 참조하는 관계</span>
|
||||
<GitBranch className="h-4 w-4 text-emerald-600" />
|
||||
<span className="text-sm font-medium text-emerald-800">이 테이블을 참조하는 관계</span>
|
||||
</div>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
@@ -1255,9 +1255,9 @@ function JoinSettingTab({
|
||||
</TableCell>
|
||||
<TableCell className="text-xs">
|
||||
<span className={`px-2 py-0.5 rounded text-xs ${
|
||||
ref.relationType === 'join' ? 'bg-orange-100 text-orange-700' :
|
||||
ref.relationType === 'join' ? 'bg-amber-100 text-orange-700' :
|
||||
ref.relationType === 'filter' ? 'bg-purple-100 text-purple-700' :
|
||||
'bg-gray-100 text-gray-700'
|
||||
'bg-muted text-foreground'
|
||||
}`}>
|
||||
{ref.relationType}
|
||||
</span>
|
||||
@@ -1434,14 +1434,14 @@ function JoinSettingTab({
|
||||
</TableRow>
|
||||
) : (
|
||||
v2Joins.map((item) => (
|
||||
<TableRow key={item.id} className={item.source === "designer" ? "bg-orange-50/50" : ""}>
|
||||
<TableRow key={item.id} className={item.source === "designer" ? "bg-amber-50/50" : ""}>
|
||||
<TableCell className="text-xs">
|
||||
{item.source === "designer" ? (
|
||||
<span className="px-2 py-0.5 rounded bg-orange-100 text-orange-700 text-xs">
|
||||
<span className="px-2 py-0.5 rounded bg-amber-100 text-orange-700 text-xs">
|
||||
화면
|
||||
</span>
|
||||
) : (
|
||||
<span className="px-2 py-0.5 rounded bg-blue-100 text-blue-700 text-xs">
|
||||
<span className="px-2 py-0.5 rounded bg-primary/10 text-primary text-xs">
|
||||
DB
|
||||
</span>
|
||||
)}
|
||||
@@ -1451,7 +1451,7 @@ function JoinSettingTab({
|
||||
<TableCell className="text-xs">{item.join_table_label || item.join_table}</TableCell>
|
||||
<TableCell className="text-xs font-mono">{item.join_column}</TableCell>
|
||||
<TableCell className="text-xs">
|
||||
<span className="px-2 py-1 rounded bg-gray-100 text-gray-700 text-xs">
|
||||
<span className="px-2 py-1 rounded bg-muted text-foreground text-xs">
|
||||
{item.join_type}
|
||||
</span>
|
||||
</TableCell>
|
||||
@@ -1485,9 +1485,9 @@ function JoinSettingTab({
|
||||
</TableBody>
|
||||
</Table>
|
||||
{designerJoins.length > 0 && (
|
||||
<div className="px-4 py-2 border-t text-xs text-muted-foreground bg-orange-50/30">
|
||||
<span className="text-orange-600">* 화면</span>: 화면 디자이너 설정 (수정 시 DB에 저장) |
|
||||
<span className="text-blue-600 ml-1">* DB</span>: DB 저장 설정 (직접 수정/삭제 가능)
|
||||
<div className="px-4 py-2 border-t text-xs text-muted-foreground bg-amber-50/30">
|
||||
<span className="text-amber-600">* 화면</span>: 화면 디자이너 설정 (수정 시 DB에 저장) |
|
||||
<span className="text-primary ml-1">* DB</span>: DB 저장 설정 (직접 수정/삭제 가능)
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -1745,7 +1745,7 @@ function DataFlowTab({
|
||||
<span className={`px-2 py-1 rounded text-xs ${
|
||||
item.flow_type === "bidirectional"
|
||||
? "bg-purple-100 text-purple-700"
|
||||
: "bg-blue-100 text-blue-700"
|
||||
: "bg-primary/10 text-primary"
|
||||
}`}>
|
||||
{item.flow_type === "bidirectional" ? "양방향" : "단방향"}
|
||||
</span>
|
||||
@@ -1805,7 +1805,7 @@ function FieldMappingTab({
|
||||
<div className="space-y-4">
|
||||
<div className="bg-muted/50 rounded-lg p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<Columns3 className="h-5 w-5 text-blue-500" />
|
||||
<Columns3 className="h-5 w-5 text-primary" />
|
||||
<span className="text-sm font-medium">필드-컬럼 매핑</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
@@ -1851,13 +1851,13 @@ function FieldMappingTab({
|
||||
<TableCell className="text-xs">{col.displayName}</TableCell>
|
||||
<TableCell className="text-xs text-muted-foreground">{col.dbType}</TableCell>
|
||||
<TableCell className="text-xs">
|
||||
<span className="px-2 py-0.5 rounded bg-gray-100 text-gray-700 text-xs">
|
||||
<span className="px-2 py-0.5 rounded bg-muted text-foreground text-xs">
|
||||
{col.webType}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-xs">
|
||||
{col.isPrimaryKey && (
|
||||
<span className="px-2 py-0.5 rounded bg-yellow-100 text-yellow-700 text-xs">
|
||||
<span className="px-2 py-0.5 rounded bg-amber-100 text-yellow-700 text-xs">
|
||||
PK
|
||||
</span>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user