diff --git a/a11y/index.html b/a11y/index.html index 12fa3e7..fba0804 100644 --- a/a11y/index.html +++ b/a11y/index.html @@ -1,16 +1,14 @@ - - - - - - - Accessibility - - - -
- - + + + + + + Accessibility + + +
+ + diff --git a/a11y/src/App.tsx b/a11y/src/App.tsx index a8159f9..8c8ebb8 100644 --- a/a11y/src/App.tsx +++ b/a11y/src/App.tsx @@ -1,16 +1,16 @@ -import "./Typography.css"; -import "./App.css"; +import './Typography.css'; +import './App.css'; -import FlightBooking from "./components/FlightBooking"; +import FlightBooking from './components/FlightBooking'; function App() { return (
-
-
+
+
-
-
+ +
); } diff --git a/a11y/src/components/FlightBooking.css b/a11y/src/components/FlightBooking.css index d9d6083..5235c41 100644 --- a/a11y/src/components/FlightBooking.css +++ b/a11y/src/components/FlightBooking.css @@ -34,7 +34,7 @@ width: 30px; height: 30px; border-radius: 16px; - border: 1px solid #C0C0C0; + border: 1px solid #c0c0c0; background-color: #fff; cursor: pointer; display: flex; @@ -61,3 +61,15 @@ border-radius: 4px; cursor: pointer; } + +.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/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx index 313cab3..08e36bc 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -1,33 +1,58 @@ -import { useState } from "react"; +import { useState, useRef } from 'react'; -import "./FlightBooking.css"; +import './FlightBooking.css'; const MAX_PASSENGERS = 3; const FlightBooking = () => { const [adultCount, setAdultCount] = useState(1); + const [statusMessage, setStatusMessage] = useState(''); + const messageKeyRef = useRef(0); const incrementCount = () => { - setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1)); + setAdultCount((prev) => { + if (prev === MAX_PASSENGERS) { + messageKeyRef.current += 1; + setStatusMessage('최대 승객 수에 도달했습니다'); + return prev; + } + setStatusMessage(''); + return prev + 1; + }); }; const decrementCount = () => { - setAdultCount((prev) => Math.max(1, prev - 1)); + setAdultCount((prev) => { + if (prev <= 1) { + messageKeyRef.current += 1; + setStatusMessage('최소 1명의 승객이 필요합니다'); + return prev; + } + setStatusMessage(''); + return prev - 1; + }); }; return (

항공권 예매

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