[Feat] FormInput 수정 & 로그인, 회원가입 폼 컴포넌트 제작

package.json

@@ -40,6 +40,7 @@
     ]
   },
   "dependencies": {
+    "@tanstack/react-form": "^1.27.0",
     "@tanstack/react-query": "^5.90.3",
     "@tanstack/react-query-devtools": "^5.90.2",
     "axios": "^1.13.2",
@@ -50,7 +51,8 @@
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "swiper": "^12.0.3",
-    "tailwind-merge": "^3.3.1"
+    "tailwind-merge": "^3.3.1",
+    "zod": "^4.1.13"
   },
   "devDependencies": {
     "@commitlint/cli": "^20.1.0",

src/components/pages/login/index.ts

@@ -0,0 +1 @@
+export { LoginForm } from './login-form';

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

@@ -0,0 +1,111 @@
+'use client';
+
+import { 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 firstError = errors[0] as { message?: string } | undefined;
+  const showError = isTouched || submissionAttempts > 0;
+
+  return showError ? firstError?.message : undefined;
+};
+
+export const LoginForm = () => {
+  const form = useForm({
+    defaultValues: {
+      email: '',
+      password: '',
+    },
+    validators: {
+      onSubmit: loginSchema,
+      onChange: loginSchema,
+    },
+    onSubmit: async ({ value }) => {
+      // API 호출
+      alert('login:' + value.email);
+    },
+  });
+
+  return (
+    <form
+      className='flex-col-center w-full gap-8'
+      onSubmit={(e) => {
+        e.preventDefault();
+        void form.handleSubmit();
+      }}
+    >
+      <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);
+
+            return (
+              <FormInput
+                hintMessage={hintMessage}
+                inputProps={{
+                  type: 'email',
+                  autoComplete: 'email',
+                  placeholder: '이메일을 입력해주세요',
+                  value: field.state.value,
+                  onChange: (e) => field.handleChange(e.target.value),
+                }}
+                labelName='이메일'
+              />
+            );
+          }}
+        </form.Field>
+
+        <form.Field name='password'>
+          {(field) => {
+            const {
+              meta: { errors, isTouched },
+            } = field.state;
+            const hintMessage = getHintMessage(errors, isTouched, form.state.submissionAttempts);
+
+            return (
+              <FormInput
+                hintMessage={hintMessage}
+                inputProps={{
+                  type: 'password',
+                  placeholder: '비밀번호를 입력해주세요',
+                  value: field.state.value,
+                  onChange: (e) => field.handleChange(e.target.value),
+                }}
+                labelName='비밀번호'
+              />
+            );
+          }}
+        </form.Field>
+      </div>
+
+      <form.Subscribe
+        selector={(state) => ({
+          canSubmit: state.canSubmit,
+          isSubmitting: state.isSubmitting,
+        })}
+      >
+        {({ canSubmit, isSubmitting }) => {
+          const disabled = !canSubmit || isSubmitting;
+
+          return (
+            <Button
+              className='border-none'
+              disabled={disabled}
+              size='md'
+              type='submit'
+              variant='primary'
+            >
+              로그인하기
+            </Button>
+          );
+        }}
+      </form.Subscribe>
+    </form>
+  );
+};

src/components/pages/signup/index.ts

@@ -0,0 +1 @@
+export { SignupForm } from './signup-form';