From 30ebb14023b668cadecdc1a8cb7c7a49daf6ed00 Mon Sep 17 00:00:00 2001
From: johngreen <ramses7448@gmail.com>
Date: Thu, 21 May 2026 19:21:30 +0900
Subject: [PATCH] =?UTF-8?q?fix(=ED=85=8C=EC=9D=B4=EB=B8=94=ED=83=80?=
 =?UTF-8?q?=EC=9E=85):=20=EC=9E=85=EB=A0=A5=20=ED=83=80=EC=9E=85=20?=
 =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20lucide=20=EB=A1=9C=20=ED=86=B5?=
 =?UTF-8?q?=EC=9D=BC=20=E2=80=94=20letter/symbol/emoji=20=ED=98=BC?=
 =?UTF-8?q?=EC=9E=AC=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

기존엔 iconChar 문자열에 'T'(글자) / '#'(기호) / '{}'(코드) / '📎'(emoji) 식으로 일관성 없게
표시. 카드 그리드에서 시각 노이즈 큼.

- TypeColorConfig.iconChar(string) → Icon(LucideIcon) 으로 교체
- 13개 입력 타입 전부 lucide 아이콘 매핑 (Type/Hash/Calendar/Braces/Link2 등)
- FALLBACK_TYPE_CONFIG export 해서 TypeOverviewStrip 의 legacy/unknown 도 같은 인터페이스 따름

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../admin/table-type/ColumnDetailPanel.tsx    | 12 ++--
 .../admin/table-type/TypeOverviewStrip.tsx    | 15 ++---
 frontend/components/admin/table-type/types.ts | 57 ++++++++++++++-----
 3 files changed, 52 insertions(+), 32 deletions(-)

diff --git a/frontend/components/admin/table-type/ColumnDetailPanel.tsx b/frontend/components/admin/table-type/ColumnDetailPanel.tsx
index 8b365576..d1556a11 100644
--- a/frontend/components/admin/table-type/ColumnDetailPanel.tsx
+++ b/frontend/components/admin/table-type/ColumnDetailPanel.tsx
@@ -183,12 +183,12 @@ export function ColumnDetailPanel({
                     isLegacy && "cursor-not-allowed",
                   )}
                 >
