feat: 의견 수렴 페이지 전체 API 연동 및 서버 Prefetch 적용

app/gathering/[accessKey]/opinion/OpinionView.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { useParams, useRouter } from "next/navigation";
+
+import {
+	IntroStep,
+	DistanceStepContent,
+	DistanceStepFooter,
+	DislikeStepContent,
+	DislikeStepFooter,
+	PreferenceStepContent,
+	PreferenceStepFooter,
+} from "#/pageComponents/gathering/opinion";
+import { StepTransition } from "#/components/stepTransition";
+import { useOpinionForm, useOpinionFunnel } from "#/hooks/gathering";
+import { Button } from "#/components/button";
+import { Layout } from "#/components/layout";
+import { FormProvider } from "react-hook-form";
+import { BackwardButton } from "#/components/backwardButton";
+import { Toaster } from "#/components/toast";
+import { useGetGathering } from "#/hooks/apis/gathering";
+
+export default function OpinionView() {
+	const { accessKey } = useParams<{ accessKey: string }>();
+	const router = useRouter();
+
+	const { methods, onSubmit } = useOpinionForm();
+	const { step, direction, next, back, isFirstStep } = useOpinionFunnel();
+	const { data: gathering } = useGetGathering(accessKey);
+
+	const handleBackward = () => {
+		if (isFirstStep) {
+			router.push(`/gathering/${accessKey}`);
+		} else {
+			back();
+		}
+	};
+
+	const handleComplete = () => {
+		onSubmit();
+	};
+
+	if (step === "intro") {
+		return (
+			<>
+				<Layout.Header background="gray">
+					<div className="ygi:h-full ygi:w-full" />
+				</Layout.Header>
+				<Layout.Content background="gray">
+					<IntroStep scheduledDate={gathering.scheduledDate} />
+				</Layout.Content>
+				<Layout.Footer background="gray">
+					<div className="ygi:py-auto ygi:px-6">
+						<Button variant="primary" width="full" onClick={next}>
+							내 취향 입력
+						</Button>
+					</div>
+				</Layout.Footer>
+			</>
+		);
+	}
+
+	const renderContent = () => {
+		switch (step) {
+			case "distance":
+				return <DistanceStepContent region={gathering.region} />;
+			case "dislike":
+				return <DislikeStepContent />;
+			case "preference":
+				return <PreferenceStepContent />;
+			default:
+				return null;
+		}
+	};
+
+	const renderFooter = () => {
+		switch (step) {
+			case "distance":
+				return <DistanceStepFooter onNext={next} />;
+			case "dislike":
+				return <DislikeStepFooter onNext={next} />;
+			case "preference":
+				return <PreferenceStepFooter onSubmit={handleComplete} />;
+			default:
+				return null;
+		}
+	};
+
+	return (
+		<FormProvider {...methods}>
+			<Layout.Header>
+				<BackwardButton onClick={handleBackward} />
+			</Layout.Header>
+			<Layout.Content>
+				<StepTransition step={step} direction={direction}>
+					{renderContent()}
+				</StepTransition>
+			</Layout.Content>
+			{renderFooter()}
+			<Toaster offset={{ bottom: 96 }} mobileOffset={{ bottom: 96 }} />
+		</FormProvider>
+	);
+}

app/gathering/[accessKey]/opinion/complete/CompleteView.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { Button } from "#/components/button";
+import { Layout } from "#/components/layout";
+import {
+	CompleteView,
+	SubmissionBottomSheet,
+} from "#/pageComponents/gathering/opinion";
+import { useParams, redirect } from "next/navigation";
+import { useGetGatheringCapacity } from "#/hooks/apis/gathering";
+
+export default function CompleteViewContainer() {
+	const { accessKey } = useParams<{ accessKey: string }>();
+	const { data: capacity } = useGetGatheringCapacity(accessKey);
+
+	const isPending = capacity.currentCount < capacity.maxCount;
+
+	if (isPending) {
+		redirect(`/gathering/${accessKey}/opinion/pending`);
+	}
+
+	const handleRedirectResult = () => {
+		redirect(`/gathering/${accessKey}/opinion/result`);
+	};
+
+	return (
+		<Layout.Root>
+			<CompleteView />
+
+			<SubmissionBottomSheet
+				maxCount={capacity.maxCount}
+				currentCount={capacity.currentCount}
+			/>
+
+			<Layout.Footer>
+				<div className="ygi:px-6">
+					<Button
+						variant="primary"
+						width="full"
+						onClick={handleRedirectResult}
+					>
+						추천 결과 보기
+					</Button>
+				</div>
+			</Layout.Footer>
+		</Layout.Root>
+	);
+}

app/gathering/[accessKey]/opinion/complete/page.tsx

@@ -1,51 +1,33 @@
-"use client";
-
-import { Button } from "#/components/button";
-import { Layout } from "#/components/layout";
 import {
-	CompleteView,
-	SubmissionBottomSheet,
-} from "#/pageComponents/gathering/opinion";
-import { useParams } from "next/navigation";
-import { redirect } from "next/navigation";
-
-export default function OpinionCompletePage() {
-	const { accessKey } = useParams<{ accessKey: string }>();
-
-	// TODO: API 연동 시 실제 데이터로 교체
-	const totalCount = 5;
-	const submittedCount = 5;
-
-	const isPending = submittedCount < totalCount;
+	HydrationBoundary,
+	QueryClient,
+	dehydrate,
+} from "@tanstack/react-query";
+
+import { gatheringOptions } from "#/apis/gathering";
+import CompleteView from "./CompleteView";
+
+interface OpinionCompletePageProps {
+	params: Promise<{
+		accessKey: string;
+	}>;
+}
 
