diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx index 384f41f2..1119e698 100644 --- a/frontend/components/screen/InteractiveDataTable.tsx +++ b/frontend/components/screen/InteractiveDataTable.tsx @@ -1961,7 +1961,7 @@ export const InteractiveDataTable: React.FC = ({ // 실제 웹 타입으로 스위치 (input_type="category"도 포함됨) switch (actualWebType) { case "category": { - // 카테고리 타입: 배지로 표시 + // 카테고리 타입: 배지로 표시 (배지 없음 옵션 지원) if (!value) return ""; const mapping = categoryMappings[column.columnName]; @@ -1971,6 +1971,11 @@ export const InteractiveDataTable: React.FC = ({ const displayLabel = categoryData?.label || String(value); const displayColor = categoryData?.color || "#64748b"; // 기본 slate 색상 + // 배지 없음 옵션: color가 "none"이면 텍스트만 표시 + if (displayColor === "none") { + return {displayLabel}; + } + return ( = ({ open, onOpenChange, onAdd, columnLabel }) => { const [valueLabel, setValueLabel] = useState(""); const [description, setDescription] = useState(""); - const [color, setColor] = useState("#3b82f6"); + const [color, setColor] = useState("none"); // 라벨에서 코드 자동 생성 const generateCode = (label: string): string => { @@ -91,7 +91,7 @@ export const CategoryValueAddDialog: React.FC< // 초기화 setValueLabel(""); setDescription(""); - setColor("#3b82f6"); + setColor("none"); }; return ( @@ -123,24 +123,41 @@ export const CategoryValueAddDialog: React.FC<
-
-
- {DEFAULT_COLORS.map((c) => ( -
+ {color && color !== "none" ? ( + + 미리보기 + + ) : ( + 배지 없음 + )}
- - 미리보기 - +
diff --git a/frontend/components/table-category/CategoryValueEditDialog.tsx b/frontend/components/table-category/CategoryValueEditDialog.tsx index 6c7c6060..7ad415f0 100644 --- a/frontend/components/table-category/CategoryValueEditDialog.tsx +++ b/frontend/components/table-category/CategoryValueEditDialog.tsx @@ -51,12 +51,12 @@ export const CategoryValueEditDialog: React.FC< > = ({ open, onOpenChange, value, onUpdate, columnLabel }) => { const [valueLabel, setValueLabel] = useState(value.valueLabel); const [description, setDescription] = useState(value.description || ""); - const [color, setColor] = useState(value.color || "#3b82f6"); + const [color, setColor] = useState(value.color || "none"); useEffect(() => { setValueLabel(value.valueLabel); setDescription(value.description || ""); - setColor(value.color || "#3b82f6"); + setColor(value.color || "none"); }, [value]); const handleSubmit = () => { @@ -100,24 +100,41 @@ export const CategoryValueEditDialog: React.FC<
-
-
- {DEFAULT_COLORS.map((c) => ( -
+ {color && color !== "none" ? ( + + 미리보기 + + ) : ( + 배지 없음 + )}
- - 미리보기 - +
diff --git a/frontend/components/table-category/CategoryValueManager.tsx b/frontend/components/table-category/CategoryValueManager.tsx index dfcbd045..fe9ac7be 100644 --- a/frontend/components/table-category/CategoryValueManager.tsx +++ b/frontend/components/table-category/CategoryValueManager.tsx @@ -349,13 +349,18 @@ export const CategoryValueManager: React.FC = ({ />
- {/* 색상 표시 (앞쪽으로 이동) */} - {value.color && ( + {/* 색상 표시 (배지 없음 옵션 지원) */} + {value.color && value.color !== "none" && (
)} + {value.color === "none" && ( + + 배지 없음 + + )} {/* 라벨 */} diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx index 8caf01a0..6d5a64b4 100644 --- a/frontend/lib/registry/components/table-list/TableListComponent.tsx +++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx @@ -1374,28 +1374,22 @@ export const TableListComponent: React.FC = ({ ); } - // 카테고리 타입: 배지로 표시 + // 카테고리 타입: 배지로 표시 (배지 없음 옵션 지원) if (inputType === "category") { if (!value) return ""; const mapping = categoryMappings[column.columnName]; const categoryData = mapping?.[String(value)]; - // console.log(`🎨 [카테고리 배지] ${column.columnName}:`, { - // value, - // stringValue: String(value), - // mapping, - // categoryData, - // hasMapping: !!mapping, - // hasCategoryData: !!categoryData, - // allCategoryMappings: categoryMappings, // 전체 매핑 확인 - // categoryMappingsKeys: Object.keys(categoryMappings), - // }); - // 매핑 데이터가 있으면 라벨과 색상 사용, 없으면 코드값과 기본색상 const displayLabel = categoryData?.label || String(value); const displayColor = categoryData?.color || "#64748b"; // 기본 slate 색상 + // 배지 없음 옵션: color가 "none"이면 텍스트만 표시 + if (displayColor === "none") { + return {displayLabel}; + } + const { Badge } = require("@/components/ui/badge"); return (