From 8351263c83ebbfb371a390f2d457bce5982802f4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=90=E1=85=A2=E1=84=92=E1=85=AE?= =?UTF-8?q?=E1=86=AB?= Date: Mon, 23 Sep 2024 03:53:55 +0900 Subject: [PATCH 1/4] =?UTF-8?q?fix:=20HTML=20lang=20=EB=B3=80=EA=B2=BD=20?= =?UTF-8?q?=EB=B0=8F=20=EC=8B=9C=EB=A7=A8=ED=8B=B1=20=ED=83=9C=EA=B7=B8=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y/index.html | 2 +- a11y/package.json | 4 ++-- a11y/src/App.tsx | 8 ++++---- 3 files changed, 7 insertions(+), 7 deletions(-) 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/package.json b/a11y/package.json index 1148c94..395b869 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" @@ -26,4 +26,4 @@ "typescript-eslint": "^8.0.1", "vite": "^5.4.1" } -} +} \ No newline at end of file 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 fff1a95959590c6f0fae3f2c2c860469f7bfb781 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=90=E1=85=A2=E1=84=92=E1=85=AE?= =?UTF-8?q?=E1=86=AB?= Date: Mon, 23 Sep 2024 03:58:25 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20FlightBooking=20=EC=8B=9C=EB=A7=A8?= =?UTF-8?q?=ED=8B=B1=20=ED=83=9C=EA=B7=B8=20=EC=A0=81=EC=9A=A9=20=EB=B0=8F?= =?UTF-8?q?=20aria-label=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 | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx index 313cab3..cd3d376 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -16,22 +16,22 @@ const FlightBooking = () => { }; return ( -
+

항공권 예매

성인
- {adultCount} -
-
+ ); }; From 6cbc297157b3598c0f76afdfe9b4d837abc5b017 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=90=E1=85=A2=E1=84=92=E1=85=AE?= =?UTF-8?q?=E1=86=AB?= Date: Mon, 23 Sep 2024 04:06:52 +0900 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=EC=B5=9C=EB=8C=80=20=EC=B5=9C?= =?UTF-8?q?=EC=86=8C=20=EC=8A=B9=EA=B0=9D=20alert=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y/src/components/FlightBooking.css | 5 +++++ a11y/src/components/FlightBooking.tsx | 20 ++++++++++++++++++++ 2 files changed, 25 insertions(+) diff --git a/a11y/src/components/FlightBooking.css b/a11y/src/components/FlightBooking.css index d9d6083..0880f93 100644 --- a/a11y/src/components/FlightBooking.css +++ b/a11y/src/components/FlightBooking.css @@ -61,3 +61,8 @@ border-radius: 4px; cursor: pointer; } + +.visually-hidden { + position: fixed; + display: hidden; +} \ No newline at end of file diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx index cd3d376..cef88e1 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -2,19 +2,34 @@ import { useState } from "react"; import "./FlightBooking.css"; +const MIN_PASSENGERS = 1; const MAX_PASSENGERS = 3; const FlightBooking = () => { + const [alertMessage, setAlertMessage] = useState(''); const [adultCount, setAdultCount] = useState(1); const incrementCount = () => { + if (adultCount === MAX_PASSENGERS) { + setAlertMessage("최대 승객 수에 도달했습니다.") + + return; + } + setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1)); }; const decrementCount = () => { + if (adultCount === MIN_PASSENGERS) { + setAlertMessage("최소 1명의 승객이 필요합니다.") + + return; + } + setAdultCount((prev) => Math.max(1, prev - 1)); }; + return (

항공권 예매

@@ -30,6 +45,11 @@ const FlightBooking = () => { + {alertMessage && ( +
+ {alertMessage} +
+ )}
); From ef3e634984d3b90f52c6298fbbf4de116ea770b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=90=E1=85=A2=E1=84=92=E1=85=AE?= =?UTF-8?q?=E1=86=AB?= Date: Mon, 23 Sep 2024 04:08:26 +0900 Subject: [PATCH 4/4] =?UTF-8?q?fix:=20css=20visually=20hidden=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y/src/components/FlightBooking.css | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/a11y/src/components/FlightBooking.css b/a11y/src/components/FlightBooking.css index 0880f93..f99e800 100644 --- a/a11y/src/components/FlightBooking.css +++ b/a11y/src/components/FlightBooking.css @@ -63,6 +63,15 @@ } .visually-hidden { - position: fixed; - display: hidden; + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: 0; + padding: 0; + + white-space: nowrap; + clip-path: inset(100%); + clip: rect(0 0 0 0); + overflow: hidden; } \ No newline at end of file