@uniai-fe/uds-templates 0.0.9 → 0.0.11

package/src/components/auth/signup/markup/VerificationForm.tsx

@@ -0,0 +1,155 @@
+import { useMemo } from "react";
+import { useForm } from "react-hook-form";
+import {
+  Button,
+  CheckboxField,
+  EmailVerificationInput,
+  type EmailVerificationInputProps,
+} from "@uniai-fe/uds-primitives";
+import type {
+  AuthSignupAgreementOption,
+  AuthSignupVerificationProps,
+  AuthSignupVerificationValues,
+} from "../types";
+import { useSignupVerificationForm } from "../hooks";
+import { composeSignupFieldProps } from "../utils/composeFieldProps";
+
+const DEFAULT_SUBMIT_LABEL = "다음";
+
+/**
+ * 회원가입 Step2; 약관 동의 + 이메일 인증
+ * @component
+ * @param {AuthSignupVerificationProps} props verification props
+ * @param {AuthSignupAgreementOption[]} props.agreements 약관 목록
+ * @param {Record<string, boolean>} props.agreementState 약관 체크 상태
+ * @param {(agreementId: string) => void} props.onToggleAgreement 단일 약관 토글
+ * @param {() => void} props.onToggleAll 전체 동의 토글
+ * @param {(agreementId: string) => void} [props.onOpenAgreementDetail] 약관 상세 보기
+ * @param {React.FormHTMLAttributes<HTMLFormElement>} [props.formAttr] form attr
+ * @param {import("react").ReactNode} [props.submitLabel] CTA 라벨
+ */
+export function AuthSignupVerificationForm({
+  fields,
+  agreements,
+  agreementState,
+  onToggleAgreement,
+  onToggleAll,
+  onOpenAgreementDetail,
+  formAttr,
+  submitLabel,
+  onSubmit,
+}: AuthSignupVerificationProps) {
+  // 이메일 필드 name attr 기반으로 RHF defaultValues를 설정한다.
+  const defaultValues = useMemo(
+    () =>
+      (Object.keys(fields) as Array<keyof typeof fields>).reduce(
+        (acc, fieldKey) => {
+          const config = fields[fieldKey];
+          const fieldName = config.attr?.name ?? String(fieldKey);
+          acc[fieldName] = "";
+          return acc;
+        },
+        {} as AuthSignupVerificationValues,
+      ),
+    [fields],
+  );
+
+  const form = useForm<AuthSignupVerificationValues>({
+    mode: "onChange",
+    defaultValues,
+  });
+
+  const {
+    register,
+    helpers,
+    disabled,
+    onSubmit: handleSubmit,
+  } = useSignupVerificationForm({
+    fields,
+    form,
+    onSubmit,
+  });
+
+  // 전체 동의 상태를 agreementState 집계로 계산한다.
+  const allChecked = agreements.every(
+    agreement => agreementState[agreement.id],
+  );
+
+  const renderAgreementLabel = (option: AuthSignupAgreementOption) => (
+    <span className="auth-signup-agreement-label">
+      <span className="auth-signup-agreement-title">{option.label}</span>
+      <span className="auth-signup-agreement-required">
+        {option.required ? "필수" : "선택"}
+      </span>
+    </span>
+  );
+
+  return (
+    <div className="auth-signup-verification">
+      <section className="auth-signup-agreements" aria-label="약관 동의">
+        <div className="auth-signup-agreement">
+          <CheckboxField
+            size="large"
+            label={
+              <span className="auth-signup-agreement-title">전체 동의</span>
+            }
+            helperText="필수 및 선택 약관 전체 동의"
+            checked={allChecked}
+            onCheckedChange={() => onToggleAll()}
+          />
+        </div>
+        <div className="auth-signup-agreement-divider" aria-hidden />
+        {agreements.map(option => (
+          <div
+            className="auth-signup-agreement"
+            key={option.id}
+            data-required={option.required ? "true" : undefined}
+          >
+            <CheckboxField
+              size="large"
+              label={renderAgreementLabel(option)}
+              helperText={option.description}
+              checked={Boolean(agreementState[option.id])}
+              onCheckedChange={() => onToggleAgreement(option.id)}
+            />
+            {onOpenAgreementDetail ? (
+              <button
+                type="button"
+                className="auth-signup-agreement-detail-button"
+                onClick={() => onOpenAgreementDetail(option.id)}
+              >
+                자세히 보기
+              </button>
+            ) : null}
+          </div>
+        ))}
+      </section>
+      <form
+        className="auth-signup-form auth-signup-form--verification"
+        {...formAttr}
+        onSubmit={handleSubmit}
+      >
+        <div className="auth-signup-fields">
+          <EmailVerificationInput
+            {...composeSignupFieldProps<EmailVerificationInputProps>(
+              fields.email,
+              helpers.email,
+            )}
+            register={register.email}
+          />
+        </div>
+        <Button.Default
+          type="submit"
+          scale="solid-xlarge"
+          priority="primary"
+          block
+          disabled={disabled}
+        >
+          {submitLabel ?? DEFAULT_SUBMIT_LABEL}
+        </Button.Default>
+      </form>
+    </div>
+  );
+}
+
+export default AuthSignupVerificationForm;

