Merge pull request #105 from LikeLionHGU/hwan_#103/Moving-Time

Hwan #103/moving time

src/components/SchedulePage/Changing/OutAirport/OutMove.jsx

@@ -0,0 +1,61 @@
+import styled from "styled-components";
+import AboutFadin from "../../../AboutPage/About_fadin";
+import CityIcon from "../../../../img/City.svg";
+import "../../../../font/font.css";
+
+const StyleContainer = styled.div`
+  background-color: black;
+  color: white;
+`;
+
+const Main = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+  margin: 0 3.5%;
+  padding: 100px 0;
+`;
+
+const City = styled.img`
+  padding-right: 80px;
+`;
+
+const Title = styled.div`
+  font-size: 40px;
+  font-weight: 200;
+  font-family: Esamanru;
+`;
+
+const Right = styled.div`
+  display: flex;
+
+  padding-right: 230px;
+`;
+
+const Contents = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+
+  font-family: Pretendard-Light;
+  font-size: 23px;
+`;
+
+export default function OutMove() {
+  return (
+    <StyleContainer>
+      <AboutFadin>
+        <Main>
+          <Title>도심까지 이동시간</Title>
+          <Right>
+            <City src={CityIcon} />
+            <Contents>
+              <div>편도 | 1시간 30분 ~ 2시간 소요</div>
+              <div>왕복 | 3시간 ~ 4시간 소요</div>
+            </Contents>
+          </Right>
+        </Main>
+      </AboutFadin>
+    </StyleContainer>
+  );
+}

src/components/SchedulePage/Changing/OutAirport/OutTraffic.jsx

@@ -0,0 +1,97 @@
+import styled from "styled-components";
+import AboutFadin from "../../../AboutPage/About_fadin";
+import TrainIcon from "../../../../img/SkyTrain.svg";
+import TaxiIcon from "../../../../img/Taxi.svg";
+import ShuttleIcon from "../../../../img/Bus.svg";
+import PublicBusIcon from "../../../../img/PublicBus.svg";
+import AirportTransferIcon from "../../../../img/AirportTransfer.svg";
+import "../../../../font/font.css";
+
+const StyleContainer = styled.div`
+  background-color: black;
+  color: white;
+`;
+
+const Main = styled.div`
+  padding: 50px 3.5%;
+`;
+
+const LineBox = styled.div`
+  display: flex;
+  justify-content: space-between;
+  border-top: 1px solid white;
+  border-bottom: 1px solid white;
+  padding: 105px 0;
+`;
+
+const Title = styled.div`
+  font-size: 40px;
+  font-family: Esamanru;
+  font-weight: 300;
+`;
+
+const Right = styled.div`
+  display: flex;
+`;
+
+const Card = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  height: 130px;
+  width: 130px;
+  padding: 0 20px;
+
+  font-size: 18px;
+  font-family: Plaid;
+  font-weight: 300;
+
+  opacity: 0.8;
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+const Train = styled.img``;
+const Taxi = styled.img``;
+const Shuttle = styled.img``;
+const PublicBus = styled.img``;
+const AirportTransfer = styled.img``;
+
+export default function OutTraffic() {
+  return (
+    <StyleContainer>
+      <AboutFadin>
+        <Main>
+          <LineBox>
+            <Title>공항 - 도심 간 이동 교통편</Title>
+            <Right>
+              <Card>
+                <Train src={TrainIcon} />
+                <div>Train MRT</div>
+              </Card>
+              <Card>
+                <Taxi src={TaxiIcon} />
+                <div>Taxi</div>
+              </Card>
+              <Card>
+                <Shuttle src={ShuttleIcon} />
+                <div style={{ letterSpacing: "-2px" }}>Shuttle Service</div>
+              </Card>
+              <Card>
+                <PublicBus src={PublicBusIcon} />
+                <div>Public Bus</div>
+              </Card>
+              <Card>
+                <AirportTransfer src={AirportTransferIcon} />
+                <div style={{ letterSpacing: "-3px" }}>Airport Transfer</div>
+              </Card>
+            </Right>
+          </LineBox>
+        </Main>
+      </AboutFadin>
+    </StyleContainer>
+  );
+}

src/components/SchedulePage/OutAirport.jsx

@@ -1,13 +1,17 @@
 import ScheduleBanner1 from "./NoChanging/Schedule_Banner1";
 import ScheduleBanner2 from "./NoChanging/Schedule_Banner2";
 import OutGreenGrid from "./Changing/OutAirport/OutGreenGrid";
+import OutMove from "./Changing/OutAirport/OutMove";
+import OutTraffic from "./Changing/OutAirport/OutTraffic";
 
 export default function OutAirport() {
   return (
     <>
       <ScheduleBanner1 />
       <ScheduleBanner2 />
       <OutGreenGrid />
+      <OutMove />
+      <OutTraffic />
     </>
   );
 }