@uniai-fe/uds-templates 0.0.10 → 0.0.12

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

package/src/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/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/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/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/modal/types/options.ts

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

package/src/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/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/page-frame/mobile/header/PageFrameMobileHeader.tsx

@@ -0,0 +1,52 @@
+import clsx from "clsx";
+import type { ReactNode } from "react";
+
+import "./page-frame-mobile-header.scss";
+
+export interface PageFrameMobileHeaderProps {
+  className?: string;
+  title: ReactNode;
+  backIcon?: ReactNode;
+  onBack?: () => void;
+  leftSlot?: ReactNode;
+  rightSlot?: ReactNode;
+}
+
+/**
+ * 모바일 서비스 공통 page header; 뒤로가기 버튼 + 타이틀을 노출한다.
+ * @component
+ */
+export function PageFrameMobileHeader({
+  className,
+  title,
+  backIcon,
+  onBack,
+  leftSlot,
+  rightSlot,
+}: PageFrameMobileHeaderProps) {
+  return (
+    <div className={clsx("page-frame-mobile-header", className)}>
+      <span className="page-frame-mobile-header__left">
+        {leftSlot ??
+          (onBack ? (
+            <button
+              type="button"
+              className="page-frame-mobile-header__back"
+              onClick={onBack}
+              aria-label="뒤로가기"
+            >
+              <span className="page-frame-mobile-header__back-icon">
+                {backIcon ?? "←"}
+              </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>
+  );
+}

package/src/page-frame/mobile/header/index.ts

@@ -0,0 +1,4 @@
+export {
+  PageFrameMobileHeader as PageFrameMobileHeader,
+  type PageFrameMobileHeaderProps,
+} from "./PageFrameMobileHeader";

package/src/page-frame/mobile/header/page-frame-mobile-header.scss

@@ -0,0 +1,48 @@
+.page-frame-mobile-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-padding-2, 8px);
+  min-height: 40px;
+}
+
+.page-frame-mobile-header__left,
+.page-frame-mobile-header__right {
+  width: 64px;
+  height: 40px;
+  display: inline-flex;
+  align-items: center;
+}
+
+.page-frame-mobile-header__back {
+  border: none;
+  background: none;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-padding-1, 4px);
+  padding: var(--spacing-padding-1, 4px);
+  font-size: 14px;
+  color: var(--color-label-standard);
+  cursor: pointer;
+}
+
+.page-frame-mobile-header__back-icon {
+  font-size: 18px;
+  line-height: 1;
+}
+
+.page-frame-mobile-header__back-placeholder {
+  width: 100%;
+  height: 100%;
+}
+
+.page-frame-mobile-header__title {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-label-standard);
+}

package/src/page-frame/mobile/img/chevron-backward.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5655 19.4341L8.13126 11.9998L15.5655 4.56554C15.878 4.25312 15.878 3.74686 15.5655 3.43444C15.2531 3.12202 14.7469 3.12202 14.4345 3.43444L6.43462 11.4343C6.1222 11.7467 6.1222 12.253 6.43461 12.5654L14.4345 20.5652C14.7469 20.8776 15.2531 20.8776 15.5655 20.5652C15.8778 20.2528 15.8779 19.7465 15.5655 19.4341Z" fill="#313235"/>
+</svg>

package/src/components/auth/index.tsx

@@ -1,20 +0,0 @@
-import "./login/index.scss";
-
-import { AuthContainer } from "./container";
-import { AuthLogin } from "./login";
-
-export const Auth = {
-  Container: AuthContainer,
-  Login: AuthLogin,
-};
-
-export type {
-  AuthLoginProps,
-  AuthLoginFieldOptions,
-  AuthLoginFieldConfig,
-  AuthLoginFields,
-  AuthLoginLinkOptions,
-  AuthLoginFormValues,
-  UseAuthLoginFormOptions,
-  UseAuthLoginFormReturn,
-} from "./login";

package/src/components/auth/login/types.ts

@@ -1,2 +0,0 @@
-export * from "./types/props";
-export * from "./types/hooks";