@uniai-fe/uds-templates 0.0.11 → 0.0.13

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

@@ -1,155 +0,0 @@
-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/styles/signup.scss

@@ -1,135 +0,0 @@
-.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);
-}