@uniai-fe/uds-templates 0.5.26 → 0.5.27

package/dist/styles.css

@@ -967,17 +967,27 @@
 
 .auth-login-find-account-button {
   flex: 1;
+  background: none;
+  border: 0;
+  cursor: pointer;
   font-size: 13px;
   line-height: 1em;
   font-weight: 400;
   padding-inline: var(--spacing-padding-1);
+  text-decoration: none;
 }
 .auth-login-find-account-button:hover {
   color: var(--color-primary-standard);
 }
+.auth-login-find-account-button:disabled {
+  cursor: default;
+}
 .auth-login-find-account-button span {
   color: var(--color-label-standard);
 }
+.auth-login-find-account-button:disabled span {
+  color: var(--color-label-neutral);
+}
 
 .auth-find-id-button {
   text-align: right;

package/package.json

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

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

@@ -38,6 +38,7 @@ export default function AuthLoginContainer({
       {/* 링크 옵션이 부분적으로만 넘어와도 내부에서 존재하는 항목만 렌더링한다. */}
       <AuthLoginLinkButtons
         linkOptions={linkOptions}
+        isSubmitting={fieldOptions.isSubmitting}
         texts={texts}
         onFindPasswordClick={onFindPasswordLinkClick}
       />

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

@@ -7,17 +7,20 @@ import type { AuthLoginLinkButtonsProps } from "../types";
  * @component
  * @param {AuthLoginLinkButtonsProps} props
  * @param {AuthLoginLinkOptions} [props.linkOptions] 계정 관련 링크 옵션
+ * @param {boolean} [props.isSubmitting] 외부 로그인 요청 pending 여부
  * @param {AuthLoginLinkTexts} [props.texts] 링크/버튼 문구 옵션
  * @param {() => void} [props.onFindPasswordClick] 비밀번호 찾기 커스텀 클릭 핸들러
  */
 export default function AuthLoginLinkButtons({
   linkOptions,
+  isSubmitting,
   texts,
   onFindPasswordClick,
 }: AuthLoginLinkButtonsProps) {
   const hrefFindId = linkOptions?.find?.id;
   const hrefFindPassword = linkOptions?.find?.password;
   const hrefSignup = linkOptions?.signup;
+  const isLinkInteractionDisabled = Boolean(isSubmitting);
 
   if (!hrefFindId && !hrefFindPassword && !hrefSignup) {
     return null;
@@ -27,14 +30,23 @@ export default function AuthLoginLinkButtons({
     <div className="auth-login-util-container">
       {(hrefFindId || hrefFindPassword) && (
         <div className="auth-login-find-account">
-          {hrefFindId && (
-            <Link
-              href={hrefFindId}
-              className="auth-login-find-account-button auth-find-id-button"
-            >
-              <span>{texts?.findId ?? "아이디 찾기"}</span>
-            </Link>
-          )}
+          {hrefFindId &&
+            (isLinkInteractionDisabled ? (
+              <button
+                type="button"
+                className="auth-login-find-account-button auth-find-id-button"
+                disabled
+              >
+                <span>{texts?.findId ?? "아이디 찾기"}</span>
+              </button>
+            ) : (
+              <Link
+                href={hrefFindId}
+                className="auth-login-find-account-button auth-find-id-button"
+              >
+                <span>{texts?.findId ?? "아이디 찾기"}</span>
+              </Link>
+            ))}
           {hrefFindId && hrefFindPassword && <Divider />}
           {/* 비밀번호 찾기 링크가 있을 때만 버튼/링크를 선택적으로 노출한다. */}
           {hrefFindPassword &&
@@ -42,10 +54,19 @@ export default function AuthLoginLinkButtons({
               <button
                 type="button"
                 className="auth-login-find-account-button auth-find-password-button"
+                disabled={isLinkInteractionDisabled}
                 onClick={onFindPasswordClick}
               >
                 <span>{texts?.findPassword ?? "비밀번호 찾기"}</span>
               </button>
+            ) : isLinkInteractionDisabled ? (
+              <button
+                type="button"
+                className="auth-login-find-account-button auth-find-password-button"
+                disabled
+              >
+                <span>{texts?.findPassword ?? "비밀번호 찾기"}</span>
+              </button>
             ) : (
               <Link
                 href={hrefFindPassword}
@@ -59,15 +80,27 @@ export default function AuthLoginLinkButtons({
       {hrefSignup && (
         <div className="auth-login-signup">
           {/* 회원가입 링크가 있을 때만 signup CTA를 유지한다. */}
-          <Button.Rounded
-            as={Link}
-            href={hrefSignup}
-            className="auth-login-signup-button"
-            priority="tertiary"
-            size="small"
-          >
-            {texts?.signup ?? "회원가입"}
-          </Button.Rounded>
+          {isLinkInteractionDisabled ? (
+            <Button.Rounded
+              type="button"
+              disabled
+              className="auth-login-signup-button"
+              priority="tertiary"
+              size="small"
+            >
+              {texts?.signup ?? "회원가입"}
+            </Button.Rounded>
+          ) : (
+            <Button.Rounded
+              as={Link}
+              href={hrefSignup}
+              className="auth-login-signup-button"
+              priority="tertiary"
+              size="small"
+            >
+              {texts?.signup ?? "회원가입"}
+            </Button.Rounded>
+          )}
         </div>
       )}
     </div>

package/src/auth/login/styles/login.scss

@@ -28,18 +28,30 @@
 .auth-login-find-account-button {
   flex: 1;
 
+  background: none;
+  border: 0;
+  cursor: pointer;
   font-size: 13px;
   line-height: 1em;
   font-weight: 400;
   padding-inline: var(--spacing-padding-1);
+  text-decoration: none;
 
   &:hover {
     color: var(--color-primary-standard);
   }
 
+  &:disabled {
+    cursor: default;
+  }
+
   span {
     color: var(--color-label-standard);
   }
+
+  &:disabled span {
+    color: var(--color-label-neutral);
+  }
 }
 
 .auth-find-id-button {

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

@@ -353,6 +353,7 @@ export interface AuthLoginLinkOptions {
 /**
  * 로그인 링크 버튼 props
  * @property {AuthLoginLinkOptions} [linkOptions] 계정 관련 링크 옵션
+ * @property {boolean} [isSubmitting] 외부 로그인 요청 pending 여부
  * @property {AuthLoginLinkTexts} [texts] 링크/버튼 문구 옵션
  * @property {() => void} [onFindPasswordClick] 비밀번호 찾기 링크버튼 클릭 콜백 이벤트
  */
@@ -361,6 +362,10 @@ export interface AuthLoginLinkButtonsProps {
    * 계정 관련 링크 옵션
    */
   linkOptions?: AuthLoginLinkOptions;
+  /**
+   * 외부 로그인 요청 pending 여부
+   */
+  isSubmitting?: boolean;
   /**
    * 링크/버튼 문구 옵션
    */