feat: Enhance modal button behavior and validation feedback

- Updated modal button handling to disable all buttons by default, with exceptions for specific button types (e.g., cancel, close, delete).
- Introduced a new validation mechanism that visually indicates empty required fields with red borders and error messages after a delay.
- Improved the `useDialogAutoValidation` hook to manage button states based on field validation, ensuring a smoother user experience.
- Added CSS animations to prevent flickering during validation state changes.

Made-with: Cursor

frontend/lib/hooks/useDialogAutoValidation.ts

@@ -1,11 +1,28 @@
 "use client";
 
-import { useEffect, useRef, type RefObject } from "react";
+import { useEffect } from "react";
 import { useTabStore } from "@/stores/tabStore";
 
 const ERROR_ATTR = "data-auto-validation-error";
 const DISABLED_ATTR = "data-validation-disabled";
-const ACTION_BTN_SELECTOR = '[data-variant="default"]';
+const INTERACTED_ATTR = "data-validation-interacted";
+/** 비활성화에서 제외할 버튼 셀렉터 (취소, 닫기, 삭제, 폼 컨트롤 등) */
+const EXEMPT_BTN_SELECTOR = [
+  '[data-variant="outline"]',
+  '[data-variant="ghost"]',
+  '[data-variant="destructive"]',
+  '[data-variant="secondary"]',
+  '[role="combobox"]',
+  '[role="tab"]',
+  '[role="switch"]',
+  '[role="radio"]',
+  '[role="checkbox"]',
+  '[data-slot="select-trigger"]',
+  "[data-dialog-close]",
+].join(", ");
+const POLL_INTERVAL = 300;
+
+type TargetEl = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | HTMLButtonElement;
 
 /**
  * 모달 자동 폼 검증 훅
@@ -14,31 +31,27 @@ const ACTION_BTN_SELECTOR = '[data-variant="default"]';
  *   - useTabStore.mode === "user" (사용자 모드)
  *   - 필수 필드(label 내 <span>*</span>)가 1개 이상 존재
  *
- * 동작:
- *   - Label 내부 <span> 안의 * 문자로 필수 필드 자동 탐지
- *   - 빈 필수 필드에 빨간 테두리 + 에러 메시지 주입
- *   - data-variant="default" 버튼 비활성화 (저장/등록/수정/확인)
+ * 지원 요소:
+ *   - input, textarea, select (네이티브 폼 요소)
+ *   - button[role="combobox"] (Radix Select / V2Select 드롭다운)
+ *
+ * 설계: docs/ycshin-node/필수입력항목_자동검증_설계.md
  */
