@uniai-fe/uds-templates 0.0.10 → 0.0.11

package/src/components/modal/templates/Alert.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import type {
+  AlertTemplateOptions,
+  ModalFooterButton,
+  ModalState,
+  ModalTemplateButtonSpec,
+} from "../types";
+
+const DEFAULT_CONFIRM_LABEL = "확인";
+const DEFAULT_CANCEL_LABEL = "취소";
+
+function AlertBody({ message }: { message: AlertTemplateOptions["message"] }) {
+  return (
+    <div className="uds-modal-alert-message">
+      {typeof message === "string" ? <p>{message}</p> : message}
+    </div>
+  );
+}
+
+const createAlertFooterButtons = ({
+  stackKey,
+  primary,
+  cancel,
+}: {
+  stackKey: string;
+  primary: ModalTemplateButtonSpec;
+  cancel?: ModalTemplateButtonSpec;
+}): ModalFooterButton[] => {
+  const buttons: ModalFooterButton[] = [];
+
+  if (cancel) {
+    // cancel 버튼은 저강조 텍스트 버튼 규격을 고정해 디자인 일관성을 맞춘다.
+    buttons.push({
+      stackKey,
+      role: "close",
+      defaultOptions: {
+        label: cancel.label ?? DEFAULT_CANCEL_LABEL,
+        appearance: "text",
+        priority: "tertiary",
+        textSize: "large",
+        disabled: cancel.disabled,
+        onClick: cancel.onClick,
+      },
+      closeOnClick: cancel.closeOnClick,
+    });
+  }
+
+  // confirm 버튼은 고강조 텍스트 버튼으로 구성한다.
+  buttons.push({
+    stackKey,
+    role: "close",
+    defaultOptions: {
+      label: primary.label ?? DEFAULT_CONFIRM_LABEL,
+      appearance: "text",
+      priority: "secondary",
+      textSize: "large",
+      disabled: primary.disabled,
+      onClick: primary.onClick,
+    },
+    closeOnClick: primary.closeOnClick,
+  });
+
+  return buttons;
+};
+
+/**
+ * Alert 템플릿 모달 상태 생성.
+ * @component
+ * @param {AlertTemplateOptions} options Alert 모달 옵션
+ * @param {string} options.stackKey 모달 스택 키
+ * @param {React.ReactNode} options.message 본문 메시지
+ * @param {ModalTemplateButtonSpec} [options.confirm] 확인 버튼 스펙
+ * @param {ModalTemplateButtonSpec} [options.cancel] 취소 버튼 스펙
+ * @param {React.ReactNode} [options.footer] 완전 커스텀 footer
+ * @param {number} [options.showDelay] close 후 제거 지연(ms)
+ * @returns {ModalState}
+ */
+export function createAlertModal({
+  stackKey,
+  message,
+  confirm,
+  cancel,
+  footer,
+  showDelay,
+}: AlertTemplateOptions): ModalState {
+  const primary: ModalTemplateButtonSpec = confirm ?? {
+    label: DEFAULT_CONFIRM_LABEL,
+  };
+
+  return {
+    stackKey,
+    modalProps: {
+      show: "init",
+      showDelay,
+      body: <AlertBody message={message} />,
+      footer,
+      footerButtons:
+        footer || !primary
+          ? undefined
+          : createAlertFooterButtons({ stackKey, primary, cancel }),
+    },
+  };
+}

