[Feat] 모임생성 Tanstack-Form 폼 연동

eslint.config.mjs

@@ -172,6 +172,11 @@ const eslintConfig = defineConfig([
           },
         },
       ],
+
+      /*
+        랜더 프롭스 허용
+      */
+      'react/no-children-prop': 'off',
     },
   },
   /**

src/app/post-meetup/page.tsx

@@ -1,27 +1,54 @@
 'use client';
 
+import { useForm } from '@tanstack/react-form';
+
 import {
   MeetupAddressField,
   MeetupCapField,
   MeetupDateField,
   MeetupDetailField,
   MeetupSubmitButton,
   MeetupTagsField,
+  MeetupThumbnailsField,
   MeetupTitleField,
 } from '@/components/pages/post-meetup';
 
 const PostMeetupPage = () => {
+  const form = useForm({
+    defaultValues: {
+      title: '',
+      address: '',
+      date: '',
+      cap: 0,
+      thumbnails: {},
+      detail: '',
+      tags: [] as string[],
+    },
+    onSubmit: ({ value }) => {
+      console.log(value);
+    },
+  });
+
   return (
     <div>
-      <section className='px-4'>
-        <MeetupTitleField />
-        <MeetupAddressField />
-        <MeetupDateField />
-        <MeetupCapField />
-        <MeetupDetailField />
-        <MeetupTagsField />
-      </section>
-      <MeetupSubmitButton />
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          form.handleSubmit();
+        }}
+      >
+        <section className='px-4'>
+          <form.Field children={(field) => <MeetupTitleField field={field} />} name='title' />
+          <form.Field children={(field) => <MeetupAddressField field={field} />} name='address' />
+          <form.Field children={(field) => <MeetupDateField field={field} />} name='date' />
+          <form.Field children={(field) => <MeetupCapField field={field} />} name='cap' />
+          <form.Field children={(field) => <MeetupThumbnailsField field={field} />} name='cap' />
+          <form.Field children={(field) => <MeetupDetailField field={field} />} name='detail' />
+          <form.Field children={(field) => <MeetupTagsField field={field} />} name='tags' />
+        </section>
+
+        <MeetupSubmitButton />
+      </form>
     </div>
   );
 };

src/components/pages/post-meetup/fields/address-field/index.tsx

@@ -1,9 +1,15 @@
 'use client';
 
+import { AnyFieldApi } from '@tanstack/react-form';
+
 import { Icon } from '@/components/icon';
 import { Input, Label } from '@/components/ui';
 
-export const MeetupAddressField = () => {
+interface Props {
+  field: AnyFieldApi;
+}
+
+export const MeetupAddressField = ({ field }: Props) => {
   return (
     <div className='mt-3 flex w-full flex-col gap-1'>
       <Label htmlFor='post-meetup-address' required>
@@ -23,6 +29,8 @@ export const MeetupAddressField = () => {
         placeholder='모임 주소를 입력해주세요'
         required
         type='text'
+        value={field.state.value}
+        onChange={(e) => field.handleChange(e.target.value)}
       />
     </div>
   );

src/components/pages/post-meetup/fields/cap-field/index.tsx

@@ -1,9 +1,15 @@
 'use client';
 
+import { AnyFieldApi } from '@tanstack/react-form';
+
 import { Icon } from '@/components/icon';
 import { Input, Label } from '@/components/ui';
 
-export const MeetupCapField = () => {
+interface Props {
+  field: AnyFieldApi;
+}
+
+export const MeetupCapField = ({ field }: Props) => {
   return (
     <div className='mt-3 flex w-full flex-col gap-1'>
       <Label htmlFor='post-meetup-cap' required>
@@ -23,6 +29,8 @@ export const MeetupCapField = () => {
         placeholder='최대 인원을 선택해주세요'
         required
         type='text'
+        value={field.state.value}
+        onChange={(e) => field.handleChange(e.target.value)}
       />
     </div>
   );

src/components/pages/post-meetup/fields/date-field/index.tsx

@@ -1,9 +1,15 @@
 'use client';
 
+import { AnyFieldApi } from '@tanstack/react-form';
+
 import { Icon } from '@/components/icon';
 import { Input, Label } from '@/components/ui';
 
-export const MeetupDateField = () => {
+interface Props {
+  field: AnyFieldApi;
+}
+
+export const MeetupDateField = ({ field }: Props) => {
   return (
     <div className='mt-6 flex w-full flex-col gap-1'>
       <Label htmlFor='post-meetup-date' required>
@@ -23,6 +29,8 @@ export const MeetupDateField = () => {
         placeholder='날짜와 시간을 선택해주세요'
         required
         type='text'
+        value={field.state.value}
+        onChange={(e) => field.handleChange(e.target.value)}
       />
     </div>
   );

src/components/pages/post-meetup/fields/detail-feild/index.tsx

@@ -1,8 +1,14 @@
 'use client';
 
+import { AnyFieldApi } from '@tanstack/react-form';
+
 import { Label } from '@/components/ui';
 
-export const MeetupDetailField = () => {
+interface Props {
+  field: AnyFieldApi;
+}
+
+export const MeetupDetailField = ({ field }: Props) => {
   return (
     <div className='mt-3 flex w-full flex-col gap-1'>
       <Label htmlFor='post-meetup-detail' required>
@@ -14,6 +20,8 @@ export const MeetupDetailField = () => {
         maxLength={300}
         placeholder='모임에 대해 설명해주세요'
         required
+        value={field.state.value}
+        onChange={(e) => field.handleChange(e.target.value)}
       />
       <div className='text-text-sm-medium text-right text-gray-500'>0/300</div>
     </div>

src/components/pages/post-meetup/fields/tags-field/index.tsx

@@ -1,9 +1,15 @@
 'use client';
 
+import { AnyFieldApi } from '@tanstack/react-form';
+
 import { Icon } from '@/components/icon';
 import { Input, Label } from '@/components/ui';
 
-export const MeetupTagsField = () => {
+interface Props {
+  field: AnyFieldApi;
+}
+
+export const MeetupTagsField = ({ field }: Props) => {
   return (
     <div className='flex w-full flex-col gap-1'>
       <Label htmlFor='post-meetup-tags'>태그</Label>
@@ -19,13 +25,14 @@ export const MeetupTagsField = () => {
           />
         }
         placeholder='입력 후 Enter'
-        required
         type='text'
+        value={field.state.value}
+        onChange={(e) => field.handleChange(e.target.value)}
       />
       <ul className='mt-0.5 flex flex-wrap px-2'>
         <li className='bg-mint-100 text-mint-700 flex-center gap-0.5 rounded-full px-2 py-0.5'>
           <p className='text-text-xs-medium'>#태그</p>
-          <Icon id='small-x' width={10} height={10} />
+          <Icon id='small-x' width={7} height={7} />
         </li>
       </ul>
     </div>

src/components/pages/post-meetup/fields/thumbnails-field/index.tsx

@@ -1,23 +1,31 @@
+'use client';
+
 import Image from 'next/image';
 
+import { AnyFieldApi } from '@tanstack/react-form';
+
 import { Icon } from '@/components/icon';
 import { ImageInput, ImageInputProps } from '@/components/ui';
 import { cn } from '@/lib/utils';
 
 type ImageUploadPropsWithoutChildren = Omit<ImageInputProps, 'children'>;
 
-const ThumbnailField = ({ value, onChange, initialImages }: ImageUploadPropsWithoutChildren) => {
+interface Props extends ImageUploadPropsWithoutChildren {
+  field: AnyFieldApi;
+}
+
+export const MeetupThumbnailsField = ({ field, initialImages }: Props) => {
   return (
     <ImageInput
       initialImages={initialImages}
       maxFiles={3}
       mode='append'
       multiple={true}
-      value={value}
-      onChange={onChange}
+      value={field.state.value}
+      onChange={field.handleChange}
     >
       {(images, onRemoveImageClick, onFileSelectClick) => (
-        <div className='flex flex-row gap-2'>
+        <div className='mt-6 flex flex-row gap-2'>
           <button
             className={cn(
               'flex-center bg-mono-white group aspect-square w-full max-w-20 cursor-pointer rounded-2xl border-1 border-gray-300', // 기본 스타일
@@ -63,5 +71,3 @@ const ThumbnailField = ({ value, onChange, initialImages }: ImageUploadPropsWith
     </ImageInput>
   );
 };
-
-export default ThumbnailField;

src/components/pages/post-meetup/fields/title-field/index.tsx

@@ -1,14 +1,21 @@
 'use client';
 
+import { AnyFieldApi } from '@tanstack/react-form';
+
 import { Icon } from '@/components/icon';
 import { Input, Label } from '@/components/ui';
 
-export const MeetupTitleField = () => {
+interface Props {
+  field: AnyFieldApi;
+}
+
+export const MeetupTitleField = ({ field }: Props) => {
   return (
     <div className='mt-4 flex w-full flex-col gap-1'>
       <Label htmlFor='post-meetup-title' required>
         모임 제목
       </Label>
+
       <Input
         id='post-meetup-title'
         className='bg-mono-white focus:border-mint-500 rounded-2xl border border-gray-300'
@@ -23,6 +30,8 @@ export const MeetupTitleField = () => {
         placeholder='모임 제목을 입력해주세요'
         required
         type='text'
+        value={field.state.value}
+        onChange={(e) => field.handleChange(e.target.value)}
       />
     </div>
   );

src/components/pages/post-meetup/index.ts

@@ -3,5 +3,6 @@ export { MeetupCapField } from './fields/cap-field';
 export { MeetupDateField } from './fields/date-field';
 export { MeetupDetailField } from './fields/detail-feild';
 export { MeetupTagsField } from './fields/tags-field';
+export { MeetupThumbnailsField } from './fields/thumbnails-field';
 export { MeetupTitleField } from './fields/title-field';
 export { MeetupSubmitButton } from './post-button';

src/components/pages/post-meetup/post-button/index.tsx

@@ -3,7 +3,7 @@ import { Button } from '@/components/ui';
 export const MeetupSubmitButton = () => {
   return (
     <div className='mt-6 border-t-1 border-gray-200 px-4 py-3'>
-      <Button>모임 생성</Button>
+      <Button type='submit'>모임 생성</Button>
     </div>
   );
 };