+
{/* 고정 접두어 */}
{templatePrefix && (
-
+
{templatePrefix}
)}
@@ -945,13 +945,13 @@ export const V2Input = forwardRef((props, ref) =>
}
}}
placeholder="입력"
- className="h-full min-w-[60px] flex-1 bg-transparent px-2 text-sm focus-visible:outline-none"
+ className="h-full min-w-[60px] flex-1 border-0 bg-transparent px-2 text-sm ring-0"
disabled={disabled || isGeneratingNumbering}
- style={inputTextStyle}
+ style={{ ...inputTextStyle, outline: 'none' }}
/>
{/* 고정 접미어 */}
{templateSuffix && (
-
+
{templateSuffix}
)}
diff --git a/frontend/components/v2/V2Select.tsx b/frontend/components/v2/V2Select.tsx
index 959abe05..9062e7bc 100644
--- a/frontend/components/v2/V2Select.tsx
+++ b/frontend/components/v2/V2Select.tsx
@@ -901,7 +901,7 @@ export const V2Select = forwardRef((props, ref) =
): SelectOption[] => {
const result: SelectOption[] = [];
for (const item of items) {
- const prefix = depth > 0 ? " ".repeat(depth) + "└ " : "";
+ const prefix = depth > 0 ? "\u00A0\u00A0\u00A0".repeat(depth) + "└ " : "";
result.push({
value: item.valueCode, // 🔧 valueCode를 value로 사용
label: prefix + item.valueLabel,
diff --git a/frontend/lib/hooks/useDialogAutoValidation.ts b/frontend/lib/hooks/useDialogAutoValidation.ts
index eefa9342..66e4f20b 100644
--- a/frontend/lib/hooks/useDialogAutoValidation.ts
+++ b/frontend/lib/hooks/useDialogAutoValidation.ts
@@ -98,6 +98,16 @@ export function useDialogAutoValidation(contentEl: HTMLElement | null) {
return el instanceof HTMLSelectElement && el.hasAttribute("aria-hidden");
}
+ // 복합 입력 필드(채번 세그먼트 등)의 시각적 테두리 컨테이너 탐지
+ // input 자체에 border가 없고 부모가 border를 가진 경우 부모를 반환
+ function findBorderContainer(input: TargetEl): HTMLElement {
+ const parent = input.parentElement;
+ if (parent && parent.classList.contains("border")) {
+ return parent;
+ }
+ return input;
+ }
+
function isEmpty(input: TargetEl): boolean {
if (input instanceof HTMLButtonElement) {
// Radix Select: data-placeholder 속성이 자식 span에 있으면 미선택 상태
@@ -120,20 +130,24 @@ export function useDialogAutoValidation(contentEl: HTMLElement | null) {
}
function markError(input: TargetEl) {
- input.setAttribute(ERROR_ATTR, "true");
+ const container = findBorderContainer(input);
+ container.setAttribute(ERROR_ATTR, "true");
errorFields.add(input);
showErrorMsg(input);
}
function clearError(input: TargetEl) {
- input.removeAttribute(ERROR_ATTR);
+ const container = findBorderContainer(input);
+ container.removeAttribute(ERROR_ATTR);
errorFields.delete(input);
removeErrorMsg(input);
}
// 빈 필수 필드 아래에 경고 문구 삽입 (레이아웃 영향 없는 zero-height wrapper)
+ // 복합 입력(채번 세그먼트 등)은 border 컨테이너 바깥에 삽입
function showErrorMsg(input: TargetEl) {
- if (input.parentElement?.querySelector(`.${MSG_WRAPPER_CLASS}`)) return;
+ const container = findBorderContainer(input);
+ if (container.parentElement?.querySelector(`.${MSG_WRAPPER_CLASS}`)) return;
const wrapper = document.createElement("div");
wrapper.className = MSG_WRAPPER_CLASS;
@@ -142,17 +156,19 @@ export function useDialogAutoValidation(contentEl: HTMLElement | null) {
msg.textContent = "필수 입력 항목입니다";
wrapper.appendChild(msg);
- input.insertAdjacentElement("afterend", wrapper);
+ container.insertAdjacentElement("afterend", wrapper);
}
function removeErrorMsg(input: TargetEl) {
- const wrapper = input.parentElement?.querySelector(`.${MSG_WRAPPER_CLASS}`);
+ const container = findBorderContainer(input);
+ const wrapper = container.parentElement?.querySelector(`.${MSG_WRAPPER_CLASS}`);
if (wrapper) wrapper.remove();
}
function highlightField(input: TargetEl) {
- input.setAttribute(HIGHLIGHT_ATTR, "true");
- input.addEventListener("animationend", () => input.removeAttribute(HIGHLIGHT_ATTR), { once: true });
+ const container = findBorderContainer(input);
+ container.setAttribute(HIGHLIGHT_ATTR, "true");
+ container.addEventListener("animationend", () => container.removeAttribute(HIGHLIGHT_ATTR), { once: true });
if (input instanceof HTMLButtonElement) {
input.click();