feat: Enhance input and select components with custom styling support

- Added support for custom border, background, and text styles in V2Input and V2Select components, allowing for greater flexibility in styling based on user-defined configurations.
- Updated the input and select components to conditionally apply styles based on the presence of custom properties, improving the overall user experience and visual consistency.
- Refactored the FileUploadComponent to handle chunked file uploads, enhancing the file upload process by allowing multiple files to be uploaded in batches, improving performance and user feedback during uploads.

frontend/components/ui/input.tsx

@@ -55,7 +55,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           type={type}
           data-slot="input"
           className={cn(
-            "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-10 w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+            "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-10 w-full min-w-0 rounded-md border bg-transparent px-3 py-2 text-sm transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
             "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
             "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
             className,

frontend/components/v2/V2Input.tsx

@@ -947,6 +947,21 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
   const labelMarginBottom = style?.labelMarginBottom ? parseInt(String(style.labelMarginBottom)) : 4;
   const estimatedLabelHeight = labelFontSize + labelMarginBottom + 2; // 라벨 높이 + 여백
 
+  // 🔧 커스텀 스타일 감지 (StyleEditor에서 설정한 테두리/배경/텍스트 스타일)
+  // RealtimePreview 래퍼가 외부 div에 스타일을 적용하지만,
+  // 내부 input/textarea가 자체 Tailwind 테두리를 가지므로 이를 제거하여 외부 스타일이 보이도록 함
+  const hasCustomBorder = !!(style?.borderWidth || style?.borderColor || style?.borderStyle || style?.border);
+  const hasCustomBackground = !!style?.backgroundColor;
+  const hasCustomRadius = !!style?.borderRadius;
+
+  // 텍스트 스타일 오버라이드 (CSS 상속으로 내부 input에 전달)
+  const customTextStyle: React.CSSProperties = {};
+  if (style?.color) customTextStyle.color = style.color;
+  if (style?.fontSize) customTextStyle.fontSize = style.fontSize;
+  if (style?.fontWeight) customTextStyle.fontWeight = style.fontWeight;
+  if (style?.textAlign) customTextStyle.textAlign = style.textAlign as React.CSSProperties["textAlign"];
+  const hasCustomText = Object.keys(customTextStyle).length > 0;
+
   return (
     <div
       ref={ref}
@@ -975,7 +990,18 @@ export const V2Input = forwardRef<HTMLDivElement, V2InputProps>((props, ref) =>
           {required && <span className="ml-0.5 text-orange-500">*</span>}
         </Label>
       )}
-      <div className="h-full w-full">
+      <div
+        className={cn(
+          "h-full w-full",
+          // 커스텀 테두리 설정 시, 내부 input/textarea의 기본 테두리 제거 (외부 래퍼 스타일이 보이도록)
+          hasCustomBorder && "[&_input]:border-0! [&_textarea]:border-0! [&_.border]:border-0!",
+          // 커스텀 모서리 설정 시, 내부 요소의 기본 모서리 제거 (외부 래퍼가 처리)
+          (hasCustomBorder || hasCustomRadius) && "[&_input]:rounded-none! [&_textarea]:rounded-none! [&_.rounded-md]:rounded-none!",
+          // 커스텀 배경 설정 시, 내부 input을 투명하게 (외부 배경이 보이도록)
+          hasCustomBackground && "[&_input]:bg-transparent! [&_textarea]:bg-transparent!",
+        )}
+        style={hasCustomText ? customTextStyle : undefined}
+      >
         {renderInput()}
       </div>
     </div>

frontend/components/v2/V2Select.tsx

@@ -947,6 +947,19 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
     const labelMarginBottom = style?.labelMarginBottom ? parseInt(String(style.labelMarginBottom)) : 4;
     const estimatedLabelHeight = labelFontSize + labelMarginBottom + 2;
 
+    // 🔧 커스텀 스타일 감지 (StyleEditor에서 설정한 테두리/배경/텍스트 스타일)
+    const hasCustomBorder = !!(style?.borderWidth || style?.borderColor || style?.borderStyle || style?.border);
+    const hasCustomBackground = !!style?.backgroundColor;
+    const hasCustomRadius = !!style?.borderRadius;
+
+    // 텍스트 스타일 오버라이드 (CSS 상속)
+    const customTextStyle: React.CSSProperties = {};
+    if (style?.color) customTextStyle.color = style.color;
+    if (style?.fontSize) customTextStyle.fontSize = style.fontSize;
+    if (style?.fontWeight) customTextStyle.fontWeight = style.fontWeight;
+    if (style?.textAlign) customTextStyle.textAlign = style.textAlign as React.CSSProperties["textAlign"];
+    const hasCustomText = Object.keys(customTextStyle).length > 0;
+
     return (
       <div
         ref={ref}
@@ -975,7 +988,18 @@ export const V2Select = forwardRef<HTMLDivElement, V2SelectProps>(
             {required && <span className="text-orange-500 ml-0.5">*</span>}
           </Label>
         )}
-        <div className="h-full w-full">
+        <div
+          className={cn(
+            "h-full w-full",
+            // 커스텀 테두리 설정 시, 내부 select trigger의 기본 테두리 제거
+            hasCustomBorder && "[&_button]:border-0! **:data-[slot=select-trigger]:border-0! [&_.border]:border-0!",
+            // 커스텀 모서리 설정 시, 내부 요소의 기본 모서리 제거
+            (hasCustomBorder || hasCustomRadius) && "[&_button]:rounded-none! **:data-[slot=select-trigger]:rounded-none! [&_.rounded-md]:rounded-none!",
+            // 커스텀 배경 설정 시, 내부 요소를 투명하게
+            hasCustomBackground && "[&_button]:bg-transparent! **:data-[slot=select-trigger]:bg-transparent!",
+          )}
+          style={hasCustomText ? customTextStyle : undefined}
+        >
           {renderSelect()}
         </div>
       </div>