package/src/components/modal/templates/Dialog.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import type {
+  DialogTemplateOptions,
+  ModalFooterButton,
+  ModalState,
+  ModalTemplateButtonSpec,
+} from "../types";
+
+const DEFAULT_DIALOG_CONFIRM = "확인";
+const DEFAULT_DIALOG_CANCEL = "취소";
+
+function DialogHeader({ title }: { title?: DialogTemplateOptions["title"] }) {
+  if (!title) return null;
+
+  return (
+    <div className="uds-modal-dialog-header">
+      <div className="uds-modal-dialog-header-content">
+        {typeof title === "string" ? <h3>{title}</h3> : title}
+      </div>
+    </div>
+  );
+}
+
+function DialogBody({
+  content,
+}: {
+  content: DialogTemplateOptions["content"];
+}) {
+  return (
+    <div className="uds-modal-dialog-body">
+      <div className="uds-modal-dialog-body-content">
+        {typeof content === "string" ? <p>{content}</p> : content}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Dialog 템플릿 모달 상태 생성.
+ * @component
+ * @param {DialogTemplateOptions} options Dialog 모달 옵션
+ * @param {string} options.stackKey 모달 스택 키
+ * @param {React.ReactNode} [options.title] 헤더 타이틀
+ * @param {React.ReactNode} options.content 본문 컨텐츠
+ * @param {ModalTemplateButtonSpec} [options.confirm] 확인 버튼 스펙
+ * @param {ModalTemplateButtonSpec} [options.cancel] 취소 버튼 스펙
+ * @param {React.ReactNode} [options.footer] 커스텀 footer
+ * @param {number} [options.showDelay] close 후 제거 지연(ms)
+ * @returns {ModalState}
+ */
+export function createDialogModal({
+  stackKey,
+  title,
+  content,
+  confirm,
+  cancel,
+  footer,
+  showDelay,
+}: DialogTemplateOptions): ModalState {
+  const primary: ModalTemplateButtonSpec = confirm ?? {
+    label: DEFAULT_DIALOG_CONFIRM,
+  };
+
+  const footerButtons: ModalFooterButton[] =
+    primary && !footer
+      ? [
+          ...(cancel
+            ? [
+                {
+                  stackKey,
+                  role: "close",
+                  // cancel 버튼은 secondary solid 규격으로 일관된 스킨을 유지한다.
+                  defaultOptions: {
+                    label: cancel.label ?? DEFAULT_DIALOG_CANCEL,
+                    scale: "solid-large",
+                    priority: "secondary",
+                    disabled: cancel.disabled,
+                    onClick: cancel.onClick,
+                  },
+                  closeOnClick: cancel.closeOnClick,
+                } as ModalFooterButton,
+              ]
+            : []),
+          {
+            stackKey,
+            role: "close",
+            // confirm 버튼은 primary solid 규격으로 고정한다.
+            defaultOptions: {
+              label: primary.label ?? DEFAULT_DIALOG_CONFIRM,
+              scale: "solid-large",
+              priority: "primary",
+              disabled: primary.disabled,
+              onClick: primary.onClick,
+            },
+            closeOnClick: primary.closeOnClick,
+          },
+        ]
+      : [];
+
+  return {
+    stackKey,
+    modalProps: {
+      show: "init",
+      showDelay,
+      header: <DialogHeader title={title} />,
+      body: <DialogBody content={content} />,
+      footer,
+      footerButtons: footerButtons.length ? footerButtons : undefined,
+    },
+  };
+}

package/src/components/modal/types/footer.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from "react";
+import type {
+  ButtonPriority,
+  ButtonScale,
+  TextButtonSize,
+} from "@uniai-fe/uds-primitives";
+
+import type { ModalStackKey } from "./state";
+
+export type ModalFooterButtonAppearance = "default" | "text";
+
+export type ModalFooterButtonDefaultOptions = {
+  label: ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  block?: boolean;
+  priority?: ButtonPriority;
+  scale?: ButtonScale;
+  textSize?: TextButtonSize;
+  appearance?: ModalFooterButtonAppearance;
+  className?: string;
+};
+
+export type ModalFooterButtonLinkOptions = {
+  href: string;
+  target?: string;
+  rel?: string;
+};
+
+export type ModalFooterButton = {
+  stackKey: ModalStackKey;
+  role: "close" | string;
+  defaultOptions: ModalFooterButtonDefaultOptions;
+  linkOptions?: ModalFooterButtonLinkOptions;
+  closeOnClick?: boolean;
+};

package/src/components/modal/types/index.ts

@@ -0,0 +1,21 @@
+export type {
+  ModalShowState,
+  ModalStackKey,
+  ModalSections,
+  ModalProps,
+  ModalState,
+  ModalStatePatch,
+} from "./state";
+export type {
+  ModalFooterButton,
+  ModalFooterButtonDefaultOptions,
+  ModalFooterButtonLinkOptions,
+  ModalFooterButtonAppearance,
+} from "./footer";
+export type { ModalCloseRequest } from "./options";
+export type {
+  AlertTemplateOptions,
+  DialogTemplateOptions,
+  ModalTemplateButtonSpec,
+  ModalTemplateResult,
+} from "./templates";

package/src/components/modal/types/options.ts

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

package/src/components/modal/types/state.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+
+import type { ModalFooterButton } from "./footer";
+
+export type ModalShowState = "init" | boolean;
+
+export type ModalStackKey = string;
+
+export type ModalSections = {
+  header?: ReactNode;
+  body: ReactNode;
+  footer?: ReactNode;
+};
+
+export type ModalProps = ModalSections & {
+  show: ModalShowState;
+  showDelay?: number;
+  footerButtons?: ModalFooterButton[];
+};
+
+export type ModalState = {
+  stackKey: ModalStackKey;
+  modalProps: ModalProps;
+  className?: string;
+};
+
+export type ModalStatePatch = {
+  stackKey: ModalStackKey;
+  modalProps?: Partial<ModalProps>;
+  className?: string;
+};

package/src/components/modal/types/templates.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+
+import type { ModalState, ModalStackKey } from "./state";
+
+export type ModalTemplateButtonSpec = {
+  label?: ReactNode;
+  onClick?: () => void;
+  closeOnClick?: boolean;
+  disabled?: boolean;
+};
+
+type ModalTemplateBase = {
+  stackKey: ModalStackKey;
+  showDelay?: number;
+};
+
+export type AlertTemplateOptions = ModalTemplateBase & {
+  message: ReactNode;
+  confirm?: ModalTemplateButtonSpec;
+  cancel?: ModalTemplateButtonSpec;
+  footer?: ReactNode;
+};
+
+export type DialogTemplateOptions = ModalTemplateBase & {
+  title?: ReactNode;
+  content: ReactNode;
+  confirm?: ModalTemplateButtonSpec;
+  cancel?: ModalTemplateButtonSpec;
+  footer?: ReactNode;
+};
+
+export type ModalTemplateResult = ModalState;

package/src/index.scss

@@ -4,3 +4,4 @@
 @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 "./components/modal/index.scss" as *;

package/src/index.tsx

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