@uniai-fe/uds-templates 0.0.10 → 0.0.12

package/src/auth/signup/utils/composeFieldProps.ts

@@ -0,0 +1,50 @@
+import type { ReactNode } from "react";
+import type { InputProps, InputState } from "@uniai-fe/uds-primitives";
+import type { AuthSignupFieldProps } from "../types";
+
+/**
+ * 필드 helper 상태; helper 텍스트 및 상태를 전달한다.
+ */
+export interface AuthSignupHelperState {
+  text?: ReactNode;
+  state?: InputState;
+}
+
+/**
+ * 입력 필드 구성 요소; attr/props를 병합해 label/helper/state를 일관되게 만든다.
+ * @param {AuthSignupFieldProps<TProps>} config 필드 설정
+ * @param {AuthSignupHelperState} [helper] 훅에서 계산한 helper 정보
+ */
+export const composeSignupFieldProps = <TProps extends InputProps>(
+  config: AuthSignupFieldProps<TProps>,
+  helper?: AuthSignupHelperState,
+): TProps => {
+  // attr + props를 합쳐 RHF register/label/helper className을 동기화한다.
+  const baseProps = {
+    ...(config.attr ?? {}),
+    ...(config.props ?? ({} as TProps)),
+  } as TProps;
+  const mergedLabelProps = config.labelClassName
+    ? {
+        ...baseProps.labelProps,
+        className: config.labelClassName,
+      }
+    : baseProps.labelProps;
+  const mergedHelperProps = config.helperClassName
+    ? {
+        ...baseProps.helperProps,
+        className: config.helperClassName,
+      }
+    : baseProps.helperProps;
+
+  return {
+    ...baseProps,
+    label: config.label ?? baseProps.label,
+    helper: helper?.text ?? config.helper ?? baseProps.helper,
+    state: helper?.state ?? baseProps.state,
+    block: config.block ?? baseProps.block ?? true,
+    className: config.className ?? baseProps.className,
+    labelProps: mergedLabelProps,
+    helperProps: mergedHelperProps,
+  };
+};

package/src/auth/signup/utils/getSignupFieldDefaultValue.ts

@@ -0,0 +1,40 @@
+import type { AuthSignupFieldProps } from "../types";
+
+const stringifyValue = (value: unknown): string =>
+  value === undefined || value === null ? "" : String(value);
+
+/**
+ * 필드 설정에서 defaultValue를 추출해 RHF 초기값으로 사용한다.
+ * props.defaultValue → attr.defaultValue → props.value 순으로 우선한다.
+ */
+export const getSignupFieldDefaultValue = (
+  config: AuthSignupFieldProps,
+): string => {
+  if (config.props) {
+    if (
+      "defaultValue" in config.props &&
+      config.props.defaultValue !== undefined
+    ) {
+      return stringifyValue(config.props.defaultValue);
+    }
+    if ("value" in config.props && config.props.value !== undefined) {
+      return stringifyValue(config.props.value);
+    }
+  }
+
+  if (config.attr) {
+    if (
+      "defaultValue" in config.attr &&
+      config.attr.defaultValue !== undefined
+    ) {
+      return stringifyValue(config.attr.defaultValue);
+    }
+    if ("value" in config.attr && config.attr.value !== undefined) {
+      return stringifyValue(config.attr.value);
+    }
+  }
+
+  return "";
+};
+
+export default getSignupFieldDefaultValue;

package/src/index.scss

@@ -1,6 +1,8 @@
+/* templates styles는 foundation/primitives 순으로 import된 이후를 가정한다. */
 @use "@uniai-fe/uds-primitives/styles";
 
 /* 템플릿 레벨 스타일을 통합해 서비스 앱이 단일 엔트리만 import하도록 구성한다. */
