메일관련된거 커밋

backend-node/src/services/mailSendSimpleService.ts

@@ -334,9 +334,12 @@ class MailSendSimpleService {
           if (variables) {
             buttonText = this.replaceVariables(buttonText, variables);
           }
+          // styles 객체 또는 직접 속성에서 색상 가져오기
+          const buttonBgColor = component.styles?.backgroundColor || component.backgroundColor || '#007bff';
+          const buttonTextColor = component.styles?.color || component.textColor || '#fff';
           // 버튼은 왼쪽 정렬 (text-align 제거)
           html += `<div style="margin: 30px 0; text-align: left;">
-            <a href="${component.url || '#'}" style="display: inline-block; padding: 14px 28px; background-color: ${component.backgroundColor || '#007bff'}; color: ${component.textColor || '#fff'}; text-decoration: none; border-radius: 6px; font-weight: 600; font-size: 15px;">${buttonText}</a>
+            <a href="${component.url || '#'}" style="display: inline-block; padding: 14px 28px; background-color: ${buttonBgColor}; color: ${buttonTextColor}; text-decoration: none; border-radius: 6px; font-weight: 600; font-size: 15px;">${buttonText}</a>
           </div>`;
           break;
         case 'image':
@@ -348,6 +351,89 @@ class MailSendSimpleService {
         case 'spacer':
           html += `<div style="height: ${component.height || '20px'};"></div>`;
           break;
+        case 'header':
+          html += `
+            <div style="padding: 20px; background-color: ${component.headerBgColor || '#f8f9fa'}; border-radius: 8px; margin-bottom: 20px;">
+              <table style="width: 100%;">
+                <tr>
+                  <td style="vertical-align: middle;">
+                    ${component.logoSrc ? `<img src="${component.logoSrc}" alt="로고" style="height: 40px; margin-right: 12px;">` : ''}
+                    <span style="font-size: 18px; font-weight: bold;">${component.brandName || ''}</span>
+                  </td>
+                  <td style="text-align: right; color: #6b7280; font-size: 14px;">
+                    ${component.sendDate || ''}
+                  </td>
+                </tr>
+              </table>
+            </div>
+          `;
+          break;
+        case 'infoTable':
+          html += `
+            <div style="border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; margin: 16px 0;">
+              ${component.tableTitle ? `<div style="background-color: #f9fafb; padding: 12px 16px; font-weight: 600; border-bottom: 1px solid #e5e7eb;">${component.tableTitle}</div>` : ''}
+              <table style="width: 100%; border-collapse: collapse;">
+                ${(component.rows || []).map((row: any, i: number) => `
+                  <tr style="background-color: ${i % 2 === 0 ? '#ffffff' : '#f9fafb'};">
+                    <td style="padding: 12px 16px; font-weight: 500; color: #4b5563; width: 35%; border-right: 1px solid #e5e7eb;">${row.label}</td>
+                    <td style="padding: 12px 16px;">${row.value}</td>
+                  </tr>
+                `).join('')}
+              </table>
+            </div>
+          `;
+          break;
+        case 'alertBox':
+          const alertColors: Record<string, { bg: string; border: string; text: string }> = {
+            info: { bg: '#eff6ff', border: '#3b82f6', text: '#1e40af' },
+            warning: { bg: '#fffbeb', border: '#f59e0b', text: '#92400e' },
+            danger: { bg: '#fef2f2', border: '#ef4444', text: '#991b1b' },
+            success: { bg: '#ecfdf5', border: '#10b981', text: '#065f46' }
+          };
+          const colors = alertColors[component.alertType || 'info'];
+          html += `
+            <div style="padding: 16px; background-color: ${colors.bg}; border-left: 4px solid ${colors.border}; border-radius: 4px; margin: 16px 0; color: ${colors.text};">
+              ${component.alertTitle ? `<div style="font-weight: bold; margin-bottom: 8px;">${component.alertTitle}</div>` : ''}
+              <div>${component.content || ''}</div>
+            </div>
+          `;
+          break;
+        case 'divider':
+          html += `<hr style="border: none; border-top: ${component.height || 1}px solid #e5e7eb; margin: 20px 0;">`;
+          break;
+        case 'footer':
+          html += `
+            <div style="text-align: center; padding: 24px 16px; background-color: #f9fafb; border-top: 1px solid #e5e7eb; font-size: 14px; color: #6b7280;">
+              ${component.companyName ? `<div style="font-weight: 600; color: #374151; margin-bottom: 8px;">${component.companyName}</div>` : ''}
+              ${(component.ceoName || component.businessNumber) ? `
+                <div style="margin-bottom: 4px;">
+                  ${component.ceoName ? `대표: ${component.ceoName}` : ''}
+                  ${component.ceoName && component.businessNumber ? ' | ' : ''}
+                  ${component.businessNumber ? `사업자등록번호: ${component.businessNumber}` : ''}
+                </div>
+              ` : ''}
+              ${component.address ? `<div style="margin-bottom: 4px;">${component.address}</div>` : ''}
+              ${(component.phone || component.email) ? `
+                <div style="margin-bottom: 4px;">
+                  ${component.phone ? `Tel: ${component.phone}` : ''}
+                  ${component.phone && component.email ? ' | ' : ''}
+                  ${component.email ? `Email: ${component.email}` : ''}
+                </div>
+              ` : ''}
+              ${component.copyright ? `<div style="margin-top: 12px; font-size: 12px; color: #9ca3af;">${component.copyright}</div>` : ''}
+            </div>
+          `;
+          break;
+        case 'numberedList':
+          html += `
+            <div style="padding: 16px;">
+              ${component.listTitle ? `<div style="font-weight: 600; margin-bottom: 12px;">${component.listTitle}</div>` : ''}
+              <ol style="margin: 0; padding-left: 20px;">
+                ${(component.listItems || []).map((item: string) => `<li style="margin-bottom: 8px;">${item}</li>`).join('')}
+              </ol>
+            </div>
+          `;
+          break;
       }
     });
 

