ChannelMailPopup

이메일 발송을 위한 팝업 모달 컴포넌트. 발신자, 수신자, 제목, 본문 폼 필드를 제공하며, 모든 비즈니스 로직(API 호출, 유효성 검증)은 외부에서 처리한다.

개요

Cals ChannelMailPopup은 Foundation Modal을 기반으로 이메일 발송 폼 UI를 제공합니다. 데이터는 props로 주입하고, 변경/발송은 콜백으로 위임하는 UI 전용 컴포넌트입니다.

주요 특징

✅ 순수 UI 컴포넌트: API 호출, 유효성 검증 로직 없음
✅ 다중 수신자: Select(multiple + filterable + allowCreate)로 자유 입력 가능
✅ 에러 표시: errors prop으로 필드별 유효성 오류 메시지 표시
✅ 로딩 상태: sendLoading prop으로 발송 중 버튼 로딩 표시
✅ 커스텀 레이블: title, label, button 텍스트 모두 커스터마이징 가능

기본 사용

open prop으로 모달을 제어하고, 폼 데이터는 각 필드의 value/onChange 쌍으로 관리합니다.

Code


import { useState } from "react"
import { ChannelMailPopup } from "@vortex/ui-cals"
 
const receiverOptions = [
  { value: "alice@example.com", label: "Alice" },
  { value: "bob@example.com", label: "Bob" },
]
 
function EmailForm() {
  const [open, setOpen] = useState(false)
  const [sender, setSender] = useState("admin@example.com")
  const [receiver, setReceiver] = useState<string[]>([])
  const [subject, setSubject] = useState("")
  const [contents, setContents] = useState("")
 
  return (
    <ChannelMailPopup
      open={open}
      onClose={() => setOpen(false)}
      sender={sender}
      onSenderChange={setSender}
      receiver={receiver}
      onReceiverChange={setReceiver}
      receiverList={receiverOptions}
      subject={subject}
      onSubjectChange={setSubject}
      contents={contents}
      onContentsChange={setContents}
      onSend={() => console.log("발송")}
    />
  )
}

에러 표시

errors prop으로 필드별 유효성 검증 결과를 표시합니다. 외부에서 검증 후 에러 객체를 전달합니다.


<ChannelMailPopup
  open={true}
  errors={{
    sender: "발신자 이메일을 입력하세요",
    receiver: "수신자를 1명 이상 선택하세요",
    subject: "제목을 입력하세요",
    contents: "내용을 입력하세요",
  }}
/>

로딩 상태

sendLoading=true이면 Send 버튼에 로딩 스피너가 표시되고 클릭이 차단됩니다.


<ChannelMailPopup open={true} sendLoading={true} />

커스텀 레이블

title, label, button 텍스트를 한국어 등으로 커스터마이징할 수 있습니다.


<ChannelMailPopup
  open={true}
  title="메일 보내기"
  senderLabel="보내는 사람"
  receiverLabel="받는 사람"
  subjectLabel="제목"
  contentsLabel="내용"
  sendLabel="보내기"
  closeLabel="취소"
/>

Props API

Prop	Type	Default	설명
`open`	`boolean`	`false`	모달 열림 상태
`onClose`	`() => void`	-	닫기 이벤트 콜백
`title`	`string`	`"Send Email"`	팝업 제목
`sender`	`string`	`""`	발신자 이메일
`onSenderChange`	`(value: string) => void`	-	발신자 변경 콜백
`receiver`	`string[]`	`[]`	선택된 수신자 목록
`onReceiverChange`	`(value: string[]) => void`	-	수신자 변경 콜백
`receiverList`	`SelectOption[]`	`[]`	수신자 선택 가능 목록
`subject`	`string`	`""`	메일 제목
`onSubjectChange`	`(value: string) => void`	-	제목 변경 콜백
`contents`	`string`	`""`	메일 본문
`onContentsChange`	`(value: string) => void`	-	본문 변경 콜백
`sendLoading`	`boolean`	`false`	발송 버튼 로딩 상태
`onSend`	`() => void`	-	발송 버튼 클릭 콜백
`visible`	`boolean`	`true`	컴포넌트 표시 여부
`errors`	`ChannelMailPopupErrors`	-	필드별 에러 메시지
`className`	`string`	-	모달 컨텐츠 영역 className
`sendLabel`	`string`	`"Send"`	발송 버튼 텍스트
`closeLabel`	`string`	`"Close"`	닫기 버튼 텍스트
`senderLabel`	`string`	`"Sender"`	발신자 필드 레이블
`receiverLabel`	`string`	`"Receiver"`	수신자 필드 레이블
`subjectLabel`	`string`	`"Subject"`	제목 필드 레이블
`contentsLabel`	`string`	`"Contents"`	본문 필드 레이블
`children`	`ReactNode`	-	Footer 영역 커스텀

ChannelMailPopupErrors


interface ChannelMailPopupErrors {
  sender?: string
  receiver?: string
  subject?: string
  contents?: string
}

원본과의 차이

항목	원본 (Vue)	React (CALS)
데이터 fetch	onMounted에서 API 호출	외부에서 props로 전달
데이터 send	컴포넌트 내부에서 API 호출	onSend 콜백으로 위임
유효성 검증	내부 validCheck() 함수	외부에서 errors prop으로 결과 전달
Store 의존	meta/auth/app store 직접 참조	없음 (순수 UI)
모달 라이브러리	vue-final-modal	Foundation Modal