@uniai-fe/uds-templates 0.0.11 → 0.0.13

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

@@ -0,0 +1,187 @@
+.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 {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-4, 16px);
+  background: var(--color-background-subtle);
+  border-radius: var(--shape-rounded-3, 16px);
+  padding: var(--spacing-padding-5, 20px);
+}
+
+.auth-signup-agreement-all {
+  background: var(--color-background-soft, #f2f2f3);
+  border-radius: var(--shape-rounded-2, 12px);
+  padding: var(--spacing-padding-4, 16px);
+}
+
+.auth-signup-agreements-list {
+  width: 100%;
+  background: var(--color-common-100, #ffffff);
+  border-radius: var(--shape-rounded-2, 12px);
+  padding: var(--spacing-padding-4, 16px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-padding-3, 12px);
+}
+
+.auth-signup-agreement-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-padding-3, 12px);
+}
+
+// 약관 토글 행은 SVG 아이콘/텍스트를 하나의 버튼으로 묶어 디자인 명세와 일치시킨다.
+.auth-signup-agreement-toggle {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-padding-3, 12px);
+  cursor: pointer;
+  flex: 1;
+  text-align: left;
+  flex-wrap: nowrap;
+  font-size: 14px;
+}
+
+.auth-signup-agreement-icon {
+  width: 20px;
+  height: 20px;
+  color: var(--color-label-assistive, #94989e);
+  flex-shrink: 0;
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  svg path {
+    stroke: currentColor;
+  }
+}
+
+.auth-signup-agreement-toggle[data-checked="true"] .auth-signup-agreement-icon {
+  color: var(--color-primary-default);
+  border-color: var(--color-primary-default);
+}
+
+.auth-signup-agreement-label {
+  display: inline-flex;
+  gap: var(--spacing-padding-1, 4px);
+  align-items: baseline;
+  flex-wrap: nowrap;
+}
+
+.auth-signup-agreement-badge {
+  font-size: 14px;
+  // font-weight: 600;
+  color: var(--color-primary-default);
+
+  &[data-required="false"] {
+    color: var(--color-label-standard);
+  }
+}
+
+.auth-signup-agreement-title {
+  font-size: 14px;
+  color: var(--color-label-standard);
+  font-weight: 400;
+  line-height: 1.4;
+}
+
+.auth-signup-agreement-description {
+  font-size: 13px;
+  color: var(--color-label-assistive);
+  margin: 0;
+  padding-left: calc(20px + var(--spacing-padding-3, 12px));
+}
+
+.auth-signup-agreement-detail {
+  border: none;
+  background: none;
+  color: var(--color-label-assistive);
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+
+  svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.auth-signup-agreement-detail:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.auth-signup-agreement-detail:hover svg path {
+  fill: var(--color-label-standard);
+}
+
+.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);
+}
+
+.auth-signup-agreement-drawer-body {
+  p {
+    font-weight: 400;
+    color: var(--color-label-standard);
+    font-size: var(--font-body-xxsmall-size);
+    line-height: 1.5em;
+    letter-spacing: 0px;
+  }
+}

package/src/{components/auth → auth}/signup/types/hooks.ts

@@ -30,6 +30,7 @@ export interface UseSignupUserInfoFormOptions<
   fields: TFields;
   form: UseFormReturn<AuthSignupUserInfoValues>;
   onSubmit: SubmitHandler<AuthSignupUserInfoValues>;
+  activeFields?: Array<keyof TFields>;
 }
 
 export interface UseSignupUserInfoFormReturn<

package/src/{components/auth → auth}/signup/types/props.ts

@@ -2,12 +2,13 @@ import type { ReactNode } from "react";
 import type React from "react";
 import type { SubmitHandler } from "react-hook-form";
 import type {
-  EmailVerificationInputProps,
+  EmailInputProps,
   InputFieldProps,
   InputPasswordProps,
   InputProps,
   PhoneInputProps,
 } from "@uniai-fe/uds-primitives";
