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:
@@ -116,7 +116,7 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
|
||||
)}
|
||||
/>
|
||||
{(table as any).displayName || tableName}
|
||||
{(table as any).displayName && <span className="ml-2 text-xs text-gray-500">({tableName})</span>}
|
||||
{(table as any).displayName && <span className="ml-2 text-xs text-muted-foreground">({tableName})</span>}
|
||||
</CommandItem>
|
||||
);
|
||||
})}
|
||||
@@ -141,19 +141,19 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
|
||||
<SelectItem value="list">
|
||||
<div className="flex flex-col py-1">
|
||||
<span className="text-sm font-medium">목록 (LIST)</span>
|
||||
<span className="text-xs text-gray-500">클릭 가능한 항목 목록 (기본)</span>
|
||||
<span className="text-xs text-muted-foreground">클릭 가능한 항목 목록 (기본)</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="table">
|
||||
<div className="flex flex-col py-1">
|
||||
<span className="text-sm font-medium">테이블 (TABLE)</span>
|
||||
<span className="text-xs text-gray-500">컬럼 헤더가 있는 테이블 형식</span>
|
||||
<span className="text-xs text-muted-foreground">컬럼 헤더가 있는 테이블 형식</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
<SelectItem value="custom">
|
||||
<div className="flex flex-col py-1">
|
||||
<span className="text-sm font-medium">커스텀 (CUSTOM)</span>
|
||||
<span className="text-xs text-gray-500">패널 안에 컴포넌트 자유 배치</span>
|
||||
<span className="text-xs text-muted-foreground">패널 안에 컴포넌트 자유 배치</span>
|
||||
</div>
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
@@ -215,7 +215,7 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
|
||||
)}
|
||||
|
||||
{(config.rightPanel?.displayMode || "list") === "list" && (
|
||||
<div className="space-y-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
|
||||
<div className="space-y-3 rounded-lg border border-border bg-muted p-3">
|
||||
<Label className="text-sm font-semibold">요약 표시 설정</Label>
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">표시할 컬럼 개수</Label>
|
||||
@@ -230,12 +230,12 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
|
||||
}}
|
||||
className="bg-white"
|
||||
/>
|
||||
<p className="text-xs text-gray-500">접기 전에 표시할 컬럼 개수 (기본: 3개)</p>
|
||||
<p className="text-xs text-muted-foreground">접기 전에 표시할 컬럼 개수 (기본: 3개)</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between space-x-2">
|
||||
<div className="flex-1">
|
||||
<Label className="text-xs">라벨 표시</Label>
|
||||
<p className="text-xs text-gray-500">컬럼명 표시 여부</p>
|
||||
<p className="text-xs text-muted-foreground">컬럼명 표시 여부</p>
|
||||
</div>
|
||||
<Checkbox
|
||||
checked={config.rightPanel?.summaryShowLabel ?? true}
|
||||
@@ -365,13 +365,13 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
|
||||
return (
|
||||
<details key={`join-${tableIndex}`} className="group">
|
||||
<summary className="border-border/60 my-2 flex cursor-pointer list-none items-center gap-2 border-t pt-2 select-none">
|
||||
<ChevronRight className="h-3 w-3 shrink-0 text-blue-500 transition-transform group-open:rotate-90" />
|
||||
<Link2 className="h-3 w-3 shrink-0 text-blue-500" />
|
||||
<span className="text-[10px] font-medium text-blue-600">{joinTable.tableName}</span>
|
||||
<ChevronRight className="h-3 w-3 shrink-0 text-primary transition-transform group-open:rotate-90" />
|
||||
<Link2 className="h-3 w-3 shrink-0 text-primary" />
|
||||
<span className="text-[10px] font-medium text-primary">{joinTable.tableName}</span>
|
||||
{addedCount > 0 && (
|
||||
<span className="rounded-full bg-blue-100 px-1.5 text-[9px] font-medium text-blue-600">{addedCount}개 선택</span>
|
||||
<span className="rounded-full bg-primary/10 px-1.5 text-[9px] font-medium text-primary">{addedCount}개 선택</span>
|
||||
)}
|
||||
<span className="text-[9px] text-gray-400">{joinColumnsToShow.length}개 남음</span>
|
||||
<span className="text-[9px] text-muted-foreground/70">{joinColumnsToShow.length}개 남음</span>
|
||||
</summary>
|
||||
<div className="space-y-0.5 pt-1">
|
||||
{joinColumnsToShow.map((column, colIndex) => {
|
||||
@@ -383,7 +383,7 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
|
||||
return (
|
||||
<div
|
||||
key={colIndex}
|
||||
className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-blue-50/60"
|
||||
className="flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-primary/10/60"
|
||||
onClick={() => {
|
||||
updateRightPanel({
|
||||
columns: [...selectedColumns, {
|
||||
@@ -402,13 +402,13 @@ export const RightPanelConfigTab: React.FC<RightPanelConfigTabProps> = ({
|
||||
}}
|
||||
>
|
||||
<Checkbox checked={false} className="pointer-events-none h-3.5 w-3.5 shrink-0" />
|
||||
<Link2 className="h-3 w-3 shrink-0 text-blue-500" />
|
||||
<span className="truncate text-xs text-blue-700">{column.columnLabel || column.columnName}</span>
|
||||
<Link2 className="h-3 w-3 shrink-0 text-primary" />
|
||||
<span className="truncate text-xs text-primary">{column.columnLabel || column.columnName}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{joinColumnsToShow.length === 0 && (
|
||||
<p className="px-2 py-1 text-[10px] text-gray-400">모든 컬럼이 이미 추가되었습니다</p>
|
||||
<p className="px-2 py-1 text-[10px] text-muted-foreground/70">모든 컬럼이 이미 추가되었습니다</p>
|
||||
)}
|
||||
</div>
|
||||
</details>
|
||||
|
||||
Reference in New Issue
Block a user