fix: 모임 생성 폼 필드명 변경 (meetingDate → scheduledDate, location → region) (#35)

* fix: meetingDate 필드명을 scheduledDate로 변경

- CreateMeetingForm.meetingDate → scheduledDate
- MeetingContext.meetingDate → scheduledDate
- 관련 컴포넌트 및 훅 업데이트

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

* fix: location 필드명을 region으로 변경

- CreateMeetingForm.location → region
- Location 타입 → Region 타입
- CreateMeetingStep "location" → "region"
- useLocationStepValidation → useRegionStepValidation
- LocationStep 컴포넌트 → RegionStep 컴포넌트
- 파일명 LocationStep.tsx → RegionStep.tsx

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

* fix: RegionStep 핸들러 파라미터명 개선

- handleRegionChange 파라미터 loc → selectedRegion

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

* chore: prettier 포맷팅 적용

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

---------

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

Author: youngminss

app/gathering/[gatheringId]/opinion/page.tsx

@@ -33,7 +33,7 @@ export default function OpinionPage() {
 	const meetingContext = useMemo<MeetingContext>(
 		() => ({
 			gatheringId,
-			meetingDate: MOCK_MEETING_DATA.DATE,
+			scheduledDate: MOCK_MEETING_DATA.DATE,
 			stationName: MOCK_MEETING_DATA.STATION_NAME,
 		}),
 		[gatheringId],

app/gathering/create/page.tsx

@@ -8,7 +8,7 @@ import { BackwardButton } from "#/components/backwardButton/BackwardButton";
 import {
 	PeopleStep,
 	DateStep,
-	LocationStep,
+	RegionStep,
 } from "#/pageComponents/gathering/create";
 import {
 	useCreateMeetingForm,
@@ -38,8 +38,8 @@ export default function GatheringCreatePage() {
 				<Layout.Content>
 					{step === "people" && <PeopleStep onNext={next} />}
 					{step === "date" && <DateStep onNext={next} />}
-					{step === "location" && (
-						<LocationStep
+					{step === "region" && (
+						<RegionStep
 							onComplete={() => {
 								router.push("/gathering/create/complete");
 							}}

src/hooks/gathering/index.ts

@@ -2,7 +2,7 @@ export {
 	useCreateMeetingForm,
 	usePeopleStepValidation,
 	useDateStepValidation,
-	useLocationStepValidation,
+	useRegionStepValidation,
 } from "./useCreateMeetingForm";
 
 export { useCreateMeetingFunnel } from "./useCreateMeetingFunnel";

src/hooks/gathering/useCreateMeetingForm.ts

@@ -23,21 +23,21 @@ export const usePeopleStepValidation = (
 export const useDateStepValidation = (
 	control: ReturnType<typeof useForm<CreateMeetingForm>>["control"],
 ) => {
-	const [meetingDate, timeSlot] = useWatch({
+	const [scheduledDate, timeSlot] = useWatch({
 		control,
-		name: ["meetingDate", "timeSlot"],
+		name: ["scheduledDate", "timeSlot"],
 	});
 
 	return (
-		!isNil(meetingDate) &&
+		!isNil(scheduledDate) &&
 		!isNil(timeSlot) &&
-		isValidDateFormat(meetingDate)
+		isValidDateFormat(scheduledDate)
 	);
 };
 
-export const useLocationStepValidation = (
+export const useRegionStepValidation = (
 	control: ReturnType<typeof useForm<CreateMeetingForm>>["control"],
 ) => {
-	const location = useWatch({ control, name: "location" });
-	return !isNil(location);
+	const region = useWatch({ control, name: "region" });
+	return !isNil(region);
 };

src/hooks/gathering/useCreateMeetingFunnel.ts

@@ -3,7 +3,7 @@
 import { useState, useCallback } from "react";
 import type { CreateMeetingStep } from "#/types/gathering";
 
-const STEP_ORDER: CreateMeetingStep[] = ["people", "date", "location"];
+const STEP_ORDER: CreateMeetingStep[] = ["people", "date", "region"];
 
 export function useCreateMeetingFunnel() {
 	const [step, setStep] = useState<CreateMeetingStep>("people");

src/pageComponents/gathering/create/DateStep.tsx

@@ -19,19 +19,19 @@ export const DateStep = ({ onNext }: DateStepProps) => {
 	const { control, setValue } = useFormContext<CreateMeetingForm>();
 	const isValid = useDateStepValidation(control);
 
-	const meetingDate = useWatch({ control, name: "meetingDate" });
+	const scheduledDate = useWatch({ control, name: "scheduledDate" });
 	const timeSlot = useWatch({ control, name: "timeSlot" });
 
 	const hasDateError =
-		meetingDate?.length === 10 && !isValidDateFormat(meetingDate);
+		scheduledDate?.length === 10 && !isValidDateFormat(scheduledDate);
 
 	const handleDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
 		const formatted = formatDateInput(e.target.value);
-		setValue("meetingDate", formatted, { shouldValidate: true });
+		setValue("scheduledDate", formatted, { shouldValidate: true });
 	};
 
 	const handleDateClear = () => {
-		setValue("meetingDate", "", { shouldValidate: true });
+		setValue("scheduledDate", "", { shouldValidate: true });
 	};
 
 	const handleTimeSlotChange = (slot: TimeSlot) => {
@@ -58,7 +58,7 @@ export const DateStep = ({ onNext }: DateStepProps) => {
 						}
 						inputMode="numeric"
 						showClearButton
-						value={meetingDate || ""}
+						value={scheduledDate || ""}
 						onChange={handleDateChange}
 						onClear={handleDateClear}
 					/>

…onents/gathering/create/LocationStep.tsx …mponents/gathering/create/RegionStep.tsxsrc/pageComponents/gathering/create/LocationStep.tsx renamed to src/pageComponents/gathering/create/RegionStep.tsx src/pageComponents/gathering/create/LocationStep.tsx renamed to src/pageComponents/gathering/create/RegionStep.tsx

@@ -6,28 +6,32 @@ import { Layout } from "#/components/layout";
 import { StepIndicator } from "#/components/stepIndicator/StepIndicator";
 import { Button } from "#/components/button/Button";
 import { Chip } from "#/components/chip";
-import { useLocationStepValidation } from "#/hooks/gathering";
-import type { CreateMeetingForm, Location } from "#/types/gathering";
+import { useRegionStepValidation } from "#/hooks/gathering";
+import type { CreateMeetingForm, Region } from "#/types/gathering";
 
-interface LocationStepProps {
+interface RegionStepProps {
 	onComplete: () => void;
 }
 
-const LOCATION_OPTIONS = [
+const REGION_OPTIONS = [
 	{ id: "HONGDAE" as const, label: "홍대입구역" },
 	{ id: "GANGNAM" as const, label: "강남역" },
 ];
 
-export const LocationStep = ({ onComplete }: LocationStepProps) => {
+export const RegionStep = ({ onComplete }: RegionStepProps) => {
 	const { control, setValue } = useFormContext<CreateMeetingForm>();
-	const isValid = useLocationStepValidation(control);
+	const isValid = useRegionStepValidation(control);
 
-	const location = useWatch({ control, name: "location" });
+	const region = useWatch({ control, name: "region" });
 
-	const handleLocationChange = (loc: Location) => {
-		setValue("location", loc === location ? undefined : loc, {
-			shouldValidate: true,
-		});
+	const handleRegionChange = (selectedRegion: Region) => {
+		setValue(
+			"region",
+			selectedRegion === region ? undefined : selectedRegion,
+			{
+				shouldValidate: true,
+			},
+		);
 	};
 
 	return (
@@ -38,11 +42,11 @@ export const LocationStep = ({ onComplete }: LocationStepProps) => {
 					장소를 선택해 주세요
 				</h1>
 				<div className="ygi:flex ygi:gap-3">
-					{LOCATION_OPTIONS.map(({ id, label }) => (
+					{REGION_OPTIONS.map(({ id, label }) => (
 						<Chip
 							key={id}
-							selected={location === id}
-							onClick={() => handleLocationChange(id)}
+							selected={region === id}
+							onClick={() => handleRegionChange(id)}
 						>
 							{label}
 						</Chip>

src/pageComponents/gathering/create/index.ts

@@ -1,4 +1,4 @@
 export { PeopleCountGrid } from "./PeopleCountGrid";
 export { PeopleStep } from "./PeopleStep";
 export { DateStep } from "./DateStep";
-export { LocationStep } from "./LocationStep";
+export { RegionStep } from "./RegionStep";

src/pageComponents/gathering/opinion/IntroStep.tsx

@@ -15,7 +15,7 @@ export const IntroStep = ({ meetingContext }: IntroStepProps) => {
 				</h1>
 				<div className="ygi:inline-flex ygi:w-fit ygi:items-center ygi:justify-center ygi:rounded-full ygi:bg-button-secondary ygi:px-4 ygi:py-2">
 					<span className="ygi:body-16-bd ygi:text-text-inverse">
-						{meetingContext.meetingDate}
+						{meetingContext.scheduledDate}
 					</span>
 				</div>
 			</div>

src/types/gathering/index.ts

@@ -1,14 +1,14 @@
 export interface CreateMeetingForm {
 	peopleCount?: number;
-	meetingDate: string;
+	scheduledDate: string;
 	timeSlot?: "LUNCH" | "DINNER";
-	location?: "HONGDAE" | "GANGNAM";
+	region?: "HONGDAE" | "GANGNAM";
 }
 
 export type TimeSlot = CreateMeetingForm["timeSlot"];
-export type Location = CreateMeetingForm["location"];
+export type Region = CreateMeetingForm["region"];
 
-export type CreateMeetingStep = "people" | "date" | "location";
+export type CreateMeetingStep = "people" | "date" | "region";
 
 export type DistanceRange = "RANGE_500M" | "RANGE_1KM" | "ANY";
 
@@ -36,7 +36,7 @@ export type OpinionStep = "intro" | "distance" | "dislike" | "preference";
 
 export interface MeetingContext {
 	gatheringId: string;
-	meetingDate: string;
+	scheduledDate: string;
 	stationName: string;
 	totalParticipants?: number;
 	submittedCount?: number;