64e6fd1920
- 범용 컴포넌트 3종 개발 및 레지스트리 등록: * AutocompleteSearchInput: 자동완성 검색 입력 컴포넌트 * EntitySearchInput: 엔티티 검색 모달 컴포넌트 * ModalRepeaterTable: 모달 기반 반복 테이블 컴포넌트 - 수주등록 전용 컴포넌트: * OrderCustomerSearch: 거래처 검색 (AutocompleteSearchInput 래퍼) * OrderItemRepeaterTable: 품목 관리 (ModalRepeaterTable 래퍼) * OrderRegistrationModal: 수주등록 메인 모달 - 백엔드 API: * Entity 검색 API (멀티테넌시 지원) * 수주 등록 API (자동 채번) - 화면 편집기 통합: * 컴포넌트 레지스트리에 등록 * ConfigPanel을 통한 설정 기능 * 드래그앤드롭으로 배치 가능 - 개발 문서: * 수주등록_화면_개발_계획서.md (상세 설계 문서)
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>
|
|
);
|
|
}
|
|
|