From e1f1aec04fc0db30c700a608a7aca69fd707e3b6 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sun, 26 Jul 2026 03:01:53 +0900
Subject: [PATCH] refactor(frontend): complete full transparent wrapper
 refactoring for primitives, fields, and subcomponents under /components

---
 .../src/components/fields/DateField.vue       | 67 +++++++++++--------
 .../src/components/fields/StringField.vue     | 40 ++++++-----
 .../src/components/primitives/DialogModal.vue | 13 ++--
 .../src/components/primitives/SelectInput.vue | 21 +++++-
 .../src/components/primitives/TextInput.vue   | 15 ++++-
 5 files changed, 101 insertions(+), 55 deletions(-)

diff --git a/src/frontend/src/components/fields/DateField.vue b/src/frontend/src/components/fields/DateField.vue
index 4681cf78..98bd5de7 100644
--- a/src/frontend/src/components/fields/DateField.vue
+++ b/src/frontend/src/components/fields/DateField.vue
@@ -1,27 +1,36 @@
-<!-- Typed Field Layer: DateField (PrimeVue DatePicker Adapter Wrapper) -->
+<!-- Typed Field Layer: DateField (Quant Transparent Adapter Wrapper) -->
 <template>
   <div class="typed-date-field flex flex-col gap-1 w-full">
-    <div class="flex justify-between items-center text-xs">
-      <label v-if="label" class="font-bold text-slate-800">
+    <div class="flex justify-between items-center">
+      <label v-if="label" class="text-xs font-bold text-slate-800">
         {{ label }} <span v-if="required" class="text-rose-600">*</span>
       </label>
       <button
-        v-if="showTodayBtn && !readonly && !disabled"
+        v-if="showTodayBtn && !disabled"
         type="button"
-        class="text-[11px] font-bold text-blue-600 hover:text-blue-800 underline"
+        class="text-[10px] text-blue-600 hover:text-blue-800 font-bold hover:underline"
         @click="setToday"
       >
-        오늘
+        오늘 날짜
       </button>
     </div>
     <DatePicker
-      :modelValue="parsedDate"
+      v-bind="$attrs"
+      :id="id"
+      :modelValue="dateValue"
       dateFormat="yy-mm-dd"
-      :readonly="readonly"
+      :placeholder="placeholder || 'YYYY-MM-DD'"
       :disabled="disabled"
-      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"
-    />
+      class="w-full text-xs"
+      inputClass="w-full 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 disabled:bg-slate-100"
+      showIcon
+      iconDisplay="input"
+      @update:modelValue="onDateChange"
+    >
+      <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+        <slot :name="slotName" v-bind="slotProps || {}"></slot>
+      </template>
+    </DatePicker>
   </div>
 </template>
 
@@ -29,45 +38,45 @@
 import { computed } from 'vue';
 import DatePicker from 'primevue/datepicker';
 
+defineOptions({
+  inheritAttrs: false
+});
+
 const props = defineProps<{
+  id?: string;
   label?: string;
-  modelValue?: string;
+  modelValue?: string | Date;
+  placeholder?: string;
   required?: boolean;
-  readonly?: boolean;
   disabled?: boolean;
   showTodayBtn?: boolean;
 }>();
 
 const emit = defineEmits(['update:modelValue', 'change']);
 
