@uniai-fe/uds-templates 0.1.14 → 0.1.16

package/README.md

@@ -125,6 +125,11 @@ export default function LoginPage() {
 
 > modules 레포 내부(Storybook 등)에서는 개발 편의를 위해 `@uniai-fe/uds-templates/src/index.scss`를 직접 import하지만, 외부 서비스/패키지는 `@uniai-fe/uds-templates/css` 엔트리만 사용해야 한다.
 
+### 최근 업데이트
+
+- Modal CSS 변수 네임스페이스를 `--modal-*`, `--modal-alert-*`, `--modal-dialog-*` 세 축으로 통일했다. 기존 `--dialog-*` 이름을 사용하지 말고, Auth 템플릿이 Alert을 호출할 때에는 반드시 `Modal.Alert` 팩토리를 통해 렌더링한다.
+- Auth(회원가입/아이디 찾기/비밀번호 찾기) 템플릿은 이메일 인증 타이머 5분, alert 문구, readonly 이메일 필드, 완료 단계 헤더 제거 등 최신 플로우를 반영했다. 모듈에서 `window.alert`/`window.confirm`을 호출하지 않고, 서비스 앱이 Modal helper를 주입하는 구조를 README와 `CONTEXT-AUTH*.md`에 명시했다.
+
 ### 토큰 스코프 & ThemeProvider
 
 - templates SCSS는 모든 디자인 토큰을 `:root`에 선언하고, 빌드 시 `scripts/merge-theme-root.mjs`가 토큰 블록을 단일 `:root { ... }`로 합쳐 중복 선언을 제거합니다.

package/package.json

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

package/src/auth/index.tsx

@@ -1,6 +1,10 @@
 import "./login/index.scss";
 
-import { AuthContainer } from "./common/container";
+import {
+  AuthContainer,
+  AuthStageHeader,
+  type AuthContainerProps,
+} from "./common/container";
 import AuthCompleteTemplate from "./common/complete/Template";
 import AuthPasswordSetField from "./common/password/markup/PasswordSetField";
 import { AuthLogin } from "./login";
@@ -11,8 +15,10 @@ import { FindPassword } from "./find-password";
 
 export const Auth = {
   Container: AuthContainer,
+  StageHeader: AuthStageHeader,
   Common: {
     Container: AuthContainer,
+    StageHeader: AuthStageHeader,
     Complete: AuthCompleteTemplate,
     PasswordSetField: AuthPasswordSetField,
   },
@@ -29,6 +35,7 @@ export {
   useSignupAccountForm,
 } from "./signup";
 
+export type { AuthContainerProps };
 export { useCheckPassword } from "./common/password/hooks/useCheckPassword";
 export { DEFAULT_PASSWORD_RULES } from "./common/password/constants";
 export { FindAccount, useFindAccountForm } from "./find-account";

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

@@ -1,16 +1,12 @@
 "use client";
 
-import type {
-  ModalFooterButton,
-  ModalSections,
-  ModalStackKey,
-} from "../../types";
+import type { ModalFooterButton, ModalSections } from "../../types";
 import { ModalFooterButtons } from "./FooterButtons";
 
 /**
  * 모달 컨테이너; header/body/footer 슬롯만 담당한다.
  * @component
- * @param {ModalSections & {stackKey: ModalStackKey; footerButtons?: ModalFooterButton[]}} props
+ * @param {ModalSections & {stackKey: string; footerButtons?: ModalFooterButton[]}} props
  * @param {React.ReactNode} [props.header] 헤더 슬롯
  * @param {React.ReactNode} props.body 본문 슬롯
  * @param {React.ReactNode} [props.footer] footer 슬롯
@@ -23,7 +19,7 @@ export function ModalContainer({
   footer,
   footerButtons,
 }: ModalSections & {
-  stackKey: ModalStackKey;
+  stackKey: string;
   footerButtons?: ModalFooterButton[];
 }) {
   return (

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

@@ -7,7 +7,6 @@ import { useModal } from "../hooks/useModal";
 
 import type {
   ModalFooterButton,
-  ModalStackKey,
   ModalFooterButtonAppearance,
   ModalFooterButtonLinkOptions,
 } from "../../types";
@@ -38,13 +37,13 @@ const createAnchorProps = (
 /**
  * 모달 footer 버튼 리스트 렌더러.
  * @component
- * @param {{ stackKey: ModalStackKey; buttons: ModalFooterButton[] }} props 버튼 정의 목록
+ * @param {{ stackKey: string; buttons: ModalFooterButton[] }} props 버튼 정의 목록
  */
 export function ModalFooterButtons({
   stackKey,
   buttons,
 }: {
-  stackKey: ModalStackKey;
+  stackKey: string;
   buttons: ModalFooterButton[];
 }) {
   const { closeModal } = useModal();

package/src/modal/core/hooks/useModal.ts

@@ -9,13 +9,12 @@ import type {
   ModalCloseRequest,
   ModalState,
   ModalStatePatch,
-  ModalStackKey,
 } from "../../types";
 
 const DEFAULT_CLOSE_DELAY = 400;
 
 type CloseFlagState = {
-  stackKey: ModalStackKey;
+  stackKey: string;
   showDelay: number;
   callback?: () => void;
 };

package/src/modal/types/footer.ts

@@ -5,8 +5,6 @@ import type {
   TextButtonSize,
 } from "@uniai-fe/uds-primitives";
 
-import type { ModalStackKey } from "./state";
-
 export type ModalFooterButtonAppearance = "default" | "text";
 
 export type ModalFooterButtonDefaultOptions = {
@@ -28,7 +26,7 @@ export type ModalFooterButtonLinkOptions = {
 };
 
 export type ModalFooterButton = {
-  stackKey: ModalStackKey;
+  stackKey: string;
   role: "close" | string;
   defaultOptions: ModalFooterButtonDefaultOptions;
   linkOptions?: ModalFooterButtonLinkOptions;

package/src/modal/types/index.ts

@@ -1,6 +1,5 @@
 export type {
   ModalShowState,
-  ModalStackKey,
   ModalSections,
   ModalProps,
   ModalState,

package/src/modal/types/options.ts

@@ -1,6 +1,4 @@
-import type { ModalStackKey } from "./state";
-
 export type ModalCloseRequest = {
-  stackKey: ModalStackKey;
+  stackKey: string;
   callback?: () => void;
 };

package/src/modal/types/state.ts

@@ -4,8 +4,6 @@ import type { ModalFooterButton } from "./footer";
 
 export type ModalShowState = "init" | boolean;
 
-export type ModalStackKey = string;
-
 export type ModalSections = {
   header?: ReactNode;
   body: ReactNode;
@@ -19,13 +17,13 @@ export type ModalProps = ModalSections & {
 };
 
 export type ModalState = {
-  stackKey: ModalStackKey;
+  stackKey: string;
   modalProps: ModalProps;
   className?: string;
 };
 
 export type ModalStatePatch = {
-  stackKey: ModalStackKey;
+  stackKey: string;
   modalProps?: Partial<ModalProps>;
   className?: string;
 };

package/src/modal/types/templates.ts

@@ -1,6 +1,6 @@
 import type { ReactNode } from "react";
 
-import type { ModalState, ModalStackKey } from "./state";
+import type { ModalState } from "./state";
 
 export type ModalTemplateButtonSpec = {
   label?: ReactNode;
@@ -10,7 +10,7 @@ export type ModalTemplateButtonSpec = {
 };
 
 type ModalTemplateBase = {
-  stackKey: ModalStackKey;
+  stackKey: string;
   showDelay?: number;
 };
 

package/src/page-frame/mobile/header/PageFrameMobileHeader.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import type { ReactNode } from "react";
 
+import IconBackword from "../img/chevron-backward.svg";
 import "./page-frame-mobile-header.scss";
 
 export interface PageFrameMobileHeaderProps {
@@ -25,8 +26,8 @@ export function PageFrameMobileHeader({
   rightSlot,
 }: PageFrameMobileHeaderProps) {
   return (
-    <div className={clsx("page-frame-mobile-header", className)}>
-      <span className="page-frame-mobile-header__left">
+    <header className={clsx("page-frame-mobile-header", className)}>
+      <div className="page-frame-mobile-header__left">
         {leftSlot ??
           (onBack ? (
             <button
@@ -36,17 +37,19 @@ export function PageFrameMobileHeader({
               aria-label="뒤로가기"
             >
               <span className="page-frame-mobile-header__back-icon">
-                {backIcon ?? "←"}
+                {backIcon ?? (
+                  <IconBackword width={24} height={24} alt="뒤로가기" />
+                )}
               </span>
             </button>
           ) : (
             <span className="page-frame-mobile-header__back-placeholder" />
           ))}
-      </span>
-      <p className="page-frame-mobile-header__title">{title}</p>
-      <span className="page-frame-mobile-header__right">
-        {rightSlot ?? null}
-      </span>
-    </div>
+      </div>
+      <h2 className="page-frame-mobile-header__title">
+        <span>{title}</span>
+      </h2>
+      <div className="page-frame-mobile-header__right">{rightSlot ?? null}</div>
+    </header>
   );
 }