feat: 비선호 음식 선택을 최대 2개까지 지정할 수 있도록 제한 (#86)

* feat: 비선호 음식 다중 선택 기능 구현

5개 음식 카테고리 중 최대 4개까지 다중 선택 가능하도록 변경

Co-Authored-By: Claude (us.anthropic.claude-sonnet-4-5-20250929-v1:0) <noreply@anthropic.com>

* feat: 비선호 음식 선택 최대 2개 제한 및 상관없음 단독 선택 구현

- 비선호 음식 선택을 최대 2개로 제한
- "상관없음" 선택 시 다른 모든 선택 해제되고 단독 선택
- 일반 음식 선택 시 "상관없음" 자동 해제
- UI에 최대 선택 개수 안내 추가
- 스키마 검증에 max(2) 제약 조건 추가

Co-Authored-By: Claude (us.anthropic.claude-sonnet-4-5-20250929-v1:0) <noreply@anthropic.com>

* chore: 불필요한 주석 제거

Co-Authored-By: Claude (us.anthropic.claude-sonnet-4-5-20250929-v1:0) <noreply@anthropic.com>

* fix: 코드 리뷰 반영하여 Zod Schema 에 refine 을 등록하여 강화

* fix: 비선호 Category 로직 전반으로 Food 를 Category 로 치환하여 코드 수정

* chore: 불호 선택 버튼 내 Category 텍스트를 Food 로 일괄 수정하여 반영

---------

Co-authored-by: Claude (us.anthropic.claude-sonnet-4-5-20250929-v1:0) <noreply@anthropic.com>

Author: RookieAND

src/pageComponents/gathering/opinion/DislikeStep.tsx

@@ -36,7 +36,7 @@ export const DislikeStepContent = () => {
 				{FOOD_CATEGORIES.map((category) => (
 					<DislikedFoodButton
 						key={category.value}
-						category={category.value}
+						food={category.value}
 					/>
 				))}
 			</div>

src/pageComponents/gathering/opinion/DislikedFoodButton.tsx

@@ -15,8 +15,7 @@ import type { OpinionFormSchema } from "#/schemas/gathering";
 const dislikedFoodButtonVariants = cva(
 	[
 		"ygi:flex ygi:flex-col ygi:items-center ygi:justify-center",
-		"ygi:size-[156px] ygi:rounded-full",
-		"ygi:gap-1 ygi:p-6",
+		"ygi:size-[156px] ygi:gap-1 ygi:rounded-full ygi:p-6",
 		"ygi:cursor-pointer ygi:transition",
 		"ygi:border ygi:border-solid ygi:bg-surface-lightgray",
 	],
@@ -52,19 +51,42 @@ const dislikedFoodButtonVariants = cva(
 );
 
 interface DislikedFoodButtonProps {
-	category: FoodCategory;
+	food: FoodCategory;
 }
 
-export const DislikedFoodButton = ({ category }: DislikedFoodButtonProps) => {
+export const DislikedFoodButton = ({ food }: DislikedFoodButtonProps) => {
 	const { control } = useFormContext<OpinionFormSchema>();
 	const { field } = useController({ name: "dislikedFoods", control });
 
-	const dislikedFoods = field.value || [];
+	const dislikeFoodList = field.value || [];
 
-	const isSelected = dislikedFoods.includes(category);
-	const isAny = category === "ANY";
+	const isSelected = dislikeFoodList.includes(food);
+	const isAny = food === "ANY";
 	const shouldShowXIcon = isSelected && !isAny;
 
+	const handleClickDislikeButton = () => {
+		if (isSelected) {
+			field.onChange(
+				dislikeFoodList.filter((dislikeFood) => dislikeFood !== food),
+			);
+			return;
+		}
+
+		if (isAny) {
+			field.onChange(["ANY"]);
+			return;
+		}
+
+		const filteredFoods = dislikeFoodList.filter(
+			(dislikeFood) => dislikeFood !== "ANY",
+		);
+
+		if (filteredFoods.length < 2) {
+			field.onChange([...filteredFoods, food]);
+			return;
+		}
+	};
+
 	return (
 		<button
 			type="button"
@@ -73,12 +95,12 @@ export const DislikedFoodButton = ({ category }: DislikedFoodButtonProps) => {
 				isAny,
 				selected: isSelected,
 			})}
-			onClick={() => field.onChange(isSelected ? [] : [category])}
+			onClick={handleClickDislikeButton}
 		>
 			<div className="ygi:relative ygi:size-20">
 				<Image
-					src={`/images/foodCategory/${category.toLowerCase()}.svg`}
-					alt={FOOD_CATEGORY_LABEL[category]}
+					src={`/images/foodCategory/${food.toLowerCase()}.svg`}
+					alt={FOOD_CATEGORY_LABEL[food]}
 					fill
 					className="ygi:object-contain"
 					priority
@@ -109,7 +131,7 @@ export const DislikedFoodButton = ({ category }: DislikedFoodButtonProps) => {
 						: "ygi:text-text-secondary",
 				)}
 			>
-				{FOOD_CATEGORY_LABEL[category]}
+				{FOOD_CATEGORY_LABEL[food]}
 			</span>
 		</button>
 	);

src/schemas/gathering/opinionForm.schema.ts

@@ -26,7 +26,11 @@ export const opinionFormSchema = z.object({
 	distanceRange: distanceRangeSchema,
 	dislikedFoods: z
 		.array(foodCategorySchema)
-		.min(1, "싫어하는 음식을 선택해주세요"),
+		.min(1, "싫어하는 음식을 선택해주세요")
+		.max(2, "최대 2개까지 선택 가능합니다")
+		.refine((foods) => !foods.includes("ANY") || foods.length === 1, {
+			message: '"상관없음"은 다른 음식과 함께 선택할 수 없습니다.',
+		}),
 	preferredMenus: z.object({
 		first: foodCategorySchema.optional(),
 		second: foodCategorySchema.optional(),