From ad7554a15e9d4c199a107320d67e27a7ceb6af3f Mon Sep 17 00:00:00 2001
From: pd0a6847 <pd0a6847@posco.com>
Date: Tue, 25 Nov 2025 16:11:50 +0900
Subject: [PATCH] feat: enhance Footer and GameBoard components with
 accessibility improvements

---
 src/lib/components/custom/Footer.svelte    |   2 +-
 src/lib/components/custom/GameBoard.svelte | 158 +++++++++++----------
 2 files changed, 81 insertions(+), 79 deletions(-)

diff --git a/src/lib/components/custom/Footer.svelte b/src/lib/components/custom/Footer.svelte
index cf3f01f..f613e17 100644
--- a/src/lib/components/custom/Footer.svelte
+++ b/src/lib/components/custom/Footer.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { UserRound } from '@lucide/svelte';
 </script>
-<footer class="sticky bottom-0 isolate z-50 border-border bg-background text-foreground " role="contentinfo" aria-label="Site footer">
+<footer class="sticky bottom-0 isolate z-50 border-border bg-background text-foreground ">
    	<div class="mx-auto max-w-3xl px-5 lg:max-w-6xl lg:px-6">
 		<div class="relative flex flex-col justify-between border-x border-t border-border ">
 			<div class="flex w-full items-stretch">
diff --git a/src/lib/components/custom/GameBoard.svelte b/src/lib/components/custom/GameBoard.svelte
index bcc952c..6cf8b14 100644
--- a/src/lib/components/custom/GameBoard.svelte
+++ b/src/lib/components/custom/GameBoard.svelte
@@ -25,85 +25,87 @@
 	);
 </script>
 
-<footer class="min-h-[100dvh] flex flex-col border-border bg-background text-foreground">
-	<div class="mx-auto max-w-3xl px-5 lg:max-w-6xl lg:px-6 w-full">
-		<div class="relative flex-1 flex flex-col justify-between border-x border-border p-4">
-			<div class="mb-3 flex justify-start">
-				<ToggleGroup.Root
-					variant="outline"
-					type="multiple"
-					class="pr-5"
-					bind:value={selectedCategories}
-				>
-					<ToggleGroup.Item value="BS" aria-label="Toggle BS"
-						><span class="text-xs">BS</span></ToggleGroup.Item
+<footer class="flex flex-col border-border bg-background text-foreground">
+	<div class="mx-auto w-full max-w-3xl px-5 lg:max-w-6xl lg:px-6">
+		<div class="border-x border-border min-h-[100dvh] ">
+			<div class="relative flex flex-1 flex-col justify-between p-4">
+				<div class="mb-3 flex justify-start">
+					<ToggleGroup.Root
+						variant="outline"
+						type="multiple"
+						class="pr-5"
+						bind:value={selectedCategories}
 					>