package/src/components/auth/signup/markup/index.ts

@@ -0,0 +1,4 @@
+export { AuthSignupUserInfoForm } from "./UserInfoForm";
+export { AuthSignupVerificationForm } from "./VerificationForm";
+export { AuthSignupAccountForm } from "./AccountForm";
+export { AuthSignupComplete } from "./Complete";

package/src/components/auth/signup/styles/signup.scss

@@ -0,0 +1,135 @@
+.auth-signup-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-8, 32px);
+  margin-top: var(--spacing-padding-9, 36px);
+}
+
+.auth-signup-fields {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-5, 20px);
+}
+
+.auth-signup-verification {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-9, 36px);
+}
+
+.auth-signup-agreements {
+  padding: var(--spacing-padding-7, 28px);
+  border-radius: var(--shape-rounded-3, 16px);
+  background: var(--color-background-subtle);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-4, 16px);
+}
+
+.auth-signup-agreement {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--spacing-padding-3, 12px);
+}
+
+.auth-signup-agreement-divider {
+  height: 1px;
+  width: 100%;
+  background: var(--color-border-default);
+}
+
+.auth-signup-agreement-label {
+  display: flex;
+  gap: var(--spacing-padding-2, 8px);
+  align-items: center;
+}
+
+.auth-signup-agreement-title {
+  font-weight: 600;
+  color: var(--color-label-standard);
+}
+
+.auth-signup-agreement-required {
+  font-size: 12px;
+  color: var(--color-label-assistive);
+}
+
+.auth-signup-agreement-detail-button {
+  border: none;
+  background: none;
+  font-size: 13px;
+  color: var(--color-primary-60, #1d4ed8);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--color-primary-70, #1e40af);
+  }
+}
+
+.auth-signup-password-rules {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-2, 8px);
+}
+
+.auth-signup-password-rule {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-padding-3, 12px);
+  color: var(--color-label-assistive);
+
+  &[data-fulfilled="true"] {
+    color: var(--color-label-positive);
+  }
+}
+
+.auth-signup-password-rule-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--color-border-default);
+  flex-shrink: 0;
+}
+
+.auth-signup-password-rule[data-fulfilled="true"]
+  .auth-signup-password-rule-indicator {
+  background: var(--color-label-positive);
+}
+
+.auth-signup-password-rule-text {
+  font-size: 14px;
+}
+
+.auth-signup-complete {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-7, 28px);
+  text-align: center;
+}
+
+.auth-signup-complete-illustration {
+  display: flex;
+  justify-content: center;
+}
+
+.auth-signup-complete-title {
+  font-size: 24px;
+  font-weight: 700;
+  color: var(--color-label-standard);
+  margin: 0;
+}
+
+.auth-signup-complete-description {
+  margin: var(--spacing-padding-2, 8px) 0 0;
+  color: var(--color-label-assistive);
+}
+
+.auth-signup-complete-actions {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-4, 16px);
+}

