화면정보 수정 및 미리보기 기능

frontend/components/screen/widgets/FileUpload.tsx

@@ -21,28 +21,30 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
   const [isDragOver, setIsDragOver] = useState(false);
   const [uploadQueue, setUploadQueue] = useState<File[]>([]);
   // 전역 파일 상태 관리 함수들
-  const getGlobalFileState = (): {[key: string]: any[]} => {
-    if (typeof window !== 'undefined') {
+  const getGlobalFileState = (): { [key: string]: any[] } => {
+    if (typeof window !== "undefined") {
       return (window as any).globalFileState || {};
     }
     return {};
   };
 
-  const setGlobalFileState = (updater: (prev: {[key: string]: any[]}) => {[key: string]: any[]}) => {
-    if (typeof window !== 'undefined') {
+  const setGlobalFileState = (updater: (prev: { [key: string]: any[] }) => { [key: string]: any[] }) => {
+    if (typeof window !== "undefined") {
       const currentState = getGlobalFileState();
       const newState = updater(currentState);
       (window as any).globalFileState = newState;
-      
+
       // console.log("🌐 FileUpload 전역 파일 상태 업데이트:", {
-        // componentId: component.id,
-        // newFileCount: newState[component.id]?.length || 0
+      // componentId: component.id,
+      // newFileCount: newState[component.id]?.length || 0
       // });
-      
+
       // 강제 리렌더링을 위한 이벤트 발생
-      window.dispatchEvent(new CustomEvent('globalFileStateChanged', {
-        detail: { componentId: component.id, fileCount: newState[component.id]?.length || 0 }
-      }));
+      window.dispatchEvent(
+        new CustomEvent("globalFileStateChanged", {
+          detail: { componentId: component.id, fileCount: newState[component.id]?.length || 0 },
+        }),
+      );
     }
   };
 
@@ -51,14 +53,14 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
     const globalFiles = getGlobalFileState()[component.id] || [];
     const componentFiles = component.uploadedFiles || [];
     const finalFiles = globalFiles.length > 0 ? globalFiles : componentFiles;
-    
+
     // console.log("🚀 FileUpload 파일 상태 초기화:", {
-      // componentId: component.id,
-      // globalFiles: globalFiles.length,
-      // componentFiles: componentFiles.length,
-      // finalFiles: finalFiles.length
+    // componentId: component.id,
+    // globalFiles: globalFiles.length,
+    // componentFiles: componentFiles.length,
+    // finalFiles: finalFiles.length
     // });
-    
+
     return finalFiles;
   };
 
@@ -71,23 +73,23 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
       if (event.detail.componentId === component.id) {
         const globalFiles = getGlobalFileState()[component.id] || [];
         // console.log("🔄 FileUpload 전역 상태 변경 감지:", {
-          // componentId: component.id,
-          // newFileCount: globalFiles.length
+        // componentId: component.id,
+        // newFileCount: globalFiles.length
         // });
         setLocalUploadedFiles(globalFiles);
       }
     };
 
-    if (typeof window !== 'undefined') {
-      window.addEventListener('globalFileStateChanged', handleGlobalFileStateChange as EventListener);
-      
+    if (typeof window !== "undefined") {
+      window.addEventListener("globalFileStateChanged", handleGlobalFileStateChange as EventListener);
+
       return () => {
-        window.removeEventListener('globalFileStateChanged', handleGlobalFileStateChange as EventListener);
+        window.removeEventListener("globalFileStateChanged", handleGlobalFileStateChange as EventListener);
       };
     }
   }, [component.id]);
 
-  const { fileConfig } = component;
+  const { fileConfig = {} } = component;
   const { user: authUser, isLoading, isLoggedIn } = useAuth(); // 인증 상태도 함께 가져오기
 
   // props로 받은 userInfo를 우선 사용, 없으면 useAuth에서 가져온 user 사용
@@ -102,16 +104,16 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
   // 사용자 정보 디버깅
   useEffect(() => {
     // console.log("👤 File 컴포넌트 인증 상태 및 사용자 정보:", {
-      // isLoading,
-      // isLoggedIn,
-      // hasUser: !!user,
-      // user: user,
-      // userId: user?.userId,
-      // company_code: user?.company_code,
-      // companyCode: user?.companyCode,
-      // userType: typeof user,
-      // userKeys: user ? Object.keys(user) : "no user",
-      // userValues: user ? Object.entries(user) : "no user",
+    // isLoading,
+    // isLoggedIn,
+    // hasUser: !!user,
+    // user: user,
+    // userId: user?.userId,
+    // company_code: user?.company_code,
+    // companyCode: user?.companyCode,
+    // userType: typeof user,
+    // userKeys: user ? Object.keys(user) : "no user",
+    // userValues: user ? Object.entries(user) : "no user",
     // });
 
     // 사용자 정보가 유효하면 initialUser와 userRef 업데이트
@@ -124,18 +126,18 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
     // 회사 관련 필드들 확인
     if (user) {
       // console.log("🔍 회사 관련 필드 검색:", {
-        // company_code: user.company_code,
-        // companyCode: user.companyCode,
-        // company: user.company,
-        // deptCode: user.deptCode,
-        // partnerCd: user.partnerCd,
-        // 모든 필드에서 company 관련된 것들 찾기
-        // allFields: Object.keys(user).filter(
-          // (key) =>
-            // key.toLowerCase().includes("company") ||
-            // key.toLowerCase().includes("corp") ||
-            // key.toLowerCase().includes("code"),
-        // ),
+      // company_code: user.company_code,
+      // companyCode: user.companyCode,
+      // company: user.company,
+      // deptCode: user.deptCode,
+      // partnerCd: user.partnerCd,
+      // 모든 필드에서 company 관련된 것들 찾기
+      // allFields: Object.keys(user).filter(
+      // (key) =>
+      // key.toLowerCase().includes("company") ||
+      // key.toLowerCase().includes("corp") ||
+      // key.toLowerCase().includes("code"),
+      // ),
       // });
     } else {
       // console.warn("⚠️ 사용자 정보가 없습니다. 인증 상태 확인 필요");
@@ -145,8 +147,8 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
   // 컴포넌트 props가 변경될 때 로컬 상태 동기화
   useEffect(() => {
     // console.log("🔄 File 컴포넌트 props 변경:", {
-      // propsUploadedFiles: component.uploadedFiles?.length || 0,
-      // localUploadedFiles: localUploadedFiles.length,
+    // propsUploadedFiles: component.uploadedFiles?.length || 0,
+    // localUploadedFiles: localUploadedFiles.length,
     // });
     setLocalUploadedFiles(component.uploadedFiles || []);
   }, [component.uploadedFiles]);
@@ -177,9 +179,9 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
     const fileName = file.name.toLowerCase();
 
     // console.log("🔍 파일 타입 검증:", {
-      // fileName: file.name,
-      // fileType: file.type,
-      // acceptRules: fileConfig.accept,
+    // fileName: file.name,
+    // fileType: file.type,
+    // acceptRules: fileConfig.accept,
     // });
 
     const result = fileConfig.accept.some((accept) => {
@@ -225,11 +227,11 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
       const errors: string[] = [];
 
       // console.log("🔍 파일 검증 시작:", {
-        // totalFiles: fileArray.length,
-        // currentUploadedCount: uploadedFiles.length,
-        // maxFiles: fileConfig.maxFiles,
-        // maxSize: fileConfig.maxSize,
-        // allowedTypes: fileConfig.accept,
+      // totalFiles: fileArray.length,
+      // currentUploadedCount: uploadedFiles.length,
+      // maxFiles: fileConfig.maxFiles,
+      // maxSize: fileConfig.maxSize,
+      // allowedTypes: fileConfig.accept,
       // });
 
       // 파일 검증
@@ -270,23 +272,23 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
       // 유효한 파일들을 업로드 큐에 추가
       if (validFiles.length > 0) {
         // console.log(
-          // "✅ 유효한 파일들 업로드 큐에 추가:",
-          // validFiles.map((f) => f.name),
+        // "✅ 유효한 파일들 업로드 큐에 추가:",
+        // validFiles.map((f) => f.name),
         // );
         setUploadQueue((prev) => [...prev, ...validFiles]);
 
         if (fileConfig.autoUpload) {
           // console.log("🚀 자동 업로드 시작:", {
-            // autoUpload: fileConfig.autoUpload,
-            // filesCount: validFiles.length,
-            // fileNames: validFiles.map((f) => f.name),
+          // autoUpload: fileConfig.autoUpload,
+          // filesCount: validFiles.length,
+          // fileNames: validFiles.map((f) => f.name),
           // });
           // 자동 업로드 실행
           validFiles.forEach(uploadFile);
         } else {
           // console.log("⏸️ 자동 업로드 비활성화:", {
-            // autoUpload: fileConfig.autoUpload,
-            // filesCount: validFiles.length,
+          // autoUpload: fileConfig.autoUpload,
+          // filesCount: validFiles.length,
           // });
         }
       } else {
@@ -312,18 +314,18 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
 
       // 실시간 사용자 정보 디버깅
       // console.log("🔍 FileUpload - uploadFile ref를 통한 실시간 상태:", {
-        // hasCurrentUser: !!currentUser,
-        // currentUser: currentUser
-          // ? {
-              // userId: currentUser.userId,
-              // companyCode: currentUser.companyCode,
-              // company_code: currentUser.company_code,
-            // }
-          // : null,
-        // 기존 상태와 비교
-        // originalUser: user,
-        // originalInitialUser: initialUser,
-        // refExists: !!userRef.current,
+      // hasCurrentUser: !!currentUser,
+      // currentUser: currentUser
+      // ? {
+      // userId: currentUser.userId,
+      // companyCode: currentUser.companyCode,
+      // company_code: currentUser.company_code,
+      // }
+      // : null,
+      // 기존 상태와 비교
+      // originalUser: user,
+      // originalInitialUser: initialUser,
+      // refExists: !!userRef.current,
       // });
 
       // 사용자 정보가 로드되지 않은 경우 잠시 대기
@@ -351,15 +353,15 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
         // console.log("✅ 회사코드 추가:", companyCode);
       } else {
         // console.warn("⚠️ 회사코드가 없음, DEFAULT 사용. 사용자 정보:", {
-          // user: user,
-          // initialUser: initialUser,
-          // effectiveUser: effectiveUser,
-          // companyCode: effectiveUser?.companyCode,
-          // company_code: effectiveUser?.company_code,
-          // deptCode: effectiveUser?.deptCode,
-          // isLoading,
-          // isLoggedIn,
-          // allUserKeys: effectiveUser ? Object.keys(effectiveUser) : "no user",
+        // user: user,
+        // initialUser: initialUser,
+        // effectiveUser: effectiveUser,
+        // companyCode: effectiveUser?.companyCode,
+        // company_code: effectiveUser?.company_code,
+        // deptCode: effectiveUser?.deptCode,
+        // isLoading,
+        // isLoggedIn,
+        // allUserKeys: effectiveUser ? Object.keys(effectiveUser) : "no user",
         // });
         formData.append("companyCode", "DEFAULT");
       }
@@ -499,28 +501,28 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
         setLocalUploadedFiles(updatedFiles);
 
         // 전역 상태 업데이트
-        setGlobalFileState(prev => ({
+        setGlobalFileState((prev) => ({
           ...prev,
-          [component.id]: updatedFiles
+          [component.id]: updatedFiles,
         }));
 
         // RealtimePreview 동기화를 위한 추가 이벤트 발생
-        if (typeof window !== 'undefined') {
+        if (typeof window !== "undefined") {
           const eventDetail = {
             componentId: component.id,
             files: updatedFiles,
             fileCount: updatedFiles.length,
-            action: 'upload',
-            timestamp: Date.now()
+            action: "upload",
+            timestamp: Date.now(),
           };
-          
+
           // console.log("🚀 FileUpload 위젯 이벤트 발생:", eventDetail);
-          
-          const event = new CustomEvent('globalFileStateChanged', {
-            detail: eventDetail
+
+          const event = new CustomEvent("globalFileStateChanged", {
+            detail: eventDetail,
           });
           window.dispatchEvent(event);
-          
+
           // console.log("✅ FileUpload globalFileStateChanged 이벤트 발생 완료");
         }
 
@@ -540,19 +542,19 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
         setUploadQueue((prev) => prev.filter((f) => f !== file));
       } catch (error) {
         // console.error("❌ 파일 업로드 실패:", {
-          // error,
-          // errorMessage: error instanceof Error ? error.message : "알 수 없는 오류",
-          // errorStack: error instanceof Error ? error.stack : undefined,
-          // user: user ? { userId: user.userId, companyCode: user.companyCode, hasUser: true } : "no user",
-          // authState: { isLoading, isLoggedIn },
+        // error,
+        // errorMessage: error instanceof Error ? error.message : "알 수 없는 오류",
+        // errorStack: error instanceof Error ? error.stack : undefined,
+        // user: user ? { userId: user.userId, companyCode: user.companyCode, hasUser: true } : "no user",
+        // authState: { isLoading, isLoggedIn },
         // });
 
         // API 응답 에러인 경우 상세 정보 출력
         if ((error as any)?.response) {
           // console.error("📡 API 응답 에러:", {
-            // status: (error as any).response.status,
-            // statusText: (error as any).response.statusText,
-            // data: (error as any).response.data,
+          // status: (error as any).response.status,
+          // statusText: (error as any).response.statusText,
+          // data: (error as any).response.data,
           // });
         }
 
@@ -598,50 +600,54 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
       setLocalUploadedFiles(filteredFiles);
 
       // 전역 상태 업데이트
-      setGlobalFileState(prev => ({
+      setGlobalFileState((prev) => ({
         ...prev,
-        [component.id]: filteredFiles
+        [component.id]: filteredFiles,
       }));
 
       // 🎯 화면설계 모드와 동기화를 위한 전역 이벤트 발생
-      if (typeof window !== 'undefined') {
+      if (typeof window !== "undefined") {
         try {
           const eventDetail = {
             componentId: component.id,
             files: filteredFiles,
             fileCount: filteredFiles.length,
-            action: 'delete',
+            action: "delete",
             timestamp: Date.now(),
-            source: 'realScreen' // 실제 화면에서 온 이벤트임을 표시
+            source: "realScreen", // 실제 화면에서 온 이벤트임을 표시
           };
-          
+
           // console.log("🚀🚀🚀 FileUpload 위젯 삭제 이벤트 발생:", eventDetail);
-          
-          const event = new CustomEvent('globalFileStateChanged', {
-            detail: eventDetail
+
+          const event = new CustomEvent("globalFileStateChanged", {
+            detail: eventDetail,
           });
           window.dispatchEvent(event);
-          
+
           // console.log("✅✅✅ FileUpload 위젯 → 화면설계 모드 동기화 이벤트 발생 완료");
-          
+
           // 추가 지연 이벤트들
           setTimeout(() => {
             try {
               // console.log("🔄 FileUpload 위젯 추가 삭제 이벤트 발생 (지연 100ms)");
-              window.dispatchEvent(new CustomEvent('globalFileStateChanged', {
-                detail: { ...eventDetail, delayed: true }
-              }));
+              window.dispatchEvent(
+                new CustomEvent("globalFileStateChanged", {
+                  detail: { ...eventDetail, delayed: true },
+                }),
+              );
             } catch (error) {
               // console.warn("FileUpload 지연 이벤트 발생 실패:", error);
             }
           }, 100);
-          
+
           setTimeout(() => {
             try {
               // console.log("🔄 FileUpload 위젯 추가 삭제 이벤트 발생 (지연 300ms)");
-              window.dispatchEvent(new CustomEvent('globalFileStateChanged', {
-                detail: { ...eventDetail, delayed: true, attempt: 2 }
-              }));
+              window.dispatchEvent(
+                new CustomEvent("globalFileStateChanged", {
+                  detail: { ...eventDetail, delayed: true, attempt: 2 },
+                }),
+              );
             } catch (error) {
               // console.warn("FileUpload 지연 이벤트 발생 실패:", error);
             }
@@ -704,8 +710,8 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
       {/* 드래그 앤 드롭 영역 */}
       <div
         className={`group relative rounded-2xl border-2 border-dashed p-10 text-center transition-all duration-300 ${
-          isDragOver 
-            ? "border-primary bg-gradient-to-br from-blue-100/90 to-indigo-100/80 shadow-xl shadow-blue-500/20 scale-105" 
+          isDragOver
+            ? "border-primary scale-105 bg-gradient-to-br from-blue-100/90 to-indigo-100/80 shadow-xl shadow-blue-500/20"
             : "border-gray-300/60 bg-gradient-to-br from-gray-50/80 to-blue-50/40 hover:border-blue-400/80 hover:bg-gradient-to-br hover:from-blue-50/90 hover:to-indigo-50/60 hover:shadow-lg hover:shadow-blue-500/10"
         }`}
         onDragOver={handleDragOver}
@@ -713,59 +719,61 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
         onDrop={handleDrop}
       >
         <div className="relative">
-          <Upload className={`mx-auto mb-4 h-16 w-16 transition-all duration-300 ${
-            isDragOver 
-              ? "text-blue-500 scale-110" 
-              : "text-gray-400 group-hover:text-blue-500 group-hover:scale-105"
-          }`} />
+          <Upload
+            className={`mx-auto mb-4 h-16 w-16 transition-all duration-300 ${
+              isDragOver ? "scale-110 text-blue-500" : "text-gray-400 group-hover:scale-105 group-hover:text-blue-500"
+            }`}
+          />
           <div className="absolute inset-0 flex items-center justify-center">
-            <div className={`h-20 w-20 rounded-full transition-all duration-300 ${
-              isDragOver 
-                ? "bg-blue-200/80 scale-110" 
-                : "bg-primary/20/50 opacity-0 group-hover:opacity-100 group-hover:scale-110"
-            }`}></div>
+            <div
+              className={`h-20 w-20 rounded-full transition-all duration-300 ${
+                isDragOver
+                  ? "scale-110 bg-blue-200/80"
+                  : "bg-primary/20/50 opacity-0 group-hover:scale-110 group-hover:opacity-100"
+              }`}
+            ></div>
           </div>
         </div>
-        <p className={`mb-2 text-xl font-semibold transition-colors duration-300 ${
-          isDragOver 
-            ? "text-primary" 
-            : "text-gray-700 group-hover:text-primary"
-        }`}>
+        <p
+          className={`mb-2 text-xl font-semibold transition-colors duration-300 ${
+            isDragOver ? "text-primary" : "group-hover:text-primary text-gray-700"
+          }`}
+        >
           {fileConfig.dragDropText || "파일을 드래그하여 업로드하세요"}
         </p>
-        <p className={`mb-4 text-sm transition-colors duration-300 ${
-          isDragOver 
-            ? "text-blue-500" 
-            : "text-gray-500 group-hover:text-blue-500"
-        }`}>
+        <p
+          className={`mb-4 text-sm transition-colors duration-300 ${
+            isDragOver ? "text-blue-500" : "text-gray-500 group-hover:text-blue-500"
+          }`}
+        >
           또는 클릭하여 파일을 선택하세요
         </p>
 
-        <Button 
-          variant="outline" 
-          onClick={handleFileInputClick} 
+        <Button
+          variant="outline"
+          onClick={handleFileInputClick}
           className={`mb-4 rounded-xl border-2 transition-all duration-200 ${
-            isDragOver 
-              ? "border-blue-400 bg-accent text-primary shadow-md" 
-              : "border-gray-300/60 hover:border-blue-400/60 hover:bg-accent/50 hover:shadow-sm"
+            isDragOver
+              ? "bg-accent text-primary border-blue-400 shadow-md"
+              : "hover:bg-accent/50 border-gray-300/60 hover:border-blue-400/60 hover:shadow-sm"
           }`}
         >
           <Upload className="mr-2 h-4 w-4" />
-          {fileConfig.uploadButtonText || "파일 선택"}
+          {fileConfig?.uploadButtonText || "파일 선택"}
         </Button>
 
         <div className="text-xs text-gray-500">
-          <p>허용 파일: {fileConfig.accept.join(", ")}</p>
+          <p>허용 파일: {(fileConfig?.accept || ["*/*"]).join(", ")}</p>
           <p>
-            최대 크기: {fileConfig.maxSize}MB | 최대 개수: {fileConfig.maxFiles}개
+            최대 크기: {fileConfig?.maxSize || 10}MB | 최대 개수: {fileConfig?.maxFiles || 5}개
           </p>
         </div>
 
         <input
           ref={fileInputRef}
           type="file"
-          multiple={fileConfig.multiple}
-          accept={fileConfig.accept.join(",")}
+          multiple={fileConfig?.multiple !== false}
+          accept={(fileConfig?.accept || ["*/*"]).join(",")}
           onChange={(e) => handleFileSelect(e.target.files)}
           className="hidden"
         />
@@ -774,44 +782,51 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
       {/* 업로드된 파일 목록 */}
       {uploadedFiles.length > 0 && (
         <div className="space-y-4">
-          <div className="flex items-center justify-between rounded-xl bg-gradient-to-r from-blue-50/80 to-indigo-50/60 px-4 py-3 border border-primary/20/40">
+          <div className="border-primary/20/40 flex items-center justify-between rounded-xl border bg-gradient-to-r from-blue-50/80 to-indigo-50/60 px-4 py-3">
             <div className="flex items-center space-x-3">
-              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/20">
-                <File className="h-4 w-4 text-primary" />
+              <div className="bg-primary/20 flex h-8 w-8 items-center justify-center rounded-full">
+                <File className="text-primary h-4 w-4" />
               </div>
               <div>
                 <h4 className="text-lg font-semibold text-gray-800">
                   업로드된 파일 ({uploadedFiles.length}/{fileConfig.maxFiles})
                 </h4>
-                <p className="text-sm text-muted-foreground">
+                <p className="text-muted-foreground text-sm">
                   총 {formatFileSize(uploadedFiles.reduce((sum, file) => sum + file.fileSize, 0))}
                 </p>
               </div>
             </div>
-            <Button variant="outline" size="sm" className="rounded-lg border-primary/20/60 bg-white/80 hover:bg-accent/80">
+            <Button
+              variant="outline"
+              size="sm"
+              className="border-primary/20/60 hover:bg-accent/80 rounded-lg bg-white/80"
+            >
               자세히보기
             </Button>
           </div>
 
           <div className="space-y-3">
             {uploadedFiles.map((fileInfo) => (
-              <div key={fileInfo.objid} className="group relative flex items-center justify-between rounded-xl border border-gray-200/60 bg-white/90 p-4 shadow-sm transition-all duration-200 hover:shadow-md hover:border-blue-300/60 hover:bg-accent/30">
+              <div
+                key={fileInfo.objid}
+                className="group hover:bg-accent/30 relative flex items-center justify-between rounded-xl border border-gray-200/60 bg-white/90 p-4 shadow-sm transition-all duration-200 hover:border-blue-300/60 hover:shadow-md"
+              >
                 <div className="flex flex-1 items-center space-x-4">
                   <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br from-gray-50 to-gray-100/80 shadow-sm">
                     {getFileIcon(fileInfo.fileExt)}
                   </div>
                   <div className="min-w-0 flex-1">
-                    <p className="truncate text-base font-semibold text-gray-800 group-hover:text-primary transition-colors duration-200">
+                    <p className="group-hover:text-primary truncate text-base font-semibold text-gray-800 transition-colors duration-200">
                       {fileInfo.realFileName}
                     </p>
-                    <div className="flex items-center space-x-3 text-sm text-gray-500 mt-1">
+                    <div className="mt-1 flex items-center space-x-3 text-sm text-gray-500">
                       <span className="flex items-center space-x-1">
                         <div className="h-1.5 w-1.5 rounded-full bg-blue-400"></div>
                         <span className="font-medium">{formatFileSize(fileInfo.fileSize)}</span>
                       </span>
                       <span className="flex items-center space-x-1">
                         <div className="h-1.5 w-1.5 rounded-full bg-gray-400"></div>
-                        <span className="px-2 py-1 rounded-md bg-gray-100 text-xs font-medium">
+                        <span className="rounded-md bg-gray-100 px-2 py-1 text-xs font-medium">
                           {fileInfo.fileExt.toUpperCase()}
                         </span>
                       </span>
@@ -835,7 +850,7 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
 
                     {/* 에러 메시지 */}
                     {fileInfo.hasError && (
-                      <div className="mt-2 flex items-center space-x-2 rounded-md bg-destructive/10 p-2 text-sm text-red-700">
+                      <div className="bg-destructive/10 mt-2 flex items-center space-x-2 rounded-md p-2 text-sm text-red-700">
                         <AlertCircle className="h-4 w-4 flex-shrink-0" />
                         <span>{fileInfo.errorMessage}</span>
                       </div>
@@ -846,9 +861,9 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
                 <div className="flex items-center space-x-2">
                   {/* 상태 표시 */}
                   {fileInfo.isUploading && (
-                    <div className="flex items-center space-x-2 rounded-lg bg-accent px-3 py-2">
+                    <div className="bg-accent flex items-center space-x-2 rounded-lg px-3 py-2">
                       <Loader2 className="h-4 w-4 animate-spin text-blue-500" />
-                      <span className="text-xs font-medium text-primary">업로드 중...</span>
+                      <span className="text-primary text-xs font-medium">업로드 중...</span>
                     </div>
                   )}
                   {fileInfo.status === "ACTIVE" && (
@@ -858,9 +873,9 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
                     </div>
                   )}
                   {fileInfo.hasError && (
-                    <div className="flex items-center space-x-2 rounded-lg bg-destructive/10 px-3 py-2">
+                    <div className="bg-destructive/10 flex items-center space-x-2 rounded-lg px-3 py-2">
                       <AlertCircle className="h-4 w-4 text-red-500" />
-                      <span className="text-xs font-medium text-destructive">오류</span>
+                      <span className="text-destructive text-xs font-medium">오류</span>
                     </div>
                   )}
 
@@ -868,21 +883,21 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
                   {!fileInfo.isUploading && !fileInfo.hasError && (
                     <div className="flex items-center space-x-1">
                       {fileConfig.showPreview && (
-                        <Button 
-                          variant="ghost" 
-                          size="sm" 
-                          onClick={() => previewFile(fileInfo)} 
-                          className="h-9 w-9 rounded-lg hover:bg-accent hover:text-primary transition-all duration-200"
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => previewFile(fileInfo)}
+                          className="hover:bg-accent hover:text-primary h-9 w-9 rounded-lg transition-all duration-200"
                         >
                           <Eye className="h-4 w-4" />
                         </Button>
                       )}
 
-                      <Button 
-                        variant="ghost" 
-                        size="sm" 
-                        onClick={() => previewFile(fileInfo)} 
-                        className="h-9 w-9 rounded-lg hover:bg-green-50 hover:text-green-600 transition-all duration-200"
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => previewFile(fileInfo)}
+                        className="h-9 w-9 rounded-lg transition-all duration-200 hover:bg-green-50 hover:text-green-600"
                       >
                         <Download className="h-4 w-4" />
                       </Button>
@@ -891,7 +906,7 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
                         variant="ghost"
                         size="sm"
                         onClick={() => deleteFile(fileInfo)}
-                        className="h-9 w-9 rounded-lg text-red-500 hover:bg-destructive/10 hover:text-red-700 transition-all duration-200"
+                        className="hover:bg-destructive/10 h-9 w-9 rounded-lg text-red-500 transition-all duration-200 hover:text-red-700"
                       >
                         <X className="h-4 w-4" />
                       </Button>
@@ -905,7 +920,7 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
       )}
 
       {/* 문서 타입 정보 */}
-      <div className="flex items-center justify-center space-x-2 rounded-xl bg-gradient-to-r from-amber-50/80 to-orange-50/60 border border-amber-200/40 px-4 py-3">
+      <div className="flex items-center justify-center space-x-2 rounded-xl border border-amber-200/40 bg-gradient-to-r from-amber-50/80 to-orange-50/60 px-4 py-3">
         <div className="flex items-center space-x-2">
           <div className="flex h-6 w-6 items-center justify-center rounded-full bg-amber-100">
             <File className="h-3 w-3 text-amber-600" />
@@ -914,7 +929,7 @@ export function FileUpload({ component, onUpdateComponent, onFileUpload, userInf
             파일명 클릭으로 미리보기 또는 "전체 자세히보기"로 파일 관리
           </span>
         </div>
-        <Badge variant="outline" className="bg-white/80 border-amber-200/60 text-amber-700">
+        <Badge variant="outline" className="border-amber-200/60 bg-white/80 text-amber-700">
           {fileConfig.docTypeName}
         </Badge>
       </div>