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

[youngminss]

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

모임 생성 퍼널의 form validation을 zod 스키마 기반으로 변경하여 일관된 validation 관리를 적용합니다.

📑 작업 상세 내역

• createMeetingForm.schema.ts 생성하여 zod 스키마 정의
• useCreateMeetingForm 훅에 zodResolver 적용 및 submit 로직 통합
• Step 컴포넌트에서 rules 객체 제거
• page.tsx에서 submit 로직 제거하여 간소화
• DATE_ERROR_MESSAGES를 유틸로 추출하여 중복 제거
• DateStep에서 formState.errors 기반으로 에러 표시 및 버튼 활성화 판단

🙏 리뷰 요청 사항

• useOpinionForm과 동일한 패턴으로 구현했습니다.
• 기존 toggle 버그 수정(nullable 사용)을 유지하면서 zod 기반으로 변경했습니다.

📃 참고 자료

• 기반 브랜치: fix/gathering-create-form-field-state (toggle 버그 수정)

🖼️ 작업 결과물

• 프로젝트 문서

[gemini-code-assist]

Summary of Changes

Hello @youngminss, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 모임 생성 퍼널의 폼 유효성 검사 시스템을 Zod 기반으로 재구축하여 코드의 일관성과 유지보수성을 크게 향상시키는 것을 목표로 합니다. 기존에 각 컴포넌트에 분산되어 있던 유효성 검사 로직과 폼 제출 처리를 useCreateMeetingForm 훅으로 통합하고, Zod 스키마를 통해 명확하고 중앙화된 유효성 검사 규칙을 적용함으로써, 개발자가 폼 상태를 더 쉽게 관리하고 예측할 수 있도록 개선했습니다.

Highlights

• Zod 기반 폼 유효성 검사 도입: 모임 생성 폼의 유효성 검사를 Zod 스키마 기반으로 전면 리팩토링하여, 일관되고 강력한 유효성 검사 로직을 적용했습니다.
• 폼 제출 로직 통합: useCreateMeetingForm 훅에 zodResolver를 적용하고, 폼 제출(submit) 로직 및 API 호출을 해당 훅 내부로 통합하여 page.tsx의 코드를 간소화했습니다.
• 불필요한 rules 객체 제거: 각 스텝 컴포넌트(DateStep, PeopleStep, RegionStep)에서 react-hook-form의 useController에 사용되던 rules 객체를 제거하고, Zod 스키마를 통해 유효성 검사를 중앙 집중화했습니다.
• 에러 메시지 및 버튼 활성화 로직 개선: DateStep에서 formState.errors를 기반으로 에러 메시지를 표시하고 버튼 활성화 여부를 판단하도록 변경하여, Zod 스키마와 연동된 정확한 유효성 상태를 반영합니다.
• 타입 정의 및 유틸리티 분리: 기존 CreateMeetingForm 인터페이스를 제거하고 Zod 스키마로부터 타입을 추론하도록 변경했으며, DATE_ERROR_MESSAGES를 유틸리티 파일로 추출하여 재사용성을 높였습니다.
• nullable 값 처리 일관성 확보: 선택되지 않은 값(예: 인원 수, 시간대, 지역)에 대해 undefined 대신 null을 사용하도록 변경하여 Zod 스키마의 nullable() 정의와 일관성을 맞췄습니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• app/gathering/create/page.tsx
  • useCreateGathering 훅 및 관련 임포트 제거
  • 폼 제출 로직(onSubmit)을 useCreateMeetingForm 훅으로 이동하여 page.tsx에서 제거
  • useCreateMeetingForm에서 methods, onSubmit, isPending을 구조 분해 할당하여 사용
  • FormProvider에 form 대신 methods를 전달하도록 변경
  • form.handleSubmit(onSubmit) 대신 onSubmit을 직접 form 요소에 전달하도록 변경
• src/hooks/gathering/useCreateMeetingForm.ts
  • zodResolver 임포트 및 적용
  • next/navigation의 useRouter 임포트
  • createMeetingFormSchema 및 CreateMeetingFormSchema 임포트
  • useCreateGathering 훅 임포트 및 isApiError, toast 유틸리티 임포트
  • 폼의 defaultValues를 Zod 스키마에 맞춰 null을 포함하도록 정의
  • 폼 제출 로직(handleSubmit)을 훅 내부로 통합하여 API 호출 및 라우터 이동 처리
  • 훅이 methods, onSubmit, isPending을 반환하도록 변경
• src/pageComponents/gathering/create/DateStep.tsx
  • 기존 scheduledDateRules, timeSlotRules 및 DATE_ERROR_MESSAGES 상수 제거
  • CreateMeetingForm 타입 대신 CreateMeetingFormSchema 타입 사용
  • useController에서 rules 속성 제거
  • 날짜 입력 필드의 errorText를 scheduledDateError?.message로 변경하여 Zod 에러 메시지 표시
  • handleTimeSlotChange에서 선택 해제 시 undefined 대신 null을 할당하도록 변경
  • DateStepFooter에서 isValid 로직을 formState.errors와 useWatch를 사용하여 Zod 기반으로 변경
• src/pageComponents/gathering/create/PeopleCountGrid.tsx
  • PeopleCountGridProps의 value 및 onChange 타입에서 undefined를 null로 변경
  • 인원 수 선택 해제 시 undefined 대신 null을 onChange에 전달하도록 변경
