diff --git a/app/(business)/business/sign-up/page.ts b/app/(business)/business/sign-up/page.ts
new file mode 100644
index 00000000..71fa232f
--- /dev/null
+++ b/app/(business)/business/sign-up/page.ts
@@ -0,0 +1 @@
+export { BusinessSignUpPage as default } from 'pages/sign-up'
diff --git a/src/pages/sign-up/api/use-request-verification.ts b/src/features/sign-up/api/use-request-verification.ts
similarity index 100%
rename from src/pages/sign-up/api/use-request-verification.ts
rename to src/features/sign-up/api/use-request-verification.ts
diff --git a/src/pages/sign-up/api/use-verify-code.ts b/src/features/sign-up/api/use-verify-code.ts
similarity index 100%
rename from src/pages/sign-up/api/use-verify-code.ts
rename to src/features/sign-up/api/use-verify-code.ts
diff --git a/src/features/sign-up/index.ts b/src/features/sign-up/index.ts
new file mode 100644
index 00000000..f1d2e545
--- /dev/null
+++ b/src/features/sign-up/index.ts
@@ -0,0 +1,16 @@
+export { AcademyName } from './ui/field/academy-name'
+export { AcademyNameEn } from './ui/field/academy-name-en'
+export { Address } from './ui/field/address'
+export { BirthDate } from './ui/field/birth-date'
+export { BusinessRegistrationNumber } from './ui/field/business-registration-number'
+export { ConfirmPassword } from './ui/field/confirm-password'
+export { Email } from './ui/field/email'
+export { FirstName } from './ui/field/first-name'
+export { FullName } from './ui/field/full-name'
+export { Gender } from './ui/field/gender'
+export { LastName } from './ui/field/last-name'
+export { Nationality } from './ui/field/nationality'
+export { Password } from './ui/field/password'
+export { RepresentativeName } from './ui/field/representative-name'
+export { TermsAndConditionsOfUse } from './ui/field/terms-and-conditions-of-use'
+export { useEmailValidationState } from './lib/use-email-validation-state'
diff --git a/src/pages/sign-up/lib/use-email-validation-state.ts b/src/features/sign-up/lib/use-email-validation-state.ts
similarity index 100%
rename from src/pages/sign-up/lib/use-email-validation-state.ts
rename to src/features/sign-up/lib/use-email-validation-state.ts
diff --git a/src/features/sign-up/model/form-values.ts b/src/features/sign-up/model/form-values.ts
new file mode 100644
index 00000000..b7ff647f
--- /dev/null
+++ b/src/features/sign-up/model/form-values.ts
@@ -0,0 +1,39 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
+import { SignUpRequest } from 'entities/auth'
+
+export type FormValues = {
+ email: string
+ code: string
+ password: string
+ confirmPassword: string
+ firstName: string
+ lastName: string
+ countryId: number | null
+ genderType: 'MALE' | 'FEMALE'
+ birthDate: string | null
+}
+
+export const defaultValues: FormValues = {
+ email: '',
+ code: '',
+ password: '',
+ confirmPassword: '',
+ firstName: '',
+ lastName: '',
+ countryId: null,
+ genderType: 'FEMALE',
+ birthDate: null,
+}
+
+export const convertToSignUpDTO = ({
+ code,
+ confirmPassword,
+ ...restFormValues
+}: FormValues): SignUpRequest => {
+ return {
+ ...restFormValues,
+ birthDate: restFormValues.birthDate!,
+ countryId: restFormValues.countryId!,
+ }
+}
diff --git a/src/pages/sign-up/model/rules.ts b/src/features/sign-up/model/rules.ts
similarity index 57%
rename from src/pages/sign-up/model/rules.ts
rename to src/features/sign-up/model/rules.ts
index e94d974c..302852ab 100644
--- a/src/pages/sign-up/model/rules.ts
+++ b/src/features/sign-up/model/rules.ts
@@ -1,27 +1,27 @@
-import { FormValues } from '../model/form-values'
+import { FormValues } from './form-values'
const REG_EMAIL =
/^([A-Za-z0-9]+([-_.]?[A-Za-z0-9])*)@([A-Za-z0-9]+([-]?[A-Za-z0-9])*)(\.([A-Za-z0-9]+([-]?[A-Za-z0-9])*))?(\.([A-Za-z0-9]([-]?[A-Za-z0-9])*))?((\.[A-Za-z]{2,63})$)/
export const email = {
- required: 'Please enter your email',
+ required: 'validation.email.required',
maxLength: {
value: 254,
- message: 'Input exceeds maximum allowed length of 254 characters',
+ message: 'validation.email.maxLength',
},
pattern: {
value: REG_EMAIL,
- message: "Invalid email format. Please use the format 'example@domain.com'",
+ message: 'validation.email.pattern',
},
}
export const code = {
- required: 'Please enter your email verification code',
+ required: 'validation.code.required',
}
const REG_UPPER_LOWER_CASE_LETTERS = /(?=.*[a-z])(?=.*[A-Z])/
const REG_NUMBER = /(?=.*\d)/
-const REG_SPECIAL_CHAR = /(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>/?])/
+const REG_SPECIAL_CHAR = /(?=.*[!@#$%^&*()_+\-=[\]{};':"\\|,.<>/?])/
export const isCorrectLength = (value: string) =>
value.length >= 9 && value.length <= 28
@@ -43,10 +43,34 @@ export const password = {
}
export const confirmPassword = {
- required: 'Please enter your password',
+ required: 'validation.confirm-password.required',
validate: (value: string | number | null, formValues: FormValues) => {
if (value === formValues.password) return true
- return 'The password you entered do not match'
+ return 'validation.confirm-password.match'
},
}
+
+export const firstName = {
+ required: 'validation.firstName.required',
+ maxLength: {
+ value: 254,
+ message: 'validation.firstName.maxLength',
+ },
+}
+
+export const lastName = {
+ required: 'validation.lastName.required',
+ maxLength: {
+ value: 254,
+ message: 'validation.lastName.maxLength',
+ },
+}
+
+export const country = {
+ required: 'validation.country.required',
+}
+
+export const birthDate = {
+ required: 'validation.birthDate.required',
+}
diff --git a/src/features/sign-up/ui/field/academy-name-en.tsx b/src/features/sign-up/ui/field/academy-name-en.tsx
new file mode 100644
index 00000000..88ae3d14
--- /dev/null
+++ b/src/features/sign-up/ui/field/academy-name-en.tsx
@@ -0,0 +1,18 @@
+import { useTranslations } from 'next-intl'
+
+import { fieldCss, Form } from 'shared/form'
+import { Label } from 'shared/ui'
+
+export const AcademyNameEn = () => {
+ const t = useTranslations()
+
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/features/sign-up/ui/field/academy-name.tsx b/src/features/sign-up/ui/field/academy-name.tsx
new file mode 100644
index 00000000..a7741164
--- /dev/null
+++ b/src/features/sign-up/ui/field/academy-name.tsx
@@ -0,0 +1,18 @@
+import { useTranslations } from 'next-intl'
+
+import { fieldCss, Form } from 'shared/form'
+import { Label } from 'shared/ui'
+
+export const AcademyName = () => {
+ const t = useTranslations()
+
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/features/sign-up/ui/field/address.tsx b/src/features/sign-up/ui/field/address.tsx
new file mode 100644
index 00000000..dbe0a304
--- /dev/null
+++ b/src/features/sign-up/ui/field/address.tsx
@@ -0,0 +1,22 @@
+import { useTranslations } from 'next-intl'
+
+import { fieldCss } from 'shared/form'
+import { Button, Label, TextField } from 'shared/ui'
+
+export const Address = () => {
+ const t = useTranslations()
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/features/sign-up/ui/field/business-registration-number.tsx b/src/features/sign-up/ui/field/business-registration-number.tsx
new file mode 100644
index 00000000..943dc840
--- /dev/null
+++ b/src/features/sign-up/ui/field/business-registration-number.tsx
@@ -0,0 +1,20 @@
+import { useTranslations } from 'next-intl'
+
+import { fieldCss, Form } from 'shared/form'
+import { Label } from 'shared/ui'
+
+export const BusinessRegistrationNumber = () => {
+ const t = useTranslations()
+
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/features/sign-up/ui/field/confirm-password.tsx b/src/features/sign-up/ui/field/confirm-password.tsx
new file mode 100644
index 00000000..c074dc02
--- /dev/null
+++ b/src/features/sign-up/ui/field/confirm-password.tsx
@@ -0,0 +1,24 @@
+import { useTranslations } from 'next-intl'
+
+import { fieldCss, Form } from 'shared/form'
+import { Label } from 'shared/ui'
+
+import { confirmPassword as confirmPasswordRule } from '../../model/rules'
+
+export const ConfirmPassword = () => {
+ const t = useTranslations()
+
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/features/sign-up/ui/field/email.tsx b/src/features/sign-up/ui/field/email.tsx
new file mode 100644
index 00000000..e3257db1
--- /dev/null
+++ b/src/features/sign-up/ui/field/email.tsx
@@ -0,0 +1,186 @@
+import { useTranslations } from 'next-intl'
+import { useState } from 'react'
+import { useFormContext, useWatch } from 'react-hook-form'
+import { toast } from 'react-toastify'
+
+import {
+ EmailVerificationCodeExceptionCode,
+ HttpError,
+ ResourceNotFoundExceptionCode,
+ UserExceptionCode,
+} from 'shared/api'
+import { fieldCss, Form, hasError } from 'shared/form'
+import { Button, HelperText, Label } from 'shared/ui'
+
+import { useRequestVerification } from '../../api/use-request-verification'
+import { useVerifyCode } from '../../api/use-verify-code'
+import { FormValues } from '../../model/form-values'
+import { email as emailRule, code as codeRule } from '../../model/rules'
+
+export const Email = () => {
+ const t = useTranslations()
+
+ const [showVerificationField, setShowVerificationField] = useState(false)
+
+ const {
+ trigger,
+ getValues,
+ setError,
+ formState: { errors },
+ reset,
+ control,
+ } = useFormContext()
+
+ const email = useWatch({
+ name: 'email',
+ control,
+ })
+
+ const requestVerification = useRequestVerification()
+ const verifyCode = useVerifyCode()
+
+ const handleEmailChange = () => {
+ if (!(requestVerification.isPending || requestVerification.isIdle)) {
+ requestVerification.reset()
+ }
+
+ if (!(verifyCode.isPending || verifyCode.isIdle)) {
+ verifyCode.reset()
+ reset({ ...getValues(), code: '' })
+ }
+ }
+
+ const handleRequestVerificationSuccess = () => {
+ toast.success(t('sign-up.success.request-verification'))
+
+ if (!showVerificationField) setShowVerificationField(true)
+ }
+
+ const handleRequestVerificationError = (error: HttpError) => {
+ if (error.code === EmailVerificationCodeExceptionCode.TOO_MANY_REQUEST) {
+ toast.error(t('exception.email.too-many-request'))
+ } else if (error.code === UserExceptionCode.ALREADY_USED_EMAIL) {
+ setError('email', {
+ message: t('exception.user.already-used-email'),
+ })
+ } else {
+ toast.error(t('sign-up.error.request-verification'))
+ }
+ }
+
+ const handleSendButtonClick = async () => {
+ const isEmailValid = await trigger('email')
+
+ if (!isEmailValid) return
+
+ const data = { email }
+
+ requestVerification.mutate(data, {
+ onSuccess: handleRequestVerificationSuccess,
+ onError: handleRequestVerificationError,
+ })
+ }
+
+ const handleVerifyCodeError = (error: HttpError) => {
+ if (
+ error.code === EmailVerificationCodeExceptionCode.ALREADY_VERIFIED_CODE
+ ) {
+ setError('code', {
+ message: t('exception.email.already-verified-code'),
+ })
+ } else if (error.code === EmailVerificationCodeExceptionCode.EXPIRED_CODE) {
+ setError('code', {
+ message: t('exception.email.expired-code'),
+ })
+ } else if (
+ error.code ===
+ ResourceNotFoundExceptionCode.EMAIL_VERIFICATION_CODE_NOT_FOUND
+ ) {
+ setError('code', {
+ message: t('exception.resource-not-found.email-verification-code'),
+ })
+ }
+ }
+
+ const handleCheckButtonClick = async () => {
+ const isCodeValid = await trigger('code')
+
+ if (!isCodeValid) return
+
+ if (requestVerification.isPending || requestVerification.isIdle) {
+ setError('email', {
+ message: t('sign-up.error.not-verified-email'),
+ })
+
+ return
+ }
+
+ const data = { email, code: getValues('code') }
+
+ verifyCode.mutate(data, {
+ onError: handleVerifyCodeError,
+ })
+ }
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ {showVerificationField && (
+
+
+
+
+
+
+ {!hasError(errors?.code) && verifyCode.isSuccess && (
+
+ {t('sign-up.success.verify-code')}
+
+ )}
+ {!hasError(errors?.code) && !verifyCode.isSuccess && (
+
+ {t('sign-up.error.not-enter-verification-code')}
+
+ )}
+
+
+
+ )}
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/features/sign-up/ui/field/full-name.tsx b/src/features/sign-up/ui/field/full-name.tsx
new file mode 100644
index 00000000..ba2adeaa
--- /dev/null
+++ b/src/features/sign-up/ui/field/full-name.tsx
@@ -0,0 +1,18 @@
+import { useTranslations } from 'next-intl'
+
+import { fieldCss, Form } from 'shared/form'
+import { Label } from 'shared/ui'
+
+export const FullName = () => {
+ const t = useTranslations()
+
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/features/sign-up/ui/field/gender.tsx b/src/features/sign-up/ui/field/gender.tsx
new file mode 100644
index 00000000..6c660092
--- /dev/null
+++ b/src/features/sign-up/ui/field/gender.tsx
@@ -0,0 +1,20 @@
+import { useTranslations } from 'next-intl'
+
+import { fieldCss, Form } from 'shared/form'
+import { Label } from 'shared/ui'
+
+export const Gender = () => {
+ const t = useTranslations()
+
+ return (
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/features/sign-up/ui/field/last-name.tsx b/src/features/sign-up/ui/field/last-name.tsx
new file mode 100644
index 00000000..039ac8c0
--- /dev/null
+++ b/src/features/sign-up/ui/field/last-name.tsx
@@ -0,0 +1,16 @@
+import { fieldCss, Form } from 'shared/form'
+import { Label } from 'shared/ui'
+
+import { lastName as lastNameRule } from '../../model/rules'
+
+export const LastName = () => {
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/features/sign-up/ui/field/nationality.tsx b/src/features/sign-up/ui/field/nationality.tsx
new file mode 100644
index 00000000..ad01ce26
--- /dev/null
+++ b/src/features/sign-up/ui/field/nationality.tsx
@@ -0,0 +1,17 @@
+import { CountrySelect } from 'entities/country'
+import { fieldCss, Form } from 'shared/form'
+import { Label } from 'shared/ui'
+
+import { country as countryRule } from '../../model/rules'
+
+export const Nationality = () => {
+ return (
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/features/sign-up/ui/field/password.tsx b/src/features/sign-up/ui/field/password.tsx
new file mode 100644
index 00000000..41644db4
--- /dev/null
+++ b/src/features/sign-up/ui/field/password.tsx
@@ -0,0 +1,63 @@
+import { useTranslations } from 'next-intl'
+import { useFormContext, useWatch } from 'react-hook-form'
+
+import { fieldCss, Form } from 'shared/form'
+import { isEmptyString } from 'shared/lib'
+import { HelperText, Label } from 'shared/ui'
+
+import { FormValues } from '../../model/form-values'
+import {
+ hasLowercaseAndUppercaseLetter,
+ hasNumber,
+ hasSpecialChar,
+ isCorrectLength,
+ password as passwordRule,
+} from '../../model/rules'
+
+export const Password = () => {
+ const t = useTranslations()
+
+ const { control } = useFormContext()
+
+ const password = useWatch({
+ name: 'password',
+ control,
+ })
+
+ const checkPasswordCondition = (condition: (value: string) => boolean) => {
+ if (isEmptyString(password)) return 'default'
+ if (condition(password)) return 'success'
+
+ return 'error'
+ }
+
+ return (
+
+
+
+
+
+ {t('validation.password.length')}
+
+
+ {t('validation.password.has-lowercase-and-uppercase-letter')}
+
+
+ {t('validation.password.has-number')}
+
+
+ {t('validation.password.has-special-char')}
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/src/features/sign-up/ui/field/terms-and-conditions-of-use.tsx b/src/features/sign-up/ui/field/terms-and-conditions-of-use.tsx
new file mode 100644
index 00000000..a8141fd1
--- /dev/null
+++ b/src/features/sign-up/ui/field/terms-and-conditions-of-use.tsx
@@ -0,0 +1,48 @@
+import { Checkbox, CheckboxProps, linkVariants } from 'shared/ui'
+
+const KoreanLabel = (className: string) => (
+
+ {
+ event.stopPropagation()
+ }}
+ className={linkVariants({ variant: 'secondary' })}
+ >
+ 개인정보 수집 및 이용 정책과 이용 약관
+
+ 에 동의합니다.
+
+)
+
+const EnglishLabel = (className: string) => (
+
+ I have read and agree to the Plus 82's
+
+ {
+ event.stopPropagation()
+ }}
+ className={linkVariants({ variant: 'secondary' })}
+ >
+ Terms and Conditions of Use. (Essential)
+
+
+)
+
+type Props = CheckboxProps & {
+ locale: 'ko' | 'en'
+}
+
+export const TermsAndConditionsOfUse = ({ locale, ...props }: Props) => {
+ return (
+
+ )
+}
diff --git a/src/pages/sign-up/index.ts b/src/pages/sign-up/index.ts
index d2d4e14a..b090d547 100644
--- a/src/pages/sign-up/index.ts
+++ b/src/pages/sign-up/index.ts
@@ -1 +1,2 @@
-export { SignUpPage } from './ui/sign-up-page/index'
+export { SignUpPage } from './ui/sign-up-page'
+export { BusinessSignUpPage } from './ui/business-sign-up-page'
diff --git a/src/pages/sign-up/ui/account.tsx b/src/pages/sign-up/ui/account.tsx
index 20125296..ae1f3b5a 100644
--- a/src/pages/sign-up/ui/account.tsx
+++ b/src/pages/sign-up/ui/account.tsx
@@ -1,142 +1,9 @@
'use client'
-import { useState } from 'react'
-import { useFormContext, useWatch } from 'react-hook-form'
-import { toast } from 'react-toastify'
-
-import {
- EmailVerificationCodeExceptionCode,
- HttpError,
- ResourceNotFoundExceptionCode,
- UserExceptionCode,
-} from 'shared/api'
-import { Form, hasError, fieldCss } from 'shared/form'
-import { isEmptyString } from 'shared/lib'
-import { Button, Heading, HelperText, Label } from 'shared/ui'
-
-import { useRequestVerification } from '../api/use-request-verification'
-import { useVerifyCode } from '../api/use-verify-code'
-import { FormValues } from '../model/form-values'
-import * as rules from '../model/rules'
-import {
- isCorrectLength,
- hasLowercaseAndUppercaseLetter,
- hasNumber,
- hasSpecialChar,
-} from '../model/rules'
+import { Email, Password, ConfirmPassword } from 'features/sign-up'
+import { Heading } from 'shared/ui'
export const Account = () => {
- const [showVerificationField, setShowVerificationField] = useState(false)
-
- const {
- trigger,
- getValues,
- setError,
- formState: { errors },
- reset,
- control,
- } = useFormContext()
-
- const [email, password] = useWatch({
- name: ['email', 'password'],
- control,
- })
-
- const requestVerification = useRequestVerification()
- const verifyCode = useVerifyCode()
-
- const checkPasswordCondition = (condition: (value: string) => boolean) => {
- if (isEmptyString(password)) return 'default'
- if (condition(password)) return 'success'
-
- return 'error'
- }
-
- const handleRequestVerificationSuccess = () => {
- toast.success('A verification email has been sent')
-
- if (!showVerificationField) setShowVerificationField(true)
- }
-
- const handleRequestVerificationError = (error: HttpError) => {
- if (error.code === EmailVerificationCodeExceptionCode.TOO_MANY_REQUEST) {
- toast.error(
- 'You have requested the verification code too many times. Please try again in 10 minutes.',
- )
- } else if (error.code === UserExceptionCode.ALREADY_USED_EMAIL) {
- setError('email', {
- message: 'An account with that email already exists',
- })
- } else {
- toast.error('An error occurred while requesting verification')
- }
- }
-
- const handleSendButtonClick = async () => {
- const isEmailValid = await trigger('email')
-
- if (!isEmailValid) return
-
- const data = { email }
-
- requestVerification.mutate(data, {
- onSuccess: handleRequestVerificationSuccess,
- onError: handleRequestVerificationError,
- })
- }
-
- const handleEmailChange = () => {
- if (!(requestVerification.isPending || requestVerification.isIdle)) {
- requestVerification.reset()
- }
-
- if (!(verifyCode.isPending || verifyCode.isIdle)) {
- verifyCode.reset()
- reset({ ...getValues(), code: '' })
- }
- }
-
- const handleVerifyCodeError = (error: HttpError) => {
- if (
- error.code === EmailVerificationCodeExceptionCode.ALREADY_VERIFIED_CODE
- ) {
- setError('code', {
- message: 'The verification code you entered has already been used',
- })
- } else if (error.code === EmailVerificationCodeExceptionCode.EXPIRED_CODE) {
- setError('code', {
- message: 'The verification code has expired. Please request a new one.',
- })
- } else if (
- error.code ===
- ResourceNotFoundExceptionCode.EMAIL_VERIFICATION_CODE_NOT_FOUND
- ) {
- setError('code', {
- message: 'The verification code you entered is incorrect',
- })
- }
- }
-
- const handleCheckButtonClick = async () => {
- const isCodeValid = await trigger('code')
-
- if (!isCodeValid) return
-
- if (requestVerification.isPending || requestVerification.isIdle) {
- setError('email', {
- message: 'Please verify the email first',
- })
-
- return
- }
-
- const data = { email, code: getValues('code') }
-
- verifyCode.mutate(data, {
- onError: handleVerifyCodeError,
- })
- }
-
return (
@@ -144,111 +11,9 @@ export const Account = () => {
-
-
-
-
- {showVerificationField && (
-
-
-
-
-
-
- {!hasError(errors?.code) && verifyCode.isSuccess && (
-
- Authentication completed
-
- )}
- {!hasError(errors?.code) && !verifyCode.isSuccess && (
-
- Please enter the code sent to the email
-
- )}
-
-
-
- )}
-
-
-
-
-
-
-
- 9 ~ 28 characters long
-
-
- Upper & lower case letters
-
-
- At least one number
-
-
- At least special character
-
-
-
-
-
-
-
-
-
-
-
+
+
+
)
diff --git a/src/pages/sign-up/ui/business-sign-up-page/index.tsx b/src/pages/sign-up/ui/business-sign-up-page/index.tsx
new file mode 100644
index 00000000..dc7ab1a9
--- /dev/null
+++ b/src/pages/sign-up/ui/business-sign-up-page/index.tsx
@@ -0,0 +1,81 @@
+'use client'
+
+import { useLocale, useTranslations } from 'next-intl'
+import { useForm } from 'react-hook-form'
+
+import {
+ AcademyName,
+ AcademyNameEn,
+ BirthDate,
+ FullName,
+ Gender,
+ RepresentativeName,
+ BusinessRegistrationNumber,
+ Address,
+ TermsAndConditionsOfUse,
+} from 'features/sign-up'
+import { Email, Password, ConfirmPassword } from 'features/sign-up'
+import { Locale } from 'shared/config'
+import { Form } from 'shared/form'
+import { useCheckbox } from 'shared/lib'
+import { Button, Heading, Layout, Link } from 'shared/ui'
+
+import { FormValues, defaultValues } from '../../model/form-values'
+
+export const BusinessSignUpPage = () => {
+ const t = useTranslations('sign-up')
+ const locale = useLocale() as Locale
+
+ const form = useForm({
+ defaultValues,
+ reValidateMode: 'onSubmit',
+ })
+
+ const { isChecked, getCheckboxProps } = useCheckbox({ options: ['checked'] })
+
+ return (
+
+
+
{t('title')}
+
+
{t('description')}
+
{t('link.sign-in')}
+
+