버튼 기능구현

frontend/lib/registry/components/file-upload/FileUploadComponent.tsx

@@ -16,12 +16,15 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
   component,
   isDesignMode = false,
   isSelected = false,
+  isInteractive = false,
   onClick,
   onDragStart,
   onDragEnd,
   config,
   className,
   style,
+  formData,
+  onFormDataChange,
   ...props
 }) => {
   // 컴포넌트 설정
@@ -64,6 +67,10 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
     size: _size,
     position: _position,
     style: _style,
+    screenId: _screenId,
+    tableName: _tableName,
+    onRefresh: _onRefresh,
+    onClose: _onClose,
     ...domProps
   } = props;
 
@@ -79,16 +86,20 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
             fontSize: component.style?.labelFontSize || "14px",
             color: component.style?.labelColor || "#374151",
             fontWeight: "500",
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
           }}
         >
           {component.label}
-          {component.required && <span style={{ color: "#ef4444" }}>*</span>}
+          {component.required && <span style={{color: "#ef4444",
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
+          }}>*</span>}
         </label>
       )}
 
       <div
-        style={{
-          width: "100%",
+        style={{width: "100%",
           height: "100%",
           border: "2px dashed #d1d5db",
           borderRadius: "8px",
@@ -99,7 +110,9 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
           cursor: "pointer",
           backgroundColor: "#f9fafb",
           position: "relative",
-        }}
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
+          }}
         onClick={handleClick}
         onDragStart={onDragStart}
         onDragEnd={onDragEnd}
@@ -116,6 +129,8 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
             height: "100%",
             opacity: 0,
             cursor: "pointer",
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
           }}
           onChange={(e) => {
             if (component.onChange) {
@@ -124,10 +139,22 @@ export const FileUploadComponent: React.FC<FileUploadComponentProps> = ({
             }
           }}
         />
-        <div style={{ textAlign: "center", color: "#6b7280", fontSize: "14px" }}>
-          <div style={{ fontSize: "24px", marginBottom: "8px" }}>📁</div>
-          <div style={{ fontWeight: "500" }}>파일을 선택하거나 드래그하세요</div>
-          <div style={{ fontSize: "12px", marginTop: "4px" }}>
+        <div style={{textAlign: "center", color: "#6b7280", fontSize: "14px",
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
+          }}>
+          <div style={{fontSize: "24px", marginBottom: "8px",
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
+          }}>📁</div>
+          <div style={{fontWeight: "500",
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
+          }}>파일을 선택하거나 드래그하세요</div>
+          <div style={{fontSize: "12px", marginTop: "4px",
+            // isInteractive 모드에서는 사용자 스타일 우선 적용
+            ...(isInteractive && component.style ? component.style : {}),
+          }}>
             {componentConfig.accept && `지원 형식: ${componentConfig.accept}`}
           </div>
         </div>