From 64009419b329da69c0b4a7cf599fddc805f294e6 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sun, 26 Jul 2026 02:42:59 +0900
Subject: [PATCH] refactor(arch): apply Adapter Pattern to wrap PrimeVue 4
 components (InputText, Select, Dialog, InputNumber, DatePicker) isolating UI
 framework dependency

---
 .../src/components/fields/DateField.vue       | 43 ++++++++++---
 .../src/components/fields/NumberField.vue     | 31 +++++-----
 .../src/components/primitives/DialogModal.vue | 62 ++++++++++---------
 .../src/components/primitives/SelectInput.vue | 43 +++++++++----
 .../src/components/primitives/TextInput.vue   | 29 ++++++---
 5 files changed, 136 insertions(+), 72 deletions(-)

diff --git a/src/frontend/src/components/fields/DateField.vue b/src/frontend/src/components/fields/DateField.vue
index 65ef484f..4681cf78 100644
--- a/src/frontend/src/components/fields/DateField.vue
+++ b/src/frontend/src/components/fields/DateField.vue
@@ -1,4 +1,4 @@
-<!-- Typed Field Component Layer: DateField (WBS-COMP-2.3) -->
+<!-- Typed Field Layer: DateField (PrimeVue DatePicker Adapter Wrapper) -->
 <template>
   <div class="typed-date-field flex flex-col gap-1 w-full">
     <div class="flex justify-between items-center text-xs">
@@ -14,18 +14,21 @@
         오늘
       </button>
     </div>
-    <input
-      type="date"
-      :value="modelValue"
+    <DatePicker
+      :modelValue="parsedDate"
+      dateFormat="yy-mm-dd"
       :readonly="readonly"
       :disabled="disabled"
-      class="w-full h-9 px-3 border border-slate-300 rounded text-xs text-slate-900 font-mono font-bold bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none disabled:bg-slate-100 disabled:text-slate-500 disabled:cursor-not-allowed readonly:bg-slate-50 readonly:text-slate-700"
-      @change="handleChange"
+      inputClass="w-full h-9 px-3 border border-slate-300 rounded text-xs text-slate-900 font-mono font-bold bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-slate-100 disabled:text-slate-500 readonly:bg-slate-50 readonly:text-slate-700"
+      @update:modelValue="handleChange"
     />
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+import DatePicker from 'primevue/datepicker';
+
 const props = defineProps<{
   label?: string;
   modelValue?: string;
@@ -35,14 +38,36 @@ const props = defineProps<{
   showTodayBtn?: boolean;
 }>();
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'change']);
 
-const handleChange = (e: Event) => {
-  emit('update:modelValue', (e.target as HTMLInputElement).value);
+const parsedDate = computed(() => {
+  if (!props.modelValue) return null;
+  const d = new Date(props.modelValue);
+  return isNaN(d.getTime()) ? null : d;
+});
+
+const handleChange = (val: any) => {
+  if (!val) {
+    emit('update:modelValue', '');
+    emit('change', '');
+    return;
+  }
+  let dateStr = '';
+  if (val instanceof Date) {
+    const yyyy = val.getFullYear();
+    const mm = String(val.getMonth() + 1).padStart(2, '0');
+    const dd = String(val.getDate()).padStart(2, '0');
+    dateStr = `${yyyy}-${mm}-${dd}`;
+  } else {
+    dateStr = String(val);
+  }
+  emit('update:modelValue', dateStr);
+  emit('change', dateStr);
 };
 
 const setToday = () => {
   const today = new Date().toISOString().substring(0, 10);
   emit('update:modelValue', today);
+  emit('change', today);
 };
 </script>
diff --git a/src/frontend/src/components/fields/NumberField.vue b/src/frontend/src/components/fields/NumberField.vue
index 23d26d72..d0fc7fa2 100644
--- a/src/frontend/src/components/fields/NumberField.vue
+++ b/src/frontend/src/components/fields/NumberField.vue
@@ -1,23 +1,26 @@
-<!-- Typed Field Component Layer: NumberField (WBS-COMP-2.2) -->
+<!-- Typed Field Layer: NumberField (PrimeVue InputNumber Adapter Wrapper) -->
 <template>
   <div class="typed-number-field flex flex-col gap-1 w-full">
     <label v-if="label" class="text-xs font-bold text-slate-800">
       {{ label }} <span v-if="required" class="text-rose-600">*</span>
     </label>
-    <input
-      type="text"
-      :value="formattedValue"
+    <InputNumber
+      :modelValue="numericValue"
       :placeholder="placeholder || '0'"
       :readonly="readonly"
       :disabled="disabled"
-      class="w-full h-9 px-3 border border-slate-300 rounded text-right font-mono text-xs text-slate-900 font-bold bg-white placeholder:text-slate-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none disabled:bg-slate-100 disabled:text-slate-500 disabled:cursor-not-allowed readonly:bg-slate-50 readonly:text-slate-700"
-      @input="handleInput"
+      locale="ko-KR"
+      :minFractionDigits="0"
+      :maxFractionDigits="2"
+      inputClass="w-full h-9 px-3 border border-slate-300 rounded text-right font-mono text-xs text-slate-900 font-bold bg-white placeholder:text-slate-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none disabled:bg-slate-100 disabled:text-slate-500 readonly:bg-slate-50 readonly:text-slate-700"
+      @update:modelValue="handleInput"
     />
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue';
+import InputNumber from 'primevue/inputnumber';
 
 const props = defineProps<{
   label?: string;
@@ -28,17 +31,17 @@ const props = defineProps<{
   disabled?: boolean;
 }>();
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'change']);
 
