diff --git a/a11y/index.html b/a11y/index.html index 12fa3e7..e525729 100644 --- a/a11y/index.html +++ b/a11y/index.html @@ -1,16 +1,14 @@ - - - - - - - - Accessibility - - - -
- - + + + + + + + Accessibility + + +
+ + diff --git a/a11y/package.json b/a11y/package.json index 1148c94..9396d14 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" diff --git a/a11y/src/App.css b/a11y/src/App.css index 4dd5374..d44705e 100644 --- a/a11y/src/App.css +++ b/a11y/src/App.css @@ -16,3 +16,14 @@ .flight-booking-container { padding: 26px 24px; } +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} 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.tsx b/a11y/src/components/FlightBooking.tsx index 313cab3..e8a2c71 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -6,12 +6,29 @@ const MAX_PASSENGERS = 3; const FlightBooking = () => { const [adultCount, setAdultCount] = useState(1); + const [statusMessage, setStatusMessage] = useState(""); const incrementCount = () => { + if (adultCount === MAX_PASSENGERS) { + setStatusMessage("최대 승객 수에 도달했습니다"); + return; + } + setTimeout(() => { + setStatusMessage(""); + }, 500); + setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1)); }; const decrementCount = () => { + if (adultCount === 1) { + setStatusMessage("최소 승객 수에 도달했습니다"); + return; + } + setTimeout(() => { + setStatusMessage(""); + }, 500); + setAdultCount((prev) => Math.max(1, prev - 1)); }; @@ -19,13 +36,35 @@ const FlightBooking = () => {

항공권 예매

+ {statusMessage && ( + + )} + 성인
- - {adultCount} -