@uniai-fe/uds-templates 0.5.25 → 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.25",
+  "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;
   /**
    * 링크/버튼 문구 옵션
    */

package/src/cctv/apis/client.ts

@@ -16,11 +16,13 @@ export const getClientCctvCompanyList = async ({
 
 export const useQueryCctvCompanyList = ({
   url,
+  queryKeyDeps = [],
 }: {
   url?: string;
+  queryKeyDeps?: readonly unknown[];
 }): UseQueryResult<API_Res_CctvCompany> =>
   useQuery({
-    queryKey: ["cctv_company_list", url],
+    queryKey: ["cctv_company_list", url, ...queryKeyDeps],
     queryFn: () => getClientCctvCompanyList({ url }),
   });
 

package/src/cctv/hooks/useCompanyData.tsx

@@ -14,6 +14,7 @@ import type {
  * @hook
  * @param {UseCctvCompanyDataParams} [params] 훅 파라미터
  * @property {string} [url] 회사 리스트 API URL (Provider에서 주입된 기본값 대신 사용)
+ * @property {readonly unknown[]} [queryKeyDeps] 회사 리스트 캐시 분리용 query key deps
  * @return {UseCctvCompanyDataReturn} 회사 리스트 쿼리 반환값
  * @desc
  * return {
@@ -26,8 +27,8 @@ import type {
 export default function useCctvCompanyData(
   params?: UseCctvCompanyDataParams,
 ): UseCctvCompanyDataReturn {
-  // 변경: list 조회 계약은 URL만 override 대상으로 유지한다.
-  const { url } = params || {};
+  // 변경: list 조회 계약은 URL override와 캐시 분리 deps만 소비한다.
+  const { url, queryKeyDeps } = params || {};
 
   const { listUrl } = useCctvApiUrl();
   const resolvedUrl = useMemo(() => url ?? listUrl, [url, listUrl]);
@@ -36,6 +37,7 @@ export default function useCctvCompanyData(
   // URL에 맞춰 회사 리스트 API를 호출한다.
   const { data, isFetching, isError, ...rest } = useQueryCctvCompanyList({
     url: resolvedUrl,
+    queryKeyDeps,
   });
 
   // 응답 데이터를 react-hook-form rawData 필드로 반영한다.

package/src/cctv/types/hook.ts

@@ -114,12 +114,17 @@ export interface UseCctvRtcStreamReturn extends UseCctvRtcStreamState {
 /**
  * CCTV; useCctvCompanyData params
  * @property {string} [url] 업체 리스트 API URL
+ * @property {readonly unknown[]} [queryKeyDeps] 업체 리스트 캐시 분리용 query key deps
  */
 export interface UseCctvCompanyDataParams {
   /**
    * 업체 리스트 API URL
    */
   url?: string;
+  /**
+   * 업체 리스트 캐시 분리용 query key deps
+   */
+  queryKeyDeps?: readonly unknown[];
 }
 
 /**