feat: enhance component configuration and rendering

- Updated the RealtimePreviewDynamic component to display selected component information more clearly.
- Added dynamic field type labels in the RealtimePreviewDynamic component for better user understanding.
- Introduced a table refresh counter in the ScreenDesigner component to handle table column updates effectively.
- Improved the V2PropertiesPanel and V2SelectConfigPanel to support additional properties and enhance usability.
- Refactored the DynamicComponentRenderer to better handle field types and improve component configuration merging.

Made-with: Cursor

frontend/components/v2/config-panels/V2SelectConfigPanel.tsx

@@ -73,7 +73,6 @@ const SOURCE_CARDS = [
     icon: Database,
     title: "테이블 참조",
     description: "다른 테이블에서 가져와요",
-    entityOnly: true,
   },
 ] as const;
 
@@ -279,6 +278,8 @@ interface V2SelectConfigPanelProps {
   inputType?: string;
   tableName?: string;
   columnName?: string;
+  tables?: Array<{ tableName: string; displayName?: string; tableComment?: string }>;
+  screenTableName?: string;
 }
 
 export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
@@ -287,6 +288,8 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
   inputType,
   tableName,
   columnName,
+  tables = [],
+  screenTableName,
 }) => {
   const isEntityType = inputType === "entity" || config.source === "entity" || !!config.entityTable;
   const isCategoryType = inputType === "category";
@@ -342,11 +345,12 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
     loadFilterColumns();
   }, [filterTargetTable]);
 
+  // 초기 source가 설정 안 된 경우에만 기본값 설정
   useEffect(() => {
-    if (isCategoryType && config.source !== "category") {
+    if (!config.source && isCategoryType) {
       onChange({ ...config, source: "category" });
     }
-  }, [isCategoryType]);
+  }, []);
 
   const loadCategoryValues = useCallback(async (catTable: string, catColumn: string) => {
     if (!catTable || !catColumn) {
@@ -447,23 +451,13 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
     updateConfig("options", newOptions);
   };
 
-  const effectiveSource = isCategoryType
+  const effectiveSource = config.source === "code"
     ? "category"
-    : config.source === "code"
-      ? "category"
-      : config.source || "static";
+    : config.source || (isCategoryType ? "category" : "static");
 
-  const visibleCards = useMemo(() => {
-    if (isCategoryType) {
-      return SOURCE_CARDS.filter((c) => c.value === "category");
-    }
-    return SOURCE_CARDS.filter((c) => {
-      if (c.entityOnly && !isEntityType) return false;
-      return true;
-    });
-  }, [isCategoryType, isEntityType]);
+  const visibleCards = SOURCE_CARDS;
 
-  const gridCols = isEntityType ? "grid-cols-3" : "grid-cols-2";
+  const gridCols = "grid-cols-3";
 
   return (
     <div className="space-y-4">
@@ -572,9 +566,25 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
             <span className="text-sm font-medium">테이블 참조</span>
           </div>
 
-          <div className="rounded-md border bg-background p-3">
-            <p className="text-xs text-muted-foreground">참조 테이블</p>
-            <p className="mt-0.5 text-sm font-medium">{config.entityTable || "미설정"}</p>
+          <div>
+            <p className="mb-1.5 text-xs text-muted-foreground">참조 테이블</p>
+            <Select
+              value={config.entityTable || ""}
+              onValueChange={(v) => {
+                onChange({ ...config, entityTable: v, entityValueColumn: "", entityLabelColumn: "" });
+              }}
+            >
+              <SelectTrigger className="h-8 text-sm">
+                <SelectValue placeholder="테이블을 선택해주세요" />
+              </SelectTrigger>
+              <SelectContent>
+                {tables.map((t) => (
+                  <SelectItem key={t.tableName} value={t.tableName}>
+                    {t.displayName || t.tableComment ? `${t.displayName || t.tableComment} (${t.tableName})` : t.tableName}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           </div>
 
           {loadingColumns && (
@@ -628,16 +638,9 @@ export const V2SelectConfigPanel: React.FC<V2SelectConfigPanelProps> = ({
             </div>
           )}
 
-          {!loadingColumns && entityColumns.length === 0 && !config.entityTable && (
-            <div className="rounded-md border-2 border-dashed p-4 text-center">
-              <p className="text-sm text-muted-foreground">참조 테이블이 설정되지 않았어요</p>
-              <p className="mt-1 text-xs text-muted-foreground">테이블 타입 관리에서 참조 테이블을 설정해주세요</p>
-            </div>
-          )}
-
           {config.entityTable && !loadingColumns && entityColumns.length === 0 && (
             <p className="text-[10px] text-amber-600">
-              테이블 컬럼을 조회할 수 없습니다. 테이블 타입 관리에서 참조 테이블을 설정해주세요.
+              선택한 테이블의 컬럼 정보를 불러올 수 없어요. 테이블 타입 관리에서 컬럼 정보를 확인해주세요.
             </p>
           )}
         </div>