-export function useDialogAutoValidation(
-  contentRef: RefObject<HTMLElement | null>,
-) {
+export function useDialogAutoValidation(contentEl: HTMLElement | null) {
   const mode = useTabStore((s) => s.mode);
-  const activeRef = useRef(false);
 
   useEffect(() => {
     if (mode !== "user") return;
 
-    const el = contentRef.current;
+    const el = contentEl;
     if (!el) return;
 
-    activeRef.current = true;
     const injected = new Set<HTMLElement>();
-    let isValidating = false;
+    let validationLock = false;
+    const prevEmpty = new Map<Element, boolean>();
 
-    type InputEl = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
-
-    function findRequiredFields(): Map<InputEl, string> {
-      const fields = new Map<InputEl, string>();
+    function findRequiredFields(): Map<TargetEl, string> {
+      const fields = new Map<TargetEl, string>();
       if (!el) return fields;
 
       el.querySelectorAll("label").forEach((label) => {
@@ -47,45 +60,72 @@ export function useDialogAutoValidation(
         );
         if (!hasRequiredMark) return;
 
-        const forId =
-          label.getAttribute("for") || (label as HTMLLabelElement).htmlFor;
-        let input: Element | null = null;
+        const forId = label.getAttribute("for") || (label as HTMLLabelElement).htmlFor;
+        let target: TargetEl | null = null;
 
         if (forId) {
           try {
-            input = el!.querySelector(`#${CSS.escape(forId)}`);
+            const found = el!.querySelector(`#${CSS.escape(forId)}`);
+            if (isFormElement(found)) {
+              target = found;
+            } else if (found) {
+              const inner = found.querySelector("input, textarea, select");
+              if (isFormElement(inner) && !isHiddenRadixSelect(inner)) {
+                target = inner;
+              }
+              // 숨겨진 Radix select이거나 폼 요소가 없으면 → 트리거 버튼 탐색
+              if (!target) {
+                const btn = found.querySelector('button[role="combobox"], button[data-slot="select-trigger"]');
+                if (btn instanceof HTMLButtonElement) target = btn;
+              }
+            }
           } catch {
             /* invalid id */
           }
         }
 
-        if (!input) {
-          const parent =
-            label.closest('[class*="space-y"]') || label.parentElement;
-          input = parent?.querySelector("input, textarea, select") || null;
+        if (!target) {
+          const parent = label.closest('[class*="space-y"]') || label.parentElement;
+          if (parent) {
+            const inner = parent.querySelector("input, textarea, select");
+            if (isFormElement(inner) && !isHiddenRadixSelect(inner)) {
+              target = inner;
+            }
+            if (!target) {
+              const btn = parent.querySelector('button[role="combobox"], button[data-slot="select-trigger"]');
+              if (btn instanceof HTMLButtonElement) target = btn;
+            }
+          }
         }
 
-        if (
-          input instanceof HTMLInputElement ||
-          input instanceof HTMLTextAreaElement ||
-          input instanceof HTMLSelectElement
-        ) {
-          const labelText =
-            label.textContent?.replace(/\*/g, "").trim() || "";
-          fields.set(input, labelText);
+        if (target) {
+          const labelText = label.textContent?.replace(/\*/g, "").trim() || "";
+          fields.set(target, labelText);
         }
       });
 
       return fields;
     }
 
-    function isEmpty(input: InputEl): boolean {
+    function isFormElement(el: Element | null): el is HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement {
+      return el instanceof HTMLInputElement || el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement;
+    }
+
+    function isHiddenRadixSelect(el: Element): boolean {
+      return el instanceof HTMLSelectElement && el.hasAttribute("aria-hidden");
+    }
+
+    function isEmpty(input: TargetEl): boolean {
+      if (input instanceof HTMLButtonElement) {
+        // Radix Select: data-placeholder 속성이 자식 span에 있으면 미선택 상태
+        return !!input.querySelector("[data-placeholder]");
+      }
       return input.value.trim() === "";
     }
 
     function validate() {
-      if (isValidating) return;
-      isValidating = true;
+      if (validationLock) return;
+      validationLock = true;
 
       try {
         const fields = findRequiredFields();
@@ -94,12 +134,22 @@ export function useDialogAutoValidation(
         let hasEmpty = false;
 
         fields.forEach((_label, input) => {
-          if (isEmpty(input)) {
-            hasEmpty = true;
-            input.classList.add("border-destructive");
+          const isEmptyNow = isEmpty(input);
+          const wasPrevEmpty = prevEmpty.get(input);
 
+          if (isEmptyNow) hasEmpty = true;
+
+          if (wasPrevEmpty === isEmptyNow) return;
+          prevEmpty.set(input, isEmptyNow);
+
+          if (isEmptyNow) {
+            input.setAttribute("data-validation-empty", "true");
             const parent = input.parentElement;
             if (parent && !parent.querySelector(`[${ERROR_ATTR}]`)) {
+              const computed = getComputedStyle(parent);
+              if (computed.position === "static") {
+                parent.style.position = "relative";
+              }
               const p = document.createElement("p");
               p.className = "text-xs text-destructive mt-1";
               p.textContent = "필수 입력 항목입니다";
@@ -108,11 +158,8 @@ export function useDialogAutoValidation(
               injected.add(p);
             }
           } else {
-            input.classList.remove("border-destructive");
-
-            const errorEl = input.parentElement?.querySelector(
-              `[${ERROR_ATTR}]`,
-            );
+            input.removeAttribute("data-validation-empty");
+            const errorEl = input.parentElement?.querySelector(`[${ERROR_ATTR}]`);
             if (errorEl) {
               injected.delete(errorEl as HTMLElement);
               errorEl.remove();
@@ -122,28 +169,35 @@ export function useDialogAutoValidation(
 
         updateButtons(hasEmpty);
       } finally {
-        requestAnimationFrame(() => {
-          isValidating = false;
-        });
+        setTimeout(() => {
+          validationLock = false;
+        }, 0);
       }
     }
 
+    function isExemptButton(btn: HTMLButtonElement): boolean {
+      if (btn.matches(EXEMPT_BTN_SELECTOR)) return true;
+      const actionType = btn.getAttribute("data-action-type");
+      if (actionType && actionType !== "save" && actionType !== "submit") return true;
+      return false;
+    }
+
     function updateButtons(hasErrors: boolean) {
-      el!.querySelectorAll<HTMLButtonElement>(ACTION_BTN_SELECTOR).forEach(
-        (btn) => {
-          if (hasErrors) {
-            btn.setAttribute(DISABLED_ATTR, "true");
-            btn.style.opacity = "0.5";
-            btn.style.cursor = "not-allowed";
-            btn.title = "필수 입력 항목을 모두 채워주세요";
-          } else if (btn.hasAttribute(DISABLED_ATTR)) {
-            btn.removeAttribute(DISABLED_ATTR);
-            btn.style.opacity = "";
-            btn.style.cursor = "";
-            btn.title = "";
-          }
-        },
-      );
+      el!.querySelectorAll<HTMLButtonElement>("button").forEach((btn) => {
+        if (isExemptButton(btn)) return;
+
+        if (hasErrors) {
+          btn.setAttribute(DISABLED_ATTR, "true");
+          btn.style.opacity = "0.5";
+          btn.style.cursor = "not-allowed";
+          btn.title = "필수 입력 항목을 모두 채워주세요";
+        } else if (btn.hasAttribute(DISABLED_ATTR)) {
+          btn.removeAttribute(DISABLED_ATTR);
+          btn.style.opacity = "";
+          btn.style.cursor = "";
+          btn.title = "";
+        }
+      });
     }
 
     function blockClick(e: Event) {
@@ -154,24 +208,37 @@ export function useDialogAutoValidation(
       }
     }
 
-    el.addEventListener("input", validate);
-    el.addEventListener("change", validate);
+    function handleInteraction() {
+      if (!el!.hasAttribute(INTERACTED_ATTR)) {
+        el!.setAttribute(INTERACTED_ATTR, "true");
+      }
+      validate();
+    }
+
+    el.addEventListener("input", handleInteraction);
+    el.addEventListener("change", handleInteraction);
     el.addEventListener("click", blockClick, true);
 
-    const initTimer = setTimeout(validate, 50);
+    validate();
+
+    const pollId = setInterval(validate, POLL_INTERVAL);
 
     const observer = new MutationObserver(() => {
-      if (!isValidating) validate();
+      if (!validationLock) validate();
+    });
+    observer.observe(el, {
+      childList: true,
+      subtree: true,
+      characterData: true,
     });
-    observer.observe(el, { childList: true, subtree: true });
 
     return () => {
-      activeRef.current = false;
-      el.removeEventListener("input", validate);
-      el.removeEventListener("change", validate);
+      el.removeEventListener("input", handleInteraction);
+      el.removeEventListener("change", handleInteraction);
       el.removeEventListener("click", blockClick, true);
-      clearTimeout(initTimer);
+      clearInterval(pollId);
       observer.disconnect();
+      el.removeAttribute(INTERACTED_ATTR);
 
       injected.forEach((p) => p.remove());
       injected.clear();
@@ -183,9 +250,9 @@ export function useDialogAutoValidation(
         (btn as HTMLElement).title = "";
       });
 
-      el.querySelectorAll(".border-destructive").forEach((input) => {
-        input.classList.remove("border-destructive");
+      el.querySelectorAll("[data-validation-empty]").forEach((input) => {
+        input.removeAttribute("data-validation-empty");
       });
     };
-  }, [mode]);
+  }, [mode, contentEl]);
 }