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:
@@ -282,7 +282,7 @@ const KeySelectCombobox: React.FC<KeySelectComboboxProps> = ({
|
||||
onChange(null);
|
||||
setOpen(false);
|
||||
}}
|
||||
className="text-red-600"
|
||||
className="text-destructive"
|
||||
>
|
||||
<X className="mr-2 h-4 w-4" />
|
||||
연결 해제
|
||||
@@ -895,12 +895,12 @@ export const MultilangSettingsModal: React.FC<MultilangSettingsModalProps> = ({
|
||||
const TranslationStatusIcon: React.FC<{ status: TranslationStatus }> = ({ status }) => {
|
||||
switch (status) {
|
||||
case "complete":
|
||||
return <CheckCircle2 className="h-4 w-4 text-green-500" />;
|
||||
return <CheckCircle2 className="h-4 w-4 text-emerald-500" />;
|
||||
case "partial":
|
||||
return <CircleDot className="h-4 w-4 text-yellow-500" />;
|
||||
return <CircleDot className="h-4 w-4 text-amber-500" />;
|
||||
case "none":
|
||||
default:
|
||||
return <Circle className="h-4 w-4 text-gray-300" />;
|
||||
return <Circle className="h-4 w-4 text-muted-foreground/50" />;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -1270,10 +1270,10 @@ export const MultilangSettingsModal: React.FC<MultilangSettingsModalProps> = ({
|
||||
isSelected
|
||||
? "border-primary bg-primary/10 ring-1 ring-primary"
|
||||
: translationStatus === "complete"
|
||||
? "border-green-200 bg-green-50 hover:bg-green-100"
|
||||
? "border-emerald-200 bg-emerald-50 hover:bg-emerald-100"
|
||||
: translationStatus === "partial"
|
||||
? "border-yellow-200 bg-yellow-50 hover:bg-yellow-100"
|
||||
: "border-gray-200 bg-white hover:bg-gray-50"
|
||||
? "border-amber-200 bg-amber-50 hover:bg-amber-100"
|
||||
: "border-border bg-white hover:bg-muted"
|
||||
)}
|
||||
>
|
||||
{/* 번역 상태 아이콘 */}
|
||||
@@ -1301,7 +1301,7 @@ export const MultilangSettingsModal: React.FC<MultilangSettingsModalProps> = ({
|
||||
</div>
|
||||
|
||||
{/* 오른쪽: 선택된 항목 상세 및 번역 편집 */}
|
||||
<div className="flex w-1/2 flex-col rounded-md border bg-gray-50 p-4">
|
||||
<div className="flex w-1/2 flex-col rounded-md border bg-muted p-4">
|
||||
{selectedLabelItem ? (
|
||||
<>
|
||||
{/* 선택된 항목 정보 */}
|
||||
@@ -1388,15 +1388,15 @@ export const MultilangSettingsModal: React.FC<MultilangSettingsModalProps> = ({
|
||||
<span className="font-medium">번역 현황</span>
|
||||
<div className="flex items-center gap-3 text-xs text-muted-foreground">
|
||||
<span className="flex items-center gap-1">
|
||||
<CheckCircle2 className="h-3 w-3 text-green-500" />
|
||||
<CheckCircle2 className="h-3 w-3 text-emerald-500" />
|
||||
완료 {translationStats.complete}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<CircleDot className="h-3 w-3 text-yellow-500" />
|
||||
<CircleDot className="h-3 w-3 text-amber-500" />
|
||||
부분 {translationStats.partial}
|
||||
</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Circle className="h-3 w-3 text-gray-300" />
|
||||
<Circle className="h-3 w-3 text-muted-foreground/50" />
|
||||
미완료 {translationStats.none}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user