From 3df5f7b95facb8b49fff07a13ed31f6ebdcbdcd4 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sun, 26 Jul 2026 02:49:36 +0900
Subject: [PATCH] refactor(frontend): complete PrimeVue Timeline and Button
 adapter wrappers for AuditTimeline and AddressEditor

---
 .../business-composites/AddressEditor.vue     | 21 ++++---
 .../src/components/crud/AuditTimeline.vue     | 63 +++++++------------
 2 files changed, 34 insertions(+), 50 deletions(-)

diff --git a/src/frontend/src/components/business-composites/AddressEditor.vue b/src/frontend/src/components/business-composites/AddressEditor.vue
index 215e3aa4..97873ef4 100644
--- a/src/frontend/src/components/business-composites/AddressEditor.vue
+++ b/src/frontend/src/components/business-composites/AddressEditor.vue
@@ -1,17 +1,22 @@
-<!-- Business Composite Component Layer -->
+<!-- PrimeVue Adapter Wrapper: AddressEditor -->
 <template>
-  <div class="business-address-editor border rounded p-4 bg-slate-50">
-    <h4 class="font-bold text-sm text-slate-800 mb-2">주소 편집기 (AddressEditor)</h4>
-    <div class="flex gap-2 mb-2">
-      <input type="text" :value="postalCode" placeholder="우편번호" readonly class="w-32 border px-2 py-1 bg-white text-xs" />
-      <button type="button" class="bg-blue-600 text-white text-xs px-3 py-1 rounded" @click="$emit('search-postal')">우편번호 검색</button>
+  <div class="business-address-editor border rounded p-4 bg-slate-50 flex flex-col gap-2">
+    <h4 class="font-bold text-xs text-slate-800 flex items-center gap-1">
+      <span>📍</span> 주소 편집기 (AddressEditor)
+    </h4>
+    <div class="flex gap-2">
+      <InputText :modelValue="postalCode" placeholder="우편번호" readonly class="w-32 h-8 text-xs font-mono bg-white border-slate-300" />
+      <Button label="우편번호 검색" icon="pi pi-search" class="p-button-sm p-button-primary text-xs h-8 px-3" @click="$emit('search-postal')" />
     </div>
-    <input type="text" :value="address1" placeholder="기본주소" readonly class="w-full border px-2 py-1 bg-white text-xs mb-2" />
-    <input type="text" :value="address2" placeholder="상세주소 입력" class="w-full border px-2 py-1 bg-white text-xs" @input="$emit('update:address2', ($event.target as HTMLInputElement).value)" />
+    <InputText :modelValue="address1" placeholder="기본주소" readonly class="w-full h-8 text-xs bg-white border-slate-300" />
+    <InputText :modelValue="address2" placeholder="상세주소 입력" class="w-full h-8 text-xs bg-white border-slate-300" @update:modelValue="$emit('update:address2', $event || '')" />
   </div>
 </template>
 
 <script setup lang="ts">
+import InputText from 'primevue/inputtext';
+import Button from 'primevue/button';
+
 defineProps<{
   postalCode?: string;
   address1?: string;
diff --git a/src/frontend/src/components/crud/AuditTimeline.vue b/src/frontend/src/components/crud/AuditTimeline.vue
index 29d561f6..693ba9a9 100644
--- a/src/frontend/src/components/crud/AuditTimeline.vue
+++ b/src/frontend/src/components/crud/AuditTimeline.vue
@@ -1,6 +1,25 @@
-<!-- AuditTimeline.vue -->
+<!-- PrimeVue Timeline Adapter Wrapper: AuditTimeline -->
+<template>
+  <div class="audit-timeline-section p-3 border-t border-slate-200 mt-2 bg-slate-50 rounded" v-if="auditHistory && auditHistory.length > 0">
+    <h5 class="text-xs font-bold text-slate-700 mb-2 flex items-center gap-1">
+      <span>🕒</span> 변경 감사 이력 타임라인 (Audit Trail)
+    </h5>
+    <Timeline :value="auditHistory" class="customized-timeline text-xs">
+      <template #content="slotProps">
+        <div class="flex items-center gap-2 text-xs py-0.5">
+          <span class="font-mono font-bold text-blue-600 text-[11px]">{{ slotProps.item.timestamp }}</span>
+          <span class="font-bold text-slate-800 text-[11px]">[{{ slotProps.item.user }}]</span>
+          <span class="text-slate-600 text-[11px]">{{ slotProps.item.change }}</span>
+        </div>
+      </template>
+    </Timeline>
+  </div>
+</template>
+
 <script setup lang="ts">
-interface AuditLog {
+import Timeline from 'primevue/timeline';
+
+export interface AuditLog {
   timestamp: string;
   user: string;
   change: string;
@@ -10,43 +29,3 @@ defineProps<{
   auditHistory?: AuditLog[];
 }>();
 </script>
-
-<template>
-  <div class="audit-timeline-section" v-if="auditHistory && auditHistory.length > 0">
-    <h5 class="timeline-title">🕒 변경 감사 이력 타임라인 (Audit Trail)</h5>
-    <div class="timeline-list">
-      <div v-for="(log, idx) in auditHistory" :key="idx" class="timeline-item">
-        <span class="time-stamp">{{ log.timestamp }}</span>
-        <span class="user-id">[{{ log.user }}]</span>
-        <span class="change-desc">{{ log.change }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.audit-timeline-section {
-  border-top: 1px solid #E2E8F0;
-  padding-top: 8px;
-  margin-top: 4px;
-}
-
-.timeline-title {
-  font-size: 0.75rem;
-  font-weight: 700;
-  color: #475569;
-  margin: 0 0 4px 0;
-}
-
-.timeline-list { display: flex; flex-direction: column; gap: 2px; }
-.timeline-item {
-  font-size: 0.7rem;
-  color: #64748B;
-  display: flex;
-  gap: 6px;
-}
-
-.time-stamp { font-family: monospace; font-weight: 700; color: #2563EB; }
-.user-id { font-weight: 700; color: #334155; }
-.change-desc { color: #475569; }
-</style>