15 KiB

Raw Blame History

외부 호출 기능 구현 계획서

📋 개요

데이터플로우 다이어그램에서 외부 시스템 호출 기능을 구현하여, 데이터 처리 완료 시 다양한 외부 서비스로 알림이나 데이터를 전송할 수 있도록 합니다.

🎯 목표

무료/저렴한 알림 방법 우선 구현
확장 가능한 구조 설계
사용자 친화적 UI 제공
안정적인 오류 처리 구현

🚀 Phase 1: 기본 외부 호출 기능 (무료)

1.1 REST API 호출 🚧

현재 상태: UI만 구현됨 (실제 호출 기능 없음)

✅ 설정 UI: HTTP 메서드, 헤더, 페이로드 입력 가능
❌ 실제 HTTP 요청 전송 기능 없음
❌ 백엔드 서비스 구현 필요

1.2 웹훅 호출 🚧

현재 상태: UI만 구현됨 (실제 호출 기능 없음)

✅ 설정 UI: 웹훅 URL 입력 가능
❌ 실제 웹훅 전송 기능 없음
❌ 백엔드 서비스 구현 필요

1.3 이메일 알림 🔄

현재 상태: Java 기반 구현됨 (Node.js 연동 필요)

✅ Java MailUtil 클래스 구현됨
✅ SMTP 설정 및 발송 기능 있음
❌ 데이터플로우와 연동 안됨

1.4 통합된 REST API 호출 시스템 🆕

새로운 중첩 드롭다운 구조로 개선

1단계: 호출 유형 (REST API 호출, 이메일 전송, FTP 업로드)
2단계: REST API 세부 종류 (슬랙, 카카오톡, 디스코드, 기타)
3단계: 각 종류별 맞춤 설정 UI

// ExternalCallService.ts - 통합 구조
class ExternalCallService {
  // 공통 REST API 호출 메서드
  private async callRestApi(config: RestApiConfig) {
    return await fetch(config.url, {
      method: config.method,
      headers: config.headers,
      body: config.body,
    });
  }

  // 슬랙 (REST API의 특수 케이스)
  async sendSlackMessage(settings: SlackSettings) {
    return await this.callRestApi({
      url: settings.slackWebhookUrl,
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        text: settings.slackMessage,
        channel: settings.slackChannel,
      }),
    });
  }

  // 카카오톡 (REST API의 특수 케이스)
  async sendKakaoTalk(settings: KakaoSettings) {
    return await this.callRestApi({
      url: "https://kapi.kakao.com/v2/api/talk/memo/default/send",
      method: "POST",
      headers: { Authorization: `Bearer ${settings.kakaoAccessToken}` },
      body: this.buildKakaoBody(settings.kakaoMessage),
    });
  }

  // 일반 API (사용자 정의)
  async callGenericApi(settings: GenericApiSettings) {
    return await this.callRestApi({
      url: settings.apiUrl,
      method: settings.httpMethod,
      headers: JSON.parse(settings.headers || "{}"),
      body: settings.bodyTemplate,
    });
  }
}

🔧 Phase 2: UI/UX 개선

2.1 중첩 드롭다운 구조로 외부 호출 타입 개선

파일: frontend/types/connectionTypes.ts

export interface ExternalCallSettings {
  callType: "rest-api" | "email" | "ftp" | "queue";

  // REST API 세부 종류 (중첩 드롭다운)
  apiType?: "slack" | "kakao-talk" | "discord" | "generic";

  // 일반 REST API 설정 (기타 선택 시)
  apiUrl?: string;
  httpMethod?: "GET" | "POST" | "PUT" | "DELETE";
  headers?: string;
  bodyTemplate?: string;

  // 슬랙 전용 설정
  slackWebhookUrl?: string;
  slackChannel?: string;
  slackMessage?: string;

  // 카카오톡 전용 설정
  kakaoAccessToken?: string;
  kakaoMessage?: string;

  // 디스코드 전용 설정
  discordWebhookUrl?: string;
  discordMessage?: string;

  // 이메일 설정
  smtpHost?: string;
  smtpPort?: number;
  smtpUser?: string;
  smtpPass?: string;
  fromEmail?: string;
  toEmail?: string;
  subject?: string;
  emailBody?: string;
}

중첩 드롭다운 구조:

1단계: 호출 유형 선택 (REST API 호출, 이메일 전송, FTP 업로드, 메시지 큐)
2단계: REST API 세부 종류 선택 (슬랙, 카카오톡, 디스코드, 기타)
3단계: 각 종류별 맞춤 설정 UI 표시

2.2 중첩 드롭다운 UI 구현

파일: frontend/components/dataflow/connection/ExternalCallSettings.tsx

1단계: 호출 유형 선택

<Select
  value={settings.callType}
  onValueChange={(value) => onSettingsChange({ ...settings, callType: value })}
>
  <SelectContent>
    <SelectItem value="rest-api">REST API 호출</SelectItem>
    <SelectItem value="email">이메일 전송</SelectItem>
    <SelectItem value="ftp">FTP 업로드</SelectItem>
    <SelectItem value="queue">메시지 큐</SelectItem>
  </SelectContent>
</Select>

2단계: REST API 세부 종류 선택

{
  settings.callType === "rest-api" && (
    <Select
      value={settings.apiType || "generic"}
      onValueChange={(value) =>
        onSettingsChange({ ...settings, apiType: value })
      }
    >
      <SelectContent>
        <SelectItem value="slack">슬랙</SelectItem>
        <SelectItem value="kakao-talk">카카오톡</SelectItem>
        <SelectItem value="discord">디스코드</SelectItem>
        <SelectItem value="generic">기타 (일반 API)</SelectItem>
      </SelectContent>
    </Select>
  );
}

