화면관리 중간 커밋

frontend/components/screen/widgets/InputWidget.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { cn } from "@/lib/utils";
+import { WidgetComponent } from "@/types/screen";
+
+interface InputWidgetProps {
+  widget: WidgetComponent;
+  value?: string;
+  onChange?: (value: string) => void;
+  className?: string;
+}
+
+export default function InputWidget({ widget, value, onChange, className }: InputWidgetProps) {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange?.(e.target.value);
+  };
+
+  return (
+    <div className={cn("space-y-2", className)}>
+      {widget.label && (
+        <Label htmlFor={widget.id} className="text-sm font-medium">
+          {widget.label}
+          {widget.required && <span className="ml-1 text-red-500">*</span>}
+        </Label>
+      )}
+      <Input
+        id={widget.id}
+        type={widget.widgetType === "number" ? "number" : "text"}
+        placeholder={widget.placeholder}
+        value={value || ""}
+        onChange={handleChange}
+        required={widget.required}
+        readOnly={widget.readonly}
+        className={cn("w-full", widget.readonly && "cursor-not-allowed bg-gray-50")}
+      />
+    </div>
+  );
+}