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.tsx b/a11y/src/components/FlightBooking.tsx index 313cab3..27656c1 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -6,13 +6,30 @@ const MAX_PASSENGERS = 3; const FlightBooking = () => { const [adultCount, setAdultCount] = useState(1); + const [statusMessage, setStatusMessage] = useState(""); const incrementCount = () => { - setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1)); + setAdultCount((prev) => { + const newCount = Math.min(MAX_PASSENGERS, prev + 1); + if (newCount === MAX_PASSENGERS && prev < MAX_PASSENGERS) { + setStatusMessage(`최대 ${MAX_PASSENGERS}명까지 선택할 수 있습니다.`); + } else { + setStatusMessage(""); + } + return newCount; + }); }; const decrementCount = () => { - setAdultCount((prev) => Math.max(1, prev - 1)); + setAdultCount((prev) => { + const newCount = Math.max(1, prev - 1); + if (newCount === 1 && prev > 1) { + setStatusMessage("최소 1명은 선택해야 합니다."); + } else { + setStatusMessage(""); + } + return newCount; + }); }; return ( @@ -21,15 +38,33 @@ const FlightBooking = () => {
성인
- - {adultCount} -
+ {statusMessage && ( +
+ {statusMessage} +
+ )} ); 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", + }, });