woowacourse · 0jenn0 · Sep 22, 2024 · Sep 22, 2024 · Sep 22, 2024 · Sep 22, 2024
diff --git a/a11y/index.html b/a11y/index.html
@@ -1,16 +1,14 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Accessibility</title>
-</head>
-
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Accessibility</title>
+  </head>
 
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 </html>
diff --git a/a11y/src/App.tsx b/a11y/src/App.tsx
@@ -1,16 +1,16 @@
 import "./Typography.css";
 import "./App.css";
 
-import FlightBooking from "./components/FlightBooking";
+import { FlightBooking } from "./components/index";
 
 function App() {
   return (
     <div className="app">
-      <div className="app-main">
+      <main className="app-main">
         <div className="flight-booking-container">
           <FlightBooking />
         </div>
-      </div>
+      </main>
     </div>
   );
 }

diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx
diff --git a/a11y/src/components/FlightBooking.css → ...omponents/FlightBooking/FlightBooking.css b/a11y/src/components/FlightBooking.css → ...omponents/FlightBooking/FlightBooking.css
@@ -1,4 +1,5 @@
 .flight-booking {
+  position: relative;
   background-color: white;
   border-radius: 8px;
   padding: 20px;
@@ -34,7 +35,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 +62,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/FlightBooking.tsx b/a11y/src/components/FlightBooking/FlightBooking.tsx
@@ -0,0 +1,84 @@
+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(MIN_PASSENGERS);
+  const [statusMessage, setStatusMessage] = useState<string | null>(null);
+  const [toastMessage, setToastMessage] = useState<string | null>(null);
+
+  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(MIN_PASSENGERS, prev - 1));
+
+    if (adultCount === MIN_PASSENGERS) {
+      setToastMessage(ALERT_MESSAGE.min);
+    }
+  };
+
+  return (
+    <div className="flight-booking">
+      <h2 className="heading-2-text">항공권 예매</h2>
+      <div className="passenger-count">
+        <span className="body-text">성인</span>
+        <div className="counter">
+          <button
+            className="button-text"
+            onClick={decrementCount}
+            aria-label={STATUS_MESSAGE.decrease}
+          >
+            -
+          </button>
+          <span aria-live="polite">
+            <span className="visually-hidden">{statusMessage}</span>
+            {adultCount}
+          </span>
+          <button
+            className="button-text"
+            onClick={incrementCount}
+            aria-label={STATUS_MESSAGE.increase}
+          >
+            +
+          </button>
+        </div>
+      </div>
+      <button className="search-button">항공편 검색</button>
+      {toastMessage && <Toast>{toastMessage}</Toast>}
+    </div>
+  );
+};
+
+export default FlightBooking;
diff --git a/a11y/src/components/Toast/Toast.css 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
@@ -0,0 +1,11 @@
+import "./Toast.css";
+
+const Toast = ({ children }: React.PropsWithChildren) => {
+  return (
+    <span className="toast" aria-live="polite">
+      {children}
+    </span>
+  );
+};
+
+export default Toast;
diff --git a/a11y/src/components/index.ts b/a11y/src/components/index.ts
@@ -0,0 +1,2 @@
+export { default as FlightBooking } from "./FlightBooking/FlightBooking";
+export { default as Toast } from "./Toast/Toast";
diff --git 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",
+  },
 });
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default as FlightBooking } from "./FlightBooking/FlightBooking";
		export { default as Toast } from "./Toast/Toast";