+import type { AuthPasswordRule } from "../../common/password/types";
 
 /**
  * 회원가입 공통 필드 props; primitives InputFieldProps를 그대로 사용한다.
@@ -25,6 +26,7 @@ export type AuthSignupUserInfoValues = Record<string, string>; // name/phone 값
 
 export interface AuthSignupUserInfoProps {
   fields: AuthSignupUserInfoFields;
+  visibleFields?: Array<keyof AuthSignupUserInfoFields>;
   submitLabel?: ReactNode;
   formAttr?: React.FormHTMLAttributes<HTMLFormElement>;
   onSubmit: SubmitHandler<AuthSignupUserInfoValues>;
@@ -39,9 +41,12 @@ export interface AuthSignupAgreementOption {
 }
 
 export type AuthSignupAgreementState = Record<string, boolean>;
+export interface AuthSignupAgreementToggleAllOptions {
+  requiredOnly?: boolean;
+}
 
 export type AuthSignupVerificationFields = {
-  email: AuthSignupFieldProps<EmailVerificationInputProps>;
+  email: AuthSignupFieldProps<EmailInputProps>;
 };
 
 export type AuthSignupVerificationValues = Record<string, string>;
@@ -51,7 +56,7 @@ export interface AuthSignupVerificationProps {
   agreements: AuthSignupAgreementOption[];
   agreementState: AuthSignupAgreementState;
   onToggleAgreement: (agreementId: string) => void;
-  onToggleAll: () => void;
+  onToggleAll: (options?: AuthSignupAgreementToggleAllOptions) => void;
   onOpenAgreementDetail?: (agreementId: string) => void;
   submitLabel?: ReactNode;
   formAttr?: React.FormHTMLAttributes<HTMLFormElement>;
@@ -67,11 +72,7 @@ export type AuthSignupAccountFields = {
 
 export type AuthSignupAccountValues = Record<string, string>;
 
-export interface AuthSignupPasswordRule {
-  id: string;
-  label: ReactNode;
-  fulfilled: boolean;
-}
+export type AuthSignupPasswordRule = AuthPasswordRule;
 
 export interface AuthSignupAccountProps {
   fields: AuthSignupAccountFields;
@@ -96,10 +97,49 @@ export interface AuthSignupCompleteProps {
   secondaryAction?: AuthSignupCompleteAction;
 }
 
-/** 전체 플로우 옵션 */
+/** Step 식별자 */
+export type AuthSignupStepId =
+  | "userInfo"
+  | "verifyAgreement"
+  | "generateAccount"
+  | "complete";
+
+/** 헤더 구성 요소 */
+export interface AuthSignupHeaderProps {
+  navigationTitle: ReactNode;
+  headline: ReactNode;
+  description?: ReactNode;
+  backIcon?: ReactNode;
+  onBack?: () => void;
+}
+
+/** Step indicator 항목 */
+export interface AuthSignupStepIndicatorItem {
+  id: AuthSignupStepId;
+  label: ReactNode;
+}
+
+export interface AuthSignupStepIndicatorProps {
+  current?: AuthSignupStepId;
+  currentIndex?: number;
+  items?: AuthSignupStepIndicatorItem[];
+  total?: number;
+  showLabels?: boolean;
+}
+
+/** Step 구성 props 집합 */
 export interface AuthSignupFlowProps {
   userInfo: AuthSignupUserInfoProps;
   verification: AuthSignupVerificationProps;
   account: AuthSignupAccountProps;
   complete: AuthSignupCompleteProps;
 }
+
+/** 회원가입 템플릿 props */
+export interface AuthSignupTemplateProps extends AuthSignupFlowProps {
+  className?: string;
+  header: AuthSignupHeaderProps;
+  step: AuthSignupStepId;
+  stepIndicator?: AuthSignupStepIndicatorProps;
+  footer?: React.ReactNode;
+}

package/src/auth/signup/utils/getSignupFieldDefaultValue.ts

