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
@@ -139,8 +139,8 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
|
||||
{/* 선택 요약 표시 */}
|
||||
{selectedItem && summaryText && (
|
||||
<div className="flex items-center gap-1 text-xs">
|
||||
<Check className="h-3 w-3 text-green-600" />
|
||||
<span className="text-green-700">{summaryText}</span>
|
||||
<Check className="h-3 w-3 text-emerald-600" />
|
||||
<span className="text-emerald-700">{summaryText}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -148,12 +148,12 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
|
||||
{/* 확장된 패널 */}
|
||||
{isExpanded && (
|
||||
<div
|
||||
className="mt-2 rounded-md border bg-gray-50"
|
||||
className="mt-2 rounded-md border bg-muted"
|
||||
style={{ maxHeight: config.ui?.maxHeight || "150px", overflowY: "auto" }}
|
||||
>
|
||||
{/* 에러 상태 */}
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 p-3 text-xs text-red-600">
|
||||
<div className="flex items-center gap-2 p-3 text-xs text-destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<span>{error}</span>
|
||||
<Button type="button" variant="ghost" size="sm" onClick={refetch} className="ml-auto h-6 text-xs">
|
||||
@@ -164,7 +164,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
|
||||
|
||||
{/* 로딩 상태 */}
|
||||
{isLoading && (
|
||||
<div className="flex items-center justify-center gap-2 p-4 text-xs text-gray-500">
|
||||
<div className="flex items-center justify-center gap-2 p-4 text-xs text-muted-foreground">
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
<span>조회 중...</span>
|
||||
</div>
|
||||
@@ -172,7 +172,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
|
||||
|
||||
{/* 데이터 없음 */}
|
||||
{!isLoading && !error && data.length === 0 && (
|
||||
<div className="p-4 text-center text-xs text-gray-500">
|
||||
<div className="p-4 text-center text-xs text-muted-foreground">
|
||||
{config.ui?.emptyMessage || "재고 데이터가 없습니다"}
|
||||
</div>
|
||||
)}
|
||||
@@ -180,7 +180,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
|
||||
{/* 데이터 테이블 */}
|
||||
{!isLoading && !error && data.length > 0 && (
|
||||
<table className="w-full text-xs">
|
||||
<thead className="sticky top-0 bg-gray-100">
|
||||
<thead className="sticky top-0 bg-muted">
|
||||
<tr>
|
||||
<th className="w-8 p-2 text-center">선택</th>
|
||||
{displayColumns.map((col) => (
|
||||
@@ -199,7 +199,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
|
||||
onClick={() => handleSelect(item)}
|
||||
className={cn(
|
||||
"cursor-pointer border-t transition-colors",
|
||||
isSelected ? "bg-blue-50" : "hover:bg-gray-100",
|
||||
isSelected ? "bg-primary/10" : "hover:bg-muted",
|
||||
disabled && "cursor-not-allowed opacity-50",
|
||||
)}
|
||||
>
|
||||
@@ -207,7 +207,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
|
||||
<div
|
||||
className={cn(
|
||||
"mx-auto flex h-4 w-4 items-center justify-center rounded-full border",
|
||||
isSelected ? "border-blue-600 bg-blue-600" : "border-gray-300",
|
||||
isSelected ? "border-primary bg-primary" : "border-input",
|
||||
)}
|
||||
>
|
||||
{isSelected && <Check className="h-3 w-3 text-white" />}
|
||||
@@ -267,8 +267,8 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
|
||||
{/* 선택 요약 표시 */}
|
||||
{selectedItem && summaryText && (
|
||||
<div className="flex items-center gap-1 text-xs">
|
||||
<Check className="h-3 w-3 text-green-600" />
|
||||
<span className="text-green-700">{summaryText}</span>
|
||||
<Check className="h-3 w-3 text-emerald-600" />
|
||||
<span className="text-emerald-700">{summaryText}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@@ -296,7 +296,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
|
||||
>
|
||||
{/* 에러 상태 */}
|
||||
{error && (
|
||||
<div className="flex items-center gap-2 p-3 text-xs text-red-600">
|
||||
<div className="flex items-center gap-2 p-3 text-xs text-destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<span>{error}</span>
|
||||
<Button type="button" variant="ghost" size="sm" onClick={refetch} className="ml-auto h-6 text-xs">
|
||||
@@ -307,7 +307,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
|
||||
|
||||
{/* 로딩 상태 */}
|
||||
{isLoading && (
|
||||
<div className="flex items-center justify-center gap-2 p-8 text-sm text-gray-500">
|
||||
<div className="flex items-center justify-center gap-2 p-8 text-sm text-muted-foreground">
|
||||
<Loader2 className="h-5 w-5 animate-spin" />
|
||||
<span>재고 조회 중...</span>
|
||||
</div>
|
||||
@@ -315,7 +315,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
|
||||
|
||||
{/* 데이터 없음 */}
|
||||
{!isLoading && !error && data.length === 0 && (
|
||||
<div className="p-8 text-center text-sm text-gray-500">
|
||||
<div className="p-8 text-center text-sm text-muted-foreground">
|
||||
{config.ui?.emptyMessage || "해당 품목의 재고가 없습니다"}
|
||||
</div>
|
||||
)}
|
||||
@@ -323,7 +323,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
|
||||
{/* 데이터 테이블 */}
|
||||
{!isLoading && !error && data.length > 0 && (
|
||||
<table className="w-full text-sm">
|
||||
<thead className="sticky top-0 bg-gray-100">
|
||||
<thead className="sticky top-0 bg-muted">
|
||||
<tr>
|
||||
<th className="w-12 p-3 text-center">선택</th>
|
||||
{displayColumns.map((col) => (
|
||||
@@ -342,7 +342,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
|
||||
onClick={() => handleSelect(item)}
|
||||
className={cn(
|
||||
"cursor-pointer border-t transition-colors",
|
||||
isSelected ? "bg-blue-50" : "hover:bg-gray-50",
|
||||
isSelected ? "bg-primary/10" : "hover:bg-muted",
|
||||
disabled && "cursor-not-allowed opacity-50",
|
||||
)}
|
||||
>
|
||||
@@ -350,7 +350,7 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
|
||||
<div
|
||||
className={cn(
|
||||
"mx-auto flex h-5 w-5 items-center justify-center rounded-full border-2",
|
||||
isSelected ? "border-blue-600 bg-blue-600" : "border-gray-300",
|
||||
isSelected ? "border-primary bg-primary" : "border-input",
|
||||
)}
|
||||
>
|
||||
{isSelected && <Check className="h-3 w-3 text-white" />}
|
||||
@@ -422,8 +422,8 @@ export const SubDataLookupPanel: React.FC<SubDataLookupPanelProps> = ({
|
||||
</Button>
|
||||
{selectedItem && summaryText && (
|
||||
<div className="flex items-center gap-1 text-xs">
|
||||
<Check className="h-3 w-3 text-green-600" />
|
||||
<span className="text-green-700">{summaryText}</span>
|
||||
<Check className="h-3 w-3 text-emerald-600" />
|
||||
<span className="text-emerald-700">{summaryText}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user