[Feature] 학원 회원가입 페이지 마크업 / 다국어 적용

app/(business)/business/sign-up/page.ts

@@ -0,0 +1 @@
+export { BusinessSignUpPage as default } from 'pages/sign-up'

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'

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!,
+  }
+}

src/pages/sign-up/model/rules.ts → 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',
+}

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 (
+    <div className={fieldCss.fieldWrapper()}>
+      <Label required>{t('field.academy-name-en.label')}</Label>
+      <Form.Control name="academyNameEn">
+        <Form.TextField placeholder={t('field.academy-name-en.placeholder')} />
+        <Form.ErrorMessage />
+      </Form.Control>
+    </div>
+  )
+}

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 (
+    <div className={fieldCss.fieldWrapper()}>
+      <Label required>{t('field.academy-name.label')}</Label>
+      <Form.Control name="academyName">
+        <Form.TextField placeholder={t('field.academy-name.placeholder')} />
+        <Form.ErrorMessage />
+      </Form.Control>
+    </div>
+  )
+}

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 (
+    <div className={fieldCss.fieldWrapper()}>
+      <Label required>{t('field.address.label')}</Label>
+      <div className="flex gap-2">
+        <TextField readOnly className="bg-gray-100" />
+        <Button variant="lined" size="large" className="w-[120px] shrink-0">
+          주소 검색
+        </Button>
+      </div>
+      <TextField readOnly className="bg-gray-100" />
+      <TextField placeholder={t('field.address.placeholder')} />
+    </div>
+  )
+}

src/features/sign-up/ui/field/birth-date.tsx

@@ -0,0 +1,20 @@
+import { useTranslations } from 'next-intl'
+
+import { fieldCss, Form } from 'shared/form'
+import { Label } from 'shared/ui'
+
+import { birthDate as birthDateRule } from '../../model/rules'
+
+export const BirthDate = () => {
+  const t = useTranslations()
+
+  return (
+    <div className={fieldCss.fieldWrapper()}>
+      <Label required>{t('field.birth-date.label')}</Label>
+      <Form.Control name="birthDate" rules={birthDateRule}>
+        <Form.DatePicker placeholder={t('field.birth-date.placeholder')} />
+        <Form.ErrorMessage />
+      </Form.Control>
+    </div>
+  )
+}

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 (
+    <div className={fieldCss.fieldWrapper()}>
+      <Label required>{t('field.business-registration-number.label')}</Label>
+      <Form.Control name="businessRegistrationNumber">
+        <Form.TextField
+          placeholder={t('field.business-registration-number.placeholder')}
+        />
+        <Form.ErrorMessage />
+      </Form.Control>
+    </div>
+  )
+}

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 (
+    <div className={fieldCss.fieldWrapper()}>
+      <Label required>{t('field.confirm-password.label')}</Label>
+      <Form.Control name="confirmPassword" rules={confirmPasswordRule}>
+        <Form.PasswordField
+          placeholder={t('field.confirm-password.placeholder')}
+          autoComplete="one-time-code"
+          showToggle
+        />
+        <Form.ErrorMessage />
+      </Form.Control>
+    </div>
+  )
+}