@uniai-fe/uds-templates 0.0.11 → 0.0.13

package/src/auth/common/find/styles/email.scss

@@ -0,0 +1,55 @@
+.auth-find-account-email-block {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-3, 12px);
+  margin-bottom: var(--spacing-padding-7, 28px);
+}
+
+.auth-find-account-email-label {
+  color: var(--color-label-standard, var(--primitive-coolgray-20, #3d3f43));
+  font-size: var(--font-label-small-size, 13px);
+  line-height: 1.5;
+  margin: 0;
+}
+
+.auth-find-account-email-field {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid
+    var(--color-border-standard, var(--primitive-coolgray-90, #e4e5e7));
+  min-height: var(--spacing-padding-14, 56px);
+  padding-bottom: var(--spacing-padding-2, 8px);
+}
+
+.auth-find-account-email-value {
+  font-size: var(--font-body-large-size, 19px);
+  color: var(--color-label-strong, var(--primitive-coolgray-10, #18191b));
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.auth-find-account-email-helper {
+  font-size: var(--font-caption-medium-size, 12px);
+  color: var(--color-label-alternative, var(--primitive-coolgray-50, #afb1b6));
+  margin: 0;
+}
+
+.auth-find-account-meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-padding-4, 16px);
+}
+
+.auth-find-account-timer-text {
+  font-size: var(--font-caption-medium-size, 12px);
+  color: var(--color-primary-50, #2563eb);
+}
+
+.auth-find-account-timer-helper,
+.auth-find-account-helper {
+  font-size: var(--font-caption-medium-size, 12px);
+  color: var(--color-label-neutral, var(--primitive-coolgray-40, #797e86));
+  margin: 0;
+}

package/src/auth/common/find/styles/find-account.scss

@@ -0,0 +1,4 @@
+@use "./layout.scss";
+@use "./email.scss";
+@use "./result.scss";
+@use "./password.scss";

package/src/auth/common/find/styles/layout.scss

@@ -0,0 +1,19 @@
+.auth-find-account-container {
+  width: 100%;
+}
+
+.auth-find-account-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-6, 24px);
+}
+
+.auth-find-account-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-5, 20px);
+}
+
+.auth-find-account-form--code .auth-find-account-fields {
+  margin-bottom: var(--spacing-padding-4, 16px);
+}

package/src/auth/common/find/styles/password.scss

@@ -0,0 +1,39 @@
+.auth-find-account-password-rules {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-2, 8px);
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.auth-find-account-password-rule {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-padding-3, 12px);
+  font-size: var(--font-body-medium-size, 15px);
+  color: var(--color-label-assistive);
+}
+
+.auth-find-account-password-rule::before {
+  content: "";
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-border-standard);
+  flex-shrink: 0;
+}
+
+.auth-find-account-password-rule[data-satisfied="true"] {
+  color: var(--color-label-positive);
+}
+
+.auth-find-account-password-rule[data-satisfied="true"]::before {
+  background: var(--color-label-positive);
+}
+
+.auth-find-account-password-helper {
+  font-size: var(--font-caption-medium-size, 12px);
+  color: var(--color-label-neutral);
+  margin: 0;
+}

package/src/auth/common/find/styles/result.scss

@@ -0,0 +1,78 @@
+.auth-find-account-result-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-2, 8px);
+  padding: var(--spacing-padding-7, 28px);
+  border-radius: var(--shape-rounded-3, 16px);
+  background: var(--color-background-subtle);
+  margin-bottom: var(--spacing-padding-6, 24px);
+}
+
+.auth-find-account-result-label {
+  font-size: var(--font-caption-medium-size, 12px);
+  color: var(--color-label-assistive);
+  margin: 0;
+}
+
+.auth-find-account-result-value {
+  font-size: var(--font-heading-medium-size, 21px);
+  font-weight: 700;
+  color: var(--color-label-strong);
+  margin: 0;
+  word-break: break-word;
+}
+
+.auth-find-account-result-sub {
+  font-size: var(--font-body-medium-size, 15px);
+  color: var(--color-label-standard);
+  margin: 0;
+}
+
+.auth-find-account-result-helper {
+  font-size: var(--font-caption-medium-size, 12px);
+  color: var(--color-label-assistive);
+  margin: 0;
+}
+
+.auth-find-account-id-summary {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-padding-4, 16px);
+  width: 100%;
+}
+
+.auth-find-account-id-summary-card {
+  width: fit-content;
+  min-width: 230px;
+  padding: 0 var(--spacing-padding-6, 16px);
+  border-radius: var(--theme-radius-medium-3, 8px);
+  background: var(
+    --color-background-alternative-cool_gray,
+    var(--colot-cool-gray-95, #f2f2f3)
+  );
+}
+
+.auth-find-account-id-summary-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--spacing-padding-5, 20px);
+  margin: var(--spacing-gap-5, 12px) 0;
+
+  .auth-find-account-id-summary-text {
+    font-size: 0;
+    span {
+      font-size: var(--font-caption-large-size);
+      line-height: var(--font-caption-large-line-height);
+    }
+  }
+
+  dt {
+    color: var(--color-label-neutral);
+  }
+
+  dd {
+    color: var(--color-label-strong);
+  }
+}

