From 62616dc1a56ae7a2e877fe5dcf6a15928fc88c72 Mon Sep 17 00:00:00 2001 From: novice0840 Date: Thu, 19 Sep 2024 10:35:54 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20step1=20=EC=96=B8=EC=96=B4=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y/index.html | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) 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 @@ - - - - - - - - Accessibility - - - -
- - + + + + + + + Accessibility + + +
+ + From 8a597fae313f6414ebe210e17bbef48e021596d8 Mon Sep 17 00:00:00 2001 From: novice0840 Date: Thu, 19 Sep 2024 10:36:55 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20step2=20=EC=8B=9C=EB=A7=A8=ED=8B=B1?= =?UTF-8?q?=20=ED=83=9C=EA=B7=B8=20=EC=82=AC=EC=9A=A9=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y/src/App.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 (
-
-
+
+
-
-
+ +
); } From 8579a31e8088ddf4a4b7f5e5594f4e0eb5e61990 Mon Sep 17 00:00:00 2001 From: novice0840 Date: Thu, 19 Sep 2024 10:52:35 +0900 Subject: [PATCH 3/4] feat: Step3, 4 --- a11y/src/components/FlightBooking.css | 14 +++++++++++++- a11y/src/components/FlightBooking.tsx | 18 ++++++++++++++---- 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/a11y/src/components/FlightBooking.css b/a11y/src/components/FlightBooking.css index d9d6083..5235c41 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,15 @@ 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); + white-space: nowrap; + border: 0; +} diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx index 313cab3..3933026 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -19,13 +19,23 @@ const FlightBooking = () => {

항공권 예매

- 성인 +
- - {adultCount} -
From bbf3271c736edaa8593393f88f6ce59a512a1886 Mon Sep 17 00:00:00 2001 From: novice0840 Date: Thu, 19 Sep 2024 10:53:54 +0900 Subject: [PATCH 4/4] feat: Step 5 --- a11y/src/components/FlightBooking.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx index 3933026..f0f8c75 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -6,12 +6,23 @@ const MAX_PASSENGERS = 3; const FlightBooking = () => { const [adultCount, setAdultCount] = useState(1); + const [statusMessage, setStatusMessage] = useState(""); const incrementCount = () => { + if (adultCount === MAX_PASSENGERS) { + setStatusMessage("최대 승객 수에 도달했습니다"); + return; + } + setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1)); }; const decrementCount = () => { + if (adultCount === 1) { + setStatusMessage("최소 1명의 승객이 필요합니다"); + return; + } + setAdultCount((prev) => Math.max(1, prev - 1)); }; @@ -41,6 +52,11 @@ const FlightBooking = () => {
+ {statusMessage && ( +
+ {statusMessage} +
+ )} ); };