From 58fbc98b15a0765f65ece53d89f4c1001c214a86 Mon Sep 17 00:00:00 2001 From: hanyoung Date: Tue, 17 Sep 2024 12:18:52 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20index.html=20=EC=96=B8=EC=96=B4?= =?UTF-8?q?=EB=A5=BC=20=ED=95=9C=EA=B5=AD=EC=96=B4=EB=A1=9C=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 @@ - + From ad18060f9aaecee5befe026dcb2c9cbe17de207c Mon Sep 17 00:00:00 2001 From: hanyoung Date: Tue, 17 Sep 2024 12:48:16 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=EC=8B=9C=EB=A7=A8=ED=8B=B1=20?= =?UTF-8?q?=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.css | 4 ---- a11y/src/App.tsx | 12 +++++------- a11y/src/components/FlightBooking.tsx | 10 +++++----- 3 files changed, 10 insertions(+), 16 deletions(-) diff --git a/a11y/src/App.css b/a11y/src/App.css index 4dd5374..a5fa19f 100644 --- a/a11y/src/App.css +++ b/a11y/src/App.css @@ -9,10 +9,6 @@ margin: 0 auto; } -.app-main { - flex: 1; -} - .flight-booking-container { padding: 26px 24px; } diff --git a/a11y/src/App.tsx b/a11y/src/App.tsx index a8159f9..883a205 100644 --- a/a11y/src/App.tsx +++ b/a11y/src/App.tsx @@ -5,13 +5,11 @@ import FlightBooking from "./components/FlightBooking"; function App() { return ( -
-
-
- -
-
-
+
+
+ +
+
); } diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx index 313cab3..755515a 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -16,11 +16,11 @@ const FlightBooking = () => { }; return ( -
-

항공권 예매

+
+

항공권 예매

성인 -
+
@@ -28,10 +28,10 @@ const FlightBooking = () => { -
+
-
+ ); }; From 2d9b907f39b5bbf300883cf93804642ba92afe64 Mon Sep 17 00:00:00 2001 From: hanyoung Date: Tue, 17 Sep 2024 12:58:53 +0900 Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=EB=B2=84=ED=8A=BC=20=EC=A0=91?= =?UTF-8?q?=EA=B7=BC=EC=84=B1=20=ED=96=A5=EC=83=81=EC=8B=9C=ED=82=A4?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y/src/components/FlightBooking.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx index 755515a..d1cd9d2 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -21,11 +21,11 @@ const FlightBooking = () => {
성인
- {adultCount} -
From 8dfd196b0ccaa21e357b6b980b3f0bdb06f8c4d0 Mon Sep 17 00:00:00 2001 From: hanyoung Date: Tue, 17 Sep 2024 13:12:19 +0900 Subject: [PATCH 4/6] =?UTF-8?q?feat:=20=EC=8A=B9=EA=B0=9D=EC=88=98=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EC=82=AC=ED=95=AD=EC=97=90=20=EB=8C=80?= =?UTF-8?q?=ED=95=9C=20=EC=8B=A4=EC=8B=9C=EA=B0=84=20=EC=95=8C=EB=A6=BC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y/src/components/FlightBooking.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx index d1cd9d2..6dfa5fb 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -24,7 +24,7 @@ const FlightBooking = () => { - {adultCount} + {adultCount} From 838cc9cee7d994328eed22fd70283d23fe78d12b Mon Sep 17 00:00:00 2001 From: hanyoung Date: Tue, 17 Sep 2024 14:12:54 +0900 Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=EC=B5=9C=EC=86=8C/=EC=B5=9C?= =?UTF-8?q?=EB=8C=80=20=EA=B0=92=20=EB=8F=84=EB=8B=AC=20=EC=8B=9C=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=EC=95=8C?= =?UTF-8?q?=EB=A6=BC=20=EC=B6=94=EA=B0=80=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y/src/components/FlightBooking.css | 13 ++++++- a11y/src/components/FlightBooking.tsx | 38 ++++++++++++------ a11y/src/hooks/useCounter.ts | 56 +++++++++++++++++++++++++++ 3 files changed, 95 insertions(+), 12 deletions(-) create mode 100644 a11y/src/hooks/useCounter.ts diff --git a/a11y/src/components/FlightBooking.css b/a11y/src/components/FlightBooking.css index d9d6083..845f076 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,14 @@ border-radius: 4px; cursor: pointer; } + +.visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip-path: inset(50%); + border: 0; +} diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx index 6dfa5fb..9deb516 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -1,19 +1,30 @@ -import { useState } from "react"; - import "./FlightBooking.css"; +import { useCounter } from "../hooks/useCounter"; +const MIN_PASSENGERS = 1; const MAX_PASSENGERS = 3; -const FlightBooking = () => { - const [adultCount, setAdultCount] = useState(1); - - const incrementCount = () => { - setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1)); - }; +const ALERT_MESSAGE = { + min: "최소 승객 수에 도달했습니다.", + max: "최대 승객 수에 도달했습니다.", +}; - const decrementCount = () => { - setAdultCount((prev) => Math.max(1, prev - 1)); - }; +const FlightBooking = () => { + const { + count: adultCount, + alertMessage, + decrementCount, + incrementCount, + } = useCounter({ + min: { + value: MIN_PASSENGERS, + alertMessage: ALERT_MESSAGE.min, + }, + max: { + value: MAX_PASSENGERS, + alertMessage: ALERT_MESSAGE.max, + }, + }); return (
@@ -29,6 +40,11 @@ const FlightBooking = () => { + + {alertMessage && ( + + {alertMessage} + + )}
diff --git a/a11y/src/hooks/useCounter.ts b/a11y/src/hooks/useCounter.ts new file mode 100644 index 0000000..aeb3257 --- /dev/null +++ b/a11y/src/hooks/useCounter.ts @@ -0,0 +1,56 @@ +import { useState } from "react"; + +interface UseCounterParams { + min: { value: number; alertMessage: string }; + max: { value: number; alertMessage: string }; +} + +interface UseCounterReturn { + count: number; + alertMessage: string; + decrementCount: () => void; + incrementCount: () => void; +} + +export const useCounter = ({ min, max }: UseCounterParams): UseCounterReturn => { + const [count, setCount] = useState(min.value); + const [alertMessage, setAlertMessage] = useState(""); + + const getAlertMessage = (count: number): string => { + switch (count) { + case min.value - 1: + return min.alertMessage; + case max.value + 1: + return max.alertMessage; + default: + return ""; + } + }; + + const updateAlertMessage = (count: number) => { + setAlertMessage(getAlertMessage(count)); + }; + + const incrementCount = () => { + setCount((prev) => { + const nextCount = prev + 1; + updateAlertMessage(nextCount); + return Math.min(max.value, nextCount); + }); + }; + + const decrementCount = () => { + setCount((prev) => { + const nextCount = prev - 1; + updateAlertMessage(nextCount); + return Math.max(min.value, nextCount); + }); + }; + + return { + count, + alertMessage, + decrementCount, + incrementCount, + }; +}; From e2756286023f7202ac365ff4c666fb5da4fe81bd Mon Sep 17 00:00:00 2001 From: hanyoung Date: Tue, 17 Sep 2024 15:53:15 +0900 Subject: [PATCH 6/6] =?UTF-8?q?feat:=20=EC=B5=9C=EC=86=8C/=EC=B5=9C?= =?UTF-8?q?=EB=8C=80=20=EA=B0=92=20=EB=8F=84=EB=8B=AC=20=EC=8B=9C=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=20=EB=A9=94=EC=8B=9C=EC=A7=80=20=EC=95=8C?= =?UTF-8?q?=EB=A6=BC=20=EC=B6=94=EA=B0=80=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y/src/components/FlightBooking.tsx | 71 +++++++++++++++------------ a11y/src/hooks/useCounter.ts | 56 --------------------- 2 files changed, 40 insertions(+), 87 deletions(-) delete mode 100644 a11y/src/hooks/useCounter.ts diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx index 9deb516..af6ffb5 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -1,37 +1,46 @@ +import { useState } from "react"; + import "./FlightBooking.css"; -import { useCounter } from "../hooks/useCounter"; const MIN_PASSENGERS = 1; const MAX_PASSENGERS = 3; -const ALERT_MESSAGE = { - min: "최소 승객 수에 도달했습니다.", - max: "최대 승객 수에 도달했습니다.", -}; - const FlightBooking = () => { - const { - count: adultCount, - alertMessage, - decrementCount, - incrementCount, - } = useCounter({ - min: { - value: MIN_PASSENGERS, - alertMessage: ALERT_MESSAGE.min, - }, - max: { - value: MAX_PASSENGERS, - alertMessage: ALERT_MESSAGE.max, - }, - }); + const [adultCount, setAdultCount] = useState(1); + const [statusMessage, setStatusMessage] = useState(""); + + const resetStatusMessage = () => { + setTimeout(() => { + setStatusMessage(""); + }); + }; + + const incrementCount = () => { + if (adultCount === MAX_PASSENGERS) { + setStatusMessage("최대 승객 수에 도달했습니다"); + resetStatusMessage(); + return; + } + + setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1)); + }; + + const decrementCount = () => { + if (adultCount === MIN_PASSENGERS) { + setStatusMessage("최소 1명의 승객이 필요합니다"); + resetStatusMessage(); + return; + } + + setAdultCount((prev) => Math.max(1, prev - 1)); + }; return ( -
-

항공권 예매

+
+

항공권 예매

성인 -
+
@@ -39,15 +48,15 @@ const FlightBooking = () => { -
- {alertMessage && ( - - {alertMessage} - - )} +
+ {statusMessage && ( +
+ {statusMessage} +
+ )} -
+ ); }; diff --git a/a11y/src/hooks/useCounter.ts b/a11y/src/hooks/useCounter.ts deleted file mode 100644 index aeb3257..0000000 --- a/a11y/src/hooks/useCounter.ts +++ /dev/null @@ -1,56 +0,0 @@ -import { useState } from "react"; - -interface UseCounterParams { - min: { value: number; alertMessage: string }; - max: { value: number; alertMessage: string }; -} - -interface UseCounterReturn { - count: number; - alertMessage: string; - decrementCount: () => void; - incrementCount: () => void; -} - -export const useCounter = ({ min, max }: UseCounterParams): UseCounterReturn => { - const [count, setCount] = useState(min.value); - const [alertMessage, setAlertMessage] = useState(""); - - const getAlertMessage = (count: number): string => { - switch (count) { - case min.value - 1: - return min.alertMessage; - case max.value + 1: - return max.alertMessage; - default: - return ""; - } - }; - - const updateAlertMessage = (count: number) => { - setAlertMessage(getAlertMessage(count)); - }; - - const incrementCount = () => { - setCount((prev) => { - const nextCount = prev + 1; - updateAlertMessage(nextCount); - return Math.min(max.value, nextCount); - }); - }; - - const decrementCount = () => { - setCount((prev) => { - const nextCount = prev - 1; - updateAlertMessage(nextCount); - return Math.max(min.value, nextCount); - }); - }; - - return { - count, - alertMessage, - decrementCount, - incrementCount, - }; -};