✨ Feat: 회원 가입 폼 구현

src/app/(auth)/signup/page.tsx

@@ -0,0 +1,10 @@
+'use client'
+
+import SignupForm from '@/app/features/auth/components/SignupForm'
+export default function Signup() {
+  return (
+    <>
+      <SignupForm />
+    </>
+  )
+}

src/app/features/auth/components/SignupForm.tsx

@@ -0,0 +1,105 @@
+'use client'
+
+import Input from '@components/Input'
+import { cn } from '@lib/cn'
+import { useState } from 'react'
+import { useForm } from 'react-hook-form'
+
+import { useConfirmPasswordValidation } from '../hooks/useConfirmPasswordValidation'
+import { useSignupSubmit } from '../hooks/useSignupSubmit'
+import { signupValidation } from '../schemas/signupValidation'
+import { SignupFormData } from '../types/auth.type'
+
+export default function SignupForm() {
+  const {
+    register,
+    handleSubmit,
+    trigger,
+    getValues,
+    formState: { errors, isSubmitting, isValid },
+  } = useForm<SignupFormData>({
+    mode: 'onChange',
+    defaultValues: {
+      email: '',
+      nickname: '',
+      password: '',
+      confirmPassword: '',
+    },
+  })
+
+  const [isChecked, setIsChecked] = useState(false)
+  const { submit } = useSignupSubmit()
+  const validation = useConfirmPasswordValidation(getValues)
+
+  function handleAgree() {
+    setIsChecked((prev) => !prev)
+  }
+
+  return (
+    <form className="flex flex-col gap-16" onSubmit={handleSubmit(submit)}>
+      <Input
+        labelName="이메일"
+        type="email"
+        placeholder="이메일을 입력해 주세요"
+        autoComplete="email"
+        {...register('email', signupValidation.email)}
+        hasError={!!errors.email}
+        errorMessage={errors.email?.message}
+      />
+      <Input
+        labelName="닉네임"
+        type="text"
+        placeholder="닉네임을 입력해 주세요"
+        autoComplete="off"
+        {...register('nickname', signupValidation.nickname)}
+        hasError={!!errors.nickname}
+        errorMessage={errors.nickname?.message}
+      />
+      <Input
+        labelName="비밀번호"
+        type="password"
+        placeholder="8자 이상 입력해 주세요"
+        autoComplete="new-password"
+        {...register('password', {
+          ...signupValidation.password,
+          onChange: () => trigger('confirmPassword'),
+        })}
+        hasError={!!errors.password}
+        errorMessage={errors.password?.message}
+      />
+      <Input
+        labelName="비밀번호 확인"
+        type="password"
+        placeholder="비밀번호를 한번 더 입력해주세요"
+        autoComplete="new-password"
+        {...register('confirmPassword', validation)}
+        hasError={!!errors.confirmPassword}
+        errorMessage={errors.confirmPassword?.message}
+      />
+      <div className="flex items-center gap-8">
+        <input
+          type="checkbox"
+          id="terms"
+          className="size-16 rounded-4"
+          onChange={handleAgree}
+          checked={isChecked}
+        />
+        <label className="text-base" htmlFor="terms">
+          이용약관에 동의합니다.
+        </label>
+      </div>
+      <button
+        type="submit"
+        className={cn(
+          'mt-8 h-50 w-full rounded-8 text-lg font-medium text-white',
+          isValid && isChecked && !isSubmitting
+            ? 'BG-blue'
+            : 'BG-blue-disabled',
+        )}
+        disabled={isSubmitting || !isValid || !isChecked}
+      >
+        회원가입
+      </button>
+    </form>
+  )
+}

src/app/features/auth/hooks/useConfirmPasswordValidation.ts

@@ -0,0 +1,11 @@
+import { SignupFormData } from '../types/auth.type'
+
+export function useConfirmPasswordValidation(getValues: () => SignupFormData) {
+  return {
+    required: '비밀번호를 한번 더 입력해 주세요.',
+    validate: (value: string) => {
+      const password = getValues().password
+      return value === password || '비밀번호가 일치하지 않습니다'
+    },
+  }
+}

src/app/features/auth/hooks/useSignupSubmit.ts

@@ -0,0 +1,28 @@
+import axios from 'axios'
+import { useRouter } from 'next/navigation'
+import { toast } from 'sonner'
+
+import { SignupRequest } from '../types/auth.type'
+import { useAuth } from './useAuth'
+
+export function useSignupSubmit() {
+  const { signup } = useAuth()
+  const router = useRouter()
+
+  async function submit(data: SignupRequest) {
+    try {
+      await signup(data)
+      toast.success('가입이 완료되었습니다!')
+      router.push('/login')
+    } catch (e: unknown) {
+      if (axios.isAxiosError(e)) {
+        const message = e.response?.data?.message
+        toast.error(message ?? '회원가입에 실패하였습니다.')
+      } else {
+        toast.error('알 수 없는 에러 발생')
+      }
+    }
+  }
+
+  return { submit }
+}

src/app/features/auth/schemas/signupValidation.ts

@@ -0,0 +1,23 @@
+export const signupValidation = {
+  email: {
+    required: '이메일을 입력해 주세요.',
+    pattern: {
+      value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+      message: '유효한 이메일 주소를 입력해주세요',
+    },
+  },
+  password: {
+    required: '비밀번호를 입력해 주세요.',
+    minLength: {
+      value: 8,
+      message: '비밀번호는 최소 8자 이상이어야 합니다.',
+    },
+  },
+  nickname: {
+    required: '닉네임을 입력해 주세요.',
+    pattern: {
+      value: /^[a-zA-Z가-힣]{1,10}$/,
+      message: '한글 또는 영어만 입력할 수 있으며, 최대 10자까지 가능합니다.',
+    },
+  },
+}

src/app/features/auth/types/auth.type.ts

@@ -16,6 +16,10 @@ export interface SignupRequest {
   password: string
 }
 
+export interface SignupFormData extends SignupRequest {
+  confirmPassword: string
+}
+
 export interface AuthState {
   accessToken: string | null
   user: User | null