From 18e0f2a3ddc13ccf122c6e1a72ac10cbbd99b25e Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sun, 22 Sep 2024 18:22:51 +0900 Subject: [PATCH 1/8] =?UTF-8?q?feat(index.html):=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 | 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 4ddf26f25034dbcbf9ab5bb4f93dd13bc252bc31 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sun, 22 Sep 2024 18:28:08 +0900 Subject: [PATCH 2/8] =?UTF-8?q?refactor(App):=20=EC=8B=9C=EB=A7=A8?= =?UTF-8?q?=ED=8B=B1=20=ED=83=9C=EA=B7=B8=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y/src/App.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/a11y/src/App.tsx b/a11y/src/App.tsx index a8159f9..1ebdee0 100644 --- a/a11y/src/App.tsx +++ b/a11y/src/App.tsx @@ -6,11 +6,11 @@ import FlightBooking from "./components/FlightBooking"; function App() { return (
-
+
-
+
); } From b7f5e0046ce8289dcdd3b0bd2eda6e3bfeef5873 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sun, 22 Sep 2024 18:34:45 +0900 Subject: [PATCH 3/8] =?UTF-8?q?refactor(FlightBooking):=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=ED=96=A5=EC=83=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y/src/components/FlightBooking.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx index 313cab3..d1dc9b2 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -21,11 +21,19 @@ const FlightBooking = () => {
성인
- - {adultCount} -
From 0462e3d0a6c1c27c76d57021621edc89db05bf04 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sun, 22 Sep 2024 19:04:48 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat(FlightBooking):=20=EC=8A=B9=EA=B0=9D?= =?UTF-8?q?=EC=88=98=20=EB=B3=80=EA=B2=BD=20=EC=82=AC=ED=95=AD=EC=97=90=20?= =?UTF-8?q?=EB=8C=80=ED=95=9C=20=EC=8B=A4=EC=8B=9C=EA=B0=84=20=EC=95=8C?= =?UTF-8?q?=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/src/components/FlightBooking.css | 12 +++++++++++- a11y/src/components/FlightBooking.tsx | 17 ++++++++++++++--- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/a11y/src/components/FlightBooking.css b/a11y/src/components/FlightBooking.css index d9d6083..f2e8ebc 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,13 @@ border-radius: 4px; cursor: pointer; } + +.visually-hidden { + position: absolute !important; + height: 1px; + width: 1px; + overflow: hidden; + clip: rect(1px 1px 1px 1px); + clip: rect(1px, 1px, 1px, 1px); + white-space: nowrap; +} diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx index d1dc9b2..719273b 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking.tsx @@ -6,12 +6,20 @@ const MAX_PASSENGERS = 3; const FlightBooking = () => { const [adultCount, setAdultCount] = useState(1); + const [statusMessage, setStatusMessage] = useState(null); + + const STATUS_MESSAGE = { + increase: "성인 승객 증가 ", + decrease: "성인 승객 감소 ", + }; const incrementCount = () => { + setStatusMessage(STATUS_MESSAGE.increase); setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1)); }; const decrementCount = () => { + setStatusMessage(STATUS_MESSAGE.decrease); setAdultCount((prev) => Math.max(1, prev - 1)); }; @@ -24,15 +32,18 @@ const FlightBooking = () => { - {adultCount} + + {statusMessage} + {adultCount} + From 08c55bed79a9ee5102e79f00861ce244b8bb3873 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sun, 22 Sep 2024 19:47:59 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat(toast):=20=ED=86=A0=EC=8A=A4=ED=8A=B8?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=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/Toast/Toast.css | 11 +++++++++++ a11y/src/components/Toast/Toast.tsx | 11 +++++++++++ a11y/src/components/index.ts | 1 + 3 files changed, 23 insertions(+) create mode 100644 a11y/src/components/Toast/Toast.css create mode 100644 a11y/src/components/Toast/Toast.tsx create mode 100644 a11y/src/components/index.ts diff --git a/a11y/src/components/Toast/Toast.css b/a11y/src/components/Toast/Toast.css new file mode 100644 index 0000000..e2bfdbd --- /dev/null +++ b/a11y/src/components/Toast/Toast.css @@ -0,0 +1,11 @@ +.toast { + background-color: black; + border-radius: 8px; + padding: 15px 20px; + color: white; + + position: absolute; + bottom: -4rem; + left: 0; + right: 0; +} diff --git a/a11y/src/components/Toast/Toast.tsx b/a11y/src/components/Toast/Toast.tsx new file mode 100644 index 0000000..3df620b --- /dev/null +++ b/a11y/src/components/Toast/Toast.tsx @@ -0,0 +1,11 @@ +import "./Toast.css"; + +const Toast = ({ children }: React.PropsWithChildren) => { + return ( + + {children} + + ); +}; + +export default Toast; diff --git a/a11y/src/components/index.ts b/a11y/src/components/index.ts new file mode 100644 index 0000000..367caca --- /dev/null +++ b/a11y/src/components/index.ts @@ -0,0 +1 @@ +export { default as Toast } from "./Toast/Toast"; From 9860c13f05662e7640e9b35bbaf981d6da3af840 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sun, 22 Sep 2024 19:49:40 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat(FlightBooking):=20=EC=B5=9C=EC=86=8C/?= =?UTF-8?q?=EC=B5=9C=EB=8C=80=20=EA=B0=92=20=EB=8F=84=EB=8B=AC=20=EC=8B=9C?= =?UTF-8?q?=20=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?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{ => FlightBooking}/FlightBooking.css | 1 + .../{ => FlightBooking}/FlightBooking.tsx | 41 +++++++++++++++---- a11y/src/components/index.ts | 1 + 3 files changed, 36 insertions(+), 7 deletions(-) rename a11y/src/components/{ => FlightBooking}/FlightBooking.css (98%) rename a11y/src/components/{ => FlightBooking}/FlightBooking.tsx (57%) diff --git a/a11y/src/components/FlightBooking.css b/a11y/src/components/FlightBooking/FlightBooking.css similarity index 98% rename from a11y/src/components/FlightBooking.css rename to a11y/src/components/FlightBooking/FlightBooking.css index f2e8ebc..5e60284 100644 --- a/a11y/src/components/FlightBooking.css +++ b/a11y/src/components/FlightBooking/FlightBooking.css @@ -1,4 +1,5 @@ .flight-booking { + position: relative; background-color: white; border-radius: 8px; padding: 20px; diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking/FlightBooking.tsx similarity index 57% rename from a11y/src/components/FlightBooking.tsx rename to a11y/src/components/FlightBooking/FlightBooking.tsx index 719273b..b20bd6f 100644 --- a/a11y/src/components/FlightBooking.tsx +++ b/a11y/src/components/FlightBooking/FlightBooking.tsx @@ -1,26 +1,52 @@ -import { useState } from "react"; +import { useState, useEffect } from "react"; import "./FlightBooking.css"; +import Toast from "../Toast/Toast"; const MAX_PASSENGERS = 3; +const MIN_PASSENGERS = 1; + +const STATUS_MESSAGE = { + increase: "성인 승객 증가 ", + decrease: "성인 승객 감소 ", +}; + +const ALERT_MESSAGE = { + min: "최소 승객 수에 도달했습니다.", + max: "최대 승객 수에 도달했습니다.", +}; const FlightBooking = () => { - const [adultCount, setAdultCount] = useState(1); + const [adultCount, setAdultCount] = useState(MIN_PASSENGERS); const [statusMessage, setStatusMessage] = useState(null); + const [toastMessage, setToastMessage] = useState(null); - const STATUS_MESSAGE = { - increase: "성인 승객 증가 ", - decrease: "성인 승객 감소 ", - }; + useEffect(() => { + if (toastMessage) { + const timer = setTimeout(() => { + setToastMessage(null); + }, 1000 * 3); + + return () => clearTimeout(timer); + } + }, [toastMessage]); const incrementCount = () => { setStatusMessage(STATUS_MESSAGE.increase); setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1)); + + if (adultCount === MAX_PASSENGERS) { + setToastMessage(ALERT_MESSAGE.max); + } }; const decrementCount = () => { setStatusMessage(STATUS_MESSAGE.decrease); - setAdultCount((prev) => Math.max(1, prev - 1)); + setAdultCount((prev) => Math.max(MIN_PASSENGERS, prev - 1)); + + if (adultCount === MIN_PASSENGERS) { + setToastMessage(ALERT_MESSAGE.min); + } }; return ( @@ -50,6 +76,7 @@ const FlightBooking = () => {
+ {toastMessage && {toastMessage}} ); }; diff --git a/a11y/src/components/index.ts b/a11y/src/components/index.ts index 367caca..64bc7d0 100644 --- a/a11y/src/components/index.ts +++ b/a11y/src/components/index.ts @@ -1 +1,2 @@ +export { default as FlightBooking } from "./FlightBooking/FlightBooking"; export { default as Toast } from "./Toast/Toast"; From ba2b32c5b0ac6a9ba95e9d2fe4202a477a7904df Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sun, 22 Sep 2024 19:50:07 +0900 Subject: [PATCH 7/8] =?UTF-8?q?chore(App):=20import=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y/src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/a11y/src/App.tsx b/a11y/src/App.tsx index 1ebdee0..fb7e13f 100644 --- a/a11y/src/App.tsx +++ b/a11y/src/App.tsx @@ -1,7 +1,7 @@ import "./Typography.css"; import "./App.css"; -import FlightBooking from "./components/FlightBooking"; +import { FlightBooking } from "./components/index"; function App() { return ( From 756937d678a3126352d7db58adb687ac4ba49de4 Mon Sep 17 00:00:00 2001 From: river <130737187+0jenn0@users.noreply.github.com> Date: Sun, 22 Sep 2024 19:50:26 +0900 Subject: [PATCH 8/8] =?UTF-8?q?chore(vite.config):=20server=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- a11y/vite.config.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/a11y/vite.config.ts b/a11y/vite.config.ts index 9cc50ea..d8d4e6c 100644 --- a/a11y/vite.config.ts +++ b/a11y/vite.config.ts @@ -4,4 +4,7 @@ import react from "@vitejs/plugin-react"; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], + server: { + host: "0.0.0.0", + }, });