woowacourse · keemsebin · Sep 20, 2025 · Sep 20, 2025 · Sep 20, 2025 · Sep 20, 2025
diff --git a/a11y/index.html b/a11y/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
 
 <head>
   <meta charset="UTF-8" />

diff --git a/a11y/src/App.tsx b/a11y/src/App.tsx
@@ -6,11 +6,11 @@ import FlightBooking from "./components/FlightBooking";
 function App() {
   return (
     <div className="app">
-      <div className="app-main">
-        <div className="flight-booking-container">
+      <main className="app-main">
+        <section className="flight-booking-container">
           <FlightBooking />
-        </div>
-      </div>
+        </section>
+      </main>
     </div>
   );
 }

diff --git a/a11y/src/Typography.css b/a11y/src/Typography.css
@@ -32,3 +32,8 @@
   font-weight: 500;
   line-height: 100%;
 }
+
+.button-text:disabled {
+  color: #c0c0c042;
+  cursor: not-allowed;
+}
diff --git 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;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
diff --git a/a11y/src/components/FlightBooking.tsx b/a11y/src/components/FlightBooking.tsx
@@ -15,20 +15,43 @@ const FlightBooking = () => {
     setAdultCount((prev) => Math.max(1, prev - 1));
   };
 
+  const getLimitMessage = () => {
+    if (adultCount <= 1) {
+      return "최소 승객 수에 도달했습니다.";
+    }
+    if (adultCount === MAX_PASSENGERS) {
+      return "최대 승객 수에 도달했습니다.";
+    }
+    return "";
+  };
+
   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}>
+          <button
+            aria-label="성인 승객 감소"
+            className="button-text"
+            disabled={adultCount === 1}
+            onClick={decrementCount}
+          >
             -
           </button>
-          <span>{adultCount}</span>
-          <button className="button-text" onClick={incrementCount}>
+          <span aria-live="polite">{adultCount}</span>
+          <button
+            aria-label="성인 승객 증가"
+            className="button-text"
+            disabled={adultCount >= MAX_PASSENGERS}
+            onClick={incrementCount}
+          >
             +
           </button>
         </div>
+        <div className="visually-hidden" aria-live="polite">
+          {getLimitMessage()}
+        </div>
       </div>
       <button className="search-button">항공편 검색</button>
     </div>

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",
+  },
 });
diff --git a/package-lock.json b/package-lock.json