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..c9e302d 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 0.0.0.0 ", "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview" diff --git a/a11y/src/App.tsx b/a11y/src/App.tsx index a8159f9..9a81fab 100644 --- a/a11y/src/App.tsx +++ b/a11y/src/App.tsx @@ -5,13 +5,13 @@ import FlightBooking from "./components/FlightBooking"; function App() { return ( -
+
-
+
-
+
-
+ ); } diff --git a/a11y/src/components/FlightBooking.css b/a11y/src/components/FlightBooking.css index d9d6083..93784c6 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 !important; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + border: 0; + white-space: nowrap; +} diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx index 313cab3..36e9f96 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -3,35 +3,69 @@ import { useState } from "react"; import "./FlightBooking.css"; const MAX_PASSENGERS = 3; +const MIN_PASSENGERS = 1; const FlightBooking = () => { const [adultCount, setAdultCount] = useState(1); + const [statusMessage, setStatusMessage] = useState(""); const incrementCount = () => { - setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1)); + setAdultCount((prev) => { + if (prev < MAX_PASSENGERS) { + setStatusMessage(""); + return prev + 1; + } else { + setStatusMessage("최대 승객 수에 도달했습니다."); + return prev; + } + }); }; - const decrementCount = () => { - setAdultCount((prev) => Math.max(1, prev - 1)); + setAdultCount((prev) => { + if (prev > MIN_PASSENGERS) { + setStatusMessage(""); + return prev - 1; + } else { + setStatusMessage("성인 승객은 최소 1명이어야 합니다."); + return prev; + } + }); }; return ( -
+

항공권 예매

성인
- - {adultCount} -
- -
+ +
+ {statusMessage} +
+ + + ); }; diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..6846ea4 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "self-paced-enhance-usability", + "lockfileVersion": 3, + "requires": true, + "packages": {} +}