Skip to content

[사전 미션 - 워밍업] - 캉골(김문경) 미션 제출합니다. #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mun-kyeong wants to merge 6 commits into
base: main
Choose a base branch
from
Open

[사전 미션 - 워밍업] - 캉골(김문경) 미션 제출합니다. #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
33eb382
chore: 환경세팅
mun-kyeong Sep 22, 2025
166f87d
feat: step-1 ) 언어 설정하기
mun-kyeong Sep 22, 2025
d448b90
feat: step-2 ) 시맨틱 태그 사용하기
mun-kyeong Sep 22, 2025
0c7a41c
feat: step-3) 버튼 접근성 향상시키기
mun-kyeong Sep 22, 2025
5b34d2d
feat: step-4 )변경 사항에 대한 실시간 알림 추가하기
mun-kyeong Sep 22, 2025
8d0e799
feat: step-5 ) 최소/최대 값 도달 시 상태 메시지 알림 추가하기
mun-kyeong Sep 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 12 additions & 14 deletions a11y/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
2 changes: 1 addition & 1 deletion a11y/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"dev": "vite --host 0.0.0.0 ",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
Expand Down
8 changes: 4 additions & 4 deletions a11y/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ import FlightBooking from "./components/FlightBooking";

function App() {
return (
<div className="app">
<main className="app">
<div className="app-main">
<div className="flight-booking-container">
<section className="flight-booking-container">
<FlightBooking />
</div>
</section>
</div>
</div>
</main>
);
}

Expand Down
14 changes: 13 additions & 1 deletion a11y/src/components/FlightBooking.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -61,3 +61,15 @@
border-radius: 4px;
cursor: pointer;
}

.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
white-space: nowrap;
}
52 changes: 43 additions & 9 deletions a11y/src/components/FlightBooking.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,35 +3,69 @@ import { useState } from "react";
import "./FlightBooking.css";

const MAX_PASSENGERS = 3;
const MIN_PASSENGERS = 1;

const FlightBooking = () => {
const [adultCount, setAdultCount] = useState(1);
const [statusMessage, setStatusMessage] = useState("");

const incrementCount = () => {
setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1));
setAdultCount((prev) => {
if (prev < MAX_PASSENGERS) {
setStatusMessage("");
return prev + 1;
} else {
setStatusMessage("최대 승객 수에 도달했습니다.");
return prev;
}
});
};

const decrementCount = () => {
setAdultCount((prev) => Math.max(1, prev - 1));
setAdultCount((prev) => {
if (prev > MIN_PASSENGERS) {
setStatusMessage("");
return prev - 1;
} else {
setStatusMessage("성인 승객은 최소 1명이어야 합니다.");
return prev;
}
});
};

return (
<div className="flight-booking">
<form 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
type="button"
className="button-text"
onClick={decrementCount}
aria-label="성인 승객 1명 감소"
>
-
</button>
<span>{adultCount}</span>
<button className="button-text" onClick={incrementCount}>
<span aria-live="polite">{adultCount}</span>
<button
type="button"
className="button-text"
onClick={incrementCount}
aria-label="성인 승객 1명 추가"
>
+
</button>
</div>
</div>
<button className="search-button">항공편 검색</button>
</div>

<div className="visually-hidden" role="status" aria-live="assertive">
{statusMessage}
</div>

<button type="submit" className="search-button">
항공편 검색
</button>
</form>
);
};

Expand Down
6 changes: 6 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.