-
+
+
+ λ³Έλ¬ΈμΌλ‘ λ°λ‘κ°κΈ°
+
+
+
+
+
+
+
+
+
+ μ§κΈ λ λκΈ° μ’μ μ¬ν
+
+
+
+
+
+ {/* μΆκ° CHALLENGE: λͺ¨λ¬ ν¬μ»€μ€ νΈλ© */}
+ {/*
*/}
);
}
diff --git a/src/Typography.css b/src/Typography.css
new file mode 100644
index 00000000..2231d279
--- /dev/null
+++ b/src/Typography.css
@@ -0,0 +1,34 @@
+.heading-1-text {
+ font-size: 24px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+}
+
+.heading-2-text {
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+}
+
+.heading-3-text {
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 800;
+ line-height: normal;
+}
+
+.body-text {
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 150%;
+}
+
+.button-text {
+ font-size: 16px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: 100%;
+}
diff --git a/src/assets/booking-bg.png b/src/assets/booking-bg.png
new file mode 100644
index 00000000..92dcaf35
Binary files /dev/null and b/src/assets/booking-bg.png differ
diff --git a/src/assets/chevron-left.svg b/src/assets/chevron-left.svg
new file mode 100644
index 00000000..73ef3e28
--- /dev/null
+++ b/src/assets/chevron-left.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/chevron-right.svg b/src/assets/chevron-right.svg
new file mode 100644
index 00000000..7d4ea7be
--- /dev/null
+++ b/src/assets/chevron-right.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/close.svg b/src/assets/close.svg
new file mode 100644
index 00000000..c784d0c6
--- /dev/null
+++ b/src/assets/close.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/help.svg b/src/assets/help.svg
new file mode 100644
index 00000000..b7016a6d
--- /dev/null
+++ b/src/assets/help.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/minus.svg b/src/assets/minus.svg
new file mode 100644
index 00000000..f6105fc4
--- /dev/null
+++ b/src/assets/minus.svg
@@ -0,0 +1,5 @@
+
diff --git a/src/assets/plus.svg b/src/assets/plus.svg
new file mode 100644
index 00000000..87f15c1f
--- /dev/null
+++ b/src/assets/plus.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/assets/travel-item-01.png b/src/assets/travel-item-01.png
new file mode 100644
index 00000000..d6ad14a2
Binary files /dev/null and b/src/assets/travel-item-01.png differ
diff --git a/src/assets/travel-item-02.png b/src/assets/travel-item-02.png
new file mode 100644
index 00000000..be18975e
Binary files /dev/null and b/src/assets/travel-item-02.png differ
diff --git a/src/assets/travel-item-03.png b/src/assets/travel-item-03.png
new file mode 100644
index 00000000..22a5a345
Binary files /dev/null and b/src/assets/travel-item-03.png differ
diff --git a/src/components/FlightBooking.module.css b/src/components/FlightBooking.module.css
new file mode 100644
index 00000000..904232ea
--- /dev/null
+++ b/src/components/FlightBooking.module.css
@@ -0,0 +1,95 @@
+.flightBooking {
+ background-color: white;
+ border-radius: 8px;
+ padding: 20px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.passengerLabel {
+ display: flex;
+ align-items: center;
+}
+
+.helpIconWrapper {
+ position: relative;
+ margin-left: 5px;
+ cursor: pointer;
+}
+
+.helpIcon {
+ width: 16px;
+ height: 16px;
+}
+
+.tooltip {
+ position: absolute;
+ bottom: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: #333;
+ color: white;
+ padding: 5px 10px;
+ border-radius: 4px;
+ font-size: 12px;
+ white-space: nowrap;
+ z-index: 1;
+}
+
+.tooltip::after {
+ content: '';
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ border-width: 5px;
+ border-style: solid;
+ border-color: #333 transparent transparent transparent;
+}
+
+.passengerCount {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 15px;
+}
+
+.passengerCount span {
+ font-weight: 700;
+}
+
+.counter {
+ display: flex;
+ align-items: center;
+}
+
+.counter button {
+ width: 30px;
+ height: 30px;
+ border-radius: 16px;
+ border: 1px solid #c0c0c0;
+ background-color: #fff;
+ font-size: 18px;
+ cursor: pointer;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.counter span {
+ font-size: 18px;
+ text-align: center;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+ padding: 0 16px;
+}
+
+.searchButton {
+ width: 100%;
+ padding: 10px;
+ background-color: #333;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+}
diff --git a/src/components/FlightBooking.tsx b/src/components/FlightBooking.tsx
new file mode 100644
index 00000000..535594e4
--- /dev/null
+++ b/src/components/FlightBooking.tsx
@@ -0,0 +1,72 @@
+import { useCallback, useState } from 'react';
+
+import helpIcon from '../assets/help.svg';
+import plus from '../assets/plus.svg';
+import minus from '../assets/minus.svg';
+
+import styles from './FlightBooking.module.css';
+
+const MIN_PASSENGERS = 1;
+const MAX_PASSENGERS = 3;
+
+const FlightBooking = () => {
+ const [adultCount, setAdultCount] = useState(MIN_PASSENGERS);
+ const [statusMessage, setStatusMessage] = useState('');
+ const [showTooltip, setShowTooltip] = useState(false);
+
+ const incrementCount = useCallback(() => {
+ if (adultCount === MAX_PASSENGERS) {
+ setStatusMessage('μ΅λ μΉκ° μμ λλ¬νμ΅λλ€');
+ return;
+ }
+
+ setAdultCount((prev) => Math.min(MAX_PASSENGERS, prev + 1));
+ setStatusMessage('');
+ }, [adultCount]);
+
+ const decrementCount = useCallback(() => {
+ if (adultCount === MIN_PASSENGERS) {
+ setStatusMessage('μ΅μ 1λͺ
μ μΉκ°μ΄ νμν©λλ€');
+ return;
+ }
+
+ setAdultCount((prev) => Math.max(MIN_PASSENGERS, prev - 1));
+ setStatusMessage('');
+ }, [adultCount]);
+
+ return (
+
+
νκ³΅κΆ μ맀
+
+
+
μ±μΈ
+
setShowTooltip(true)}
+ onMouseLeave={() => setShowTooltip(false)}
+ >
+
+ {showTooltip &&
μ΅λ 3λͺ
κΉμ§ μμ½ν μ μμ΅λλ€
}
+
+
+
+
+
{adultCount}
+
+
+
+ {statusMessage && (
+
+ {statusMessage}
+
+ )}
+
+
+ );
+};
+
+export default FlightBooking;
diff --git a/src/components/Navigation.module.css b/src/components/Navigation.module.css
new file mode 100644
index 00000000..85fb9e87
--- /dev/null
+++ b/src/components/Navigation.module.css
@@ -0,0 +1,110 @@
+.mainNav {
+ background-color: #f8f8f8;
+ padding: 10px 0;
+}
+
+.navList {
+ list-style-type: none;
+ padding: 10px 16px;
+ margin: 0;
+}
+
+.navItem {
+ display: inline-block;
+ position: relative;
+ margin-right: 20px;
+}
+
+.navItem a {
+ text-decoration: none;
+ color: #333;
+ font-size: 16px;
+ padding: 5px 10px;
+ display: block;
+}
+
+.navItem a:hover,
+.navItem a:focus {
+ background-color: #e0e0e0;
+ border-radius: 4px;
+}
+
+.navItem .navList {
+ display: none;
+ position: absolute;
+ top: 100%;
+ left: 0;
+ background-color: #fff;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.navItem:hover > .navList,
+.navItem:focus-within > .navList {
+ display: block;
+}
+
+.navItem .navList .navItem {
+ width: 200px;
+ display: block;
+ margin-right: 0;
+}
+
+.navItem .navList .navItem a {
+ padding: 10px;
+}
+
+.navItem .navList .navItem a:hover,
+.navItem .navList .navItem a:focus {
+ background-color: #f0f0f0;
+}
+
+.navToggle {
+ display: none;
+ font-size: 16px;
+ padding: 10px;
+ background-color: #333;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+@media (max-width: 768px) {
+ .navToggle {
+ display: block;
+ }
+
+ .mainNav {
+ display: none;
+ }
+
+ .mainNavActive {
+ display: block;
+ }
+
+ .navItem {
+ display: block;
+ margin-right: 0;
+ margin-bottom: 10px;
+ }
+
+ .navItem .navList {
+ position: static;
+ display: none;
+ width: auto;
+ border: none;
+ box-shadow: none;
+ margin-left: 20px;
+ }
+
+ .navItem:hover > .navList,
+ .navItem:focus-within > .navList {
+ display: block;
+ }
+
+ .navItem .navList .navItem {
+ width: auto;
+ }
+}
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
new file mode 100644
index 00000000..80a3f092
--- /dev/null
+++ b/src/components/Navigation.tsx
@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import styles from './Navigation.module.css';
+
+interface NavItem {
+ title: string;
+ link: string;
+ subItems?: NavItem[];
+}
+
+const navItems: NavItem[] = [
+ {
+ title: 'μλΉμ€',
+ link: '#',
+ subItems: [
+ {
+ title: 'κΈ°λ΄ μλΉμ€',
+ link: 'https://www.koreanair.com/contents/plan-your-travel/in-flight-experience'
+ },
+ { title: 'μνλ¬Ό', link: 'https://www.koreanair.com/contents/plan-your-travel/baggage' },
+ {
+ title: 'λΌμ΄μ§',
+ link: 'https://www.koreanair.com/contents/plan-your-travel/at-the-airport/lounge'
+ }
+ ]
+ },
+ {
+ title: 'μ¬ν μ 보',
+ link: '#',
+ subItems: [
+ {
+ title: 'μ¬νμ 보ν',
+ link: 'https://www.koreanair.com/contents/booking/book-and-manage/partner-service'
+ },
+ { title: '체ν¬μΈ', link: 'https://www.koreanair.com/contents/plan-your-travel/check-in' }
+ ]
+ },
+ { title: 'κ³ κ° μ§μ', link: '#' }
+];
+
+const Navigation = () => {
+ const [isNavOpen, setIsNavOpen] = useState(false);
+
+ const toggleNav = () => {
+ setIsNavOpen((prev) => !prev);
+ };
+
+ const renderNavItems = (items: NavItem[]) => (
+
+ {items.map((item, index) => (
+ -
+ {item.title}
+ {item.subItems && renderNavItems(item.subItems)}
+
+ ))}
+
+ );
+
+ return (
+ <>
+
+
+
+ );
+};
+
+export default Navigation;
diff --git a/src/components/PromotionModal.module.css b/src/components/PromotionModal.module.css
new file mode 100644
index 00000000..d43ddbf2
--- /dev/null
+++ b/src/components/PromotionModal.module.css
@@ -0,0 +1,60 @@
+.modal {
+ display: block;
+}
+
+.modalBackdrop {
+ position: fixed;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 100%;
+ max-width: 480px;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 1000;
+}
+
+.modalContainer {
+ position: fixed;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ background-color: white;
+ padding: 20px;
+ width: 100%;
+ max-width: 480px;
+ border-radius: 8px 8px 0 0;
+ z-index: 1001;
+}
+
+.modalContent {
+ position: relative;
+}
+
+.modalTitle {
+ margin: 16px 0;
+}
+
+.modalDescription {
+ margin-bottom: 24px;
+}
+
+.modalActionButton {
+ display: block;
+ width: 100%;
+ padding: 12px;
+ background-color: #333;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+.modalCloseButton {
+ position: absolute;
+ top: -10px;
+ right: -10px;
+ background: none;
+ border: none;
+ cursor: pointer;
+}
diff --git a/src/components/PromotionModal.tsx b/src/components/PromotionModal.tsx
new file mode 100644
index 00000000..0b1fe3cf
--- /dev/null
+++ b/src/components/PromotionModal.tsx
@@ -0,0 +1,38 @@
+import { useState } from 'react';
+
+import close from '../assets/close.svg';
+
+import styles from './PromotionModal.module.css';
+
+const PromotionModal = () => {
+ const [isOpen, setIsOpen] = useState(true);
+
+ const closeModal = () => {
+ setIsOpen(false);
+ };
+
+ if (!isOpen) {
+ return null;
+ }
+
+ return (
+
+
+
+
+
μ¬νν λ A11Y AIRLINE μ±
+
+ 체ν¬μΈ, νμΉκΆ μ μ₯, μνλ¬Ό μλ¦ΌκΉμ§
+
- μ±μΌλ‘ λμ± νΈνκ² μ¬ννμΈμ!
+
+
+
+
+
+
+ );
+};
+
+export default PromotionModal;
diff --git a/src/components/SpinButton.css b/src/components/SpinButton.css
deleted file mode 100644
index e8540b90..00000000
--- a/src/components/SpinButton.css
+++ /dev/null
@@ -1,67 +0,0 @@
-.spinButtonContainer {
- display: flex;
- justify-content: center;
- align-items: center;
- gap: 10px;
-}
-
-.spinButton {
- width: 40px;
- height: 40px;
- border: 1px solid #ddd;
- background-color: rgba(0, 0, 0, 0);
- text-align: center;
- text-decoration: none;
- display: inline-block;
- font-size: 16px;
- margin: 4px 12px;
- cursor: pointer;
- border-radius: 100%;
-}
-
-.spinButton:hover {
- background-color: #f3f3f3;
-}
-
-.spinButtonInput {
- padding: 10px;
- font-size: 16px;
- border-radius: 5px;
- text-align: center;
-}
-
-.helpIcon {
- width: 6px;
- height: 6px;
- display: flex;
- justify-content: center;
- align-items: center;
- bottom: 4px;
- margin-left: 10px;
- padding: 10px;
- background-color: rgba(0, 0, 0, 0);
- border-radius: 100%;
- border: 1px solid #ddd;
- cursor: help;
- position: relative;
-}
-
-.tooltip {
- position: absolute;
- bottom: 100%;
- left: 50%;
- transform: translateX(-50%);
- margin-bottom: 10px;
- padding: 10px;
- background-color: #000;
- color: #fff;
- border-radius: 5px;
- white-space: nowrap;
-}
-
-.spinButtonLabel {
- display: flex;
- font-weight: bold;
- padding: 0 16px;
- margin-bottom: 8px;
-}
diff --git a/src/components/SpinButton.tsx b/src/components/SpinButton.tsx
deleted file mode 100644
index 92915f97..00000000
--- a/src/components/SpinButton.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { useState, MouseEvent } from "react";
-import "./SpinButton.css";
-
-const SpinButton: React.FC = () => {
- const [count, setCount] = useState
(0);
- const [isTooltipVisible, setIsTooltipVisible] = useState(false);
-
- const increment = () => {
- setCount((prevCount) => prevCount + 1);
- };
-
- const decrement = () => {
- setCount((prevCount) => prevCount - 1);
- };
-
- const toggleTooltip = (event: MouseEvent) => {
- setIsTooltipVisible(!isTooltipVisible);
- };
-
- return (
-
-
-
μΉκ° μ ν
-
-
-
- ?
- {isTooltipVisible && (
- μ΅λ μΈμμλ 3λͺ
κΉμ§ κ°λ₯ν©λλ€
- )}
-
-
-
-
-
-
+
+
+
+ {travelOptions.map((option, index) => (
+
+ ))}
+
+
+
+
-