94 lines
3.2 KiB
TypeScript
94 lines
3.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import React, { useState, useEffect } from "react";
|
||
|
|
import { Label } from "@/components/ui/label";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||
|
|
|
||
|
|
interface OrderRegistrationModalConfig {
|
||
|
|
buttonText?: string;
|
||
|
|
buttonVariant?: "default" | "secondary" | "outline" | "ghost";
|
||
|
|
buttonSize?: "default" | "sm" | "lg";
|
||
|
|
}
|
||
|
|
|
||
|
|
interface OrderRegistrationModalConfigPanelProps {
|
||
|
|
config: OrderRegistrationModalConfig;
|
||
|
|
onConfigChange: (config: OrderRegistrationModalConfig) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function OrderRegistrationModalConfigPanel({
|
||
|
|
config,
|
||
|
|
onConfigChange,
|
||
|
|
}: OrderRegistrationModalConfigPanelProps) {
|
||
|
|
const [localConfig, setLocalConfig] = useState(config);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
setLocalConfig(config);
|
||
|
|
}, [config]);
|
||
|
|
|
||
|
|
const updateConfig = (updates: Partial<OrderRegistrationModalConfig>) => {
|
||
|
|
const newConfig = { ...localConfig, ...updates };
|
||
|
|
setLocalConfig(newConfig);
|
||
|
|
onConfigChange(newConfig);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-4 p-4">
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label className="text-xs sm:text-sm">버튼 텍스트</Label>
|
||
|
|
<Input
|
||
|
|
value={localConfig.buttonText || "수주 등록"}
|
||
|
|
onChange={(e) => updateConfig({ buttonText: e.target.value })}
|
||
|
|
placeholder="수주 등록"
|
||
|
|
className="h-8 text-xs sm:h-10 sm:text-sm"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label className="text-xs sm:text-sm">버튼 스타일</Label>
|
||
|
|
<Select
|
||
|
|
value={localConfig.buttonVariant || "default"}
|
||
|
|
onValueChange={(value: any) => updateConfig({ buttonVariant: value })}
|
||
|
|
>
|
||
|
|
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
||
|
|
<SelectValue />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="default">기본</SelectItem>
|
||
|
|
<SelectItem value="secondary">보조</SelectItem>
|
||
|
|
<SelectItem value="outline">외곽선</SelectItem>
|
||
|
|
<SelectItem value="ghost">고스트</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="space-y-2">
|
||
|
|
<Label className="text-xs sm:text-sm">버튼 크기</Label>
|
||
|
|
<Select
|
||
|
|
value={localConfig.buttonSize || "default"}
|
||
|
|
onValueChange={(value: any) => updateConfig({ buttonSize: value })}
|
||
|
|
>
|
||
|
|
<SelectTrigger className="h-8 text-xs sm:h-10 sm:text-sm">
|
||
|
|
<SelectValue />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="sm">작게</SelectItem>
|
||
|
|
<SelectItem value="default">기본</SelectItem>
|
||
|
|
<SelectItem value="lg">크게</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="p-4 bg-muted rounded-md text-xs text-muted-foreground">
|
||
|
|
<p className="font-medium mb-2">💡 참고사항:</p>
|
||
|
|
<ul className="space-y-1 list-disc list-inside">
|
||
|
|
<li>버튼 클릭 시 수주 등록 모달이 열립니다</li>
|
||
|
|
<li>거래처 검색, 품목 선택 기능 포함</li>
|
||
|
|
<li>입력 방식: 거래처 우선/견적서/단가</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|