backend-node/src/services/screenManagementService.ts

@@ -5177,8 +5177,18 @@ export class ScreenManagementService {
       throw new Error("이 화면의 레이아웃을 저장할 권한이 없습니다.");
     }
 
+    // 화면의 기본 테이블 업데이트 (테이블이 선택된 경우)
+    const mainTableName = layoutData.mainTableName;
+    if (mainTableName) {
+      await query(
+        `UPDATE screen_definitions SET table_name = $1, updated_date = NOW() WHERE screen_id = $2`,
+        [mainTableName, screenId],
+      );
+      console.log(`✅ [saveLayoutV2] 화면 기본 테이블 업데이트: ${mainTableName}`);
+    }
+
     // 저장할 layout_data에서 레이어 메타 정보 제거 (순수 레이아웃만 저장)
-    const { layerId: _lid, layerName: _ln, conditionConfig: _cc, ...pureLayoutData } = layoutData;
+    const { layerId: _lid, layerName: _ln, conditionConfig: _cc, mainTableName: _mtn, ...pureLayoutData } = layoutData;
     const dataToSave = {
       version: "2.0",
       ...pureLayoutData,

frontend/components/screen/ScreenDesigner.tsx

@@ -2062,6 +2062,7 @@ export default function ScreenDesigner({
         await screenApi.saveLayoutV2(selectedScreen.screenId, {
           ...v2Layout,
           layerId: currentLayerId,
+          mainTableName: currentMainTableName, // 화면의 기본 테이블 (DB 업데이트용)
         });
       } else {
         await screenApi.saveLayout(selectedScreen.screenId, layoutWithResolution);

frontend/components/screen/panels/TablesPanel.tsx

@@ -44,6 +44,11 @@ interface EntityJoinTable {
   tableName: string;
   currentDisplayColumn: string;
   availableColumns: EntityJoinColumn[];
+  // 같은 테이블이 여러 FK로 조인될 수 있으므로 소스 컬럼으로 구분
+  joinConfig?: {
+    sourceColumn: string;
+    [key: string]: unknown;
+  };
 }
 
 interface TablesPanelProps {
@@ -414,7 +419,11 @@ export const TablesPanel: React.FC<TablesPanelProps> = ({
                 </Badge>
               </div>
 
-              {entityJoinTables.map((joinTable) => {
+              {entityJoinTables.map((joinTable, idx) => {
+                // 같은 테이블이 여러 FK로 조인될 수 있으므로 sourceColumn으로 고유 키 생성
+                const uniqueKey = joinTable.joinConfig?.sourceColumn
+                  ? `entity-join-${joinTable.tableName}-${joinTable.joinConfig.sourceColumn}`
+                  : `entity-join-${joinTable.tableName}-${idx}`;
                 const isExpanded = expandedJoinTables.has(joinTable.tableName);
                 // 검색어로 필터링
                 const filteredColumns = searchTerm
@@ -431,8 +440,7 @@ export const TablesPanel: React.FC<TablesPanelProps> = ({
                 }
 
                 return (
-                  // 엔티티 조인 테이블에 고유 접두사 추가 (메인 테이블과 키 중복 방지)
+                  <div key={uniqueKey} className="space-y-1">
-                  <div key={`entity-join-${joinTable.tableName}`} className="space-y-1">
                     {/* 조인 테이블 헤더 */}
                     <div
                       className="flex cursor-pointer items-center justify-between rounded-md bg-cyan-50 p-2 hover:bg-cyan-100"

frontend/components/screen/widgets/TabsWidget.tsx

@@ -135,8 +135,27 @@ export function TabsWidget({
   const [screenLayouts, setScreenLayouts] = useState<Record<string, ComponentData[]>>({});
   const [screenLoadingStates, setScreenLoadingStates] = useState<Record<string, boolean>>({});
   const [screenErrors, setScreenErrors] = useState<Record<string, string>>({});
-  // 탭별 화면 정보 (screenId, tableName) 저장
+  // 탭별 화면 정보 (screenId, tableName) - 인라인 컴포넌트의 테이블 설정에서 추출
-  const [screenInfoMap, setScreenInfoMap] = useState<Record<string, { id: number; tableName?: string }>>({});
+  const screenInfoMap = React.useMemo(() => {
+    const map: Record<string, { id?: number; tableName?: string }> = {};
+    for (const tab of tabs as ExtendedTabItem[]) {
+      const inlineComponents = tab.components || [];
+      if (inlineComponents.length > 0) {
+        // 인라인 컴포넌트에서 테이블 컴포넌트의 selectedTable 추출
+        const tableComp = inlineComponents.find(
+          (c) => c.componentType === "v2-table-list" || c.componentType === "table-list",
+        );
+        const selectedTable = tableComp?.componentConfig?.selectedTable;
+        if (selectedTable || tab.screenId) {
+          map[tab.id] = {
+            id: tab.screenId,
+            tableName: selectedTable,
+          };
+        }
+      }
+    }
+    return map;
+  }, [tabs]);
 
   // 컴포넌트 탭 목록 변경 시 동기화
   useEffect(() => {
@@ -157,21 +176,10 @@ export function TabsWidget({
         ) {
           setScreenLoadingStates((prev) => ({ ...prev, [tab.id]: true }));
           try {
-            // 레이아웃과 화면 정보를 병렬로 로드
+            const layoutData = await screenApi.getLayout(extTab.screenId);
-            const [layoutData, screenDef] = await Promise.all([
-              screenApi.getLayout(extTab.screenId),
-              screenApi.getScreen(extTab.screenId),
-            ]);
             if (layoutData && layoutData.components) {
               setScreenLayouts((prev) => ({ ...prev, [tab.id]: layoutData.components }));
             }
-            // 탭의 화면 정보 저장 (tableName 포함)
-            if (screenDef) {
-              setScreenInfoMap((prev) => ({
-                ...prev,
-                [tab.id]: { id: extTab.screenId!, tableName: screenDef.tableName },
-              }));
-            }
           } catch (error) {
             console.error(`탭 "${tab.label}" 화면 로드 실패:`, error);
             setScreenErrors((prev) => ({ ...prev, [tab.id]: "화면을 불러올 수 없습니다." }));
@@ -185,31 +193,6 @@ export function TabsWidget({
     loadScreenLayouts();
   }, [visibleTabs, screenLayouts, screenLoadingStates]);
 
-  // screenInfoMap이 없는 탭의 화면 정보 보충 로드
-  // screenId가 있지만 screenInfoMap에 아직 없는 탭의 화면 정보를 로드
-  useEffect(() => {
-    const loadMissingScreenInfo = async () => {
-      for (const tab of visibleTabs) {
-        const extTab = tab as ExtendedTabItem;
-        // screenId가 있고 screenInfoMap에 아직 없는 경우 로드
-        if (extTab.screenId && !screenInfoMap[tab.id]) {
-          try {
-            const screenDef = await screenApi.getScreen(extTab.screenId);
-            if (screenDef) {
-              setScreenInfoMap((prev) => ({
-                ...prev,
-                [tab.id]: { id: extTab.screenId!, tableName: screenDef.tableName },
-              }));
-            }
-          } catch (error) {
-            console.error(`탭 "${tab.label}" 화면 정보 로드 실패:`, error);
-          }
-        }
-      }
-    };
-    loadMissingScreenInfo();
-  }, [visibleTabs, screenInfoMap]);
-
   // 선택된 탭 변경 시 localStorage에 저장 + ActiveTab Context 업데이트
   useEffect(() => {
     if (persistSelection && typeof window !== "undefined") {

frontend/components/v2/V2Select.tsx

@@ -58,16 +58,24 @@ const DropdownSelect = forwardRef<HTMLButtonElement, {
 }, ref) => {
   const [open, setOpen] = useState(false);
 
+  // 현재 선택된 값 존재 여부
+  const hasValue = useMemo(() => {
+    if (!value) return false;
+    if (Array.isArray(value)) return value.length > 0;
+    return value !== "";
+  }, [value]);
+
   // 단일 선택 + 검색 불가능 → 기본 Select 사용
   if (!searchable && !multiple) {
     return (
+      <div className="relative w-full group">
         <Select
           value={typeof value === "string" ? value : value?.[0] ?? ""}
           onValueChange={(v) => onChange?.(v)}
           disabled={disabled}
         >
           {/* SelectTrigger에 style로 직접 height 전달 (Radix Select.Root는 DOM 없어서 h-full 체인 끊김) */}
-        <SelectTrigger ref={ref} className={cn("w-full", className)} style={style}>
+          <SelectTrigger ref={ref} className={cn("w-full", allowClear && hasValue ? "pr-8" : "", className)} style={style}>
             <SelectValue placeholder={placeholder} />
           </SelectTrigger>
           <SelectContent>
@@ -80,6 +88,26 @@ const DropdownSelect = forwardRef<HTMLButtonElement, {
               ))}
           </SelectContent>
         </Select>
+        {/* 초기화 버튼 (값이 있을 때만 표시) */}
+        {allowClear && hasValue && !disabled && (
+          <span
+            role="button"
+            tabIndex={-1}
+            className="absolute right-7 top-1/2 -translate-y-1/2 z-10 cursor-pointer"
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              onChange?.("");
+            }}
+            onPointerDown={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+            }}
+          >
+            <X className="h-3.5 w-3.5 opacity-40 hover:opacity-100 transition-opacity" />
+          </span>
+        )}
+      </div>
     );
   }
 
@@ -142,10 +170,18 @@ const DropdownSelect = forwardRef<HTMLButtonElement, {
           </span>
           <div className="flex items-center gap-1 ml-2">
             {allowClear && selectedValues.length > 0 && (
-              <X 
+              <span
-                className="h-4 w-4 opacity-50 hover:opacity-100" 
+                role="button"
+                tabIndex={-1}
                 onClick={handleClear}
-              />
+                onPointerDown={(e) => {
+                  // Radix Popover가 onPointerDown으로 팝오버를 여는 것을 방지
+                  e.stopPropagation();
+                  e.preventDefault();
+                }}
+              >
+                <X className="h-4 w-4 opacity-50 hover:opacity-100" />
+              </span>
             )}
             <ChevronsUpDown className="h-4 w-4 shrink-0 opacity-50" />
           </div>

frontend/lib/registry/components/v2-select/V2SelectRenderer.tsx

@@ -70,18 +70,18 @@ export class V2SelectRenderer extends AutoRegisteringComponentRenderer {
     }
 
     // 🆕 formData에 값이 없고 기본값이 설정된 경우, 기본값 적용
+    // 단, formData에 해당 키가 이미 존재하면(사용자가 명시적으로 초기화한 경우) 기본값을 재적용하지 않음
+    const hasKeyInFormData = formData !== undefined && formData !== null && columnName in (formData || {});
     if (
       (currentValue === "" || currentValue === undefined || currentValue === null) &&
       defaultValue &&
       isInteractive &&
       onFormDataChange &&
-      columnName
+      columnName &&
+      !hasKeyInFormData // formData에 키 자체가 없을 때만 기본값 적용 (초기 렌더링)
     ) {
-      // 초기 렌더링 시 기본값을 formData에 설정
       setTimeout(() => {
-        if (!formData?.[columnName]) {
         onFormDataChange(columnName, defaultValue);
-        }
       }, 0);
       currentValue = defaultValue;
     }