package/src/components/auth/signup/types/hooks.ts

@@ -0,0 +1,85 @@
+import type { ReactNode } from "react";
+import type { InputState } from "@uniai-fe/uds-primitives";
+import type {
+  AuthSignupFieldProps,
+  AuthSignupUserInfoFields,
+  AuthSignupUserInfoValues,
+  AuthSignupVerificationFields,
+  AuthSignupVerificationValues,
+  AuthSignupAccountFields,
+  AuthSignupAccountValues,
+} from "./props";
+import type {
+  SubmitHandler,
+  UseFormRegisterReturn,
+  UseFormReturn,
+} from "react-hook-form";
+
+/**
+ * 공용 Helper 타입
+ */
+export type AuthSignupHelperMap<
+  TFields extends Record<string, AuthSignupFieldProps>,
+> = Record<keyof TFields, { text?: ReactNode; state?: InputState }>;
+
+/** Step1 옵션 */
+export interface UseSignupUserInfoFormOptions<
+  TFields extends Record<string, AuthSignupFieldProps> =
+    AuthSignupUserInfoFields,
+> {
+  fields: TFields;
+  form: UseFormReturn<AuthSignupUserInfoValues>;
+  onSubmit: SubmitHandler<AuthSignupUserInfoValues>;
+}
+
+export interface UseSignupUserInfoFormReturn<
+  TFields extends Record<string, AuthSignupFieldProps> =
+    AuthSignupUserInfoFields,
+> {
+  register: Record<keyof TFields, UseFormRegisterReturn>;
+  helpers: AuthSignupHelperMap<TFields>;
+  disabled: boolean;
+  onSubmit: ReturnType<UseFormReturn<AuthSignupUserInfoValues>["handleSubmit"]>;
+}
+
+/** Step2 옵션 */
+export interface UseSignupVerificationFormOptions<
+  TFields extends Record<string, AuthSignupFieldProps> =
+    AuthSignupVerificationFields,
+> {
+  fields: TFields;
+  form: UseFormReturn<AuthSignupVerificationValues>;
+  onSubmit: SubmitHandler<AuthSignupVerificationValues>;
+}
+
+export interface UseSignupVerificationFormReturn<
+  TFields extends Record<string, AuthSignupFieldProps> =
+    AuthSignupVerificationFields,
+> {
+  register: Record<keyof TFields, UseFormRegisterReturn>;
+  helpers: AuthSignupHelperMap<TFields>;
+  disabled: boolean;
+  onSubmit: ReturnType<
+    UseFormReturn<AuthSignupVerificationValues>["handleSubmit"]
+  >;
+}
+
+/** Step3 옵션 */
+export interface UseSignupAccountFormOptions<
+  TFields extends Record<string, AuthSignupFieldProps> =
+    AuthSignupAccountFields,
+> {
+  fields: TFields;
+  form: UseFormReturn<AuthSignupAccountValues>;
+  onSubmit: SubmitHandler<AuthSignupAccountValues>;
+}
+
+export interface UseSignupAccountFormReturn<
+  TFields extends Record<string, AuthSignupFieldProps> =
+    AuthSignupAccountFields,
+> {
+  register: Record<keyof TFields, UseFormRegisterReturn>;
+  helpers: AuthSignupHelperMap<TFields>;
+  disabled: boolean;
+  onSubmit: ReturnType<UseFormReturn<AuthSignupAccountValues>["handleSubmit"]>;
+}

package/src/components/auth/signup/types/index.ts

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