-const formattedValue = computed(() => {
-  if (props.modelValue === undefined || props.modelValue === null || props.modelValue === '') return '';
+const numericValue = computed(() => {
+  if (props.modelValue === undefined || props.modelValue === null || props.modelValue === '') return null;
   const num = Number(String(props.modelValue).replace(/,/g, ''));
-  if (isNaN(num)) return String(props.modelValue);
-  return num.toLocaleString('ko-KR');
+  return isNaN(num) ? null : num;
 });
 
-const handleInput = (e: Event) => {
-  const raw = (e.target as HTMLInputElement).value.replace(/,/g, '');
-  emit('update:modelValue', raw);
+const handleInput = (val: number | null) => {
+  const finalVal = val === null ? '' : String(val);
+  emit('update:modelValue', finalVal);
+  emit('change', finalVal);
 };
 </script>
diff --git a/src/frontend/src/components/primitives/DialogModal.vue b/src/frontend/src/components/primitives/DialogModal.vue
index c22200c3..7370c7e7 100644
--- a/src/frontend/src/components/primitives/DialogModal.vue
+++ b/src/frontend/src/components/primitives/DialogModal.vue
@@ -1,38 +1,44 @@
-<!-- Primitive UI Component: DialogModal (WBS-COMP-1.3) -->
+<!-- Primitive Layer: DialogModal (PrimeVue Dialog Adapter Wrapper) -->
 <template>
-  <Teleport to="body">
-    <div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 backdrop-blur-xs select-none">
-      <div class="bg-white rounded-lg border border-slate-300 shadow-xl w-full max-w-md overflow-hidden flex flex-col animate-in fade-in zoom-in-95 duration-150">
-        <!-- Header -->
-        <div class="bg-slate-900 text-white px-4 py-3 flex justify-between items-center text-sm font-bold">
-          <span>{{ title || '확인' }}</span>
-          <button type="button" class="text-slate-400 hover:text-white font-bold" @click="$emit('close')">✕</button>
-        </div>
-
-        <!-- Body -->
-        <div class="p-5 text-xs text-slate-800 leading-relaxed">
-          <slot></slot>
-        </div>
-
-        <!-- Footer -->
-        <div class="bg-slate-100 px-4 py-2.5 border-t border-slate-200 flex justify-end gap-2 text-xs">
-          <button type="button" class="px-3 py-1.5 bg-slate-200 hover:bg-slate-300 text-slate-800 font-bold rounded transition" @click="$emit('close')">
-            취소
-          </button>
-          <button type="button" class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded transition shadow-xs" @click="$emit('confirm')">
-            확인
-          </button>
-        </div>
-      </div>
+  <Dialog
+    :visible="isOpen"
+    :header="title || '확인'"
+    :modal="true"
+    :closable="true"
+    :dismissableMask="true"
+    class="primitive-dialog-modal max-w-md w-full"
+    @update:visible="onVisibleChange"
+  >
+    <div class="p-4 text-xs text-slate-800 leading-relaxed">
+      <slot></slot>
     </div>
-  </Teleport>
+
+    <template #footer>
+      <div class="flex justify-end gap-2 text-xs pt-2 border-t border-slate-200">
+        <button type="button" class="px-3 py-1.5 bg-slate-200 hover:bg-slate-300 text-slate-800 font-bold rounded transition" @click="$emit('close')">
+          취소
+        </button>
+        <button type="button" class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded transition shadow-xs" @click="$emit('confirm')">
+          확인
+        </button>
+      </div>
+    </template>
+  </Dialog>
 </template>
 
 <script setup lang="ts">
-defineProps<{
+import Dialog from 'primevue/dialog';
+
+const props = defineProps<{
   isOpen: boolean;
   title?: string;
 }>();
 
-defineEmits(['close', 'confirm']);
+const emit = defineEmits(['close', 'confirm']);
+
+const onVisibleChange = (val: boolean) => {
+  if (!val) {
+    emit('close');
+  }
+};
 </script>
diff --git a/src/frontend/src/components/primitives/SelectInput.vue b/src/frontend/src/components/primitives/SelectInput.vue
index e60ffef2..febcb8f1 100644
--- a/src/frontend/src/components/primitives/SelectInput.vue
+++ b/src/frontend/src/components/primitives/SelectInput.vue
@@ -1,27 +1,44 @@
-<!-- Primitive UI Component: SelectInput (WBS-COMP-1.2) -->
+<!-- Primitive Layer: SelectInput (PrimeVue Select Adapter Wrapper) -->
 <template>
   <div class="primitive-select-wrapper w-full">
-    <select
+    <Select
       :id="id"
-      :value="modelValue"
+      :modelValue="modelValue"
+      :options="formattedOptions"
+      optionLabel="label"
+      optionValue="value"
       :disabled="disabled"
-      class="primitive-select w-full h-9 px-3 border border-slate-300 rounded text-xs text-slate-900 font-medium bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none disabled:bg-slate-100 disabled:text-slate-500 disabled:cursor-not-allowed"
-      @change="$emit('update:modelValue', ($event.target as HTMLSelectElement).value)"
-    >
-      <option v-for="opt in options" :key="opt" :value="opt">
-        {{ opt }}
-      </option>
-    </select>
+      class="primitive-select w-full h-9 border border-slate-300 rounded text-xs text-slate-900 font-medium bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 disabled:bg-slate-100 disabled:text-slate-500"
+      @update:modelValue="onSelectChange"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
-defineProps<{
+import { computed } from 'vue';
+import Select from 'primevue/select';
+
+const props = defineProps<{
   id?: string;
   modelValue?: string | number;
-  options: string[];
+  options: Array<string | { label: string; value: string | number }>;
   disabled?: boolean;
 }>();
 
-defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const formattedOptions = computed(() => {
+  if (!props.options) return [];
+  return props.options.map(opt => {
+    if (typeof opt === 'string') {
+      return { label: opt, value: opt };
+    }
+    return opt;
+  });
+});
+
+const onSelectChange = (val: any) => {
+  emit('update:modelValue', val);
+  emit('change', val);
+};
 </script>
diff --git a/src/frontend/src/components/primitives/TextInput.vue b/src/frontend/src/components/primitives/TextInput.vue
index 5c32f553..5ff2686a 100644
--- a/src/frontend/src/components/primitives/TextInput.vue
+++ b/src/frontend/src/components/primitives/TextInput.vue
@@ -1,22 +1,22 @@
-<!-- Primitive UI Components Layer: TextInput -->
+<!-- Primitive Layer: TextInput (PrimeVue Adapter Wrapper) -->
 <template>
   <div class="primitive-input-wrapper relative w-full flex items-center">
-    <input
+    <InputText
       :id="id"
       :type="type || 'text'"
-      :value="modelValue"
+      :modelValue="modelValue"
       :placeholder="placeholder"
       :disabled="disabled"
       :readonly="readonly"
       class="primitive-input w-full h-9 pl-3 pr-8 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 disabled:text-slate-500 disabled:cursor-not-allowed readonly:bg-slate-50 readonly:text-slate-700 transition shadow-xs"
-      @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
+      @update:modelValue="onUpdateValue"
     />
     <button
       v-if="modelValue && !disabled && !readonly"
       type="button"
-      class="absolute right-2 text-slate-400 hover:text-slate-600 text-xs font-bold w-4 h-4 rounded-full flex items-center justify-center bg-slate-100 hover:bg-slate-200"
+      class="absolute right-2 text-slate-400 hover:text-slate-600 text-xs font-bold w-4 h-4 rounded-full flex items-center justify-center bg-slate-100 hover:bg-slate-200 transition"
       title="Clear text"
-      @click="$emit('update:modelValue', '')"
+      @click="onClear"
     >
       ✕
     </button>
@@ -24,7 +24,9 @@
 </template>
 
 <script setup lang="ts">
-defineProps<{
+import InputText from 'primevue/inputtext';
+
+const props = defineProps<{
   id?: string;
   type?: string;
   modelValue?: string | number;
@@ -33,5 +35,16 @@ defineProps<{
   readonly?: boolean;
 }>();
 
-defineEmits(['update:modelValue']);
+const emit = defineEmits(['update:modelValue', 'change', 'clear']);
+
+const onUpdateValue = (val: string | undefined) => {
+  const finalVal = val ?? '';
+  emit('update:modelValue', finalVal);
+  emit('change', finalVal);
+};
+
+const onClear = () => {
+  emit('update:modelValue', '');
+  emit('clear');
+};
 </script>