-					<ToggleGroup.Item value="EO" aria-label="Toggle EO"
-						><span class="text-xs">EO</span></ToggleGroup.Item
-					>
-					<ToggleGroup.Item value="PAIR" aria-label="Toggle PAIR"
-						><span class="text-xs">PR</span></ToggleGroup.Item
-					>
-					<ToggleGroup.Item value="TRIPLE" aria-label="Toggle TRIPLE"
-						><span class="text-xs">TRP</span></ToggleGroup.Item
-					>
-					<ToggleGroup.Item value="TOTAL" aria-label="Toggle TOTAL"
-						><span class="text-xs">TOT</span></ToggleGroup.Item
-					>
-					<ToggleGroup.Item value="DOMINO" aria-label="Toggle DOMINO"
-						><span class="text-xs">DOM</span></ToggleGroup.Item
-					>
-					<ToggleGroup.Item value="SINGLE" aria-label="Toggle SINGLE"
-						><span class="text-xs">SGL</span></ToggleGroup.Item
-					>
-				</ToggleGroup.Root>
-				<ToggleGroup.Root variant="outline" type="multiple" bind:value={selectedPayouts}>
-					<ToggleGroup.Item value="PO1" aria-label="Toggle PO1"
-						><span class="text-xs">1</span></ToggleGroup.Item
-					>
-					<ToggleGroup.Item value="PO5" aria-label="Toggle PO5"
-						><span class="text-xs">5</span></ToggleGroup.Item
-					>
-					<ToggleGroup.Item value="PO6" aria-label="Toggle PO6"
-						><span class="text-xs">6</span></ToggleGroup.Item
-					>
-					<ToggleGroup.Item value="PO8" aria-label="Toggle PO8"
-						><span class="text-xs">8</span></ToggleGroup.Item
-					>
-					<ToggleGroup.Item value="PO12" aria-label="Toggle PO12"
-						><span class="text-xs">12</span></ToggleGroup.Item
-					>
-					<ToggleGroup.Item value="PO18" aria-label="Toggle PO18"
-						><span class="text-xs">18</span></ToggleGroup.Item
-					>
-					<ToggleGroup.Item value="PO24" aria-label="Toggle PO24"
-						><span class="text-xs">24</span></ToggleGroup.Item
-					>
-					<ToggleGroup.Item value="PO30" aria-label="Toggle PO30"
-						><span class="text-xs">30</span></ToggleGroup.Item
-					>
-					<ToggleGroup.Item value="PO50" aria-label="Toggle PO50"
-						><span class="text-xs">50</span></ToggleGroup.Item
-					>
-					<ToggleGroup.Item value="PO150" aria-label="Toggle PO150"
-						><span class="text-xs">150</span></ToggleGroup.Item
-					>
-				</ToggleGroup.Root>
-			</div>
-			<div class="grid grid-cols-7 gap-4">
-				{#each filteredGame as betSection (betSection.id)}
-					<div
-						animate:flip={{ duration: 400 }}
-						in:fly={{ y: 20, duration: 300, delay: 100 }}
-						out:fade={{ duration: 200 }}
-						class="hover:border-black flex h-[85px] w-full flex-col items-center justify-center gap-0.5 rounded-lg border p-1 text-[12px] leading-tight transition-colors"
-					>
-						<span class="font-semibold">{betSection.category}</span>
-						<span>{betSection.id}</span>
-						<span>Max ₩ {betSection.maxBet}</span>
-						<span>{betSection.payout}:1</span>
-					</div>
-				{/each}
+						<ToggleGroup.Item value="BS" aria-label="Toggle BS"
+							><span class="text-xs">BS</span></ToggleGroup.Item
+						>
+						<ToggleGroup.Item value="EO" aria-label="Toggle EO"
+							><span class="text-xs">EO</span></ToggleGroup.Item
+						>
+						<ToggleGroup.Item value="PAIR" aria-label="Toggle PAIR"
+							><span class="text-xs">PR</span></ToggleGroup.Item
+						>
+						<ToggleGroup.Item value="TRIPLE" aria-label="Toggle TRIPLE"
+							><span class="text-xs">TRP</span></ToggleGroup.Item
+						>
+						<ToggleGroup.Item value="TOTAL" aria-label="Toggle TOTAL"
+							><span class="text-xs">TOT</span></ToggleGroup.Item
+						>
+						<ToggleGroup.Item value="DOMINO" aria-label="Toggle DOMINO"
+							><span class="text-xs">DOM</span></ToggleGroup.Item
+						>
+						<ToggleGroup.Item value="SINGLE" aria-label="Toggle SINGLE"
+							><span class="text-xs">SGL</span></ToggleGroup.Item
+						>
+					</ToggleGroup.Root>
+					<ToggleGroup.Root variant="outline" type="multiple" bind:value={selectedPayouts}>
+						<ToggleGroup.Item value="PO1" aria-label="Toggle PO1"
+							><span class="text-xs">1</span></ToggleGroup.Item
+						>
+						<ToggleGroup.Item value="PO5" aria-label="Toggle PO5"
+							><span class="text-xs">5</span></ToggleGroup.Item
+						>
+						<ToggleGroup.Item value="PO6" aria-label="Toggle PO6"
+							><span class="text-xs">6</span></ToggleGroup.Item
+						>
+						<ToggleGroup.Item value="PO8" aria-label="Toggle PO8"
+							><span class="text-xs">8</span></ToggleGroup.Item
+						>
+						<ToggleGroup.Item value="PO12" aria-label="Toggle PO12"
+							><span class="text-xs">12</span></ToggleGroup.Item
+						>
+						<ToggleGroup.Item value="PO18" aria-label="Toggle PO18"
+							><span class="text-xs">18</span></ToggleGroup.Item
+						>
+						<ToggleGroup.Item value="PO24" aria-label="Toggle PO24"
+							><span class="text-xs">24</span></ToggleGroup.Item
+						>
+						<ToggleGroup.Item value="PO30" aria-label="Toggle PO30"
+							><span class="text-xs">30</span></ToggleGroup.Item
+						>
+						<ToggleGroup.Item value="PO50" aria-label="Toggle PO50"
+							><span class="text-xs">50</span></ToggleGroup.Item
+						>
+						<ToggleGroup.Item value="PO150" aria-label="Toggle PO150"
+							><span class="text-xs">150</span></ToggleGroup.Item
+						>
+					</ToggleGroup.Root>
+				</div>
+				<div class="grid grid-cols-7 gap-4">
+					{#each filteredGame as betSection (betSection.id)}
+						<div
+							animate:flip={{ duration: 400 }}
+							in:fly={{ y: 20, duration: 300, delay: 100 }}
+							out:fade={{ duration: 200 }}
+							class="flex h-[85px] w-full flex-col items-center justify-center gap-0.5 rounded-lg border p-1 text-[12px] leading-tight transition-colors hover:border-black"
+						>
+							<span class="font-semibold">{betSection.category}</span>
+							<span>{betSection.id}</span>
+							<span>Max ₩ {betSection.maxBet}</span>
+							<span>{betSection.payout}:1</span>
+						</div>
+					{/each}
+				</div>
 			</div>
 		</div>
 	</div>