@uniai-fe/uds-templates 0.0.9 → 0.0.11

package/src/components/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/components/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/components/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/components/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/components/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/components/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/components/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/components/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/components/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;
+}

package/src/components/modal/styles/container.scss

@@ -0,0 +1,138 @@
+.uds-modal-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.uds-modal-header,
+.uds-modal-body {
+  padding: 0;
+  margin: 0;
+}
+
+.uds-modal-footer {
+  padding: 0;
+  border-top: none;
+}
+
+.uds-modal-footer-buttons {
+  display: flex;
+  width: 100%;
+  gap: var(--spacing-gap-4, 16px);
+  padding: var(--spacing-padding-6, 16px);
+  align-items: stretch;
+
+  &[data-count="1"] {
+    .uds-modal-footer-button {
+      width: 100%;
+    }
+  }
+
+  &[data-count="2"] {
+    .uds-modal-footer-button {
+      flex: 1 1 0;
+    }
+  }
+
+  &[data-appearance="text"] {
+    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)
+        )
+      );
+
+    .uds-modal-footer-button {
+      border-radius: 0;
+    }
+
+    .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)
+          )
+        );
+    }
+  }
+}
+
+.uds-modal-footer-button-solid {
+  min-height: 48px;
+}
+
+.uds-modal-footer-button-text {
+  min-height: 56px;
+  justify-content: center;
+  border-radius: 0;
+}
+
+.uds-modal-alert-message {
+  padding: var(--spacing-padding-10, 32px) var(--spacing-padding-8, 24px);
+  text-align: center;
+  color: var(--dialog-body-color);
+  word-break: keep-all;
+
+  > p,
+  > span,
+  > strong,
+  > em {
+    margin: 0;
+    font-size: var(--dialog-body-font-size);
+    line-height: 1.5em;
+    font-weight: var(--font-body-small-weight, 400);
+    word-break: inherit;
+  }
+
+  > * + * {
+    margin-top: var(--spacing-gap-2, 8px);
+  }
+}
+
+.uds-modal-dialog-header,
+.uds-modal-dialog-body {
+  padding: 0;
+  margin: 0;
+}
+
+.uds-modal-dialog-header-content {
+  padding: var(--spacing-padding-7, 20px) var(--spacing-padding-6, 16px);
+  text-align: center;
+
+  > 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);
+  }
+}
+
+.uds-modal-dialog-body-content {
+  padding: var(--spacing-padding-7, 20px) var(--spacing-padding-6, 16px);
+  text-align: center;
+  color: var(--dialog-body-color);
+  word-break: keep-all;
+
+  > p,
+  > span,
+  > strong,
+  > em {
+    margin: 0;
+    font-size: var(--dialog-body-font-size);
+    line-height: 1.5em;
+    font-weight: var(--font-body-small-weight, 400);
+    word-break: inherit;
+  }
+
+  > * + * {
+    margin-top: var(--spacing-gap-2, 8px);
+  }
+}

package/src/components/modal/styles/dimmer.scss

@@ -0,0 +1,23 @@
+.uds-modal-root {
+  &[data-state="init"],
+  &[data-state="open"] {
+    pointer-events: auto;
+  }
+
+  &[data-state="closed"] {
+    pointer-events: none;
+  }
+}
+
+.uds-modal-dimmer {
+  opacity: 0;
+  transition: opacity 0.2s ease;
+
+  .uds-modal-root[data-state="open"] & {
+    opacity: 1;
+  }
+
+  .uds-modal-root[data-state="closed"] & {
+    opacity: 0;
+  }
+}