refactor: 모임 생성 폼 리팩토링 (PR 리뷰 대응)

[youngminss]

🎯 PR 제목

refactor: 모임 생성 폼 리팩토링 (PR 리뷰 대응)

📑 작업 상세 내역

PR #38, #42에서 @RookieAND 가 남긴 리뷰 코멘트 반영

PR #38 반영 내용

코멘트	반영 내용
react-hook-form에게 제출 액션 위임	page.tsx에 <form onSubmit={handleSubmit(onSubmit)}> 추가, API 호출 로직을 page 레벨로 이동
useController 활용	setValue + useWatch 조합을 useController로 변경
validation 커스텀 훅 제거	usePeopleStepValidation, useDateStepValidation, useRegionStepValidation 제거하고 field.value로 직접 유효성 검사

PR #42 반영 내용

코멘트	반영 내용
Tanstack Query v5의 mutationOptions 함수 사용	mutationOptions() 함수로 mutation option 생성
Query/Mutation options 파일 분리	queryOptions.ts, mutationOptions.ts로 분리

반영하지 않은 코멘트

PR #38 - CreateMeetingForm 필드 required 변경

각 Step에서 toggle 기능(선택 해제)이 있어 폼 작성 중 값이 undefined가 될 수 있으므로 optional 유지

• PeopleStep: onChange(isSelected ? undefined : count)
• DateStep: onChange(slot === value ? undefined : slot)
• RegionStep: onChange(region === value ? undefined : region)

추가 수정사항

• Chip 컴포넌트에 type="button" 기본값 추가 (form 내에서 의도치 않은 submit 방지)

🙏 리뷰 요청 사항

• useController 적용 방식 확인
• form submit 위임 구조 확인

📃 참고 자료

• PR feat: 모임장 모임 생성 api 연동 (Tanstack-Query 기반 요청 제외) #38
• PR feat: 모임장 모임 생성 api Tanstack-Query 기반 요청 적용 #42

🖼️ 작업 결과물

테스트 완료 항목

• Step 1: 인원 선택 → "다음" 버튼 활성화 확인
• Step 2: 날짜 + 시간대 선택 → "다음" 버튼 활성화 확인
• Step 3: 지역 선택 → "완료" 버튼 활성화 확인
• "완료" 클릭 → API 호출 + 로딩 상태 확인
• API 성공 → complete 페이지 이동 확인
• 각 Step 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은 모임 생성 폼의 리팩토링을 통해 코드의 유지보수성과 견고성을 향상시키는 데 중점을 둡니다. 폼 제출 로직을 중앙화하고, react-hook-form의 useController를 활용하여 유효성 검사를 개선하며, React Query 통합을 더욱 체계적으로 분리했습니다. 또한, 버튼의 기본 동작을 명확히 하여 사용자 경험을 안정화합니다.

Highlights

• 폼 제출 로직 중앙화: 모임 생성 폼의 최종 제출 로직이 RegionStep.tsx에서 app/gathering/create/page.tsx로 이동되어, 폼 제출과 관련된 모든 처리가 단일 페이지 컴포넌트에서 관리됩니다.
• 폼 유효성 검사 개선: 기존의 개별 스텝 유효성 검사 훅(usePeopleStepValidation, useDateStepValidation, useRegionStepValidation)이 제거되고, react-hook-form의 useController와 rules를 사용하여 각 입력 필드에 대한 유효성 검사가 직접 구현되었습니다. 이는 폼 유효성 검사를 더욱 명확하고 컴포넌트 내부에서 관리할 수 있도록 합니다.
• React Query 통합 개선: gatheringOptions 파일이 gatheringQueryOptions.ts와 gatheringMutationOptions.ts로 분리되어 쿼리와 뮤테이션 옵션이 명확하게 구분되었습니다. useCreateGathering 훅은 이제 gatheringMutationOptions를 사용합니다.
• 버튼 타입 명시: Chip 컴포넌트와 DateStepFooter, PeopleStepFooter 내의 Button 컴포넌트에 type="button"이 명시적으로 추가되어, 의도치 않은 폼 제출을 방지합니다.
• 로딩 상태 처리: 모임 생성 API 호출 시 useCreateGathering 훅의 isPending 상태가 RegionStepFooter로 전달되어, API 호출 중에는 제출 버튼이 비활성화되고 로딩 인디케이터가 표시됩니다.

