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

4
frontend/lib/registry/components/v2-split-panel-layout/config-panels/CommonConfigTab.tsx
View File

@@ -44,13 +44,13 @@ export const CommonConfigTab: React.FC<CommonConfigTabProps> = ({
<SelectItem value="detail">
<div className="flex flex-col py-1">
<span className="text-sm font-medium">선택 시 표시</span>
<span className="text-xs text-gray-500">좌측 선택 시에만 우측 데이터 표시 / 미선택 시 빈 화면</span>
<span className="text-xs text-muted-foreground">좌측 선택 시에만 우측 데이터 표시 / 미선택 시 빈 화면</span>
</div>
</SelectItem>
<SelectItem value="join">
<div className="flex flex-col py-1">
<span className="text-sm font-medium">연관 목록</span>
<span className="text-xs text-gray-500">미선택 시 전체 표시 / 좌측 선택 시 필터링</span>
<span className="text-xs text-muted-foreground">미선택 시 전체 표시 / 좌측 선택 시 필터링</span>
</div>
</SelectItem>
</SelectContent>

26
frontend/lib/registry/components/v2-split-panel-layout/config-panels/LeftPanelConfigTab.tsx
View File

@@ -107,7 +107,7 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
config.leftPanel?.tableName === screenTableName ? "opacity-100" : "opacity-0"
)}
/>
<Database className="mr-2 h-3.5 w-3.5 text-blue-500" />
<Database className="mr-2 h-3.5 w-3.5 text-primary" />
{allTables.find((t) => (t.tableName || t.table_name) === screenTableName)?.tableLabel ||
allTables.find((t) => (t.tableName || t.table_name) === screenTableName)?.displayName ||
screenTableName}
@@ -184,19 +184,19 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
<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>
@@ -365,13 +365,13 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
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 LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
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={() => {
updateLeftPanel({
columns: [...selectedColumns, {
@@ -402,13 +402,13 @@ export const LeftPanelConfigTab: React.FC<LeftPanelConfigTabProps> = ({
}}
>
<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>

32
frontend/lib/registry/components/v2-split-panel-layout/config-panels/RightPanelConfigTab.tsx
View File

@@ -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>

4
frontend/lib/registry/components/v2-split-panel-layout/config-panels/SharedComponents.tsx
View File

@@ -37,14 +37,14 @@ export function SortableColumnRow({
className={cn(
"flex items-center gap-1.5 rounded-md border bg-card px-2 py-1.5",
isDragging && "z-50 opacity-50 shadow-md",
isEntityJoin && "border-blue-200 bg-blue-50/30",
isEntityJoin && "border-primary/20 bg-primary/10/30",
)}
>
<div {...attributes} {...listeners} className="text-muted-foreground hover:text-foreground cursor-grab touch-none">
<GripVertical className="h-3 w-3" />
</div>
{isEntityJoin ? (
<Link2 className="h-3 w-3 shrink-0 text-blue-500" title="Entity 조인 컬럼" />
<Link2 className="h-3 w-3 shrink-0 text-primary" title="Entity 조인 컬럼" />
) : (
<span className="text-muted-foreground w-5 shrink-0 text-center text-[10px] font-medium">#{index + 1}</span>
)}