package/src/auth/common/find/types/forms.ts

@@ -0,0 +1,30 @@
+import type React from "react";
+import type {
+  FieldValues,
+  SubmitHandler,
+  UseFormReturn,
+} from "react-hook-form";
+import type { InputFieldProps } from "@uniai-fe/uds-primitives";
+import type { FindAccountFieldHelper } from "./index";
+
+export type UseFindAccountFormOptions<
+  TFields extends Record<string, InputFieldProps>,
+  TValues extends FieldValues,
+> = {
+  fields: TFields;
+  form: UseFormReturn<TValues>;
+  onSubmit: SubmitHandler<TValues>;
+  isSubmittable?: (values?: TValues) => boolean;
+};
+
+export type UseFindAccountFormReturn<
+  TFields extends Record<string, InputFieldProps>,
+  TValues extends FieldValues,
+> = {
+  register: {
+    [K in keyof TFields]: ReturnType<UseFormReturn<TValues>["register"]>;
+  };
+  helpers: Record<keyof TFields, FindAccountFieldHelper>;
+  disabled: boolean;
+  onSubmit: React.FormEventHandler<HTMLFormElement>;
+};

package/src/auth/common/find/types/index.ts

@@ -0,0 +1,121 @@
+import type React from "react";
+import type { SubmitHandler } from "react-hook-form";
+import type { AuthContainerProps } from "../../container";
+import type {
+  AuthCodeInputProps,
+  ButtonProps,
+  InputFieldProps,
+  InputProps,
+} from "@uniai-fe/uds-primitives";
+
+export type FindAccountNavigationProps = {
+  title?: React.ReactNode;
+  backLabel?: React.ReactNode;
+  backIcon?: React.ReactNode;
+  onBack?: () => void;
+};
+
+export type FindAccountProgressProps = {
+  total: number;
+  current: number;
+};
+
+export type FindAccountHeadlineProps = {
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  progress?: FindAccountProgressProps;
+};
+
+export type FindAccountCTAProps = {
+  label: React.ReactNode;
+  buttonProps?: Omit<ButtonProps, "children">;
+};
+
+export type FindAccountFieldHelper = {
+  text?: React.ReactNode;
+  state?: "error" | "success" | "warning";
+};
+
+export type FindAccountInfoValues = Record<string, string>;
+
+export type FindAccountInfoFields = {
+  name: InputFieldProps<InputProps>;
+  email: InputFieldProps<InputProps>;
+};
+
+export type FindAccountInfoFieldOptions<
+  TFields extends FindAccountInfoFields = FindAccountInfoFields,
+> = {
+  fields: TFields;
+  formAttr?: React.FormHTMLAttributes<HTMLFormElement>;
+  onSubmit: SubmitHandler<FindAccountInfoValues>;
+  isSubmittable?: (values?: FindAccountInfoValues) => boolean;
+};
+
+export type FindAccountInfoStepProps<
+  TFields extends FindAccountInfoFields = FindAccountInfoFields,
+> = Omit<AuthContainerProps, "children"> & {
+  fieldOptions: FindAccountInfoFieldOptions<TFields>;
+  cta?: FindAccountCTAProps;
+  navigation?: FindAccountNavigationProps;
+  headline?: FindAccountHeadlineProps;
+};
+
+export type FindAccountInfoScreenProps<
+  TFields extends FindAccountInfoFields = FindAccountInfoFields,
+> = FindAccountInfoStepProps<TFields>;
+
+export type FindAccountCodeValues = Record<string, string>;
+
+export type FindAccountCodeField = {
+  attr?: {
+    name?: string;
+  };
+  label?: React.ReactNode;
+  helper?: React.ReactNode;
+  length?: number;
+  props?: Omit<AuthCodeInputProps, "label" | "helper" | "length">;
+};
+
+export type FindAccountCodeFields = {
+  code: FindAccountCodeField;
+};
+
+export type FindAccountCodeFieldOptions<
+  TFields extends FindAccountCodeFields = FindAccountCodeFields,
+> = {
+  fields: TFields;
+  formAttr?: React.FormHTMLAttributes<HTMLFormElement>;
+  onSubmit: SubmitHandler<FindAccountCodeValues>;
+  isSubmittable?: (values?: FindAccountCodeValues) => boolean;
+};
+
+export type FindAccountEmailDisplayProps = {
+  label?: React.ReactNode;
+  value: React.ReactNode;
+  helper?: React.ReactNode;
+  resend?: FindAccountCTAProps;
+};
+
+export type FindAccountTimerProps = {
+  text: React.ReactNode;
+  helper?: React.ReactNode;
+  extend?: FindAccountCTAProps;
+};
+
+export type FindAccountCodeStepProps<
+  TFields extends FindAccountCodeFields = FindAccountCodeFields,
+> = Omit<AuthContainerProps, "children"> & {
+  emailDisplay: FindAccountEmailDisplayProps;
+  timer?: FindAccountTimerProps;
+  fieldOptions: FindAccountCodeFieldOptions<TFields>;
+  cta?: FindAccountCTAProps;
+  navigation?: FindAccountNavigationProps;
+  headline?: FindAccountHeadlineProps;
+};
+
+export type FindAccountCodeScreenProps<
+  TFields extends FindAccountCodeFields = FindAccountCodeFields,
+> = FindAccountCodeStepProps<TFields>;
+
+export type * from "./forms";

