diff --git a/frontend/lib/registry/components/index.ts b/frontend/lib/registry/components/index.ts
index 4babf09d..98f2522f 100644
--- a/frontend/lib/registry/components/index.ts
+++ b/frontend/lib/registry/components/index.ts
@@ -83,6 +83,9 @@ import "./rack-structure/RackStructureRenderer"; // ์ฐฝ๊ณ ๋ ์์น ์ผ๊ด ์
// ๐ ์ธ๊ธ๊ณ์ฐ์ ๊ด๋ฆฌ ์ปดํฌ๋ํธ
import "./tax-invoice-list/TaxInvoiceListRenderer"; // ์ธ๊ธ๊ณ์ฐ์ ๋ชฉ๋ก, ์์ฑ, ๋ฐํ, ์ทจ์
+// ๐ ๋ฉ์ผ ์์ ์ ์ ํ ์ปดํฌ๋ํธ
+import "./mail-recipient-selector/MailRecipientSelectorRenderer"; // ๋ด๋ถ ์ธ์ ์ ํ + ์ธ๋ถ ์ด๋ฉ์ผ ์
๋ ฅ
+
/**
* ์ปดํฌ๋ํธ ์ด๊ธฐํ ํจ์
*/
diff --git a/frontend/lib/registry/components/mail-recipient-selector/MailRecipientSelectorComponent.tsx b/frontend/lib/registry/components/mail-recipient-selector/MailRecipientSelectorComponent.tsx
new file mode 100644
index 00000000..57102413
--- /dev/null
+++ b/frontend/lib/registry/components/mail-recipient-selector/MailRecipientSelectorComponent.tsx
@@ -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
;
+ 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([]);
+ const [ccRecipients, setCcRecipients] = useState([]);
+ const [externalEmail, setExternalEmail] = useState("");
+ const [externalCcEmail, setExternalCcEmail] = useState("");
+ const [internalUsers, setInternalUsers] = useState([]);
+ 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") => (
+
+ {recipients.map((recipient) => (
+
+ {recipient.type === "internal" ? (
+
+ ) : (
+
+ )}
+
+ {recipient.name || recipient.email}
+
+ {isInteractive && !isDesignMode && (
+
+ )}
+
+ ))}
+
+ );
+
+ // ๋ด๋ถ ์ฌ์ฉ์ ์ ํ ํ์ค๋ฒ
+ const renderInternalSelector = (type: "to" | "cc") => {
+ const isOpen = type === "to" ? toPopoverOpen : ccPopoverOpen;
+ const setIsOpen = type === "to" ? setToPopoverOpen : setCcPopoverOpen;
+
+ return (
+
+
+
+
+
+
+
+
+ ๊ฒ์ ๊ฒฐ๊ณผ๊ฐ ์์ต๋๋ค.
+
+ {internalUsers.map((user, index) => {
+ const userEmail = user.email || `${user.userId}@company.com`;
+ const selected = isUserSelected(user, type);
+ const uniqueKey = `${user.userId}-${index}`;
+ return (
+ {
+ if (!selected) {
+ addInternalRecipient(user, type);
+ }
+ }}
+ className={cn(
+ "cursor-pointer",
+ selected && "opacity-50 cursor-not-allowed"
+ )}
+ >
+
+
+ {user.userName}
+
+ {userEmail}
+ {user.deptName && ` | ${user.deptName}`}
+
+
+ {selected &&
}
+
+
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}
+ />
+
+
+
๋ฉ์ผ ์์ ์ ์ ํ
+
+
+
+ ๋ด๋ถ ์ธ์ ์ ํ
+
+
+
+ ์ธ๋ถ ์ด๋ฉ์ผ ์
๋ ฅ
+
+
+
+ {/* ์์ ์ (To) */}
+
+
+
+ {/* ์ ํ๋ ์์ ์ ํ๊ทธ */}
+ {toRecipients.length > 0 && (
+
+ {renderRecipientTags(toRecipients, "to")}
+
+ )}
+
+ {/* ์ถ๊ฐ ๋ฒํผ๋ค */}
+
+ {showInternalSelector && renderInternalSelector("to")}
+ {showExternalInput && renderExternalInput("to")}
+
+
+
+ {/* ์ฐธ์กฐ (CC) */}
+ {showCc && (
+
+
+
+ {/* ์ ํ๋ ์ฐธ์กฐ ์์ ์ ํ๊ทธ */}
+ {ccRecipients.length > 0 && (
+
+ {renderRecipientTags(ccRecipients, "cc")}
+
+ )}
+
+ {/* ์ถ๊ฐ ๋ฒํผ๋ค */}
+
+ {showInternalSelector && renderInternalSelector("cc")}
+ {showExternalInput && renderExternalInput("cc")}
+
+
+ )}
+
+ {/* ํ๋๋ช
์ค์ */}
+
+
+ ํ๋๋ช
์ค์
+
+
+
+
+
updateConfig("toFieldName", e.target.value)}
+ placeholder="mailTo"
+ className="h-8 text-sm"
+ />
+
+ formData์ ์ ์ฅ๋ ์์ ์ ํ๋๋ช
(์ ์ด์์ {`{{mailTo}}`}๋ก ์ฌ์ฉ)
+
+
+
+
updateConfig("ccFieldName", e.target.value)}
+ placeholder="mailCc"
+ className="h-8 text-sm"
+ />
+
+ formData์ ์ ์ฅ๋ ์ฐธ์กฐ ํ๋๋ช
(์ ์ด์์ {`{{mailCc}}`}๋ก ์ฌ์ฉ)
+
+
+
+ {/* ํ์ ์ต์
*/}
+
+
+ ํ์ ์ต์
+
+
+
+
+
+
์ฐธ์กฐ ์์ ์ ์
๋ ฅ ํ๋ ํ์
+
+
updateConfig("showCc", checked)}
+ />
+
+
+
+
ํ์ฌ ๋ด๋ถ ์ฌ์ฉ์ ์ ํ ๊ธฐ๋ฅ
+
+
+ updateConfig("showInternalSelector", checked)
+ }
+ />
+
+
+
+
์ธ๋ถ ์ด๋ฉ์ผ ์ง์ ์
๋ ฅ ๊ธฐ๋ฅ
+
+
+ updateConfig("showExternalInput", checked)
+ }
+ />
+
+
+
+
์์ ์ ํ์ ์
๋ ฅ ์ฌ๋ถ
+
+
updateConfig("required", checked)}
+ />
+
+
+ {/* ๋ผ๋ฒจ ์ค์ */}
+
+
+ ๋ผ๋ฒจ ์ค์
+
+
+
+
+ updateConfig("toLabel", e.target.value)}
+ placeholder="์์ ์"
+ className="h-8 text-sm"
+ />
+
+
+
+
+ updateConfig("ccLabel", e.target.value)}
+ placeholder="์ฐธ์กฐ(CC)"
+ className="h-8 text-sm"
+ />
+
+
+
+
+ {/* ์ ํ ์ค์ */}
+
+
+ ์ ํ ์ค์
+
+
+
+
+
+ updateConfig(
+ "maxRecipients",
+ e.target.value ? parseInt(e.target.value) : undefined
+ )
+ }
+ placeholder="๋ฌด์ ํ"
+ className="h-8 text-sm"
+ />
+
+
+
+
+
+ updateConfig(
+ "maxCcRecipients",
+ e.target.value ? parseInt(e.target.value) : undefined
+ )
+ }
+ placeholder="๋ฌด์ ํ"
+ className="h-8 text-sm"
+ />
+
+
+
+
+ {/* ์ฌ์ฉ ์๋ด */}
+
+
+
+
์ฌ์ฉ ๋ฐฉ๋ฒ
+
+ - ์ด ์ปดํฌ๋ํธ๋ฅผ ๋ชจ๋ฌ ํ๋ฉด์ ๋ฐฐ์นํฉ๋๋ค.
+ -
+ ์ ์ด๊ด๋ฆฌ์ ๋ฉ์ผ ๋ฐ์ก ๋
ธ๋์์ ์์ ์๋ฅผ{" "}
+
{`{{mailTo}}`}๋ก ์ค์ ํฉ๋๋ค.
+
+ -
+ ์ฐธ์กฐ๋{" "}
+
{`{{mailCc}}`}๋ก ์ค์ ํฉ๋๋ค.
+
+ - ๋ถ๋ชจ ํ๋ฉด์์ ์ ํํ ๋ฐ์ดํฐ๋ ๋ณ๋ ๋ณ์๋ก ์ ๊ทผ ๊ฐ๋ฅํฉ๋๋ค.
+
+
+