🧠 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.

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

전반적으로 모임 생성 폼의 로직을 개선하는 좋은 리팩토링입니다. 특히 API 호출 로직을 페이지 최상단으로 옮기고, 각 스텝 컴포넌트의 책임을 명확히 분리한 점이 인상적입니다. react-hook-form의 useController를 도입하여 상태 관리를 개선하려는 시도도 좋습니다. 다만, 몇몇 컴포넌트에서 useController가 중복으로 사용되어 잠재적인 문제를 일으킬 수 있는 부분이 발견되었습니다. 각 스텝의 Footer 컴포넌트에서 useController 대신 useWatch를 사용하도록 수정하는 것을 제안합니다. 자세한 내용은 각 파일에 남긴 리뷰 코멘트를 참고해주세요.

[gemini-code-assist]

useController는 동일한 필드에 대해 여러 번 호출하면 안 됩니다. 현재 DateStepContent와 DateStepFooter에서 scheduledDate와 timeSlot 필드에 대해 각각 useController를 사용하고 있어, react-hook-form의 예기치 않은 동작을 유발할 수 있습니다. Footer에서는 useController 대신 useWatch를 사용하여 필드 값을 구독하고 유효성을 검사하는 것이 올바른 방법입니다. useWatch를 사용하려면 react-hook-form에서 import해야 합니다.

	const [scheduledDate, timeSlot] = useWatch({
		control,
		name: ["scheduledDate", "timeSlot"],
	});

	const isValid =
		!isNil(scheduledDate) &&
		isValidDateFormat(scheduledDate) &&
		!isNil(timeSlot);

[gemini-code-assist]

useController는 동일한 필드에 대해 여러 번 호출하면 안 됩니다. 현재 PeopleStepContent와 PeopleStepFooter에서 peopleCount 필드에 대해 각각 useController를 사용하고 있어, react-hook-form의 예기치 않은 동작을 유발할 수 있습니다. Footer에서는 useController 대신 useWatch를 사용하여 필드 값을 구독하고 유효성을 검사하는 것이 올바른 방법입니다. useWatch를 사용하려면 react-hook-form에서 import해야 합니다.

Suggested change

	const { field } = useController({
	control,
	name: "peopleCount",
	rules,
	});
	const isValid = !isNil(field.value);
	const peopleCount = useWatch({
	control,
	name: "peopleCount",
	});
	const isValid = !isNil(peopleCount);

[youngminss]

@RookieAND 흠 이 친구 의견은 우리가 생각하는거랑 반대로 이야기하네 흥미롭네

[gemini-code-assist]

useController는 동일한 필드에 대해 여러 번 호출하면 안 됩니다. 현재 RegionStepContent와 RegionStepFooter에서 region 필드에 대해 각각 useController를 사용하고 있어, react-hook-form의 예기치 않은 동작을 유발할 수 있습니다. Footer에서는 useController 대신 useWatch를 사용하여 필드 값을 구독하고 유효성을 검사하는 것이 올바른 방법입니다. useWatch를 사용하려면 react-hook-form에서 import해야 합니다.

Suggested change

	const { control } = useFormContext<CreateMeetingForm>();
	const handleComplete = () => {
	const formData = getValues();
	const { field } = useController({
	control,
	name: "region",
	rules,
	});
	const region = useWatch({
	control,
	name: "region",
	});
	const isValid = !isNil(region);

[youngminss]

@RookieAND 위와 동일