@uniai-fe/uds-templates 0.5.22 → 0.5.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.5.22",
+  "version": "0.5.24",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,

package/src/auth/login/markup/FormField.tsx

@@ -106,6 +106,24 @@ export default function AuthLoginFormField({
   const idLabel = idField?.label ?? texts?.idLabel ?? "아이디";
   const passwordLabel =
     passwordField?.label ?? texts?.passwordLabel ?? "비밀번호";
+  const isLoginSubmitting = Boolean(isSubmitting);
+  // Button loading은 readonly/aria-busy 같은 상태 의미를 제공하지만, 라벨은 자동 변경하지 않는다.
+  // pending 중에는 눈에 보이는 문구도 바꿔 사용자가 "요청 처리 중"임을 즉시 알 수 있게 한다.
+  const submitLabel = isLoginSubmitting
+    ? (texts?.submitting ?? "로그인 중...")
+    : (texts?.submit ?? "로그인");
+  const idInputProps = {
+    ...(idField?.inputProps ?? {}),
+    // 별도 fieldset 계층을 만들지 않고 primitives input에 직접 pending 잠금을 전달한다.
+    // readOnly는 현재 입력값을 유지하면서 편집만 막기 때문에, API 지연 중 RHF 값 흐름을 건드리지 않는다.
+    readOnly: isLoginSubmitting || idField?.inputProps?.readOnly,
+  };
+  const passwordInputProps = {
+    ...(passwordField?.inputProps ?? {}),
+    // 비밀번호 필드도 아이디와 같은 pending 잠금 정책을 따른다.
+    // disabled 대신 readOnly를 써서 제출 중 값 보존과 UI 잠금을 함께 맞춘다.
+    readOnly: isLoginSubmitting || passwordField?.inputProps?.readOnly,
+  };
 
   // aria-busy는 외부 로그인 요청 진행 상태만 전달한다.
   // 실제 사용자 피드백 modal/문구는 서비스 앱의 Modal.Alert/Dialog 흐름에서 처리한다.
@@ -113,7 +131,7 @@ export default function AuthLoginFormField({
     <form
       className="auth-login-form"
       {...formAttr}
-      aria-busy={Boolean(isSubmitting) || undefined}
+      aria-busy={isLoginSubmitting || undefined}
       onSubmit={handleFormSubmit}
     >
       <div className="auth-login-fields">
@@ -129,7 +147,7 @@ export default function AuthLoginFormField({
               ? `${idLabel}를 입력해 주세요`
               : "아이디를 입력해 주세요")
           }
-          inputProps={idField?.inputProps}
+          inputProps={idInputProps}
           templateProps={idField?.templateProps}
         />
         {/* 비밀번호 필드: PasswordInput 특성만 다르고 나머지 구조는 동일하다. */}
@@ -142,7 +160,7 @@ export default function AuthLoginFormField({
             texts?.passwordPlaceholder ??
             "비밀번호를 입력해 주세요"
           }
-          inputProps={passwordField?.inputProps}
+          inputProps={passwordInputProps}
           templateProps={passwordField?.templateProps}
         />
         <Button.Default
@@ -151,9 +169,13 @@ export default function AuthLoginFormField({
           size="xlarge"
           priority="primary"
           block
+          // 외부 pending 중에는 primitives Button의 loading 경로를 사용한다.
+          // Button.Default는 loading=true일 때 readonly 상태와 aria-busy를 적용하므로,
+          // "값은 채워졌지만 로그인 요청 처리 중"인 상태를 disabled-only 상태와 구분할 수 있다.
+          loading={isLoginSubmitting}
           disabled={disabled}
         >
-          {texts?.submit ?? "로그인"}
+          {submitLabel}
         </Button.Default>
       </div>
     </form>

package/src/auth/login/types/props.ts

@@ -223,6 +223,7 @@ export interface AuthLoginPasswordFieldOptions extends AuthLoginFieldProps<Input
  * @property {ReactNode} [passwordLabel] 비밀번호 필드 기본 라벨
  * @property {string} [passwordPlaceholder] 비밀번호 필드 기본 placeholder
  * @property {ReactNode} [submit] submit 버튼 라벨
+ * @property {ReactNode} [submitting] 로그인 요청 pending 중 submit 버튼 라벨
  */
 export interface AuthLoginFieldTexts {
   /**
@@ -245,6 +246,10 @@ export interface AuthLoginFieldTexts {
    * submit 버튼 라벨
    */
   submit?: ReactNode;
+  /**
+   * 로그인 요청 pending 중 submit 버튼 라벨
+   */
+  submitting?: ReactNode;
 }
 
 /**

package/src/cctv/apis/server.ts

@@ -159,6 +159,7 @@ export async function getServerCompanyList({
       total_count: 0,
     },
     errors: [],
+    meta: { locale: "ko", request_id: "" },
   };
   const API_OPTION = {
     domain,

package/src/service-inquiry/hooks/useNetworkError.ts

@@ -1,5 +1,6 @@
 "use client";
 
+import { useCallback } from "react";
 import { useAtom } from "jotai";
 import { serviceInquiryNetworkErrorsAtom } from "../jotai";
 import type {
@@ -21,22 +22,25 @@ export function useServiceInquiryNetworkError(): UseServiceInquiryNetworkErrorRe
   );
 
   const reportNetworkError: UseServiceInquiryNetworkErrorReturn["reportNetworkError"] =
-    (nextError: ServiceInquiryNetworkError) => {
-      setNetworkErrors(currentErrors =>
-        [
-          {
-            ...nextError,
-            timestamp: nextError.timestamp ?? new Date().toISOString(),
-          },
-          ...currentErrors,
-        ].slice(0, 5),
-      );
-    };
+    useCallback(
+      (nextError: ServiceInquiryNetworkError) => {
+        setNetworkErrors(currentErrors =>
+          [
+            {
+              ...nextError,
+              timestamp: nextError.timestamp ?? new Date().toISOString(),
+            },
+            ...currentErrors,
+          ].slice(0, 5),
+        );
+      },
+      [setNetworkErrors],
+    );
 
   const clearNetworkErrors: UseServiceInquiryNetworkErrorReturn["clearNetworkErrors"] =
-    () => {
+    useCallback(() => {
       setNetworkErrors([]);
-    };
+    }, [setNetworkErrors]);
 
   return {
     networkErrors,