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..a941b16 100644
--- a/a11y/src/components/FlightBooking.css
+++ b/a11y/src/components/FlightBooking.css
@@ -61,3 +61,14 @@
border-radius: 4px;
cursor: pointer;
}
+
+.visually-hidden {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ border: 0;
+}
\ No newline at end of file
diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx
index 313cab3..64d4d14 100644
--- a/a11y/src/components/FlightBooking.tsx
+++ b/a11y/src/components/FlightBooking.tsx
@@ -3,35 +3,65 @@ import { useState } from "react";
import "./FlightBooking.css";
const MAX_PASSENGERS = 3;
+const MIN_PASSENGERS = 1;
const FlightBooking = () => {
const [adultCount, setAdultCount] = useState(1);
+ const [announcement, setAnnouncement] = useState("");
const incrementCount = () => {
- setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1));
+ setAdultCount((prev) => {
+ if (prev < MAX_PASSENGERS) {
+ const newValue = prev + 1;
+ setAnnouncement(`성인 승객 증가 ${newValue}`);
+ return newValue;
+ } else {
+ setAnnouncement("최대 승객 수에 도달하였습니다.");
+ return prev;
+ }
+ });
};
const decrementCount = () => {
- setAdultCount((prev) => Math.max(1, prev - 1));
+ setAdultCount((prev) => {
+ if (prev > MIN_PASSENGERS) {
+ const newValue = prev - 1;
+ setAnnouncement(`성인 승객 감소 ${newValue}`);
+ return newValue;
+ } else {
+ // 필요하다면 최소 안내도 추가 가능
+ setAnnouncement("최소 1명의 승객이 필요합니다.");
+ return prev;
+ }
+ });
};
return (
-
+
항공권 예매
성인
-
-
+ {announcement}
+
+
);
};