+```
+- `w-full max-w-none`: 전체 너비 사용
+- `px-4`: 좌우 패딩 1rem (16px)
+- `py-8`: 상하 패딩 2rem (32px)
+- `space-y-8`: 하위 요소 간 수직 간격 2rem
+
+#### 헤더 카드
+```tsx
+
+
+ 카드 제목
+
+
+ {/* 내용 */}
+
+
+```
+
+#### 강조 카드
+```tsx
+
+
+
+
+
+
+
+
+```
+
+### 3. 테이블
+
+#### 기본 테이블 구조
+```tsx
+
+
+
+
+
+
+
+```
+
+### 4. 폼 (Form)
+
+#### 입력 필드
+```tsx
+
+
+
+
+```
+
+### 6. 로딩 상태
+
+```tsx
+
+
+
+
+```
+
+---
+
+## 🎨 색상 시스템
+
+### 주 색상 (Primary)
+```css
+orange-50 #fff7ed /* 매우 연한 배경 */
+orange-100 #ffedd5 /* 연한 배경 */
+orange-500 #f97316 /* 주요 버튼, 강조 */
+orange-600 #ea580c /* 버튼 호버 */
+```
+
+### 회색 (Gray)
+```css
+gray-50 #f9fafb /* 페이지 배경 */
+gray-100 #f3f4f6 /* 카드 내부 구분 */
+gray-200 #e5e7eb /* 테두리 */
+gray-300 #d1d5db /* 입력 필드 테두리 */
+gray-500 #6b7280 /* 보조 텍스트 */
+gray-600 #4b5563 /* 일반 텍스트 */
+gray-700 #374151 /* 라벨, 헤더 */
+gray-800 #1f2937 /* 제목 */
+gray-900 #111827 /* 주요 제목 */
+```
+
+### 상태 색상
+```css
+/* 성공 */
+green-100 #dcfce7
+green-500 #22c55e
+green-700 #15803d
+
+/* 경고 */
+red-100 #fee2e2
+red-500 #ef4444
+red-600 #dc2626
+
+/* 정보 */
+blue-50 #eff6ff
+blue-100 #dbeafe
+blue-500 #3b82f6
+```
+
+---
+
+## 📏 간격 시스템
+
+### Spacing Scale
+```css
+space-y-2 0.5rem (8px) /* 폼 요소 간 간격 */
+space-y-4 1rem (16px) /* 섹션 내부 간격 */
+space-y-6 1.5rem (24px) /* 카드 내부 큰 간격 */
+space-y-8 2rem (32px) /* 페이지 주요 섹션 간격 */
+
+gap-2 0.5rem (8px) /* 버튼 그룹 간격 */
+gap-4 1rem (16px) /* 카드 그리드 간격 */
+gap-6 1.5rem (24px) /* 큰 카드 그리드 간격 */
+```
+
+### Padding
+```css
+p-2 0.5rem (8px) /* 작은 요소 */
+p-4 1rem (16px) /* 일반 요소 */
+p-6 1.5rem (24px) /* 카드, 헤더 */
+p-8 2rem (32px) /* 큰 영역 */
+
+px-3 좌우 0.75rem /* 입력 필드 */
+px-4 좌우 1rem /* 버튼 */
+px-6 좌우 1.5rem /* 테이블 셀 */
+
+py-2 상하 0.5rem /* 버튼 */
+py-4 상하 1rem /* 입력 필드 */
+py-8 상하 2rem /* 페이지 컨테이너 */
+```
+
+---
+
+## 📝 타이포그래피
+
+### 제목 (Headings)
+```css
+/* 페이지 제목 */
+text-3xl font-bold text-gray-900
+/* 예: 30px, Bold, #111827 */
+
+/* 섹션 제목 */
+text-2xl font-bold text-gray-900
+/* 예: 24px, Bold */
+
+/* 카드 제목 */
+text-lg font-semibold text-gray-800
+/* 예: 18px, Semi-bold */
+
+/* 작은 제목 */
+text-base font-medium text-gray-700
+/* 예: 16px, Medium */
+```
+
+### 본문 (Body Text)
+```css
+/* 일반 텍스트 */
+text-sm text-gray-600
+/* 14px, #4b5563 */
+
+/* 보조 설명 */
+text-sm text-gray-500
+/* 14px, #6b7280 */
+
+/* 라벨 */
+text-sm font-medium text-gray-700
+/* 14px, Medium */
+```
+
+---
+
+## 🎭 인터랙션 패턴
+
+### 호버 효과
+```css
+/* 버튼 호버 */
+hover:bg-orange-600
+hover:shadow-md
+
+/* 카드 호버 */
+hover:shadow-lg transition-shadow
+
+/* 테이블 행 호버 */
+hover:bg-gradient-to-r hover:from-orange-50/80 hover:to-orange-100/60
+```
+
+### 포커스 효과
+```css
+/* 입력 필드 포커스 */
+focus:outline-none
+focus:ring-2
+focus:ring-orange-500
+focus:border-orange-500
+```
+
+### 전환 효과
+```css
+/* 일반 전환 */
+transition-all duration-200
+
+/* 그림자 전환 */
+transition-shadow
+
+/* 색상 전환 */
+transition-colors duration-200
+```
+
+---
+
+## 🔲 그리드 시스템
+
+### 반응형 그리드
+```tsx
+{/* 1열 → 2열 → 3열 */}
+ {
+ await this.ensureDirectoryExists();
+
+ try {
+ const files = await fs.readdir(this.accountsDir);
+ const jsonFiles = files.filter(f => f.endsWith('.json'));
+
+ const accounts = await Promise.all(
+ jsonFiles.map(async (file) => {
+ const content = await fs.readFile(
+ path.join(this.accountsDir, file),
+ 'utf-8'
+ );
+ return JSON.parse(content) as MailAccount;
+ })
+ );
+
+ return accounts.sort((a, b) =>
+ new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+ );
+ } catch {
+ return [];
+ }
+ }
+
+ async getAccountById(id: string): Promise {
+ try {
+ const content = await fs.readFile(this.getAccountPath(id), 'utf-8');
+ return JSON.parse(content);
+ } catch {
+ return null;
+ }
+ }
+
+ async createAccount(
+ data: Omit
+ ): Promise {
+ const id = `account-${Date.now()}`;
+ const now = new Date().toISOString();
+
+ // 비밀번호 암호화
+ const encryptedPassword = encryptionService.encrypt(data.smtpPassword);
+
+ const account: MailAccount = {
+ ...data,
+ id,
+ smtpPassword: encryptedPassword,
+ createdAt: now,
+ updatedAt: now,
+ };
+
+ await fs.writeFile(
+ this.getAccountPath(id),
+ JSON.stringify(account, null, 2),
+ 'utf-8'
+ );
+
+ return account;
+ }
+
+ async updateAccount(
+ id: string,
+ data: Partial>
+ ): Promise {
+ const existing = await this.getAccountById(id);
+ if (!existing) {
+ return null;
+ }
+
+ // 비밀번호가 변경되면 암호화
+ if (data.smtpPassword && data.smtpPassword !== existing.smtpPassword) {
+ data.smtpPassword = encryptionService.encrypt(data.smtpPassword);
+ }
+
+ const updated: MailAccount = {
+ ...existing,
+ ...data,
+ id: existing.id,
+ createdAt: existing.createdAt,
+ updatedAt: new Date().toISOString(),
+ };
+
+ await fs.writeFile(
+ this.getAccountPath(id),
+ JSON.stringify(updated, null, 2),
+ 'utf-8'
+ );
+
+ return updated;
+ }
+
+ async deleteAccount(id: string): Promise {
+ try {
+ await fs.unlink(this.getAccountPath(id));
+ return true;
+ } catch {
+ return false;
+ }
+ }
+
+ async getAccountByEmail(email: string): Promise {
+ const accounts = await this.getAllAccounts();
+ return accounts.find(a => a.email === email) || null;
+ }
+
+ async getActiveAccounts(): Promise {
+ const accounts = await this.getAllAccounts();
+ return accounts.filter(a => a.status === 'active');
+ }
+
+ /**
+ * 비밀번호 복호화
+ */
+ decryptPassword(encryptedPassword: string): string {
+ return encryptionService.decrypt(encryptedPassword);
+ }
+}
+
+export const mailAccountFileService = new MailAccountFileService();
+
diff --git a/backend-node/src/services/mailQueryService.ts b/backend-node/src/services/mailQueryService.ts
new file mode 100644
index 00000000..91815cf0
--- /dev/null
+++ b/backend-node/src/services/mailQueryService.ts
@@ -0,0 +1,241 @@
+import { query } from '../database/db';
+
+export interface QueryParameter {
+ name: string; // $1, $2, etc.
+ type: 'text' | 'number' | 'date';
+ value?: any;
+}
+
+export interface QueryResult {
+ success: boolean;
+ data?: any[];
+ fields?: string[];
+ error?: string;
+}
+
+export interface QueryConfig {
+ id: string;
+ name: string;
+ sql: string;
+ parameters: QueryParameter[];
+}
+
+export interface MailQueryConfig extends QueryConfig {}
+
+export interface MailComponent {
+ id: string;
+ type: "text" | "button" | "image" | "spacer" | "table";
+ content?: string;
+ text?: string;
+ url?: string;
+ src?: string;
+ height?: number;
+ styles?: Record;
+}
+
+class MailQueryService {
+ /**
+ * 쿼리에서 파라미터 자동 감지 ($1, $2, ...)
+ */
+ detectParameters(sql: string): QueryParameter[] {
+ const regex = /\$(\d+)/g;
+ const matches = Array.from(sql.matchAll(regex));
+ const uniqueParams = new Set(matches.map(m => m[1]));
+
+ return Array.from(uniqueParams)
+ .sort((a, b) => parseInt(a) - parseInt(b))
+ .map(num => ({
+ name: `$${num}`,
+ type: 'text',
+ }));
+ }
+
+ /**
+ * 쿼리 실행 및 결과 반환
+ */
+ async executeQuery(
+ sql: string,
+ parameters: QueryParameter[]
+ ): Promise {
+ try {
+ // 파라미터 값을 배열로 변환
+ const paramValues = parameters
+ .sort((a, b) => {
+ const aNum = parseInt(a.name.substring(1));
+ const bNum = parseInt(b.name.substring(1));
+ return aNum - bNum;
+ })
+ .map(p => {
+ if (p.type === 'number') {
+ return parseFloat(p.value);
+ } else if (p.type === 'date') {
+ return new Date(p.value);
+ }
+ return p.value;
+ });
+
+ // 쿼리 실행
+ const rows = await query(sql, paramValues);
+
+ // 결과에서 필드명 추출
+ const fields = rows.length > 0 ? Object.keys(rows[0]) : [];
+
+ return {
+ success: true,
+ data: rows,
+ fields,
+ };
+ } catch (error: unknown) {
+ const err = error as Error;
+ return {
+ success: false,
+ error: err.message,
+ };
+ }
+ }
+
+ /**
+ * 쿼리 결과에서 이메일 필드 자동 감지
+ */
+ detectEmailFields(fields: string[]): string[] {
+ const emailPattern = /email|mail|e_mail/i;
+ return fields.filter(field => emailPattern.test(field));
+ }
+
+ /**
+ * 동적 변수 치환
+ * 예: "{customer_name}" → "홍길동"
+ */
+ replaceVariables(template: string, data: Record): string {
+ let result = template;
+
+ Object.keys(data).forEach(key => {
+ const regex = new RegExp(`\\{${key}\\}`, 'g');
+ result = result.replace(regex, String(data[key] || ''));
+ });
+
+ return result;
+ }
+
+ /**
+ * 템플릿에서 사용된 변수 추출
+ * 예: "Hello {name}!" → ["name"]
+ */
+ extractVariables(template: string): string[] {
+ const regex = /\{(\w+)\}/g;
+ const matches = Array.from(template.matchAll(regex));
+ return matches.map(m => m[1]);
+ }
+
+ /**
+ * 쿼리 결과와 템플릿 변수 매칭 검증
+ */
+ validateVariableMapping(
+ templateVariables: string[],
+ queryFields: string[]
+ ): {
+ valid: boolean;
+ missing: string[];
+ available: string[];
+ } {
+ const missing = templateVariables.filter(v => !queryFields.includes(v));
+
+ return {
+ valid: missing.length === 0,
+ missing,
+ available: queryFields,
+ };
+ }
+
+ /**
+ * 대량 발송용: 각 행마다 템플릿 치환
+ */
+ async processMailData(
+ templateHtml: string,
+ templateSubject: string,
+ queryResult: QueryResult
+ ): Promise;
+ }>> {
+ if (!queryResult.success || !queryResult.data) {
+ throw new Error('Invalid query result');
+ }
+
+ const emailFields = this.detectEmailFields(queryResult.fields || []);
+ if (emailFields.length === 0) {
+ throw new Error('No email field found in query result');
+ }
+
+ const emailField = emailFields[0]; // 첫 번째 이메일 필드 사용
+
+ return queryResult.data.map(row => {
+ const email = row[emailField];
+ const subject = this.replaceVariables(templateSubject, row);
+ const content = this.replaceVariables(templateHtml, row);
+
+ return {
+ email,
+ subject,
+ content,
+ variables: row,
+ };
+ });
+ }
+
+ /**
+ * 쿼리 테스트 (파라미터 값 미리보기)
+ */
+ async testQuery(
+ sql: string,
+ sampleParams: QueryParameter[]
+ ): Promise<{
+ success: boolean;
+ preview: any[];
+ totalRows: number;
+ fields: string[];
+ emailFields: string[];
+ error?: string;
+ }> {
+ try {
+ const result = await this.executeQuery(sql, sampleParams);
+
+ if (!result.success) {
+ return {
+ success: false,
+ preview: [],
+ totalRows: 0,
+ fields: [],
+ emailFields: [],
+ error: result.error,
+ };
+ }
+
+ const fields = result.fields || [];
+ const emailFields = this.detectEmailFields(fields);
+
+ return {
+ success: true,
+ preview: (result.data || []).slice(0, 5), // 최대 5개만 미리보기
+ totalRows: (result.data || []).length,
+ fields,
+ emailFields,
+ };
+ } catch (error: unknown) {
+ const err = error as Error;
+ return {
+ success: false,
+ preview: [],
+ totalRows: 0,
+ fields: [],
+ emailFields: [],
+ error: err.message,
+ };
+ }
+ }
+}
+
+export const mailQueryService = new MailQueryService();
+
diff --git a/backend-node/src/services/mailSendSimpleService.ts b/backend-node/src/services/mailSendSimpleService.ts
new file mode 100644
index 00000000..c5d2fc4f
--- /dev/null
+++ b/backend-node/src/services/mailSendSimpleService.ts
@@ -0,0 +1,213 @@
+/**
+ * 간단한 메일 발송 서비스 (쿼리 제외)
+ * Nodemailer를 사용한 직접 발송
+ */
+
+import nodemailer from 'nodemailer';
+import { mailAccountFileService } from './mailAccountFileService';
+import { mailTemplateFileService } from './mailTemplateFileService';
+
+export interface SendMailRequest {
+ accountId: string;
+ templateId?: string;
+ to: string[]; // 수신자 이메일 배열
+ subject: string;
+ variables?: Record; // 템플릿 변수 치환
+ customHtml?: string; // 템플릿 없이 직접 HTML 작성 시
+}
+
+export interface SendMailResult {
+ success: boolean;
+ messageId?: string;
+ accepted?: string[];
+ rejected?: string[];
+ error?: string;
+}
+
+class MailSendSimpleService {
+ /**
+ * 단일 메일 발송 또는 소규모 발송
+ */
+ async sendMail(request: SendMailRequest): Promise {
+ try {
+ // 1. 계정 조회
+ const account = await mailAccountFileService.getAccountById(request.accountId);
+ if (!account) {
+ throw new Error('메일 계정을 찾을 수 없습니다.');
+ }
+
+ // 2. 계정 활성화 확인
+ if (account.status !== 'active') {
+ throw new Error('비활성 상태의 계정입니다.');
+ }
+
+ // 3. HTML 생성 (템플릿 또는 커스텀)
+ let htmlContent = request.customHtml || '';
+
+ if (!htmlContent && request.templateId) {
+ const template = await mailTemplateFileService.getTemplateById(request.templateId);
+ if (!template) {
+ throw new Error('템플릿을 찾을 수 없습니다.');
+ }
+ htmlContent = this.renderTemplate(template, request.variables);
+ }
+
+ if (!htmlContent) {
+ throw new Error('메일 내용이 없습니다.');
+ }
+
+ // 4. SMTP 연결 생성
+ const transporter = nodemailer.createTransport({
+ host: account.smtpHost,
+ port: account.smtpPort,
+ secure: account.smtpSecure, // SSL/TLS
+ auth: {
+ user: account.smtpUsername,
+ pass: account.smtpPassword,
+ },
+ });
+
+ // 5. 메일 발송
+ const info = await transporter.sendMail({
+ from: `"${account.name}" <${account.email}>`,
+ to: request.to.join(', '),
+ subject: this.replaceVariables(request.subject, request.variables),
+ html: htmlContent,
+ });
+
+ return {
+ success: true,
+ messageId: info.messageId,
+ accepted: info.accepted as string[],
+ rejected: info.rejected as string[],
+ };
+ } catch (error) {
+ const err = error as Error;
+ return {
+ success: false,
+ error: err.message,
+ };
+ }
+ }
+
+ /**
+ * 템플릿 렌더링 (간단 버전)
+ */
+ private renderTemplate(
+ template: any,
+ variables?: Record
+ ): string {
+ let html = '): string {
+ if (!variables) return text;
+
+ let result = text;
+ Object.entries(variables).forEach(([key, value]) => {
+ const regex = new RegExp(`\\{${key}\\}`, 'g');
+ result = result.replace(regex, value);
+ });
+
+ return result;
+ }
+
+ /**
+ * 스타일 객체를 CSS 문자열로 변환
+ */
+ private styleObjectToString(styles?: Record): string {
+ if (!styles) return '';
+ return Object.entries(styles)
+ .map(([key, value]) => `${this.camelToKebab(key)}: ${value}`)
+ .join('; ');
+ }
+
+ /**
+ * camelCase를 kebab-case로 변환
+ */
+ private camelToKebab(str: string): string {
+ return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+ }
+
+ /**
+ * SMTP 연결 테스트
+ */
+ async testConnection(accountId: string): Promise<{ success: boolean; message: string }> {
+ try {
+ const account = await mailAccountFileService.getAccountById(accountId);
+ if (!account) {
+ throw new Error('계정을 찾을 수 없습니다.');
+ }
+
+ const transporter = nodemailer.createTransport({
+ host: account.smtpHost,
+ port: account.smtpPort,
+ secure: account.smtpSecure,
+ auth: {
+ user: account.smtpUsername,
+ pass: account.smtpPassword,
+ },
+ });
+
+ await transporter.verify();
+
+ return {
+ success: true,
+ message: 'SMTP 연결 성공!',
+ };
+ } catch (error) {
+ const err = error as Error;
+ return {
+ success: false,
+ message: `연결 실패: ${err.message}`,
+ };
+ }
+ }
+}
+
+export const mailSendSimpleService = new MailSendSimpleService();
+
diff --git a/backend-node/src/services/mailTemplateFileService.ts b/backend-node/src/services/mailTemplateFileService.ts
new file mode 100644
index 00000000..e793bc35
--- /dev/null
+++ b/backend-node/src/services/mailTemplateFileService.ts
@@ -0,0 +1,231 @@
+import fs from 'fs/promises';
+import path from 'path';
+import { MailComponent, QueryConfig } from './mailQueryService';
+
+export interface MailTemplate {
+ id: string;
+ name: string;
+ subject: string;
+ components: MailComponent[];
+ queryConfig?: {
+ queries: QueryConfig[];
+ };
+ recipientConfig?: {
+ type: 'query' | 'manual';
+ emailField?: string;
+ nameField?: string;
+ queryId?: string;
+ manualList?: Array<{ email: string; name?: string }>;
+ };
+ category?: string;
+ createdAt: string;
+ updatedAt: string;
+}
+
+class MailTemplateFileService {
+ private templatesDir: string;
+
+ constructor() {
+ // uploads/mail-templates 디렉토리 사용
+ this.templatesDir = path.join(process.cwd(), 'uploads', 'mail-templates');
+ this.ensureDirectoryExists();
+ }
+
+ /**
+ * 템플릿 디렉토리 생성 (없으면)
+ */
+ private async ensureDirectoryExists() {
+ try {
+ await fs.access(this.templatesDir);
+ } catch {
+ await fs.mkdir(this.templatesDir, { recursive: true });
+ }
+ }
+
+ /**
+ * 템플릿 파일 경로 생성
+ */
+ private getTemplatePath(id: string): string {
+ return path.join(this.templatesDir, `${id}.json`);
+ }
+
+ /**
+ * 모든 템플릿 목록 조회
+ */
+ async getAllTemplates(): Promise {
+ await this.ensureDirectoryExists();
+
+ try {
+ const files = await fs.readdir(this.templatesDir);
+ const jsonFiles = files.filter(f => f.endsWith('.json'));
+
+ const templates = await Promise.all(
+ jsonFiles.map(async (file) => {
+ const content = await fs.readFile(
+ path.join(this.templatesDir, file),
+ 'utf-8'
+ );
+ return JSON.parse(content) as MailTemplate;
+ })
+ );
+
+ // 최신순 정렬
+ return templates.sort((a, b) =>
+ new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime()
+ );
+ } catch (error) {
+ return [];
+ }
+ }
+
+ /**
+ * 특정 템플릿 조회
+ */
+ async getTemplateById(id: string): Promise {
+ try {
+ const content = await fs.readFile(this.getTemplatePath(id), 'utf-8');
+ return JSON.parse(content);
+ } catch {
+ return null;
+ }
+ }
+
+ /**
+ * 템플릿 생성
+ */
+ async createTemplate(
+ data: Omit
+ ): Promise {
+ const id = `template-${Date.now()}`;
+ const now = new Date().toISOString();
+
+ const template: MailTemplate = {
+ ...data,
+ id,
+ createdAt: now,
+ updatedAt: now,
+ };
+
+ await fs.writeFile(
+ this.getTemplatePath(id),
+ JSON.stringify(template, null, 2),
+ 'utf-8'
+ );
+
+ return template;
+ }
+
+ /**
+ * 템플릿 수정
+ */
+ async updateTemplate(
+ id: string,
+ data: Partial>
+ ): Promise {
+ const existing = await this.getTemplateById(id);
+ if (!existing) {
+ return null;
+ }
+
+ const updated: MailTemplate = {
+ ...existing,
+ ...data,
+ id: existing.id,
+ createdAt: existing.createdAt,
+ updatedAt: new Date().toISOString(),
+ };
+
+ await fs.writeFile(
+ this.getTemplatePath(id),
+ JSON.stringify(updated, null, 2),
+ 'utf-8'
+ );
+
+ return updated;
+ }
+
+ /**
+ * 템플릿 삭제
+ */
+ async deleteTemplate(id: string): Promise {
+ try {
+ await fs.unlink(this.getTemplatePath(id));
+ return true;
+ } catch {
+ return false;
+ }
+ }
+
+ /**
+ * 템플릿을 HTML로 렌더링
+ */
+ renderTemplateToHtml(components: MailComponent[]): string {
+ let html = ' {
+ const allTemplates = await this.getAllTemplates();
+ return allTemplates.filter(t => t.category === category);
+ }
+
+ /**
+ * 템플릿 검색
+ */
+ async searchTemplates(keyword: string): Promise {
+ const allTemplates = await this.getAllTemplates();
+ const lowerKeyword = keyword.toLowerCase();
+
+ return allTemplates.filter(t =>
+ t.name.toLowerCase().includes(lowerKeyword) ||
+ t.subject.toLowerCase().includes(lowerKeyword) ||
+ t.category?.toLowerCase().includes(lowerKeyword)
+ );
+ }
+}
+
+export const mailTemplateFileService = new MailTemplateFileService();
+
diff --git a/docker/dev/docker-compose.backend.mac.yml b/docker/dev/docker-compose.backend.mac.yml
index 3862a74f..8257a238 100644
--- a/docker/dev/docker-compose.backend.mac.yml
+++ b/docker/dev/docker-compose.backend.mac.yml
@@ -18,6 +18,7 @@ services:
- CORS_ORIGIN=http://localhost:9771
- CORS_CREDENTIALS=true
- LOG_LEVEL=debug
+ - ENCRYPTION_KEY=ilshin-plm-mail-encryption-key-32characters-2024-secure
volumes:
- ../../backend-node:/app # 개발 모드: 코드 변경 시 자동 반영
- /app/node_modules
diff --git a/frontend/app/(main)/admin/mail/accounts/page.tsx b/frontend/app/(main)/admin/mail/accounts/page.tsx
new file mode 100644
index 00000000..0171f2b6
--- /dev/null
+++ b/frontend/app/(main)/admin/mail/accounts/page.tsx
@@ -0,0 +1,205 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Mail, Plus, Loader2, RefreshCw } from "lucide-react";
+import {
+ MailAccount,
+ getMailAccounts,
+ createMailAccount,
+ updateMailAccount,
+ deleteMailAccount,
+ CreateMailAccountDto,
+ UpdateMailAccountDto,
+} from "@/lib/api/mail";
+import MailAccountModal from "@/components/mail/MailAccountModal";
+import MailAccountTable from "@/components/mail/MailAccountTable";
+import ConfirmDeleteModal from "@/components/mail/ConfirmDeleteModal";
+
+export default function MailAccountsPage() {
+ const [accounts, setAccounts] = useState([]);
+ const [loading, setLoading] = useState(false);
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+ const [selectedAccount, setSelectedAccount] = useState(null);
+ const [modalMode, setModalMode] = useState<'create' | 'edit'>('create');
+
+ const loadAccounts = async () => {
+ setLoading(true);
+ try {
+ const data = await getMailAccounts();
+ // 배열인지 확인하고 설정
+ if (Array.isArray(data)) {
+ setAccounts(data);
+ } else {
+ console.error('API 응답이 배열이 아닙니다:', data);
+ setAccounts([]);
+ }
+ } catch (error) {
+ console.error('계정 로드 실패:', error);
+ setAccounts([]); // 에러 시 빈 배열로 설정
+ // alert('계정 목록을 불러오는데 실패했습니다.');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ loadAccounts();
+ }, []);
+
+ const handleOpenCreateModal = () => {
+ setModalMode('create');
+ setSelectedAccount(null);
+ setIsModalOpen(true);
+ };
+
+ const handleOpenEditModal = (account: MailAccount) => {
+ setModalMode('edit');
+ setSelectedAccount(account);
+ setIsModalOpen(true);
+ };
+
+ const handleOpenDeleteModal = (account: MailAccount) => {
+ setSelectedAccount(account);
+ setIsDeleteModalOpen(true);
+ };
+
+ const handleSaveAccount = async (data: CreateMailAccountDto | UpdateMailAccountDto) => {
+ try {
+ if (modalMode === 'create') {
+ await createMailAccount(data as CreateMailAccountDto);
+ } else if (modalMode === 'edit' && selectedAccount) {
+ await updateMailAccount(selectedAccount.id, data as UpdateMailAccountDto);
+ }
+ await loadAccounts();
+ setIsModalOpen(false);
+ } catch (error) {
+ throw error; // 모달에서 에러 처리
+ }
+ };
+
+ const handleDeleteAccount = async () => {
+ if (!selectedAccount) return;
+
+ try {
+ await deleteMailAccount(selectedAccount.id);
+ await loadAccounts();
+ alert('계정이 삭제되었습니다.');
+ } catch (error) {
+ console.error('계정 삭제 실패:', error);
+ alert('계정 삭제에 실패했습니다.');
+ }
+ };
+
+ const handleToggleStatus = async (account: MailAccount) => {
+ try {
+ const newStatus = account.status === 'active' ? 'inactive' : 'active';
+ await updateMailAccount(account.id, { status: newStatus });
+ await loadAccounts();
+ } catch (error) {
+ console.error('상태 변경 실패:', error);
+ alert('상태 변경에 실패했습니다.');
+ }
+ };
+
+ return (
+ ({
+ totalAccounts: 0,
+ totalTemplates: 0,
+ sentToday: 0,
+ receivedToday: 0,
+ sentThisMonth: 0,
+ successRate: 0,
+ });
+ const [loading, setLoading] = useState(false);
+
+ const loadStats = async () => {
+ setLoading(true);
+ try {
+ // 계정 수
+ const accountsRes = await fetch('/api/mail/accounts');
+ const accountsData = await accountsRes.json();
+
+ // 템플릿 수
+ const templatesRes = await fetch('/api/mail/templates-file');
+ const templatesData = await templatesRes.json();
+
+ setStats({
+ totalAccounts: accountsData.success ? accountsData.data.length : 0,
+ totalTemplates: templatesData.success ? templatesData.data.length : 0,
+ sentToday: 0, // TODO: 실제 발송 통계 API 연동
+ receivedToday: 0,
+ sentThisMonth: 0,
+ successRate: 0,
+ });
+ } catch (error) {
+ // console.error('통계 로드 실패:', error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ loadStats();
+ }, []);
+
+ const statCards = [
+ {
+ title: "등록된 계정",
+ value: stats.totalAccounts,
+ icon: Users,
+ color: "blue",
+ bgColor: "bg-blue-100",
+ iconColor: "text-blue-500",
+ },
+ {
+ title: "템플릿 수",
+ value: stats.totalTemplates,
+ icon: FileText,
+ color: "green",
+ bgColor: "bg-green-100",
+ iconColor: "text-green-500",
+ },
+ {
+ title: "오늘 발송",
+ value: stats.sentToday,
+ icon: Send,
+ color: "orange",
+ bgColor: "bg-orange-100",
+ iconColor: "text-orange-500",
+ },
+ {
+ title: "오늘 수신",
+ value: stats.receivedToday,
+ icon: Inbox,
+ color: "purple",
+ bgColor: "bg-purple-100",
+ iconColor: "text-purple-500",
+ },
+ ];
+
+ return (
+ ([]);
+ const [templates, setTemplates] = useState([]);
+ const [loading, setLoading] = useState(false);
+
+ // 폼 상태
+ const [selectedAccountId, setSelectedAccountId] = useState("");
+ const [selectedTemplateId, setSelectedTemplateId] = useState("");
+ const [subject, setSubject] = useState("");
+ const [recipients, setRecipients] = useState([""]);
+ const [variables, setVariables] = useState>({});
+
+ // UI 상태
+ const [isSending, setIsSending] = useState(false);
+ const [showPreview, setShowPreview] = useState(false);
+ const [sendResult, setSendResult] = useState<{
+ success: boolean;
+ message: string;
+ } | null>(null);
+
+ useEffect(() => {
+ loadData();
+ }, []);
+
+ const loadData = async () => {
+ setLoading(true);
+ try {
+ const [accountsData, templatesData] = await Promise.all([
+ getMailAccounts(),
+ getMailTemplates(),
+ ]);
+ setAccounts(Array.isArray(accountsData) ? accountsData : []);
+ setTemplates(Array.isArray(templatesData) ? templatesData : []);
+
+ // 기본값 설정
+ if (accountsData.length > 0 && !selectedAccountId) {
+ setSelectedAccountId(accountsData[0].id);
+ }
+ } catch (error) {
+ console.error('데이터 로드 실패:', error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const selectedTemplate = templates.find((t) => t.id === selectedTemplateId);
+ const templateVariables = selectedTemplate
+ ? extractTemplateVariables(selectedTemplate)
+ : [];
+
+ // 템플릿 선택 시 제목 자동 입력 및 변수 초기화
+ useEffect(() => {
+ if (selectedTemplate) {
+ setSubject(selectedTemplate.subject);
+ const initialVars: Record = {};
+ templateVariables.forEach((varName) => {
+ initialVars[varName] = "";
+ });
+ setVariables(initialVars);
+ }
+ }, [selectedTemplateId]);
+
+ const addRecipient = () => {
+ setRecipients([...recipients, ""]);
+ };
+
+ const removeRecipient = (index: number) => {
+ setRecipients(recipients.filter((_, i) => i !== index));
+ };
+
+ const updateRecipient = (index: number, value: string) => {
+ const newRecipients = [...recipients];
+ newRecipients[index] = value;
+ setRecipients(newRecipients);
+ };
+
+ const handleSend = async () => {
+ // 유효성 검증
+ const validRecipients = recipients.filter((email) => email.trim() !== "");
+ if (validRecipients.length === 0) {
+ alert("수신자 이메일을 입력하세요.");
+ return;
+ }
+
+ if (!selectedAccountId) {
+ alert("발송 계정을 선택하세요.");
+ return;
+ }
+
+ if (!subject.trim()) {
+ alert("메일 제목을 입력하세요.");
+ return;
+ }
+
+ if (!selectedTemplateId) {
+ alert("템플릿을 선택하세요.");
+ return;
+ }
+
+ setIsSending(true);
+ setSendResult(null);
+
+ try {
+ const result = await sendMail({
+ accountId: selectedAccountId,
+ templateId: selectedTemplateId,
+ to: validRecipients,
+ subject,
+ variables,
+ });
+
+ setSendResult({
+ success: true,
+ message: `${result.accepted?.length || 0}개 발송 성공`,
+ });
+
+ // 성공 후 초기화
+ setRecipients([""]);
+ setVariables({});
+ } catch (error) {
+ setSendResult({
+ success: false,
+ message: error instanceof Error ? error.message : "발송 실패",
+ });
+ } finally {
+ setIsSending(false);
+ }
+ };
+
+ const previewHtml = selectedTemplate
+ ? renderTemplateToHtml(selectedTemplate, variables)
+ : "";
+
+ if (loading) {
+ return (
+ ([]);
+ const [loading, setLoading] = useState(false);
+ const [searchTerm, setSearchTerm] = useState('');
+ const [categoryFilter, setCategoryFilter] = useState('all');
+
+ // 모달 상태
+ const [isEditorOpen, setIsEditorOpen] = useState(false);
+ const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+ const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+ const [selectedTemplate, setSelectedTemplate] = useState(null);
+ const [editorMode, setEditorMode] = useState<'create' | 'edit'>('create');
+
+ // 템플릿 목록 불러오기
+ const loadTemplates = async () => {
+ setLoading(true);
+ try {
+ const data = await getMailTemplates();
+ setTemplates(data);
+ } catch (error) {
+ console.error('템플릿 로드 실패:', error);
+ alert('템플릿 목록을 불러오는데 실패했습니다.');
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ loadTemplates();
+ }, []);
+
+ // 필터링된 템플릿
+ const filteredTemplates = templates.filter((template) => {
+ const matchesSearch =
+ template.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+ template.subject.toLowerCase().includes(searchTerm.toLowerCase());
+ const matchesCategory =
+ categoryFilter === 'all' || template.category === categoryFilter;
+ return matchesSearch && matchesCategory;
+ });
+
+ // 카테고리 목록 추출
+ const categories = Array.from(new Set(templates.map((t) => t.category).filter(Boolean)));
+
+ const handleOpenCreateModal = () => {
+ setEditorMode('create');
+ setSelectedTemplate(null);
+ setIsEditorOpen(true);
+ };
+
+ const handleOpenEditModal = (template: MailTemplate) => {
+ setEditorMode('edit');
+ setSelectedTemplate(template);
+ setIsEditorOpen(true);
+ };
+
+ const handleOpenPreviewModal = (template: MailTemplate) => {
+ setSelectedTemplate(template);
+ setIsPreviewOpen(true);
+ };
+
+ const handleOpenDeleteModal = (template: MailTemplate) => {
+ setSelectedTemplate(template);
+ setIsDeleteModalOpen(true);
+ };
+
+ const handleSaveTemplate = async (data: CreateMailTemplateDto | UpdateMailTemplateDto) => {
+ try {
+ if (editorMode === 'create') {
+ await createMailTemplate(data as CreateMailTemplateDto);
+ } else if (editorMode === 'edit' && selectedTemplate) {
+ await updateMailTemplate(selectedTemplate.id, data as UpdateMailTemplateDto);
+ }
+ await loadTemplates();
+ setIsEditorOpen(false);
+ } catch (error) {
+ throw error; // 모달에서 에러 처리
+ }
+ };
+
+ const handleDeleteTemplate = async () => {
+ if (!selectedTemplate) return;
+
+ try {
+ await deleteMailTemplate(selectedTemplate.id);
+ await loadTemplates();
+ alert('템플릿이 삭제되었습니다.');
+ } catch (error) {
+ console.error('템플릿 삭제 실패:', error);
+ alert('템플릿 삭제에 실패했습니다.');
+ }
+ };
+
+ const handleDuplicateTemplate = async (template: MailTemplate) => {
+ try {
+ await createMailTemplate({
+ name: `${template.name} (복사본)`,
+ subject: template.subject,
+ components: template.components,
+ category: template.category,
+ });
+ await loadTemplates();
+ alert('템플릿이 복사되었습니다.');
+ } catch (error) {
+ console.error('템플릿 복사 실패:', error);
+ alert('템플릿 복사에 실패했습니다.');
+ }
+ };
+
+ return (
+
+
+```
+
+---
+
+## 🎯 컴포넌트 디자인 기준
+
+### 1. 버튼
+
+#### 주요 버튼 (Primary)
+```tsx
+
+```
+
+#### 보조 버튼 (Secondary)
+```tsx
+
+```
+
+#### 위험 버튼 (Danger)
+```tsx
+
+```
+
+### 2. 카드 (Card)
+
+#### 기본 카드
+```tsx
+
+
+ 제목
+설명
+
+ {/* 버튼들 */}
+
+내용
+| + 컬럼명 + | +
|---|
| + 데이터 + | +
+
+
+
+```
+
+#### 셀렉트
+```tsx
+
+```
+
+### 5. 빈 상태 (Empty State)
+
+```tsx
+데이터가 없습니다
+ +
+ {/* 카드들 */}
+
+
+{/* 1열 → 2열 */}
+
+ {/* 항목들 */}
+
+```
+
+### 브레이크포인트
+```css
+sm: 640px @media (min-width: 640px)
+md: 768px @media (min-width: 768px)
+lg: 1024px @media (min-width: 1024px)
+xl: 1280px @media (min-width: 1280px)
+2xl: 1536px @media (min-width: 1536px)
+```
+
+---
+
+## 🎯 실전 예제
+
+### 예제 1: 관리 페이지 (데이터 있음)
+
+```tsx
+export default function ManagementPage() {
+ const [data, setData] = useState([]);
+ const [loading, setLoading] = useState(false);
+
+ return (
+
+
+ );
+}
+```
+
+### 예제 2: 빈 상태 페이지
+
+```tsx
+export default function EmptyStatePage() {
+ return (
+
+ {/* 헤더 */}
+
+
+
+
+
+
+
+
+
+
+
+ {/* 통계 카드 */}
+
+
+ 데이터 관리
+시스템 데이터를 관리합니다
+
+
+
+
+
+
+
+
+
+ {/* 나머지 통계 카드들... */}
+
+
+ {/* 데이터 테이블 */}
+
+
+
+
+ 총 개수
+156
+
+
+ | + 이름 + | ++ 상태 + | ++ 작업 + | +
|---|---|---|
| + {item.name} + | ++ + 활성 + + | +
+
+
+
+
+ |
+
+
+ );
+}
+```
+
+---
+
+## ✅ 체크리스트
+
+### 새 페이지 만들 때
+- [ ] `min-h-screen bg-gray-50` 래퍼 사용
+- [ ] 헤더 카드 (`bg-white rounded-lg shadow-sm border p-6`) 포함
+- [ ] 제목은 `text-3xl font-bold text-gray-900`
+- [ ] 설명은 `mt-2 text-gray-600`
+- [ ] 주요 버튼은 `bg-orange-500 hover:bg-orange-600`
+- [ ] 카드는 `shadow-sm` 클래스 포함
+- [ ] 간격은 `space-y-8` 사용
+
+### 새 컴포넌트 만들 때
+- [ ] 일관된 패딩 사용 (`p-4`, `p-6`)
+- [ ] 호버 효과 추가
+- [ ] 전환 애니메이션 적용 (`transition-all duration-200`)
+- [ ] 적절한 아이콘 사용 (Lucide React)
+- [ ] 반응형 디자인 고려 (`md:`, `lg:`)
+
+---
+
+## 📚 참고 자료
+
+### Tailwind CSS 공식 문서
+- https://tailwindcss.com/docs
+
+### shadcn/ui 컴포넌트
+- https://ui.shadcn.com/
+
+### Lucide 아이콘
+- https://lucide.dev/icons/
+
+---
+
+**이 가이드를 따라 개발하면 일관되고 아름다운 UI를 만들 수 있습니다!** 🎨✨
diff --git a/backend-node/package-lock.json b/backend-node/package-lock.json
index 2619199d..5084d3ce 100644
--- a/backend-node/package-lock.json
+++ b/backend-node/package-lock.json
@@ -10,6 +10,7 @@
"license": "ISC",
"dependencies": {
"@prisma/client": "^6.16.2",
+ "@types/imap": "^0.8.42",
"@types/mssql": "^9.1.8",
"axios": "^1.11.0",
"bcryptjs": "^2.4.3",
@@ -19,13 +20,15 @@
"express": "^4.18.2",
"express-rate-limit": "^7.1.5",
"helmet": "^7.1.0",
+ "imap": "^0.8.19",
"joi": "^17.11.0",
"jsonwebtoken": "^9.0.2",
+ "mailparser": "^3.7.4",
"mssql": "^11.0.1",
"multer": "^1.4.5-lts.1",
"mysql2": "^3.15.0",
"node-cron": "^4.2.1",
- "nodemailer": "^6.9.7",
+ "nodemailer": "^6.10.1",
"oracledb": "^6.9.0",
"pg": "^8.16.3",
"redis": "^4.6.10",
@@ -43,7 +46,7 @@
"@types/multer": "^1.4.13",
"@types/node": "^20.10.5",
"@types/node-cron": "^3.0.11",
- "@types/nodemailer": "^6.4.14",
+ "@types/nodemailer": "^6.4.20",
"@types/oracledb": "^6.9.1",
"@types/pg": "^8.15.5",
"@types/sanitize-html": "^2.9.5",
@@ -2398,6 +2401,19 @@
"@redis/client": "^1.0.0"
}
},
+ "node_modules/@selderee/plugin-htmlparser2": {
+ "version": "0.11.0",
+ "resolved": "https://registry.npmjs.org/@selderee/plugin-htmlparser2/-/plugin-htmlparser2-0.11.0.tgz",
+ "integrity": "sha512-P33hHGdldxGabLFjPPpaTxVolMrzrcegejx+0GxjrIb9Zv48D8yAIA/QTDR2dFl7Uz7urX8aX6+5bCZslr+gWQ==",
+ "license": "MIT",
+ "dependencies": {
+ "domhandler": "^5.0.3",
+ "selderee": "^0.11.0"
+ },
+ "funding": {
+ "url": "https://ko-fi.com/killymxi"
+ }
+ },
"node_modules/@sideway/address": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.5.tgz",
@@ -3277,6 +3293,15 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/@types/imap": {
+ "version": "0.8.42",
+ "resolved": "https://registry.npmjs.org/@types/imap/-/imap-0.8.42.tgz",
+ "integrity": "sha512-FusePG9Cp2GYN6OLow9xBCkjznFkAR7WCz0Fm+j1p/ER6C8V8P71DtjpSmwrZsS7zekCeqdTPHEk9N5OgPwcsg==",
+ "license": "MIT",
+ "dependencies": {
+ "@types/node": "*"
+ }
+ },
"node_modules/@types/istanbul-lib-coverage": {
"version": "2.0.6",
"resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -3412,9 +3437,9 @@
"license": "MIT"
},
"node_modules/@types/nodemailer": {
- "version": "6.4.19",
- "resolved": "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-6.4.19.tgz",
- "integrity": "sha512-Fi8DwmuAduTk1/1MpkR9EwS0SsDvYXx5RxivAVII1InDCIxmhj/iQm3W8S3EVb/0arnblr6PK0FK4wYa7bwdLg==",
+ "version": "6.4.20",
+ "resolved": "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-6.4.20.tgz",
+ "integrity": "sha512-uj83z0GqwqMUE6RI4EKptPlav0FYE6vpIlqJAnxzu+/sSezRdbH69rSBCMsdW6DdsCAzoFQZ52c2UIlhRVQYDA==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -5040,7 +5065,6 @@
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
"integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
- "dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
@@ -5218,7 +5242,6 @@
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
"integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
- "dev": true,
"license": "MIT",
"dependencies": {
"domelementtype": "^2.3.0",
@@ -5233,7 +5256,6 @@
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz",
"integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==",
- "dev": true,
"funding": [
{
"type": "github",
@@ -5246,7 +5268,6 @@
"version": "5.0.3",
"resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
"integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
- "dev": true,
"license": "BSD-2-Clause",
"dependencies": {
"domelementtype": "^2.3.0"
@@ -5262,7 +5283,6 @@
"version": "3.2.2",
"resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
"integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
- "dev": true,
"license": "BSD-2-Clause",
"dependencies": {
"dom-serializer": "^2.0.0",
@@ -5377,11 +5397,19 @@
"node": ">= 0.8"
}
},
+ "node_modules/encoding-japanese": {
+ "version": "2.2.0",
+ "resolved": "https://registry.npmjs.org/encoding-japanese/-/encoding-japanese-2.2.0.tgz",
+ "integrity": "sha512-EuJWwlHPZ1LbADuKTClvHtwbaFn4rOD+dRAbWysqEOXRc2Uui0hJInNJrsdH0c+OhJA4nrCBdSkW4DD5YxAo6A==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=8.10.0"
+ }
+ },
"node_modules/entities": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
- "dev": true,
"license": "BSD-2-Clause",
"engines": {
"node": ">=0.12"
@@ -6463,6 +6491,15 @@
"node": ">= 0.4"
}
},
+ "node_modules/he": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
+ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+ "license": "MIT",
+ "bin": {
+ "he": "bin/he"
+ }
+ },
"node_modules/helmet": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/helmet/-/helmet-7.2.0.tgz",
@@ -6479,11 +6516,26 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/html-to-text": {
+ "version": "9.0.5",
+ "resolved": "https://registry.npmjs.org/html-to-text/-/html-to-text-9.0.5.tgz",
+ "integrity": "sha512-qY60FjREgVZL03vJU6IfMV4GDjGBIoOyvuFdpBDIX9yTlDw0TjxVBQp+P8NvpdIXNJvfWBTNul7fsAQJq2FNpg==",
+ "license": "MIT",
+ "dependencies": {
+ "@selderee/plugin-htmlparser2": "^0.11.0",
+ "deepmerge": "^4.3.1",
+ "dom-serializer": "^2.0.0",
+ "htmlparser2": "^8.0.2",
+ "selderee": "^0.11.0"
+ },
+ "engines": {
+ "node": ">=14"
+ }
+ },
"node_modules/htmlparser2": {
"version": "8.0.2",
"resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
"integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
- "dev": true,
"funding": [
"https://github.com/fb55/htmlparser2?sponsor=1",
{
@@ -6600,6 +6652,42 @@
"dev": true,
"license": "ISC"
},
+ "node_modules/imap": {
+ "version": "0.8.19",
+ "resolved": "https://registry.npmjs.org/imap/-/imap-0.8.19.tgz",
+ "integrity": "sha512-z5DxEA1uRnZG73UcPA4ES5NSCGnPuuouUx43OPX7KZx1yzq3N8/vx2mtXEShT5inxB3pRgnfG1hijfu7XN2YMw==",
+ "dependencies": {
+ "readable-stream": "1.1.x",
+ "utf7": ">=1.0.2"
+ },
+ "engines": {
+ "node": ">=0.8.0"
+ }
+ },
+ "node_modules/imap/node_modules/isarray": {
+ "version": "0.0.1",
+ "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+ "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
+ "license": "MIT"
+ },
+ "node_modules/imap/node_modules/readable-stream": {
+ "version": "1.1.14",
+ "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.1.14.tgz",
+ "integrity": "sha512-+MeVjFf4L44XUkhM1eYbD8fyEsxcV81pqMSR5gblfcLCHfZvbrqy4/qYHE+/R5HoBUT11WV5O08Cr1n3YXkWVQ==",
+ "license": "MIT",
+ "dependencies": {
+ "core-util-is": "~1.0.0",
+ "inherits": "~2.0.1",
+ "isarray": "0.0.1",
+ "string_decoder": "~0.10.x"
+ }
+ },
+ "node_modules/imap/node_modules/string_decoder": {
+ "version": "0.10.31",
+ "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+ "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==",
+ "license": "MIT"
+ },
"node_modules/import-fresh": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
@@ -7678,6 +7766,15 @@
"integrity": "sha512-Xq9nH7KlWZmXAtodXDDRE7vs6DU1gTU8zYDHDiWLSip45Egwq3plLHzPn27NgvzL2r1LMPC1vdqh98sQxtqj4A==",
"license": "MIT"
},
+ "node_modules/leac": {
+ "version": "0.6.0",
+ "resolved": "https://registry.npmjs.org/leac/-/leac-0.6.0.tgz",
+ "integrity": "sha512-y+SqErxb8h7nE/fiEX07jsbuhrpO9lL8eca7/Y1nuWV2moNlXhyd59iDGcRf6moVyDMbmTNzL40SUyrFU/yDpg==",
+ "license": "MIT",
+ "funding": {
+ "url": "https://ko-fi.com/killymxi"
+ }
+ },
"node_modules/leven": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -7702,6 +7799,42 @@
"node": ">= 0.8.0"
}
},
+ "node_modules/libbase64": {
+ "version": "1.3.0",
+ "resolved": "https://registry.npmjs.org/libbase64/-/libbase64-1.3.0.tgz",
+ "integrity": "sha512-GgOXd0Eo6phYgh0DJtjQ2tO8dc0IVINtZJeARPeiIJqge+HdsWSuaDTe8ztQ7j/cONByDZ3zeB325AHiv5O0dg==",
+ "license": "MIT"
+ },
+ "node_modules/libmime": {
+ "version": "5.3.7",
+ "resolved": "https://registry.npmjs.org/libmime/-/libmime-5.3.7.tgz",
+ "integrity": "sha512-FlDb3Wtha8P01kTL3P9M+ZDNDWPKPmKHWaU/cG/lg5pfuAwdflVpZE+wm9m7pKmC5ww6s+zTxBKS1p6yl3KpSw==",
+ "license": "MIT",
+ "dependencies": {
+ "encoding-japanese": "2.2.0",
+ "iconv-lite": "0.6.3",
+ "libbase64": "1.3.0",
+ "libqp": "2.1.1"
+ }
+ },
+ "node_modules/libmime/node_modules/iconv-lite": {
+ "version": "0.6.3",
+ "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+ "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+ "license": "MIT",
+ "dependencies": {
+ "safer-buffer": ">= 2.1.2 < 3.0.0"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/libqp": {
+ "version": "2.1.1",
+ "resolved": "https://registry.npmjs.org/libqp/-/libqp-2.1.1.tgz",
+ "integrity": "sha512-0Wd+GPz1O134cP62YU2GTOPNA7Qgl09XwCqM5zpBv87ERCXdfDtyKXvV7c9U22yWJh44QZqBocFnXN11K96qow==",
+ "license": "MIT"
+ },
"node_modules/lines-and-columns": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -7709,6 +7842,15 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/linkify-it": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+ "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+ "license": "MIT",
+ "dependencies": {
+ "uc.micro": "^2.0.0"
+ }
+ },
"node_modules/locate-path": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -7829,6 +7971,56 @@
"url": "https://github.com/sponsors/wellwelwel"
}
},
+ "node_modules/mailparser": {
+ "version": "3.7.4",
+ "resolved": "https://registry.npmjs.org/mailparser/-/mailparser-3.7.4.tgz",
+ "integrity": "sha512-Beh4yyR4jLq3CZZ32asajByrXnW8dLyKCAQD3WvtTiBnMtFWhxO+wa93F6sJNjDmfjxXs4NRNjw3XAGLqZR3Vg==",
+ "license": "MIT",
+ "dependencies": {
+ "encoding-japanese": "2.2.0",
+ "he": "1.2.0",
+ "html-to-text": "9.0.5",
+ "iconv-lite": "0.6.3",
+ "libmime": "5.3.7",
+ "linkify-it": "5.0.0",
+ "mailsplit": "5.4.5",
+ "nodemailer": "7.0.4",
+ "punycode.js": "2.3.1",
+ "tlds": "1.259.0"
+ }
+ },
+ "node_modules/mailparser/node_modules/iconv-lite": {
+ "version": "0.6.3",
+ "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
+ "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+ "license": "MIT",
+ "dependencies": {
+ "safer-buffer": ">= 2.1.2 < 3.0.0"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/mailparser/node_modules/nodemailer": {
+ "version": "7.0.4",
+ "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-7.0.4.tgz",
+ "integrity": "sha512-9O00Vh89/Ld2EcVCqJ/etd7u20UhME0f/NToPfArwPEe1Don1zy4mAIz6ariRr7mJ2RDxtaDzN0WJVdVXPtZaw==",
+ "license": "MIT-0",
+ "engines": {
+ "node": ">=6.0.0"
+ }
+ },
+ "node_modules/mailsplit": {
+ "version": "5.4.5",
+ "resolved": "https://registry.npmjs.org/mailsplit/-/mailsplit-5.4.5.tgz",
+ "integrity": "sha512-oMfhmvclR689IIaQmIcR5nODnZRRVwAKtqFT407TIvmhX2OLUBnshUTcxzQBt3+96sZVDud9NfSe1NxAkUNXEQ==",
+ "license": "(MIT OR EUPL-1.1+)",
+ "dependencies": {
+ "libbase64": "1.3.0",
+ "libmime": "5.3.7",
+ "libqp": "2.1.1"
+ }
+ },
"node_modules/make-dir": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",
@@ -8511,6 +8703,19 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/parseley": {
+ "version": "0.12.1",
+ "resolved": "https://registry.npmjs.org/parseley/-/parseley-0.12.1.tgz",
+ "integrity": "sha512-e6qHKe3a9HWr0oMRVDTRhKce+bRO8VGQR3NyVwcjwrbhMmFCX9KszEV35+rn4AdilFAq9VPxP/Fe1wC9Qjd2lw==",
+ "license": "MIT",
+ "dependencies": {
+ "leac": "^0.6.0",
+ "peberminta": "^0.9.0"
+ },
+ "funding": {
+ "url": "https://ko-fi.com/killymxi"
+ }
+ },
"node_modules/parseurl": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",
@@ -8580,6 +8785,15 @@
"devOptional": true,
"license": "MIT"
},
+ "node_modules/peberminta": {
+ "version": "0.9.0",
+ "resolved": "https://registry.npmjs.org/peberminta/-/peberminta-0.9.0.tgz",
+ "integrity": "sha512-XIxfHpEuSJbITd1H3EeQwpcZbTLHc+VVr8ANI9t5sit565tsI4/xK3KWTUFE2e6QiangUkh3B0jihzmGnNrRsQ==",
+ "license": "MIT",
+ "funding": {
+ "url": "https://ko-fi.com/killymxi"
+ }
+ },
"node_modules/perfect-debounce": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/perfect-debounce/-/perfect-debounce-1.0.0.tgz",
@@ -8971,6 +9185,15 @@
"node": ">=6"
}
},
+ "node_modules/punycode.js": {
+ "version": "2.3.1",
+ "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+ "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+ "license": "MIT",
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/pure-rand": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/pure-rand/-/pure-rand-6.1.0.tgz",
@@ -9296,6 +9519,18 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"license": "MIT"
},
+ "node_modules/selderee": {
+ "version": "0.11.0",
+ "resolved": "https://registry.npmjs.org/selderee/-/selderee-0.11.0.tgz",
+ "integrity": "sha512-5TF+l7p4+OsnP8BCCvSyZiSPc4x4//p5uPwK8TCnVPJYRmU2aYKMpOXvw8zM5a5JvuuCGN1jmsMwuU2W02ukfA==",
+ "license": "MIT",
+ "dependencies": {
+ "parseley": "^0.12.0"
+ },
+ "funding": {
+ "url": "https://ko-fi.com/killymxi"
+ }
+ },
"node_modules/semver": {
"version": "7.7.2",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
@@ -9904,6 +10139,15 @@
"devOptional": true,
"license": "MIT"
},
+ "node_modules/tlds": {
+ "version": "1.259.0",
+ "resolved": "https://registry.npmjs.org/tlds/-/tlds-1.259.0.tgz",
+ "integrity": "sha512-AldGGlDP0PNgwppe2quAvuBl18UcjuNtOnDuUkqhd6ipPqrYYBt3aTxK1QTsBVknk97lS2JcafWMghjGWFtunw==",
+ "license": "MIT",
+ "bin": {
+ "tlds": "bin.js"
+ }
+ },
"node_modules/tmpl": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -10150,6 +10394,12 @@
"node": ">=14.17"
}
},
+ "node_modules/uc.micro": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+ "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A==",
+ "license": "MIT"
+ },
"node_modules/uglify-js": {
"version": "3.19.3",
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.19.3.tgz",
@@ -10227,6 +10477,23 @@
"punycode": "^2.1.0"
}
},
+ "node_modules/utf7": {
+ "version": "1.0.2",
+ "resolved": "https://registry.npmjs.org/utf7/-/utf7-1.0.2.tgz",
+ "integrity": "sha512-qQrPtYLLLl12NF4DrM9CvfkxkYI97xOb5dsnGZHE3teFr0tWiEZ9UdgMPczv24vl708cYMpe6mGXGHrotIp3Bw==",
+ "dependencies": {
+ "semver": "~5.3.0"
+ }
+ },
+ "node_modules/utf7/node_modules/semver": {
+ "version": "5.3.0",
+ "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+ "integrity": "sha512-mfmm3/H9+67MCVix1h+IXTpDwL6710LyHuk7+cWC9T1mE0qz4iHhh6r4hU2wrIT9iTsAAC2XQRvfblL028cpLw==",
+ "license": "ISC",
+ "bin": {
+ "semver": "bin/semver"
+ }
+ },
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/backend-node/package.json b/backend-node/package.json
index 9d892e3f..2caf0e9c 100644
--- a/backend-node/package.json
+++ b/backend-node/package.json
@@ -28,6 +28,7 @@
"license": "ISC",
"dependencies": {
"@prisma/client": "^6.16.2",
+ "@types/imap": "^0.8.42",
"@types/mssql": "^9.1.8",
"axios": "^1.11.0",
"bcryptjs": "^2.4.3",
@@ -37,13 +38,15 @@
"express": "^4.18.2",
"express-rate-limit": "^7.1.5",
"helmet": "^7.1.0",
+ "imap": "^0.8.19",
"joi": "^17.11.0",
"jsonwebtoken": "^9.0.2",
+ "mailparser": "^3.7.4",
"mssql": "^11.0.1",
"multer": "^1.4.5-lts.1",
"mysql2": "^3.15.0",
"node-cron": "^4.2.1",
- "nodemailer": "^6.9.7",
+ "nodemailer": "^6.10.1",
"oracledb": "^6.9.0",
"pg": "^8.16.3",
"redis": "^4.6.10",
@@ -61,7 +64,7 @@
"@types/multer": "^1.4.13",
"@types/node": "^20.10.5",
"@types/node-cron": "^3.0.11",
- "@types/nodemailer": "^6.4.14",
+ "@types/nodemailer": "^6.4.20",
"@types/oracledb": "^6.9.1",
"@types/pg": "^8.15.5",
"@types/sanitize-html": "^2.9.5",
diff --git a/backend-node/src/app.ts b/backend-node/src/app.ts
index 3c8974d4..412916d3 100644
--- a/backend-node/src/app.ts
+++ b/backend-node/src/app.ts
@@ -28,6 +28,10 @@ import screenStandardRoutes from "./routes/screenStandardRoutes";
import templateStandardRoutes from "./routes/templateStandardRoutes";
import componentStandardRoutes from "./routes/componentStandardRoutes";
import layoutRoutes from "./routes/layoutRoutes";
+import mailQueryRoutes from "./routes/mailQueryRoutes";
+import mailTemplateFileRoutes from "./routes/mailTemplateFileRoutes";
+import mailAccountFileRoutes from "./routes/mailAccountFileRoutes";
+import mailSendSimpleRoutes from "./routes/mailSendSimpleRoutes";
import dataRoutes from "./routes/dataRoutes";
import testButtonDataflowRoutes from "./routes/testButtonDataflowRoutes";
import externalDbConnectionRoutes from "./routes/externalDbConnectionRoutes";
@@ -156,6 +160,10 @@ app.use("/api/admin/button-actions", buttonActionStandardRoutes);
app.use("/api/admin/template-standards", templateStandardRoutes);
app.use("/api/admin/component-standards", componentStandardRoutes);
app.use("/api/layouts", layoutRoutes);
+app.use("/api/mail/accounts", mailAccountFileRoutes); // 파일 기반 계정
+app.use("/api/mail/templates-file", mailTemplateFileRoutes); // 파일 기반 템플릿
+app.use("/api/mail/query", mailQueryRoutes); // SQL 쿼리 빌더
+app.use("/api/mail/send", mailSendSimpleRoutes); // 메일 발송
app.use("/api/screen", screenStandardRoutes);
app.use("/api/data", dataRoutes);
app.use("/api/test-button-dataflow", testButtonDataflowRoutes);
diff --git a/backend-node/src/controllers/mailAccountFileController.ts b/backend-node/src/controllers/mailAccountFileController.ts
new file mode 100644
index 00000000..702a5dd4
--- /dev/null
+++ b/backend-node/src/controllers/mailAccountFileController.ts
@@ -0,0 +1,201 @@
+import { Request, Response } from 'express';
+import { mailAccountFileService } from '../services/mailAccountFileService';
+
+export class MailAccountFileController {
+ async getAllAccounts(req: Request, res: Response) {
+ try {
+ const accounts = await mailAccountFileService.getAllAccounts();
+
+ // 비밀번호는 반환하지 않음
+ const safeAccounts = accounts.map(({ smtpPassword, ...account }) => account);
+
+ return res.json({
+ success: true,
+ data: safeAccounts,
+ total: safeAccounts.length,
+ });
+ } catch (error: unknown) {
+ const err = error as Error;
+ return res.status(500).json({
+ success: false,
+ message: '계정 조회 실패',
+ error: err.message,
+ });
+ }
+ }
+
+ async getAccountById(req: Request, res: Response) {
+ try {
+ const { id } = req.params;
+ const account = await mailAccountFileService.getAccountById(id);
+
+ if (!account) {
+ return res.status(404).json({
+ success: false,
+ message: '계정을 찾을 수 없습니다.',
+ });
+ }
+
+ // 비밀번호는 마스킹 처리
+ const { smtpPassword, ...safeAccount } = account;
+
+ return res.json({
+ success: true,
+ data: {
+ ...safeAccount,
+ smtpPassword: '••••••••', // 마스킹
+ },
+ });
+ } catch (error: unknown) {
+ const err = error as Error;
+ return res.status(500).json({
+ success: false,
+ message: '계정 조회 실패',
+ error: err.message,
+ });
+ }
+ }
+
+ async createAccount(req: Request, res: Response) {
+ try {
+ const {
+ name,
+ email,
+ smtpHost,
+ smtpPort,
+ smtpSecure,
+ smtpUsername,
+ smtpPassword,
+ dailyLimit,
+ status,
+ } = req.body;
+
+ if (!name || !email || !smtpHost || !smtpPort || !smtpUsername || !smtpPassword) {
+ return res.status(400).json({
+ success: false,
+ message: '필수 필드가 누락되었습니다.',
+ });
+ }
+
+ // 이메일 중복 확인
+ const existingAccount = await mailAccountFileService.getAccountByEmail(email);
+ if (existingAccount) {
+ return res.status(400).json({
+ success: false,
+ message: '이미 등록된 이메일입니다.',
+ });
+ }
+
+ const account = await mailAccountFileService.createAccount({
+ name,
+ email,
+ smtpHost,
+ smtpPort,
+ smtpSecure: smtpSecure || false,
+ smtpUsername,
+ smtpPassword,
+ dailyLimit: dailyLimit || 1000,
+ status: status || 'active',
+ });
+
+ // 비밀번호 제외하고 반환
+ const { smtpPassword: _, ...safeAccount } = account;
+
+ return res.status(201).json({
+ success: true,
+ data: safeAccount,
+ message: '메일 계정이 생성되었습니다.',
+ });
+ } catch (error: unknown) {
+ const err = error as Error;
+ return res.status(500).json({
+ success: false,
+ message: '계정 생성 실패',
+ error: err.message,
+ });
+ }
+ }
+
+ async updateAccount(req: Request, res: Response) {
+ try {
+ const { id } = req.params;
+ const updates = req.body;
+
+ const account = await mailAccountFileService.updateAccount(id, updates);
+
+ if (!account) {
+ return res.status(404).json({
+ success: false,
+ message: '계정을 찾을 수 없습니다.',
+ });
+ }
+
+ // 비밀번호 제외하고 반환
+ const { smtpPassword: _, ...safeAccount } = account;
+
+ return res.json({
+ success: true,
+ data: safeAccount,
+ message: '계정이 수정되었습니다.',
+ });
+ } catch (error: unknown) {
+ const err = error as Error;
+ return res.status(500).json({
+ success: false,
+ message: '계정 수정 실패',
+ error: err.message,
+ });
+ }
+ }
+
+ async deleteAccount(req: Request, res: Response) {
+ try {
+ const { id } = req.params;
+ const success = await mailAccountFileService.deleteAccount(id);
+
+ if (!success) {
+ return res.status(404).json({
+ success: false,
+ message: '계정을 찾을 수 없습니다.',
+ });
+ }
+
+ return res.json({
+ success: true,
+ message: '계정이 삭제되었습니다.',
+ });
+ } catch (error: unknown) {
+ const err = error as Error;
+ return res.status(500).json({
+ success: false,
+ message: '계정 삭제 실패',
+ error: err.message,
+ });
+ }
+ }
+
+ async testConnection(req: Request, res: Response) {
+ try {
+ const { id } = req.params;
+
+ // TODO: 실제 SMTP 연결 테스트 구현
+ // const account = await mailAccountFileService.getAccountById(id);
+ // nodemailer로 연결 테스트
+
+ return res.json({
+ success: true,
+ message: '연결 테스트 성공 (미구현)',
+ });
+ } catch (error: unknown) {
+ const err = error as Error;
+ return res.status(500).json({
+ success: false,
+ message: '연결 테스트 실패',
+ error: err.message,
+ });
+ }
+ }
+}
+
+export const mailAccountFileController = new MailAccountFileController();
+
diff --git a/backend-node/src/controllers/mailQueryController.ts b/backend-node/src/controllers/mailQueryController.ts
new file mode 100644
index 00000000..127c613e
--- /dev/null
+++ b/backend-node/src/controllers/mailQueryController.ts
@@ -0,0 +1,213 @@
+import { Request, Response } from 'express';
+import { mailQueryService, QueryParameter } from '../services/mailQueryService';
+
+export class MailQueryController {
+ // 쿼리에서 파라미터 감지
+ async detectParameters(req: Request, res: Response) {
+ try {
+ const { sql } = req.body;
+
+ if (!sql) {
+ return res.status(400).json({
+ success: false,
+ message: 'SQL 쿼리가 필요합니다.',
+ });
+ }
+
+ const parameters = mailQueryService.detectParameters(sql);
+
+ return res.json({
+ success: true,
+ data: parameters,
+ });
+ } catch (error: unknown) {
+ const err = error as Error;
+ return res.status(500).json({
+ success: false,
+ message: '파라미터 감지 실패',
+ error: err.message,
+ });
+ }
+ }
+
+ // 쿼리 테스트 실행
+ async testQuery(req: Request, res: Response) {
+ try {
+ const { sql, parameters } = req.body;
+
+ if (!sql) {
+ return res.status(400).json({
+ success: false,
+ message: 'SQL 쿼리가 필요합니다.',
+ });
+ }
+
+ const result = await mailQueryService.testQuery(
+ sql,
+ parameters || []
+ );
+
+ return res.json({
+ success: result.success,
+ data: result,
+ message: result.success
+ ? '쿼리 테스트 성공'
+ : '쿼리 테스트 실패',
+ });
+ } catch (error: unknown) {
+ const err = error as Error;
+ return res.status(500).json({
+ success: false,
+ message: '쿼리 테스트 실패',
+ error: err.message,
+ });
+ }
+ }
+
+ // 쿼리 실행
+ async executeQuery(req: Request, res: Response) {
+ try {
+ const { sql, parameters } = req.body;
+
+ if (!sql) {
+ return res.status(400).json({
+ success: false,
+ message: 'SQL 쿼리가 필요합니다.',
+ });
+ }
+
+ const result = await mailQueryService.executeQuery(
+ sql,
+ parameters || []
+ );
+
+ return res.json({
+ success: result.success,
+ data: result,
+ message: result.success
+ ? '쿼리 실행 성공'
+ : '쿼리 실행 실패',
+ });
+ } catch (error: unknown) {
+ const err = error as Error;
+ return res.status(500).json({
+ success: false,
+ message: '쿼리 실행 실패',
+ error: err.message,
+ });
+ }
+ }
+
+ // 템플릿 변수 추출
+ async extractVariables(req: Request, res: Response) {
+ try {
+ const { template } = req.body;
+
+ if (!template) {
+ return res.status(400).json({
+ success: false,
+ message: '템플릿이 필요합니다.',
+ });
+ }
+
+ const variables = mailQueryService.extractVariables(template);
+
+ return res.json({
+ success: true,
+ data: variables,
+ });
+ } catch (error: unknown) {
+ const err = error as Error;
+ return res.status(500).json({
+ success: false,
+ message: '변수 추출 실패',
+ error: err.message,
+ });
+ }
+ }
+
+ // 변수 매핑 검증
+ async validateMapping(req: Request, res: Response) {
+ try {
+ const { templateVariables, queryFields } = req.body;
+
+ if (!templateVariables || !queryFields) {
+ return res.status(400).json({
+ success: false,
+ message: '템플릿 변수와 쿼리 필드가 필요합니다.',
+ });
+ }
+
+ const validation = mailQueryService.validateVariableMapping(
+ templateVariables,
+ queryFields
+ );
+
+ return res.json({
+ success: true,
+ data: validation,
+ });
+ } catch (error: unknown) {
+ const err = error as Error;
+ return res.status(500).json({
+ success: false,
+ message: '변수 매핑 검증 실패',
+ error: err.message,
+ });
+ }
+ }
+
+ // 대량 메일 데이터 처리
+ async processMailData(req: Request, res: Response) {
+ try {
+ const { templateHtml, templateSubject, sql, parameters } = req.body;
+
+ if (!templateHtml || !templateSubject || !sql) {
+ return res.status(400).json({
+ success: false,
+ message: '템플릿, 제목, SQL 쿼리가 모두 필요합니다.',
+ });
+ }
+
+ // 쿼리 실행
+ const queryResult = await mailQueryService.executeQuery(
+ sql,
+ parameters || []
+ );
+
+ if (!queryResult.success) {
+ return res.status(400).json({
+ success: false,
+ message: '쿼리 실행 실패',
+ error: queryResult.error,
+ });
+ }
+
+ // 메일 데이터 처리
+ const mailData = await mailQueryService.processMailData(
+ templateHtml,
+ templateSubject,
+ queryResult
+ );
+
+ return res.json({
+ success: true,
+ data: {
+ totalRecipients: mailData.length,
+ mailData: mailData.slice(0, 5), // 미리보기용 5개만
+ },
+ message: `${mailData.length}명의 수신자에게 발송 준비 완료`,
+ });
+ } catch (error: unknown) {
+ const err = error as Error;
+ return res.status(500).json({
+ success: false,
+ message: '메일 데이터 처리 실패',
+ error: err.message,
+ });
+ }
+ }
+}
+
+export const mailQueryController = new MailQueryController();
+
diff --git a/backend-node/src/controllers/mailSendSimpleController.ts b/backend-node/src/controllers/mailSendSimpleController.ts
new file mode 100644
index 00000000..cbd9b647
--- /dev/null
+++ b/backend-node/src/controllers/mailSendSimpleController.ts
@@ -0,0 +1,96 @@
+import { Request, Response } from 'express';
+import { mailSendSimpleService } from '../services/mailSendSimpleService';
+
+export class MailSendSimpleController {
+ /**
+ * 메일 발송 (단건 또는 소규모)
+ */
+ async sendMail(req: Request, res: Response) {
+ try {
+ const { accountId, templateId, to, subject, variables, customHtml } = req.body;
+
+ // 필수 파라미터 검증
+ if (!accountId || !to || !Array.isArray(to) || to.length === 0) {
+ return res.status(400).json({
+ success: false,
+ message: '계정 ID와 수신자 이메일이 필요합니다.',
+ });
+ }
+
+ if (!subject) {
+ return res.status(400).json({
+ success: false,
+ message: '메일 제목이 필요합니다.',
+ });
+ }
+
+ // 템플릿 또는 커스텀 HTML 중 하나는 있어야 함
+ if (!templateId && !customHtml) {
+ return res.status(400).json({
+ success: false,
+ message: '템플릿 또는 메일 내용이 필요합니다.',
+ });
+ }
+
+ // 메일 발송
+ const result = await mailSendSimpleService.sendMail({
+ accountId,
+ templateId,
+ to,
+ subject,
+ variables,
+ customHtml,
+ });
+
+ if (result.success) {
+ return res.json({
+ success: true,
+ data: result,
+ message: '메일이 발송되었습니다.',
+ });
+ } else {
+ return res.status(500).json({
+ success: false,
+ message: result.error || '메일 발송 실패',
+ });
+ }
+ } catch (error: unknown) {
+ const err = error as Error;
+ return res.status(500).json({
+ success: false,
+ message: '메일 발송 중 오류가 발생했습니다.',
+ error: err.message,
+ });
+ }
+ }
+
+ /**
+ * SMTP 연결 테스트
+ */
+ async testConnection(req: Request, res: Response) {
+ try {
+ const { accountId } = req.body;
+
+ if (!accountId) {
+ return res.status(400).json({
+ success: false,
+ message: '계정 ID가 필요합니다.',
+ });
+ }
+
+ const result = await mailSendSimpleService.testConnection(accountId);
+
+ return res.json(result);
+ } catch (error: unknown) {
+ const err = error as Error;
+ return res.status(500).json({
+ success: false,
+ message: '연결 테스트 실패',
+ error: err.message,
+ });
+ }
+ }
+}
+
+export const mailSendSimpleController = new MailSendSimpleController();
+
diff --git a/backend-node/src/controllers/mailTemplateFileController.ts b/backend-node/src/controllers/mailTemplateFileController.ts
new file mode 100644
index 00000000..f5dcb7c3
--- /dev/null
+++ b/backend-node/src/controllers/mailTemplateFileController.ts
@@ -0,0 +1,258 @@
+import { Request, Response } from 'express';
+import { mailTemplateFileService } from '../services/mailTemplateFileService';
+import { mailQueryService } from '../services/mailQueryService';
+
+export class MailTemplateFileController {
+ // 모든 템플릿 조회
+ async getAllTemplates(req: Request, res: Response) {
+ try {
+ const { category, search } = req.query;
+
+ let templates;
+ if (search) {
+ templates = await mailTemplateFileService.searchTemplates(search as string);
+ } else if (category) {
+ templates = await mailTemplateFileService.getTemplatesByCategory(category as string);
+ } else {
+ templates = await mailTemplateFileService.getAllTemplates();
+ }
+
+ return res.json({
+ success: true,
+ data: templates,
+ total: templates.length,
+ });
+ } catch (error: unknown) {
+ const err = error as Error;
+ return res.status(500).json({
+ success: false,
+ message: '템플릿 조회 실패',
+ error: err.message,
+ });
+ }
+ }
+
+ // 특정 템플릿 조회
+ async getTemplateById(req: Request, res: Response) {
+ try {
+ const { id } = req.params;
+ const template = await mailTemplateFileService.getTemplateById(id);
+
+ if (!template) {
+ return res.status(404).json({
+ success: false,
+ message: '템플릿을 찾을 수 없습니다.',
+ });
+ }
+
+ return res.json({
+ success: true,
+ data: template,
+ });
+ } catch (error: unknown) {
+ const err = error as Error;
+ return res.status(500).json({
+ success: false,
+ message: '템플릿 조회 실패',
+ error: err.message,
+ });
+ }
+ }
+
+ // 템플릿 생성
+ async createTemplate(req: Request, res: Response) {
+ try {
+ const { name, subject, components, queryConfig, recipientConfig, category } = req.body;
+
+ if (!name || !subject || !Array.isArray(components)) {
+ return res.status(400).json({
+ success: false,
+ message: '템플릿 이름, 제목, 컴포넌트가 필요합니다.',
+ });
+ }
+
+ const template = await mailTemplateFileService.createTemplate({
+ name,
+ subject,
+ components,
+ queryConfig,
+ recipientConfig,
+ category,
+ });
+
+ return res.status(201).json({
+ success: true,
+ data: template,
+ message: '템플릿이 생성되었습니다.',
+ });
+ } catch (error: unknown) {
+ const err = error as Error;
+ return res.status(500).json({
+ success: false,
+ message: '템플릿 생성 실패',
+ error: err.message,
+ });
+ }
+ }
+
+ // 템플릿 수정
+ async updateTemplate(req: Request, res: Response) {
+ try {
+ const { id } = req.params;
+ const updates = req.body;
+
+ const template = await mailTemplateFileService.updateTemplate(id, updates);
+
+ if (!template) {
+ return res.status(404).json({
+ success: false,
+ message: '템플릿을 찾을 수 없습니다.',
+ });
+ }
+
+ return res.json({
+ success: true,
+ data: template,
+ message: '템플릿이 수정되었습니다.',
+ });
+ } catch (error: unknown) {
+ const err = error as Error;
+ return res.status(500).json({
+ success: false,
+ message: '템플릿 수정 실패',
+ error: err.message,
+ });
+ }
+ }
+
+ // 템플릿 삭제
+ async deleteTemplate(req: Request, res: Response) {
+ try {
+ const { id } = req.params;
+ const success = await mailTemplateFileService.deleteTemplate(id);
+
+ if (!success) {
+ return res.status(404).json({
+ success: false,
+ message: '템플릿을 찾을 수 없습니다.',
+ });
+ }
+
+ return res.json({
+ success: true,
+ message: '템플릿이 삭제되었습니다.',
+ });
+ } catch (error: unknown) {
+ const err = error as Error;
+ return res.status(500).json({
+ success: false,
+ message: '템플릿 삭제 실패',
+ error: err.message,
+ });
+ }
+ }
+
+ // 템플릿 미리보기 (HTML 렌더링)
+ async previewTemplate(req: Request, res: Response) {
+ try {
+ const { id } = req.params;
+ const { sampleData } = req.body;
+
+ const template = await mailTemplateFileService.getTemplateById(id);
+ if (!template) {
+ return res.status(404).json({
+ success: false,
+ message: '템플릿을 찾을 수 없습니다.',
+ });
+ }
+
+ // HTML 렌더링
+ let html = mailTemplateFileService.renderTemplateToHtml(template.components);
+ let subject = template.subject;
+
+ // 샘플 데이터가 있으면 변수 치환
+ if (sampleData) {
+ html = mailQueryService.replaceVariables(html, sampleData);
+ subject = mailQueryService.replaceVariables(subject, sampleData);
+ }
+
+ return res.json({
+ success: true,
+ data: {
+ subject,
+ html,
+ sampleData,
+ },
+ });
+ } catch (error: unknown) {
+ const err = error as Error;
+ return res.status(500).json({
+ success: false,
+ message: '미리보기 생성 실패',
+ error: err.message,
+ });
+ }
+ }
+
+ // 템플릿 + 쿼리 통합 미리보기
+ async previewWithQuery(req: Request, res: Response) {
+ try {
+ const { id } = req.params;
+ const { queryId, parameters } = req.body;
+
+ const template = await mailTemplateFileService.getTemplateById(id);
+ if (!template) {
+ return res.status(404).json({
+ success: false,
+ message: '템플릿을 찾을 수 없습니다.',
+ });
+ }
+
+ // 쿼리 실행
+ const query = template.queryConfig?.queries.find(q => q.id === queryId);
+ if (!query) {
+ return res.status(404).json({
+ success: false,
+ message: '쿼리를 찾을 수 없습니다.',
+ });
+ }
+
+ const queryResult = await mailQueryService.executeQuery(query.sql, parameters || []);
+ if (!queryResult.success || !queryResult.data || queryResult.data.length === 0) {
+ return res.status(400).json({
+ success: false,
+ message: '쿼리 결과가 없습니다.',
+ error: queryResult.error,
+ });
+ }
+
+ // 첫 번째 행으로 미리보기
+ const sampleData = queryResult.data[0];
+ let html = mailTemplateFileService.renderTemplateToHtml(template.components);
+ let subject = template.subject;
+
+ html = mailQueryService.replaceVariables(html, sampleData);
+ subject = mailQueryService.replaceVariables(subject, sampleData);
+
+ return res.json({
+ success: true,
+ data: {
+ subject,
+ html,
+ sampleData,
+ totalRecipients: queryResult.data.length,
+ },
+ });
+ } catch (error: unknown) {
+ const err = error as Error;
+ return res.status(500).json({
+ success: false,
+ message: '쿼리 미리보기 실패',
+ error: err.message,
+ });
+ }
+ }
+}
+
+export const mailTemplateFileController = new MailTemplateFileController();
+
diff --git a/backend-node/src/routes/mailAccountFileRoutes.ts b/backend-node/src/routes/mailAccountFileRoutes.ts
new file mode 100644
index 00000000..cc022cb8
--- /dev/null
+++ b/backend-node/src/routes/mailAccountFileRoutes.ts
@@ -0,0 +1,14 @@
+import { Router } from 'express';
+import { mailAccountFileController } from '../controllers/mailAccountFileController';
+
+const router = Router();
+
+router.get('/', (req, res) => mailAccountFileController.getAllAccounts(req, res));
+router.get('/:id', (req, res) => mailAccountFileController.getAccountById(req, res));
+router.post('/', (req, res) => mailAccountFileController.createAccount(req, res));
+router.put('/:id', (req, res) => mailAccountFileController.updateAccount(req, res));
+router.delete('/:id', (req, res) => mailAccountFileController.deleteAccount(req, res));
+router.post('/:id/test-connection', (req, res) => mailAccountFileController.testConnection(req, res));
+
+export default router;
+
diff --git a/backend-node/src/routes/mailQueryRoutes.ts b/backend-node/src/routes/mailQueryRoutes.ts
new file mode 100644
index 00000000..f4c1a376
--- /dev/null
+++ b/backend-node/src/routes/mailQueryRoutes.ts
@@ -0,0 +1,37 @@
+import { Router } from 'express';
+import { mailQueryController } from '../controllers/mailQueryController';
+
+const router = Router();
+
+// 쿼리 파라미터 자동 감지
+router.post('/detect-parameters', (req, res) =>
+ mailQueryController.detectParameters(req, res)
+);
+
+// 쿼리 테스트 실행
+router.post('/test', (req, res) =>
+ mailQueryController.testQuery(req, res)
+);
+
+// 쿼리 실행
+router.post('/execute', (req, res) =>
+ mailQueryController.executeQuery(req, res)
+);
+
+// 템플릿 변수 추출
+router.post('/extract-variables', (req, res) =>
+ mailQueryController.extractVariables(req, res)
+);
+
+// 변수 매핑 검증
+router.post('/validate-mapping', (req, res) =>
+ mailQueryController.validateMapping(req, res)
+);
+
+// 대량 메일 데이터 처리
+router.post('/process-mail-data', (req, res) =>
+ mailQueryController.processMailData(req, res)
+);
+
+export default router;
+
diff --git a/backend-node/src/routes/mailSendSimpleRoutes.ts b/backend-node/src/routes/mailSendSimpleRoutes.ts
new file mode 100644
index 00000000..db56b66d
--- /dev/null
+++ b/backend-node/src/routes/mailSendSimpleRoutes.ts
@@ -0,0 +1,13 @@
+import { Router } from 'express';
+import { mailSendSimpleController } from '../controllers/mailSendSimpleController';
+
+const router = Router();
+
+// POST /api/mail/send/simple - 메일 발송
+router.post('/simple', (req, res) => mailSendSimpleController.sendMail(req, res));
+
+// POST /api/mail/send/test-connection - SMTP 연결 테스트
+router.post('/test-connection', (req, res) => mailSendSimpleController.testConnection(req, res));
+
+export default router;
+
diff --git a/backend-node/src/routes/mailTemplateFileRoutes.ts b/backend-node/src/routes/mailTemplateFileRoutes.ts
new file mode 100644
index 00000000..eb79ed34
--- /dev/null
+++ b/backend-node/src/routes/mailTemplateFileRoutes.ts
@@ -0,0 +1,18 @@
+import { Router } from 'express';
+import { mailTemplateFileController } from '../controllers/mailTemplateFileController';
+
+const router = Router();
+
+// 템플릿 CRUD
+router.get('/', (req, res) => mailTemplateFileController.getAllTemplates(req, res));
+router.get('/:id', (req, res) => mailTemplateFileController.getTemplateById(req, res));
+router.post('/', (req, res) => mailTemplateFileController.createTemplate(req, res));
+router.put('/:id', (req, res) => mailTemplateFileController.updateTemplate(req, res));
+router.delete('/:id', (req, res) => mailTemplateFileController.deleteTemplate(req, res));
+
+// 미리보기
+router.post('/:id/preview', (req, res) => mailTemplateFileController.previewTemplate(req, res));
+router.post('/:id/preview-with-query', (req, res) => mailTemplateFileController.previewWithQuery(req, res));
+
+export default router;
+
diff --git a/backend-node/src/services/encryptionService.ts b/backend-node/src/services/encryptionService.ts
new file mode 100644
index 00000000..a3608b2e
--- /dev/null
+++ b/backend-node/src/services/encryptionService.ts
@@ -0,0 +1,76 @@
+import crypto from 'crypto';
+
+class EncryptionService {
+ private readonly algorithm = 'aes-256-gcm';
+ private readonly key: Buffer;
+
+ constructor() {
+ const keyString = process.env.ENCRYPTION_KEY;
+ if (!keyString) {
+ throw new Error('ENCRYPTION_KEY environment variable is required');
+ }
+ this.key = crypto.scryptSync(keyString, 'salt', 32);
+ }
+
+ encrypt(text: string): string {
+ const iv = crypto.randomBytes(16);
+ const cipher = crypto.createCipher(this.algorithm, this.key);
+
+ let encrypted = cipher.update(text, 'utf8', 'hex');
+ encrypted += cipher.final('hex');
+
+ const authTag = cipher.getAuthTag();
+
+ return iv.toString('hex') + ':' + authTag.toString('hex') + ':' + encrypted;
+ }
+
+ decrypt(encryptedText: string): string {
+ const [ivHex, authTagHex, encrypted] = encryptedText.split(':');
+
+ if (!ivHex || !authTagHex || !encrypted) {
+ throw new Error('Invalid encrypted text format');
+ }
+
+ const iv = Buffer.from(ivHex, 'hex');
+ const authTag = Buffer.from(authTagHex, 'hex');
+
+ const decipher = crypto.createDecipher(this.algorithm, this.key);
+ decipher.setAuthTag(authTag);
+
+ let decrypted = decipher.update(encrypted, 'hex', 'utf8');
+ decrypted += decipher.final('utf8');
+
+ return decrypted;
+ }
+
+ // 비밀번호 해싱 (bcrypt 대신 사용)
+ hashPassword(password: string): string {
+ const salt = crypto.randomBytes(16).toString('hex');
+ const hash = crypto.pbkdf2Sync(password, salt, 10000, 64, 'sha512').toString('hex');
+ return salt + ':' + hash;
+ }
+
+ verifyPassword(password: string, hashedPassword: string): boolean {
+ const [salt, hash] = hashedPassword.split(':');
+ const verifyHash = crypto.pbkdf2Sync(password, salt, 10000, 64, 'sha512').toString('hex');
+ return hash === verifyHash;
+ }
+
+ // 랜덤 토큰 생성
+ generateToken(length: number = 32): string {
+ return crypto.randomBytes(length).toString('hex');
+ }
+
+ // HMAC 서명 생성
+ createHmac(data: string, secret: string): string {
+ return crypto.createHmac('sha256', secret).update(data).digest('hex');
+ }
+
+ // HMAC 검증
+ verifyHmac(data: string, signature: string, secret: string): boolean {
+ const expectedSignature = this.createHmac(data, secret);
+ return crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(expectedSignature));
+ }
+}
+
+export const encryptionService = new EncryptionService();
diff --git a/backend-node/src/services/mailAccountFileService.ts b/backend-node/src/services/mailAccountFileService.ts
new file mode 100644
index 00000000..d81d2c37
--- /dev/null
+++ b/backend-node/src/services/mailAccountFileService.ts
@@ -0,0 +1,159 @@
+import fs from 'fs/promises';
+import path from 'path';
+import { encryptionService } from './encryptionService';
+
+export interface MailAccount {
+ id: string;
+ name: string;
+ email: string;
+ smtpHost: string;
+ smtpPort: number;
+ smtpSecure: boolean;
+ smtpUsername: string;
+ smtpPassword: string; // 암호화된 비밀번호
+ dailyLimit: number;
+ status: 'active' | 'inactive' | 'suspended';
+ createdAt: string;
+ updatedAt: string;
+}
+
+class MailAccountFileService {
+ private accountsDir: string;
+
+ constructor() {
+ this.accountsDir = path.join(process.cwd(), 'uploads', 'mail-accounts');
+ this.ensureDirectoryExists();
+ }
+
+ private async ensureDirectoryExists() {
+ try {
+ await fs.access(this.accountsDir);
+ } catch {
+ await fs.mkdir(this.accountsDir, { recursive: true });
+ }
+ }
+
+ private getAccountPath(id: string): string {
+ return path.join(this.accountsDir, `${id}.json`);
+ }
+
+ async getAllAccounts(): Promise
+ {/* 헤더 */}
+
+
+
+
+
+ {/* 안내 정보 */}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 빈 상태 */}
+
+
+
+ 데이터 관리
+시스템 데이터를 관리합니다
+아직 등록된 데이터가 없습니다
+ ++ 💡 데이터를 추가하여 시스템을 사용해보세요! +
+-
+
- + ✓ + 기능 설명 1 + +
- + ✓ + 기능 설명 2 + +
';
+
+ template.components.forEach((component: any) => {
+ switch (component.type) {
+ case 'text':
+ let content = component.content || '';
+ if (variables) {
+ content = this.replaceVariables(content, variables);
+ }
+ html += `
`;
+ break;
+
+ case 'spacer':
+ html += ``;
+ break;
+ }
+ });
+
+ html += '
';
+ return html;
+ }
+
+ /**
+ * 변수 치환
+ */
+ private replaceVariables(text: string, variables?: Record${content}
`;
+ break;
+
+ case 'button':
+ let buttonText = component.text || 'Button';
+ if (variables) {
+ buttonText = this.replaceVariables(buttonText, variables);
+ }
+ html += `
+ ${buttonText}
+ `;
+ break;
+
+ case 'image':
+ html += `';
+
+ components.forEach(comp => {
+ const styles = Object.entries(comp.styles || {})
+ .map(([key, value]) => `${this.camelToKebab(key)}: ${value}`)
+ .join('; ');
+
+ switch (comp.type) {
+ case 'text':
+ html += `
';
+ return html;
+ }
+
+ /**
+ * camelCase를 kebab-case로 변환
+ */
+ private camelToKebab(str: string): string {
+ return str.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
+ }
+
+ /**
+ * 카테고리별 템플릿 조회
+ */
+ async getTemplatesByCategory(category: string): Promise${comp.content || ''}
`;
+ break;
+ case 'button':
+ html += ``;
+ break;
+ case 'image':
+ html += `
+ 
+
`;
+ break;
+ case 'spacer':
+ html += ``;
+ break;
+ }
+ });
+
+ html += '
+ setIsModalOpen(false)}
+ onSave={handleSaveAccount}
+ account={selectedAccount}
+ mode={modalMode}
+ />
+
+ setIsDeleteModalOpen(false)}
+ onConfirm={handleDeleteAccount}
+ title="메일 계정 삭제"
+ message="이 메일 계정을 삭제하시겠습니까?"
+ itemName={selectedAccount?.name}
+ />
+
+ );
+}
diff --git a/frontend/app/(main)/admin/mail/dashboard/page.tsx b/frontend/app/(main)/admin/mail/dashboard/page.tsx
new file mode 100644
index 00000000..1fa6a728
--- /dev/null
+++ b/frontend/app/(main)/admin/mail/dashboard/page.tsx
@@ -0,0 +1,283 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import {
+ Mail,
+ Send,
+ Inbox,
+ FileText,
+ RefreshCw,
+ TrendingUp,
+ Users,
+ Calendar,
+ Clock
+} from "lucide-react";
+
+interface DashboardStats {
+ totalAccounts: number;
+ totalTemplates: number;
+ sentToday: number;
+ receivedToday: number;
+ sentThisMonth: number;
+ successRate: number;
+}
+
+export default function MailDashboardPage() {
+ const [stats, setStats] = useState
+ {/* 페이지 제목 */}
+
+
+
+
+ ) : (
+
+
+
+
+ )}
+
+ {/* 안내 정보 */}
+
+
+
+
+
+
+
+
+
+
+ {/* 모달들 */}
+
+
+
+ {/* 메인 컨텐츠 */}
+ {loading ? (
+
+
+ 메일 계정 관리
+SMTP 메일 계정을 관리하고 발송 통계를 확인합니다
+
+
+
+
+ + 💡 SMTP 계정을 등록하여 시스템에서 메일을 발송할 수 있어요! +
+-
+
- + ✓ + Gmail, Naver, 자체 SMTP 서버 지원 + +
- + ✓ + 비밀번호는 암호화되어 안전하게 저장됩니다 + +
- + ✓ + 일일 발송 제한 설정 가능 + +
+
+ );
+}
+
diff --git a/frontend/app/(main)/admin/mail/receive/page.tsx b/frontend/app/(main)/admin/mail/receive/page.tsx
new file mode 100644
index 00000000..9412e662
--- /dev/null
+++ b/frontend/app/(main)/admin/mail/receive/page.tsx
@@ -0,0 +1,104 @@
+"use client";
+
+import React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Inbox, Mail, Clock, AlertCircle, RefreshCw } from "lucide-react";
+
+export default function MailReceivePage() {
+ return (
+
+ {/* 페이지 제목 */}
+
+
+ 빠른 액세스
+
+
+
+
+
+
+ {/* 안내 정보 */}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 통계 카드 */}
+
+
+
+ 메일 관리 대시보드
+메일 시스템의 전체 현황을 확인합니다
+
+ {statCards.map((stat, index) => (
+
+
+
+
+ ))}
+
+
+ {/* 이번 달 통계 */}
+
+
+
+
+ {stat.title}
+{stat.value}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 빠른 액세스 */}
+
+
+
+ 총 발송 건수
+
+ {stats.sentThisMonth}건
+
+
+
+ 성공률
+
+ {stats.successRate}%
+
+
+
+
+
+
+
+
+
+
+ 최근 활동이 없습니다
++ 💡 메일 관리 시스템의 주요 기능을 확인하세요! +
+-
+
- + ✓ + SMTP 계정을 등록하여 메일 발송 + +
- + ✓ + 드래그 앤 드롭으로 템플릿 디자인 + +
- + ✓ + 동적 변수와 SQL 쿼리 연동 + +
- + ✓ + 발송 통계 및 이력 관리 + +
+
+ );
+}
diff --git a/frontend/app/(main)/admin/mail/send/page.tsx b/frontend/app/(main)/admin/mail/send/page.tsx
new file mode 100644
index 00000000..10a9853c
--- /dev/null
+++ b/frontend/app/(main)/admin/mail/send/page.tsx
@@ -0,0 +1,392 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Send, Mail, Eye, Plus, X, Loader2, CheckCircle } from "lucide-react";
+import {
+ MailAccount,
+ MailTemplate,
+ getMailAccounts,
+ getMailTemplates,
+ sendMail,
+ extractTemplateVariables,
+ renderTemplateToHtml,
+} from "@/lib/api/mail";
+
+export default function MailSendPage() {
+ const [accounts, setAccounts] = useState
+ {/* 페이지 제목 */}
+
+
+
+
+
+
+ {/* 빈 상태 */}
+
+
+
+ {/* 안내 정보 */}
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 메일 목록 미리보기 */}
+
+
+
+ 메일 수신함
+받은 메일을 확인하고 관리합니다
+
+
+ + 메일 수신 기능 준비 중 +
++ IMAP/POP3 기반 메일 수신 기능이 곧 추가될 예정입니다. +
+ + {/* 예상 레이아웃 미리보기 */} +
+ {[1, 2, 3].map((i) => (
+
+
+
+
+ ))}
+
+
+
+
+
+
+ + 💡 메일 수신함에 추가될 기능들: +
+-
+
- + ✓ + IMAP/POP3 프로토콜을 통한 메일 수신 + +
- + ✓ + 받은 메일 목록 조회 및 검색 + +
- + ✓ + 메일 읽음/읽지않음 상태 관리 + +
- + ✓ + 첨부파일 다운로드 + +
- + ✓ + 메일 필터링 및 정렬 + +
+
+ );
+ }
+
+ return (
+
+
+ );
+}
diff --git a/frontend/app/(main)/admin/mail/templates/page.tsx b/frontend/app/(main)/admin/mail/templates/page.tsx
new file mode 100644
index 00000000..6814af06
--- /dev/null
+++ b/frontend/app/(main)/admin/mail/templates/page.tsx
@@ -0,0 +1,286 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Plus, FileText, Loader2, RefreshCw, Search } from "lucide-react";
+import {
+ MailTemplate,
+ getMailTemplates,
+ createMailTemplate,
+ updateMailTemplate,
+ deleteMailTemplate,
+ CreateMailTemplateDto,
+ UpdateMailTemplateDto,
+} from "@/lib/api/mail";
+import MailTemplateCard from "@/components/mail/MailTemplateCard";
+import MailTemplatePreviewModal from "@/components/mail/MailTemplatePreviewModal";
+import MailTemplateEditorModal from "@/components/mail/MailTemplateEditorModal";
+import ConfirmDeleteModal from "@/components/mail/ConfirmDeleteModal";
+
+export default function MailTemplatesPage() {
+ const [templates, setTemplates] = useState
+ {/* 페이지 제목 */}
+
+
+
+
+ {/* 메인 폼 */}
+ 메일 발송
+템플릿을 선택하여 메일을 발송합니다
+
+ {/* 왼쪽: 발송 설정 */}
+
+
+
+
+
+
+
+
+ {/* 발송 계정 선택 */}
+
+
+
+ {/* 발송 버튼 */}
+
+
+
+
+ )}
+
+
+ {/* 오른쪽: 미리보기 */}
+
+
+
+
+
+ {/* 템플릿 선택 */}
+
+
+
+
+
+ {/* 메일 제목 */}
+
+
+ setSubject(e.target.value)}
+ placeholder="예: 환영합니다!"
+ className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
+ />
+
+
+ {/* 수신자 */}
+
+
+
+
+ {/* 템플릿 변수 */}
+ {templateVariables.length > 0 && (
+
+ {recipients.map((email, index) => (
+
+
+ updateRecipient(index, e.target.value)}
+ placeholder="example@email.com"
+ className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
+ />
+ {recipients.length > 1 && (
+
+ )}
+
+ ))}
+
+
+
+
+ )}
+
+ {templateVariables.map((varName) => (
+
+
+
+
+ setVariables({ ...variables, [varName]: e.target.value })
+ }
+ placeholder={`{${varName}}`}
+ className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-orange-500 focus:border-orange-500"
+ />
+
+ ))}
+
+
+
+
+
+ {/* 발송 결과 */}
+ {sendResult && (
+
+ {sendResult.success ? (
+
+ + {sendResult.message} +
+
+
+
+
+
+
+
+ {showPreview && previewHtml ? (
+
+
+
+
+
+ ) : (
+ 제목: {subject}
+
+
+
+ )}
+
+ 템플릿을 선택하고
+
+ 미리보기 버튼을 클릭하세요
+
+ setIsEditorOpen(false)}
+ onSave={handleSaveTemplate}
+ template={selectedTemplate}
+ mode={editorMode}
+ />
+
+ setIsPreviewOpen(false)}
+ template={selectedTemplate}
+ />
+
+ setIsDeleteModalOpen(false)}
+ onConfirm={handleDeleteTemplate}
+ title="템플릿 삭제"
+ message="이 템플릿을 삭제하시겠습니까?"
+ itemName={selectedTemplate?.name}
+ />
+
+ );
+}
diff --git a/frontend/components/admin/UserToolbar.tsx b/frontend/components/admin/UserToolbar.tsx
index 4c0709a5..e4e7439a 100644
--- a/frontend/components/admin/UserToolbar.tsx
+++ b/frontend/components/admin/UserToolbar.tsx
@@ -116,14 +116,6 @@ export function UserToolbar({
{/* 고급 검색 필드들 */}
+ {/* 페이지 제목 */}
+
+
+
+
+
+ {/* 메인 컨텐츠 */}
+ {loading ? (
+
+
+
+
+ ) : filteredTemplates.length === 0 ? (
+
+
+
+
+ ) : (
+
+
+
+
+
+
+
+
+
+
+ {/* 모달들 */}
+
+
+
+ {/* 검색 및 필터 */}
+
+
+ 메일 템플릿 관리
+드래그 앤 드롭으로 메일 템플릿을 만들고 관리합니다
+
+
+
+
+
+
+
+
+
+ + {templates.length === 0 + ? '아직 생성된 템플릿이 없습니다' + : '검색 결과가 없습니다'} +
+ {templates.length === 0 && ( + + )} +
+ {filteredTemplates.map((template) => (
+
+ )}
+
+ {/* 안내 정보 */}
+ + 💡 드래그 앤 드롭으로 손쉽게 메일 템플릿을 만들 수 있어요! +
+-
+
- + ✓ + 텍스트, 버튼, 이미지, 여백 컴포넌트 지원 + +
- + ✓ + 실시간 미리보기로 즉시 확인 가능 + +
- + ✓ + 동적 변수 지원 (예: {"{customer_name}"}) + +
- {/*
-
- handleAdvancedSearchChange("search_sabun", e.target.value)}
- />
-
*/}
diff --git a/frontend/components/animations/AnimatedComponent.tsx b/frontend/components/animations/AnimatedComponent.tsx
new file mode 100644
index 00000000..6f2715a0
--- /dev/null
+++ b/frontend/components/animations/AnimatedComponent.tsx
@@ -0,0 +1,154 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { animations, animationCombos, AnimationConfig } from "@/lib/animations/animations";
+
+interface AnimatedComponentProps {
+ children: React.ReactNode;
+ animation?: keyof typeof animations;
+ combo?: keyof typeof animationCombos;
+ config?: AnimationConfig;
+ trigger?: "mount" | "hover" | "click" | "visible";
+ delay?: number;
+ className?: string;
+ style?: React.CSSProperties;
+}
+
+export const AnimatedComponent: React.FC = ({
+ children,
+ animation = "fadeIn",
+ combo,
+ config = {},
+ trigger = "mount",
+ delay = 0,
+ className = "",
+ style = {},
+}) => {
+ const [isVisible, setIsVisible] = useState(false);
+ const [isAnimating, setIsAnimating] = useState(false);
+
+ useEffect(() => {
+ if (trigger === "mount") {
+ const timer = setTimeout(() => {
+ setIsVisible(true);
+ setIsAnimating(true);
+ }, delay);
+
+ return () => clearTimeout(timer);
+ }
+ }, [trigger, delay]);
+
+ const handleMouseEnter = () => {
+ if (trigger === "hover") {
+ setIsAnimating(true);
+ }
+ };
+
+ const handleMouseLeave = () => {
+ if (trigger === "hover") {
+ setIsAnimating(false);
+ }
+ };
+
+ const handleClick = () => {
+ if (trigger === "click") {
+ setIsAnimating(true);
+ setTimeout(() => setIsAnimating(false), config.duration || 300);
+ }
+ };
+
+ const getAnimationStyle = () => {
+ if (combo) {
+ return animationCombos[combo]();
+ }
+
+ if (animation) {
+ return animations[animation](config);
+ }
+
+ return {};
+ };
+
+ const animationStyle = isAnimating ? getAnimationStyle() : {};
+
+ return (
+ > = (props) => (
+ > = (props) => (
+ > = (props) => (
+ > = (props) => (
+ > = (props) => (
+ > = (props) => (
+ > = (props) => (
+ > = (props) => (
+ > = (props) => (
+ & { direction?: "left" | "right" | "up" | "down" }> = ({ direction, ...props }) => (
+ > = (props) => (
+ > = (props) => (
+ > = (props) => (
+ > = (props) => (
+ > = (props) => (
+ > = (props) => (
+ = ({
- onClose,
- initialData,
- showBackButton = false,
-}) => {
- // 🔄 상태 관리
- const [state, setState] = useState(() => ({
+const initialState: DataConnectionState = {
connectionType: "data_save",
currentStep: 1,
fieldMappings: [],
@@ -52,762 +23,87 @@ const DataConnectionDesigner: React.FC = ({
estimatedRows: 0,
actionType: "INSERT",
},
- // 제어 실행 조건 초기값
- controlConditions: [],
-
- // 액션 그룹 초기값 (멀티 액션)
- actionGroups: [
- {
- id: "group_1",
- name: "기본 액션 그룹",
- logicalOperator: "AND" as const,
- actions: [
- {
- id: "action_1",
- name: "액션 1",
- actionType: "insert" as const,
- conditions: [],
- fieldMappings: [],
- isEnabled: true,
- },
- ],
- isEnabled: true,
- },
- ],
- groupsLogicalOperator: "AND" as "AND" | "OR",
-
- // 기존 호환성 필드들 (deprecated)
- actionType: "insert",
- actionConditions: [],
- actionFieldMappings: [],
isLoading: false,
validationErrors: [],
+};
- // 컬럼 정보 초기화
- fromColumns: [],
- toColumns: [],
- ...initialData,
- }));
-
- // 🔧 수정 모드 감지 (initialData에 diagramId가 있으면 수정 모드)
- const diagramId = initialData?.diagramId;
-
- // 🔄 초기 데이터 로드
- useEffect(() => {
- if (initialData && Object.keys(initialData).length > 1) {
- console.log("🔄 초기 데이터 로드:", initialData);
-
- // 로드된 데이터로 state 업데이트
- setState((prev) => ({
- ...prev,
- connectionType: initialData.connectionType || prev.connectionType,
-
- // 🔧 관계 정보 로드
- relationshipName: initialData.relationshipName || prev.relationshipName,
- description: initialData.description || prev.description,
- groupsLogicalOperator: initialData.groupsLogicalOperator || prev.groupsLogicalOperator,
-
- fromConnection: initialData.fromConnection || prev.fromConnection,
- toConnection: initialData.toConnection || prev.toConnection,
- fromTable: initialData.fromTable || prev.fromTable,
- toTable: initialData.toTable || prev.toTable,
- controlConditions: initialData.controlConditions || prev.controlConditions,
- fieldMappings: initialData.fieldMappings || prev.fieldMappings,
-
- // 🔧 외부호출 설정 로드
- externalCallConfig: initialData.externalCallConfig || prev.externalCallConfig,
-
- // 🔧 액션 그룹 데이터 로드 (기존 호환성 포함)
- actionGroups:
- initialData.actionGroups ||
- // 기존 단일 액션 데이터를 그룹으로 변환
- (initialData.actionType || initialData.actionConditions
- ? [
- {
- id: "group_1",
- name: "기본 액션 그룹",
- logicalOperator: "AND" as const,
- actions: [
- {
- id: "action_1",
- name: "액션 1",
- actionType: initialData.actionType || ("insert" as const),
- conditions: initialData.actionConditions || [],
- fieldMappings: initialData.actionFieldMappings || [],
- isEnabled: true,
- },
- ],
- isEnabled: true,
- },
- ]
- : prev.actionGroups),
-
- // 기존 호환성 필드들
- actionType: initialData.actionType || prev.actionType,
- actionConditions: initialData.actionConditions || prev.actionConditions,
- actionFieldMappings: initialData.actionFieldMappings || prev.actionFieldMappings,
-
- currentStep: initialData.fromConnection && initialData.toConnection ? 4 : 1, // 연결 정보가 있으면 4단계부터 시작
- }));
-
- console.log("✅ 초기 데이터 로드 완료");
- }
- }, [initialData]);
-
- // 🎯 액션 핸들러들
- const actions: DataConnectionActions = {
- // 연결 타입 설정
- setConnectionType: useCallback((type: "data_save" | "external_call") => {
- console.log("🔄 [DataConnectionDesigner] setConnectionType 호출됨:", type);
- setState((prev) => ({
- ...prev,
- connectionType: type,
- // 타입 변경 시 상태 초기화
- currentStep: 1,
- fromConnection: undefined,
- toConnection: undefined,
- fromTable: undefined,
- toTable: undefined,
- fieldMappings: [],
- validationErrors: [],
- }));
- toast.success(`연결 타입이 ${type === "data_save" ? "데이터 저장" : "외부 호출"}로 변경되었습니다.`);
- }, []),
-
- // 🔧 관계 정보 설정
- setRelationshipName: useCallback((name: string) => {
- setState((prev) => ({
- ...prev,
- relationshipName: name,
- }));
- }, []),
-
- setDescription: useCallback((description: string) => {
- setState((prev) => ({
- ...prev,
- description: description,
- }));
- }, []),
-
- setGroupsLogicalOperator: useCallback((operator: "AND" | "OR") => {
- setState((prev) => ({ ...prev, groupsLogicalOperator: operator }));
- console.log("🔄 그룹 간 논리 연산자 변경:", operator);
- }, []),
-
- // 단계 이동
- goToStep: useCallback((step: 1 | 2 | 3 | 4) => {
- setState((prev) => ({ ...prev, currentStep: step }));
- }, []),
-
- // 연결 선택
- selectConnection: useCallback((type: "from" | "to", connection: Connection) => {
- setState((prev) => ({
- ...prev,
- [type === "from" ? "fromConnection" : "toConnection"]: connection,
- // 연결 변경 시 테이블과 매핑 초기화
- [type === "from" ? "fromTable" : "toTable"]: undefined,
- fieldMappings: [],
- }));
- toast.success(`${type === "from" ? "소스" : "대상"} 연결이 선택되었습니다: ${connection.name}`);
- }, []),
-
- // 테이블 선택
- selectTable: useCallback((type: "from" | "to", table: TableInfo) => {
- setState((prev) => ({
- ...prev,
- [type === "from" ? "fromTable" : "toTable"]: table,
- // 테이블 변경 시 매핑과 컬럼 정보 초기화
- fieldMappings: [],
- fromColumns: type === "from" ? [] : prev.fromColumns,
- toColumns: type === "to" ? [] : prev.toColumns,
- }));
- toast.success(
- `${type === "from" ? "소스" : "대상"} 테이블이 선택되었습니다: ${table.displayName || table.tableName}`,
- );
- }, []),
-
- // 컬럼 정보 로드 (중앙 관리)
- loadColumns: useCallback(async () => {
- if (!state.fromConnection || !state.toConnection || !state.fromTable || !state.toTable) {
- console.log("❌ 컬럼 로드: 필수 정보 누락");
- return;
- }
-
- // 이미 로드된 경우 스킵 (배열 길이로 확인)
- if (state.fromColumns && state.toColumns && state.fromColumns.length > 0 && state.toColumns.length > 0) {
- console.log("✅ 컬럼 정보 이미 로드됨, 스킵", {
- fromColumns: state.fromColumns.length,
- toColumns: state.toColumns.length,
- });
- return;
- }
-
- console.log("🔄 중앙 컬럼 로드 시작:", {
- from: `${state.fromConnection.id}/${state.fromTable.tableName}`,
- to: `${state.toConnection.id}/${state.toTable.tableName}`,
- });
-
- setState((prev) => ({
- ...prev,
- isLoading: true,
- fromColumns: [],
- toColumns: [],
- }));
-
- try {
- const [fromCols, toCols] = await Promise.all([
- getColumnsFromConnection(state.fromConnection.id, state.fromTable.tableName),
- getColumnsFromConnection(state.toConnection.id, state.toTable.tableName),
- ]);
-
- console.log("✅ 중앙 컬럼 로드 완료:", {
- fromColumns: fromCols.length,
- toColumns: toCols.length,
- });
-
- setState((prev) => ({
- ...prev,
- fromColumns: Array.isArray(fromCols) ? fromCols : [],
- toColumns: Array.isArray(toCols) ? toCols : [],
- isLoading: false,
- }));
- } catch (error) {
- console.error("❌ 중앙 컬럼 로드 실패:", error);
- setState((prev) => ({ ...prev, isLoading: false }));
- toast.error("컬럼 정보를 불러오는데 실패했습니다.");
- }
- }, [state.fromConnection, state.toConnection, state.fromTable, state.toTable, state.fromColumns, state.toColumns]),
-
- // 필드 매핑 생성 (호환성용 - 실제로는 각 액션에서 직접 관리)
- createMapping: useCallback((fromField: ColumnInfo, toField: ColumnInfo) => {
- const newMapping: FieldMapping = {
- id: `${fromField.columnName}_to_${toField.columnName}_${Date.now()}`,
- fromField,
- toField,
- isValid: true,
- validationMessage: undefined,
- };
-
- setState((prev) => ({
- ...prev,
- fieldMappings: [...prev.fieldMappings, newMapping],
- }));
-
- console.log("🔗 전역 매핑 생성 (호환성):", {
- newMapping,
- fieldName: `${fromField.columnName} → ${toField.columnName}`,
- });
-
- toast.success(`매핑이 생성되었습니다: ${fromField.columnName} → ${toField.columnName}`);
- }, []),
-
- // 필드 매핑 업데이트
- updateMapping: useCallback((mappingId: string, updates: Partial) => {
- setState((prev) => ({
- ...prev,
- fieldMappings: prev.fieldMappings.map((mapping) =>
- mapping.id === mappingId ? { ...mapping, ...updates } : mapping,
- ),
- }));
- }, []),
-
- // 필드 매핑 삭제 (호환성용 - 실제로는 각 액션에서 직접 관리)
- deleteMapping: useCallback((mappingId: string) => {
- setState((prev) => ({
- ...prev,
- fieldMappings: prev.fieldMappings.filter((mapping) => mapping.id !== mappingId),
- }));
-
- console.log("🗑️ 전역 매핑 삭제 (호환성):", { mappingId });
- toast.success("매핑이 삭제되었습니다.");
- }, []),
-
- // 매핑 검증
- validateMappings: useCallback(async (): Promise => {
- setState((prev) => ({ ...prev, isLoading: true }));
-
- try {
- // TODO: 실제 검증 로직 구현
- const result: ValidationResult = {
- isValid: true,
- errors: [],
- warnings: [],
- };
-
- setState((prev) => ({
- ...prev,
- validationErrors: result.errors,
- isLoading: false,
- }));
-
- return result;
- } catch (error) {
- setState((prev) => ({ ...prev, isLoading: false }));
- throw error;
- }
- }, []),
-
- // 제어 조건 관리 (전체 실행 조건)
- addControlCondition: useCallback(() => {
- setState((prev) => ({
- ...prev,
- controlConditions: [
- ...prev.controlConditions,
- {
- id: Date.now().toString(),
- type: "condition",
- field: "",
- operator: "=",
- value: "",
- dataType: "string",
- },
- ],
- }));
- }, []),
-
- updateControlCondition: useCallback((index: number, condition: any) => {
- setState((prev) => ({
- ...prev,
- controlConditions: prev.controlConditions.map((cond, i) => (i === index ? { ...cond, ...condition } : cond)),
- }));
- }, []),
-
- deleteControlCondition: useCallback((index: number) => {
- setState((prev) => ({
- ...prev,
- controlConditions: prev.controlConditions.filter((_, i) => i !== index),
- }));
- toast.success("제어 조건이 삭제되었습니다.");
- }, []),
-
- // 외부호출 설정 업데이트
- updateExternalCallConfig: useCallback((config: any) => {
- console.log("🔄 외부호출 설정 업데이트:", config);
- setState((prev) => ({
- ...prev,
- externalCallConfig: config,
- }));
- }, []),
-
- // 액션 설정 관리
- setActionType: useCallback((type: "insert" | "update" | "delete" | "upsert") => {
- setState((prev) => ({
- ...prev,
- actionType: type,
- // INSERT가 아닌 경우 조건 초기화
- actionConditions: type === "insert" ? [] : prev.actionConditions,
- }));
- toast.success(`액션 타입이 ${type.toUpperCase()}로 변경되었습니다.`);
- }, []),
-
- addActionCondition: useCallback(() => {
- setState((prev) => ({
- ...prev,
- actionConditions: [
- ...prev.actionConditions,
- {
- id: Date.now().toString(),
- type: "condition",
- field: "",
- operator: "=",
- value: "",
- dataType: "string",
- },
- ],
- }));
- }, []),
-
- updateActionCondition: useCallback((index: number, condition: any) => {
- setState((prev) => ({
- ...prev,
- actionConditions: prev.actionConditions.map((cond, i) => (i === index ? { ...cond, ...condition } : cond)),
- }));
- }, []),
-
- // 🔧 액션 조건 배열 전체 업데이트 (ActionConditionBuilder용)
- setActionConditions: useCallback((conditions: any[]) => {
- setState((prev) => ({
- ...prev,
- actionConditions: conditions,
- }));
- }, []),
-
- deleteActionCondition: useCallback((index: number) => {
- setState((prev) => ({
- ...prev,
- actionConditions: prev.actionConditions.filter((_, i) => i !== index),
- }));
- toast.success("조건이 삭제되었습니다.");
- }, []),
-
- // 🎯 액션 그룹 관리 (멀티 액션)
- addActionGroup: useCallback(() => {
- const newGroupId = `group_${Date.now()}`;
- setState((prev) => ({
- ...prev,
- actionGroups: [
- ...prev.actionGroups,
- {
- id: newGroupId,
- name: `액션 그룹 ${prev.actionGroups.length + 1}`,
- logicalOperator: "AND" as const,
- actions: [
- {
- id: `action_${Date.now()}`,
- name: "액션 1",
- actionType: "insert" as const,
- conditions: [],
- fieldMappings: [],
- isEnabled: true,
- },
- ],
- isEnabled: true,
- },
- ],
- }));
- toast.success("새 액션 그룹이 추가되었습니다.");
- }, []),
-
- updateActionGroup: useCallback((groupId: string, updates: Partial) => {
- setState((prev) => ({
- ...prev,
- actionGroups: prev.actionGroups.map((group) => (group.id === groupId ? { ...group, ...updates } : group)),
- }));
- }, []),
-
- deleteActionGroup: useCallback((groupId: string) => {
- setState((prev) => ({
- ...prev,
- actionGroups: prev.actionGroups.filter((group) => group.id !== groupId),
- }));
- toast.success("액션 그룹이 삭제되었습니다.");
- }, []),
-
- addActionToGroup: useCallback((groupId: string) => {
- const newActionId = `action_${Date.now()}`;
- setState((prev) => ({
- ...prev,
- actionGroups: prev.actionGroups.map((group) =>
- group.id === groupId
- ? {
- ...group,
- actions: [
- ...group.actions,
- {
- id: newActionId,
- name: `액션 ${group.actions.length + 1}`,
- actionType: "insert" as const,
- conditions: [],
- fieldMappings: [],
- isEnabled: true,
- },
- ],
- }
- : group,
- ),
- }));
- toast.success("새 액션이 추가되었습니다.");
- }, []),
-
- updateActionInGroup: useCallback((groupId: string, actionId: string, updates: Partial) => {
- setState((prev) => ({
- ...prev,
- actionGroups: prev.actionGroups.map((group) =>
- group.id === groupId
- ? {
- ...group,
- actions: group.actions.map((action) => (action.id === actionId ? { ...action, ...updates } : action)),
- }
- : group,
- ),
- }));
- }, []),
-
- deleteActionFromGroup: useCallback((groupId: string, actionId: string) => {
- setState((prev) => ({
- ...prev,
- actionGroups: prev.actionGroups.map((group) =>
- group.id === groupId
- ? {
- ...group,
- actions: group.actions.filter((action) => action.id !== actionId),
- }
- : group,
- ),
- }));
- toast.success("액션이 삭제되었습니다.");
- }, []),
-
- // 매핑 저장 (직접 저장)
- saveMappings: useCallback(async () => {
- // 관계명과 설명이 없으면 저장할 수 없음
- if (!state.relationshipName?.trim()) {
- toast.error("관계 이름을 입력해주세요.");
- actions.goToStep(1); // 첫 번째 단계로 이동
- return;
- }
-
- // 외부호출인 경우 API URL만 확인 (테이블 검증 제외)
- if (state.connectionType === "external_call") {
- if (!state.externalCallConfig?.restApiSettings?.apiUrl) {
- toast.error("API URL을 입력해주세요.");
- return;
- }
- // 외부호출은 테이블 정보 검증 건너뛰기
- }
-
- // 중복 체크 (수정 모드가 아닌 경우에만)
- if (!diagramId) {
- try {
- const duplicateCheck = await checkRelationshipNameDuplicate(state.relationshipName, diagramId);
- if (duplicateCheck.isDuplicate) {
- toast.error(`"${state.relationshipName}" 이름이 이미 사용 중입니다. 다른 이름을 사용해주세요.`);
- actions.goToStep(1); // 첫 번째 단계로 이동
- return;
- }
- } catch (error) {
- console.error("중복 체크 실패:", error);
- toast.error("관계명 중복 체크 중 오류가 발생했습니다.");
- return;
- }
- }
-
- setState((prev) => ({ ...prev, isLoading: true }));
-
- try {
- // 실제 저장 로직 구현 - connectionType에 따라 필요한 설정만 포함
- let saveData: any = {
- relationshipName: state.relationshipName,
- description: state.description,
- connectionType: state.connectionType,
- };
-
- if (state.connectionType === "external_call") {
- // 외부호출 타입인 경우: 외부호출 설정만 포함
- console.log("💾 외부호출 타입 저장 - 외부호출 설정만 포함");
- saveData = {
- ...saveData,
- // 외부호출 관련 설정만 포함
- externalCallConfig: state.externalCallConfig,
- actionType: "external_call",
- // 데이터 저장 관련 설정은 제외 (null/빈 배열로 설정)
- fromConnection: null,
- toConnection: null,
- fromTable: null,
- toTable: null,
- actionGroups: [],
- controlConditions: [],
- actionConditions: [],
- fieldMappings: [],
- };
- } else if (state.connectionType === "data_save") {
- // 데이터 저장 타입인 경우: 데이터 저장 설정만 포함
- console.log("💾 데이터 저장 타입 저장 - 데이터 저장 설정만 포함");
- saveData = {
- ...saveData,
- // 데이터 저장 관련 설정만 포함
- fromConnection: state.fromConnection,
- toConnection: state.toConnection,
- fromTable: state.fromTable,
- toTable: state.toTable,
- actionGroups: state.actionGroups,
- groupsLogicalOperator: state.groupsLogicalOperator,
- controlConditions: state.controlConditions,
- // 기존 호환성을 위한 필드들 (첫 번째 액션 그룹의 첫 번째 액션에서 추출)
- actionType: state.actionGroups[0]?.actions[0]?.actionType || state.actionType || "insert",
- actionConditions: state.actionGroups[0]?.actions[0]?.conditions || state.actionConditions || [],
- fieldMappings: state.actionGroups[0]?.actions[0]?.fieldMappings || state.fieldMappings || [],
- // 외부호출 관련 설정은 제외 (null로 설정)
- externalCallConfig: null,
- };
- }
-
- console.log("💾 직접 저장 시작:", { saveData, diagramId, isEdit: !!diagramId });
-
- // 데이터 저장 타입인 경우 기존 외부호출 설정 정리
- if (state.connectionType === "data_save" && diagramId) {
- console.log("🧹 데이터 저장 타입으로 변경 - 기존 외부호출 설정 정리");
- try {
- const { ExternalCallConfigAPI } = await import("@/lib/api/externalCallConfig");
-
- // 기존 외부호출 설정이 있는지 확인하고 삭제 또는 비활성화
- const existingConfigs = await ExternalCallConfigAPI.getConfigs({
- company_code: "*",
- is_active: "Y",
- });
-
- const existingConfig = existingConfigs.data?.find(
- (config: any) => config.config_name === (state.relationshipName || "외부호출 설정")
- );
-
- if (existingConfig) {
- console.log("🗑️ 기존 외부호출 설정 비활성화:", existingConfig.id);
- // 설정을 비활성화 (삭제하지 않고 is_active를 'N'으로 변경)
- await ExternalCallConfigAPI.updateConfig(existingConfig.id, {
- ...existingConfig,
- is_active: "N",
- updated_at: new Date().toISOString(),
- });
- }
- } catch (cleanupError) {
- console.warn("⚠️ 외부호출 설정 정리 실패 (무시하고 계속):", cleanupError);
- }
- }
-
- // 외부호출인 경우에만 external-call-configs에 설정 저장
- if (state.connectionType === "external_call" && state.externalCallConfig) {
- try {
- const { ExternalCallConfigAPI } = await import("@/lib/api/externalCallConfig");
-
- const configData = {
- config_name: state.relationshipName || "외부호출 설정",
- call_type: "rest-api",
- api_type: "generic",
- config_data: state.externalCallConfig.restApiSettings,
- description: state.description || "",
- company_code: "*", // 기본값
- };
-
- let configResult;
-
- if (diagramId) {
- // 수정 모드: 기존 설정이 있는지 확인하고 업데이트 또는 생성
- console.log("🔄 수정 모드 - 외부호출 설정 처리");
-
- try {
- // 먼저 기존 설정 조회 시도
- const existingConfigs = await ExternalCallConfigAPI.getConfigs({
- company_code: "*",
- is_active: "Y",
- });
-
- const existingConfig = existingConfigs.data?.find(
- (config: any) => config.config_name === (state.relationshipName || "외부호출 설정")
- );
-
- if (existingConfig) {
- // 기존 설정 업데이트
- console.log("📝 기존 외부호출 설정 업데이트:", existingConfig.id);
- configResult = await ExternalCallConfigAPI.updateConfig(existingConfig.id, configData);
- } else {
- // 기존 설정이 없으면 새로 생성
- console.log("🆕 새 외부호출 설정 생성 (수정 모드)");
- configResult = await ExternalCallConfigAPI.createConfig(configData);
- }
- } catch (updateError) {
- // 중복 생성 오류인 경우 무시하고 계속 진행
- if (updateError.message && updateError.message.includes("이미 존재합니다")) {
- console.log("⚠️ 외부호출 설정이 이미 존재함 - 기존 설정 사용");
- configResult = { success: true, message: "기존 외부호출 설정 사용" };
- } else {
- console.warn("⚠️ 외부호출 설정 처리 실패:", updateError);
- throw updateError;
- }
- }
- } else {
- // 신규 생성 모드
- console.log("🆕 신규 생성 모드 - 외부호출 설정 생성");
- try {
- configResult = await ExternalCallConfigAPI.createConfig(configData);
- } catch (createError) {
- // 중복 생성 오류인 경우 무시하고 계속 진행
- if (createError.message && createError.message.includes("이미 존재합니다")) {
- console.log("⚠️ 외부호출 설정이 이미 존재함 - 기존 설정 사용");
- configResult = { success: true, message: "기존 외부호출 설정 사용" };
- } else {
- throw createError;
- }
- }
- }
-
- if (!configResult.success) {
- throw new Error(configResult.error || "외부호출 설정 저장 실패");
- }
-
- console.log("✅ 외부호출 설정 저장 완료:", configResult.data);
- } catch (configError) {
- console.error("❌ 외부호출 설정 저장 실패:", configError);
- // 외부호출 설정 저장 실패해도 관계는 저장하도록 함
- toast.error("외부호출 설정 저장에 실패했지만 관계는 저장되었습니다.");
- }
- }
-
- // 백엔드 API 호출 (수정 모드인 경우 diagramId 전달)
- const result = await saveDataflowRelationship(saveData, diagramId);
-
- console.log("✅ 저장 완료:", result);
-
- setState((prev) => ({ ...prev, isLoading: false }));
- toast.success(`"${state.relationshipName}" 관계가 성공적으로 저장되었습니다.`);
-
- // 저장 후 닫기
- if (onClose) {
- onClose();
- }
- } catch (error: any) {
- console.error("❌ 저장 실패:", error);
- setState((prev) => ({ ...prev, isLoading: false }));
- toast.error(error.message || "저장 중 오류가 발생했습니다.");
- }
- }, [state, diagramId, onClose]),
-
- // 테스트 실행
- testExecution: useCallback(async (): Promise => {
- setState((prev) => ({ ...prev, isLoading: true }));
-
- try {
- // TODO: 실제 테스트 로직 구현
- const result: TestResult = {
- success: true,
- message: "테스트가 성공적으로 완료되었습니다.",
- affectedRows: 10,
- executionTime: 250,
- };
-
- setState((prev) => ({ ...prev, isLoading: false }));
- toast.success(result.message);
-
- return result;
- } catch (error) {
- setState((prev) => ({ ...prev, isLoading: false }));
- toast.error("테스트 실행 중 오류가 발생했습니다.");
- throw error;
- }
- }, []),
- };
+export const DataConnectionDesigner: React.FC = () => {
+ const [state, setState] = useState(initialState);
+ const { isMobile, isTablet } = useResponsive();
return (
-
+ {children}
+
+ );
+};
+
+// 특화된 애니메이션 컴포넌트들
+export const FadeIn: React.FC
- {/* 상단 네비게이션 */}
- {showBackButton && (
-
-
-
-
-
-
🔗 데이터 연결 설정
-- {state.connectionType === "data_save" ? "데이터 저장" : "외부 호출"} 연결 설정 +
+
+
+
+
- + 🎨 제어관리 - 데이터 연결 설정 +
++ 시각적 필드 매핑으로 데이터 연결을 쉽게 설정하세요
+
+ setState(prev => ({ ...prev, connectionType: type }))}
+ />
+
+
- )}
- {/* 메인 컨텐츠 - 좌우 분할 레이아웃 */}
-
+ setState(prev => ({ ...prev, selectedMapping: mappingId }))}
+ />
- {/* 좌측 패널 (30%) - 항상 표시 */}
- = ({ selectedType, onTypeChange }) => {
- const connectionTypes: ConnectionType[] = [
- {
- id: "data_save",
- label: "데이터 저장",
- description: "INSERT/UPDATE/DELETE 작업",
- icon: = ({
+ connectionType,
+ onConnectionTypeChange,
+}) => {
return (
-
-
- {
- console.log("🔘 [ConnectionTypeSelector] 라디오 버튼 변경:", value);
- onTypeChange(value as "data_save" | "external_call");
- }}
- className="space-y-3"
- >
- {connectionTypes.map((type) => (
-
-
diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/ConnectionTypeSelector.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/ConnectionTypeSelector.tsx
index 4002a408..0d5aa5e4 100644
--- a/frontend/components/dataflow/connection/redesigned/LeftPanel/ConnectionTypeSelector.tsx
+++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/ConnectionTypeSelector.tsx
@@ -1,62 +1,66 @@
"use client";
import React from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import { Label } from "@/components/ui/label";
import { Database, Globe } from "lucide-react";
+import { ConnectionType } from "../types/redesigned";
-// 타입 import
-import { ConnectionType, ConnectionTypeSelectorProps } from "../types/redesigned";
+interface ConnectionTypeSelectorProps {
+ connectionType: "data_save" | "external_call";
+ onConnectionTypeChange: (type: "data_save" | "external_call") => void;
+}
-/**
- * 🔘 연결 타입 선택 컴포넌트
- * - 데이터 저장 (INSERT/UPDATE/DELETE)
- * - 외부 호출 (API/Webhook)
- */
-const ConnectionTypeSelector: React.FC
+ setState(prev => ({ ...prev, currentStep: step }))}
+ />
+
+
+ {state.currentStep === 1 && (
+ setState(prev => ({ ...prev, fromConnection: conn }))}
+ onToConnectionChange={(conn) => setState(prev => ({ ...prev, toConnection: conn }))}
+ onNext={() => setState(prev => ({ ...prev, currentStep: 2 }))}
+ />
+ )}
+
+ {state.currentStep === 2 && (
+ setState(prev => ({ ...prev, fromTable: table }))}
+ onToTableChange={(table) => setState(prev => ({ ...prev, toTable: table }))}
+ onNext={() => setState(prev => ({ ...prev, currentStep: 3 }))}
+ onBack={() => setState(prev => ({ ...prev, currentStep: 1 }))}
+ />
+ )}
+
+ {state.currentStep === 3 && (
+ setState(prev => ({ ...prev, fieldMappings: mappings }))}
+ onBack={() => setState(prev => ({ ...prev, currentStep: 2 }))}
+ onSave={() => {
+ // 저장 로직
+ console.log("저장:", state);
+ alert("데이터 연결 설정이 저장되었습니다!");
+ }}
+ />
+ )}
-
- {/* 우측 패널 (70%) */}
-
-
-
-
- = ({ stats, validationErrors }) => {
- const errorCount = validationErrors.filter((e) => e.type === "error").length;
- const warningCount = validationErrors.filter((e) => e.type === "warning").length;
+interface MappingInfoPanelProps {
+ mappingStats: MappingStats;
+ fieldMappings: FieldMapping[];
+ selectedMapping?: string;
+ onMappingSelect: (mappingId: string) => void;
+}
+export const MappingInfoPanel: React.FC = ({
+ mappingStats,
+ fieldMappings,
+ selectedMapping,
+ onMappingSelect,
+}) => {
return (
-
-
- {/* 매핑 통계 */}
-
{type.description}
+
+
);
-};
-
-export default ConnectionTypeSelector;
+};
\ No newline at end of file
diff --git a/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingInfoPanel.tsx b/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingInfoPanel.tsx
index 3b407dd6..92b79908 100644
--- a/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingInfoPanel.tsx
+++ b/frontend/components/dataflow/connection/redesigned/LeftPanel/MappingInfoPanel.tsx
@@ -1,115 +1,146 @@
"use client";
import React from "react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { CheckCircle, AlertTriangle, XCircle, Info } from "lucide-react";
+import { CheckCircle, XCircle, AlertCircle, Database } from "lucide-react";
+import { MappingStats, FieldMapping } from "../types/redesigned";
-// 타입 import
-import { MappingInfoPanelProps } from "../types/redesigned";
-
-/**
- * 📊 매핑 정보 패널
- * - 실시간 매핑 통계
- * - 검증 상태 표시
- * - 예상 처리량 정보
- */
-const MappingInfoPanel: React.FC+ 연결 타입 선택 +
+ +
+ {connectionTypes.map((type) => (
+
+ onConnectionTypeChange(type.id)}
+ >
+
+ ))}
+
+
- ))}
-
-
-
+
+ {type.icon}
+
+
+
{type.label}
+{type.description}
-
- 총 매핑:
- {stats.totalMappings}개
+
+
+ 매핑 정보 +
+ + {/* 통계 카드 */} +
+
+ = React.memo(
- ({
- connectionType,
- fromConnection,
- toConnection,
- relationshipName,
- description,
- diagramId,
- onSelectConnection,
- onSetRelationshipName,
- onSetDescription,
- onNext,
- }) => {
- const [connections, setConnections] = useState([]);
- const [isLoading, setIsLoading] = useState(true);
- const [nameCheckStatus, setNameCheckStatus] = useState<"idle" | "checking" | "valid" | "duplicate">("idle");
-
- // API 응답을 Connection 타입으로 변환
- const convertToConnection = (connectionInfo: ConnectionInfo): Connection => ({
- id: connectionInfo.id,
- name: connectionInfo.connection_name,
- type: connectionInfo.db_type,
- host: connectionInfo.host,
- port: connectionInfo.port,
- database: connectionInfo.database_name,
- username: connectionInfo.username,
- isActive: connectionInfo.is_active === "Y",
- companyCode: connectionInfo.company_code,
- createdDate: connectionInfo.created_date,
- updatedDate: connectionInfo.updated_date,
- });
-
- // 🔍 관계명 중복 체크 (디바운스 적용)
- const checkNameDuplicate = useCallback(
- async (name: string) => {
- if (!name.trim()) {
- setNameCheckStatus("idle");
- return;
- }
-
- setNameCheckStatus("checking");
-
- try {
- const result = await checkRelationshipNameDuplicate(name, diagramId);
- setNameCheckStatus(result.isDuplicate ? "duplicate" : "valid");
-
- if (result.isDuplicate) {
- toast.warning(`"${name}" 이름이 이미 사용 중입니다. (${result.duplicateCount}개 발견)`);
- }
- } catch (error) {
- console.error("중복 체크 실패:", error);
- setNameCheckStatus("idle");
- }
- },
- [diagramId],
- );
-
- // 관계명 변경 시 중복 체크 (디바운스)
- useEffect(() => {
- if (!relationshipName) {
- setNameCheckStatus("idle");
- return;
- }
-
- const timeoutId = setTimeout(() => {
- checkNameDuplicate(relationshipName);
- }, 500); // 500ms 디바운스
-
- return () => clearTimeout(timeoutId);
- }, [relationshipName, checkNameDuplicate]);
-
- // 연결 목록 로드
- useEffect(() => {
- const loadConnections = async () => {
- try {
- setIsLoading(true);
- const data = await getActiveConnections();
-
- // 메인 DB 연결 추가
- const mainConnection: Connection = {
- id: 0,
- name: "메인 데이터베이스",
- type: "postgresql",
- host: "localhost",
- port: 5432,
- database: "main",
- username: "main_user",
- isActive: true,
- };
-
- // API 응답을 Connection 타입으로 변환
- const convertedConnections = data.map(convertToConnection);
-
- // 중복 방지: 기존에 메인 연결이 없는 경우에만 추가
- const hasMainConnection = convertedConnections.some((conn) => conn.id === 0);
- const preliminaryConnections = hasMainConnection
- ? convertedConnections
- : [mainConnection, ...convertedConnections];
-
- // ID 중복 제거 (Set 사용)
- const uniqueConnections = preliminaryConnections.filter(
- (conn, index, arr) => arr.findIndex((c) => c.id === conn.id) === index,
- );
-
- console.log("🔗 연결 목록 로드 완료:", uniqueConnections);
- setConnections(uniqueConnections);
- } catch (error) {
- console.error("❌ 연결 목록 로드 실패:", error);
- toast.error("연결 목록을 불러오는데 실패했습니다.");
-
- // 에러 시에도 메인 연결은 제공
- const mainConnection: Connection = {
- id: 0,
- name: "메인 데이터베이스",
- type: "postgresql",
- host: "localhost",
- port: 5432,
- database: "main",
- username: "main_user",
- isActive: true,
- };
- setConnections([mainConnection]);
- } finally {
- setIsLoading(false);
- }
- };
-
- loadConnections();
- }, []);
-
- const handleConnectionSelect = (type: "from" | "to", connectionId: string) => {
- const connection = connections.find((c) => c.id.toString() === connectionId);
- if (connection) {
- onSelectConnection(type, connection);
- }
- };
-
- const canProceed = fromConnection && toConnection;
-
- const getConnectionIcon = (connection: Connection) => {
- return connection.id === 0 ?
- 메인 DB
-
- );
- }
- return (
-
- {connection.type?.toUpperCase()}
-
- );
- };
-
- return (
- <>
-
-
-
-
-
-
- {/* 관계 정보 입력 */}
-
+
-
-
- 유효한 매핑:
-
-
+
- {/* 액션 정보 */}
- {stats.totalMappings > 0 && (
-
+ {mappingStats.validMappings}
-
- {stats.invalidMappings > 0 && (
-
- 타입 불일치:
-
-
-
- )}
-
- {stats.missingRequiredFields > 0 && (
-
- 필수 필드 누락:
-
-
-
- )}
-
);
-};
-
-// Database 아이콘 import 추가
-import { Database } from "lucide-react";
-
-export default MappingInfoPanel;
+};
\ No newline at end of file
diff --git a/frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx b/frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx
index 9129f690..a26c9a0f 100644
--- a/frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx
+++ b/frontend/components/dataflow/connection/redesigned/RightPanel/ConnectionStep.tsx
@@ -1,416 +1,187 @@
"use client";
-import React, { useState, useEffect, useCallback } from "react";
-import { CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Textarea } from "@/components/ui/textarea";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { Badge } from "@/components/ui/badge";
-import { ArrowRight, Database, Globe, Loader2, AlertTriangle, CheckCircle } from "lucide-react";
-import { toast } from "sonner";
-
-// API import
-import { getActiveConnections, ConnectionInfo } from "@/lib/api/multiConnection";
-import { checkRelationshipNameDuplicate } from "@/lib/api/dataflowSave";
-
-// 타입 import
-import { Connection } from "@/lib/types/multiConnection";
+import React, { useState } from "react";
+import { Database, ArrowRight, CheckCircle } from "lucide-react";
+import { Connection } from "../types/redesigned";
interface ConnectionStepProps {
- connectionType: "data_save" | "external_call";
fromConnection?: Connection;
toConnection?: Connection;
- relationshipName?: string;
- description?: string;
- diagramId?: number; // 🔧 수정 모드 감지용
- onSelectConnection: (type: "from" | "to", connection: Connection) => void;
- onSetRelationshipName: (name: string) => void;
- onSetDescription: (description: string) => void;
+ onFromConnectionChange: (connection: Connection) => void;
+ onToConnectionChange: (connection: Connection) => void;
onNext: () => void;
}
-/**
- * 🔗 1단계: 연결 선택
- * - FROM/TO 데이터베이스 연결 선택
- * - 연결 상태 표시
- * - 지연시간 정보
- */
-const ConnectionStep: React.FC
- 액션:
- {stats.actionType}
-
+
+
- {stats.estimatedRows > 0 && (
-
+
+
+ {mappingStats.invalidMappings}
+
+
- 예상 처리량:
- ~{stats.estimatedRows.toLocaleString()} rows
+
+
+ {/* 매핑 목록 */}
+
+
+
+
+
+
+ {mappingStats.totalMappings}
+
+
+
+
+
+
+ {mappingStats.missingRequiredFields}
+
+
+
+ + 필드 매핑 목록 +
+ + {fieldMappings.length === 0 ? ( +
+
+ ) : (
+ 아직 매핑이 없습니다
+3단계에서 필드를 매핑하세요
+
+ {fieldMappings.map((mapping) => (
+
)}
-
- {/* 검증 오류 요약 */}
- {validationErrors.length > 0 && (
- onMappingSelect(mapping.id)}
+ >
+
- )}
+ ))}
+
+
+ {mapping.validationMessage && (
+
+
+
+
+
+ {mapping.fromField.name}
+
+ →
+
+ {mapping.toField.name}
+
+
+
+
+ {mapping.fromField.type}
+
+ →
+
+ {mapping.toField.type}
+
+
+
+ {mapping.isValid ? (
+
+ + {mapping.validationMessage} +
+ )}
-
- )}
-
- {/* 빈 상태 */}
- {stats.totalMappings === 0 && (
-
-
-
- {errorCount > 0 && (
-
- 오류 {errorCount}개
-
- )}
- {warningCount > 0 && (
-
- 경고 {warningCount}개
-
- )}
-
-
-
- )}
-
-
+ 아직 매핑된 필드가 없습니다.
-우측에서 연결을 설정해주세요.
-- {connectionType === "data_save" - ? "데이터를 저장할 소스와 대상 데이터베이스를 선택하세요." - : "외부 호출을 위한 소스와 대상 연결을 선택하세요."} -
-
-
관계 정보
-
-
-
-
-
- onSetRelationshipName(e.target.value)}
- className={`pr-10 ${
- nameCheckStatus === "duplicate"
- ? "border-red-500 focus:border-red-500"
- : nameCheckStatus === "valid"
- ? "border-green-500 focus:border-green-500"
- : ""
- }`}
- />
-
- {nameCheckStatus === "duplicate" &&
- {nameCheckStatus === "checking" && (
-
- 이미 사용 중인 이름입니다.
} - {nameCheckStatus === "valid" &&사용 가능한 이름입니다.
} -
-
-