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
@@ -127,7 +127,7 @@ export function RepeatContainerConfigPanel({
|
||||
|
||||
{/* 현재 선택된 테이블 표시 (카드 형태) */}
|
||||
<div className="flex items-center gap-2 rounded-md border bg-slate-50 p-2">
|
||||
<Database className="h-4 w-4 text-blue-500" />
|
||||
<Database className="h-4 w-4 text-primary" />
|
||||
<div className="flex-1">
|
||||
<div className="text-xs font-medium">
|
||||
{config.customTableName || config.tableName || screenTableName || "테이블 미선택"}
|
||||
@@ -180,7 +180,7 @@ export function RepeatContainerConfigPanel({
|
||||
!config.useCustomTable ? "opacity-100" : "opacity-0"
|
||||
)}
|
||||
/>
|
||||
<Database className="mr-2 h-3 w-3 text-blue-500" />
|
||||
<Database className="mr-2 h-3 w-3 text-primary" />
|
||||
{screenTableName}
|
||||
</CommandItem>
|
||||
</CommandGroup>
|
||||
@@ -499,7 +499,7 @@ export function RepeatContainerConfigPanel({
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
{config.titleColumn && (
|
||||
<p className="text-[10px] text-green-600">
|
||||
<p className="text-[10px] text-emerald-600">
|
||||
각 아이템의 "{config.titleColumn}" 값이 제목으로 표시됩니다
|
||||
</p>
|
||||
)}
|
||||
@@ -567,7 +567,7 @@ export function RepeatContainerConfigPanel({
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
{config.descriptionColumn && (
|
||||
<p className="text-[10px] text-green-600">
|
||||
<p className="text-[10px] text-emerald-600">
|
||||
각 아이템의 "{config.descriptionColumn}" 값이 설명으로 표시됩니다
|
||||
</p>
|
||||
)}
|
||||
@@ -889,25 +889,25 @@ function SlotChildrenSection({
|
||||
return (
|
||||
<div
|
||||
key={child.id}
|
||||
className="rounded-md border border-green-200 bg-green-50 overflow-hidden"
|
||||
className="rounded-md border border-emerald-200 bg-emerald-50 overflow-hidden"
|
||||
>
|
||||
{/* 기본 정보 헤더 - 타입 선택 드롭다운 제거됨 */}
|
||||
<div className="flex items-center gap-2 p-2">
|
||||
<div className="flex h-5 w-5 items-center justify-center rounded bg-green-200 text-xs font-medium text-green-700">
|
||||
<div className="flex h-5 w-5 items-center justify-center rounded bg-emerald-200 text-xs font-medium text-emerald-700">
|
||||
{index + 1}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="text-xs font-medium text-green-700">
|
||||
<div className="text-xs font-medium text-emerald-700">
|
||||
{child.label || child.fieldName}
|
||||
</div>
|
||||
<div className="text-[10px] text-green-500">
|
||||
<div className="text-[10px] text-emerald-500">
|
||||
필드: {child.fieldName}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-5 w-5 p-0 text-blue-500 hover:text-blue-700"
|
||||
className="h-5 w-5 p-0 text-primary hover:text-primary"
|
||||
onClick={() => toggleExpanded(child.id)}
|
||||
title="상세 설정"
|
||||
>
|
||||
@@ -920,7 +920,7 @@ function SlotChildrenSection({
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-5 w-5 p-0 text-red-400 hover:text-red-600"
|
||||
className="h-5 w-5 p-0 text-destructive/80 hover:text-destructive"
|
||||
onClick={() => removeComponent(child.id)}
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
@@ -929,7 +929,7 @@ function SlotChildrenSection({
|
||||
|
||||
{/* 상세 설정 패널 */}
|
||||
{isExpanded && (
|
||||
<div className="border-t border-green-200 bg-white p-3 space-y-3">
|
||||
<div className="border-t border-emerald-200 bg-white p-3 space-y-3">
|
||||
{hasComponentConfigPanel(child.componentType) ? (
|
||||
<SlotComponentDetailPanel
|
||||
child={child}
|
||||
@@ -948,14 +948,14 @@ function SlotChildrenSection({
|
||||
) : (
|
||||
<>
|
||||
{child.fieldName && (
|
||||
<div className="p-2 bg-green-50 rounded-md border border-green-200">
|
||||
<div className="p-2 bg-emerald-50 rounded-md border border-emerald-200">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Database className="h-3 w-3 text-green-600" />
|
||||
<span className="text-[10px] text-green-700 font-medium">
|
||||
<Database className="h-3 w-3 text-emerald-600" />
|
||||
<span className="text-[10px] text-emerald-700 font-medium">
|
||||
바인딩: {child.fieldName}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[9px] text-green-600 mt-0.5">
|
||||
<p className="text-[9px] text-emerald-600 mt-0.5">
|
||||
각 아이템의 "{child.fieldName}" 값이 자동으로 표시됩니다
|
||||
</p>
|
||||
</div>
|
||||
@@ -1092,7 +1092,7 @@ function SlotChildrenSection({
|
||||
<Plus
|
||||
className={cn(
|
||||
"mr-2 h-3 w-3",
|
||||
isAdded ? "text-green-500" : "text-blue-500"
|
||||
isAdded ? "text-emerald-500" : "text-primary"
|
||||
)}
|
||||
/>
|
||||
<div className="flex-1">
|
||||
@@ -1102,7 +1102,7 @@ function SlotChildrenSection({
|
||||
</div>
|
||||
</div>
|
||||
{isAdded && (
|
||||
<Check className="h-3 w-3 text-green-500" />
|
||||
<Check className="h-3 w-3 text-emerald-500" />
|
||||
)}
|
||||
</CommandItem>
|
||||
);
|
||||
@@ -1134,14 +1134,14 @@ function SlotComponentDetailPanel({
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{child.fieldName && (
|
||||
<div className="p-2 bg-green-50 rounded-md border border-green-200">
|
||||
<div className="p-2 bg-emerald-50 rounded-md border border-emerald-200">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Database className="h-3 w-3 text-green-600" />
|
||||
<span className="text-[10px] text-green-700 font-medium">
|
||||
<Database className="h-3 w-3 text-emerald-600" />
|
||||
<span className="text-[10px] text-emerald-700 font-medium">
|
||||
바인딩: {child.fieldName}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-[9px] text-green-600 mt-0.5">
|
||||
<p className="text-[9px] text-emerald-600 mt-0.5">
|
||||
각 아이템의 "{child.fieldName}" 값이 자동으로 표시됩니다
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user