From a828f54663257889cdf29d13e7c0093e84e9f0f8 Mon Sep 17 00:00:00 2001 From: kjs Date: Thu, 13 Nov 2025 15:24:31 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20?= =?UTF-8?q?=EB=B0=B0=EC=A7=80=20=EC=97=86=EC=9D=8C=20=EC=98=B5=EC=85=98=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 카테고리 색상 설정 시 '배지 없음' 옵션 추가 - color='none'일 때 배지 대신 일반 텍스트로 표시 - CategoryValueEditDialog, CategoryValueAddDialog에 배지 없음 버튼 추가 - InteractiveDataTable, TableListComponent에서 배지 없음 처리 - CategoryValueManager에서 배지 없음 표시 추가 - 기본 색상을 배지 없음으로 변경 --- .../screen/InteractiveDataTable.tsx | 7 ++- .../table-category/CategoryValueAddDialog.tsx | 55 ++++++++++++------- .../CategoryValueEditDialog.tsx | 55 ++++++++++++------- .../table-category/CategoryValueManager.tsx | 9 ++- .../table-list/TableListComponent.tsx | 18 ++---- 5 files changed, 91 insertions(+), 53 deletions(-) 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 (