Feat/markup/create meeting/DEVING-40 모임생성 및 수정 페이지 구현

package.json

@@ -19,13 +19,15 @@
     "@svgr/webpack": "^8.1.0",
     "@tanstack/react-query": "^5.66.7",
     "@tanstack/react-query-devtools": "^5.66.7",
+    "@types/react-datepicker": "^7.0.0",
     "autoprefixer": "^10.4.20",
     "axios": "^1.7.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.475.0",
     "next": "14.1.0",
     "react": "^18.2.0",
+    "react-datepicker": "^8.1.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.54.2",
     "tailwind-merge": "^3.0.1",

src/app/layout.tsx

@@ -1,5 +1,6 @@
 import Header from '@/components/common/Header';
 import ReactQueryProviders from '@/hooks/useReactQuery';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import type { Metadata } from 'next';
 import localFont from 'next/font/local';
 
@@ -28,6 +29,7 @@ export default function RootLayout({
         <ReactQueryProviders>
           <Header />
           <div className="m-auto max-w-[1340px]">{children}</div>
+          <ReactQueryDevtools initialIsOpen={false} />
         </ReactQueryProviders>
       </body>
     </html>

src/app/meeting/components/form/MeetingForm.tsx

@@ -0,0 +1,126 @@
+'use client';
+
+import {
+  CategoryField,
+  DateField,
+  DescriptionField,
+  ImageField,
+  InfoMessage,
+  LocationField,
+  MemberLimitField,
+  PrivacyField,
+  RequireApprovalField,
+  SubmitButton,
+  TechStackField,
+  TitleField,
+} from '@/app/meeting/components/form/form-filed';
+import useMeetingFormMutation from '@/hooks/mutations/useMeetingFormMutation';
+import { convertImageToBase64 } from '@/util/base64';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { CreateMeetingPayload } from 'types/meetingForm';
+
+import { MEETING_TYPES } from '../../constants/meeting-form/meetingConstants';
+
+interface MeetingFormProps {
+  mode: 'create' | 'edit';
+  initialData?: Partial<CreateMeetingPayload>;
+  meetingId?: string;
+}
+
+export default function MeetingForm({
+  mode,
+  initialData = {},
+  meetingId,
+}: MeetingFormProps) {
+  const router = useRouter();
+  const { createMeeting, isLoading } = useMeetingFormMutation();
+
+  // 날짜 YYYY-MM-DD 형식으로 변환
+  const today = new Date();
+  const formattedToday = `${today.getFullYear()}-${String(today.getMonth() + 1).padStart(2, '0')}-${String(today.getDate()).padStart(2, '0')}`;
+
+  // 카테고리 라벨에서 ID 찾기 (URL 용)
+  const getCategoryId = (label: string) => {
+    const category = MEETING_TYPES.find((type) => type.label === label);
+    return category ? category.id : '';
+  };
+
+  const defaultValues: CreateMeetingPayload = {
+    meetingTitle: '',
+    categoryTitle: '',
+    imageName: '',
+    imageEncodedBase64: '',
+    content: '',
+    location: '',
+    maxMember: 0,
+    startDate: formattedToday,
+    isPublic: true,
+    requireApproval: false,
+    skillArray: [],
+    ...initialData,
+  };
+
+  const methods = useForm<CreateMeetingPayload>({
+    defaultValues,
+  });
+
+  const { handleSubmit } = methods;
+
+  const onSubmit = async (data: CreateMeetingPayload) => {
+    try {
+      // 이미지 처리
+      const fileInput = document.getElementById('image') as HTMLInputElement;
+      if (fileInput?.files && fileInput.files.length > 0) {
+        const imageData = await convertImageToBase64(fileInput.files[0]);
+        data.imageName = imageData.name;
+        data.imageEncodedBase64 = imageData.base64;
+      }
+
+      if (mode === 'create') {
+        // 모임 생성
+        const result = await createMeeting.mutateAsync(data);
+
+        // 성공 시 상세 페이지로 이동
+        const categoryId = getCategoryId(data.categoryTitle);
+        router.push(`/meeting/${categoryId}/${result.data.meetingId}`);
+      } else if (mode === 'edit' && meetingId) {
+        // 모임 수정 (TODO: API 구현 시 수정)
+        // const result = await updateMeeting.mutateAsync({ id: meetingId, data });
+
+        // 수정 성공 시 상세 페이지로 이동
+        const categoryId = getCategoryId(data.categoryTitle);
+        router.push(`/meeting/${categoryId}/${meetingId}`);
+      }
+    } catch (error) {}
+  };
+
+  return (
+    <FormProvider {...methods}>
+      <div className="mx-auto w-full max-w-3xl p-6">
+        <h1 className="typo-heading1 mb-8 text-center">
+          {mode === 'create' ? '모임 생성하기' : '모임 수정하기'}
+        </h1>
+
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+          <TitleField required />
+          <CategoryField required />
+          <LocationField required />
+          <DateField required />
+          <MemberLimitField required />
+          <TechStackField maxSelections={5} />
+          <ImageField required={true} />
+          <DescriptionField required />
+          <RequireApprovalField />
+          <PrivacyField />
+          <InfoMessage />
+          <SubmitButton
+            text={mode === 'create' ? '모임 생성하기' : '모임 수정하기'}
+            isLoading={isLoading}
+          />
+        </form>
+      </div>
+    </FormProvider>
+  );
+}

src/app/meeting/components/form/form-filed/CategoryField.tsx

@@ -0,0 +1,84 @@
+import { MEETING_TYPES } from '@/app/meeting/constants/meeting-form/meetingConstants';
+import { cn } from '@/util/cn';
+import { Check } from 'lucide-react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { CreateMeetingPayload } from 'types/meetingForm';
+
+import { meetingTypeValidation } from '../validation';
+
+interface CategoryFieldProps {
+  required?: boolean;
+}
+
+const CategoryField = ({ required = true }: CategoryFieldProps) => {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext<CreateMeetingPayload>();
+
+  const validation = required
+    ? meetingTypeValidation
+    : { ...meetingTypeValidation, required: false };
+
+  return (
+    <div className="space-y-2">
+      <label
+        htmlFor="meeting-type-group"
+        className="typo-body1 font-medium text-Cgray700"
+      >
+        모임 유형
+      </label>
+      <Controller
+        name="categoryTitle"
+        control={control}
+        rules={validation}
+        render={({ field }) => (
+          <div>
+            <div
+              className="grid grid-cols-2 gap-3"
+              id="meeting-type-group"
+              role="radiogroup"
+            >
+              {MEETING_TYPES.map((type) => (
+                <div
+                  key={type.id}
+                  className={cn(
+                    'flex cursor-pointer items-center gap-2 rounded-md border p-3 transition-all',
+                    field.value === type.label
+                      ? 'border-main bg-default text-main'
+                      : 'border-Cgray300 text-Cgray500',
+                  )}
+                  onClick={() => field.onChange(type.label)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault();
+                      field.onChange(type.label);
+                    }
+                  }}
+                  tabIndex={0}
+                  role="radio"
+                  aria-checked={field.value === type.label}
+                >
+                  <div className="flex flex-1 items-center gap-2">
+                    {type.icon}
+                    <span className="typo-body1">{type.label}</span>
+                  </div>
+                  {field.value === type.label && (
+                    <Check className="ml-auto h-5 w-5 text-main" />
+                  )}
+                </div>
+              ))}
+            </div>
+            {errors.categoryTitle && (
+              <p className="typo-caption1 mt-[10px] px-[10px] text-warning">
+                {errors.categoryTitle.message}
+              </p>
+            )}
+          </div>
+        )}
+      />
+    </div>
+  );
+};
+
+export default CategoryField;

src/app/meeting/components/form/form-filed/DateField.tsx

@@ -0,0 +1,33 @@
+import { DatePicker } from '@/components/ui/form/DatePicker';
+import { useFormContext } from 'react-hook-form';
+import { CreateMeetingPayload } from 'types/meetingForm';
+
+import { startDateValidation } from '../validation';
+
+interface DateFieldProps {
+  required?: boolean;
+}
+
+const DateField = ({ required = true }: DateFieldProps) => {
+  const {
+    formState: { errors },
+  } = useFormContext<CreateMeetingPayload>();
+
+  const validation = required
+    ? startDateValidation
+    : { ...startDateValidation, required: false };
+
+  return (
+    <DatePicker
+      id="startDate"
+      name="startDate"
+      label="시작 날짜"
+      placeholder="시작 날짜를 선택해주세요"
+      errorMessage={errors.startDate?.message as string}
+      required={required}
+      validationRules={validation}
+    />
+  );
+};
+
+export default DateField;