chpark/vexplor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

메일 수신자 컴포넌트 구현

Browse Source
This commit is contained in:
kjs
2025-12-09 13:29:20 +09:00
parent bb98e9319f
commit 1ee1287b8a
8 changed files with 979 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
frontend/components/dataflow/node-editor/panels/properties/EmailActionProperties.tsx
View File

@@ -38,6 +38,11 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
// 계정 선택
const [selectedAccountId, setSelectedAccountId] = useState(data.accountId || "");
// 🆕 수신자 컴포넌트 사용 여부
const [useRecipientComponent, setUseRecipientComponent] = useState(data.useRecipientComponent ?? false);
const [recipientToField, setRecipientToField] = useState(data.recipientToField || "mailTo");
const [recipientCcField, setRecipientCcField] = useState(data.recipientCcField || "mailCc");
// 메일 내용
const [to, setTo] = useState(data.to || "");
const [cc, setCc] = useState(data.cc || "");
@@ -76,6 +81,9 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
useEffect(() => {
setDisplayName(data.displayName || "메일 발송");
setSelectedAccountId(data.accountId || "");
setUseRecipientComponent(data.useRecipientComponent ?? false);
setRecipientToField(data.recipientToField || "mailTo");
setRecipientCcField(data.recipientCcField || "mailCc");
setTo(data.to || "");
setCc(data.cc || "");
setBcc(data.bcc || "");
@@ -286,27 +294,121 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
</div>
)}
<div className="space-y-2">
<Label className="text-xs">수신자 (To) *</Label>
<Input
value={to}
onChange={(e) => setTo(e.target.value)}
onBlur={updateMailContent}
placeholder="recipient@example.com (쉼표로 구분)"
className="h-8 text-sm"
/>
</div>
{/* 🆕 수신자 컴포넌트 사용 옵션 */}
<Card className={useRecipientComponent ? "bg-blue-50 border-blue-200" : "bg-gray-50"}>
<CardContent className="p-3 space-y-3">
<div className="flex items-center justify-between">
<div className="space-y-1">
<Label className="text-xs font-medium">수신자 컴포넌트 사용</Label>
<p className="text-xs text-gray-500">
화면에 배치한 "메일 수신자 선택" 컴포넌트의 값을 자동으로 사용합니다.
</p>
</div>
<Switch
checked={useRecipientComponent}
onCheckedChange={(checked) => {
setUseRecipientComponent(checked);
if (checked) {
// 체크 시 자동으로 변수 설정
updateNodeData({
useRecipientComponent: true,
recipientToField,
recipientCcField,
to: `{{${recipientToField}}}`,
cc: `{{${recipientCcField}}}`,
});
setTo(`{{${recipientToField}}}`);
setCc(`{{${recipientCcField}}}`);
} else {
updateNodeData({
useRecipientComponent: false,
to: "",
cc: "",
});
setTo("");
setCc("");
}
}}
/>
</div>
{/* 필드명 설정 (수신자 컴포넌트 사용 시) */}
{useRecipientComponent && (
<div className="space-y-2 pt-2 border-t border-blue-200">
<div className="grid grid-cols-2 gap-2">
<div className="space-y-1">
<Label className="text-xs">수신자 필드명</Label>
<Input
value={recipientToField}
onChange={(e) => {
const newField = e.target.value;
setRecipientToField(newField);
setTo(`{{${newField}}}`);
updateNodeData({
recipientToField: newField,
to: `{{${newField}}}`,
});
}}
placeholder="mailTo"
className="h-7 text-xs"
/>
</div>
<div className="space-y-1">
<Label className="text-xs">참조 필드명</Label>
<Input
value={recipientCcField}
onChange={(e) => {
const newField = e.target.value;
setRecipientCcField(newField);
setCc(`{{${newField}}}`);
updateNodeData({
recipientCcField: newField,
cc: `{{${newField}}}`,
});
}}
placeholder="mailCc"
className="h-7 text-xs"
/>
</div>
</div>
<div className="text-xs text-blue-600 bg-blue-100 p-2 rounded">
<strong>자동 설정됨:</strong>
<br />
수신자: <code className="bg-white px-1 rounded">{`{{${recipientToField}}}`}</code>
<br />
참조: <code className="bg-white px-1 rounded">{`{{${recipientCcField}}}`}</code>
</div>
</div>
)}
</CardContent>
</Card>
<div className="space-y-2">
<Label className="text-xs">참조 (CC)</Label>
<Input
value={cc}
onChange={(e) => setCc(e.target.value)}
onBlur={updateMailContent}
placeholder="cc@example.com"
className="h-8 text-sm"
/>
</div>
{/* 수신자 직접 입력 (컴포넌트 미사용 시) */}
{!useRecipientComponent && (
<>
<div className="space-y-2">
<Label className="text-xs">수신자 (To) *</Label>
<Input
value={to}
onChange={(e) => setTo(e.target.value)}
onBlur={updateMailContent}
placeholder="recipient@example.com (쉼표로 구분, {{변수}} 사용 가능)"
className="h-8 text-sm"
/>
</div>
<div className="space-y-2">
<Label className="text-xs">참조 (CC)</Label>
<Input
value={cc}
onChange={(e) => setCc(e.target.value)}
onBlur={updateMailContent}
placeholder="cc@example.com"
className="h-8 text-sm"
/>
</div>
</>
)}
<div className="space-y-2">
<Label className="text-xs">숨은 참조 (BCC)</Label>