-const parsedDate = computed(() => {
+const dateValue = computed(() => {
   if (!props.modelValue) return null;
+  if (props.modelValue instanceof Date) return props.modelValue;
   const d = new Date(props.modelValue);
   return isNaN(d.getTime()) ? null : d;
 });
 
-const handleChange = (val: any) => {
+const onDateChange = (val: Date | null) => {
   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 yyyy = val.getFullYear();
+  const mm = String(val.getMonth() + 1).padStart(2, '0');
+  const dd = String(val.getDate()).padStart(2, '0');
+  const strVal = `${yyyy}-${mm}-${dd}`;
+  emit('update:modelValue', strVal);
+  emit('change', strVal);
 };
 
 const setToday = () => {
-  const today = new Date().toISOString().substring(0, 10);
-  emit('update:modelValue', today);
-  emit('change', today);
+  const d = new Date();
+  onDateChange(d);
 };
 </script>
diff --git a/src/frontend/src/components/fields/StringField.vue b/src/frontend/src/components/fields/StringField.vue
index 45774d63..a002cce8 100644
--- a/src/frontend/src/components/fields/StringField.vue
+++ b/src/frontend/src/components/fields/StringField.vue
@@ -1,40 +1,48 @@
-<!-- Typed Field Component Layer: StringField -->
+<!-- Typed Field Layer: StringField (Quant Transparent Adapter Wrapper) -->
 <template>
   <div class="typed-string-field flex flex-col gap-1 w-full">
-    <label v-if="label" :for="id" class="text-xs font-bold text-slate-800">
+    <label v-if="label" class="text-xs font-bold text-slate-800">
       {{ label }} <span v-if="required" class="text-rose-600">*</span>
     </label>
-    <input
+    <InputText
+      v-bind="$attrs"
       :id="id"
-      type="text"
-      :value="modelValue"
+      :modelValue="modelValue"
       :placeholder="placeholder"
-      :readonly="readonly"
       :disabled="disabled"
-      class="w-full 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 disabled:text-slate-500 disabled:cursor-not-allowed readonly:bg-slate-50 readonly:text-slate-700"
-      @input="handleInput"
-    />
-    <div v-if="errorMessage" class="text-[11px] text-rose-600 font-semibold mt-0.5">{{ errorMessage }}</div>
+      :readonly="readonly"
+      class="w-full 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 disabled:bg-slate-100 readonly:bg-slate-50"
+      @update:modelValue="onInput"
+    >
+      <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+        <slot :name="slotName" v-bind="slotProps || {}"></slot>
+      </template>
+    </InputText>
   </div>
 </template>
 
 <script setup lang="ts">
+import InputText from 'primevue/inputtext';
+
+defineOptions({
+  inheritAttrs: false
+});
+
 const props = defineProps<{
   id?: string;
   label?: string;
   modelValue?: string;
   placeholder?: string;
   required?: boolean;
-  readonly?: boolean;
   disabled?: boolean;
-  errorMessage?: string;
+  readonly?: boolean;
 }>();
 
 const emit = defineEmits(['update:modelValue', 'change']);
 
-const handleInput = (e: Event) => {
-  const val = (e.target as HTMLInputElement).value;
-  emit('update:modelValue', val);
-  emit('change', val);
+const onInput = (val: string | undefined) => {
+  const finalVal = 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 7370c7e7..55244ff2 100644
--- a/src/frontend/src/components/primitives/DialogModal.vue
+++ b/src/frontend/src/components/primitives/DialogModal.vue
@@ -1,8 +1,9 @@
-<!-- Primitive Layer: DialogModal (PrimeVue Dialog Adapter Wrapper) -->
+<!-- Primitive Layer: DialogModal (Quant Transparent Adapter Wrapper) -->
 <template>
   <Dialog
+    v-bind="$attrs"
     :visible="isOpen"
-    :header="title || '확인'"
+    :header="title"
     :modal="true"
     :closable="true"
     :dismissableMask="true"
@@ -16,7 +17,7 @@
     <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')">
           확인
@@ -29,9 +30,13 @@
 <script setup lang="ts">
 import Dialog from 'primevue/dialog';
 
+defineOptions({
+  inheritAttrs: false
+});
+
 const props = defineProps<{
   isOpen: boolean;
-  title?: string;
+  title: string;
 }>();
 
 const emit = defineEmits(['close', 'confirm']);
diff --git a/src/frontend/src/components/primitives/SelectInput.vue b/src/frontend/src/components/primitives/SelectInput.vue
index febcb8f1..4143d490 100644
--- a/src/frontend/src/components/primitives/SelectInput.vue
+++ b/src/frontend/src/components/primitives/SelectInput.vue
@@ -1,16 +1,24 @@
-<!-- Primitive Layer: SelectInput (PrimeVue Select Adapter Wrapper) -->
+<!-- Primitive Layer: SelectInput (Quant Transparent Adapter Wrapper) -->
 <template>
   <div class="primitive-select-wrapper w-full">
     <Select
+      v-bind="$attrs"
       :id="id"
       :modelValue="modelValue"
       :options="formattedOptions"
       optionLabel="label"
       optionValue="value"
+      :placeholder="placeholder || '선택하세요'"
       :disabled="disabled"
-      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"
+      :showClear="showClear !== false"
+      :filter="filter !== false"
+      class="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"
       @update:modelValue="onSelectChange"
-    />
+    >
+      <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+        <slot :name="slotName" v-bind="slotProps || {}"></slot>
+      </template>
+    </Select>
   </div>
 </template>
 
@@ -18,11 +26,18 @@
 import { computed } from 'vue';
 import Select from 'primevue/select';
 
+defineOptions({
+  inheritAttrs: false
+});
+
 const props = defineProps<{
   id?: string;
   modelValue?: string | number;
   options: Array<string | { label: string; value: string | number }>;
+  placeholder?: string;
   disabled?: boolean;
+  showClear?: boolean;
+  filter?: boolean;
 }>();
 
 const emit = defineEmits(['update:modelValue', 'change']);
diff --git a/src/frontend/src/components/primitives/TextInput.vue b/src/frontend/src/components/primitives/TextInput.vue
index 5ff2686a..10a283b3 100644
--- a/src/frontend/src/components/primitives/TextInput.vue
+++ b/src/frontend/src/components/primitives/TextInput.vue
@@ -1,7 +1,8 @@
-<!-- Primitive Layer: TextInput (PrimeVue Adapter Wrapper) -->
+<!-- Primitive Layer: TextInput (Quant Transparent Adapter Wrapper) -->
 <template>
   <div class="primitive-input-wrapper relative w-full flex items-center">
     <InputText
+      v-bind="$attrs"
       :id="id"
       :type="type || 'text'"
       :modelValue="modelValue"
@@ -10,12 +11,16 @@
       :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"
       @update:modelValue="onUpdateValue"
-    />
+    >
+      <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+        <slot :name="slotName" v-bind="slotProps || {}"></slot>
+      </template>
+    </InputText>
     <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 transition"
-      title="Clear text"
+      title="1-Click 삭제"
       @click="onClear"
     >
       ✕
@@ -26,6 +31,10 @@
 <script setup lang="ts">
 import InputText from 'primevue/inputtext';
 
+defineOptions({
+  inheritAttrs: false
+});
+
 const props = defineProps<{
   id?: string;
   type?: string;