메일 수신자 컴포넌트 구현
This commit is contained in:
parent
bb98e9319f
commit
1ee1287b8a
|
|
@ -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,13 +294,105 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
|
|||
</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>
|
||||
|
||||
{/* 수신자 직접 입력 (컴포넌트 미사용 시) */}
|
||||
{!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 (쉼표로 구분)"
|
||||
placeholder="recipient@example.com (쉼표로 구분, {{변수}} 사용 가능)"
|
||||
className="h-8 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -307,6 +407,8 @@ export function EmailActionProperties({ nodeId, data }: EmailActionPropertiesPro
|
|||
className="h-8 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-xs">숨은 참조 (BCC)</Label>
|
||||
|
|
|
|||
|
|
@ -83,6 +83,9 @@ import "./rack-structure/RackStructureRenderer"; // 창고 렉 위치 일괄 생
|
|||
// 🆕 세금계산서 관리 컴포넌트
|
||||
import "./tax-invoice-list/TaxInvoiceListRenderer"; // 세금계산서 목록, 작성, 발행, 취소
|
||||
|
||||
// 🆕 메일 수신자 선택 컴포넌트
|
||||
import "./mail-recipient-selector/MailRecipientSelectorRenderer"; // 내부 인원 선택 + 외부 이메일 입력
|
||||
|
||||
/**
|
||||
* 컴포넌트 초기화 함수
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -0,0 +1,458 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* 메일 수신자 선택 컴포넌트
|
||||
* InteractiveScreenViewer에서 사용하는 래퍼 컴포넌트
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { X, Plus, Users, Mail, Check } from "lucide-react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/components/ui/popover";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandInput,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/components/ui/command";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { getUserList } from "@/lib/api/user";
|
||||
import type {
|
||||
MailRecipientSelectorConfig,
|
||||
Recipient,
|
||||
InternalUser,
|
||||
} from "./types";
|
||||
|
||||
interface MailRecipientSelectorComponentProps {
|
||||
// 컴포넌트 기본 Props
|
||||
id?: string;
|
||||
componentConfig?: MailRecipientSelectorConfig;
|
||||
|
||||
// 폼 데이터 연동
|
||||
formData?: Record<string, any>;
|
||||
onFormDataChange?: (fieldName: string, value: any) => void;
|
||||
|
||||
// 스타일
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
|
||||
// 모드
|
||||
isPreviewMode?: boolean;
|
||||
isInteractive?: boolean;
|
||||
isDesignMode?: boolean;
|
||||
|
||||
// 기타 Props (무시)
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export const MailRecipientSelectorComponent: React.FC<
|
||||
MailRecipientSelectorComponentProps
|
||||
> = ({
|
||||
id,
|
||||
componentConfig,
|
||||
formData = {},
|
||||
onFormDataChange,
|
||||
className,
|
||||
style,
|
||||
isPreviewMode = false,
|
||||
isInteractive = true,
|
||||
isDesignMode = false,
|
||||
...rest
|
||||
}) => {
|
||||
// config 기본값
|
||||
const config = componentConfig || {};
|
||||
const {
|
||||
toFieldName = "mailTo",
|
||||
ccFieldName = "mailCc",
|
||||
showCc = true,
|
||||
showInternalSelector = true,
|
||||
showExternalInput = true,
|
||||
toLabel = "수신자",
|
||||
ccLabel = "참조(CC)",
|
||||
maxRecipients,
|
||||
maxCcRecipients,
|
||||
required = true,
|
||||
} = config;
|
||||
|
||||
// 상태
|
||||
const [toRecipients, setToRecipients] = useState<Recipient[]>([]);
|
||||
const [ccRecipients, setCcRecipients] = useState<Recipient[]>([]);
|
||||
const [externalEmail, setExternalEmail] = useState("");
|
||||
const [externalCcEmail, setExternalCcEmail] = useState("");
|
||||
const [internalUsers, setInternalUsers] = useState<InternalUser[]>([]);
|
||||
const [isLoadingUsers, setIsLoadingUsers] = useState(false);
|
||||
const [toPopoverOpen, setToPopoverOpen] = useState(false);
|
||||
const [ccPopoverOpen, setCcPopoverOpen] = useState(false);
|
||||
|
||||
// 내부 사용자 목록 로드
|
||||
const loadInternalUsers = useCallback(async () => {
|
||||
if (!showInternalSelector || isDesignMode) return;
|
||||
|
||||
setIsLoadingUsers(true);
|
||||
try {
|
||||
const response = await getUserList({ status: "active", limit: 1000 });
|
||||
if (response.success && response.data) {
|
||||
setInternalUsers(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("사용자 목록 로드 실패:", error);
|
||||
} finally {
|
||||
setIsLoadingUsers(false);
|
||||
}
|
||||
}, [showInternalSelector, isDesignMode]);
|
||||
|
||||
// 컴포넌트 마운트 시 사용자 목록 로드
|
||||
useEffect(() => {
|
||||
loadInternalUsers();
|
||||
}, [loadInternalUsers]);
|
||||
|
||||
// formData에서 초기값 로드
|
||||
useEffect(() => {
|
||||
if (formData[toFieldName]) {
|
||||
const emails = formData[toFieldName].split(",").filter(Boolean);
|
||||
const recipients: Recipient[] = emails.map((email: string) => ({
|
||||
id: `external-${email.trim()}`,
|
||||
email: email.trim(),
|
||||
type: "external" as const,
|
||||
}));
|
||||
setToRecipients(recipients);
|
||||
}
|
||||
|
||||
if (formData[ccFieldName]) {
|
||||
const emails = formData[ccFieldName].split(",").filter(Boolean);
|
||||
const recipients: Recipient[] = emails.map((email: string) => ({
|
||||
id: `external-${email.trim()}`,
|
||||
email: email.trim(),
|
||||
type: "external" as const,
|
||||
}));
|
||||
setCcRecipients(recipients);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// 수신자 변경 시 formData 업데이트
|
||||
const updateFormData = useCallback(
|
||||
(recipients: Recipient[], fieldName: string) => {
|
||||
const emailString = recipients.map((r) => r.email).join(",");
|
||||
onFormDataChange?.(fieldName, emailString);
|
||||
},
|
||||
[onFormDataChange]
|
||||
);
|
||||
|
||||
// 수신자 추가 (내부 사용자)
|
||||
const addInternalRecipient = useCallback(
|
||||
(user: InternalUser, type: "to" | "cc") => {
|
||||
const email = user.email || `${user.userId}@company.com`;
|
||||
const newRecipient: Recipient = {
|
||||
id: `internal-${user.userId}`,
|
||||
email,
|
||||
name: user.userName,
|
||||
type: "internal",
|
||||
userId: user.userId,
|
||||
};
|
||||
|
||||
if (type === "to") {
|
||||
// 중복 체크
|
||||
if (toRecipients.some((r) => r.email === email)) return;
|
||||
// 최대 수신자 수 체크
|
||||
if (maxRecipients && toRecipients.length >= maxRecipients) return;
|
||||
|
||||
const updated = [...toRecipients, newRecipient];
|
||||
setToRecipients(updated);
|
||||
updateFormData(updated, toFieldName);
|
||||
setToPopoverOpen(false);
|
||||
} else {
|
||||
if (ccRecipients.some((r) => r.email === email)) return;
|
||||
if (maxCcRecipients && ccRecipients.length >= maxCcRecipients) return;
|
||||
|
||||
const updated = [...ccRecipients, newRecipient];
|
||||
setCcRecipients(updated);
|
||||
updateFormData(updated, ccFieldName);
|
||||
setCcPopoverOpen(false);
|
||||
}
|
||||
},
|
||||
[
|
||||
toRecipients,
|
||||
ccRecipients,
|
||||
maxRecipients,
|
||||
maxCcRecipients,
|
||||
toFieldName,
|
||||
ccFieldName,
|
||||
updateFormData,
|
||||
]
|
||||
);
|
||||
|
||||
// 외부 이메일 추가
|
||||
const addExternalEmail = useCallback(
|
||||
(email: string, type: "to" | "cc") => {
|
||||
// 이메일 형식 검증
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(email)) return;
|
||||
|
||||
const newRecipient: Recipient = {
|
||||
id: `external-${email}-${type}`,
|
||||
email,
|
||||
type: "external",
|
||||
};
|
||||
|
||||
if (type === "to") {
|
||||
// 해당 필드 내에서만 중복 체크
|
||||
if (toRecipients.some((r) => r.email === email)) return;
|
||||
if (maxRecipients && toRecipients.length >= maxRecipients) return;
|
||||
|
||||
const updated = [...toRecipients, newRecipient];
|
||||
setToRecipients(updated);
|
||||
updateFormData(updated, toFieldName);
|
||||
setExternalEmail("");
|
||||
} else {
|
||||
// 해당 필드 내에서만 중복 체크
|
||||
if (ccRecipients.some((r) => r.email === email)) return;
|
||||
if (maxCcRecipients && ccRecipients.length >= maxCcRecipients) return;
|
||||
|
||||
const updated = [...ccRecipients, newRecipient];
|
||||
setCcRecipients(updated);
|
||||
updateFormData(updated, ccFieldName);
|
||||
setExternalCcEmail("");
|
||||
}
|
||||
},
|
||||
[
|
||||
toRecipients,
|
||||
ccRecipients,
|
||||
maxRecipients,
|
||||
maxCcRecipients,
|
||||
toFieldName,
|
||||
ccFieldName,
|
||||
updateFormData,
|
||||
]
|
||||
);
|
||||
|
||||
// 수신자 제거
|
||||
const removeRecipient = useCallback(
|
||||
(recipientId: string, type: "to" | "cc") => {
|
||||
if (type === "to") {
|
||||
const updated = toRecipients.filter((r) => r.id !== recipientId);
|
||||
setToRecipients(updated);
|
||||
updateFormData(updated, toFieldName);
|
||||
} else {
|
||||
const updated = ccRecipients.filter((r) => r.id !== recipientId);
|
||||
setCcRecipients(updated);
|
||||
updateFormData(updated, ccFieldName);
|
||||
}
|
||||
},
|
||||
[toRecipients, ccRecipients, toFieldName, ccFieldName, updateFormData]
|
||||
);
|
||||
|
||||
// 이미 선택된 사용자인지 확인 (해당 필드 내에서만 중복 체크)
|
||||
const isUserSelected = useCallback(
|
||||
(user: InternalUser, type: "to" | "cc") => {
|
||||
const recipients = type === "to" ? toRecipients : ccRecipients;
|
||||
const userEmail = user.email || `${user.userId}@company.com`;
|
||||
return recipients.some((r) => r.email === userEmail);
|
||||
},
|
||||
[toRecipients, ccRecipients]
|
||||
);
|
||||
|
||||
// 수신자 태그 렌더링
|
||||
const renderRecipientTags = (recipients: Recipient[], type: "to" | "cc") => (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{recipients.map((recipient) => (
|
||||
<Badge
|
||||
key={recipient.id}
|
||||
variant={recipient.type === "internal" ? "default" : "secondary"}
|
||||
className="flex items-center gap-1 pr-1"
|
||||
>
|
||||
{recipient.type === "internal" ? (
|
||||
<Users className="h-3 w-3" />
|
||||
) : (
|
||||
<Mail className="h-3 w-3" />
|
||||
)}
|
||||
<span className="max-w-[150px] truncate">
|
||||
{recipient.name || recipient.email}
|
||||
</span>
|
||||
{isInteractive && !isDesignMode && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeRecipient(recipient.id, type)}
|
||||
className="ml-1 rounded-full p-0.5 hover:bg-white/20"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
)}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
|
||||
// 내부 사용자 선택 팝오버
|
||||
const renderInternalSelector = (type: "to" | "cc") => {
|
||||
const isOpen = type === "to" ? toPopoverOpen : ccPopoverOpen;
|
||||
const setIsOpen = type === "to" ? setToPopoverOpen : setCcPopoverOpen;
|
||||
|
||||
return (
|
||||
<Popover open={isOpen} onOpenChange={setIsOpen}>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-8"
|
||||
disabled={!isInteractive || isLoadingUsers || isDesignMode}
|
||||
>
|
||||
<Users className="mr-1 h-4 w-4" />
|
||||
내부 인원
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-[300px] p-0" align="start">
|
||||
<Command>
|
||||
<CommandInput placeholder="이름 또는 이메일로 검색..." />
|
||||
<CommandList>
|
||||
<CommandEmpty>검색 결과가 없습니다.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{internalUsers.map((user, index) => {
|
||||
const userEmail = user.email || `${user.userId}@company.com`;
|
||||
const selected = isUserSelected(user, type);
|
||||
const uniqueKey = `${user.userId}-${index}`;
|
||||
return (
|
||||
<CommandItem
|
||||
key={uniqueKey}
|
||||
value={`${user.userId}-${user.userName}-${userEmail}`}
|
||||
onSelect={() => {
|
||||
if (!selected) {
|
||||
addInternalRecipient(user, type);
|
||||
}
|
||||
}}
|
||||
className={cn(
|
||||
"cursor-pointer",
|
||||
selected && "opacity-50 cursor-not-allowed"
|
||||
)}
|
||||
>
|
||||
<div className="flex flex-1 items-center justify-between">
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{user.userName}</span>
|
||||
<span className="text-xs text-gray-500">
|
||||
{userEmail}
|
||||
{user.deptName && ` | ${user.deptName}`}
|
||||
</span>
|
||||
</div>
|
||||
{selected && <Check className="h-4 w-4 text-green-500" />}
|
||||
</div>
|
||||
</CommandItem>
|
||||
);
|
||||
})}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
);
|
||||
};
|
||||
|
||||
// 외부 이메일 입력
|
||||
const renderExternalInput = (type: "to" | "cc") => {
|
||||
const value = type === "to" ? externalEmail : externalCcEmail;
|
||||
const setValue = type === "to" ? setExternalEmail : setExternalCcEmail;
|
||||
|
||||
return (
|
||||
<div className="flex gap-1">
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="외부 이메일 입력"
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
addExternalEmail(value, type);
|
||||
}
|
||||
}}
|
||||
className="h-8 flex-1 text-sm"
|
||||
disabled={!isInteractive || isDesignMode}
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="h-8"
|
||||
onClick={() => addExternalEmail(value, type)}
|
||||
disabled={!isInteractive || !value || isDesignMode}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// 디자인 모드 또는 프리뷰 모드
|
||||
if (isDesignMode || isPreviewMode) {
|
||||
return (
|
||||
<div className={cn("space-y-3 rounded-md border p-3 bg-white", className)} style={style}>
|
||||
<div className="text-sm font-medium text-gray-500">메일 수신자 선택</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<Users className="h-4 w-4" />
|
||||
<span>내부 인원 선택</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<Mail className="h-4 w-4" />
|
||||
<span>외부 이메일 입력</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={cn("space-y-4", className)} style={style}>
|
||||
{/* 수신자 (To) */}
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-medium">
|
||||
{toLabel}
|
||||
{required && <span className="ml-1 text-red-500">*</span>}
|
||||
</Label>
|
||||
|
||||
{/* 선택된 수신자 태그 */}
|
||||
{toRecipients.length > 0 && (
|
||||
<div className="rounded-md border bg-gray-50 p-2">
|
||||
{renderRecipientTags(toRecipients, "to")}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 추가 버튼들 */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{showInternalSelector && renderInternalSelector("to")}
|
||||
{showExternalInput && renderExternalInput("to")}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 참조 (CC) */}
|
||||
{showCc && (
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-medium">{ccLabel}</Label>
|
||||
|
||||
{/* 선택된 참조 수신자 태그 */}
|
||||
{ccRecipients.length > 0 && (
|
||||
<div className="rounded-md border bg-gray-50 p-2">
|
||||
{renderRecipientTags(ccRecipients, "cc")}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 추가 버튼들 */}
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{showInternalSelector && renderInternalSelector("cc")}
|
||||
{showExternalInput && renderExternalInput("cc")}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MailRecipientSelectorComponent;
|
||||
|
|
@ -0,0 +1,246 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* 메일 수신자 선택 컴포넌트 설정 패널
|
||||
* 화면관리에서 컴포넌트 설정 시 사용
|
||||
*/
|
||||
|
||||
import React, { useEffect, useState, useCallback } from "react";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import type { MailRecipientSelectorConfig } from "./types";
|
||||
|
||||
interface MailRecipientSelectorConfigPanelProps {
|
||||
config: MailRecipientSelectorConfig;
|
||||
onConfigChange: (config: MailRecipientSelectorConfig) => void;
|
||||
}
|
||||
|
||||
export const MailRecipientSelectorConfigPanel: React.FC<
|
||||
MailRecipientSelectorConfigPanelProps
|
||||
> = ({ config, onConfigChange }) => {
|
||||
// 로컬 상태
|
||||
const [localConfig, setLocalConfig] = useState<MailRecipientSelectorConfig>({
|
||||
toFieldName: "mailTo",
|
||||
ccFieldName: "mailCc",
|
||||
showCc: true,
|
||||
showInternalSelector: true,
|
||||
showExternalInput: true,
|
||||
toLabel: "수신자",
|
||||
ccLabel: "참조(CC)",
|
||||
required: true,
|
||||
...config,
|
||||
});
|
||||
|
||||
// config prop 변경 시 로컬 상태 동기화
|
||||
useEffect(() => {
|
||||
setLocalConfig({
|
||||
toFieldName: "mailTo",
|
||||
ccFieldName: "mailCc",
|
||||
showCc: true,
|
||||
showInternalSelector: true,
|
||||
showExternalInput: true,
|
||||
toLabel: "수신자",
|
||||
ccLabel: "참조(CC)",
|
||||
required: true,
|
||||
...config,
|
||||
});
|
||||
}, [config]);
|
||||
|
||||
// 설정 업데이트 함수
|
||||
const updateConfig = useCallback(
|
||||
(key: keyof MailRecipientSelectorConfig, value: any) => {
|
||||
const newConfig = { ...localConfig, [key]: value };
|
||||
setLocalConfig(newConfig);
|
||||
onConfigChange(newConfig);
|
||||
},
|
||||
[localConfig, onConfigChange]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* 필드명 설정 */}
|
||||
<Card>
|
||||
<CardHeader className="py-3">
|
||||
<CardTitle className="text-sm">필드명 설정</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">수신자 필드명</Label>
|
||||
<Input
|
||||
value={localConfig.toFieldName || "mailTo"}
|
||||
onChange={(e) => updateConfig("toFieldName", e.target.value)}
|
||||
placeholder="mailTo"
|
||||
className="h-8 text-sm"
|
||||
/>
|
||||
<p className="text-[10px] text-gray-500">
|
||||
formData에 저장될 수신자 필드명 (제어에서 {`{{mailTo}}`}로 사용)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">참조 필드명</Label>
|
||||
<Input
|
||||
value={localConfig.ccFieldName || "mailCc"}
|
||||
onChange={(e) => updateConfig("ccFieldName", e.target.value)}
|
||||
placeholder="mailCc"
|
||||
className="h-8 text-sm"
|
||||
/>
|
||||
<p className="text-[10px] text-gray-500">
|
||||
formData에 저장될 참조 필드명 (제어에서 {`{{mailCc}}`}로 사용)
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 표시 옵션 */}
|
||||
<Card>
|
||||
<CardHeader className="py-3">
|
||||
<CardTitle className="text-sm">표시 옵션</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label className="text-xs">참조(CC) 필드 표시</Label>
|
||||
<p className="text-[10px] text-gray-500">참조 수신자 입력 필드 표시</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={localConfig.showCc !== false}
|
||||
onCheckedChange={(checked) => updateConfig("showCc", checked)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label className="text-xs">내부 인원 선택</Label>
|
||||
<p className="text-[10px] text-gray-500">회사 내부 사용자 선택 기능</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={localConfig.showInternalSelector !== false}
|
||||
onCheckedChange={(checked) =>
|
||||
updateConfig("showInternalSelector", checked)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label className="text-xs">외부 이메일 입력</Label>
|
||||
<p className="text-[10px] text-gray-500">외부 이메일 직접 입력 기능</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={localConfig.showExternalInput !== false}
|
||||
onCheckedChange={(checked) =>
|
||||
updateConfig("showExternalInput", checked)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label className="text-xs">필수 입력</Label>
|
||||
<p className="text-[10px] text-gray-500">수신자 필수 입력 여부</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={localConfig.required !== false}
|
||||
onCheckedChange={(checked) => updateConfig("required", checked)}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 라벨 설정 */}
|
||||
<Card>
|
||||
<CardHeader className="py-3">
|
||||
<CardTitle className="text-sm">라벨 설정</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">수신자 라벨</Label>
|
||||
<Input
|
||||
value={localConfig.toLabel || "수신자"}
|
||||
onChange={(e) => updateConfig("toLabel", e.target.value)}
|
||||
placeholder="수신자"
|
||||
className="h-8 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">참조 라벨</Label>
|
||||
<Input
|
||||
value={localConfig.ccLabel || "참조(CC)"}
|
||||
onChange={(e) => updateConfig("ccLabel", e.target.value)}
|
||||
placeholder="참조(CC)"
|
||||
className="h-8 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 제한 설정 */}
|
||||
<Card>
|
||||
<CardHeader className="py-3">
|
||||
<CardTitle className="text-sm">제한 설정</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">최대 수신자 수</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={localConfig.maxRecipients || ""}
|
||||
onChange={(e) =>
|
||||
updateConfig(
|
||||
"maxRecipients",
|
||||
e.target.value ? parseInt(e.target.value) : undefined
|
||||
)
|
||||
}
|
||||
placeholder="무제한"
|
||||
className="h-8 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">최대 참조 수신자 수</Label>
|
||||
<Input
|
||||
type="number"
|
||||
value={localConfig.maxCcRecipients || ""}
|
||||
onChange={(e) =>
|
||||
updateConfig(
|
||||
"maxCcRecipients",
|
||||
e.target.value ? parseInt(e.target.value) : undefined
|
||||
)
|
||||
}
|
||||
placeholder="무제한"
|
||||
className="h-8 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 사용 안내 */}
|
||||
<Card className="bg-blue-50">
|
||||
<CardContent className="p-3">
|
||||
<div className="text-xs text-blue-700">
|
||||
<p className="font-medium mb-1">사용 방법</p>
|
||||
<ol className="list-decimal list-inside space-y-1">
|
||||
<li>이 컴포넌트를 모달 화면에 배치합니다.</li>
|
||||
<li>
|
||||
제어관리의 메일 발송 노드에서 수신자를{" "}
|
||||
<code className="bg-blue-100 px-1 rounded">{`{{mailTo}}`}</code>로 설정합니다.
|
||||
</li>
|
||||
<li>
|
||||
참조는{" "}
|
||||
<code className="bg-blue-100 px-1 rounded">{`{{mailCc}}`}</code>로 설정합니다.
|
||||
</li>
|
||||
<li>부모 화면에서 선택한 데이터는 별도 변수로 접근 가능합니다.</li>
|
||||
</ol>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MailRecipientSelectorConfigPanel;
|
||||
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
"use client";
|
||||
|
||||
/**
|
||||
* 메일 수신자 선택 컴포넌트 렌더러
|
||||
* ComponentRegistry에 자동 등록하기 위한 클래스
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { AutoRegisteringComponentRenderer } from "../../AutoRegisteringComponentRenderer";
|
||||
import { MailRecipientSelectorDefinition } from "./index";
|
||||
import { MailRecipientSelectorComponent } from "./MailRecipientSelectorComponent";
|
||||
|
||||
/**
|
||||
* MailRecipientSelector 렌더러
|
||||
* 자동 등록 시스템을 사용하여 컴포넌트를 레지스트리에 등록
|
||||
*/
|
||||
export class MailRecipientSelectorRenderer extends AutoRegisteringComponentRenderer {
|
||||
static componentDefinition = MailRecipientSelectorDefinition;
|
||||
|
||||
render(): React.ReactElement {
|
||||
return <MailRecipientSelectorComponent {...this.props} />;
|
||||
}
|
||||
}
|
||||
|
||||
// 자동 등록 실행
|
||||
MailRecipientSelectorRenderer.registerSelf();
|
||||
|
||||
// Hot Reload 지원 (개발 모드)
|
||||
if (process.env.NODE_ENV === "development") {
|
||||
MailRecipientSelectorRenderer.enableHotReload();
|
||||
}
|
||||
|
||||
export default MailRecipientSelectorRenderer;
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
"use client";
|
||||
|
||||
import { createComponentDefinition } from "../../utils/createComponentDefinition";
|
||||
import { ComponentCategory } from "@/types/component";
|
||||
import { MailRecipientSelectorComponent } from "./MailRecipientSelectorComponent";
|
||||
import { MailRecipientSelectorConfigPanel } from "./MailRecipientSelectorConfigPanel";
|
||||
import type { MailRecipientSelectorConfig } from "./types";
|
||||
|
||||
/**
|
||||
* MailRecipientSelector 컴포넌트 정의
|
||||
* 메일 수신자 선택 컴포넌트 (내부 인원 + 외부 이메일)
|
||||
*/
|
||||
export const MailRecipientSelectorDefinition = createComponentDefinition({
|
||||
id: "mail-recipient-selector",
|
||||
name: "메일 수신자 선택",
|
||||
nameEng: "Mail Recipient Selector",
|
||||
description: "메일 발송 시 수신자/참조를 선택하는 컴포넌트 (내부 인원 선택 + 외부 이메일 입력)",
|
||||
category: ComponentCategory.INPUT,
|
||||
webType: "custom" as any,
|
||||
component: MailRecipientSelectorComponent,
|
||||
defaultConfig: {
|
||||
toFieldName: "mailTo",
|
||||
ccFieldName: "mailCc",
|
||||
showCc: true,
|
||||
showInternalSelector: true,
|
||||
showExternalInput: true,
|
||||
toLabel: "수신자",
|
||||
ccLabel: "참조(CC)",
|
||||
required: true,
|
||||
} as MailRecipientSelectorConfig,
|
||||
defaultSize: { width: 400, height: 200 },
|
||||
configPanel: MailRecipientSelectorConfigPanel,
|
||||
icon: "Mail",
|
||||
tags: ["메일", "수신자", "이메일", "선택"],
|
||||
version: "1.0.0",
|
||||
author: "개발팀",
|
||||
documentation: "",
|
||||
});
|
||||
|
||||
// 타입 내보내기
|
||||
export type { MailRecipientSelectorConfig, Recipient, InternalUser } from "./types";
|
||||
|
||||
// 컴포넌트 내보내기
|
||||
export { MailRecipientSelectorComponent } from "./MailRecipientSelectorComponent";
|
||||
export { MailRecipientSelectorRenderer } from "./MailRecipientSelectorRenderer";
|
||||
export { MailRecipientSelectorConfigPanel } from "./MailRecipientSelectorConfigPanel";
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
/**
|
||||
* 메일 수신자 선택 컴포넌트 타입 정의
|
||||
*/
|
||||
|
||||
// 수신자 정보
|
||||
export interface Recipient {
|
||||
id: string;
|
||||
email: string;
|
||||
name?: string;
|
||||
type: "internal" | "external"; // 내부 사용자 또는 외부 이메일
|
||||
userId?: string; // 내부 사용자인 경우 사용자 ID
|
||||
}
|
||||
|
||||
// 컴포넌트 설정
|
||||
export interface MailRecipientSelectorConfig {
|
||||
// 기본 설정
|
||||
toFieldName?: string; // formData에 저장할 수신자 필드명 (기본: mailTo)
|
||||
ccFieldName?: string; // formData에 저장할 참조 필드명 (기본: mailCc)
|
||||
|
||||
// 표시 옵션
|
||||
showCc?: boolean; // 참조(CC) 필드 표시 여부 (기본: true)
|
||||
showInternalSelector?: boolean; // 내부 인원 선택 표시 여부 (기본: true)
|
||||
showExternalInput?: boolean; // 외부 이메일 입력 표시 여부 (기본: true)
|
||||
|
||||
// 라벨
|
||||
toLabel?: string; // 수신자 라벨 (기본: "수신자")
|
||||
ccLabel?: string; // 참조 라벨 (기본: "참조(CC)")
|
||||
|
||||
// 제한
|
||||
maxRecipients?: number; // 최대 수신자 수 (기본: 무제한)
|
||||
maxCcRecipients?: number; // 최대 참조 수신자 수 (기본: 무제한)
|
||||
|
||||
// 필수 여부
|
||||
required?: boolean; // 수신자 필수 입력 여부 (기본: true)
|
||||
}
|
||||
|
||||
// 컴포넌트 Props
|
||||
export interface MailRecipientSelectorProps {
|
||||
// 기본 Props
|
||||
id?: string;
|
||||
config?: MailRecipientSelectorConfig;
|
||||
|
||||
// 폼 데이터 연동
|
||||
formData?: Record<string, any>;
|
||||
onFormDataChange?: (fieldName: string, value: any) => void;
|
||||
|
||||
// 스타일
|
||||
className?: string;
|
||||
style?: React.CSSProperties;
|
||||
|
||||
// 모드
|
||||
isPreviewMode?: boolean;
|
||||
isInteractive?: boolean;
|
||||
}
|
||||
|
||||
// 내부 사용자 정보 (API 응답 - camelCase)
|
||||
export interface InternalUser {
|
||||
userId: string;
|
||||
userName: string;
|
||||
email?: string;
|
||||
deptName?: string;
|
||||
positionName?: string;
|
||||
}
|
||||
|
||||
|
|
@ -407,6 +407,11 @@ export interface EmailActionNodeData {
|
|||
// 메일 계정 선택 (메일관리에서 등록한 계정)
|
||||
accountId?: string; // 메일 계정 ID (우선 사용)
|
||||
|
||||
// 🆕 수신자 컴포넌트 사용 여부
|
||||
useRecipientComponent?: boolean; // true면 {{mailTo}}, {{mailCc}} 자동 사용
|
||||
recipientToField?: string; // 수신자 필드명 (기본: mailTo)
|
||||
recipientCcField?: string; // 참조 필드명 (기본: mailCc)
|
||||
|
||||
// SMTP 서버 설정 (직접 설정 시 사용, accountId가 있으면 무시됨)
|
||||
smtpConfig?: {
|
||||
host: string;
|
||||
|
|
@ -420,8 +425,8 @@ export interface EmailActionNodeData {
|
|||
|
||||
// 메일 내용
|
||||
from?: string; // 발신자 이메일 (계정 선택 시 자동 설정)
|
||||
to: string; // 수신자 이메일 (쉼표로 구분하여 여러 명)
|
||||
cc?: string; // 참조
|
||||
to: string; // 수신자 이메일 (쉼표로 구분하여 여러 명) - useRecipientComponent가 true면 무시됨
|
||||
cc?: string; // 참조 - useRecipientComponent가 true면 무시됨
|
||||
bcc?: string; // 숨은 참조
|
||||
subject: string; // 제목 (템플릿 변수 지원)
|
||||
body: string; // 본문 (템플릿 변수 지원)
|
||||
|
|
|
|||
Loading…
Reference in New Issue