[Feat] 로그인, 회원가입 페이지 제작

src/app/login/page.tsx

@@ -0,0 +1,17 @@
+import { Icon } from '@/components/icon';
+import { LoginForm } from '@/components/pages/login';
+import { AuthSwitch } from '@/components/shared';
+
+const LoginPage = () => {
+  return (
+    <div className='flex-col-center min-h-[calc(100dvh-113px)] gap-10 overflow-auto bg-gray-100 px-4 py-15'>
+      <div className='flex-col-center w-full gap-4'>
+        <Icon id='wego-logo' className='h-19.5 w-45' />
+        <LoginForm />
+      </div>
+      <AuthSwitch type='signup' />
+    </div>
+  );
+};
+
+export default LoginPage;

src/app/signup/page.tsx

@@ -0,0 +1,17 @@
+import { Icon } from '@/components/icon';
+import { SignupForm } from '@/components/pages/signup';
+import { AuthSwitch } from '@/components/shared';
+
+const SignupPage = () => {
+  return (
+    <div className='flex-col-center min-h-[calc(100dvh-113px)] gap-10 overflow-auto bg-gray-100 px-4 py-15'>
+      <div className='flex-col-center w-full gap-4'>
+        <Icon id='wego-logo' className='h-19.5 w-45' />
+        <SignupForm />
+      </div>
+      <AuthSwitch type='login' />
+    </div>
+  );
+};
+
+export default SignupPage;

src/components/pages/login/login-form/index.tsx

@@ -1,12 +1,17 @@
 'use client';
 
-import { useForm } from '@tanstack/react-form';
+import { type AnyFieldApi, useForm } from '@tanstack/react-form';
 
 import { FormInput } from '@/components/shared';
 import { Button } from '@/components/ui';
 import { loginSchema } from '@/lib/schema/auth';
 