backend-node/src/services/mailTemplateFileService.ts

@@ -4,13 +4,35 @@ import path from "path";
 // MailComponent 인터페이스 정의
 export interface MailComponent {
   id: string;
-  type: "text" | "button" | "image" | "spacer";
+  type: "text" | "button" | "image" | "spacer" | "header" | "infoTable" | "alertBox" | "divider" | "footer" | "numberedList";
   content?: string;
   text?: string;
   url?: string;
   src?: string;
   height?: number;
   styles?: Record<string, string>;
+  // 헤더 컴포넌트용
+  logoSrc?: string;
+  brandName?: string;
+  sendDate?: string;
+  headerBgColor?: string;
+  // 정보 테이블용
+  rows?: Array<{ label: string; value: string }>;
+  tableTitle?: string;
+  // 강조 박스용
+  alertType?: "info" | "warning" | "danger" | "success";
+  alertTitle?: string;
+  // 푸터용
+  companyName?: string;
+  ceoName?: string;
+  businessNumber?: string;
+  address?: string;
+  phone?: string;
+  email?: string;
+  copyright?: string;
+  // 번호 리스트용
+  listItems?: string[];
+  listTitle?: string;
 }
 
 // QueryConfig 인터페이스 정의 (사용하지 않지만 타입 호환성 유지)
@@ -236,6 +258,89 @@ class MailTemplateFileService {
         case "spacer":
           html += `<div style="height: ${comp.height || 20}px;"></div>`;
           break;
+        case "header":
+          html += `
+            <div style="padding: 20px; background-color: ${comp.headerBgColor || '#f8f9fa'}; border-radius: 8px; margin-bottom: 20px;">
+              <table style="width: 100%;">
+                <tr>
+                  <td style="vertical-align: middle;">
+                    ${comp.logoSrc ? `<img src="${comp.logoSrc}" alt="로고" style="height: 40px; margin-right: 12px;">` : ''}
+                    <span style="font-size: 18px; font-weight: bold;">${comp.brandName || ''}</span>
+                  </td>
+                  <td style="text-align: right; color: #6b7280; font-size: 14px;">
+                    ${comp.sendDate || ''}
+                  </td>
+                </tr>
+              </table>
+            </div>
+          `;
+          break;
+        case "infoTable":
+          html += `
+            <div style="border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; margin: 16px 0;">
+              ${comp.tableTitle ? `<div style="background-color: #f9fafb; padding: 12px 16px; font-weight: 600; border-bottom: 1px solid #e5e7eb;">${comp.tableTitle}</div>` : ''}
+              <table style="width: 100%; border-collapse: collapse;">
+                ${(comp.rows || []).map((row, i) => `
+                  <tr style="background-color: ${i % 2 === 0 ? '#ffffff' : '#f9fafb'};">
+                    <td style="padding: 12px 16px; font-weight: 500; color: #4b5563; width: 35%; border-right: 1px solid #e5e7eb;">${row.label}</td>
+                    <td style="padding: 12px 16px;">${row.value}</td>
+                  </tr>
+                `).join('')}
+              </table>
+            </div>
+          `;
+          break;
+        case "alertBox":
+          const alertColors: Record<string, { bg: string; border: string; text: string }> = {
+            info: { bg: '#eff6ff', border: '#3b82f6', text: '#1e40af' },
+            warning: { bg: '#fffbeb', border: '#f59e0b', text: '#92400e' },
+            danger: { bg: '#fef2f2', border: '#ef4444', text: '#991b1b' },
+            success: { bg: '#ecfdf5', border: '#10b981', text: '#065f46' }
+          };
+          const colors = alertColors[comp.alertType || 'info'];
+          html += `
+            <div style="padding: 16px; background-color: ${colors.bg}; border-left: 4px solid ${colors.border}; border-radius: 4px; margin: 16px 0; color: ${colors.text};">
+              ${comp.alertTitle ? `<div style="font-weight: bold; margin-bottom: 8px;">${comp.alertTitle}</div>` : ''}
+              <div>${comp.content || ''}</div>
+            </div>
+          `;
+          break;
+        case "divider":
+          html += `<hr style="border: none; border-top: ${comp.height || 1}px solid #e5e7eb; margin: 20px 0;">`;
+          break;
+        case "footer":
+          html += `
+            <div style="text-align: center; padding: 24px 16px; background-color: #f9fafb; border-top: 1px solid #e5e7eb; font-size: 14px; color: #6b7280;">
+              ${comp.companyName ? `<div style="font-weight: 600; color: #374151; margin-bottom: 8px;">${comp.companyName}</div>` : ''}
+              ${(comp.ceoName || comp.businessNumber) ? `
+                <div style="margin-bottom: 4px;">
+                  ${comp.ceoName ? `대표: ${comp.ceoName}` : ''}
+                  ${comp.ceoName && comp.businessNumber ? ' | ' : ''}
+                  ${comp.businessNumber ? `사업자등록번호: ${comp.businessNumber}` : ''}
+                </div>
+              ` : ''}
+              ${comp.address ? `<div style="margin-bottom: 4px;">${comp.address}</div>` : ''}
+              ${(comp.phone || comp.email) ? `
+                <div style="margin-bottom: 4px;">
+                  ${comp.phone ? `Tel: ${comp.phone}` : ''}
+                  ${comp.phone && comp.email ? ' | ' : ''}
+                  ${comp.email ? `Email: ${comp.email}` : ''}
+                </div>
+              ` : ''}
+              ${comp.copyright ? `<div style="margin-top: 12px; font-size: 12px; color: #9ca3af;">${comp.copyright}</div>` : ''}
+            </div>
+          `;
+          break;
+        case "numberedList":
+          html += `
+            <div style="padding: 16px; ${styles}">
+              ${comp.listTitle ? `<div style="font-weight: 600; margin-bottom: 12px;">${comp.listTitle}</div>` : ''}
+              <ol style="margin: 0; padding-left: 20px;">
+                ${(comp.listItems || []).map(item => `<li style="margin-bottom: 8px;">${item}</li>`).join('')}
+              </ol>
+            </div>
+          `;
+          break;
       }
     });
 