-                  <span className={cn(
-                    "text-base font-bold leading-none",
-                    isSelected ? "text-primary" : conf.color,
-                  )}>
-                    {conf.iconChar}
-                  </span>
+                  <conf.Icon
+                    className={cn(
+                      "h-4 w-4",
+                      isSelected ? "text-primary" : conf.color,
+                    )}
+                  />
                   <span className={cn(
                     "text-[16px] font-semibold leading-tight",
                     isSelected ? "text-primary" : "text-foreground",
diff --git a/frontend/components/admin/table-type/TypeOverviewStrip.tsx b/frontend/components/admin/table-type/TypeOverviewStrip.tsx
index c63ed1f3..19474c0e 100644
--- a/frontend/components/admin/table-type/TypeOverviewStrip.tsx
+++ b/frontend/components/admin/table-type/TypeOverviewStrip.tsx
@@ -3,7 +3,7 @@
 import React, { useMemo } from "react";
 import { cn } from "@/lib/utils";
 import type { ColumnTypeInfo } from "./types";
-import { INPUT_TYPE_COLORS } from "./types";
+import { INPUT_TYPE_COLORS, FALLBACK_TYPE_CONFIG } from "./types";
 import { USER_SELECTABLE_INPUT_TYPE_ORDER } from "@/types/input-types";
 
 export interface TypeOverviewStripProps {
@@ -57,20 +57,13 @@ export function TypeOverviewStrip({
   /** stroke-dasharray: 비율만큼 둘레에 할당 (둘레 100 기준) */
   const circumference = 100;
   let offset = 0;
-  const LEGACY_CONF = {
-    color: "text-amber-600",
-    bgColor: "bg-amber-50",
-    barColor: "bg-amber-400",
-    label: "Legacy",
-    desc: "구버전 타입",
-    iconChar: "?",
-  };
+  const LEGACY_CONF = { ...FALLBACK_TYPE_CONFIG, color: "text-amber-600", bgColor: "bg-amber-50", barColor: "bg-amber-400" };
   const segmentPaths = segments.map(({ type, ratio, isLegacy }) => {
     const length = ratio * circumference;
     const dashArray = `${length} ${circumference - length}`;
     const dashOffset = -offset;
     offset += length;
-    const conf = isLegacy ? LEGACY_CONF : (INPUT_TYPE_COLORS[type] || { color: "text-muted-foreground", bgColor: "bg-muted" });
+    const conf = isLegacy ? LEGACY_CONF : (INPUT_TYPE_COLORS[type] || FALLBACK_TYPE_CONFIG);
     return {
       type,
       dashArray,
@@ -112,7 +105,7 @@ export function TypeOverviewStrip({
           .filter((type) => (counts[type] || 0) > 0)
           .sort((a, b) => (counts[b] ?? 0) - (counts[a] ?? 0))
           .map((type) => {
-            const conf = INPUT_TYPE_COLORS[type] || { color: "text-muted-foreground", bgColor: "bg-muted", label: type };
+            const conf = INPUT_TYPE_COLORS[type] || { ...FALLBACK_TYPE_CONFIG, label: type };
             const isActive = activeFilter === null || activeFilter === type;
             return (
               <button
diff --git a/frontend/components/admin/table-type/types.ts b/frontend/components/admin/table-type/types.ts
index f1b809ac..374a5dfb 100644
--- a/frontend/components/admin/table-type/types.ts
+++ b/frontend/components/admin/table-type/types.ts
@@ -3,6 +3,23 @@
  * page.tsx에서 추출한 인터페이스 및 타입별 색상/그룹 유틸
  */
 
+import {
+  AlignLeft,
+  Braces,
+  Calendar,
+  CheckSquare,
+  ChevronDown,
+  CircleDot,
+  FolderTree,
+  Hash,
+  HelpCircle,
+  Image as ImageIcon,
+  Link2,
+  ListOrdered,
+  Paperclip,
+  Type,
+  type LucideIcon,
+} from "lucide-react";
 import { USER_SELECTABLE_INPUT_TYPE_ORDER } from "@/types/input-types";
 
 export interface TableInfo {
@@ -52,24 +69,34 @@ export interface TypeColorConfig {
   barColor: string;
   label: string;
   desc: string;
-  iconChar: string;
+  Icon: LucideIcon;
 }
 
-/** 입력 타입별 색상 맵 - iconChar는 카드 선택용 시각 아이콘 */
+/** Legacy/알 수 없는 타입용 fallback config */
+export const FALLBACK_TYPE_CONFIG: TypeColorConfig = {
+  color: "text-muted-foreground",
+  bgColor: "bg-muted",
+  barColor: "bg-muted",
+  label: "Legacy",
+  desc: "구버전 타입",
+  Icon: HelpCircle,
+};
+
+/** 입력 타입별 색상 맵 - Icon 은 lucide 컴포넌트로 통일 (letter/symbol/emoji 혼재 방지) */
 export const INPUT_TYPE_COLORS: Record<string, TypeColorConfig> = {
-  text: { color: "text-slate-600", bgColor: "bg-slate-50", barColor: "bg-slate-400", label: "텍스트", desc: "일반 텍스트 입력", iconChar: "T" },
-  number: { color: "text-indigo-600", bgColor: "bg-indigo-50", barColor: "bg-indigo-500", label: "숫자", desc: "숫자만 입력", iconChar: "#" },
-  date: { color: "text-amber-600", bgColor: "bg-amber-50", barColor: "bg-amber-500", label: "날짜", desc: "날짜 선택", iconChar: "D" },
-  code: { color: "text-emerald-600", bgColor: "bg-emerald-50", barColor: "bg-emerald-500", label: "코드", desc: "공통코드 선택", iconChar: "{}" },
-  entity: { color: "text-violet-600", bgColor: "bg-violet-50", barColor: "bg-violet-500", label: "테이블 참조", desc: "다른 테이블 연결", iconChar: "⊞" },
-  select: { color: "text-cyan-600", bgColor: "bg-cyan-50", barColor: "bg-cyan-500", label: "셀렉트", desc: "직접 옵션 선택", iconChar: "☰" },
-  checkbox: { color: "text-pink-600", bgColor: "bg-pink-50", barColor: "bg-pink-500", label: "체크박스", desc: "예/아니오 선택", iconChar: "☑" },
-  numbering: { color: "text-orange-600", bgColor: "bg-orange-50", barColor: "bg-orange-500", label: "채번", desc: "자동 번호 생성", iconChar: "≡" },
-  category: { color: "text-teal-600", bgColor: "bg-teal-50", barColor: "bg-teal-500", label: "카테고리", desc: "등록된 선택지", iconChar: "⊟" },
-  textarea: { color: "text-indigo-600", bgColor: "bg-indigo-50", barColor: "bg-indigo-400", label: "여러 줄", desc: "긴 텍스트 입력", iconChar: "≡" },
-  radio: { color: "text-rose-600", bgColor: "bg-rose-50", barColor: "bg-rose-500", label: "라디오", desc: "하나만 선택", iconChar: "◉" },
-  file: { color: "text-amber-600", bgColor: "bg-amber-50", barColor: "bg-amber-500", label: "파일", desc: "파일 업로드", iconChar: "📎" },
-  image: { color: "text-sky-600", bgColor: "bg-sky-50", barColor: "bg-sky-500", label: "이미지", desc: "이미지 표시", iconChar: "🖼" },
+  text:      { color: "text-slate-600",   bgColor: "bg-slate-50",   barColor: "bg-slate-400",   label: "텍스트",      desc: "일반 텍스트 입력",   Icon: Type },
+  number:    { color: "text-indigo-600",  bgColor: "bg-indigo-50",  barColor: "bg-indigo-500",  label: "숫자",        desc: "숫자만 입력",         Icon: Hash },
+  date:      { color: "text-amber-600",   bgColor: "bg-amber-50",   barColor: "bg-amber-500",   label: "날짜",        desc: "날짜 선택",           Icon: Calendar },
+  code:      { color: "text-emerald-600", bgColor: "bg-emerald-50", barColor: "bg-emerald-500", label: "코드",        desc: "공통코드 선택",       Icon: Braces },
+  entity:    { color: "text-violet-600",  bgColor: "bg-violet-50",  barColor: "bg-violet-500",  label: "테이블 참조", desc: "다른 테이블 연결",   Icon: Link2 },
+  select:    { color: "text-cyan-600",    bgColor: "bg-cyan-50",    barColor: "bg-cyan-500",    label: "셀렉트",      desc: "직접 옵션 선택",      Icon: ChevronDown },
+  checkbox:  { color: "text-pink-600",    bgColor: "bg-pink-50",    barColor: "bg-pink-500",    label: "체크박스",    desc: "예/아니오 선택",      Icon: CheckSquare },
+  numbering: { color: "text-orange-600",  bgColor: "bg-orange-50",  barColor: "bg-orange-500",  label: "채번",        desc: "자동 번호 생성",     Icon: ListOrdered },
+  category:  { color: "text-teal-600",    bgColor: "bg-teal-50",    barColor: "bg-teal-500",    label: "카테고리",    desc: "등록된 선택지",       Icon: FolderTree },
+  textarea:  { color: "text-indigo-600",  bgColor: "bg-indigo-50",  barColor: "bg-indigo-400",  label: "여러 줄",     desc: "긴 텍스트 입력",      Icon: AlignLeft },
+  radio:     { color: "text-rose-600",    bgColor: "bg-rose-50",    barColor: "bg-rose-500",    label: "라디오",      desc: "하나만 선택",         Icon: CircleDot },
+  file:      { color: "text-amber-600",   bgColor: "bg-amber-50",   barColor: "bg-amber-500",   label: "파일",        desc: "파일 업로드",         Icon: Paperclip },
+  image:     { color: "text-sky-600",     bgColor: "bg-sky-50",     barColor: "bg-sky-500",     label: "이미지",      desc: "이미지 표시",         Icon: ImageIcon },
 };
 
 /** v3.2 — 사용자 선택 가능한 8개 입력 타입 색상 맵 (T2 드롭다운/카드 그리드용) */