diff --git a/src/components/Schedule.jsx b/src/components/Schedule.jsx index 0d7452c..9689f4f 100644 --- a/src/components/Schedule.jsx +++ b/src/components/Schedule.jsx @@ -3,12 +3,12 @@ import InAirport from "./SchedulePage/InAirport"; import ToggleBtn from "./SchedulePage/Changing/ToggleBtn"; // import Header from "./layout/Header"; import ScheduleHeader from "./SchedulePage/NoChanging/Schedule_Header"; -import About_Header from "./AboutPage/About_Header"; // header +import About_Header from "./AboutPage/About_Header"; //��� header function Schedule() { - // header ٲ ϴ Լ + // header ���� �ٲ�� �ϴ� �Լ� const [scrollPosition, setScrollPosition] = - useState(0); /*scroll ġ Լ*/ + useState(0); /*scroll ��ġ�� ���� ���� �Լ�*/ useEffect(() => { const handleScroll = () => { @@ -24,15 +24,22 @@ function Schedule() { }, []); // Empty dependency array to ensure effect runs only once const id = - scrollPosition > 420 /* header ٲ */ + scrollPosition > 420 /* header �ٲ�� ���� */ ? "second" - : "first"; /*scroll ̿ ٲ*/ + : "first"; /*scroll ���̿� ���� ������ �ٲ��*/ + + const [isOn, setisOn] = useState(false); + + const toggleHandler = () => { + // isOn의 상태를 변경하는 메소드를 구현 + setisOn(!isOn); + }; return ( <> {id === "first" ? : } - - + + {isOn ? "out" : } ); } diff --git a/src/components/SchedulePage/Changing/InView.jsx b/src/components/SchedulePage/Changing/InView.jsx index b534d22..48bf9e0 100644 --- a/src/components/SchedulePage/Changing/InView.jsx +++ b/src/components/SchedulePage/Changing/InView.jsx @@ -1,14 +1,18 @@ import { useState } from "react"; import styled from "styled-components"; import InViewFood from "./View/InViewFood"; +import InViewRest from "./View/InViewRest"; +import InViewShopping from "./View/InViewShopping"; const StyleContainer = styled.div` font-size: 20px; + margin: 0 3%; `; const TitleCover = styled.div` border-bottom: 1px solid white; padding-top: 130px; - /* margin: 0 3%; */ +======= + font-family: EsaManru; font-size: 135px; @@ -19,25 +23,56 @@ const Title = styled.div` margin: 0 30px; text-align: center; `; -const Food = styled.div``; -const Rest = styled.div``; -const Shopping = styled.div``; + +const ViewContainer = styled.div` + padding: 80px 0; +`; + +const ViewTitle = styled.div``; + +const ViewBtnContainer = styled.div` + padding: 30px 0; + padding-top: 40px; +`; + +const CategoryTitle = styled.div` + padding-top: 30px; +`; + +const ViewBtn = styled.button` + background-color: rgba(44, 110, 73, 1); + border: 1px solid rgba(244, 240, 231, 1); + border-radius: 5px; + padding: 15px 15px; + margin-right: 20px; + color: rgba(244, 240, 231, 1); + + font-size: 15px; + + &:hover { + background-color: #b8b8b8; + } +`; export default function View() { // const [category, setCategory] = useState("0"); + const [inFood, setInFood] = useState(true); const [inRest, setInRest] = useState(false); const [inShopping, setInShopping] = useState(false); const handleFood = () => { + setInFood(true); setInRest(false); setInShopping(false); }; const handleRest = () => { + setInFood(false); setInRest(true); setInShopping(false); }; const handleShopping = () => { + setInFood(false); setInRest(false); setInShopping(true); }; @@ -47,21 +82,59 @@ export default function View() { EXPERIENCE IN AIRPORT -
Choose a Category to View
-
- handleFood()}>Food & Beverages - handleRest()}>Rest facilities - handleShopping()}>Shopping -
-
- {inShopping ? ( -
Shopping
- ) : inRest ? ( -
Rest facilities
- ) : ( - - )} -
+ + Choose a Category to View + + handleFood()} + > + Food & Beverages + + handleRest()} + > + Rest facilities + + handleShopping()} + > + Shopping + + + + {inShopping ? ( + + ) : inRest ? ( + + ) : ( + + )} + + ); } diff --git a/src/components/SchedulePage/Changing/ToggleBtn.jsx b/src/components/SchedulePage/Changing/ToggleBtn.jsx index b640b55..9829118 100644 --- a/src/components/SchedulePage/Changing/ToggleBtn.jsx +++ b/src/components/SchedulePage/Changing/ToggleBtn.jsx @@ -90,14 +90,7 @@ const InCircle = styled.img` padding-bottom: 6px; `; -export default function ToggleBtn() { - const [isOn, setisOn] = useState(false); - - const toggleHandler = () => { - // isOn의 상태를 변경하는 메소드를 구현 - setisOn(!isOn); - }; - +export default function ToggleBtn({ isOn, toggleHandler }) { return (
diff --git a/src/components/SchedulePage/Changing/View/InViewCard.jsx b/src/components/SchedulePage/Changing/View/InViewCard.jsx new file mode 100644 index 0000000..b1ca530 --- /dev/null +++ b/src/components/SchedulePage/Changing/View/InViewCard.jsx @@ -0,0 +1,105 @@ +import styled from "styled-components"; +import "../../../../font/font.css"; + +const StyleContainer = styled.div``; + +const Card = styled.div` + display: flex; + padding: 50px 0; + + font-family: Pretendard-Regular; +`; + +const ImageCard = styled.img` + width: 40%; + height: 500px; + border-radius: 5px; + + object-fit: cover; +`; + +const InfoBox = styled.div` + padding: 0 80px; +`; + +const Name = styled.div` + font-family: EsaManru; + font-weight: 200; + font-size: 50px; +`; + +const Hours = styled.div` + font-weight: 300; + font-size: 24px; +`; + +const Location = styled.div` + font-size: 22px; +`; + +const Info = styled.div` + width: 700px; + + font-size: 20px; +`; + +const BlogBtn = styled.button` + border: 1px solid #f4f0e7; + padding: 20px 50px; + border-radius: 5px; + + background-color: #f4f0e7; + color: #2c6e49; +`; + +function InViewCard({ + key, + imageURL, + name, + businessHours, + location, + information, + blog, + index, +}) { + const ToBlog = () => { + window.open(blog); + }; + return ( + + + + + {name} + {businessHours} + {location} + + {information} + + {blog ? DISCOVER : ""} + + + + ); +} + +// InViewCard.propTypes = { +// key: PropTypes.number.isRequired, +// coverImg: PropTypes.string.isRequired, +// title: PropTypes.string.isRequired, +// summary: PropTypes.string.isRequired, +// rating: PropTypes.number.isRequired, +// genres: PropTypes.arrayOf(PropTypes.string).isRequired, +// }; + +export default InViewCard; diff --git a/src/components/SchedulePage/Changing/View/InViewFood.jsx b/src/components/SchedulePage/Changing/View/InViewFood.jsx index 0788b78..f2de394 100644 --- a/src/components/SchedulePage/Changing/View/InViewFood.jsx +++ b/src/components/SchedulePage/Changing/View/InViewFood.jsx @@ -1,48 +1,164 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; import styled from "styled-components"; +import InViewFoodBtnArrow from "../../../../img/InViewFoodBtnArrow.svg"; +import InViewCard from "./InViewCard"; const StyleContainer = styled.div``; +const FoodTitle = styled.div` + font-size: 50px; +`; + +const FoodBtnContainer = styled.div` + display: flex; + padding: 50px 0; +`; + +const FoodBtn = styled.button` + background-color: rgba(44, 110, 73, 1); + color: rgba(244, 240, 231, 1); + border: 1px solid rgba(244, 240, 231, 1); + border-top-right-radius: 5px; + border-top-left-radius: 5px; + padding: 3px 10px; + width: 200px; + + display: flex; + justify-content: space-between; + align-items: center; + + text-align: left; + font-size: 20px; +`; + export default function Food() { + const [inRestaurant, setInRestaurnat] = useState(true); const [inCafe, setInCafe] = useState(false); const [inDessert, setInDessert] = useState(false); + const savedAirport = localStorage.getItem("viaAirport"); + const savedATime = localStorage.getItem("arrivalTime"); + const savedDTime = localStorage.getItem("durationTime"); + + const [infoAirport, setInfoAirport] = useState([]); + + const url = `https://api.zionhann.shop/app/viaflight/layover-airport-in?layoverAirportName=${savedAirport}&layoverArrivalTime=${savedATime}&layoverTime=${savedDTime}`; + + useEffect(() => { + fetch(url) + .then((response) => response.json()) + .then((data) => { + setInfoAirport(data); + }); + }, []); + const handleRestaurant = () => { + setInRestaurnat(true); setInCafe(false); setInDessert(false); }; const handleCafe = () => { + setInRestaurnat(false); setInCafe(true); setInDessert(false); }; const handleDessert = () => { + setInRestaurnat(false); setInCafe(false); setInDessert(true); }; - const Restaurant = styled.div``; - const Cafe = styled.div``; - const Dessert = styled.div``; - return ( -
Food & Beverages
-
- handleRestaurant()}>Restaurant - handleCafe()}>Cafe - handleDessert()}>Dessert -
-
- {inDessert ? ( -
Dessert
- ) : inCafe ? ( -
Cafe
- ) : ( -
Restaurant
- )} -
+ Food & Beverages + + handleRestaurant()} + > + Restaurant + 화살표 + + handleCafe()} + > + Cafe + 화살표 + + handleDessert()} + > + Dessert + 화살표 + + + {infoAirport?.foods?.map((item, index) => ( +
+ {inDessert + ? item.type === "Dessert" && ( + + ) + : inCafe + ? item.type === "Cafe" && ( + + ) + : item.type === "Meal" && ( + + )} +
+ ))} ); } diff --git a/src/components/SchedulePage/Changing/View/InViewRest.jsx b/src/components/SchedulePage/Changing/View/InViewRest.jsx new file mode 100644 index 0000000..19a0287 --- /dev/null +++ b/src/components/SchedulePage/Changing/View/InViewRest.jsx @@ -0,0 +1,128 @@ +import { useEffect, useState } from "react"; +import styled from "styled-components"; +import InViewRestBtnArrow from "../../../../img/InViewFoodBtnArrow.svg"; +import InViewCard from "./InViewCard"; + +const StyleContainer = styled.div``; + +const RestTitle = styled.div` + font-size: 50px; +`; + +const RestBtnContainer = styled.div` + display: flex; + padding: 50px 0; +`; + +const RestBtn = styled.button` + background-color: rgba(44, 110, 73, 1); + color: rgba(244, 240, 231, 1); + border: 1px solid rgba(244, 240, 231, 1); + border-top-right-radius: 5px; + border-top-left-radius: 5px; + padding: 3px 10px; + width: 200px; + + display: flex; + justify-content: space-between; + align-items: center; + + text-align: left; + font-size: 20px; +`; + +export default function Rest() { + const [inLounge, setInLounge] = useState(true); + const [inHotel, setInHotel] = useState(false); + + const savedAirport = localStorage.getItem("viaAirport"); + const savedATime = localStorage.getItem("arrivalTime"); + const savedDTime = localStorage.getItem("durationTime"); + + const [infoAirport, setInfoAirport] = useState([]); + + const url = `https://api.zionhann.shop/app/viaflight/layover-airport-in?layoverAirportName=${savedAirport}&layoverArrivalTime=${savedATime}&layoverTime=${savedDTime}`; + + useEffect(() => { + fetch(url) + .then((response) => response.json()) + .then((data) => { + setInfoAirport(data); + }); + }, []); + + const handleLounge = () => { + setInLounge(true); + setInHotel(false); + }; + + const handleHotel = () => { + setInLounge(false); + setInHotel(true); + }; + + return ( + + Rest facilities + + handleLounge()} + > + Lounge + 화살표 + + handleHotel()} + > + Hotel + 화살표 + + + {infoAirport?.rests?.map((item, index) => ( +
+ {inHotel + ? item.type === "Hotel" && ( + + ) + : item.type === "Lounge" && ( + + )} +
+ ))} + + ); +} diff --git a/src/components/SchedulePage/Changing/View/InViewShopping.jsx b/src/components/SchedulePage/Changing/View/InViewShopping.jsx new file mode 100644 index 0000000..b35687a --- /dev/null +++ b/src/components/SchedulePage/Changing/View/InViewShopping.jsx @@ -0,0 +1,166 @@ +import { useEffect, useState } from "react"; +import styled from "styled-components"; +import InViewShoppingBtnArrow from "../../../../img/InViewFoodBtnArrow.svg"; +import InViewCard from "./InViewCard"; + +const StyleContainer = styled.div``; + +const ShoppingTitle = styled.div` + font-size: 50px; +`; + +const ShoppingBtnContainer = styled.div` + display: flex; + padding: 50px 0; +`; + +const ShoppingBtn = styled.button` + background-color: rgba(44, 110, 73, 1); + color: rgba(244, 240, 231, 1); + border: 1px solid rgba(244, 240, 231, 1); + border-top-right-radius: 5px; + border-top-left-radius: 5px; + padding: 3px 10px; + width: 200px; + + display: flex; + justify-content: space-between; + align-items: center; + + text-align: left; + font-size: 20px; +`; + +export default function Shopping() { + const [inFashion, setInFashion] = useState(true); + const [inDutyFree, setInDutyFree] = useState(false); + const [inEntertainment, setInEntertainment] = useState(false); + + const savedAirport = localStorage.getItem("viaAirport"); + const savedATime = localStorage.getItem("arrivalTime"); + const savedDTime = localStorage.getItem("durationTime"); + + const [infoAirport, setInfoAirport] = useState([]); + + const url = `https://api.zionhann.shop/app/viaflight/layover-airport-in?layoverAirportName=${savedAirport}&layoverArrivalTime=${savedATime}&layoverTime=${savedDTime}`; + + useEffect(() => { + fetch(url) + .then((response) => response.json()) + .then((data) => { + setInfoAirport(data); + }); + }, []); + + const handleFashion = () => { + setInFashion(true); + setInDutyFree(false); + setInEntertainment(false); + }; + + const handleDutyFree = () => { + setInFashion(false); + setInDutyFree(true); + setInEntertainment(false); + }; + + const handleEntertainment = () => { + setInFashion(false); + setInDutyFree(false); + setInEntertainment(true); + }; + + return ( + + Shopping & Entertainments + + handleFashion()} + > + Fashion & DutyFree + 화살표 + + handleDutyFree()} + > + Beverage & Snack & Duty Free + 화살표 + + handleEntertainment()} + > + Entertainment + 화살표 + + + {infoAirport?.shopping?.map((item, index) => ( +
+ {inFashion + ? (item.type === "Fashtion" || item.type === "Beauty") && ( + + ) + : inDutyFree + ? (item.type === "Beverage" || + item.type === "Snack" || + item.type === "Duty_free") && ( + + ) + : item.type === "Entertainment" && ( + + )} +
+ ))} + + ); +} diff --git a/src/components/SchedulePage/NoChanging/Schedule_Grid_Green.jsx b/src/components/SchedulePage/NoChanging/Schedule_Grid_Green.jsx index 2319e3e..eaac9e6 100644 --- a/src/components/SchedulePage/NoChanging/Schedule_Grid_Green.jsx +++ b/src/components/SchedulePage/NoChanging/Schedule_Grid_Green.jsx @@ -1,7 +1,7 @@ import React from "react"; import styled from "styled-components"; import upArrow from "../../../img/inairport_grid_UpArrow.png"; -import View from "../Changing/InView"; +import InView from "../Changing/InView"; const Main = styled.div` background-color: rgba(44, 110, 73, 1); @@ -62,7 +62,7 @@ function Schedule_Grid_Green() { }; return (
- + diff --git a/src/img/InViewFoodBtnArrow.svg b/src/img/InViewFoodBtnArrow.svg new file mode 100644 index 0000000..b47c3d3 --- /dev/null +++ b/src/img/InViewFoodBtnArrow.svg @@ -0,0 +1,3 @@ + + +