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
@@ -473,7 +473,7 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{screen.screenName}</span>
|
||||
<span className="text-[10px] text-gray-500">{screen.screenCode}</span>
|
||||
<span className="text-[10px] text-muted-foreground">{screen.screenCode}</span>
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
@@ -534,7 +534,7 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
|
||||
/>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{screen.screenName}</span>
|
||||
<span className="text-[10px] text-gray-500">{screen.screenCode}</span>
|
||||
<span className="text-[10px] text-muted-foreground">{screen.screenCode}</span>
|
||||
</div>
|
||||
</CommandItem>
|
||||
))}
|
||||
@@ -591,33 +591,33 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
|
||||
) : (
|
||||
<>
|
||||
{/* 연결 필터 설명 */}
|
||||
<div className="rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-900 dark:bg-blue-950">
|
||||
<p className="text-xs text-blue-800 dark:text-blue-200">
|
||||
<div className="rounded-lg border border-primary/20 bg-primary/10 p-3 dark:border-primary/20 dark:bg-primary/15">
|
||||
<p className="text-xs text-primary dark:text-primary/70">
|
||||
예: 좌측에서 설비를 선택하면 → 우측 점검항목이 해당 설비의 항목만 표시됩니다.
|
||||
<br />
|
||||
좌측 <code className="bg-blue-100 dark:bg-blue-900 px-1 rounded">equipment_code</code> →
|
||||
우측 <code className="bg-blue-100 dark:bg-blue-900 px-1 rounded">equipment_code</code>
|
||||
좌측 <code className="bg-primary/10 dark:bg-primary/20 px-1 rounded">equipment_code</code> →
|
||||
우측 <code className="bg-primary/10 dark:bg-primary/20 px-1 rounded">equipment_code</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 필터 목록 */}
|
||||
<div className="space-y-3">
|
||||
{(localConfig.linkedFilters || []).map((filter: LinkedFilter, index: number) => (
|
||||
<div key={index} className="rounded-lg border bg-gray-50 p-3 dark:bg-gray-900">
|
||||
<div key={index} className="rounded-lg border bg-muted p-3 dark:bg-foreground">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<span className="text-xs font-medium text-gray-700">필터 #{index + 1}</span>
|
||||
<span className="text-xs font-medium text-foreground">필터 #{index + 1}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => removeLinkedFilter(index)}
|
||||
className="h-6 w-6 p-0 text-red-500 hover:bg-red-50 hover:text-red-600"
|
||||
className="h-6 w-6 p-0 text-destructive hover:bg-destructive/10 hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<Label className="text-xs text-gray-600">소스 컬럼 (좌측 화면)</Label>
|
||||
<Label className="text-xs text-muted-foreground">소스 컬럼 (좌측 화면)</Label>
|
||||
<Select
|
||||
value={filter.sourceColumn}
|
||||
onValueChange={(value) => updateLinkedFilter(index, "sourceColumn", value)}
|
||||
@@ -635,10 +635,10 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<ArrowRight className="h-4 w-4 rotate-90 text-gray-400" />
|
||||
<ArrowRight className="h-4 w-4 rotate-90 text-muted-foreground/70" />
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs text-gray-600">타겟 컬럼 (우측 화면 필터)</Label>
|
||||
<Label className="text-xs text-muted-foreground">타겟 컬럼 (우측 화면 필터)</Label>
|
||||
<Select
|
||||
value={filter.targetColumn}
|
||||
onValueChange={(value) => updateLinkedFilter(index, "targetColumn", value)}
|
||||
@@ -649,7 +649,7 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
|
||||
<SelectContent>
|
||||
{rightScreenTables.map((table) => (
|
||||
<React.Fragment key={table.tableName}>
|
||||
<div className="px-2 py-1.5 text-xs font-semibold text-gray-500 bg-gray-100 dark:bg-gray-800">
|
||||
<div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground bg-muted dark:bg-foreground/90">
|
||||
{table.screenName} ({table.tableName})
|
||||
</div>
|
||||
{table.columns.map((col) => (
|
||||
@@ -726,13 +726,13 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
|
||||
) : (
|
||||
<>
|
||||
{/* 우측 화면 테이블 목록 표시 */}
|
||||
<div className="rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-900 dark:bg-green-950">
|
||||
<p className="text-xs font-medium text-green-800 dark:text-green-200 mb-1">
|
||||
<div className="rounded-lg border border-emerald-200 bg-emerald-50 p-3 dark:border-emerald-900 dark:bg-emerald-950">
|
||||
<p className="text-xs font-medium text-emerald-800 dark:text-emerald-200 mb-1">
|
||||
우측 화면에서 감지된 테이블 ({rightScreenTables.length}개):
|
||||
</p>
|
||||
<ul className="text-xs text-green-700 dark:text-green-300 space-y-0.5">
|
||||
<ul className="text-xs text-emerald-700 dark:text-emerald-300 space-y-0.5">
|
||||
{rightScreenTables.map((table) => (
|
||||
<li key={table.tableName}>• {table.screenName}: <code className="bg-green-100 dark:bg-green-900 px-1 rounded">{table.tableName}</code></li>
|
||||
<li key={table.tableName}>• {table.screenName}: <code className="bg-emerald-100 dark:bg-emerald-900 px-1 rounded">{table.tableName}</code></li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -740,21 +740,21 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
|
||||
{/* 매핑 목록 */}
|
||||
<div className="space-y-3">
|
||||
{(localConfig.parentDataMapping || []).map((mapping: ParentDataMapping, index: number) => (
|
||||
<div key={index} className="rounded-lg border bg-gray-50 p-3 dark:bg-gray-900">
|
||||
<div key={index} className="rounded-lg border bg-muted p-3 dark:bg-foreground">
|
||||
<div className="mb-2 flex items-center justify-between">
|
||||
<span className="text-xs font-medium text-gray-700">매핑 #{index + 1}</span>
|
||||
<span className="text-xs font-medium text-foreground">매핑 #{index + 1}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => removeParentDataMapping(index)}
|
||||
className="h-6 w-6 p-0 text-red-500 hover:bg-red-50 hover:text-red-600"
|
||||
className="h-6 w-6 p-0 text-destructive hover:bg-destructive/10 hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div>
|
||||
<Label className="text-xs text-gray-600">소스 컬럼 (좌측 화면)</Label>
|
||||
<Label className="text-xs text-muted-foreground">소스 컬럼 (좌측 화면)</Label>
|
||||
<Select
|
||||
value={mapping.sourceColumn}
|
||||
onValueChange={(value) => updateParentDataMapping(index, "sourceColumn", value)}
|
||||
@@ -772,10 +772,10 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<ArrowRight className="h-4 w-4 rotate-90 text-gray-400" />
|
||||
<ArrowRight className="h-4 w-4 rotate-90 text-muted-foreground/70" />
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-xs text-gray-600">타겟 컬럼 (우측 화면)</Label>
|
||||
<Label className="text-xs text-muted-foreground">타겟 컬럼 (우측 화면)</Label>
|
||||
<Select
|
||||
value={mapping.targetColumn}
|
||||
onValueChange={(value) => updateParentDataMapping(index, "targetColumn", value)}
|
||||
@@ -786,7 +786,7 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
|
||||
<SelectContent>
|
||||
{rightScreenTables.map((table) => (
|
||||
<React.Fragment key={table.tableName}>
|
||||
<div className="px-2 py-1.5 text-xs font-semibold text-gray-500 bg-gray-100 dark:bg-gray-800">
|
||||
<div className="px-2 py-1.5 text-xs font-semibold text-muted-foreground bg-muted dark:bg-foreground/90">
|
||||
{table.screenName} ({table.tableName})
|
||||
</div>
|
||||
{table.columns.map((col) => (
|
||||
@@ -820,8 +820,8 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
|
||||
</Button>
|
||||
|
||||
{/* 자동 매핑 안내 */}
|
||||
<div className="rounded-lg border border-green-200 bg-green-50 p-3 dark:border-green-900 dark:bg-green-950">
|
||||
<p className="text-xs text-green-800 dark:text-green-200">
|
||||
<div className="rounded-lg border border-emerald-200 bg-emerald-50 p-3 dark:border-emerald-900 dark:bg-emerald-950">
|
||||
<p className="text-xs text-emerald-800 dark:text-emerald-200">
|
||||
<strong>자동 매핑:</strong> 좌측에서 선택한 데이터의 모든 컬럼이 우측 화면에 자동 전달됩니다.
|
||||
<br />
|
||||
동일한 컬럼명(예: equipment_code)이 있으면 별도 설정 없이 자동으로 매핑됩니다.
|
||||
@@ -829,13 +829,13 @@ export function ScreenSplitPanelConfigPanel({ config = {}, onChange }: ScreenSpl
|
||||
</div>
|
||||
|
||||
{/* 수동 매핑 안내 */}
|
||||
<div className="rounded-lg border border-blue-200 bg-blue-50 p-3 dark:border-blue-900 dark:bg-blue-950">
|
||||
<p className="text-xs text-blue-800 dark:text-blue-200">
|
||||
<div className="rounded-lg border border-primary/20 bg-primary/10 p-3 dark:border-primary/20 dark:bg-primary/15">
|
||||
<p className="text-xs text-primary dark:text-primary/70">
|
||||
<strong>수동 매핑 (선택사항):</strong>
|
||||
<br />
|
||||
컬럼명이 다른 경우에만 위에서 매핑을 추가하세요.
|
||||
<br />
|
||||
예: 좌측 <code className="bg-blue-100 px-1 rounded">user_id</code> → 우측 <code className="bg-blue-100 px-1 rounded">created_by</code>
|
||||
예: 좌측 <code className="bg-primary/10 px-1 rounded">user_id</code> → 우측 <code className="bg-primary/10 px-1 rounded">created_by</code>
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user