@uniai-fe/uds-templates 0.1.41 → 0.2.3

package/dist/styles.css

@@ -13,7 +13,7 @@
   --uds-page-nav-logo-height: var(--uds-page-header-height, 7.2rem);
   --uds-page-nav-list-padding-horizontal: 0rem;
   --uds-page-nav-list-padding-vertical: var(--spacing-padding-9, 2.4rem);
-  --uds-page-nav-item-height: var(--theme-size-meduum-2, 4.8rem);
+  --uds-page-nav-item-height: var(--theme-size-medium-2, 4.8rem);
   --uds-page-nav-item-gap: var(--spacing-gap-6, 1.6rem);
   --uds-page-nav-item-color-default: var(--color-label-standard);
   --uds-page-nav-item-color-active: var(--color-primary-default);
@@ -38,25 +38,25 @@
   );
   --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-max-width: calc(100vw - var(--spacing-padding-10) * 2);
+  --modal-panel-max-height: calc(100vh - var(--spacing-padding-10) * 2);
   --modal-panel-bg: var(--color-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-border-color: var(--color-border-standard-cool-gray);
   --modal-footer-border-color: var(--modal-border-color);
   --modal-stack-index: 0;
-  --modal-alert-body-color: var(--color-label-strong, #18191b);
-  --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-alert-body-color: var(--color-label-standard);
+  --modal-alert-body-font-size: var(--font-body-medium-size);
+  --modal-dialog-title-color: var(--color-label-strong);
+  --modal-dialog-title-font-size: var(--font-heading-small-size);
   --modal-dialog-title-line-height: var(
-  --font-heading-xsmall-line-height,
-  28px
+  --font-heading-small-line-height,
+  1.4em
   );
-  --modal-dialog-title-weight: var(--font-heading-xsmall-weight, 700);
-  --modal-dialog-body-color: var(--color-label-strong, #18191b);
-  --modal-dialog-body-font-size: var(--font-body-small-size, 14px);
+  --modal-dialog-title-weight: var(--font-heading-small-weight);
+  --modal-dialog-body-color: var(--color-label-standard);
+  --modal-dialog-body-font-size: var(--font-body-medium-size);
   --auth-container-max-width: 335px;
   --auth-container-gap: var(--spacing-padding-7, 28px);
   --auth-container-padding-inline: var(--spacing-padding-6, 24px);
@@ -456,7 +456,7 @@
 .uds-modal-root {
   position: fixed;
   inset: 0;
-  z-index: calc(400 + var(--modal-stack-index, 0));
+  z-index: calc(1000 + var(--modal-stack-index, 0));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -522,23 +522,67 @@
 
 .uds-modal-footer-buttons {
   display: flex;
+  flex-wrap: wrap;
   width: 100%;
-  gap: var(--spacing-gap-4, 16px);
   padding: var(--spacing-padding-6, 16px);
+  gap: var(--spacing-gap-4, 16px);
+  align-items: stretch;
+  row-gap: var(--spacing-gap-4, 16px);
+}
+
+.uds-modal-footer-group {
+  display: flex;
+  flex: 1 1 0;
+  flex-wrap: nowrap;
+  gap: var(--spacing-gap-4, 16px);
   align-items: stretch;
 }
-.uds-modal-footer-buttons[data-count="1"] .uds-modal-footer-button {
+.uds-modal-footer-group[data-position=left] {
+  justify-content: flex-start;
+}
+.uds-modal-footer-group[data-position=center] {
+  justify-content: center;
+}
+.uds-modal-footer-group[data-position=right] {
+  justify-content: flex-end;
+}
+
+.uds-modal-footer-center {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--spacing-gap-4, 16px);
   width: 100%;
 }
-.uds-modal-footer-buttons[data-count="2"] .uds-modal-footer-button {
-  flex: 1 1 0;
+
+.uds-modal-footer-button[data-width=full] {
+  flex: 1 1 100%;
+  max-width: 100%;
+}
+
+.uds-modal-footer-button[data-width=fill] {
+  flex: 1 1 0%;
+  min-width: 0;
 }
+
+.uds-modal-footer-button[data-width=auto] {
+  flex: 0 1 auto;
+}
+
+.uds-modal-footer-button[data-width=fit] {
+  flex: 0 0 auto;
+}
+
 .uds-modal-footer-buttons[data-appearance=text] {
   padding: 0;
   gap: 0;
   min-height: var(--notice-dialog-action-height, 56px);
   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-group {
+  flex-wrap: nowrap;
+  gap: 0;
+}
 .uds-modal-footer-buttons[data-appearance=text] .uds-modal-footer-button {
   border-radius: 0;
 }
@@ -559,14 +603,10 @@
 .uds-modal-alert-message {
   padding: var(--spacing-padding-10, 32px) var(--spacing-padding-8, 24px);
   text-align: center;
-  color: var(--modal-alert-body-color);
   word-break: keep-all;
+  color: var(--modal-alert-body-color);
 }
-.uds-modal-alert-message > p,
-.uds-modal-alert-message > span,
-.uds-modal-alert-message > strong,
-.uds-modal-alert-message > em {
-  margin: 0;
+.uds-modal-alert-message :where(p, span, strong, em) {
   font-size: var(--modal-alert-body-font-size);
   line-height: 1.5em;
   font-weight: var(--font-body-small-weight, 400);
@@ -583,10 +623,49 @@
 }
 
 .uds-modal-dialog-header-content {
-  padding: var(--spacing-padding-7, 20px) var(--spacing-padding-6, 16px);
+  padding: var(--spacing-padding-9) var(--spacing-padding-6) 0;
   text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-gap-2, 8px);
+}
+
+.uds-modal-dialog-header-row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-gap-3, 12px);
+}
+
+.uds-modal-dialog-header-row-split {
+  justify-content: space-between;
+}
+
+.uds-modal-dialog-header-leading {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-gap-2, 8px);
+  justify-content: center;
 }
-.uds-modal-dialog-header-content > h3 {
+
+.uds-modal-dialog-header-leading-content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-gap-1, 4px);
+}
+.uds-modal-dialog-header-leading-content :where(p, span, strong, em) {
+  color: var(--modal-dialog-title-color);
+  font-size: var(--modal-dialog-body-font-size);
+  line-height: 1.4em;
+  font-weight: var(--modal-dialog-title-weight);
+}
+
+.uds-modal-dialog-header-title {
+  display: flex;
+  justify-content: center;
+  text-align: center;
+}
+.uds-modal-dialog-header-title > :where(h1, h2, h3, h4, h5, h6, p, span, strong, em) {
   margin: 0;
   color: var(--modal-dialog-title-color);
   font-size: var(--modal-dialog-title-font-size);
@@ -594,17 +673,41 @@
   font-weight: var(--modal-dialog-title-weight);
 }
 
+.uds-modal-dialog-header-trailing {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-gap-2, 8px);
+}
+
+.uds-modal-dialog-header-description {
+  margin: 0;
+  text-align: inherit;
+}
+.uds-modal-dialog-header-description > :where(p, span, strong, em) {
+  margin: 0;
+  color: var(--modal-dialog-body-color);
+  font-size: var(--modal-dialog-body-font-size);
+  line-height: 1.5em;
+  font-weight: var(--font-body-small-weight, 400);
+}
+
+.uds-modal-dialog-header[data-layout=split] .uds-modal-dialog-header-content,
+.uds-modal-dialog-header[data-has-right=true] .uds-modal-dialog-header-content {
+  text-align: left;
+}
+
+.uds-modal-dialog-header[data-layout=split] .uds-modal-dialog-header-leading,
+.uds-modal-dialog-header[data-has-right=true] .uds-modal-dialog-header-leading {
+  justify-content: flex-start;
+}
+
 .uds-modal-dialog-body-content {
-  padding: var(--spacing-padding-7, 20px) var(--spacing-padding-6, 16px);
+  padding: var(--modal-dialog-body-padding, var(--spacing-padding-7, 20px) var(--spacing-padding-6, 16px));
   text-align: center;
-  color: var(--modal-dialog-body-color);
   word-break: keep-all;
+  color: var(--modal-dialog-body-color);
 }
-.uds-modal-dialog-body-content > p,
-.uds-modal-dialog-body-content > span,
-.uds-modal-dialog-body-content > strong,
-.uds-modal-dialog-body-content > em {
-  margin: 0;
+.uds-modal-dialog-body-content :where(p, span, strong, em) {
   font-size: var(--modal-dialog-body-font-size);
   line-height: 1.5em;
   font-weight: var(--font-body-small-weight, 400);
@@ -717,21 +820,21 @@
 .auth-login-form {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-padding-7, 28px);
-  margin-top: var(--spacing-padding-10, 40px);
+  gap: var(--spacing-padding-7);
+  margin-top: var(--spacing-padding-10);
 }
 
 .auth-login-fields {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-padding-5, 20px);
+  gap: var(--spacing-padding-5);
 }
 
 .auth-login-util-container {
   margin-top: 80px;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-padding-6, 24px);
+  gap: var(--spacing-padding-6);
 }
 
 .auth-login-find-account {
@@ -743,14 +846,16 @@
 }
 
 .auth-login-find-account-button {
-  color: var(--color-label-standard);
   font-size: 13px;
   line-height: 1em;
   font-weight: 400;
-  padding-inline: var(--spacing-padding-1, 4px);
+  padding-inline: var(--spacing-padding-1);
 }
 .auth-login-find-account-button:hover {
-  color: var(--color-primary-50, #2563eb);
+  color: var(--color-primary-standard);
+}
+.auth-login-find-account-button span {
+  color: var(--color-label-standard);
 }
 
 .auth-login-signup {
@@ -760,7 +865,6 @@
 
 .auth-login-signup-button {
   text-decoration: none;
-  min-width: 160px;
   justify-content: center;
   /* 버튼 토큰 네이밍 개편 반영 */
   --button-default-font-label-medium-size: var(--font-caption-medium-size);
@@ -782,20 +886,20 @@
   gap: var(--spacing-padding-5, 20px);
 }
 
-.auth-find-account-form--code .auth-find-account-fields {
+.auth-find-account-form-code .auth-find-account-fields {
   margin-bottom: var(--spacing-padding-4, 16px);
 }
 
 .auth-find-account-email-block {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-padding-3, 12px);
-  margin-bottom: var(--spacing-padding-7, 28px);
+  gap: var(--spacing-padding-3);
+  margin-bottom: var(--spacing-padding-7);
 }
 
 .auth-find-account-email-label {
   color: var(--color-label-standard, var(--primitive-coolgray-20, #3d3f43));
-  font-size: var(--font-label-small-size, 13px);
+  font-size: var(--font-label-small-size);
   line-height: 1.5;
   margin: 0;
 }
@@ -805,19 +909,19 @@
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid var(--color-border-standard, var(--primitive-coolgray-90, #e4e5e7));
-  min-height: var(--spacing-padding-14, 56px);
-  padding-bottom: var(--spacing-padding-2, 8px);
+  min-height: var(--spacing-padding-14);
+  padding-bottom: var(--spacing-padding-2);
 }
 
 .auth-find-account-email-value {
-  font-size: var(--font-body-large-size, 19px);
+  font-size: var(--font-body-large-size);
   color: var(--color-label-strong, var(--primitive-coolgray-10, #18191b));
   line-height: 1.5;
   word-break: break-word;
 }
 
 .auth-find-account-email-helper {
-  font-size: var(--font-caption-medium-size, 12px);
+  font-size: var(--font-caption-medium-size);
   color: var(--color-label-alternative, var(--primitive-coolgray-50, #afb1b6));
   margin: 0;
 }
@@ -826,17 +930,17 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-padding-4, 16px);
+  gap: var(--spacing-padding-4);
 }
 
 .auth-find-account-timer-text {
-  font-size: var(--font-caption-medium-size, 12px);
-  color: var(--color-primary-50, #2563eb);
+  font-size: var(--font-caption-medium-size);
+  color: var(--color-primary-standard);
 }
 
 .auth-find-account-timer-helper,
 .auth-find-account-helper {
-  font-size: var(--font-caption-medium-size, 12px);
+  font-size: var(--font-caption-medium-size);
   color: var(--color-label-neutral, var(--primitive-coolgray-40, #797e86));
   margin: 0;
 }
@@ -957,52 +1061,53 @@
 .auth-signup-form {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-padding-8, 32px);
-  margin-top: var(--spacing-padding-9, 36px);
+  gap: var(--spacing-padding-8);
+  margin-top: var(--spacing-padding-9);
 }
 
 .auth-signup-fields {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-padding-5, 20px);
+  gap: var(--spacing-padding-5);
 }
 
 .auth-signup-verification {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-padding-9, 36px);
+  gap: var(--spacing-padding-9);
 }
 
 .auth-signup-agreements {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-padding-4, 16px);
-  background: var(--color-background-subtle);
-  border-radius: var(--shape-rounded-3, 16px);
-  padding: var(--spacing-padding-5, 20px);
+  gap: var(--spacing-padding-4);
 }
 
 .auth-signup-agreement-all {
-  background: var(--color-background-soft, #f2f2f3);
-  border-radius: var(--shape-rounded-2, 12px);
-  padding: var(--spacing-padding-4, 16px);
+  height: var(--theme-size-medium-3);
+  display: flex;
+  align-items: center;
+  background: var(--color-bg-alternative-cool-gray, #f2f2f3);
+  border-radius: var(--theme-radius-large-2, 16px);
+  border-radius: var(--theme-radius-medium-3, 8px);
+  padding: 0 var(--spacing-padding-5);
 }
 
 .auth-signup-agreements-list {
   width: 100%;
-  background: var(--color-common-100, #ffffff);
-  border-radius: var(--shape-rounded-2, 12px);
-  padding: var(--spacing-padding-4, 16px);
+  background: var(--color-common-100);
+  border-radius: var(--theme-radius-medium-3, 8px);
+  padding: var(--spacing-padding-3);
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-padding-3, 12px);
+  gap: var(--spacing-padding-3);
 }
 
 .auth-signup-agreement-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: var(--spacing-padding-3, 12px);
+  gap: var(--spacing-padding-3);
 }
 
 .auth-signup-agreement-toggle {
@@ -1012,7 +1117,7 @@
   margin: 0;
   display: flex;
   align-items: center;
-  gap: var(--spacing-padding-3, 12px);
+  gap: var(--spacing-padding-3);
   cursor: pointer;
   flex: 1;
   text-align: left;
@@ -1023,7 +1128,7 @@
 .auth-signup-agreement-icon {
   width: 20px;
   height: 20px;
-  color: var(--color-label-assistive, #94989e);
+  color: var(--color-label-assistive);
   flex-shrink: 0;
 }
 .auth-signup-agreement-icon svg {
@@ -1042,7 +1147,7 @@
 
 .auth-signup-agreement-label {
   display: inline-flex;
-  gap: var(--spacing-padding-1, 4px);
+  gap: var(--spacing-padding-1);
   align-items: baseline;
   flex-wrap: nowrap;
 }
@@ -1066,7 +1171,7 @@
   font-size: 13px;
   color: var(--color-label-assistive);
   margin: 0;
-  padding-left: calc(20px + var(--spacing-padding-3, 12px));
+  padding-left: calc(20px + var(--spacing-padding-3));
 }
 
 .auth-signup-agreement-detail {
@@ -1099,7 +1204,7 @@
 .auth-signup-complete {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-padding-7, 28px);
+  gap: var(--spacing-padding-7);
   text-align: center;
 }
 
@@ -1116,14 +1221,14 @@
 }
 
 .auth-signup-complete-description {
-  margin: var(--spacing-padding-2, 8px) 0 0;
+  margin: var(--spacing-padding-2) 0 0;
   color: var(--color-label-assistive);
 }
 
 .auth-signup-complete-actions {
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-padding-4, 16px);
+  gap: var(--spacing-padding-4);
 }
 
 .auth-signup-agreement-drawer-body p {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-templates",
-  "version": "0.1.41",
+  "version": "0.2.3",
   "description": "UNIAI Design System; UI Templates Package",
   "type": "module",
   "private": false,
@@ -12,7 +12,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "packageManager": "pnpm@10.28.0",
+  "packageManager": "pnpm@10.28.2",
   "engines": {
     "node": ">=24",
     "pnpm": ">=10"
@@ -67,9 +67,9 @@
   },
   "devDependencies": {
     "@svgr/webpack": "^8.1.0",
-    "@tanstack/react-query": "^5.90.16",
+    "@tanstack/react-query": "^5.90.20",
     "@types/node": "^24.10.2",
-    "@types/react": "^19.2.8",
+    "@types/react": "^19.2.11",
     "@types/react-dom": "^19.2.3",
     "@uniai-fe/eslint-config": "workspace:*",
     "@uniai-fe/next-devkit": "workspace:*",
@@ -82,11 +82,11 @@
     "@uniai-fe/util-next": "workspace:*",
     "@uniai-fe/util-rtc": "workspace:*",
     "eslint": "^9.39.2",
-    "jotai": "^2.16.1",
+    "jotai": "^2.17.1",
     "next": "^15.5.11",
-    "prettier": "^3.7.4",
-    "react-hook-form": "^7.71.0",
-    "sass": "^1.97.2",
+    "prettier": "^3.8.1",
+    "react-hook-form": "^7.71.1",
+    "sass": "^1.97.3",
     "typescript": "~5.9.3"
   }
 }

package/src/auth/common/auth-code/index.tsx

@@ -0,0 +1,13 @@
+import AuthCodeEmailTemplate from "./markup/Email";
+import AuthCodePhoneTemplate from "./markup/Phone";
+import AuthCodeTemplateInputCode from "./markup/InputCode";
+
+import "./styles/index.scss";
+
+export const AuthCodeTemplate = {
+  InputCode: AuthCodeTemplateInputCode,
+  Email: AuthCodeEmailTemplate,
+  Phone: AuthCodePhoneTemplate,
+};
+
+export * from "./types";

package/src/auth/common/auth-code/markup/Email.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import clsx from "clsx";
+import { Form, Input } from "@uniai-fe/uds-primitives";
+import AuthCodeTemplateInputCode from "./InputCode";
+import type { AuthEmailAuthCodeTemplateProps } from "../types";
+
+/**
+ * 이메일 + 인증코드 Form.Field 템플릿 조합.
+ * @component
+ * @param {AuthEmailAuthCodeTemplateProps} props
+ * @property {AuthFormFieldTemplateProps} [props.templateProps] 이메일 필드 Template 옵션
+ * @property {EmailInputProps} props.inputProps 이메일 입력 props
+ * @property {AuthCodeFieldSectionProps} [props.code] 인증코드 섹션 옵션
+ */
+export default function AuthCodeEmailTemplate({
+  templateProps,
+  inputProps,
+  code,
+}: AuthEmailAuthCodeTemplateProps) {
+  const resolvedCode = code ?? undefined;
+  const showCodeSection =
+    Boolean(resolvedCode?.inputProps) && (resolvedCode?.visible ?? true);
+  const primaryTemplateProps = {
+    ...templateProps,
+    className: clsx("auth-email-auth-code", templateProps?.className),
+  };
+  const resolvedInputProps = {
+    ...inputProps,
+    requestButtonLabel:
+      inputProps?.requestButtonLabel ??
+      (showCodeSection ? "인증코드 재요청" : "인증코드 요청"),
+  };
+
+  const resolvedCodeSection =
+    showCodeSection && resolvedCode
+      ? {
+          ...resolvedCode,
+          countdownText: resolvedCode.countdownText ?? "05:00",
+          countdownActionLabel: resolvedCode.countdownActionLabel ?? "시간연장",
+        }
+      : undefined;
+
+  return (
+    <>
+      <Form.Field.Template {...primaryTemplateProps}>
+        <Input.Text.Email {...resolvedInputProps} />
+      </Form.Field.Template>
+      {resolvedCodeSection ? (
+        <AuthCodeTemplateInputCode {...resolvedCodeSection} />
+      ) : null}
+    </>
+  );
+}