From 863164221c49bcf65c3a070c423dcb2f801e7e2e Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sun, 26 Jul 2026 02:13:33 +0900
Subject: [PATCH] feat(comp): enhance AISuggestedField component with
 confidence score, reasoning insight box, and 1-click accept button

---
 .../business-composites/AISuggestedField.vue  | 90 +++++++++++++------
 1 file changed, 62 insertions(+), 28 deletions(-)

diff --git a/src/frontend/src/components/business-composites/AISuggestedField.vue b/src/frontend/src/components/business-composites/AISuggestedField.vue
index 9b843f56..16663247 100644
--- a/src/frontend/src/components/business-composites/AISuggestedField.vue
+++ b/src/frontend/src/components/business-composites/AISuggestedField.vue
@@ -1,41 +1,75 @@
 <!-- Business Composite Component Layer: AISuggestedField (WBS-COMP-4.2) -->
 <template>
-  <div class="business-ai-suggested border border-indigo-200 bg-indigo-50/50 p-3 rounded-md flex flex-col gap-2">
+  <div class="ai-suggested-field-wrapper flex flex-col gap-1 w-full bg-slate-50 p-3 rounded-lg border border-slate-300 shadow-sm">
     <div class="flex justify-between items-center text-xs">
-      <span class="font-bold text-indigo-900 flex items-center gap-1">
-        ✨ AI AX 추천 초안 (<span class="font-mono text-indigo-600">{{ riskLevel }}</span>)
-      </span>
-      <span class="text-[10px] text-indigo-600 bg-indigo-100 font-bold px-2 py-0.5 rounded">
-        신뢰도 {{ (confidence * 100).toFixed(0) }}%
-      </span>
-    </div>
-    <div class="text-xs text-slate-800 bg-white p-2 rounded border border-indigo-100 flex justify-between items-center">
-      <div>
-        <span class="text-slate-500 text-[11px]">제안 값:</span>
-        <strong class="text-indigo-950 font-semibold ml-1">{{ suggestedValue }}</strong>
-      </div>
-      <div class="flex gap-1">
-        <button type="button" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-xs px-2.5 py-1 rounded transition" @click="$emit('accept')">
-          적용
-        </button>
-        <button type="button" class="bg-slate-200 hover:bg-slate-300 text-slate-700 text-xs px-2 py-1 rounded transition" @click="$emit('reject')">
-          거절
-        </button>
+      <label class="font-bold text-slate-800 flex items-center gap-1.5">
+        <span>✨ {{ label }}</span>
+        <span class="px-1.5 py-0.5 rounded bg-blue-100 text-blue-800 text-[10px] font-bold">AI 초안 보조</span>
+      </label>
+      <div v-if="suggestedValue" class="flex items-center gap-1.5 text-[11px]">
+        <span class="font-bold text-slate-500">신뢰도:</span>
+        <span :class="['font-mono font-bold px-1.5 py-0.5 rounded', confidenceScore >= 90 ? 'bg-emerald-100 text-emerald-800' : 'bg-amber-100 text-amber-800']">
+          {{ confidenceScore }}%
+        </span>
       </div>
     </div>
-    <div v-if="rationale" class="text-[11px] text-indigo-800/90 leading-tight">
-      💡 근거: {{ rationale }}
+
+    <!-- Main Input Section -->
+    <div class="flex gap-2">
+      <input
+        type="text"
+        :value="modelValue"
+        :placeholder="placeholder || '값 입력'"
+        :readonly="readonly"
+        :disabled="disabled"
+        class="flex-1 h-9 px-3 border border-slate-300 rounded text-xs text-slate-900 font-medium bg-white placeholder:text-slate-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none disabled:bg-slate-100"
+        @input="handleInput"
+      />
+      <button
+        v-if="suggestedValue && modelValue !== suggestedValue"
+        type="button"
+        class="h-9 px-3 bg-blue-600 hover:bg-blue-700 text-white font-bold text-xs rounded transition flex items-center gap-1 shadow-sm shrink-0"
+        @click="acceptSuggestion"
+      >
+        <span>💡 AI 추천 수용</span>
+      </button>
+    </div>
+
+    <!-- AI Recommendation Insight Box -->
+    <div v-if="suggestedValue" class="ai-insight-box bg-white p-2 rounded border border-blue-200 mt-1 flex flex-col gap-1 text-[11px]">
+      <div class="flex items-center justify-between text-slate-700">
+        <span class="font-bold text-blue-900">추천된 초안 값: <strong class="font-mono text-slate-900">{{ suggestedValue }}</strong></span>
+        <span v-if="modelValue === suggestedValue" class="text-emerald-700 font-bold">✓ 수용 완료</span>
+      </div>
+      <p v-if="reasoning" class="text-slate-600 leading-relaxed">
+        <strong>근거:</strong> {{ reasoning }}
+      </p>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-defineProps<{
-  suggestedValue: string;
-  confidence: number;
-  rationale?: string;
-  riskLevel?: 'R0' | 'R1' | 'R2' | 'R3' | 'R4';
+const props = defineProps<{
+  label: string;
+  modelValue: string;
+  suggestedValue?: string;
+  confidenceScore?: number;
+  reasoning?: string;
+  placeholder?: string;
+  readonly?: boolean;
+  disabled?: boolean;
 }>();
 
-defineEmits(['accept', 'reject']);
+const emit = defineEmits(['update:modelValue', 'accept']);
+
+const handleInput = (e: Event) => {
+  emit('update:modelValue', (e.target as HTMLInputElement).value);
+};
+
+const acceptSuggestion = () => {
+  if (props.suggestedValue) {
+    emit('update:modelValue', props.suggestedValue);
+    emit('accept', props.suggestedValue);
+  }
+};
 </script>