backend-node/src/services/screenManagementService.ts

@@ -70,12 +70,13 @@ export class ScreenManagementService {
       throw new Error("이미 존재하는 화면 코드입니다.");
     }
 
-    // 화면 생성 (Raw Query)
+    // 화면 생성 (Raw Query) - REST API 지원 추가
     const [screen] = await query<any>(
       `INSERT INTO screen_definitions (
         screen_name, screen_code, table_name, company_code, description, created_by,
-        db_source_type, db_connection_id
-      ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
+        db_source_type, db_connection_id, data_source_type, rest_api_connection_id, 
+        rest_api_endpoint, rest_api_json_path
+      ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12)
       RETURNING *`,
       [
         screenData.screenName,
@@ -86,6 +87,10 @@ export class ScreenManagementService {
         screenData.createdBy,
         screenData.dbSourceType || "internal",
         screenData.dbConnectionId || null,
+        (screenData as any).dataSourceType || "database",
+        (screenData as any).restApiConnectionId || null,
+        (screenData as any).restApiEndpoint || null,
+        (screenData as any).restApiJsonPath || "data",
       ]
     );
 
@@ -1977,6 +1982,11 @@ export class ScreenManagementService {
       updatedBy: data.updated_by,
       dbSourceType: data.db_source_type || "internal",
       dbConnectionId: data.db_connection_id || undefined,
+      // REST API 관련 필드
+      dataSourceType: data.data_source_type || "database",
+      restApiConnectionId: data.rest_api_connection_id || undefined,
+      restApiEndpoint: data.rest_api_endpoint || undefined,
+      restApiJsonPath: data.rest_api_json_path || "data",
     };
   }
 

backend-node/src/types/screen.ts

@@ -154,6 +154,11 @@ export interface ScreenDefinition {
   updatedBy?: string;
   dbSourceType?: "internal" | "external";
   dbConnectionId?: number;
+  // REST API 관련 필드
+  dataSourceType?: "database" | "restapi";
+  restApiConnectionId?: number;
+  restApiEndpoint?: string;
+  restApiJsonPath?: string;
 }
 
 // 화면 생성 요청
@@ -166,6 +171,11 @@ export interface CreateScreenRequest {
   createdBy?: string;
   dbSourceType?: "internal" | "external";
   dbConnectionId?: number;
+  // REST API 관련 필드
+  dataSourceType?: "database" | "restapi";
+  restApiConnectionId?: number;
+  restApiEndpoint?: string;
+  restApiJsonPath?: string;
 }
 
 // 화면 수정 요청