diff --git a/a11y/index.html b/a11y/index.html index 12fa3e7..73a1d92 100644 --- a/a11y/index.html +++ b/a11y/index.html @@ -1,5 +1,5 @@ - + diff --git a/a11y/package.json b/a11y/package.json index 1148c94..395b869 100644 --- a/a11y/package.json +++ b/a11y/package.json @@ -4,7 +4,7 @@ "version": "0.0.0", "type": "module", "scripts": { - "dev": "vite", + "dev": "vite --host", "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview" @@ -26,4 +26,4 @@ "typescript-eslint": "^8.0.1", "vite": "^5.4.1" } -} +} \ No newline at end of file diff --git a/a11y/src/App.tsx b/a11y/src/App.tsx index a8159f9..b8fecc8 100644 --- a/a11y/src/App.tsx +++ b/a11y/src/App.tsx @@ -6,11 +6,11 @@ import FlightBooking from "./components/FlightBooking"; function App() { return (
-
-
+
+
-
-
+ +
); } diff --git a/a11y/src/components/FlightBooking.css b/a11y/src/components/FlightBooking.css index d9d6083..f99e800 100644 --- a/a11y/src/components/FlightBooking.css +++ b/a11y/src/components/FlightBooking.css @@ -61,3 +61,17 @@ border-radius: 4px; cursor: pointer; } + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: 0; + padding: 0; + + white-space: nowrap; + clip-path: inset(100%); + clip: rect(0 0 0 0); + overflow: hidden; +} \ No newline at end of file diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx index 313cab3..cef88e1 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -2,36 +2,56 @@ import { useState } from "react"; import "./FlightBooking.css"; +const MIN_PASSENGERS = 1; const MAX_PASSENGERS = 3; const FlightBooking = () => { + const [alertMessage, setAlertMessage] = useState(''); const [adultCount, setAdultCount] = useState(1); const incrementCount = () => { + if (adultCount === MAX_PASSENGERS) { + setAlertMessage("최대 승객 수에 도달했습니다.") + + return; + } + setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1)); }; const decrementCount = () => { + if (adultCount === MIN_PASSENGERS) { + setAlertMessage("최소 1명의 승객이 필요합니다.") + + return; + } + setAdultCount((prev) => Math.max(1, prev - 1)); }; + return ( -
+

항공권 예매

성인
- {adultCount} -
+ {alertMessage && ( +
+ {alertMessage} +
+ )} -
+ ); };