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:
@@ -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();
|
||||
|
||||
Reference in New Issue
Block a user