-const getHintMessage = (errors: unknown[], isTouched: boolean, submissionAttempts: number) => {
+const getHintMessage = (field: AnyFieldApi) => {
+  const {
+    meta: { errors, isTouched },
+  } = field.state;
+  const { submissionAttempts } = field.form.state;
+
   const firstError = errors[0] as { message?: string } | undefined;
   const showError = isTouched || submissionAttempts > 0;
 
@@ -40,10 +45,7 @@ export const LoginForm = () => {
       <div className='flex-col-center w-full gap-4'>
         <form.Field name='email'>
           {(field) => {
-            const {
-              meta: { errors, isTouched },
-            } = field.state;
-            const hintMessage = getHintMessage(errors, isTouched, form.state.submissionAttempts);
+            const hintMessage = getHintMessage(field);
 
             return (
               <FormInput
@@ -63,10 +65,7 @@ export const LoginForm = () => {
 
         <form.Field name='password'>
           {(field) => {
-            const {
-              meta: { errors, isTouched },
-            } = field.state;
-            const hintMessage = getHintMessage(errors, isTouched, form.state.submissionAttempts);
+            const hintMessage = getHintMessage(field);
 
             return (
               <FormInput
@@ -88,19 +87,14 @@ export const LoginForm = () => {
         selector={(state) => ({
           canSubmit: state.canSubmit,
           isSubmitting: state.isSubmitting,
+          isPristine: state.isPristine,
         })}
       >
-        {({ canSubmit, isSubmitting }) => {
-          const disabled = !canSubmit || isSubmitting;
+        {({ canSubmit, isSubmitting, isPristine }) => {
+          const disabled = !canSubmit || isSubmitting || isPristine;
 
           return (
-            <Button
-              className='border-none'
-              disabled={disabled}
-              size='md'
-              type='submit'
-              variant='primary'
-            >
+            <Button disabled={disabled} size='md' type='submit' variant='primary'>
               로그인하기
             </Button>
           );

src/components/pages/signup/signup-form/index.tsx

@@ -1,12 +1,17 @@
 'use client';
 
-import { useForm } from '@tanstack/react-form';
+import { type AnyFieldApi, useForm } from '@tanstack/react-form';
 
 import { FormInput } from '@/components/shared';
 import { Button } from '@/components/ui';
 import { signupSchema } from '@/lib/schema/auth';
 
-const getHintMessage = (errors: unknown[], isTouched: boolean, submissionAttempts: number) => {
+const getHintMessage = (field: AnyFieldApi) => {
+  const {
+    meta: { errors, isTouched },
+  } = field.state;
+  const { submissionAttempts } = field.form.state;
+
   const firstError = errors[0] as { message?: string } | undefined;
   const showError = isTouched || submissionAttempts > 0;
 
@@ -42,10 +47,7 @@ export const SignupForm = () => {
       <div className='flex-col-center w-full gap-4'>
         <form.Field name='email'>
           {(field) => {
-            const {
-              meta: { errors, isTouched },
-            } = field.state;
-            const hintMessage = getHintMessage(errors, isTouched, form.state.submissionAttempts);
+            const hintMessage = getHintMessage(field);
 
             return (
               <FormInput
@@ -64,10 +66,7 @@ export const SignupForm = () => {
 
         <form.Field name='nickname'>
           {(field) => {
-            const {
-              meta: { errors, isTouched },
-            } = field.state;
-            const hintMessage = getHintMessage(errors, isTouched, form.state.submissionAttempts);
+            const hintMessage = getHintMessage(field);
 
             return (
               <FormInput
@@ -85,10 +84,7 @@ export const SignupForm = () => {
 
         <form.Field name='password'>
           {(field) => {
-            const {
-              meta: { errors, isTouched },
-            } = field.state;
-            const hintMessage = getHintMessage(errors, isTouched, form.state.submissionAttempts);
+            const hintMessage = getHintMessage(field);
 
             return (
               <FormInput
@@ -107,10 +103,7 @@ export const SignupForm = () => {
 
         <form.Field name='confirmPassword'>
           {(field) => {
-            const {
-              meta: { errors, isTouched },
-            } = field.state;
-            const hintMessage = getHintMessage(errors, isTouched, form.state.submissionAttempts);
+            const hintMessage = getHintMessage(field);
 
             return (
               <FormInput
@@ -132,19 +125,14 @@ export const SignupForm = () => {
         selector={(state) => ({
           canSubmit: state.canSubmit,
           isSubmitting: state.isSubmitting,
+          isPristine: state.isPristine,
         })}
       >
-        {({ canSubmit, isSubmitting }) => {
-          const disabled = !canSubmit || isSubmitting;
+        {({ canSubmit, isSubmitting, isPristine }) => {
+          const disabled = !canSubmit || isSubmitting || isPristine;
 
           return (
-            <Button
-              className='border-none'
-              disabled={disabled}
-              size='md'
-              type='submit'
-              variant='primary'
-            >
+            <Button disabled={disabled} size='md' type='submit' variant='primary'>
               회원가입하기
             </Button>
           );

src/components/shared/auth-switch-link/index.tsx

@@ -0,0 +1,33 @@
+import Link from 'next/link';
+
+const authSwitchContent = {
+  login: {
+    description: '이미 회원이신가요?',
+    linkText: '로그인하기',
+    href: '/login',
+  },
+  signup: {
+    description: 'WEGO가 처음이신가요?',
+    linkText: '회원가입하기',
+    href: '/signup',
+  },
+} as const;
+
+type AuthSwitchType = keyof typeof authSwitchContent;
+
+interface AuthSwitchProps {
+  type?: AuthSwitchType;
+}
+
+export const AuthSwitch = ({ type = 'login' }: AuthSwitchProps) => {
+  const content = authSwitchContent[type];
+
+  return (
+    <p className='flex-center bg-mono-white text-text-sm-medium gap-1 rounded-full px-4 py-2 text-gray-600'>
+      {content.description}
+      <Link href={content.href} className='text-mint-600 text-text-sm-semibold'>
+        {content.linkText}
+      </Link>
+    </p>
+  );
+};

src/components/shared/index.ts

@@ -1,3 +1,4 @@
+export { AuthSwitch } from './auth-switch-link';
 export { FormInput } from './form-input';
 export { SearchBar } from './search-bar';
 export { TabNavigation } from './tab-navigation';