package/src/auth/common/find/utils/composeFieldProps.ts

@@ -0,0 +1,45 @@
+import type { InputFieldProps, InputProps } from "@uniai-fe/uds-primitives";
+import type { FindAccountFieldHelper } from "../types";
+
+export const composeFindAccountFieldProps = <
+  TProps extends InputProps = InputProps,
+>(
+  config: InputFieldProps<TProps>,
+  helper?: FindAccountFieldHelper,
+): TProps => {
+  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;
+
+  const resolvedPriority =
+    baseProps.priority ?? ("secondary" as TProps["priority"]);
+  const resolvedSize = baseProps.size ?? ("large" as TProps["size"]);
+
+  return {
+    ...baseProps,
+    label: config.label ?? baseProps.label,
+    helper: helper?.text ?? config.helper ?? baseProps.helper,
+    state: helper?.state ?? baseProps.state,
+    priority: resolvedPriority,
+    size: resolvedSize,
+    block: config.block ?? baseProps.block ?? true,
+    className: config.className ?? baseProps.className,
+    labelProps: mergedLabelProps,
+    helperProps: mergedHelperProps,
+  };
+};

package/src/auth/common/password/constants.ts

@@ -0,0 +1,19 @@
+import type { AuthPasswordRule } from "./types";
+
+export const DEFAULT_PASSWORD_RULES: AuthPasswordRule[] = [
+  {
+    id: "letters",
+    label: "영문",
+    predicate: (value: string) => /[A-Za-z]/.test(value),
+  },
+  {
+    id: "numbers",
+    label: "숫자",
+    predicate: (value: string) => /[0-9]/.test(value),
+  },
+  {
+    id: "length",
+    label: "8자 이상",
+    predicate: (value: string) => value.length >= 8,
+  },
+];

package/src/auth/common/password/hooks/useCheckPassword.ts

