From 963e0c2d247a980d9c6335fc7e056ef020c889ce Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Tue, 16 Dec 2025 14:56:31 +0900
Subject: [PATCH] =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=EB=94=94=EC=8A=A4?=
 =?UTF-8?q?=ED=94=8C=EB=A0=88=EC=9D=B4=20=EC=84=A0=ED=83=9D=EC=95=88?=
 =?UTF-8?q?=ED=95=A8=20=EC=98=B5=EC=85=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/controllers/entityJoinController.ts   |  10 +-
 .../card-display/CardDisplayComponent.tsx     |  30 +-
 .../card-display/CardDisplayConfigPanel.tsx   | 492 ++++++++++++------
 3 files changed, 362 insertions(+), 170 deletions(-)

diff --git a/backend-node/src/controllers/entityJoinController.ts b/backend-node/src/controllers/entityJoinController.ts
index 00727f1d..fbb88750 100644
--- a/backend-node/src/controllers/entityJoinController.ts
+++ b/backend-node/src/controllers/entityJoinController.ts
@@ -424,18 +424,16 @@ export class EntityJoinController {
                 config.referenceTable
               );
 
-            // 현재 display_column으로 사용 중인 컬럼 제외
+            // 현재 display_column 정보 (참고용으로만 사용, 필터링하지 않음)
             const currentDisplayColumn =
               config.displayColumn || config.displayColumns[0];
