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.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..031dcdb 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; @@ -42,7 +42,7 @@ align-items: center; } -.counter span { +.counter output { font-size: 18px; text-align: center; font-size: 18px; @@ -61,3 +61,8 @@ border-radius: 4px; cursor: pointer; } + +.visually-hidden { + position: absolute; + clip: rect(0 0 0 0); +} diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx index 313cab3..17210e3 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -6,13 +6,26 @@ const MAX_PASSENGERS = 3; const FlightBooking = () => { const [adultCount, setAdultCount] = useState(1); + const [message, setMessage] = useState(""); const incrementCount = () => { - setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1)); + setAdultCount((prev) => { + if (prev >= MAX_PASSENGERS) { + setMessage("최대 승객 수에 도달했습니다."); + return prev; + } + return prev + 1; + }); }; const decrementCount = () => { - setAdultCount((prev) => Math.max(1, prev - 1)); + setAdultCount((prev) => { + if (prev <= 1) { + setMessage("최소 1명의 승객이 필요합니다."); + return prev; + } + return prev - 1; + }); }; return ( @@ -21,16 +34,31 @@ const FlightBooking = () => {
성인
- - {adultCount} - +
+ {message} +
- + ); }; diff --git a/a11y/vite.config.ts b/a11y/vite.config.ts index 9cc50ea..d8d4e6c 100644 --- a/a11y/vite.config.ts +++ b/a11y/vite.config.ts @@ -4,4 +4,7 @@ import react from "@vitejs/plugin-react"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], + server: { + host: "0.0.0.0", + }, });