@@ -0,0 +1,133 @@
+import { useCallback, useEffect, useMemo } from "react";
+import type { ReactNode } from "react";
+import { useWatch } from "react-hook-form";
+import type { FieldPath, FieldValues, UseFormReturn } from "react-hook-form";
+import type { AuthPasswordHelperState } from "../types";
+
+interface UseCheckPasswordMessages {
+  missing?: string;
+  mismatch?: string;
+}
+
+export interface UseCheckPasswordOptions<TValues extends FieldValues> {
+  form: UseFormReturn<TValues>;
+  passwordField: FieldPath<TValues>;
+  confirmField: FieldPath<TValues>;
+  helperText?: ReactNode;
+  messages?: UseCheckPasswordMessages;
+}
+
+export interface UseCheckPasswordReturn {
+  passwordValue?: string;
+  confirmPasswordValue?: string;
+  validator: (value: string) => true | string;
+  helper: AuthPasswordHelperState;
+  isMatched: boolean;
+}
+
+/**
+ * Password 확인 훅; 비밀번호/재확인 값의 일치 여부와 helper 상태를 계산한다.
+ * @hook
+ * @param {UseCheckPasswordOptions<TValues>} options 훅 옵션
+ * @param {UseFormReturn<TValues>} options.form react-hook-form 반환값
+ * @param {FieldPath<TValues>} options.passwordField 비밀번호 필드 이름
+ * @param {FieldPath<TValues>} options.confirmField 재확인 필드 이름
+ * @param {ReactNode} [options.helperText] 기본 helper 텍스트
+ * @param {UseCheckPasswordMessages} [options.messages] 검증 메시지
+ * @returns {UseCheckPasswordReturn} validator/helper/입력값 집합
+ */
+export function useCheckPassword<TValues extends FieldValues>({
+  form,
+  passwordField,
+  confirmField,
+  helperText,
+  messages,
+}: UseCheckPasswordOptions<TValues>): UseCheckPasswordReturn {
+  const missingMessage = messages?.missing ?? "비밀번호를 먼저 입력해 주세요.";
+  const mismatchMessage = messages?.mismatch ?? "비밀번호 불일치";
+  const passwordValue = useWatch({
+    control: form.control,
+    name: passwordField,
+  }) as string | undefined;
+  const confirmPasswordValue = useWatch({
+    control: form.control,
+    name: confirmField,
+  }) as string | undefined;
+
+  const validator = useCallback(
+    (value: string) => {
+      if (!value) {
+        return true;
+      }
+      const latestPassword = form.getValues(passwordField) as
+        | string
+        | undefined;
+      if (!latestPassword || latestPassword.length === 0) {
+        return missingMessage;
+      }
+      return latestPassword === value || mismatchMessage;
+    },
+    [form, mismatchMessage, missingMessage, passwordField],
+  );
+
+  const helper: AuthPasswordHelperState = useMemo(() => {
+    if (!confirmPasswordValue || confirmPasswordValue.length === 0) {
+      return {
+        text: helperText ?? undefined,
+        state: undefined,
+      };
+    }
+
+    if (!passwordValue || passwordValue.length === 0) {
+      return {
+        text: missingMessage,
+        state: "error",
+      };
+    }
+
+    if (confirmPasswordValue !== passwordValue) {
+      return {
+        text: mismatchMessage,
+        state: "error",
+      };
+    }
+
+    return {
+      text: helperText ?? undefined,
+      state: undefined,
+    };
+  }, [
+    confirmPasswordValue,
+    helperText,
+    mismatchMessage,
+    missingMessage,
+    passwordValue,
+  ]);
+
+  const isMatched =
+    typeof passwordValue === "string" &&
+    passwordValue.length > 0 &&
+    typeof confirmPasswordValue === "string" &&
+    confirmPasswordValue.length > 0 &&
+    confirmPasswordValue === passwordValue;
+
+  useEffect(() => {
+    if (!isMatched) {
+      return;
+    }
+    const fieldState = form.getFieldState(confirmField);
+    if (fieldState.error) {
+      form.clearErrors(confirmField);
+    }
+  }, [confirmField, form, isMatched]);
+
+  return {
+    passwordValue,
+    confirmPasswordValue,
+    validator,
+    helper,
+    isMatched,
+  };
+}
+
+export default useCheckPassword;

package/src/auth/common/password/img/check-password.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 2C11.3137 2 14 4.68629 14 8C14 11.3137 11.3137 14 8 14C4.68629 14 2 11.3137 2 8C2 4.68629 4.68629 2 8 2ZM10.9268 6.44141C10.7185 6.23363 10.381 6.23351 10.1729 6.44141L7.48535 9.12891L5.71094 7.35352C5.50266 7.14524 5.16433 7.14524 4.95605 7.35352C4.74799 7.56167 4.74821 7.89914 4.95605 8.10742L7.1084 10.2598C7.31665 10.468 7.655 10.4689 7.86328 10.2607L10.9277 7.19629C11.1358 6.98799 11.135 6.6496 10.9268 6.44141Z" fill="currentColor"/>
+</svg>