(김준회) 결재 프리뷰 공통컴포넌트 작성 및 index.ts --> client.ts 분리 (서버사이드 코드가 번들링되어 클라측에서 실행되는 문제 해결 목적)

1 files changed, 15 insertions, 15 deletions

diff --git a/lib/approval/template-utils.ts b/lib/approval/template-utils.ts
index a39f8ac4..0607f289 100644
--- a/lib/approval/template-utils.ts
+++ b/lib/approval/template-utils.ts
@@ -108,13 +108,13 @@ export async function htmlTableConverter(
   columns: Array<{ key: string; label: string }>
 ): Promise<string> {
   if (!data || data.length === 0) {
-    return '<p class="text-gray-500">데이터가 없습니다.</p>';
+    return '<p style="color: #6b7280;">데이터가 없습니다.</p>';
   }
 
   const headerRow = columns
     .map(
       (col) =>
-        `<th class="border border-gray-300 px-4 py-2 bg-gray-100 font-semibold text-left">${col.label}</th>`
+        `<th style="border: 1px solid #d1d5db; padding: 8px 16px; background-color: #f3f4f6; font-weight: 600; text-align: left;">${col.label}</th>`
     )
     .join('');
 
@@ -125,7 +125,7 @@ export async function htmlTableConverter(
           const value = row[col.key];
           const displayValue =
             value !== undefined && value !== null ? String(value) : '-';
-          return `<td class="border border-gray-300 px-4 py-2">${displayValue}</td>`;
+          return `<td style="border: 1px solid #d1d5db; padding: 8px 16px;">${displayValue}</td>`;
         })
         .join('');
       return `<tr>${cells}</tr>`;
@@ -133,7 +133,7 @@ export async function htmlTableConverter(
     .join('');
 
   return `
-    <table class="w-full border-collapse border border-gray-300 my-4">
+    <table style="width: 100%; border-collapse: collapse; border: 1px solid #d1d5db; margin: 16px 0;">
       <thead>
         <tr>${headerRow}</tr>
       </thead>
@@ -162,19 +162,19 @@ export async function htmlListConverter(
   ordered: boolean = false
 ): Promise<string> {
   if (!items || items.length === 0) {
-    return '<p class="text-gray-500">항목이 없습니다.</p>';
+    return '<p style="color: #6b7280;">항목이 없습니다.</p>';
   }
 
   const listItems = items
-    .map((item) => `<li class="mb-1">${item}</li>`)
+    .map((item) => `<li style="margin-bottom: 4px;">${item}</li>`)
     .join('');
 
   const tag = ordered ? 'ol' : 'ul';
-  const listClass = ordered
-    ? 'list-decimal list-inside my-4'
-    : 'list-disc list-inside my-4';
+  const listStyle = ordered
+    ? 'list-style-type: decimal; list-style-position: inside; margin: 16px 0; padding-left: 20px;'
+    : 'list-style-type: disc; list-style-position: inside; margin: 16px 0; padding-left: 20px;';
 
-  return `<${tag} class="${listClass}">${listItems}</${tag}>`;
+  return `<${tag} style="${listStyle}">${listItems}</${tag}>`;
 }
 
 /**
@@ -196,20 +196,20 @@ export async function htmlDescriptionList(
   items: Array<{ label: string; value: string }>
 ): Promise<string> {
   if (!items || items.length === 0) {
-    return '<p class="text-gray-500">정보가 없습니다.</p>';
+    return '<p style="color: #6b7280;">정보가 없습니다.</p>';
   }
 
   const listItems = items
     .map(
       (item) => `
-      <div class="flex border-b border-gray-200 py-2">
-        <dt class="w-1/3 font-semibold text-gray-700">${item.label}</dt>
-        <dd class="w-2/3 text-gray-900">${item.value}</dd>
+      <div style="display: flex; border-bottom: 1px solid #e5e7eb; padding: 8px 0;">
+        <dt style="width: 33.333%; font-weight: 600; color: #374151;">${item.label}</dt>
+        <dd style="width: 66.667%; color: #111827;">${item.value}</dd>
       </div>
     `
     )
     .join('');
 
-  return `<dl class="my-4">${listItems}</dl>`;
+  return `<dl style="margin: 16px 0;">${listItems}</dl>`;
 }