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
2026-03-09 14:31:59 +09:00
parent d967cf0a0d
commit 4f10b5e42d
447 changed files with 4520 additions and 4520 deletions

View File

@@ -57,10 +57,10 @@ export const LayoutRowRenderer: React.FC<LayoutRowRendererProps> = ({
row.verticalAlignment === "stretch" && "items-stretch",
// 선택 상태
isSelected && "ring-2 ring-blue-500 ring-inset",
isSelected && "ring-2 ring-ring ring-inset",
// 호버 효과
"hover:bg-gray-50 transition-colors cursor-pointer border-2 border-dashed border-transparent hover:border-gray-300",
"hover:bg-muted transition-colors cursor-pointer border-2 border-dashed border-transparent hover:border-input",
);
// 배경색 스타일
@@ -71,19 +71,19 @@ export const LayoutRowRenderer: React.FC<LayoutRowRendererProps> = ({
return (
<div className={rowClasses} style={rowStyle} onClick={onSelectRow} data-row-id={row.id}>
{/* 행 인덱스 표시 */}
<div className="absolute top-1/2 -left-8 -translate-y-1/2 font-mono text-xs text-gray-400">
<div className="absolute top-1/2 -left-8 -translate-y-1/2 font-mono text-xs text-muted-foreground/70">
{row.rowIndex + 1}
</div>
{row.components.length === 0 ? (
// 빈 행
<div className="col-span-12 flex items-center justify-center rounded-lg border-2 border-dashed border-gray-300 bg-gray-50 p-8">
<div className="col-span-12 flex items-center justify-center rounded-lg border-2 border-dashed border-input bg-muted p-8">
<div className="text-center">
<p className="mb-2 text-sm text-gray-400"> </p>
<p className="mb-2 text-sm text-muted-foreground/70"> </p>
<div className="flex justify-center gap-2">
<button className="rounded border bg-white px-2 py-1 text-xs hover:bg-gray-50"> </button>
<button className="rounded border bg-white px-2 py-1 text-xs hover:bg-gray-50">2</button>
<button className="rounded border bg-white px-2 py-1 text-xs hover:bg-gray-50"></button>
<button className="rounded border bg-white px-2 py-1 text-xs hover:bg-muted"> </button>
<button className="rounded border bg-white px-2 py-1 text-xs hover:bg-muted">2</button>
<button className="rounded border bg-white px-2 py-1 text-xs hover:bg-muted"></button>
</div>
</div>
</div>
@@ -140,14 +140,14 @@ export const LayoutRowRenderer: React.FC<LayoutRowRendererProps> = ({
{isSelected && (
<div className="absolute top-1/2 -right-8 flex -translate-y-1/2 flex-col gap-1">
<button
className="rounded border bg-white p-1 shadow-sm hover:bg-gray-50"
className="rounded border bg-white p-1 shadow-sm hover:bg-muted"
title="행 설정"
onClick={(e) => {
e.stopPropagation();
// 행 설정 패널 열기
}}
>
<svg className="h-4 w-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<svg className="h-4 w-4 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path
strokeLinecap="round"
strokeLinejoin="round"
@@ -158,7 +158,7 @@ export const LayoutRowRenderer: React.FC<LayoutRowRendererProps> = ({
</svg>
</button>
<button
className="rounded border bg-white p-1 shadow-sm hover:bg-red-50 hover:text-red-600"
className="rounded border bg-white p-1 shadow-sm hover:bg-destructive/10 hover:text-destructive"
title="행 삭제"
onClick={(e) => {
e.stopPropagation();