@@ -0,0 +1,40 @@
+import type { AuthSignupFieldProps } from "../types";
+
+const stringifyValue = (value: unknown): string =>
+  value === undefined || value === null ? "" : String(value);
+
+/**
+ * 필드 설정에서 defaultValue를 추출해 RHF 초기값으로 사용한다.
+ * props.defaultValue → attr.defaultValue → props.value 순으로 우선한다.
+ */
+export const getSignupFieldDefaultValue = (
+  config: AuthSignupFieldProps,
+): string => {
+  if (config.props) {
+    if (
+      "defaultValue" in config.props &&
+      config.props.defaultValue !== undefined
+    ) {
+      return stringifyValue(config.props.defaultValue);
+    }
+    if ("value" in config.props && config.props.value !== undefined) {
+      return stringifyValue(config.props.value);
+    }
+  }
+
+  if (config.attr) {
+    if (
+      "defaultValue" in config.attr &&
+      config.attr.defaultValue !== undefined
+    ) {
+      return stringifyValue(config.attr.defaultValue);
+    }
+    if ("value" in config.attr && config.attr.value !== undefined) {
+      return stringifyValue(config.attr.value);
+    }
+  }
+
+  return "";
+};
+
+export default getSignupFieldDefaultValue;

package/src/index.scss

@@ -1,7 +1,8 @@
+/* templates styles는 foundation/primitives 순으로 import된 이후를 가정한다. */
 @use "@uniai-fe/uds-primitives/styles";
 
 /* 템플릿 레벨 스타일을 통합해 서비스 앱이 단일 엔트리만 import하도록 구성한다. */
-@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 *;
+@use "./page-frame/container/index.scss" as *;
+@use "./page-frame/mobile/index.scss" as *;
+@use "./page-frame/navigation/index.scss" as *;
+@use "./modal/index.scss" as *;

package/src/index.tsx

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

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";
-import { AuthSignup } from "./signup";
-
-export const Auth = {
-  Container: AuthContainer,
-  Login: AuthLogin,
-  Signup: AuthSignup,
-};
-
-export {
-  useSignupUserInfoForm,
-  useSignupVerificationForm,
-  useSignupAccountForm,
-} from "./signup";
-
-export type * from "./login";
-export type * from "./signup";

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

