From 65e60f4661907cba6fe65fd0e2da9c6172649db9 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 23 Sep 2024 16:54:24 +0900 Subject: [PATCH 1/6] =?UTF-8?q?chore:=20html=EC=9D=98=20lang=20=EC=86=8D?= =?UTF-8?q?=EC=84=B1=EC=9D=84=20ko=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y/index.html | 27 ++++++++++++--------------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/a11y/index.html b/a11y/index.html index 12fa3e7..8fd9bcf 100644 --- a/a11y/index.html +++ b/a11y/index.html @@ -1,16 +1,13 @@ - - - - - - - - Accessibility - - - -
- - - + + + + + + + Accessibility + + +
+ + From e258d2494b314b64e3863e66e991973ebc81a924 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 23 Sep 2024 16:56:28 +0900 Subject: [PATCH 2/6] =?UTF-8?q?chore:=20ip=20=EC=A3=BC=EC=86=8C=EB=A5=BC?= =?UTF-8?q?=20=EB=B9=A0=EB=A5=B4=EA=B2=8C=20=EC=95=8C=EA=B8=B0=20=EC=9C=84?= =?UTF-8?q?=ED=95=9C=20--host=20=EC=86=8D=EC=84=B1=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 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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" From 2bc54d56fc8c39add38cd7a088984f8ba859c7e0 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 23 Sep 2024 16:58:03 +0900 Subject: [PATCH 3/6] =?UTF-8?q?chore:=20=EC=A0=91=EA=B7=BC=EC=84=B1=20?= =?UTF-8?q?=EA=B0=9C=EC=84=A0=EC=9D=84=20=EC=9C=84=ED=95=9C=20html=20?= =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - main, section 태그를 사용 --- 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 5492c9a5ae92be7026d9b1c59308d9def6f93a26 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 23 Sep 2024 16:58:43 +0900 Subject: [PATCH 4/6] =?UTF-8?q?feat:=20=ED=98=84=EC=9E=AC=20=EC=8A=B9?= =?UTF-8?q?=EA=B0=9D=20=EC=88=98=20=EC=A0=95=EB=B3=B4=EB=A5=BC=20=EC=9D=8C?= =?UTF-8?q?=EC=84=B1=EC=9C=BC=EB=A1=9C=20=EC=95=8C=EB=A0=A4=EC=A3=BC?= =?UTF-8?q?=EA=B8=B0=20=EC=9C=84=ED=95=9C=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?= =?UTF-8?q?=ED=9B=85=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y/src/hooks/useDebounce.ts | 25 +++++++++++++++++++++++++ a11y/src/hooks/useDebouncedATMessage.ts | 22 ++++++++++++++++++++++ 2 files changed, 47 insertions(+) create mode 100644 a11y/src/hooks/useDebounce.ts create mode 100644 a11y/src/hooks/useDebouncedATMessage.ts diff --git a/a11y/src/hooks/useDebounce.ts b/a11y/src/hooks/useDebounce.ts new file mode 100644 index 0000000..320d44e --- /dev/null +++ b/a11y/src/hooks/useDebounce.ts @@ -0,0 +1,25 @@ +import { useCallback, useRef } from "react"; + +const useDebounce = ) => void>( + func: T, + delayTime: number +) => { + const debounceRef = useRef | null>(null); + + const debouncedCallback = useCallback( + (...args: Parameters) => { + if (debounceRef.current) { + clearTimeout(debounceRef.current); + } + + debounceRef.current = setTimeout(() => { + func(...args); + }, delayTime); + }, + [func, delayTime] + ); + + return debouncedCallback; +}; + +export default useDebounce; diff --git a/a11y/src/hooks/useDebouncedATMessage.ts b/a11y/src/hooks/useDebouncedATMessage.ts new file mode 100644 index 0000000..f0cbfa2 --- /dev/null +++ b/a11y/src/hooks/useDebouncedATMessage.ts @@ -0,0 +1,22 @@ +import { useState } from "react"; +import useDebounce from "./useDebounce"; + +const MESSAGE_MAINTAIN_TIME = 500; + +const useDebouncedATMessage = (delayTime: number) => { + const [messageForATUser, setMessageForATUser] = useState(""); + + const handleDebouncedMessage = useDebounce((message: string) => { + setMessageForATUser(message); + setTimeout(() => { + setMessageForATUser(""); + }, MESSAGE_MAINTAIN_TIME); + }, delayTime); + + return { + messageForATUser, + handleDebouncedMessage, + }; +}; + +export default useDebouncedATMessage; From 30079151579b14dc9087d78b284aaa35155b5d12 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 23 Sep 2024 16:59:49 +0900 Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=ED=98=84=EC=9E=AC=20=EC=8A=B9?= =?UTF-8?q?=EA=B0=9D=20=EC=88=98=20=EC=A0=95=EB=B3=B4,=20=EC=8A=B9?= =?UTF-8?q?=EA=B0=9D=20=EC=88=98=20=EC=A0=95=EC=B1=85=20=EC=A0=95=EB=B3=B4?= =?UTF-8?q?=EB=A5=BC=20=EC=95=8C=EB=A0=A4=EC=A3=BC=EB=8A=94=20=EC=BB=A4?= =?UTF-8?q?=EC=8A=A4=ED=85=80=20=ED=9B=85=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y/src/hooks/useAdultCount.ts | 49 +++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 a11y/src/hooks/useAdultCount.ts diff --git a/a11y/src/hooks/useAdultCount.ts b/a11y/src/hooks/useAdultCount.ts new file mode 100644 index 0000000..9c93e4d --- /dev/null +++ b/a11y/src/hooks/useAdultCount.ts @@ -0,0 +1,49 @@ +import { useState } from "react"; +import useDebouncedATMessage from "./useDebouncedATMessage"; + +const MAX_PASSENGERS = 3; + +const useAdultCount = () => { + const [adultCount, setAdultCount] = useState(1); + const [alertMessage, setAlertMessage] = useState(""); + const { handleDebouncedMessage, messageForATUser } = + useDebouncedATMessage(200); + + const incrementCount = () => { + if (adultCount + 1 > MAX_PASSENGERS) { + alert("더이상 승객을 추가할 수 없습니다."); + setAlertMessage("더이상 승객을 추가할 수 없습니다."); + return; + } + if (alertMessage) { + setAlertMessage(""); + } + + handleDebouncedMessage(`성인 승객 수는 ${adultCount + 1}명 입니다.`); + setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1)); + }; + + const decrementCount = () => { + if (adultCount === 1) { + alert("승객은 최소 1명 이상이어야 합니다."); + setAlertMessage("승객은 최소 1명 이상이어야 합니다."); + return; + } + if (alertMessage) { + setAlertMessage(""); + } + + handleDebouncedMessage(`성인 승객 수는 ${adultCount - 1}명 입니다.`); + setAdultCount((prev) => Math.max(1, prev - 1)); + }; + + return { + adultCount, + incrementCount, + decrementCount, + alertMessage, + messageForATUser, + }; +}; + +export default useAdultCount; From 9204e621f7545399e14eae5c3ffd8153db0754bd Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 23 Sep 2024 17:00:47 +0900 Subject: [PATCH 6/6] =?UTF-8?q?feat:=20=EC=A0=91=EA=B7=BC=EC=84=B1?= =?UTF-8?q?=EC=9D=84=20=EA=B0=9C=EC=84=A0=ED=95=9C=20=EC=8A=B9=EA=B0=9D=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EC=9E=85=EB=A0=A5=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y/src/components/FlightBooking.css | 16 ++++++++- a11y/src/components/FlightBooking.tsx | 47 +++++++++++++++++++-------- 2 files changed, 48 insertions(+), 15 deletions(-) diff --git a/a11y/src/components/FlightBooking.css b/a11y/src/components/FlightBooking.css index d9d6083..5ae3543 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,17 @@ border-radius: 4px; cursor: pointer; } + +.visually-hidden { + overflow: hidden; + white-space: nowrap; + clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + position: absolute; + width: 1px; + height: 1px; + margin: 0; + padding: 0; + border: 0; +} diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx index 313cab3..b2bf3dc 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -1,19 +1,15 @@ -import { useState } from "react"; - import "./FlightBooking.css"; -const MAX_PASSENGERS = 3; +import useAdultCount from "../hooks/useAdultCount"; const FlightBooking = () => { - const [adultCount, setAdultCount] = useState(1); - - const incrementCount = () => { - setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1)); - }; - - const decrementCount = () => { - setAdultCount((prev) => Math.max(1, prev - 1)); - }; + const { + adultCount, + incrementCount, + decrementCount, + alertMessage, + messageForATUser, + } = useAdultCount(); return (
@@ -21,15 +17,38 @@ const FlightBooking = () => {
성인
- + {messageForATUser && ( +
+

{messageForATUser}

+
+ )} {adultCount} -
+ {alertMessage && ( +
+ {alertMessage} +
+ )}
);