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/src/App.css b/a11y/src/App.css index 4dd5374..a5fa19f 100644 --- a/a11y/src/App.css +++ b/a11y/src/App.css @@ -9,10 +9,6 @@ margin: 0 auto; } -.app-main { - flex: 1; -} - .flight-booking-container { padding: 26px 24px; } diff --git a/a11y/src/App.tsx b/a11y/src/App.tsx index a8159f9..883a205 100644 --- a/a11y/src/App.tsx +++ b/a11y/src/App.tsx @@ -5,13 +5,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..845f076 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,14 @@ border-radius: 4px; cursor: pointer; } + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip-path: inset(50%); + border: 0; +} diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx index 313cab3..af6ffb5 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -2,16 +2,36 @@ import { useState } from "react"; import "./FlightBooking.css"; +const MIN_PASSENGERS = 1; const MAX_PASSENGERS = 3; const FlightBooking = () => { const [adultCount, setAdultCount] = useState(1); + const [statusMessage, setStatusMessage] = useState(""); + + const resetStatusMessage = () => { + setTimeout(() => { + setStatusMessage(""); + }); + }; const incrementCount = () => { + if (adultCount === MAX_PASSENGERS) { + setStatusMessage("최대 승객 수에 도달했습니다"); + resetStatusMessage(); + return; + } + setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1)); }; const decrementCount = () => { + if (adultCount === MIN_PASSENGERS) { + setStatusMessage("최소 1명의 승객이 필요합니다"); + resetStatusMessage(); + return; + } + setAdultCount((prev) => Math.max(1, prev - 1)); }; @@ -21,15 +41,20 @@ const FlightBooking = () => {
성인
- - {adultCount} -
+ {statusMessage && ( +
+ {statusMessage} +
+ )} );