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
@@ -545,7 +545,7 @@ export function ModalRepeaterTableConfigPanel({
|
||||
<Check className={cn("mr-2 h-4 w-4", localConfig.sourceTable === table.tableName ? "opacity-100" : "opacity-0")} />
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{table.displayName || table.tableName}</span>
|
||||
{table.displayName && <span className="text-[10px] text-gray-500">{table.tableName}</span>}
|
||||
{table.displayName && <span className="text-[10px] text-muted-foreground">{table.tableName}</span>}
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
@@ -603,7 +603,7 @@ export function ModalRepeaterTableConfigPanel({
|
||||
<Check className={cn("mr-2 h-4 w-4", localConfig.targetTable === table.tableName ? "opacity-100" : "opacity-0")} />
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{table.displayName || table.tableName}</span>
|
||||
{table.displayName && <span className="text-[10px] text-gray-500">{table.tableName}</span>}
|
||||
{table.displayName && <span className="text-[10px] text-muted-foreground">{table.tableName}</span>}
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
@@ -792,7 +792,7 @@ export function ModalRepeaterTableConfigPanel({
|
||||
<Check className={cn("mr-2 h-4 w-4", localConfig.uniqueField === column.columnName ? "opacity-100" : "opacity-0")} />
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{column.displayName || column.columnName}</span>
|
||||
{column.displayName && <span className="text-[10px] text-gray-500">{column.columnName}</span>}
|
||||
{column.displayName && <span className="text-[10px] text-muted-foreground">{column.columnName}</span>}
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
@@ -1102,7 +1102,7 @@ export function ModalRepeaterTableConfigPanel({
|
||||
|
||||
{col.mapping?.type === "source" && (
|
||||
<div className="space-y-3">
|
||||
<div className="p-3 bg-blue-50 dark:bg-blue-950 rounded-md border border-blue-200 dark:border-blue-800">
|
||||
<div className="p-3 bg-primary/10 dark:bg-primary/15 rounded-md border border-primary/20 dark:border-primary/30">
|
||||
<p className="text-xs font-medium mb-2">소스 테이블에서 복사</p>
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
모달 검색에서 선택한 항목(소스 테이블)의 컬럼 값을 가져옴
|
||||
@@ -1466,7 +1466,7 @@ export function ModalRepeaterTableConfigPanel({
|
||||
{/* 조인 조건 미리보기 */}
|
||||
{condition.sourceField && condition.targetField && (
|
||||
<div className="mt-2 p-2 bg-muted/50 rounded text-[10px] font-mono">
|
||||
<span className="text-blue-600 dark:text-blue-400">
|
||||
<span className="text-primary dark:text-primary/80">
|
||||
{condition.sourceTable === "source"
|
||||
? localConfig.sourceTable
|
||||
: localConfig.targetTable || "저장테이블"}
|
||||
@@ -1495,7 +1495,7 @@ export function ModalRepeaterTableConfigPanel({
|
||||
|
||||
{/* 조인 조건 예시 */}
|
||||
{col.mapping?.referenceTable && (
|
||||
<div className="p-3 bg-blue-50 dark:bg-blue-950 rounded-md border border-blue-200 dark:border-blue-800">
|
||||
<div className="p-3 bg-primary/10 dark:bg-primary/15 rounded-md border border-primary/20 dark:border-primary/30">
|
||||
<p className="text-xs font-medium mb-2">조인 조건 예시</p>
|
||||
<div className="space-y-1 text-[10px] text-muted-foreground">
|
||||
<p>예) 거래처별 품목 단가 조회:</p>
|
||||
@@ -1509,7 +1509,7 @@ export function ModalRepeaterTableConfigPanel({
|
||||
)}
|
||||
|
||||
{col.mapping?.type === "manual" && (
|
||||
<div className="p-3 bg-green-50 dark:bg-green-950 rounded-md border border-green-200 dark:border-green-800">
|
||||
<div className="p-3 bg-emerald-50 dark:bg-emerald-950 rounded-md border border-emerald-200 dark:border-emerald-800">
|
||||
<p className="text-xs font-medium mb-2">화면에서 입력 (수동)</p>
|
||||
<p className="text-[10px] text-muted-foreground">
|
||||
사용자가 반복 테이블에서 직접 입력
|
||||
@@ -1827,7 +1827,7 @@ export function ModalRepeaterTableConfigPanel({
|
||||
|
||||
{/* 테이블 직접 조회 설정 */}
|
||||
{option.sourceType === "table" && (
|
||||
<div className="space-y-3 p-3 bg-blue-50 dark:bg-blue-950 rounded-md border border-blue-200 dark:border-blue-800">
|
||||
<div className="space-y-3 p-3 bg-primary/10 dark:bg-primary/15 rounded-md border border-primary/20 dark:border-primary/30">
|
||||
<p className="text-xs font-medium">테이블 조회 설정</p>
|
||||
|
||||
{/* 참조 테이블 */}
|
||||
@@ -1941,7 +1941,7 @@ export function ModalRepeaterTableConfigPanel({
|
||||
|
||||
{/* 테이블 복합 조인 설정 (2개 이상 테이블) */}
|
||||
{option.sourceType === "multiTable" && (
|
||||
<div className="space-y-3 p-3 bg-green-50 dark:bg-green-950 rounded-md border border-green-200 dark:border-green-800">
|
||||
<div className="space-y-3 p-3 bg-emerald-50 dark:bg-emerald-950 rounded-md border border-emerald-200 dark:border-emerald-800">
|
||||
<div>
|
||||
<p className="text-xs font-medium">복합 조인 설정</p>
|
||||
<p className="text-[10px] text-muted-foreground mt-1">
|
||||
@@ -1985,7 +1985,7 @@ export function ModalRepeaterTableConfigPanel({
|
||||
<div key={stepIndex} className="p-3 border rounded-md bg-background space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-5 h-5 rounded-full bg-green-500 text-white flex items-center justify-center text-[10px] font-bold">
|
||||
<div className="w-5 h-5 rounded-full bg-emerald-500 text-white flex items-center justify-center text-[10px] font-bold">
|
||||
{stepIndex + 1}
|
||||
</div>
|
||||
<span className="text-xs font-medium">조인 단계 {stepIndex + 1}</span>
|
||||
@@ -2129,12 +2129,12 @@ export function ModalRepeaterTableConfigPanel({
|
||||
{/* 조인 미리보기 */}
|
||||
{step.tableName && step.joinCondition.fromField && step.joinCondition.toField && (
|
||||
<div className="p-2 bg-muted/50 rounded text-[10px] font-mono">
|
||||
<span className="text-blue-600 dark:text-blue-400">
|
||||
<span className="text-primary dark:text-primary/80">
|
||||
{stepIndex === 0 ? "현재행" : option.multiTableConfig?.joinChain[stepIndex - 1]?.tableName}
|
||||
</span>
|
||||
<span className="text-muted-foreground">.{step.joinCondition.fromField}</span>
|
||||
<span className="mx-2 text-green-600 dark:text-green-400">=</span>
|
||||
<span className="text-green-600 dark:text-green-400">{step.tableName}</span>
|
||||
<span className="mx-2 text-emerald-600 dark:text-emerald-400">=</span>
|
||||
<span className="text-emerald-600 dark:text-emerald-400">{step.tableName}</span>
|
||||
<span className="text-muted-foreground">.{step.joinCondition.toField}</span>
|
||||
{step.outputField && (
|
||||
<span className="ml-2 text-purple-600 dark:text-purple-400">
|
||||
@@ -2187,12 +2187,12 @@ export function ModalRepeaterTableConfigPanel({
|
||||
<div key={idx} className="flex items-center gap-1">
|
||||
{idx === 0 && (
|
||||
<>
|
||||
<span className="text-blue-600">현재행</span>
|
||||
<span className="text-primary">현재행</span>
|
||||
<span>.{step.joinCondition.fromField}</span>
|
||||
<span className="text-muted-foreground mx-1">→</span>
|
||||
</>
|
||||
)}
|
||||
<span className="text-green-600">{step.tableName}</span>
|
||||
<span className="text-emerald-600">{step.tableName}</span>
|
||||
<span>.{step.joinCondition.toField}</span>
|
||||
{step.outputField && idx < option.multiTableConfig!.joinChain.length - 1 && (
|
||||
<>
|
||||
@@ -2204,7 +2204,7 @@ export function ModalRepeaterTableConfigPanel({
|
||||
))}
|
||||
{option.multiTableConfig.valueColumn && (
|
||||
<div className="pt-1 border-t mt-1">
|
||||
<span className="text-orange-600">최종 값: </span>
|
||||
<span className="text-amber-600">최종 값: </span>
|
||||
<span>{option.multiTableConfig.joinChain[option.multiTableConfig.joinChain.length - 1]?.tableName}.{option.multiTableConfig.valueColumn}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user