chore: Restaurant List Section 스타일 수정

Author: youngminss

src/components/tag/Tag.tsx

@@ -4,18 +4,22 @@ import type { ComponentProps } from "react";
 const tagVariants = cva(
 	[
 		"ygi:inline-flex ygi:items-center ygi:justify-center",
-		"ygi:bg-surface-primary ygi:text-text-interactive",
 		"ygi:caption-12-sb ygi:whitespace-nowrap",
 	],
 	{
 		variants: {
+			theme: {
+				primary: ["ygi:bg-surface-primary ygi:text-text-interactive"],
+				secondary: ["ygi:bg-surface-gray ygi:text-text-secondary"],
+			},
 			size: {
 				medium: ["ygi:px-2 ygi:py-1", "ygi:rounded-sm"],
 				small: ["ygi:h-4 ygi:px-1 ygi:py-0", "ygi:rounded-xs"],
 			},
 		},
 		defaultVariants: {
 			size: "medium",
+			theme: "primary",
 		},
 	},
 );
@@ -25,9 +29,14 @@ export type TagProps = Omit<ComponentProps<"span">, "children" | "className"> &
 		children: string;
 	};
 
-export const Tag = ({ size = "medium", children, ...props }: TagProps) => {
+export const Tag = ({
+	size = "medium",
+	theme = "primary",
+	children,
+	...props
+}: TagProps) => {
 	return (
-		<span className={tagVariants({ size })} {...props}>
+		<span className={tagVariants({ size, theme })} {...props}>
 			{children}
 		</span>
 	);

src/pageComponents/gathering/opinion/ResultView.tsx

@@ -85,26 +85,26 @@ export const ResultView = ({ recommendationResult }: ResultViewProps) => {
 
 				{/* Restaurant List Section */}
 				<section className="ygi:flex ygi:flex-col ygi:gap-3">
-					<h2 className="ygi:heading-18-bd ygi:text-text-primary">
+					<h2 className="ygi:heading-22-bd ygi:text-text-primary">
 						약속 장소는 여기 어때요?
 					</h2>
-					<div className="ygi:rounded-xl ygi:bg-surface-white ygi:p-4">
-						<span className="ygi:caption-12-sb ygi:text-text-secondary">
+					<div className="ygi:space-y-4 ygi:rounded-md ygi:bg-surface-white ygi:p-4">
+						<p className="ygi:body-16-bd ygi:text-text-primary">
 							요기잇 추천 맛집
-						</span>
-						<div className="ygi:mt-3 ygi:flex ygi:flex-col">
+						</p>
+						<div className="ygi:flex ygi:flex-col ygi:gap-4 ygi:divide-y ygi:divide-dashed ygi:divide-border-default">
 							{[
 								recommendationResult.topRecommendation,
 								...recommendationResult.otherCandidates,
-							].map((restaurant, index, arr) => (
-								<div key={restaurant.restaurantId}>
+							].map((restaurant, index) => (
+								<div
+									key={restaurant.restaurantId}
+									className="ygi:not-last:pb-4"
+								>
 									<OtherCandidateCard
 										restaurant={restaurant}
 										ranking={index + 1}
 									/>
-									{index < arr.length - 1 && (
-										<div className="ygi:my-4 ygi:h-px ygi:bg-border-default" />
-									)}
 								</div>
 							))}
 						</div>

src/pageComponents/gathering/restaurantCard/OtherCandidateCard.tsx

@@ -31,10 +31,11 @@ export const OtherCandidateCard = ({
 
 	return (
 		<article
-			className="ygi:flex ygi:items-start ygi:overflow-hidden"
+			className="ygi:flex ygi:cursor-pointer ygi:items-start ygi:gap-5 ygi:overflow-hidden"
 			aria-label={`${ranking}위 추천 음식점: ${restaurant.restaurantName}`}
+			onClick={handleMapClick}
 		>
-			<div className="ygi:relative ygi:h-20 ygi:w-20 ygi:shrink-0 ygi:overflow-clip ygi:rounded ygi:border ygi:border-border-default ygi:bg-surface-lightgray">
+			<div className="ygi:relative ygi:h-20 ygi:w-20 ygi:shrink-0 ygi:overflow-clip ygi:rounded-xs ygi:bg-surface-lightgray ygi:inset-ring-1 ygi:inset-ring-border-default">
 				<Image
 					src={
 						restaurant.imageUrl ??
@@ -46,36 +47,28 @@ export const OtherCandidateCard = ({
 				/>
 			</div>
 
-			<div className="ygi:flex ygi:flex-1 ygi:flex-col ygi:justify-center ygi:gap-2 ygi:px-5">
-				<button
-					onClick={handleMapClick}
-					className="ygi:flex ygi:cursor-pointer ygi:items-center ygi:text-left"
-				>
-					<h3 className="ygi:body-14-bd ygi:text-text-primary">
-						{restaurant.restaurantName}
-					</h3>
-					<ChevronRightIcon
-						size={24}
-						className="ygi:text-text-primary"
-					/>
-				</button>
+			<div className="ygi:flex ygi:flex-1 ygi:flex-col ygi:justify-center">
+				<h3 className="ygi:mb-1 ygi:body-14-bd ygi:text-text-primary">
+					{restaurant.restaurantName}
+				</h3>
 
-				<div className="ygi:flex ygi:items-center ygi:gap-1">
+				<div className="ygi:mb-2 ygi:flex ygi:items-center ygi:gap-1">
 					<StarIcon size={14} color="#FF5A3C" />
 					<span className="ygi:body-14-bd ygi:text-text-secondary">
-						{restaurant.rating.toFixed(1)} ({restaurant.reviewCount})
+						{restaurant.rating.toFixed(1)} ({restaurant.reviewCount}
+						)
 					</span>
 				</div>
 
 				<div className="ygi:flex ygi:flex-wrap ygi:gap-2">
+					<Tag size="medium" theme="secondary">
+						{FOOD_CATEGORY_LABEL[restaurant.largeCategory]}
+					</Tag>
 					{restaurant.majorityDistanceRange !== "ANY" && (
-						<Tag size="medium">
+						<Tag size="medium" theme="secondary">
 							{`역에서 도보 ${DISTANCE_RANGE_WALKING_MINUTES[restaurant.majorityDistanceRange]}분`}
 						</Tag>
 					)}
-					<Tag size="medium">
-						{FOOD_CATEGORY_LABEL[restaurant.largeCategory]}
-					</Tag>
 				</div>
 			</div>
 		</article>