package/src/components/auth/signup/types/props.ts

@@ -0,0 +1,105 @@
+import type { ReactNode } from "react";
+import type React from "react";
+import type { SubmitHandler } from "react-hook-form";
+import type {
+  EmailVerificationInputProps,
+  InputFieldProps,
+  InputPasswordProps,
+  InputProps,
+  PhoneInputProps,
+} from "@uniai-fe/uds-primitives";
+
+/**
+ * 회원가입 공통 필드 props; primitives InputFieldProps를 그대로 사용한다.
+ */
+export type AuthSignupFieldProps<TProps extends InputProps = InputProps> =
+  InputFieldProps<TProps>;
+
+/** 사용자 기본 정보(이름/휴대폰) */
+export type AuthSignupUserInfoFields = {
+  name: AuthSignupFieldProps<InputProps>;
+  phone: AuthSignupFieldProps<PhoneInputProps>;
+};
+
+export type AuthSignupUserInfoValues = Record<string, string>; // name/phone 값
+
+export interface AuthSignupUserInfoProps {
+  fields: AuthSignupUserInfoFields;
+  submitLabel?: ReactNode;
+  formAttr?: React.FormHTMLAttributes<HTMLFormElement>;
+  onSubmit: SubmitHandler<AuthSignupUserInfoValues>;
+}
+
+/** 약관 + 이메일 인증 */
+export interface AuthSignupAgreementOption {
+  id: string;
+  label: ReactNode;
+  description?: ReactNode;
+  required?: boolean;
+}
+
+export type AuthSignupAgreementState = Record<string, boolean>;
+
+export type AuthSignupVerificationFields = {
+  email: AuthSignupFieldProps<EmailVerificationInputProps>;
+};
+
+export type AuthSignupVerificationValues = Record<string, string>;
+
+export interface AuthSignupVerificationProps {
+  fields: AuthSignupVerificationFields;
+  agreements: AuthSignupAgreementOption[];
+  agreementState: AuthSignupAgreementState;
+  onToggleAgreement: (agreementId: string) => void;
+  onToggleAll: () => void;
+  onOpenAgreementDetail?: (agreementId: string) => void;
+  submitLabel?: ReactNode;
+  formAttr?: React.FormHTMLAttributes<HTMLFormElement>;
+  onSubmit: SubmitHandler<AuthSignupVerificationValues>;
+}
+
+/** 계정 정보(아이디/비밀번호) */
+export type AuthSignupAccountFields = {
+  accountId: AuthSignupFieldProps<InputProps>;
+  password: AuthSignupFieldProps<InputPasswordProps>;
+  confirmPassword: AuthSignupFieldProps<InputPasswordProps>;
+};
+
+export type AuthSignupAccountValues = Record<string, string>;
+
+export interface AuthSignupPasswordRule {
+  id: string;
+  label: ReactNode;
+  fulfilled: boolean;
+}
+
+export interface AuthSignupAccountProps {
+  fields: AuthSignupAccountFields;
+  passwordRules?: AuthSignupPasswordRule[];
+  submitLabel?: ReactNode;
+  formAttr?: React.FormHTMLAttributes<HTMLFormElement>;
+  onSubmit: SubmitHandler<AuthSignupAccountValues>;
+}
+
+/** 완료 CTA */
+export interface AuthSignupCompleteAction {
+  label: ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+export interface AuthSignupCompleteProps {
+  title: ReactNode;
+  description?: ReactNode;
+  illustration?: ReactNode;
+  primaryAction: AuthSignupCompleteAction;
+  secondaryAction?: AuthSignupCompleteAction;
+}
+
+/** 전체 플로우 옵션 */
+export interface AuthSignupFlowProps {
+  userInfo: AuthSignupUserInfoProps;
+  verification: AuthSignupVerificationProps;
+  account: AuthSignupAccountProps;
+  complete: AuthSignupCompleteProps;
+}

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