design: 레이싱 게임 버튼 디자인 수정

softeerbootcamp4th · Aug 21, 2024 · 55141ed · 55141ed
1 parent eb8e9fc
commit 55141ed
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/packages/user/src/components/event/racing/dashboard/chargeButton.tsx b/packages/user/src/components/event/racing/dashboard/chargeButton.tsx
@@ -15,10 +15,10 @@ const ChargeButton = memo(({ onCharge }: ChargeButtonProps) => {
 		<button
 			type="button"
 			onClick={onCharge}
-			className="bg-skyblue-400 absolute bottom-12 right-[27px] top-[130px] z-50 flex h-[140px] min-w-[150px] flex-col items-center justify-center gap-3 break-keep rounded-[25px] px-6 py-4 text-center font-medium text-yellow-900 opacity-90 shadow-lg"
+			className="bg-skyblue-400 absolute z-50 flex opacity-80 flex-col -bottom-[50px] w-[380px] h-[100px] items-center justify-center break-keep text-center hover:opacity-100 rounded-[16px] border border-[#82B9C6] bg-gradient-to-b from-[#00AAD2] pt-3 via-[#00313C] to-[#003E4D] active:translate-y-0 hover:translate-y-1 hover:shadow-[0_0_10px_0_rgba(255,255,255,0.50),inset_6px_0_10px_0_rgba(255,255,255,0.25)]"
 		>
-			<p className="text-body-1 font-bold">1등을 차지하는</p>
-			<h3 className="text-foreground">충전 버튼</h3>
+			<p className="text-body-1 font-extrabold text-background">1등을 차지하는</p>
+			<p className="text-heading-3  font-extrabold text-foreground">충전 버튼</p>
 		</button>
 	);
 });

diff --git a/packages/user/src/components/event/racing/index.tsx b/packages/user/src/components/event/racing/index.tsx
@@ -16,9 +16,9 @@ const RealTimeRacing = memo(
 		return (
 			<section
 				id={SECTION_ID.RACING}
-				className="container flex w-[1200px] snap-start flex-col items-center gap-4 pb-[50px] pt-[80px]"
+				className="container flex w-[1200px] snap-start flex-col items-center gap-15 pb-[50px] pt-[80px]"
 			>
-				<div className="relative h-[685px] w-full">
+				<div className="relative h-[685px] w-full flex justify-center items-center">
 					<RacingDashboard ranks={ranks} isActive={isCharged} />
 					<ChargeButton onCharge={handleCharge} />
 				</div>