@uniai-fe/uds-templates 0.1.4 → 0.1.6

package/dist/styles.css

@@ -11,15 +11,27 @@
   --frame-device-width,
   480px
   );
-  --uds-modal-overlay-bg: var(--dialog-overlay-bg, rgba(5, 6, 12, 0.55));
-  --uds-modal-surface-bg: var(--color-bg-surface-static-white);
-  --uds-modal-surface-radius: var(--theme-radius-large-1);
-  --uds-modal-surface-shadow: 0px 18px 40px rgba(8, 11, 30, 0.18);
-  --uds-modal-max-width: min(
-  360px,
-  calc(100vw - var(--spacing-padding-10) * 2)
+  --modal-overlay-bg: rgba(5, 6, 12, 0.55);
+  --modal-panel-width: 360px;
+  --modal-panel-max-width: calc(100vw - var(--spacing-padding-10, 32px) * 2);
+  --modal-panel-max-height: calc(100vh - var(--spacing-padding-10, 32px) * 2);
+  --modal-panel-bg: var(--color-bg-surface-static-white);
+  --modal-panel-radius: var(--theme-radius-large-1);
+  --modal-panel-shadow: 0px 18px 40px rgba(8, 11, 30, 0.18);
+  --modal-border-color: var(--color-border-standard-cool-gray, #e4e5e7);
+  --modal-footer-border-color: var(--modal-border-color);
+  --modal-stack-index: 0;
+  --modal-alert-body-color: var(--color-label-standard, #232629);
+  --modal-alert-body-font-size: var(--font-body-small-size, 14px);
+  --modal-dialog-title-color: var(--color-label-strong, #090a0b);
+  --modal-dialog-title-font-size: var(--font-heading-xsmall-size, 20px);
+  --modal-dialog-title-line-height: var(
+  --font-heading-xsmall-line-height,
+  28px
   );
-  --uds-modal-max-height: calc(100vh - var(--spacing-padding-10) * 2);
+  --modal-dialog-title-weight: var(--font-heading-xsmall-weight, 700);
+  --modal-dialog-body-color: var(--color-label-standard, #232629);
+  --modal-dialog-body-font-size: var(--font-body-small-size, 14px);
   --auth-container-max-width: 335px;
   --auth-container-gap: var(--spacing-padding-7, 28px);
   --auth-container-padding-inline: var(--spacing-padding-6, 24px);
@@ -91,7 +103,7 @@
 .uds-modal-root {
   position: fixed;
   inset: 0;
-  z-index: calc(400 + var(--uds-modal-index, 0));
+  z-index: calc(400 + var(--modal-stack-index, 0));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -102,11 +114,11 @@
 .uds-modal-surface {
   position: relative;
   width: 100%;
-  max-width: var(--uds-modal-max-width);
-  max-height: var(--uds-modal-max-height);
-  background-color: var(--uds-modal-surface-bg);
-  border-radius: var(--uds-modal-surface-radius);
-  box-shadow: var(--uds-modal-surface-shadow);
+  max-width: min(var(--modal-panel-width, 360px), var(--modal-panel-max-width, calc(100vw - var(--spacing-padding-10, 32px) * 2)));
+  max-height: var(--modal-panel-max-height, calc(100vh - var(--spacing-padding-10, 32px) * 2));
+  background-color: var(--modal-panel-bg, var(--color-bg-surface-static-white));
+  border-radius: var(--modal-panel-radius, var(--theme-radius-large-1));
+  box-shadow: var(--modal-panel-shadow, 0px 18px 40px rgba(8, 11, 30, 0.18));
   pointer-events: auto;
   display: flex;
   flex-direction: column;
@@ -116,7 +128,7 @@
 .uds-modal-dimmer {
   position: absolute;
   inset: 0;
-  background-color: var(--uds-modal-overlay-bg);
+  background-color: var(--modal-overlay-bg, rgba(5, 6, 12, 0.55));
   pointer-events: auto;
 }
 
@@ -172,13 +184,13 @@
   padding: 0;
   gap: 0;
   min-height: var(--notice-dialog-action-height, 56px);
-  border-top: 1px solid var(--uds-modal-footer-border-color, var(--dialog-border-color, var(--color-border-standard-cool-gray, #e4e5e7)));
+  border-top: 1px solid var(--modal-footer-border-color, var(--color-border-standard-cool-gray, #e4e5e7));
 }
 .uds-modal-footer-buttons[data-appearance=text] .uds-modal-footer-button {
   border-radius: 0;
 }
 .uds-modal-footer-buttons[data-appearance=text] .uds-modal-footer-button + .uds-modal-footer-button {
-  border-left: 1px solid var(--uds-modal-footer-border-color, var(--dialog-border-color, var(--color-border-standard-cool-gray, #e4e5e7)));
+  border-left: 1px solid var(--modal-footer-border-color, var(--color-border-standard-cool-gray, #e4e5e7));
 }
 
 .uds-modal-footer-button-solid {
@@ -194,7 +206,7 @@
 .uds-modal-alert-message {
   padding: var(--spacing-padding-10, 32px) var(--spacing-padding-8, 24px);
   text-align: center;
-  color: var(--dialog-body-color);
+  color: var(--modal-alert-body-color);
   word-break: keep-all;
 }
 .uds-modal-alert-message > p,
@@ -202,7 +214,7 @@
 .uds-modal-alert-message > strong,
 .uds-modal-alert-message > em {
   margin: 0;
-  font-size: var(--dialog-body-font-size);
+  font-size: var(--modal-alert-body-font-size);
   line-height: 1.5em;
   font-weight: var(--font-body-small-weight, 400);
   word-break: inherit;
@@ -223,16 +235,16 @@
 }
 .uds-modal-dialog-header-content > h3 {
   margin: 0;
-  color: var(--dialog-title-color);
-  font-size: var(--dialog-title-font-size);
-  line-height: var(--dialog-title-line-height);
-  font-weight: var(--dialog-title-weight);
+  color: var(--modal-dialog-title-color);
+  font-size: var(--modal-dialog-title-font-size);
+  line-height: var(--modal-dialog-title-line-height);
+  font-weight: var(--modal-dialog-title-weight);
 }
 
 .uds-modal-dialog-body-content {
   padding: var(--spacing-padding-7, 20px) var(--spacing-padding-6, 16px);
   text-align: center;
-  color: var(--dialog-body-color);
+  color: var(--modal-dialog-body-color);
   word-break: keep-all;
 }
 .uds-modal-dialog-body-content > p,
@@ -240,7 +252,7 @@
 .uds-modal-dialog-body-content > strong,
 .uds-modal-dialog-body-content > em {
   margin: 0;
-  font-size: var(--dialog-body-font-size);
+  font-size: var(--modal-dialog-body-font-size);
   line-height: 1.5em;
   font-weight: var(--font-body-small-weight, 400);
   word-break: inherit;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,
@@ -12,7 +12,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "packageManager": "pnpm@10.26.2",
+  "packageManager": "pnpm@10.27.0",
   "engines": {
     "node": ">=24",
     "pnpm": ">=10"
@@ -73,9 +73,9 @@
     "eslint": "^9.39.2",
     "next": "^15.5.9",
     "prettier": "^3.7.4",
-    "react-hook-form": "^7.69.0",
+    "react-hook-form": "^7.70.0",
     "jotai": "^2.16.1",
-    "sass": "^1.97.1",
+    "sass": "^1.97.2",
     "typescript": "~5.9.3"
   }
 }

package/src/auth/signup/markup/VerificationForm.tsx

@@ -28,9 +28,38 @@ import { getSignupFieldDefaultValue } from "../utils/getSignupFieldDefaultValue"
 import CheckAgreeIcon from "../img/check-agree.svg";
 import ChevronOpenDetailIcon from "../img/chevron-open-detail.svg";
 
-const DEFAULT_SUBMIT_LABEL = "다음";
+const INITIAL_AGREEMENT_LABEL = "동의하고 진행하기";
 const REQUEST_CODE_LABEL = "인증코드 요청";
 const RESEND_CODE_LABEL = "인증번호 재요청";
+const COMPLETE_LABEL = "완료";
+
+const clampCodeLength = (length: number) =>
+  Math.max(4, Math.min(8, length ?? 6));
+
+const resolveCodeLength = (preferred?: number, fallback?: number): number => {
+  if (typeof preferred === "number" && Number.isFinite(preferred)) {
+    return clampCodeLength(preferred);
+  }
+  if (typeof fallback === "number" && Number.isFinite(fallback)) {
+    return clampCodeLength(fallback);
+  }
+  return clampCodeLength(6);
+};
+
+const resolveCodeValue = (
+  inputProps?: EmailInputProps["codeInputProps"],
+): string => {
+  if (!inputProps) {
+    return "";
+  }
+  if (typeof inputProps.value === "string") {
+    return inputProps.value;
+  }
+  if (typeof inputProps.defaultValue === "string") {
+    return inputProps.defaultValue;
+  }
+  return "";
+};
 
 /**
  * 회원가입 Step2; 약관 동의 + 이메일 인증
@@ -42,6 +71,8 @@ const RESEND_CODE_LABEL = "인증번호 재요청";
  * @param {(options?: AuthSignupAgreementToggleAllOptions) => void} props.onToggleAll 전체 동의(필수 only) 토글
  * @param {(agreementId: string) => void} [props.onOpenAgreementDetail] 약관 상세 보기
  * @param {React.FormHTMLAttributes<HTMLFormElement>} [props.formAttr] form attr
+ * @param {AuthSignupVerificationProps["verificationState"]} [props.verificationState] 수동 verify state
+ * @param {boolean} [props.verificationReady] CTA 활성화 여부 override
  * @param {import("react").ReactNode} [props.submitLabel] CTA 라벨
  */
 export function AuthSignupVerificationForm({
@@ -53,6 +84,9 @@ export function AuthSignupVerificationForm({
   onOpenAgreementDetail,
   formAttr,
   submitLabel,
+  submitDisabled,
+  verificationState,
+  verificationReady,
   onSubmit,
 }: AuthSignupVerificationProps) {
   const [openedAgreementId, setOpenedAgreementId] = useState<string | null>(
@@ -139,12 +173,66 @@ export function AuthSignupVerificationForm({
         requestButtonDisabled: undefined,
       };
 
-  const shouldRequestCode =
-    allRequiredChecked && !codeRequested && Boolean(emailRequestHandler);
-  const ctaLabel = shouldRequestCode
-    ? REQUEST_CODE_LABEL
-    : (submitLabel ?? DEFAULT_SUBMIT_LABEL);
-  const ctaDisabled = disabled || !allRequiredChecked;
+  const codeVerificationMeta = useMemo(() => {
+    const value = resolveCodeValue(normalizedEmailFieldProps.codeInputProps);
+    const length = resolveCodeLength(
+      normalizedEmailFieldProps.codeLength,
+      normalizedEmailFieldProps.codeInputProps?.length,
+    );
+    const ready =
+      Boolean(normalizedEmailFieldProps.codeVisible) && value.length === length;
+
+    return {
+      ready,
+    };
+  }, [
+    normalizedEmailFieldProps.codeInputProps,
+    normalizedEmailFieldProps.codeLength,
+    normalizedEmailFieldProps.codeVisible,
+  ]);
+
+  const isRequestStage = Boolean(emailRequestHandler) && !codeRequested;
+  const hasVerificationFlow = isRequestStage || codeRequested;
+  const requestReady = allRequiredChecked && !disabled;
+  const derivedVerificationReady = hasVerificationFlow
+    ? codeRequested
+      ? codeVerificationMeta.ready
+      : requestReady
+    : !disabled;
+  const resolvedVerificationReady =
+    typeof verificationReady === "boolean"
+      ? verificationReady
+      : derivedVerificationReady;
+  const resolvedVerificationState =
+    verificationState ??
+    (() => {
+      if (!hasVerificationFlow) {
+        return "idle";
+      }
+      if (!codeRequested) {
+        if (!allRequiredChecked) {
+          return "agreements-pending";
+        }
+        return resolvedVerificationReady ? "request-ready" : "idle";
+      }
+      return resolvedVerificationReady ? "code-ready" : "code-pending";
+    })();
+
+  const derivedCtaLabel = (() => {
+    if (!hasVerificationFlow) {
+      return INITIAL_AGREEMENT_LABEL;
+    }
+    if (codeRequested) {
+      return COMPLETE_LABEL;
+    }
+    return resolvedVerificationReady
+      ? REQUEST_CODE_LABEL
+      : INITIAL_AGREEMENT_LABEL;
+  })();
+
+  const ctaLabel = submitLabel ?? derivedCtaLabel;
+  const ctaDisabled =
+    disabled || Boolean(submitDisabled) || !resolvedVerificationReady;
 
   const handleFormSubmit = (event: FormEvent<HTMLFormElement>) => {
     formAttr?.onSubmit?.(event);
@@ -152,10 +240,18 @@ export function AuthSignupVerificationForm({
       return;
     }
 
-    if (shouldRequestCode && emailRequestHandler) {
+    if (isRequestStage && emailRequestHandler) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (resolvedVerificationReady) {
+        emailRequestHandler();
+      }
+      return;
+    }
+
+    if (codeRequested && !resolvedVerificationReady) {
       event.preventDefault();
       event.stopPropagation();
-      emailRequestHandler();
       return;
     }
 
@@ -178,6 +274,8 @@ export function AuthSignupVerificationForm({
     <form
       className="auth-signup-form auth-signup-form--verification"
       {...formAttr}
+      data-verify-state={resolvedVerificationState}
+      data-verify-ready={resolvedVerificationReady ? "true" : "false"}
       onSubmit={handleFormSubmit}
     >
       <div className="auth-signup-fields">

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

@@ -51,6 +51,13 @@ export type AuthSignupVerificationFields = {
 
 export type AuthSignupVerificationValues = Record<string, string>;
 
+export type AuthSignupVerificationState =
+  | "idle"
+  | "agreements-pending"
+  | "request-ready"
+  | "code-pending"
+  | "code-ready";
+
 export interface AuthSignupVerificationProps {
   fields: AuthSignupVerificationFields;
   agreements: AuthSignupAgreementOption[];
@@ -59,6 +66,9 @@ export interface AuthSignupVerificationProps {
   onToggleAll: (options?: AuthSignupAgreementToggleAllOptions) => void;
   onOpenAgreementDetail?: (agreementId: string) => void;
   submitLabel?: ReactNode;
+  submitDisabled?: boolean;
+  verificationState?: AuthSignupVerificationState;
+  verificationReady?: boolean;
   formAttr?: React.FormHTMLAttributes<HTMLFormElement>;
   onSubmit: SubmitHandler<AuthSignupVerificationValues>;
 }

package/src/modal/core/components/Root.tsx

@@ -60,7 +60,7 @@ export function ModalRoot({
   const layerStyle = useMemo(
     () =>
       ({
-        "--uds-modal-index": index,
+        "--modal-stack-index": index,
       }) as CSSProperties,
     [index],
   );

package/src/modal/styles/base.scss

@@ -1,20 +1,32 @@
 /* foundation CSS는 소비 앱 루트에서 한 번만 로드된다는 전제하에 토큰만 참조한다. */
 :root {
-  --uds-modal-overlay-bg: var(--dialog-overlay-bg, rgba(5, 6, 12, 0.55));
-  --uds-modal-surface-bg: var(--color-bg-surface-static-white);
-  --uds-modal-surface-radius: var(--theme-radius-large-1);
-  --uds-modal-surface-shadow: 0px 18px 40px rgba(8, 11, 30, 0.18);
-  --uds-modal-max-width: min(
-    360px,
-    calc(100vw - var(--spacing-padding-10) * 2)
+  --modal-overlay-bg: rgba(5, 6, 12, 0.55);
+  --modal-panel-width: 360px;
+  --modal-panel-max-width: calc(100vw - var(--spacing-padding-10, 32px) * 2);
+  --modal-panel-max-height: calc(100vh - var(--spacing-padding-10, 32px) * 2);
+  --modal-panel-bg: var(--color-bg-surface-static-white);
+  --modal-panel-radius: var(--theme-radius-large-1);
+  --modal-panel-shadow: 0px 18px 40px rgba(8, 11, 30, 0.18);
+  --modal-border-color: var(--color-border-standard-cool-gray, #e4e5e7);
+  --modal-footer-border-color: var(--modal-border-color);
+  --modal-stack-index: 0;
+  --modal-alert-body-color: var(--color-label-standard, #232629);
+  --modal-alert-body-font-size: var(--font-body-small-size, 14px);
+  --modal-dialog-title-color: var(--color-label-strong, #090a0b);
+  --modal-dialog-title-font-size: var(--font-heading-xsmall-size, 20px);
+  --modal-dialog-title-line-height: var(
+    --font-heading-xsmall-line-height,
+    28px
   );
-  --uds-modal-max-height: calc(100vh - var(--spacing-padding-10) * 2);
+  --modal-dialog-title-weight: var(--font-heading-xsmall-weight, 700);
+  --modal-dialog-body-color: var(--color-label-standard, #232629);
+  --modal-dialog-body-font-size: var(--font-body-small-size, 14px);
 }
 
 .uds-modal-root {
   position: fixed;
   inset: 0;
-  z-index: calc(400 + var(--uds-modal-index, 0));
+  z-index: calc(400 + var(--modal-stack-index, 0));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -25,11 +37,20 @@
 .uds-modal-surface {
   position: relative;
   width: 100%;
-  max-width: var(--uds-modal-max-width);
-  max-height: var(--uds-modal-max-height);
-  background-color: var(--uds-modal-surface-bg);
-  border-radius: var(--uds-modal-surface-radius);
-  box-shadow: var(--uds-modal-surface-shadow);
+  max-width: min(
+    var(--modal-panel-width, 360px),
+    var(
+      --modal-panel-max-width,
+      calc(100vw - var(--spacing-padding-10, 32px) * 2)
+    )
+  );
+  max-height: var(
+    --modal-panel-max-height,
+    calc(100vh - var(--spacing-padding-10, 32px) * 2)
+  );
+  background-color: var(--modal-panel-bg, var(--color-bg-surface-static-white));
+  border-radius: var(--modal-panel-radius, var(--theme-radius-large-1));
+  box-shadow: var(--modal-panel-shadow, 0px 18px 40px rgba(8, 11, 30, 0.18));
   pointer-events: auto;
   display: flex;
   flex-direction: column;
@@ -39,6 +60,6 @@
 .uds-modal-dimmer {
   position: absolute;
   inset: 0;
-  background-color: var(--uds-modal-overlay-bg);
+  background-color: var(--modal-overlay-bg, rgba(5, 6, 12, 0.55));
   pointer-events: auto;
 }

package/src/modal/styles/container.scss

@@ -40,11 +40,8 @@
     min-height: var(--notice-dialog-action-height, 56px);
     border-top: 1px solid
       var(
-        --uds-modal-footer-border-color,
-        var(
-          --dialog-border-color,
-          var(--color-border-standard-cool-gray, #e4e5e7)
-        )
+        --modal-footer-border-color,
+        var(--color-border-standard-cool-gray, #e4e5e7)
       );
 
     .uds-modal-footer-button {
@@ -54,11 +51,8 @@
     .uds-modal-footer-button + .uds-modal-footer-button {
       border-left: 1px solid
         var(
-          --uds-modal-footer-border-color,
-          var(
-            --dialog-border-color,
-            var(--color-border-standard-cool-gray, #e4e5e7)
-          )
+          --modal-footer-border-color,
+          var(--color-border-standard-cool-gray, #e4e5e7)
         );
     }
   }
@@ -77,7 +71,7 @@
 .uds-modal-alert-message {
   padding: var(--spacing-padding-10, 32px) var(--spacing-padding-8, 24px);
   text-align: center;
-  color: var(--dialog-body-color);
+  color: var(--modal-alert-body-color);
   word-break: keep-all;
 
   > p,
@@ -85,7 +79,7 @@
   > strong,
   > em {
     margin: 0;
-    font-size: var(--dialog-body-font-size);
+    font-size: var(--modal-alert-body-font-size);
     line-height: 1.5em;
     font-weight: var(--font-body-small-weight, 400);
     word-break: inherit;
@@ -108,17 +102,17 @@
 
   > h3 {
     margin: 0;
-    color: var(--dialog-title-color);
-    font-size: var(--dialog-title-font-size);
-    line-height: var(--dialog-title-line-height);
-    font-weight: var(--dialog-title-weight);
+    color: var(--modal-dialog-title-color);
+    font-size: var(--modal-dialog-title-font-size);
+    line-height: var(--modal-dialog-title-line-height);
+    font-weight: var(--modal-dialog-title-weight);
   }
 }
 
 .uds-modal-dialog-body-content {
   padding: var(--spacing-padding-7, 20px) var(--spacing-padding-6, 16px);
   text-align: center;
-  color: var(--dialog-body-color);
+  color: var(--modal-dialog-body-color);
   word-break: keep-all;
 
   > p,
@@ -126,7 +120,7 @@
   > strong,
   > em {
     margin: 0;
-    font-size: var(--dialog-body-font-size);
+    font-size: var(--modal-dialog-body-font-size);
     line-height: 1.5em;
     font-weight: var(--font-body-small-weight, 400);
     word-break: inherit;