-@use "./components/page-frame/container/index.scss" as *;
-@use "./components/page-frame/mobile/index.scss" as *;
-@use "./components/page-frame/navigation/index.scss" as *;
+@use "./page-frame/container/index.scss" as *;
+@use "./page-frame/mobile/index.scss" as *;
+@use "./page-frame/navigation/index.scss" as *;
+@use "./modal/index.scss" as *;

package/src/index.tsx

@@ -1,2 +1,3 @@
-export * from "./components/page-frame";
-export * from "./components/auth";
+export * from "./page-frame";
+export * from "./auth";
+export * from "./modal";

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

@@ -0,0 +1,41 @@
+"use client";
+
+import type {
+  ModalFooterButton,
+  ModalSections,
+  ModalStackKey,
+} from "../../types";
+import { ModalFooterButtons } from "./FooterButtons";
+
+/**
+ * 모달 컨테이너; header/body/footer 슬롯만 담당한다.
+ * @component
+ * @param {ModalSections & {stackKey: ModalStackKey; footerButtons?: ModalFooterButton[]}} props
+ * @param {React.ReactNode} [props.header] 헤더 슬롯
+ * @param {React.ReactNode} props.body 본문 슬롯
+ * @param {React.ReactNode} [props.footer] footer 슬롯
+ * @param {ModalFooterButton[]} [props.footerButtons] 버튼 스펙 배열
+ */
+export function ModalContainer({
+  stackKey,
+  header,
+  body,
+  footer,
+  footerButtons,
+}: ModalSections & {
+  stackKey: ModalStackKey;
+  footerButtons?: ModalFooterButton[];
+}) {
+  return (
+    <div className="uds-modal-container">
+      {header ? <div className="uds-modal-header">{header}</div> : null}
+      <div className="uds-modal-body">{body}</div>
+      {footer ? <div className="uds-modal-footer">{footer}</div> : null}
+      {!footer && footerButtons && footerButtons.length ? (
+        <div className="uds-modal-footer">
+          <ModalFooterButtons stackKey={stackKey} buttons={footerButtons} />
+        </div>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,132 @@
+"use client";
+
+import clsx from "clsx";
+import { Button } from "@uniai-fe/uds-primitives";
+
+import { useModal } from "../hooks/useModal";
+
+import type {
+  ModalFooterButton,
+  ModalStackKey,
+  ModalFooterButtonAppearance,
+  ModalFooterButtonLinkOptions,
+} from "../../types";
+
+const resolveAppearance = (
+  appearance?: ModalFooterButtonAppearance,
+): ModalFooterButtonAppearance => appearance ?? "default";
+
+const createAnchorProps = (
+  linkOptions?: ModalFooterButtonLinkOptions,
+):
+  | {
+      as: "a";
+      href: string;
+      target?: string;
+      rel?: string;
+    }
+  | Record<string, never> => {
+  if (!linkOptions) return {};
+  return {
+    as: "a",
+    href: linkOptions.href,
+    target: linkOptions.target,
+    rel: linkOptions.rel,
+  };
+};
+
+/**
+ * 모달 footer 버튼 리스트 렌더러.
+ * @component
+ * @param {{ stackKey: ModalStackKey; buttons: ModalFooterButton[] }} props 버튼 정의 목록
+ */
+export function ModalFooterButtons({
+  stackKey,
+  buttons,
+}: {
+  stackKey: ModalStackKey;
+  buttons: ModalFooterButton[];
+}) {
+  const { closeModal } = useModal();
+  // appearance 정보를 선계산해 footer group 스타일을 판별한다.
+  const resolvedButtons = buttons.map(button => ({
+    ...button,
+    appearance: resolveAppearance(button.defaultOptions.appearance),
+  }));
+  const groupAppearance = resolvedButtons.every(
+    button => button.appearance === "text",
+  )
+    ? "text"
+    : "default";
+
+  return (
+    <div
+      className="uds-modal-footer-buttons"
+      data-count={resolvedButtons.length}
+      data-appearance={groupAppearance}
+    >
+      {resolvedButtons.map((button, index) => {
+        const {
+          defaultOptions,
+          linkOptions,
+          closeOnClick = button.role === "close",
+          appearance,
+        } = button;
+        const anchorProps = createAnchorProps(linkOptions);
+        const closeAndCleanup = () => {
+          // footer 버튼마다 주입된 이벤트 → close 순서를 동일하게 유지한다.
+          defaultOptions.onClick?.();
+          if (closeOnClick) {
+            closeModal({ stackKey });
+          }
+        };
+        const resolvedBlock =
+          typeof defaultOptions.block === "boolean"
+            ? defaultOptions.block
+            : true;
+
+        const baseClassName = clsx(
+          "uds-modal-footer-button",
+          appearance === "text"
+            ? "uds-modal-footer-button-text"
+            : "uds-modal-footer-button-solid",
+          defaultOptions.className,
+        );
+        const commonProps = {
+          key: `uds-modal-footer-button-${button.stackKey}-${button.role}-${index}`,
+          className: baseClassName,
+          disabled: defaultOptions.disabled,
+          block: resolvedBlock,
+          onClick: closeAndCleanup,
+          ...anchorProps,
+        };
+
+        if (appearance === "text") {
+          const textPriority =
+            defaultOptions.priority && defaultOptions.priority !== "primary"
+              ? defaultOptions.priority
+              : "secondary";
+          return (
+            <Button.Text
+              {...commonProps}
+              size={defaultOptions.textSize ?? "large"}
+              priority={textPriority}
+            >
+              {defaultOptions.label}
+            </Button.Text>
+          );
+        }
+
+        return (
+          <Button.Default
+            {...commonProps}
+            scale={defaultOptions.scale ?? "solid-large"}
+            priority={defaultOptions.priority ?? "primary"}
+          >
+            {defaultOptions.label}
+          </Button.Default>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,28 @@
+"use client";
+
+import { Fragment } from "react";
+
+import { useModal } from "../hooks/useModal";
+import { ModalRoot } from "./Root";
+
+/**
+ * 서비스 루트에서 1회 배치되는 모달 Provider.
+ * @component
+ */
+export function ModalProvider() {
+  const { modalStacks } = useModal();
+
+  if (!modalStacks.length) return null;
+
+  return (
+    <Fragment>
+      {modalStacks.map((stack, index) => (
+        <ModalRoot
+          key={`uds-modal-${stack.stackKey}`}
+          {...stack}
+          index={index}
+        />
+      ))}
+    </Fragment>
+  );
+}

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

@@ -0,0 +1,93 @@
+"use client";
+
+import { useCallback, useEffect, useMemo } from "react";
+import type { CSSProperties } from "react";
+import clsx from "clsx";
+
+import { useModal } from "../hooks/useModal";
+import { ModalContainer } from "./Container";
+
+import type { ModalProps, ModalShowState, ModalState } from "../../types";
+
+type ModalRootProps = ModalState & {
+  index: number;
+};
+
+const resolveDataState = (show: ModalShowState): string => {
+  if (show === "init") return "init";
+  return show ? "open" : "closed";
+};
+
+/**
+ * 모달 Root; overlay 클릭 닫기와 상태 전환을 담당한다.
+ * @component
+ * @param {ModalRootProps} props 루트 속성
+ * @param {string} props.stackKey 모달 스택 식별자
+ * @param {ModalProps} props.modalProps 모달 렌더링에 필요한 상태
+ * @param {number} props.index Provider에서 전달한 스택 index
+ * @param {string} [props.className] 사용자 정의 className
+ */
+export function ModalRoot({
+  stackKey,
+  modalProps,
+  index,
+  className,
+}: ModalRootProps) {
+  const { updateModal, closeModal } = useModal();
+
+  useEffect(() => {
+    if (modalProps.show === "init") {
+      updateModal({ stackKey, modalProps: { show: true } });
+    }
+  }, [modalProps.show, stackKey, updateModal]);
+
+  const handleClose = useCallback(() => {
+    closeModal({ stackKey });
+  }, [closeModal, stackKey]);
+
+  const stopPropagation = useCallback(
+    (event: React.MouseEvent<HTMLDivElement>) => {
+      event.stopPropagation();
+    },
+    [],
+  );
+
+  const dataState = useMemo(
+    () => resolveDataState(modalProps.show),
+    [modalProps.show],
+  );
+
+  const layerStyle = useMemo(
+    () =>
+      ({
+        "--uds-modal-index": index,
+      }) as CSSProperties,
+    [index],
+  );
+
+  return (
+    <div
+      className={clsx("uds-modal-root", className)}
+      data-state={dataState}
+      style={layerStyle}
+      onClick={handleClose}
+      role="presentation"
+    >
+      <div className="uds-modal-dimmer" />
+      <div
+        className="uds-modal-surface"
+        role="dialog"
+        aria-modal="true"
+        onClick={stopPropagation}
+      >
+        <ModalContainer
+          stackKey={stackKey}
+          header={modalProps.header}
+          body={modalProps.body}
+          footer={modalProps.footer}
+          footerButtons={modalProps.footerButtons}
+        />
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,136 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import { useAtom } from "jotai";
+
+import { modalStackAtom } from "../jotai/atoms";
+
+import type {
+  ModalCloseRequest,
+  ModalState,
+  ModalStatePatch,
+  ModalStackKey,
+} from "../../types";
+
+const DEFAULT_CLOSE_DELAY = 400;
+
+type CloseFlagState = {
+  stackKey: ModalStackKey;
+  showDelay: number;
+  callback?: () => void;
+};
+
+const ensureDelay = (value?: number): number =>
+  typeof value === "number" ? value : DEFAULT_CLOSE_DELAY;
+
+type UseModalReturn = {
+  modalStacks: ModalState[];
+  newModal: (newStack: ModalState) => void;
+  updateModal: (nextStack: ModalStatePatch) => void;
+  closeModal: (request: ModalCloseRequest) => void;
+};
+
+/**
+ * ui-legacy 스펙을 최대한 유지한 모달 스택 훅.
+ * @hook
+ * @returns {UseModalReturn} 스택 상태와 조작자(new/open/close)
+ * @desc
+ * - modalStacks: 현재 열린 스택 배열
+ * - newModal: stackKey 중복 검증 후 "init" 상태로 푸시
+ * - updateModal: 부분 업데이트(클래스/슬롯 변경)
+ * - closeModal: show=false → delay 후 제거
+ */
+export function useModal(): UseModalReturn {
+  const [modalStacks, updateModalStack] = useAtom(modalStackAtom);
+  const [closeFlag, setCloseFlag] = useState<CloseFlagState | null>(null);
+
+  const newModal = useCallback(
+    (newStack: ModalState) => {
+      updateModalStack((stacks: ModalState[]) => {
+        const exists = stacks.some(
+          stack => stack.stackKey === newStack.stackKey,
+        );
+        if (exists) {
+          console.warn(
+            `[useModal] stack "${newStack.stackKey}" already exists; ignored.`,
+          );
+          return stacks;
+        }
+        return [
+          ...stacks,
+          {
+            ...newStack,
+            modalProps: { ...newStack.modalProps, show: "init" },
+          },
+        ];
+      });
+    },
+    [updateModalStack],
+  );
+
+  const updateModal = useCallback(
+    (nextStack: ModalStatePatch) => {
+      updateModalStack((stacks: ModalState[]) =>
+        stacks.map(stack => {
+          if (stack.stackKey !== nextStack.stackKey) return stack;
+          const mergedProps = nextStack.modalProps
+            ? { ...stack.modalProps, ...nextStack.modalProps }
+            : stack.modalProps;
+          return {
+            ...stack,
+            ...(typeof nextStack.className !== "undefined"
+              ? { className: nextStack.className }
+              : null),
+            modalProps: mergedProps,
+          };
+        }),
+      );
+    },
+    [updateModalStack],
+  );
+
+  const closeModal = useCallback(
+    ({ stackKey, callback }: ModalCloseRequest) => {
+      let resolvedDelay = DEFAULT_CLOSE_DELAY;
+      let hasTarget = false;
+
+      updateModalStack((stacks: ModalState[]) =>
+        stacks.map(stack => {
+          if (stack.stackKey !== stackKey) return stack;
+          hasTarget = true;
+          resolvedDelay = ensureDelay(stack.modalProps.showDelay);
+          return {
+            ...stack,
+            modalProps: { ...stack.modalProps, show: false },
+          };
+        }),
+      );
+
+      if (!hasTarget) {
+        console.warn(
+          `[useModal] stack "${stackKey}" not found; close skipped.`,
+        );
+        return;
+      }
+
+      setCloseFlag({ stackKey, showDelay: resolvedDelay, callback });
+    },
+    [updateModalStack],
+  );
+
+  useEffect(() => {
+    if (!closeFlag) return;
+
+    const timer = setTimeout(() => {
+      updateModalStack((stacks: ModalState[]) =>
+        stacks.filter(stack => stack.stackKey !== closeFlag.stackKey),
+      );
+      closeFlag.callback?.();
+      setCloseFlag(null);
+    }, closeFlag.showDelay);
+
+    return () => clearTimeout(timer);
+  }, [closeFlag, updateModalStack]);
+
+  return { modalStacks, newModal, updateModal, closeModal };
+}

package/src/modal/core/jotai/atoms.ts

@@ -0,0 +1,10 @@
+import { atom } from "jotai";
+
+import type { ModalState } from "../../types";
+
+/**
+ * 모달 스택 상태
+ * @state
+ * @desc ui-legacy 스택 정책을 유지한다.
+ */
+export const modalStackAtom = atom<ModalState[]>([]);

package/src/modal/index.scss

@@ -0,0 +1,4 @@
+@use "./styles/base.scss" as *;
+@use "./styles/dimmer.scss" as *;
+@use "./styles/container.scss" as *;
+@use "./styles/animations.scss" as *;

package/src/modal/index.tsx

@@ -0,0 +1,16 @@
+import "./index.scss";
+
+import { ModalProvider } from "./core/components/Provider";
+import { useModal } from "./core/hooks/useModal";
+import { createAlertModal } from "./templates/Alert";
+import { createDialogModal } from "./templates/Dialog";
+
+export const Modal = {
+  Provider: ModalProvider,
+  useModal,
+  Alert: createAlertModal,
+  Dialog: createDialogModal,
+};
+
+export { ModalProvider, useModal, createAlertModal, createDialogModal };
+export type * from "./types";

package/src/modal/styles/animations.scss

@@ -0,0 +1,24 @@
+.uds-modal-surface {
+  opacity: 0;
+  transform: translate3d(0, 12px, 0);
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+
+  .uds-modal-root[data-state="open"] & {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+
+  .uds-modal-root[data-state="closed"] & {
+    opacity: 0;
+    transform: translate3d(0, 12px, 0);
+    pointer-events: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .uds-modal-surface {
+    transition: none;
+  }
+}

package/src/modal/styles/base.scss

@@ -0,0 +1,45 @@
+@use "@uniai-fe/uds-foundation/css";
+
+:where(.radix-themes, .theme-root, :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)
+  );
+  --uds-modal-max-height: calc(100vh - var(--spacing-padding-10) * 2);
+}
+
+.uds-modal-root {
+  position: fixed;
+  inset: 0;
+  z-index: calc(400 + var(--uds-modal-index, 0));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-padding-6);
+  pointer-events: none;
+}
+
+.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);
+  pointer-events: auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.uds-modal-dimmer {
+  position: absolute;
+  inset: 0;
+  background-color: var(--uds-modal-overlay-bg);
+  pointer-events: auto;
+}