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/ComponentsPanel.tsx

@@ -114,8 +114,7 @@ export function ComponentsPanel({
       "image-display", // → v2-media (image)
       // 공통코드관리로 통합 예정
       "category-manager", // → 공통코드관리 기능으로 통합 예정
-      // 분할 패널 정리 (split-panel-layout v1 유지)
+      // 분할 패널 정리
-      "split-panel-layout2", // → split-panel-layout로 통합
       "screen-split-panel", // 화면 임베딩 방식은 사용하지 않음
       // 미완성/미사용 컴포넌트 (기존 화면 호환성 유지, 새 추가만 막음)
       "accordion-basic", // 아코디언 컴포넌트

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,28 +58,56 @@ 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 (
-      <Select
+      <div className="relative w-full group">
-        value={typeof value === "string" ? value : value?.[0] ?? ""}
+        <Select
-        onValueChange={(v) => onChange?.(v)}
+          value={typeof value === "string" ? value : value?.[0] ?? ""}
-        disabled={disabled}
+          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에 style로 직접 height 전달 (Radix Select.Root는 DOM 없어서 h-full 체인 끊김) */}
-          <SelectValue placeholder={placeholder} />
+          <SelectTrigger ref={ref} className={cn("w-full", allowClear && hasValue ? "pr-8" : "", className)} style={style}>
-        </SelectTrigger>
+            <SelectValue placeholder={placeholder} />
-        <SelectContent>
+          </SelectTrigger>
-          {options
+          <SelectContent>
-            .filter((option) => option.value !== "")
+            {options
-            .map((option) => (
+              .filter((option) => option.value !== "")
-              <SelectItem key={option.value} value={option.value}>
+              .map((option) => (
-                {option.label}
+                <SelectItem key={option.value} value={option.value}>
-              </SelectItem>
+                  {option.label}
-            ))}
+                </SelectItem>
-        </SelectContent>
+              ))}
-      </Select>
+          </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/universal-form-modal/UniversalFormModalConfigPanel.tsx

@@ -21,7 +21,7 @@ import {
   MODAL_SIZE_OPTIONS,
   SECTION_TYPE_OPTIONS,
 } from "./types";
-import { defaultSectionConfig, defaultTableSectionConfig, generateSectionId } from "./config";
+import { defaultConfig, defaultSectionConfig, defaultTableSectionConfig, generateSectionId } from "./config";
 
 // 모달 import
 import { FieldDetailSettingsModal } from "./modals/FieldDetailSettingsModal";
@@ -43,10 +43,20 @@ interface AvailableParentField {
 }
 
 export function UniversalFormModalConfigPanel({
-  config,
+  config: rawConfig,
   onChange,
   allComponents = [],
 }: UniversalFormModalConfigPanelProps) {
+  // config가 불완전할 수 있으므로 defaultConfig와 병합하여 안전하게 사용
+  const config: UniversalFormModalConfig = {
+    ...defaultConfig,
+    ...rawConfig,
+    modal: { ...defaultConfig.modal, ...rawConfig?.modal },
+    sections: rawConfig?.sections ?? defaultConfig.sections,
+    saveConfig: { ...defaultConfig.saveConfig, ...rawConfig?.saveConfig },
+    editMode: { ...defaultConfig.editMode, ...rawConfig?.editMode },
+  };
+
   // 테이블 목록
   const [tables, setTables] = useState<{ name: string; label: string }[]>([]);
   const [tableColumns, setTableColumns] = useState<{
@@ -255,10 +265,10 @@ export function UniversalFormModalConfigPanel({
 
   // 저장 테이블 변경 시 컬럼 로드
   useEffect(() => {
-    if (config.saveConfig.tableName) {
+    if (config.saveConfig?.tableName) {
       loadTableColumns(config.saveConfig.tableName);
     }
-  }, [config.saveConfig.tableName]);
+  }, [config.saveConfig?.tableName]);
 
   const loadTables = async () => {
     try {
@@ -564,9 +574,9 @@ export function UniversalFormModalConfigPanel({
                 <div className="w-full min-w-0 space-y-3">
                   <div className="min-w-0 flex-1">
                     <Label className="mb-1.5 block text-xs font-medium">저장 테이블</Label>
-                    <p className="text-muted-foreground text-sm">{config.saveConfig.tableName || "(미설정)"}</p>
+                    <p className="text-muted-foreground text-sm">{config.saveConfig?.tableName || "(미설정)"}</p>
-                    {config.saveConfig.customApiSave?.enabled &&
+                    {config.saveConfig?.customApiSave?.enabled &&
-                      config.saveConfig.customApiSave?.multiTable?.enabled && (
+                      config.saveConfig?.customApiSave?.multiTable?.enabled && (
                         <Badge variant="secondary" className="mt-2 px-2 py-0.5 text-xs">
                           다중 테이블 모드
                         </Badge>
@@ -816,9 +826,9 @@ export function UniversalFormModalConfigPanel({
             setSelectedField(field);
             setFieldDetailModalOpen(true);
           }}
-          tableName={config.saveConfig.tableName}
+          tableName={config.saveConfig?.tableName}
           tableColumns={
-            tableColumns[config.saveConfig.tableName || ""]?.map((col) => ({
+            tableColumns[config.saveConfig?.tableName || ""]?.map((col) => ({
               name: col.name,
               type: col.type,
               label: col.label || col.name,

frontend/lib/registry/components/v2-file-upload/FileManagerModal.tsx

@@ -5,13 +5,13 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/u
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { FileInfo, FileUploadConfig } from "./types";
-import { 
+import {
-  Upload, 
+  Upload,
-  Download, 
+  Download,
-  Trash2, 
+  Trash2,
-  Eye, 
+  Eye,
-  File, 
+  File,
-  FileText, 
+  FileText,
   Image as ImageIcon,
   Video,
   Music,
@@ -67,40 +67,40 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
   // 파일 아이콘 가져오기
   const getFileIcon = (fileExt: string) => {
     const ext = fileExt.toLowerCase();
-    
+
-    if (['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(ext)) {
+    if (["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext)) {
-      return <ImageIcon className="w-5 h-5 text-blue-500" />;
+      return <ImageIcon className="h-5 w-5 text-blue-500" />;
-    } else if (['pdf', 'doc', 'docx', 'txt', 'rtf'].includes(ext)) {
+    } else if (["pdf", "doc", "docx", "txt", "rtf"].includes(ext)) {
-      return <FileText className="w-5 h-5 text-red-500" />;
+      return <FileText className="h-5 w-5 text-red-500" />;
-    } else if (['xls', 'xlsx', 'csv'].includes(ext)) {
+    } else if (["xls", "xlsx", "csv"].includes(ext)) {
-      return <FileText className="w-5 h-5 text-green-500" />;
+      return <FileText className="h-5 w-5 text-green-500" />;
-    } else if (['ppt', 'pptx'].includes(ext)) {
+    } else if (["ppt", "pptx"].includes(ext)) {
-      return <Presentation className="w-5 h-5 text-orange-500" />;
+      return <Presentation className="h-5 w-5 text-orange-500" />;
-    } else if (['mp4', 'avi', 'mov', 'webm'].includes(ext)) {
+    } else if (["mp4", "avi", "mov", "webm"].includes(ext)) {
-      return <Video className="w-5 h-5 text-purple-500" />;
+      return <Video className="h-5 w-5 text-purple-500" />;
-    } else if (['mp3', 'wav', 'ogg'].includes(ext)) {
+    } else if (["mp3", "wav", "ogg"].includes(ext)) {
-      return <Music className="w-5 h-5 text-pink-500" />;
+      return <Music className="h-5 w-5 text-pink-500" />;
-    } else if (['zip', 'rar', '7z'].includes(ext)) {
+    } else if (["zip", "rar", "7z"].includes(ext)) {
-      return <Archive className="w-5 h-5 text-yellow-500" />;
+      return <Archive className="h-5 w-5 text-yellow-500" />;
     } else {
-      return <File className="w-5 h-5 text-gray-500" />;
+      return <File className="h-5 w-5 text-gray-500" />;
     }
   };
 
   // 파일 업로드 핸들러
   const handleFileUpload = async (files: FileList | File[]) => {
     if (!files || files.length === 0) return;
-    
+
     setUploading(true);
     try {
       const fileArray = Array.from(files);
       await onFileUpload(fileArray);
-      console.log('✅ FileManagerModal: 파일 업로드 완료');
+      console.log("✅ FileManagerModal: 파일 업로드 완료");
     } catch (error) {
-      console.error('❌ FileManagerModal: 파일 업로드 오류:', error);
+      console.error("❌ FileManagerModal: 파일 업로드 오류:", error);
     } finally {
       setUploading(false);
-      console.log('🔄 FileManagerModal: 업로드 상태 초기화');
+      console.log("🔄 FileManagerModal: 업로드 상태 초기화");
     }
   };
 
@@ -118,9 +118,9 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
   const handleDrop = (e: React.DragEvent) => {
     e.preventDefault();
     setDragOver(false);
-    
+
     if (config.disabled || isDesignMode) return;
-    
+
     const files = e.dataTransfer.files;
     handleFileUpload(files);
   };
@@ -137,7 +137,7 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
       handleFileUpload(files);
     }
     // 입력값 초기화
-    e.target.value = '';
+    e.target.value = "";
   };
 
   // 파일 뷰어 핸들러
@@ -156,24 +156,24 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
     setSelectedFile(file);
     setZoomLevel(1); // 🔍 파일 선택 시 확대/축소 레벨 초기화
     setImagePosition({ x: 0, y: 0 }); // 🖱️ 이미지 위치 초기화
-    
+
     // 이미지 파일인 경우 미리보기 로드
     // 🔑 점(.)을 제거하고 확장자만 비교
-    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'];
+    const imageExtensions = ["jpg", "jpeg", "png", "gif", "webp", "svg"];
-    const ext = file.fileExt.toLowerCase().replace('.', '');
+    const ext = file.fileExt.toLowerCase().replace(".", "");
     if (imageExtensions.includes(ext) || file.isImage) {
       try {
         // 이전 Blob URL 해제
         if (previewImageUrl) {
           URL.revokeObjectURL(previewImageUrl);
         }
-        
+
         // 🔑 항상 apiClient를 통해 Blob 다운로드 (Docker 환경에서 상대 경로 문제 방지)
         const { apiClient } = await import("@/lib/api/client");
         const response = await apiClient.get(`/files/preview/${file.objid}`, {
-          responseType: 'blob'
+          responseType: "blob",
         });
-        
+
         const blob = new Blob([response.data]);
         const blobUrl = URL.createObjectURL(blob);
         setPreviewImageUrl(blobUrl);
@@ -238,32 +238,19 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
   return (
     <>
       <Dialog open={isOpen} onOpenChange={() => {}}>
-        <DialogContent className="max-w-[95vw] w-[1400px] max-h-[90vh] overflow-hidden [&>button]:hidden">
+        <DialogContent className="max-h-[90vh] w-[1400px] max-w-[95vw] overflow-hidden [&>button]:hidden">
           <DialogHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <DialogTitle className="text-lg font-semibold">
+            <DialogTitle className="text-lg font-semibold">파일 관리 ({uploadedFiles.length}개)</DialogTitle>
-              파일 관리 ({uploadedFiles.length}개)
+            <Button variant="ghost" size="sm" className="h-8 w-8 p-0 hover:bg-gray-100" onClick={onClose} title="닫기">
-            </DialogTitle>
+              <X className="h-4 w-4" />
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-8 w-8 p-0 hover:bg-gray-100"
-              onClick={onClose}
-              title="닫기"
-            >
-              <X className="w-4 h-4" />
             </Button>
           </DialogHeader>
-          
+
-          <div className="flex flex-col space-y-3 h-[75vh]">
+          <div className="flex h-[75vh] flex-col space-y-3">
             {/* 파일 업로드 영역 - 높이 축소 */}
             {!isDesignMode && (
               <div
-                className={`
+                className={`cursor-pointer rounded-lg border-2 border-dashed p-4 text-center transition-colors ${dragOver ? "border-blue-400 bg-blue-50" : "border-gray-300"} ${config.disabled ? "cursor-not-allowed opacity-50" : "hover:border-gray-400"} ${uploading ? "opacity-75" : ""} `}
-                  border-2 border-dashed rounded-lg p-4 text-center cursor-pointer transition-colors
-                  ${dragOver ? 'border-blue-400 bg-blue-50' : 'border-gray-300'}
-                  ${config.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:border-gray-400'}
-                  ${uploading ? 'opacity-75' : ''}
-                `}
                 onClick={() => {
                   if (!config.disabled && !isDesignMode) {
                     fileInputRef.current?.click();
@@ -282,47 +269,43 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                   className="hidden"
                   disabled={config.disabled}
                 />
-                
+
                 {uploading ? (
                   <div className="flex items-center justify-center gap-2">
-                    <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-blue-600"></div>
+                    <div className="h-5 w-5 animate-spin rounded-full border-b-2 border-blue-600"></div>
-                    <span className="text-sm text-blue-600 font-medium">업로드 중...</span>
+                    <span className="text-sm font-medium text-blue-600">업로드 중...</span>
                   </div>
                 ) : (
                   <div className="flex items-center justify-center gap-3">
                     <Upload className="h-6 w-6 text-gray-400" />
-                    <p className="text-sm font-medium text-gray-700">
+                    <p className="text-sm font-medium text-gray-700">파일을 드래그하거나 클릭하여 업로드하세요</p>
-                      파일을 드래그하거나 클릭하여 업로드하세요
-                    </p>
                   </div>
                 )}
               </div>
             )}
 
             {/* 좌우 분할 레이아웃 - 좌측 넓게, 우측 고정 너비 */}
-            <div className="flex-1 flex gap-4 min-h-0">
+            <div className="flex min-h-0 flex-1 gap-4">
               {/* 좌측: 이미지 미리보기 (확대/축소 가능) */}
-              <div className="flex-1 border border-gray-200 rounded-lg bg-gray-900 flex flex-col overflow-hidden relative">
+              <div className="relative flex flex-1 flex-col overflow-hidden rounded-lg border border-gray-200 bg-gray-900">
                 {/* 확대/축소 컨트롤 */}
                 {selectedFile && previewImageUrl && (
-                  <div className="absolute top-3 left-3 z-10 flex items-center gap-1 bg-black/60 rounded-lg p-1">
+                  <div className="absolute top-3 left-3 z-10 flex items-center gap-1 rounded-lg bg-black/60 p-1">
                     <Button
                       variant="ghost"
                       size="icon"
                       className="h-8 w-8 text-white hover:bg-white/20"
-                      onClick={() => setZoomLevel(prev => Math.max(0.25, prev - 0.25))}
+                      onClick={() => setZoomLevel((prev) => Math.max(0.25, prev - 0.25))}
                       disabled={zoomLevel <= 0.25}
                     >
                       <ZoomOut className="h-4 w-4" />
                     </Button>
-                    <span className="text-white text-xs min-w-[50px] text-center">
+                    <span className="min-w-[50px] text-center text-xs text-white">{Math.round(zoomLevel * 100)}%</span>
-                      {Math.round(zoomLevel * 100)}%
-                    </span>
                     <Button
                       variant="ghost"
                       size="icon"
                       className="h-8 w-8 text-white hover:bg-white/20"
-                      onClick={() => setZoomLevel(prev => Math.min(4, prev + 0.25))}
+                      onClick={() => setZoomLevel((prev) => Math.min(4, prev + 0.25))}
                       disabled={zoomLevel >= 4}
                     >
                       <ZoomIn className="h-4 w-4" />
@@ -337,18 +320,18 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                     </Button>
                   </div>
                 )}
-                
+
                 {/* 이미지 미리보기 영역 - 마우스 휠로 확대/축소, 드래그로 이동 */}
-                <div 
+                <div
                   ref={imageContainerRef}
-                  className={`flex-1 flex items-center justify-center overflow-hidden p-4 ${
+                  className={`flex flex-1 items-center justify-center overflow-hidden p-4 ${
-                    zoomLevel > 1 ? (isDragging ? 'cursor-grabbing' : 'cursor-grab') : 'cursor-zoom-in'
+                    zoomLevel > 1 ? (isDragging ? "cursor-grabbing" : "cursor-grab") : "cursor-zoom-in"
                   }`}
                   onWheel={(e) => {
                     if (selectedFile && previewImageUrl) {
                       e.preventDefault();
                       const delta = e.deltaY > 0 ? -0.1 : 0.1;
-                      setZoomLevel(prev => Math.min(4, Math.max(0.25, prev + delta)));
+                      setZoomLevel((prev) => Math.min(4, Math.max(0.25, prev + delta)));
                     }
                   }}
                   onMouseDown={handleMouseDown}
@@ -357,13 +340,13 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                   onMouseLeave={handleMouseUp}
                 >
                   {selectedFile && previewImageUrl ? (
-                    <img 
+                    <img
-                      src={previewImageUrl} 
+                      src={previewImageUrl}
                       alt={selectedFile.realFileName}
                       className="transition-transform duration-100 select-none"
-                      style={{ 
+                      style={{
                         transform: `translate(${imagePosition.x}px, ${imagePosition.y}px) scale(${zoomLevel})`,
-                        transformOrigin: 'center center',
+                        transformOrigin: "center center",
                       }}
                       draggable={false}
                     />
@@ -374,27 +357,25 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                     </div>
                   ) : (
                     <div className="flex flex-col items-center text-gray-400">
-                      <ImageIcon className="w-16 h-16 mb-2" />
+                      <ImageIcon className="mb-2 h-16 w-16" />
                       <p className="text-sm">파일을 선택하면 미리보기가 표시됩니다</p>
                     </div>
                   )}
                 </div>
-                
+
                 {/* 파일 정보 바 */}
                 {selectedFile && (
-                  <div className="bg-black/60 text-white text-xs px-3 py-2 text-center truncate">
+                  <div className="truncate bg-black/60 px-3 py-2 text-center text-xs text-white">
                     {selectedFile.realFileName}
                   </div>
                 )}
               </div>
 
               {/* 우측: 파일 목록 (고정 너비) */}
-              <div className="w-[400px] shrink-0 border border-gray-200 rounded-lg overflow-hidden flex flex-col">
+              <div className="flex w-[400px] shrink-0 flex-col overflow-hidden rounded-lg border border-gray-200">
-                <div className="p-3 border-b border-gray-200 bg-gray-50">
+                <div className="border-b border-gray-200 bg-gray-50 p-3">
                   <div className="flex items-center justify-between">
-                    <h3 className="text-sm font-medium text-gray-700">
+                    <h3 className="text-sm font-medium text-gray-700">업로드된 파일</h3>
-                      업로드된 파일
-                    </h3>
                     {uploadedFiles.length > 0 && (
                       <Badge variant="secondary" className="text-xs">
                         총 {formatFileSize(uploadedFiles.reduce((sum, file) => sum + file.fileSize, 0))}
@@ -409,100 +390,95 @@ export const FileManagerModal: React.FC<FileManagerModalProps> = ({
                       {uploadedFiles.map((file) => (
                         <div
                           key={file.objid}
-                          className={`
+                          className={`flex cursor-pointer items-center space-x-3 rounded-lg p-2 transition-colors ${selectedFile?.objid === file.objid ? "border border-blue-200 bg-blue-50" : "bg-gray-50 hover:bg-gray-100"} `}
-                            flex items-center space-x-3 p-2 rounded-lg transition-colors cursor-pointer
-                            ${selectedFile?.objid === file.objid ? 'bg-blue-50 border border-blue-200' : 'bg-gray-50 hover:bg-gray-100'}
-                          `}
                           onClick={() => handleFileClick(file)}
                         >
-                        <div className="flex-shrink-0">
+                          <div className="flex-shrink-0">{getFileIcon(file.fileExt)}</div>
-                          {getFileIcon(file.fileExt)}
+                          <div className="min-w-0 flex-1">
-                        </div>
+                            <div className="flex items-center gap-2">
-                        <div className="flex-1 min-w-0">
+                              <span className="truncate text-sm font-medium text-gray-900">{file.realFileName}</span>
-                          <div className="flex items-center gap-2">
+                              {file.isRepresentative && (
-                            <span className="text-sm font-medium text-gray-900 truncate">
+                                <Badge variant="default" className="h-5 px-1.5 text-xs">
-                              {file.realFileName}
+                                  대표
-                            </span>
+                                </Badge>
-                            {file.isRepresentative && (
+                              )}
-                              <Badge variant="default" className="h-5 px-1.5 text-xs">
+                            </div>
-                                대표
+                            <p className="text-xs text-gray-500">
-                              </Badge>
+                              {formatFileSize(file.fileSize)} • {file.fileExt.toUpperCase()}
-                            )}
+                            </p>
                           </div>
-                          <p className="text-xs text-gray-500">
+                          <div className="flex items-center space-x-1">
-                            {formatFileSize(file.fileSize)} • {file.fileExt.toUpperCase()}
+                            {onSetRepresentative && (
-                          </p>
+                              <Button
-                        </div>
+                                variant={file.isRepresentative ? "default" : "ghost"}
-                        <div className="flex items-center space-x-1">
+                                size="sm"
-                          {onSetRepresentative && (
+                                className="h-7 w-7 p-0"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  onSetRepresentative(file);
+                                }}
+                                title={file.isRepresentative ? "현재 대표 파일" : "대표 파일로 설정"}
+                              >
+                                <Star className={`h-3 w-3 ${file.isRepresentative ? "fill-white" : ""}`} />
+                              </Button>
+                            )}
                             <Button
-                              variant={file.isRepresentative ? "default" : "ghost"}
+                              variant="ghost"
                               size="sm"
                               className="h-7 w-7 p-0"
                               onClick={(e) => {
                                 e.stopPropagation();
-                                onSetRepresentative(file);
+                                handleFileViewInternal(file);
                               }}
-                              title={file.isRepresentative ? "현재 대표 파일" : "대표 파일로 설정"}
+                              title="미리보기"
                             >
-                              <Star className={`w-3 h-3 ${file.isRepresentative ? "fill-white" : ""}`} />
+                              <Eye className="h-3 w-3" />
                             </Button>
-                          )}
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="h-7 w-7 p-0"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              handleFileViewInternal(file);
-                            }}
-                            title="미리보기"
-                          >
-                            <Eye className="w-3 h-3" />
-                          </Button>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="h-7 w-7 p-0"
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              onFileDownload(file);
-                            }}
-                            title="다운로드"
-                          >
-                            <Download className="w-3 h-3" />
-                          </Button>
-                          {!isDesignMode && (
                             <Button
                               variant="ghost"
                               size="sm"
-                              className="h-7 w-7 p-0 text-red-500 hover:text-red-700"
+                              className="h-7 w-7 p-0"
                               onClick={(e) => {
                                 e.stopPropagation();
-                                onFileDelete(file);
+                                onFileDownload(file);
                               }}
-                              title="삭제"
+                              title="다운로드"
                             >
-                              <Trash2 className="w-3 h-3" />
+                              <Download className="h-3 w-3" />
                             </Button>
-                          )}
+                            {!isDesignMode && (
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                className="h-7 w-7 p-0 text-red-500 hover:text-red-700"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  onFileDelete(file);
+                                }}
+                                title="삭제"
+                              >
+                                <Trash2 className="h-3 w-3" />
+                              </Button>
+                            )}
+                          </div>
                         </div>
-                      </div>
+                      ))}
-                    ))}
+                    </div>
-                  </div>
+                  ) : (
-                ) : (
+                    <div className="flex flex-col items-center justify-center py-8 text-gray-500">
-                  <div className="flex flex-col items-center justify-center py-8 text-gray-500">
+                      <File className="mb-3 h-12 w-12 text-gray-300" />
-                    <File className="w-12 h-12 mb-3 text-gray-300" />
+                      <p className="text-sm font-medium text-gray-600">업로드된 파일이 없습니다</p>
-                    <p className="text-sm font-medium text-gray-600">업로드된 파일이 없습니다</p>
+                      <p className="mt-1 text-xs text-gray-500">
-                    <p className="text-xs text-gray-500 mt-1">
+                        {isDesignMode
-                      {isDesignMode ? '디자인 모드에서는 파일을 업로드할 수 없습니다' : '위의 영역에 파일을 업로드하세요'}
+                          ? "디자인 모드에서는 파일을 업로드할 수 없습니다"
-                    </p>
+                          : "위의 영역에 파일을 업로드하세요"}
-                  </div>
+                      </p>
-                )}
+                    </div>
+                  )}
+                </div>
               </div>
             </div>
           </div>
-        </div>
         </DialogContent>
       </Dialog>
 

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);
-          onFormDataChange(columnName, defaultValue);
-        }
       }, 0);
       currentValue = defaultValue;
     }