feat: 카테고리 배지 없음 옵션 추가

- 카테고리 색상 설정 시 '배지 없음' 옵션 추가
- color='none'일 때 배지 대신 일반 텍스트로 표시
- CategoryValueEditDialog, CategoryValueAddDialog에 배지 없음 버튼 추가
- InteractiveDataTable, TableListComponent에서 배지 없음 처리
- CategoryValueManager에서 배지 없음 표시 추가
- 기본 색상을 배지 없음으로 변경

frontend/components/table-category/CategoryValueAddDialog.tsx

@@ -50,7 +50,7 @@ export const CategoryValueAddDialog: React.FC<
 > = ({ 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<
 
           <div>
             <Label className="text-xs sm:text-sm">배지 색상</Label>
-            <div className="mt-1.5 flex items-center gap-3">
-              <div className="grid grid-cols-9 gap-2">
-                {DEFAULT_COLORS.map((c) => (
-                  <button
-                    key={c}
-                    type="button"
-                    onClick={() => setColor(c)}
-                    className={`h-7 w-7 rounded-md border-2 transition-all ${
-                      color === c ? "border-foreground scale-110" : "border-transparent hover:scale-105"
-                    }`}
-                    style={{ backgroundColor: c }}
-                    title={c}
-                  />
-                ))}
+            <div className="mt-1.5 space-y-2">
+              <div className="flex items-center gap-3">
+                <div className="grid grid-cols-9 gap-2">
+                  {DEFAULT_COLORS.map((c) => (
+                    <button
+                      key={c}
+                      type="button"
+                      onClick={() => setColor(c)}
+                      className={`h-7 w-7 rounded-md border-2 transition-all ${
+                        color === c ? "border-foreground scale-110" : "border-transparent hover:scale-105"
+                      }`}
+                      style={{ backgroundColor: c }}
+                      title={c}
+                    />
+                  ))}
+                </div>
+                {color && color !== "none" ? (
+                  <Badge style={{ backgroundColor: color, borderColor: color }} className="text-white">
+                    미리보기
+                  </Badge>
+                ) : (
+                  <span className="text-xs text-muted-foreground">배지 없음</span>
+                )}
               </div>
-              <Badge style={{ backgroundColor: color, borderColor: color }} className="text-white">
-                미리보기
-              </Badge>
+              <button
+                type="button"
+                onClick={() => setColor("none")}
+                className={`text-xs px-3 py-1.5 rounded-md border transition-colors ${
+                  color === "none"
+                    ? "border-primary bg-primary/10 text-primary font-medium"
+                    : "border-border hover:bg-accent"
+                }`}
+              >
+                배지 없음
+              </button>
             </div>
           </div>