-	if (isPending) {
-		redirect(`/gathering/${accessKey}/opinion/pending`);
-	}
+/**
+ * 의견 수렴 완료 페이지 (서버 컴포넌트)
+ * - gathering capacity 데이터를 서버에서 prefetch하여 무한 렌더링 방지
+ */
+export default async function OpinionCompletePage({
+	params,
+}: OpinionCompletePageProps) {
+	const { accessKey } = await params;
+	const queryClient = new QueryClient();
 
-	const handleRedirectResult = () => {
-		redirect(`/gathering/${accessKey}/opinion/result`);
-	};
+	await queryClient.prefetchQuery(gatheringOptions.capacity(accessKey));
 
 	return (
-		<Layout.Root>
+		<HydrationBoundary state={dehydrate(queryClient)}>
 			<CompleteView />
-
-			<SubmissionBottomSheet
-				totalCount={totalCount}
-				submittedCount={submittedCount}
-			/>
-
-			<Layout.Footer>
-				<div className="ygi:px-6">
-					<Button
-						variant="primary"
-						width="full"
-						onClick={handleRedirectResult}
-					>
-						추천 결과 보기
-					</Button>
-				</div>
-			</Layout.Footer>
-		</Layout.Root>
+		</HydrationBoundary>
 	);
 }

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

@@ -1,118 +1,32 @@
-"use client";
-
-import { useParams, useRouter } from "next/navigation";
-
 import {
-	IntroStep,
-	DistanceStepContent,
-	DistanceStepFooter,
-	DislikeStepContent,
-	DislikeStepFooter,
-	PreferenceStepContent,
-	PreferenceStepFooter,
-} from "#/pageComponents/gathering/opinion";
-import { StepTransition } from "#/components/stepTransition";
-import { useOpinionForm, useOpinionFunnel } from "#/hooks/gathering";
-import { Button } from "#/components/button";
-import { Layout } from "#/components/layout";
-import { FormProvider } from "react-hook-form";
-import { BackwardButton } from "#/components/backwardButton";
-import { Toaster } from "#/components/toast";
-import { useMemo } from "react";
-import { MeetingContext } from "#/types/gathering";
-import { MOCK_MEETING_DATA } from "#/constants/gathering/opinion/meeting";
-
-export default function OpinionPage() {
-	const { accessKey } = useParams<{ accessKey: string }>();
-	const router = useRouter();
-
-	const form = useOpinionForm();
-	const { step, direction, next, back, isFirstStep } = useOpinionFunnel();
-
-	const meetingContext = useMemo<MeetingContext>(
-		() => ({
-			accessKey,
-			scheduledDate: MOCK_MEETING_DATA.DATE,
-			stationName: MOCK_MEETING_DATA.STATION_NAME,
-		}),
-		[accessKey],
-	);
-
-	const handleBackward = () => {
-		if (isFirstStep) {
-			router.push(`/gathering/${accessKey}`);
-		} else {
-			back();
-		}
-	};
-
-	const handleComplete = () => {
-		router.replace(`/gathering/${accessKey}/opinion/pending`);
-	};
-
-	if (step === "intro") {
-		return (
-			<>
-				<Layout.Header background="gray">
-					<div className="ygi:h-full ygi:w-full" />
-				</Layout.Header>
-				<Layout.Content background="gray">
-					{/* TODO : API 연동 과정에서 대체가 필요한 코드 */}
-					<IntroStep
-						meetingContext={meetingContext}
-						step="intro"
-						onNext={next}
-					/>
-				</Layout.Content>
-				<Layout.Footer background="gray">
-					<div className="ygi:py-auto ygi:px-6">
-						<Button variant="primary" width="full" onClick={next}>
-							내 취향 입력
-						</Button>
-					</div>
-				</Layout.Footer>
-			</>
-		);
-	}
+	HydrationBoundary,
+	QueryClient,
+	dehydrate,
+} from "@tanstack/react-query";
+
+import { gatheringOptions } from "#/apis/gathering";
+import OpinionView from "./OpinionView";
+
+interface OpinionPageProps {
+	params: Promise<{
+		accessKey: string;
+	}>;
+}
 
-	const renderContent = () => {
-		switch (step) {
-			case "distance":
-				return <DistanceStepContent meetingContext={meetingContext} />;
-			case "dislike":
-				return <DislikeStepContent />;
-			case "preference":
-				return <PreferenceStepContent />;
-			default:
-				return null;
-		}
-	};
+/**
+ * 의견 수렴 페이지 (서버 컴포넌트)
+ * - gathering 데이터를 서버에서 prefetch하여 무한 렌더링 방지
+ */
+export default async function OpinionPage({ params }: OpinionPageProps) {
+	const { accessKey } = await params;
+	const queryClient = new QueryClient();
 
-	const renderFooter = () => {
-		switch (step) {
-			case "distance":
-				return <DistanceStepFooter onNext={next} />;
-			case "dislike":
-				return <DislikeStepFooter onNext={next} />;
-			case "preference":
-				return <PreferenceStepFooter onComplete={handleComplete} />;
-			default:
-				return null;
-		}
-	};
+	// 서버에서 gathering 데이터 미리 가져오기
+	await queryClient.prefetchQuery(gatheringOptions.detail(accessKey));
 
 	return (
-		<FormProvider {...form}>
-			<Layout.Header>
-				<BackwardButton onClick={handleBackward} />
-			</Layout.Header>
-			<Layout.Content>
-				<StepTransition step={step} direction={direction}>
-					{renderContent()}
-				</StepTransition>
-			</Layout.Content>
-			{renderFooter()}
-			<Toaster offset={{ bottom: 96 }} mobileOffset={{ bottom: 96 }} />
-		</FormProvider>
+		<HydrationBoundary state={dehydrate(queryClient)}>
+			<OpinionView />
+		</HydrationBoundary>
 	);
 }