refactor: 모임 생성 폼을 zod 기반 validation으로 리팩토링 (#65)

* feat: CreateMeetingForm zod 스키마 추가

모임 생성 폼의 validation을 zod 기반으로 관리하기 위한 스키마 정의
- peopleCount, scheduledDate, timeSlot, region 필드 정의
- 기존 validateDateInput 유틸 함수 재사용

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: 모임 생성 폼을 zod 기반 validation으로 리팩토링

- useCreateMeetingForm에 zodResolver 적용 및 submit 로직 통합
- Step 컴포넌트에서 rules 객체 제거
- page.tsx에서 submit 로직 제거하여 간소화
- CreateMeetingForm 인터페이스를 스키마 타입으로 대체

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* refactor: DATE_ERROR_MESSAGES 중복 제거 및 formState 활용

- DATE_ERROR_MESSAGES를 유틸로 추출하여 공유
- DateStep에서 fieldState.error 사용으로 변경
- DateStepFooter에서 formState.errors 기반으로 버튼 활성화 판단
- 스키마에서 10자리 미만일 때는 validation 건너뛰도록 수정 (이전 동작 유지)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* style: useCreateMeetingForm 조건문 포맷팅 정리

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: youngminss

app/gathering/create/page.tsx

@@ -18,20 +18,14 @@ import {
 	useCreateMeetingForm,
 	useCreateMeetingFunnel,
 } from "#/hooks/gathering";
-import { useCreateGathering } from "#/hooks/apis/gathering";
 import { Toaster } from "#/components/toast";
-import { isApiError } from "#/utils/api";
-import { toast } from "#/utils/toast";
-import type { CreateMeetingForm } from "#/types/gathering";
 
 export default function GatheringCreatePage() {
 	const router = useRouter();
-	const form = useCreateMeetingForm();
+	const { methods, onSubmit, isPending } = useCreateMeetingForm();
 	const { step, direction, next, back, isFirstStep } =
 		useCreateMeetingFunnel();
 
-	const { mutate: createGathering, isPending } = useCreateGathering();
-
 	const handleBackward = () => {
 		if (isFirstStep) {
 			router.push("/");
@@ -40,40 +34,6 @@ export default function GatheringCreatePage() {
 		}
 	};
 
-	const handleComplete = (accessKey: string) => {
-		router.push(`/gathering/create/complete/${accessKey}`);
-	};
-
-	const onSubmit = (formData: CreateMeetingForm) => {
-		if (
-			!formData.peopleCount ||
-			!formData.region ||
-			!formData.scheduledDate ||
-			!formData.timeSlot
-		) {
-			return;
-		}
-
-		createGathering(
-			{
-				peopleCount: formData.peopleCount,
-				region: formData.region,
-				scheduledDate: formData.scheduledDate.replace(/\./g, "-"),
-				timeSlot: formData.timeSlot,
-			},
-			{
-				onSuccess: (response) => {
-					handleComplete(response.data.accessKey);
-				},
-				onError: (error) => {
-					if (isApiError(error)) {
-						toast.warning(error.message);
-					}
-				},
-			},
-		);
-	};
-
 	const renderContent = () => {
 		switch (step) {
 			case "people":
@@ -101,9 +61,9 @@ export default function GatheringCreatePage() {
 	};
 
 	return (
-		<FormProvider {...form}>
+		<FormProvider {...methods}>
 			<Layout.Root>
-				<form onSubmit={form.handleSubmit(onSubmit)}>
+				<form onSubmit={onSubmit}>
 					<Layout.Header>
 						{step !== "people" && (
 							<BackwardButton onClick={handleBackward} />

src/hooks/gathering/useCreateMeetingForm.ts

@@ -1,11 +1,23 @@
 "use client";
 
 import { useForm } from "react-hook-form";
-import type { CreateMeetingForm } from "#/types/gathering";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useRouter } from "next/navigation";
+import {
+	createMeetingFormSchema,
+	type CreateMeetingFormSchema,
+} from "#/schemas/gathering";
+import { useCreateGathering } from "#/hooks/apis/gathering";
+import { isApiError } from "#/utils/api";
+import { toast } from "#/utils/toast";
 
-export const useCreateMeetingForm = () => {
-	const form = useForm<CreateMeetingForm>({
+export function useCreateMeetingForm() {
+	const router = useRouter();
+	const { mutate: createGathering, isPending } = useCreateGathering();
+
+	const methods = useForm<CreateMeetingFormSchema>({
 		mode: "onChange",
+		resolver: zodResolver(createMeetingFormSchema),
 		defaultValues: {
 			peopleCount: null,
 			scheduledDate: "",
@@ -14,5 +26,41 @@ export const useCreateMeetingForm = () => {
 		},
 	});
 
-	return form;
-};
+	const handleSubmit = methods.handleSubmit((data) => {
+		if (
+			!data.peopleCount ||
+			!data.timeSlot ||
+			!data.scheduledDate ||
+			!data.region
+		) {
+			return;
+		}
+
+		createGathering(
+			{
+				peopleCount: data.peopleCount,
+				region: data.region,
+				scheduledDate: data.scheduledDate.replace(/\./g, "-"),
+				timeSlot: data.timeSlot,
+			},
+			{
+				onSuccess: (response) => {
+					router.push(
+						`/gathering/create/complete/${response.data.accessKey}`,
+					);
+				},
+				onError: (error) => {
+					if (isApiError(error)) {
+						toast.warning(error.message);
+					}
+				},
+			},
+		);
+	});
+
+	return {
+		methods,
+		onSubmit: handleSubmit,
+		isPending,
+	};
+}

src/pageComponents/gathering/create/DateStep.tsx

@@ -8,52 +8,26 @@ import { StepIndicator } from "#/components/stepIndicator";
 import { Button } from "#/components/button";
 import { InputField } from "#/components/inputField";
 import { Chip } from "#/components/chip";
-import {
-	formatDateInput,
-	isValidDateFormat,
-	validateDateInput,
-	type DateValidationError,
-} from "#/utils/gathering/create";
-import type { CreateMeetingForm, TimeSlot } from "#/types/gathering";
-
-const scheduledDateRules = {
-	validate: (value: string | undefined) =>
-		!isNil(value) && isValidDateFormat(value),
-};
-
-const timeSlotRules = {
-	validate: (value: TimeSlot | null) => !isNil(value),
-};
-
-const DATE_ERROR_MESSAGES: Record<
-	Exclude<DateValidationError, null>,
-	string
-> = {
-	INVALID_FORMAT: "날짜 형식을 확인해주세요 (예: 2026.01.31)",
-	INVALID_DATE: "존재하지 않는 날짜예요",
-	PAST_DATE: "이미 지난 날짜예요",
-};
+import { formatDateInput } from "#/utils/gathering/create";
+import type { CreateMeetingFormSchema } from "#/schemas/gathering";
+import type { TimeSlot } from "#/types/gathering";
 
 export const DateStepContent = () => {
-	const { control } = useFormContext<CreateMeetingForm>();
+	const { control } = useFormContext<CreateMeetingFormSchema>();
 
-	const { field: scheduledDateField } = useController({
+	const {
+		field: scheduledDateField,
+		fieldState: { error: scheduledDateError },
+	} = useController({
 		control,
 		name: "scheduledDate",
-		rules: scheduledDateRules,
 	});
 
 	const { field: timeSlotField } = useController({
 		control,
 		name: "timeSlot",
-		rules: timeSlotRules,
 	});
 
-	const dateError =
-		scheduledDateField.value?.length === 10
-			? validateDateInput(scheduledDateField.value)
-			: null;
-
 	const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		const formatted = formatDateInput(e.target.value);
 		scheduledDateField.onChange(formatted);
@@ -78,11 +52,7 @@ export const DateStepContent = () => {
 					<InputField
 						placeholder="날짜를 입력해주세요"
 						helperText="예) 2026.01.28"
-						errorText={
-							dateError
-								? DATE_ERROR_MESSAGES[dateError]
-								: undefined
-						}
+						errorText={scheduledDateError?.message}
 						inputMode="numeric"
 						showClearButton
 						value={scheduledDateField.value || ""}
@@ -120,13 +90,17 @@ interface DateStepFooterProps {
 }
 
 export const DateStepFooter = ({ onNext }: DateStepFooterProps) => {
-	const { control } = useFormContext<CreateMeetingForm>();
+	const {
+		control,
+		formState: { errors },
+	} = useFormContext<CreateMeetingFormSchema>();
 	const scheduledDate = useWatch({ control, name: "scheduledDate" });
 	const timeSlot = useWatch({ control, name: "timeSlot" });
 
 	const isValid =
 		!isNil(scheduledDate) &&
-		isValidDateFormat(scheduledDate) &&
+		scheduledDate.length > 0 &&
+		!errors.scheduledDate &&
 		!isNil(timeSlot);
 
 	return (

src/pageComponents/gathering/create/PeopleStep.tsx

@@ -7,18 +7,13 @@ import { Layout } from "#/components/layout";
 import { StepIndicator } from "#/components/stepIndicator";
 import { Button } from "#/components/button";
 import { PeopleCountGrid } from "./PeopleCountGrid";
-import type { CreateMeetingForm } from "#/types/gathering";
-
-const rules = {
-	validate: (value: number | null) => !isNil(value),
-};
+import type { CreateMeetingFormSchema } from "#/schemas/gathering";
 
 export const PeopleStepContent = () => {
-	const { control } = useFormContext<CreateMeetingForm>();
+	const { control } = useFormContext<CreateMeetingFormSchema>();
 	const { field } = useController({
 		control,
 		name: "peopleCount",
-		rules,
 	});
 
 	const handleChange = (count: number | null) => {
@@ -43,7 +38,7 @@ interface PeopleStepFooterProps {
 }
 
 export const PeopleStepFooter = ({ onNext }: PeopleStepFooterProps) => {
-	const { control } = useFormContext<CreateMeetingForm>();
+	const { control } = useFormContext<CreateMeetingFormSchema>();
 	const peopleCount = useWatch({ control, name: "peopleCount" });
 
 	const isValid = !isNil(peopleCount);

src/pageComponents/gathering/create/RegionChip.tsx

@@ -3,15 +3,16 @@
 import { useFormContext, useController } from "react-hook-form";
 
 import { Chip } from "#/components/chip";
-import type { CreateMeetingForm, Region } from "#/types/gathering";
+import type { CreateMeetingFormSchema } from "#/schemas/gathering";
+import type { Region } from "#/types/gathering";
 
 interface RegionChipProps {
 	value: Region;
 	label: string;
 }
 
 export const RegionChip = ({ value, label }: RegionChipProps) => {
-	const { control } = useFormContext<CreateMeetingForm>();
+	const { control } = useFormContext<CreateMeetingFormSchema>();
 	const { field } = useController({
 		name: "region",
 		control,

src/pageComponents/gathering/create/RegionStep.tsx

@@ -8,7 +8,7 @@ import { Button } from "#/components/button/Button";
 import { DotsLoader } from "#/components/dotsLoader";
 import { REGION_OPTIONS } from "#/constants/gathering/opinion";
 import { RegionChip } from "./RegionChip";
-import type { CreateMeetingForm } from "#/types/gathering";
+import type { CreateMeetingFormSchema } from "#/schemas/gathering";
 import { isNil } from "es-toolkit";
 
 export const RegionStepContent = () => {
@@ -34,7 +34,7 @@ interface RegionStepFooterProps {
 }
 
 export const RegionStepFooter = ({ isPending }: RegionStepFooterProps) => {
-	const { control } = useFormContext<CreateMeetingForm>();
+	const { control } = useFormContext<CreateMeetingFormSchema>();
 	const region = useWatch({ control, name: "region" });
 
 	const isValid = !isNil(region);

src/schemas/gathering/createMeetingForm.schema.ts

@@ -0,0 +1,44 @@
+import { z } from "zod";
+import type { TimeSlot, Region } from "#/types/gathering";
+import {
+	validateDateInput,
+	DATE_ERROR_MESSAGES,
+} from "#/utils/gathering/create";
+
+const timeSlotSchema = z.enum([
+	"LUNCH",
+	"DINNER",
+] satisfies readonly TimeSlot[]);
+
+const regionSchema = z.enum([
+	"HONGDAE",
+	"GANGNAM",
+	"GONGDEOK",
+] satisfies readonly Region[]);
+
+const scheduledDateSchema = z.string().check((ctx) => {
+	// 10자리(yyyy.MM.dd) 입력 완료 시에만 validation 수행
+	// 빈 문자열이거나 입력 중일 때는 에러 표시하지 않음
+	if (ctx.value.length < 10) {
+		return;
+	}
+
+	const error = validateDateInput(ctx.value);
+	if (error) {
+		ctx.issues.push({
+			code: "custom",
+			message: DATE_ERROR_MESSAGES[error],
+			input: ctx.value,
+			path: [],
+		});
+	}
+});
+
+export const createMeetingFormSchema = z.object({
+	peopleCount: z.number().nullable(),
+	scheduledDate: scheduledDateSchema,
+	timeSlot: timeSlotSchema.nullable(),
+	region: regionSchema.nullable(),
+});
+
+export type CreateMeetingFormSchema = z.infer<typeof createMeetingFormSchema>;

src/schemas/gathering/index.ts

@@ -4,3 +4,8 @@ export {
 	distanceRangeToKm,
 	type OpinionFormSchema,
 } from "./opinionForm.schema";
+
+export {
+	createMeetingFormSchema,
+	type CreateMeetingFormSchema,
+} from "./createMeetingForm.schema";

src/types/gathering/createMeetingForm.ts

@@ -1,11 +1 @@
-import { Region } from "./region";
-import { TimeSlot } from "./timeSlot";
-
 export type CreateMeetingStep = "people" | "date" | "region";
-
-export interface CreateMeetingForm {
-	peopleCount: number | null;
-	scheduledDate: string;
-	timeSlot: TimeSlot | null;
-	region: Region | null;
-}

src/types/gathering/index.ts

@@ -1,4 +1,4 @@
-export type { CreateMeetingStep, CreateMeetingForm } from "./createMeetingForm";
+export type { CreateMeetingStep } from "./createMeetingForm";
 export type { OpinionForm, OpinionStep } from "./createOpinionForm";
 export type { DistanceRange } from "./distance";
 export type { FoodCategory } from "./foodCategory";