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 @@
-
-
-
-
-
-
);
}
diff --git a/a11y/src/components/FlightBooking.css b/a11y/src/components/FlightBooking.css
index d9d6083..e801aa8 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,11 @@
border-radius: 4px;
cursor: pointer;
}
+
+.visually-hidden {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+ white-space: nowrap;
+}
diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx
index 313cab3..eae517e 100644
--- a/a11y/src/components/FlightBooking.tsx
+++ b/a11y/src/components/FlightBooking.tsx
@@ -1,36 +1,63 @@
-import { useState } from "react";
+import { useState } from 'react';
-import "./FlightBooking.css";
+import './FlightBooking.css';
const MAX_PASSENGERS = 3;
+const MIN_PASSENGERS = 1;
+const MAX_PASSENGERS_ALERT_MESSAGE = '최대 승객 수에 도달했습니다';
+const MIN_PASSENGERS_ALERT_MESSAGE = '최소 1명의 승객이 필요합니다';
const FlightBooking = () => {
const [adultCount, setAdultCount] = useState(1);
+ const [alertMessage, setAlertMessage] = useState('');
const incrementCount = () => {
+ if (adultCount === MAX_PASSENGERS) {
+ setAlertMessage(MAX_PASSENGERS_ALERT_MESSAGE);
+ return;
+ }
+
setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1));
};
const decrementCount = () => {
+ if (adultCount === MIN_PASSENGERS) {
+ setAlertMessage(MIN_PASSENGERS_ALERT_MESSAGE);
+ return;
+ }
setAdultCount((prev) => Math.max(1, prev - 1));
};
return (
-
-
항공권 예매
-
-
성인
-
-