• src/pageComponents/gathering/create/PeopleStep.tsx
  • 기존 rules 상수 제거
  • CreateMeetingForm 타입 대신 CreateMeetingFormSchema 타입 사용
  • useController에서 rules 속성 제거
  • handleChange 함수의 count 파라미터 타입을 number | undefined에서 number | null로 변경
  • PeopleStepFooter에서 useWatch를 사용하여 peopleCount 값을 가져오고 isValid 로직을 !isNil(peopleCount)로 변경
• src/pageComponents/gathering/create/RegionChip.tsx
  • CreateMeetingForm 타입 대신 CreateMeetingFormSchema 타입 사용
  • 칩 클릭 시 field.value === value ? null : value 로직을 통해 선택/해제 시 null을 할당하도록 변경
• src/pageComponents/gathering/create/RegionStep.tsx
  • CreateMeetingForm 타입 대신 CreateMeetingFormSchema 타입 사용
  • RegionStepFooter에서 useController 대신 useWatch를 사용하여 region 값을 가져오고 isValid 로직을 !isNil(region)으로 변경
• src/schemas/gathering/createMeetingForm.schema.ts
  • 새 파일 추가: createMeetingFormSchema를 Zod를 사용하여 정의
  • TimeSlot과 Region에 대한 Zod enum 스키마 정의
  • scheduledDateSchema에 10자리 입력 완료 시에만 유효성 검사를 수행하는 커스텀 check 로직 추가
  • peopleCount, scheduledDate, timeSlot, region 필드를 포함하는 메인 스키마 정의
  • CreateMeetingFormSchema 타입을 Zod 스키마로부터 추론하여 export
• src/schemas/gathering/index.ts
  • createMeetingFormSchema 및 CreateMeetingFormSchema를 export 하도록 추가
• src/types/gathering/createMeetingForm.ts
  • 기존 CreateMeetingForm 인터페이스 제거
• src/types/gathering/index.ts
  • CreateMeetingForm 타입 export 제거
• src/utils/gathering/create/dateStep.ts
  • DATE_ERROR_MESSAGES 상수를 이 파일로 이동
• src/utils/gathering/create/index.ts
  • DATE_ERROR_MESSAGES를 export 하도록 추가

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

zod 스키마를 사용한 리팩토링에서 몇 가지 개선점을 발견했습니다. useCreateMeetingForm 훅의 제출 로직과 createMeetingForm.schema.ts 파일의 zod API 사용 방식에 대한 피드백을 확인해주세요.

[gemini-code-assist]

Zod의 .check() 메서드는 현재 deprecated 상태이며 Zod v4에서 제거될 예정입니다. 대신 .refine()을 사용해야 합니다. 현재 구현은 check의 콜백 함수에서 boolean 값을 반환하지 않고 있어 예기치 않은 동작을 유발할 수 있습니다. .refine()으로 변경하여 유효성 검사 로직을 명확하고 안전하게 수정하는 것을 권장합니다.

Suggested change

	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: [],
	});
	}
	});
	const scheduledDateSchema = z.string().refine((value, ctx) => {
	// 10자리(yyyy.MM.dd) 입력 완료 시에만 validation 수행
	// 빈 문자열이거나 입력 중일 때는 에러 표시하지 않음
	if (value.length < 10) {
	return true;
	}
	const error = validateDateInput(value);
	if (error) {
	ctx.addIssue({
	code: "custom",
	message: DATE_ERROR_MESSAGES[error],
	});
	return false;
	}
	return true;
	});

References

1. Zod의 .check() 메서드는 deprecated 상태이며, .refine() 사용이 권장됩니다. 현재 코드는 deprecated된 API를 사용하고 있으며, 콜백 함수의 반환 값이 없어 버그의 소지가 있습니다. ^(link)

[gemini-code-assist]

handleSubmit 콜백 내에서 수동으로 필드의 존재 여부를 확인하는 대신, 제출 전용의 더 엄격한 Zod 스키마를 정의하여 데이터 유효성을 검증하는 것이 좋습니다. 이 접근 방식은 유효성 검사 로직을 Zod 스키마로 중앙화하여 코드의 일관성과 예측 가능성을 높입니다. 현재 if 문은 타입 가드 역할을 하지만, safeParse와 함께 별도의 제출 스키마를 사용하면 이 로직을 더 선언적으로 만들 수 있습니다.

const handleSubmit = methods.handleSubmit((data) => {
	const submissionSchema = createMeetingFormSchema.required({
		peopleCount: true,
		timeSlot: true,
		region: true,
	}).refine((d) => d.scheduledDate.length > 0, {
		path: ["scheduledDate"],
		message: "날짜를 입력해주세요.",
	});

	const result = submissionSchema.safeParse(data);

	if (!result.success) {
		// 일반적으로 UI의 버튼 비활성화로 인해 호출되지 않지만, 안전장치로 남겨둡니다.
		return;
	}

	const { peopleCount, region, scheduledDate, timeSlot } = result.data;

	createGathering(
		{
			peopleCount,
			region,
			scheduledDate: scheduledDate.replace(/\./g, "-"),
			timeSlot,
		},
		{
			onSuccess: (response) => {
				router.push(
					`/gathering/create/complete/${response.data.accessKey}`,
				);
			},
			onError: (error) => {
				if (isApiError(error)) {
					toast.warning(error.message);
				}
			},
		},
	);
});

[RookieAND]

👍 반영해줘서 고마워!