diff --git a/a11y/index.html b/a11y/index.html index 12fa3e7..04ce8f0 100644 --- a/a11y/index.html +++ b/a11y/index.html @@ -1,16 +1,24 @@ - - - - - - - - Accessibility - - - -
- - + + + + + + + Accessibility + + +
+ + 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..06ae7cf 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; @@ -45,13 +45,18 @@ .counter span { font-size: 18px; text-align: center; - font-size: 18px; font-style: normal; font-weight: 500; line-height: normal; padding: 0 16px; } +.help-text { + padding-bottom: 10px; + line-height: normal; + text-align: center; +} + .search-button { width: 100%; padding: 10px; diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx index 313cab3..37cb2f2 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -3,35 +3,61 @@ import { useState } from "react"; import "./FlightBooking.css"; const MAX_PASSENGERS = 3; - +const MIN_PASSENGERS = 1; const FlightBooking = () => { - const [adultCount, setAdultCount] = useState(1); + const [adultCount, setAdultCount] = useState(MIN_PASSENGERS); + const [helpMessage, setHelpMessage] = useState(""); const incrementCount = () => { + if (adultCount == MAX_PASSENGERS) { + setHelpMessage(`최대 승객 수는 ${MAX_PASSENGERS}명 입니다.`); + return; + } setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1)); + setHelpMessage(""); }; const decrementCount = () => { + if (adultCount == MIN_PASSENGERS) { + setHelpMessage(`최소 승객 수는 ${MIN_PASSENGERS}명 입니다.`); + return; + } setAdultCount((prev) => Math.max(1, prev - 1)); + setHelpMessage(""); }; return ( -
+

항공권 예매

성인
- - {adultCount} -
+
+ {helpMessage} +
-
+ ); }; diff --git a/a11y/tsconfig.app.tsbuildinfo b/a11y/tsconfig.app.tsbuildinfo new file mode 100644 index 0000000..a0b73bc --- /dev/null +++ b/a11y/tsconfig.app.tsbuildinfo @@ -0,0 +1,9 @@ +{ + "root": [ + "./src/app.tsx", + "./src/main.tsx", + "./src/vite-env.d.ts", + "./src/components/flightbooking.tsx" + ], + "version": "5.6.2" +} diff --git a/a11y/tsconfig.node.tsbuildinfo b/a11y/tsconfig.node.tsbuildinfo new file mode 100644 index 0000000..6f7f83a --- /dev/null +++ b/a11y/tsconfig.node.tsbuildinfo @@ -0,0 +1,6 @@ +{ + "root": [ + "./vite.config.ts" + ], + "version": "5.6.2" +}