feat: 결과 페이지 - 투표 결과 섹션 구현

.gitignore

@@ -39,3 +39,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Git worktrees
+.worktrees/

src/pageComponents/gathering/opinion/ResultView.tsx

@@ -3,59 +3,15 @@
 import { Layout } from "#/components/layout";
 import { OtherCandidateCard } from "#/pageComponents/gathering/restaurantCard";
 import type { RecommendationResult } from "#/types/gathering";
-import { twJoin } from "tailwind-merge";
-import { ProgressBar } from "#/components/progressBar";
-import { CircleIcon } from "#/icons/circleIcon";
-import { XIcon } from "#/icons/xIcon";
-import {
-	FOOD_CATEGORY_LABEL,
-	REGION_LABEL,
-	TIME_SLOT_LABEL,
-} from "#/constants/gathering/opinion";
-import type { FoodCategory } from "#/types/gathering";
+import { REGION_LABEL, TIME_SLOT_LABEL } from "#/constants/gathering/opinion";
 import { parse, format } from "date-fns";
 import { TasteSummaryCard } from "#/pageComponents/gathering/opinion/TasteSummaryCard";
+import { VoteSummarySection } from "#/pageComponents/gathering/opinion/VoteSummarySection";
 
 export interface ResultViewProps {
 	recommendationResult: RecommendationResult;
 }
 
-interface VoteListProps {
-	votes: Record<string, number>;
-}
-
-const VoteList = ({ votes }: VoteListProps) => {
-	const sortedVotes = Object.entries(votes)
-		.map(([category, count]) => ({
-			category: category as FoodCategory,
-			count,
-		}))
-		.sort((a, b) => b.count - a.count);
-
-	return (
-		<div className="ygi:flex ygi:flex-wrap ygi:items-center ygi:gap-4">
-			{sortedVotes.map((vote) => (
-				<div
-					key={vote.category}
-					className="ygi:flex ygi:items-center ygi:gap-1"
-				>
-					<span className="ygi:body-14-md ygi:text-text-secondary">
-						{FOOD_CATEGORY_LABEL[vote.category]}
-					</span>
-					<span
-						className={twJoin(
-							"ygi:rounded ygi:px-1 ygi:py-0.5",
-							"ygi:bg-surface-primary ygi:caption-12-sb ygi:text-text-interactive",
-						)}
-					>
-						{vote.count}표
-					</span>
-				</div>
-			))}
-		</div>
-	);
-};
-
 const formatScheduledDate = (dateStr: string): string => {
 	try {
 		const date = parse(dateStr, "yyyy-MM-dd", new Date());
@@ -122,73 +78,11 @@ export const ResultView = ({ recommendationResult }: ResultViewProps) => {
 					</div>
 				</section>
 
-				{/* Vote Summary Section */}
-				<section
-					className={twJoin(
-						"ygi:rounded-xl ygi:bg-surface-white",
-						"ygi:flex ygi:flex-col ygi:gap-8 ygi:p-5",
-					)}
-				>
-					{/* 의견 일치율 */}
-					<div className="ygi:flex ygi:flex-col ygi:gap-5">
-						<div className="ygi:flex ygi:items-start ygi:justify-between">
-							<h5 className="ygi:flex-1 ygi:heading-18-bd ygi:text-text-primary">
-								의견 일치율
-							</h5>
-							<span className="ygi:shrink-0 ygi:body-18-bd ygi:text-text-interactive">
-								{Math.round(recommendationResult.agreementRate)}
-								%
-							</span>
-						</div>
-						<ProgressBar
-							value={recommendationResult.agreementRate}
-						/>
-					</div>
-
-					{/* Divider */}
-					<div className="ygi:h-px ygi:bg-border-default" />
-
-					{/* 좋아하는 음식 */}
-					<div className="ygi:flex ygi:flex-col ygi:gap-4">
-						<div className="ygi:flex ygi:items-center ygi:gap-2">
-							<div
-								className={twJoin(
-									"ygi:flex ygi:items-center ygi:justify-center",
-									"ygi:h-5 ygi:w-5 ygi:rounded",
-									"ygi:bg-palette-secondary-500",
-								)}
-							>
-								<CircleIcon
-									size={11}
-									className="ygi:text-white"
-								/>
-							</div>
-							<h3 className="ygi:body-14-sb ygi:text-text-primary">
-								좋아하는 음식
-							</h3>
-						</div>
-						<VoteList votes={recommendationResult.preferences} />
-					</div>
-
-					{/* 피하고 싶은 음식 */}
-					<div className="ygi:flex ygi:flex-col ygi:gap-4">
-						<div className="ygi:flex ygi:items-center ygi:gap-2">
-							<div
-								className={twJoin(
-									"ygi:flex ygi:items-center ygi:justify-center",
-									"ygi:h-5 ygi:w-5 ygi:rounded",
-									"ygi:bg-palette-primary-500",
-								)}
-							>
-								<XIcon size={11} className="ygi:text-white" />
-							</div>
-							<h3 className="ygi:body-14-sb ygi:text-text-primary">
-								피하고 싶은 음식
-							</h3>
-						</div>
-						<VoteList votes={recommendationResult.dislikes} />
-					</div>
-				</section>
+				<VoteSummarySection
+					preferences={recommendationResult.preferences}
+					dislikes={recommendationResult.dislikes}
+					distances={recommendationResult.distances}
+				/>
 			</div>
 		</Layout.Content>
 	);