3단계: 각 종류별 맞춤 설정

{
  /* 슬랙 설정 */
}
{
  settings.apiType === "slack" && (
    <>
      <Input placeholder="https://hooks.slack.com/services/..." />
      <Input placeholder="#general" />
      <Textarea placeholder="데이터 처리 완료! {{recordCount}}건" />
    </>
  );
}

{
  /* 카카오톡 설정 */
}
{
  settings.apiType === "kakao-talk" && (
    <>
      <Input type="password" placeholder="카카오 액세스 토큰" />
      <Textarea placeholder="처리 완료! 총 {{recordCount}}건 처리되었습니다." />
    </>
  );
}

{
  /* 기타 API 설정 */
}
{
  settings.apiType === "generic" && (
    <>
      <Input placeholder="https://api.example.com/webhook" />
      <Select placeholder="HTTP Method" />
      <Textarea placeholder="Headers (JSON)" />
      <Textarea placeholder="Body Template" />
    </>
  );
}

📱 Phase 3: 메신저 통합 (유료)

3.1 SMS 발송

예상 비용: 15~20원/건 추천 서비스:

NHN Toast SMS
네이버 클라우드 SMS
알리고 SMS

// SMS 설정 타입
interface SMSSettings {
  provider: "toast" | "naver" | "aligo";
  apiKey: string;
  secretKey: string;
  fromNumber: string;
  toNumber: string;
  message: string;
}

3.2 카카오톡 알림톡

예상 비용: 15~25원/건 필요 사항:

카카오톡 비즈니스 계정
알림톡 템플릿 등록
카카오톡 비즈니스 API 연동

// 카카오톡 설정 타입
interface KakaoTalkSettings {
  apiKey: string;
  templateCode: string;
  phoneNumber: string;
  templateParams: Record<string, string>;
}

🛠️ Phase 4: 고급 기능

4.1 재시도 메커니즘

interface RetryConfig {
  maxRetries: number;
  retryDelay: number; // ms
  backoffMultiplier: number;
}

// ExternalCallService에서 구현
async executeWithRetry(callFunction: () => Promise<any>, config: RetryConfig) {
  let lastError: Error;

  for (let attempt = 1; attempt <= config.maxRetries; attempt++) {
    try {
      return await callFunction();
    } catch (error) {
      lastError = error as Error;
      if (attempt < config.maxRetries) {
        await new Promise(resolve =>
          setTimeout(resolve, config.retryDelay * Math.pow(config.backoffMultiplier, attempt - 1))
        );
      }
    }
  }

  throw lastError!;
}

4.2 호출 로그 및 모니터링

-- 외부 호출 로그 테이블
CREATE TABLE external_call_logs (
  id SERIAL PRIMARY KEY,
  diagram_id INTEGER REFERENCES dataflow_diagrams(diagram_id),
  relationship_id VARCHAR(255),
  call_type VARCHAR(50),
  target_url VARCHAR(500),
  request_payload TEXT,
  response_status INTEGER,
  response_body TEXT,
  error_message TEXT,
  execution_time_ms INTEGER,
  created_at TIMESTAMP DEFAULT NOW()
);

4.3 조건부 호출

// 특정 조건에서만 외부 호출 실행
interface ConditionalCall {
  condition: string; // "recordCount > 100"
  callSettings: ExternalCallSettings;
}

📊 구현 우선순위

🥇 High Priority (즉시 구현)

🚧 ExternalCallService 생성 - 백엔드 서비스 기반 구축
🆕 슬랙 웹훅 구현 - 가장 간단하고 테스트하기 쉬움
🔄 REST API 호출 완성 - UI는 있으나 실제 기능 없음
🔄 웹훅 호출 완성 - UI는 있으나 실제 기능 없음
🔄 이메일 연동 - Java MailUtil을 Node.js에서 호출
🔄 디스코드 웹훅 추가 - 슬랙과 유사한 구조

🥈 Medium Priority (1-2주 후)

🔄 재시도 메커니즘
🔄 호출 로그 시스템
🔄 오류 처리 개선
🔄 템플릿 변수 확장

🥉 Low Priority (필요시)

🔄 SMS 발송
🔄 카카오톡 알림톡
🔄 조건부 호출
🔄 배치 호출

🔧 기술적 구현 세부사항

백엔드 수정사항

1. ExternalCallService 확장

파일: backend-node/src/services/externalCallService.ts

// 슬랙 웹훅 메서드 추가
async sendSlackMessage(settings: SlackSettings): Promise<boolean> {
  const payload = {
    text: this.processTemplate(settings.message, settings.templateData),
    channel: settings.channel,
    username: settings.username || "DataFlow Bot",
    icon_emoji: settings.iconEmoji || ":robot_face:"
  };

  const response = await fetch(settings.webhookUrl, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(payload)
  });

  return response.ok;
}

2. 데이터베이스 스키마 확장 (선택사항)

-- 외부 호출 설정을 별도 테이블로 관리 (대용량 처리 시)
CREATE TABLE external_call_configs (
  id SERIAL PRIMARY KEY,
  diagram_id INTEGER REFERENCES dataflow_diagrams(diagram_id),
  relationship_id VARCHAR(255),
  call_type VARCHAR(50),
  config_data JSONB,
  is_active BOOLEAN DEFAULT true,
  created_at TIMESTAMP DEFAULT NOW()
);

-- 인덱스
CREATE INDEX idx_external_calls_diagram ON external_call_configs(diagram_id);
CREATE INDEX idx_external_calls_relationship ON external_call_configs(relationship_id);

프론트엔드 수정사항

1. 타입 정의 확장

파일: frontend/types/connectionTypes.ts

SlackSettings, DiscordSettings 인터페이스 추가
ExternalCallSettings 확장

2. UI 컴포넌트 확장