From e8de0fc2594d13a93010aec01d3e55f0d3cafabf Mon Sep 17 00:00:00 2001 From: jayming66 Date: Sat, 21 Sep 2024 16:23:53 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat(index.html):=20=EC=96=B8=EC=96=B4=20?= =?UTF-8?q?=ED=95=9C=EA=B5=AD=EC=96=B4=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= 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 049cc3896d726cfb4348e3b1c7f3668e683a05d8 Mon Sep 17 00:00:00 2001 From: jayming66 Date: Sat, 21 Sep 2024 16:24:11 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat(App.tsx):=20=EC=8B=9C=EB=A9=98?= =?UTF-8?q?=ED=8B=B1=20=ED=83=9C=EA=B7=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y/src/App.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/a11y/src/App.tsx b/a11y/src/App.tsx index a8159f9..986a4fc 100644 --- a/a11y/src/App.tsx +++ b/a11y/src/App.tsx @@ -1,16 +1,16 @@ -import "./Typography.css"; -import "./App.css"; +import './Typography.css'; +import './App.css'; -import FlightBooking from "./components/FlightBooking"; +import FlightBooking from './components/FlightBooking'; function App() { return ( -
-
-
+
+
+
-
-
+ +
); } From 8ee2d8af54bb24125ecca81a866c5311f5065647 Mon Sep 17 00:00:00 2001 From: jayming66 Date: Sat, 21 Sep 2024 16:24:38 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat(FlightBooking):=20aria-label,=20aria-l?= =?UTF-8?q?ive=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y/src/components/FlightBooking.tsx | 30 +++++++++++++++++---------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx index 313cab3..7ff40c6 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -1,6 +1,6 @@ -import { useState } from "react"; +import { useState } from 'react'; -import "./FlightBooking.css"; +import './FlightBooking.css'; const MAX_PASSENGERS = 3; @@ -16,21 +16,29 @@ const FlightBooking = () => { }; return ( -
-

항공권 예매

-
- 성인 -
- - {adultCount} -
- +
); }; From b7c36034ba6add448e3466161580a42bf2bcde99 Mon Sep 17 00:00:00 2001 From: jayming66 Date: Sat, 21 Sep 2024 16:49:48 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat(FlightBooking):=20=EC=8A=B9=EA=B0=9D?= =?UTF-8?q?=20=EC=B5=9C=EC=86=8C/=EC=B5=9C=EB=8C=80=20=EA=B0=92=EC=97=90?= =?UTF-8?q?=20=EB=8C=80=ED=95=9C=20=EC=95=8C=EB=A6=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y/package.json | 2 +- a11y/src/components/FlightBooking.css | 10 +++++++++- a11y/src/components/FlightBooking.tsx | 19 +++++++++++++++++++ 3 files changed, 29 insertions(+), 2 deletions(-) diff --git a/a11y/package.json b/a11y/package.json index 1148c94..9396d14 100644 --- a/a11y/package.json +++ b/a11y/package.json @@ -4,7 +4,7 @@ "version": "0.0.0", "type": "module", "scripts": { - "dev": "vite", + "dev": "vite --host", "build": "tsc -b && vite build", "lint": "eslint .", "preview": "vite preview" 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 7ff40c6..eae517e 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -3,15 +3,28 @@ import { useState } from 'react'; 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)); }; @@ -29,6 +42,11 @@ const FlightBooking = () => { - {adultCount} + {alertMessage && ( +
+ {alertMessage} +
+ )}
+ );