화면관리 중간 커밋

frontend/components/screen/widgets/SelectWidget.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { cn } from "@/lib/utils";
+import { WidgetComponent } from "@/types/screen";
+
+interface SelectWidgetProps {
+  widget: WidgetComponent;
+  value?: string;
+  onChange?: (value: string) => void;
+  options?: { value: string; label: string }[];
+  className?: string;
+}
+
+export default function SelectWidget({ widget, value, onChange, options = [], className }: SelectWidgetProps) {
+  const handleChange = (newValue: string) => {
+    onChange?.(newValue);
+  };
+
+  // 위젯 타입에 따른 기본 옵션 생성
+  const getDefaultOptions = () => {
+    switch (widget.widgetType) {
+      case "select":
+        return [
+          { value: "option1", label: "옵션 1" },
+          { value: "option2", label: "옵션 2" },
+          { value: "option3", label: "옵션 3" },
+        ];
+      case "checkbox":
+        return [
+          { value: "true", label: "체크됨" },
+          { value: "false", label: "체크 안됨" },
+        ];
+      case "radio":
+        return [
+          { value: "yes", label: "예" },
+          { value: "no", label: "아니오" },
+        ];
+      default:
+        return options.length > 0 ? options : [{ value: "default", label: "기본값" }];
+    }
+  };
+
+  const displayOptions = options.length > 0 ? options : getDefaultOptions();
+
+  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>
+      )}
+      <Select value={value} onValueChange={handleChange} disabled={widget.readonly}>
+        <SelectTrigger className="w-full">
+          <SelectValue placeholder={widget.placeholder || "선택해주세요"} />
+        </SelectTrigger>
+        <SelectContent>
+          {displayOptions.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    </div>
+  );
+}