@@ -1,124 +0,0 @@
-import { useMemo } from "react";
-import { useForm } from "react-hook-form";
-import {
-  Button,
-  Input,
-  PasswordInput,
-  type InputPasswordProps,
-  type InputProps,
-} from "@uniai-fe/uds-primitives";
-import type { AuthSignupAccountProps, AuthSignupAccountValues } from "../types";
-import { useSignupAccountForm } from "../hooks";
-import { composeSignupFieldProps } from "../utils/composeFieldProps";
-
-const DEFAULT_SUBMIT_LABEL = "가입 요청";
-
-/**
- * 회원가입 Step3; 계정 정보 입력(아이디/비밀번호)
- * @component
- * @param {AuthSignupAccountProps} props account props
- * @param {AuthSignupAccountProps["fields"]} props.fields 아이디/비밀번호 필드
- * @param {AuthSignupPasswordRule[]} [props.passwordRules] 비밀번호 규칙 상태
- * @param {React.FormHTMLAttributes<HTMLFormElement>} [props.formAttr] form attr
- * @param {import("react").ReactNode} [props.submitLabel] CTA 라벨
- */
-export function AuthSignupAccountForm({
-  fields,
-  passwordRules,
-  formAttr,
-  submitLabel,
-  onSubmit,
-}: AuthSignupAccountProps) {
-  // 필드 구성에서 name attr을 추출해 RHF default 값을 정의한다.
-  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 AuthSignupAccountValues,
-      ),
-    [fields],
-  );
-
-  const form = useForm<AuthSignupAccountValues>({
-    mode: "onChange",
-    defaultValues,
-  });
-
-  const {
-    register,
-    helpers,
-    disabled,
-    onSubmit: handleSubmit,
-  } = useSignupAccountForm({
-    fields,
-    form,
-    onSubmit,
-  });
-
-  return (
-    <form
-      className="auth-signup-form auth-signup-form--account"
-      {...formAttr}
-      onSubmit={handleSubmit}
-    >
-      <div className="auth-signup-fields">
-        <Input
-          {...composeSignupFieldProps<InputProps>(
-            fields.accountId,
-            helpers.accountId,
-          )}
-          register={register.accountId}
-        />
-        <PasswordInput
-          {...composeSignupFieldProps<InputPasswordProps>(
-            fields.password,
-            helpers.password,
-          )}
-          register={register.password}
-        />
-        <PasswordInput
-          {...composeSignupFieldProps<InputPasswordProps>(
-            fields.confirmPassword,
-            helpers.confirmPassword,
-          )}
-          register={register.confirmPassword}
-        />
-      </div>
-      {passwordRules?.length ? (
-        <ul className="auth-signup-password-rules">
-          {passwordRules.map(rule => (
-            <li
-              key={rule.id}
-              className="auth-signup-password-rule"
-              data-fulfilled={rule.fulfilled ? "true" : undefined}
-            >
-              <span
-                className="auth-signup-password-rule-indicator"
-                aria-hidden="true"
-              />
-              <span className="auth-signup-password-rule-text">
-                {rule.label}
-              </span>
-            </li>
-          ))}
-        </ul>
-      ) : null}
-      <Button.Default
-        type="submit"
-        scale="solid-xlarge"
-        priority="primary"
-        block
-        disabled={disabled}
-      >
-        {submitLabel ?? DEFAULT_SUBMIT_LABEL}
-      </Button.Default>
-    </form>
-  );
-}
-
-export default AuthSignupAccountForm;

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

@@ -1,61 +0,0 @@
-import { Button } from "@uniai-fe/uds-primitives";
-import type { AuthSignupCompleteProps } from "../types";
-
-/**
- * 회원가입 Step4; 가입 완료/승인 대기 안내
- * @component
- * @param {AuthSignupCompleteProps} props complete props
- * @param {React.ReactNode} props.title 완료 메시지
- * @param {React.ReactNode} [props.description] 부가 설명
- * @param {React.ReactNode} [props.illustration] 일러스트 영역
- * @param {AuthSignupCompleteAction} props.primaryAction 주요 CTA
- * @param {AuthSignupCompleteAction} [props.secondaryAction] 보조 CTA
- */
-export function AuthSignupComplete({
-  title,
-  description,
-  illustration,
-  primaryAction,
-  secondaryAction,
-}: AuthSignupCompleteProps) {
-  // CTA 섹션은 primary/secondary 순으로 렌더해 사용자가 자연스럽게 진행하도록 안내한다.
-  return (
-    <section className="auth-signup-complete">
-      {illustration ? (
-        <div className="auth-signup-complete-illustration">{illustration}</div>
-      ) : null}
-      <div className="auth-signup-complete-text">
-        <h2 className="auth-signup-complete-title">{title}</h2>
-        {description ? (
-          <p className="auth-signup-complete-description">{description}</p>
-        ) : null}
-      </div>
-      <div className="auth-signup-complete-actions">
-        <Button.Default
-          type="button"
-          scale="solid-xlarge"
-          priority="primary"
-          block
-          disabled={primaryAction.disabled}
-          onClick={primaryAction.onClick}
-        >
-          {primaryAction.label}
-        </Button.Default>
-        {secondaryAction ? (
-          <Button.Default
-            type="button"
-            scale="solid-xlarge"
-            priority="secondary"
-            block
-            disabled={secondaryAction.disabled}
-            onClick={secondaryAction.onClick}
-          >
-            {secondaryAction.label}
-          </Button.Default>
-        ) : null}
-      </div>
-    </section>
-  );
-}
-
-export default AuthSignupComplete;