-            const availableColumns = columns.filter(
-              (col) => col.columnName !== currentDisplayColumn
-            );
-
+            
+            // 모든 컬럼 표시 (기본 표시 컬럼도 포함)
             return {
               joinConfig: config,
               tableName: config.referenceTable,
               currentDisplayColumn: currentDisplayColumn,
-              availableColumns: availableColumns.map((col) => ({
+              availableColumns: columns.map((col) => ({
                 columnName: col.columnName,
                 columnLabel: col.displayName || col.columnName,
                 dataType: col.dataType,
diff --git a/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx b/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx
index c3414677..5594d266 100644
--- a/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx
+++ b/frontend/lib/registry/components/card-display/CardDisplayComponent.tsx
@@ -4,6 +4,7 @@ import React, { useEffect, useState, useMemo, useCallback, useRef } from "react"
 import { ComponentRendererProps } from "@/types/component";
 import { CardDisplayConfig } from "./types";
 import { tableTypeApi } from "@/lib/api/screen";
+import { entityJoinApi } from "@/lib/api/entityJoin";
 import { getFullImageUrl, apiClient } from "@/lib/api/client";
 import { filterDOMProps } from "@/lib/utils/domPropsFilter";
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
@@ -308,10 +309,35 @@ export const CardDisplayComponent: React.FC<CardDisplayComponentProps> = ({
           search: Object.keys(linkedFilterValues).length > 0 ? linkedFilterValues : undefined,
         };
 
+        // 조인 컬럼 설정 가져오기 (componentConfig에서)
+        const joinColumnsConfig = component.componentConfig?.joinColumns || [];
+        const entityJoinColumns = joinColumnsConfig
+          .filter((col: any) => col.isJoinColumn)
+          .map((col: any) => ({
+            columnName: col.columnName,
+            sourceColumn: col.sourceColumn,
+            referenceTable: col.referenceTable,
+            referenceColumn: col.referenceColumn,
+            displayColumn: col.referenceColumn,
+            label: col.label,
+            joinAlias: col.columnName, // 백엔드에서 필요한 joinAlias 추가
+            sourceTable: tableNameToUse, // 기준 테이블
+          }));
 
         // 테이블 데이터, 컬럼 정보, 입력 타입 정보를 병렬로 로드
-        const [dataResponse, columnsResponse, inputTypesResponse] = await Promise.all([
-          tableTypeApi.getTableData(tableNameToUse, apiParams),
+        // 조인 컬럼이 있으면 entityJoinApi 사용
+        let dataResponse;
+        if (entityJoinColumns.length > 0) {
+          console.log("🔗 [CardDisplay] 엔티티 조인 API 사용:", entityJoinColumns);
+          dataResponse = await entityJoinApi.getTableDataWithJoins(tableNameToUse, {
+            ...apiParams,
+            additionalJoinColumns: entityJoinColumns,
+          });
+        } else {
+          dataResponse = await tableTypeApi.getTableData(tableNameToUse, apiParams);
+        }
+
+        const [columnsResponse, inputTypesResponse] = await Promise.all([
           tableTypeApi.getColumns(tableNameToUse),
           tableTypeApi.getColumnInputTypes(tableNameToUse),
         ]);
diff --git a/frontend/lib/registry/components/card-display/CardDisplayConfigPanel.tsx b/frontend/lib/registry/components/card-display/CardDisplayConfigPanel.tsx
index 52889865..73bb79a9 100644
--- a/frontend/lib/registry/components/card-display/CardDisplayConfigPanel.tsx
+++ b/frontend/lib/registry/components/card-display/CardDisplayConfigPanel.tsx
@@ -1,6 +1,21 @@
 "use client";
 
-import React from "react";
+import React, { useState, useEffect } from "react";
+import { entityJoinApi } from "@/lib/api/entityJoin";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Trash2 } from "lucide-react";
 
 interface CardDisplayConfigPanelProps {
   config: any;
@@ -9,9 +24,32 @@ interface CardDisplayConfigPanelProps {
   tableColumns?: any[];
 }
 
+interface EntityJoinColumn {
+  tableName: string;
+  columnName: string;
+  columnLabel: string;
+  dataType: string;
+  joinAlias: string;
+  suggestedLabel: string;
+}
+
+interface JoinTable {
+  tableName: string;
+  currentDisplayColumn: string;
+  joinConfig?: {
+    sourceColumn: string;
+  };
+  availableColumns: Array<{
+    columnName: string;
+    columnLabel: string;
+    dataType: string;
+    description?: string;
+  }>;
+}
+
 /**
  * CardDisplay 설정 패널
- * 카드 레이아웃과 동일한 설정 UI 제공
+ * 카드 레이아웃과 동일한 설정 UI 제공 + 엔티티 조인 컬럼 지원
  */
 export const CardDisplayConfigPanel: React.FC<CardDisplayConfigPanelProps> = ({
   config,
@@ -19,6 +57,40 @@ export const CardDisplayConfigPanel: React.FC<CardDisplayConfigPanelProps> = ({
   screenTableName,
   tableColumns = [],
 }) => {
+  // 엔티티 조인 컬럼 상태
+  const [entityJoinColumns, setEntityJoinColumns] = useState<{
+    availableColumns: EntityJoinColumn[];
+    joinTables: JoinTable[];
+  }>({ availableColumns: [], joinTables: [] });
+  const [loadingEntityJoins, setLoadingEntityJoins] = useState(false);
+
+  // 엔티티 조인 컬럼 정보 가져오기
+  useEffect(() => {
+    const fetchEntityJoinColumns = async () => {
+      const tableName = config.tableName || screenTableName;
+      if (!tableName) {
+        setEntityJoinColumns({ availableColumns: [], joinTables: [] });
+        return;
+      }
+
+      setLoadingEntityJoins(true);
+      try {
+        const result = await entityJoinApi.getEntityJoinColumns(tableName);
+        setEntityJoinColumns({
+          availableColumns: result.availableColumns || [],
+          joinTables: result.joinTables || [],
+        });
+      } catch (error) {
+        console.error("Entity 조인 컬럼 조회 오류:", error);
+        setEntityJoinColumns({ availableColumns: [], joinTables: [] });
+      } finally {
+        setLoadingEntityJoins(false);
+      }
+    };
+
+    fetchEntityJoinColumns();
+  }, [config.tableName, screenTableName]);
+
   const handleChange = (key: string, value: any) => {
     onChange({ ...config, [key]: value });
   };
@@ -28,7 +100,6 @@ export const CardDisplayConfigPanel: React.FC<CardDisplayConfigPanelProps> = ({
     let newConfig = { ...config };
     let current = newConfig;
 
-    // 중첩 객체 생성
     for (let i = 0; i < keys.length - 1; i++) {
       if (!current[keys[i]]) {
         current[keys[i]] = {};
@@ -40,6 +111,47 @@ export const CardDisplayConfigPanel: React.FC<CardDisplayConfigPanelProps> = ({
     onChange(newConfig);
   };
 
+  // 컬럼 선택 시 조인 컬럼이면 joinColumns 설정도 함께 업데이트
+  const handleColumnSelect = (path: string, columnName: string) => {
+    const joinColumn = entityJoinColumns.availableColumns.find(
+      (col) => col.joinAlias === columnName
+    );
+
+    if (joinColumn) {
+      const joinColumnsConfig = config.joinColumns || [];
+      const existingJoinColumn = joinColumnsConfig.find(
+        (jc: any) => jc.columnName === columnName
+      );
+
+      if (!existingJoinColumn) {
+        const joinTableInfo = entityJoinColumns.joinTables?.find(
+          (jt) => jt.tableName === joinColumn.tableName
+        );
+
+        const newJoinColumnConfig = {
+          columnName: joinColumn.joinAlias,
+          label: joinColumn.suggestedLabel || joinColumn.columnLabel,
+          sourceColumn: joinTableInfo?.joinConfig?.sourceColumn || "",
+          referenceTable: joinColumn.tableName,
+          referenceColumn: joinColumn.columnName,
+          isJoinColumn: true,
+        };
+
+        onChange({
+          ...config,
+          columnMapping: {
+            ...config.columnMapping,
+            [path.split(".")[1]]: columnName,
+          },
+          joinColumns: [...joinColumnsConfig, newJoinColumnConfig],
+        });
+        return;
+      }
+    }
+
+    handleNestedChange(path, columnName);
+  };
+
   // 표시 컬럼 추가
   const addDisplayColumn = () => {
     const currentColumns = config.columnMapping?.displayColumns || [];
@@ -58,122 +170,198 @@ export const CardDisplayConfigPanel: React.FC<CardDisplayConfigPanelProps> = ({
   const updateDisplayColumn = (index: number, value: string) => {
     const currentColumns = [...(config.columnMapping?.displayColumns || [])];
     currentColumns[index] = value;
+
+    const joinColumn = entityJoinColumns.availableColumns.find(
+      (col) => col.joinAlias === value
+    );
+
+    if (joinColumn) {
+      const joinColumnsConfig = config.joinColumns || [];
+      const existingJoinColumn = joinColumnsConfig.find(
+        (jc: any) => jc.columnName === value
+      );
+
+      if (!existingJoinColumn) {
+        const joinTableInfo = entityJoinColumns.joinTables?.find(
+          (jt) => jt.tableName === joinColumn.tableName
+        );
+
+        const newJoinColumnConfig = {
+          columnName: joinColumn.joinAlias,
+          label: joinColumn.suggestedLabel || joinColumn.columnLabel,
+          sourceColumn: joinTableInfo?.joinConfig?.sourceColumn || "",
+          referenceTable: joinColumn.tableName,
+          referenceColumn: joinColumn.columnName,
+          isJoinColumn: true,
+        };
+
+        onChange({
+          ...config,
+          columnMapping: {
+            ...config.columnMapping,
+            displayColumns: currentColumns,
+          },
+          joinColumns: [...joinColumnsConfig, newJoinColumnConfig],
+        });
+        return;
+      }
+    }
+
     handleNestedChange("columnMapping.displayColumns", currentColumns);
   };
 
+  // 테이블별로 조인 컬럼 그룹화
+  const joinColumnsByTable: Record<string, EntityJoinColumn[]> = {};
+  entityJoinColumns.availableColumns.forEach((col) => {
+    if (!joinColumnsByTable[col.tableName]) {
+      joinColumnsByTable[col.tableName] = [];
+    }
+    joinColumnsByTable[col.tableName].push(col);
+  });
+
+  // 컬럼 선택 셀렉트 박스 렌더링 (Shadcn UI)
+  const renderColumnSelect = (
+    value: string,
+    onChangeHandler: (value: string) => void,
+    placeholder: string = "컬럼을 선택하세요"
+  ) => {
+    return (
+      <Select 
+        value={value || "__none__"} 
+        onValueChange={(val) => onChangeHandler(val === "__none__" ? "" : val)}
+      >
+        <SelectTrigger className="h-8 text-xs">
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {/* 선택 안함 옵션 */}
+          <SelectItem value="__none__" className="text-xs text-muted-foreground">
+            선택 안함
+          </SelectItem>
+
+          {/* 기본 테이블 컬럼 */}
+          {tableColumns.length > 0 && (
+            <SelectGroup>
+              <SelectLabel className="text-xs font-semibold text-muted-foreground">
+                기본 컬럼
+              </SelectLabel>
+              {tableColumns.map((column) => (
+                <SelectItem
+                  key={column.columnName}
+                  value={column.columnName}
+                  className="text-xs"
+                >
+                  {column.columnLabel || column.columnName}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          )}
+
+          {/* 조인 테이블별 컬럼 */}
+          {Object.entries(joinColumnsByTable).map(([tableName, columns]) => (
+            <SelectGroup key={tableName}>
+              <SelectLabel className="text-xs font-semibold text-blue-600">
+                {tableName} (조인)
+              </SelectLabel>
+              {columns.map((col) => (
+                <SelectItem
+                  key={col.joinAlias}
+                  value={col.joinAlias}
+                  className="text-xs"
+                >
+                  {col.suggestedLabel || col.columnLabel}
+                </SelectItem>
+              ))}
+            </SelectGroup>
+          ))}
+        </SelectContent>
+      </Select>
+    );
+  };
+
   return (
     <div className="space-y-4">
-      <div className="text-sm font-medium text-gray-700">카드 디스플레이 설정</div>
+      <div className="text-sm font-medium">카드 디스플레이 설정</div>
 
       {/* 테이블이 선택된 경우 컬럼 매핑 설정 */}
       {tableColumns && tableColumns.length > 0 && (
         <div className="space-y-3">
-          <h5 className="text-xs font-medium text-gray-700">컬럼 매핑</h5>
+          <h5 className="text-xs font-medium text-muted-foreground">컬럼 매핑</h5>
 
-          <div>
-            <label className="mb-1 block text-xs font-medium text-gray-600">타이틀 컬럼</label>
-            <select
-              value={config.columnMapping?.titleColumn || ""}
-              onChange={(e) => handleNestedChange("columnMapping.titleColumn", e.target.value)}
-              className="w-full rounded border border-gray-300 px-2 py-1 text-sm"
-            >
-              <option value="">컬럼을 선택하세요</option>
-              {tableColumns.map((column) => (
-                <option key={column.columnName} value={column.columnName}>
-                  {column.columnLabel || column.columnName} ({column.dataType})
-                </option>
-              ))}
-            </select>
+          {loadingEntityJoins && (
+            <div className="text-xs text-muted-foreground">조인 컬럼 로딩 중...</div>
+          )}
+
+          <div className="space-y-1">
+            <Label className="text-xs">타이틀 컬럼</Label>
+            {renderColumnSelect(
+              config.columnMapping?.titleColumn || "",
+              (value) => handleColumnSelect("columnMapping.titleColumn", value)
+            )}
           </div>
 
-          <div>
-            <label className="mb-1 block text-xs font-medium text-gray-600">서브타이틀 컬럼</label>
-            <select
-              value={config.columnMapping?.subtitleColumn || ""}
-              onChange={(e) => handleNestedChange("columnMapping.subtitleColumn", e.target.value)}
-              className="w-full rounded border border-gray-300 px-2 py-1 text-sm"
-            >
-              <option value="">컬럼을 선택하세요</option>
-              {tableColumns.map((column) => (
-                <option key={column.columnName} value={column.columnName}>
-                  {column.columnLabel || column.columnName} ({column.dataType})
-                </option>
-              ))}
-            </select>
+          <div className="space-y-1">
+            <Label className="text-xs">서브타이틀 컬럼</Label>
+            {renderColumnSelect(
+              config.columnMapping?.subtitleColumn || "",
+              (value) => handleColumnSelect("columnMapping.subtitleColumn", value)
+            )}
           </div>
 
-          <div>
-            <label className="mb-1 block text-xs font-medium text-gray-600">설명 컬럼</label>
-            <select
-              value={config.columnMapping?.descriptionColumn || ""}
-              onChange={(e) => handleNestedChange("columnMapping.descriptionColumn", e.target.value)}
-              className="w-full rounded border border-gray-300 px-2 py-1 text-sm"
-            >
-              <option value="">컬럼을 선택하세요</option>
-              {tableColumns.map((column) => (
-                <option key={column.columnName} value={column.columnName}>
-                  {column.columnLabel || column.columnName} ({column.dataType})
-                </option>
-              ))}
-            </select>
+          <div className="space-y-1">
+            <Label className="text-xs">설명 컬럼</Label>
+            {renderColumnSelect(
+              config.columnMapping?.descriptionColumn || "",
+              (value) => handleColumnSelect("columnMapping.descriptionColumn", value)
+            )}
           </div>
 
-          <div>
-            <label className="mb-1 block text-xs font-medium text-gray-600">이미지 컬럼</label>
-            <select
-              value={config.columnMapping?.imageColumn || ""}
-              onChange={(e) => handleNestedChange("columnMapping.imageColumn", e.target.value)}
-              className="w-full rounded border border-gray-300 px-2 py-1 text-sm"
-            >
-              <option value="">컬럼을 선택하세요</option>
-              {tableColumns.map((column) => (
-                <option key={column.columnName} value={column.columnName}>
-                  {column.columnLabel || column.columnName} ({column.dataType})
-                </option>
-              ))}
-            </select>
+          <div className="space-y-1">
+            <Label className="text-xs">이미지 컬럼</Label>
+            {renderColumnSelect(
+              config.columnMapping?.imageColumn || "",
+              (value) => handleColumnSelect("columnMapping.imageColumn", value)
+            )}
           </div>
 
           {/* 동적 표시 컬럼 추가 */}
-          <div>
-            <div className="mb-2 flex items-center justify-between">
-              <label className="text-xs font-medium text-gray-600">표시 컬럼들</label>
-              <button
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <Label className="text-xs">표시 컬럼들</Label>
+              <Button
                 type="button"
+                variant="outline"
+                size="sm"
                 onClick={addDisplayColumn}
-                className="rounded bg-blue-500 px-2 py-1 text-xs text-white hover:bg-blue-600"
+                className="h-6 px-2 text-xs"
               >
                 + 컬럼 추가
-              </button>
+              </Button>
             </div>
 
             <div className="space-y-2">
               {(config.columnMapping?.displayColumns || []).map((column: string, index: number) => (
-                <div key={index} className="flex items-center space-x-2">
-                  <select
-                    value={column}
-                    onChange={(e) => updateDisplayColumn(index, e.target.value)}
-                    className="flex-1 rounded border border-gray-300 px-2 py-1 text-sm"
-                  >
-                    <option value="">컬럼을 선택하세요</option>
-                    {tableColumns.map((col) => (
-                      <option key={col.columnName} value={col.columnName}>
-                        {col.columnLabel || col.columnName} ({col.dataType})
-                      </option>
-                    ))}
-                  </select>
-                  <button
+                <div key={index} className="flex items-center gap-2">
+                  <div className="flex-1">
+                    {renderColumnSelect(
+                      column,
+                      (value) => updateDisplayColumn(index, value)
+                    )}
+                  </div>
+                  <Button
                     type="button"
+                    variant="ghost"
+                    size="sm"
                     onClick={() => removeDisplayColumn(index)}
-                    className="rounded bg-red-500 px-2 py-1 text-xs text-white hover:bg-red-600"
+                    className="h-8 w-8 p-0 text-destructive hover:bg-destructive/10 hover:text-destructive"
                   >
-                    삭제
-                  </button>
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
                 </div>
               ))}
 
               {(!config.columnMapping?.displayColumns || config.columnMapping.displayColumns.length === 0) && (
-                <div className="rounded border border-dashed border-gray-300 py-2 text-center text-xs text-gray-500">
+                <div className="rounded-md border border-dashed border-muted-foreground/30 py-3 text-center text-xs text-muted-foreground">
                   "컬럼 추가" 버튼을 클릭하여 표시할 컬럼을 추가하세요
                 </div>
               )}
@@ -184,186 +372,166 @@ export const CardDisplayConfigPanel: React.FC<CardDisplayConfigPanelProps> = ({
 
       {/* 카드 스타일 설정 */}
       <div className="space-y-3">
-        <h5 className="text-xs font-medium text-gray-700">카드 스타일</h5>
+        <h5 className="text-xs font-medium text-muted-foreground">카드 스타일</h5>
 
-        <div className="grid grid-cols-2 gap-2">
-          <div>
-            <label className="mb-1 block text-xs font-medium text-gray-600">한 행당 카드 수</label>
-            <input
+        <div className="grid grid-cols-2 gap-3">
+          <div className="space-y-1">
+            <Label className="text-xs">한 행당 카드 수</Label>
+            <Input
               type="number"
               min="1"
               max="6"
               value={config.cardsPerRow || 3}
               onChange={(e) => handleChange("cardsPerRow", parseInt(e.target.value))}
-              className="w-full rounded border border-gray-300 px-2 py-1 text-sm"
+              className="h-8 text-xs"
             />
           </div>
 
-          <div>
-            <label className="mb-1 block text-xs font-medium text-gray-600">카드 간격 (px)</label>
-            <input
+          <div className="space-y-1">
+            <Label className="text-xs">카드 간격 (px)</Label>
+            <Input
               type="number"
               min="0"
               max="50"
               value={config.cardSpacing || 16}
               onChange={(e) => handleChange("cardSpacing", parseInt(e.target.value))}
-              className="w-full rounded border border-gray-300 px-2 py-1 text-sm"
+              className="h-8 text-xs"
             />
           </div>
         </div>
 
         <div className="space-y-2">
           <div className="flex items-center space-x-2">
-            <input
-              type="checkbox"
+            <Checkbox
               id="showTitle"
               checked={config.cardStyle?.showTitle ?? true}
-              onChange={(e) => handleNestedChange("cardStyle.showTitle", e.target.checked)}
-              className="rounded border-gray-300"
+              onCheckedChange={(checked) => handleNestedChange("cardStyle.showTitle", checked)}
             />
-            <label htmlFor="showTitle" className="text-xs text-gray-600">
+            <Label htmlFor="showTitle" className="text-xs font-normal">
               타이틀 표시
-            </label>
+            </Label>
           </div>
 
           <div className="flex items-center space-x-2">
-            <input
-              type="checkbox"
+            <Checkbox
               id="showSubtitle"
               checked={config.cardStyle?.showSubtitle ?? true}
-              onChange={(e) => handleNestedChange("cardStyle.showSubtitle", e.target.checked)}
-              className="rounded border-gray-300"
+              onCheckedChange={(checked) => handleNestedChange("cardStyle.showSubtitle", checked)}
             />
-            <label htmlFor="showSubtitle" className="text-xs text-gray-600">
+            <Label htmlFor="showSubtitle" className="text-xs font-normal">
               서브타이틀 표시
-            </label>
+            </Label>
           </div>
 
           <div className="flex items-center space-x-2">
-            <input
-              type="checkbox"
+            <Checkbox
               id="showDescription"
               checked={config.cardStyle?.showDescription ?? true}
-              onChange={(e) => handleNestedChange("cardStyle.showDescription", e.target.checked)}
-              className="rounded border-gray-300"
+              onCheckedChange={(checked) => handleNestedChange("cardStyle.showDescription", checked)}
             />
-            <label htmlFor="showDescription" className="text-xs text-gray-600">
+            <Label htmlFor="showDescription" className="text-xs font-normal">
               설명 표시
-            </label>
+            </Label>
           </div>
 
           <div className="flex items-center space-x-2">
-            <input
-              type="checkbox"
+            <Checkbox
               id="showImage"
               checked={config.cardStyle?.showImage ?? false}
-              onChange={(e) => handleNestedChange("cardStyle.showImage", e.target.checked)}
-              className="rounded border-gray-300"
+              onCheckedChange={(checked) => handleNestedChange("cardStyle.showImage", checked)}
             />
-            <label htmlFor="showImage" className="text-xs text-gray-600">
+            <Label htmlFor="showImage" className="text-xs font-normal">
               이미지 표시
-            </label>
+            </Label>
           </div>
 
           <div className="flex items-center space-x-2">
-            <input
-              type="checkbox"
+            <Checkbox
               id="showActions"
               checked={config.cardStyle?.showActions ?? true}
-              onChange={(e) => handleNestedChange("cardStyle.showActions", e.target.checked)}
-              className="rounded border-gray-300"
+              onCheckedChange={(checked) => handleNestedChange("cardStyle.showActions", checked)}
             />
-            <label htmlFor="showActions" className="text-xs text-gray-600">
+            <Label htmlFor="showActions" className="text-xs font-normal">
               액션 버튼 표시
-            </label>
+            </Label>
           </div>
 
-          {/* 개별 버튼 설정 (액션 버튼이 활성화된 경우에만 표시) */}
+          {/* 개별 버튼 설정 */}
           {(config.cardStyle?.showActions ?? true) && (
-            <div className="ml-4 space-y-2 border-l-2 border-gray-200 pl-3">
+            <div className="ml-5 space-y-2 border-l-2 border-muted pl-3">
               <div className="flex items-center space-x-2">
-                <input
-                  type="checkbox"
+                <Checkbox
                   id="showViewButton"
                   checked={config.cardStyle?.showViewButton ?? true}
-                  onChange={(e) => handleNestedChange("cardStyle.showViewButton", e.target.checked)}
-                  className="rounded border-gray-300"
+                  onCheckedChange={(checked) => handleNestedChange("cardStyle.showViewButton", checked)}
                 />
-                <label htmlFor="showViewButton" className="text-xs text-gray-600">
+                <Label htmlFor="showViewButton" className="text-xs font-normal">
                   상세보기 버튼
-                </label>
+                </Label>
               </div>
 
               <div className="flex items-center space-x-2">
-                <input
-                  type="checkbox"
+                <Checkbox
                   id="showEditButton"
                   checked={config.cardStyle?.showEditButton ?? true}
-                  onChange={(e) => handleNestedChange("cardStyle.showEditButton", e.target.checked)}
-                  className="rounded border-gray-300"
+                  onCheckedChange={(checked) => handleNestedChange("cardStyle.showEditButton", checked)}
                 />
-                <label htmlFor="showEditButton" className="text-xs text-gray-600">
+                <Label htmlFor="showEditButton" className="text-xs font-normal">
                   편집 버튼
-                </label>
+                </Label>
               </div>
 
               <div className="flex items-center space-x-2">
-                <input
-                  type="checkbox"
+                <Checkbox
                   id="showDeleteButton"
                   checked={config.cardStyle?.showDeleteButton ?? false}
-                  onChange={(e) => handleNestedChange("cardStyle.showDeleteButton", e.target.checked)}
-                  className="rounded border-gray-300"
+                  onCheckedChange={(checked) => handleNestedChange("cardStyle.showDeleteButton", checked)}
                 />
-                <label htmlFor="showDeleteButton" className="text-xs text-gray-600">
+                <Label htmlFor="showDeleteButton" className="text-xs font-normal">
                   삭제 버튼
-                </label>
+                </Label>
               </div>
             </div>
           )}
         </div>
 
-        <div>
-          <label className="mb-1 block text-xs font-medium text-gray-600">설명 최대 길이</label>
-          <input
+        <div className="space-y-1">
+          <Label className="text-xs">설명 최대 길이</Label>
+          <Input
             type="number"
             min="10"
             max="500"
             value={config.cardStyle?.maxDescriptionLength || 100}
             onChange={(e) => handleNestedChange("cardStyle.maxDescriptionLength", parseInt(e.target.value))}
-            className="w-full rounded border border-gray-300 px-2 py-1 text-sm"
+            className="h-8 text-xs"
           />
         </div>
       </div>
 
       {/* 공통 설정 */}
       <div className="space-y-3">
-        <h5 className="text-xs font-medium text-gray-700">공통 설정</h5>
+        <h5 className="text-xs font-medium text-muted-foreground">공통 설정</h5>
 
         <div className="flex items-center space-x-2">
-          <input
-            type="checkbox"
+          <Checkbox
             id="disabled"
             checked={config.disabled || false}
-            onChange={(e) => handleChange("disabled", e.target.checked)}
-            className="rounded border-gray-300"
+            onCheckedChange={(checked) => handleChange("disabled", checked)}
           />
-          <label htmlFor="disabled" className="text-xs text-gray-600">
+          <Label htmlFor="disabled" className="text-xs font-normal">
             비활성화
-          </label>
+          </Label>
         </div>
 
         <div className="flex items-center space-x-2">
-          <input
-            type="checkbox"
+          <Checkbox
             id="readonly"
             checked={config.readonly || false}
-            onChange={(e) => handleChange("readonly", e.target.checked)}
-            className="rounded border-gray-300"
+            onCheckedChange={(checked) => handleChange("readonly", checked)}
           />
-          <label htmlFor="readonly" className="text-xs text-gray-600">
+          <Label htmlFor="readonly" className="text-xs font-normal">
             읽기 전용
-          </label>
+          </Label>
         </div>
       </div>
     </div>