Merge branch 'feat/SiteMoving/#54' into feat/reservationPost/#53

src/assets/icon/index.ts

@@ -14,6 +14,7 @@ export { default as ArrowRightGrayIcon } from './ic_arrow_right_gray.svg';
 export { default as ArrowDownBlueIcon } from './ic_arrowdown_blue.svg';
 export { default as ArrowUpBlueIcon } from './ic_arrowup_blue.svg';
 export { default as Logo } from './logo.svg';
+export { default as LogoBigIcon } from './logo-big.svg';
 export { default as MenuIcon } from './menu.svg';
 export { default as MovingArrowIcon } from './movingArrow.svg';
 export { default as CloseIcon } from './multiply.svg';

src/assets/image/index.ts

@@ -2,11 +2,13 @@
 export { default as UpArrowImg } from './arrow_up.png';
 export { default as BannerAd1Img } from './bannerAd1.png';
 export { default as BannerAd2Img } from './bannerAd2.png';
+export { default as GotoSiteBtnImg } from './btn_gotosite.png';
 export { default as CheckImg } from './check.png';
 export { default as CheckboxImg } from './checkbox@2x.png';
 export { default as BackwardArrow } from './chevron.backward.png';
 export { default as ForwardArrow } from './chevron.forward.png';
 export { default as ExpediaImg } from './expedia.png';
+export { default as ExpediaNoBgImg } from './expedia_no_bg.png';
 export { default as JejuFlightImg } from './Group 145.png';
 export { default as DanangFlightImg } from './Group 146.png';
 export { default as NewDeliFlightImg } from './Group 147.png';
@@ -68,6 +70,7 @@ export { default as KyotoImg } from './img_card_s_11 (2).png';
 export { default as ParisImg } from './img_card_s_11.png';
 export { default as PrahaImg } from './img_card_s_12 (2).png';
 export { default as NYImg } from './img_card_s_12.png';
+export { default as GotoBgImg } from './img_gotobackground.png';
 export { default as HotelImg1 } from './img_hotel_1@2x.png';
 export { default as HotelImg2 } from './img_hotel_2@2x.png';
 export { default as HotelImg3 } from './img_hotel_3@2x.png';
@@ -82,12 +85,20 @@ export { default as KoreanAirImg } from './img_koreanair@2x.png';
 export { default as MainImg } from './img_main.png';
 export { default as PeachImg } from './img_peach.png';
 export { default as InterparkImg } from './interpark.png';
+export { default as InterparkNoBgImg } from './interpark_no_bg.png';
 export { default as LeafImg } from './leaf.fill@2x.png';
+export { default as MovingAirplane } from './moving_airplane.png';
 export { default as MyrealtripImg } from './myrealtrip.png';
+export { default as MyrealtripNoBgImg } from './myrealtrip_no_bg.png';
 export { default as LeftArticleImg } from './Rectangle 34624743.png';
 export { default as TabGraphImg } from './tabbox_depart_graph_default.png';
 export { default as TommorowTourImg } from './tommorow-tour.png';
+export { default as TommorowTourNoBgImg } from './tomorrowtour_no_bg.png';
 export { default as TripDotComImg } from './tripdotcom.png';
+export { default as TripleNoBgImg } from './tripdotcom_no_bg.png';
+export { default as TripDotComNoBgImg } from './tripdotcom_no_bg.png';
+export { default as VerygoodTravelNoBgImg } from './tripdotcom_no_bg.png';
 export { default as TripleImg } from './triple.png';
 export { default as VerygoodTravelImg } from './verygood-travel.png';
+export { default as YellowBallonNoBgImg } from './yellow_ballon_no_bg.png';
 export { default as YellowBallonImg } from './yellow-ballon.png';

src/components/common/Router.tsx

@@ -2,6 +2,7 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import Main from '../../pages/Main';
 import PriceCompare from '../../pages/PriceCompare';
+import SiteMoving from '../../pages/SiteMoving';
 import TicketList from '../../pages/TicketList';
 
 const Router = () => {
@@ -11,6 +12,7 @@ const Router = () => {
         <Route path="/" element={<Main />} />
         <Route path="/priceCompare" element={<PriceCompare />} />
         <Route path="/ticketList" element={<TicketList />} />
+        <Route path="/siteMoving" element={<SiteMoving />} />
       </Routes>
     </BrowserRouter>
   );

src/components/siteMoving/MovingInfo.tsx

@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+
+import { LogoBigIcon } from '../../assets/icon';
+import { MovingAirplane } from '../../assets/image';
+import AGENCY_NO_BG_IMG from '../../data/AgencyNoBgData';
+
+const MovingInfo = () => {
+  return (
+    <MovingInfoContainer>
+      <Title>예약 사이트로 이동 중 입니다.</Title>
+      <MovingIllust>
+        <StyledImg src={LogoBigIcon} />
+        <StyledImg src={MovingAirplane} />
+        <StyledImg src={AGENCY_NO_BG_IMG['노랑풍선']} />
+      </MovingIllust>
+    </MovingInfoContainer>
+  );
+};
+
+export default MovingInfo;
+
+const MovingInfoContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100vh;
+`;
+
+const Title = styled.h1`
+  color: ${({ theme }) => theme.colors.skscanWt};
+  ${({ theme }) => theme.fonts.heading04}
+`;
+
+const MovingIllust = styled.article`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 5.4rem;
+  border: 1px solid ${({ theme }) => theme.colors.skscanWt};
+  border-radius: 1rem;
+  background-color: rgb(255 255 255 / 40%);
+  padding: 3.8rem 2.3rem;
+  backdrop-filter: blur(3px);
+`;
+
+const StyledImg = styled.img`
+  width: min-content;
+  height: min-content;
+`;

src/components/siteMoving/TicketDetail.tsx

@@ -0,0 +1,5 @@
+const TicketDetail = () => {
+  return <div>TicketDetail</div>;
+};
+
+export default TicketDetail;

src/data/AgencyNoBgData.ts

@@ -0,0 +1,28 @@
+import {
+  ExpediaNoBgImg,
+  InterparkNoBgImg,
+  MyrealtripNoBgImg,
+  TommorowTourNoBgImg,
+  TripDotComNoBgImg,
+  TripleNoBgImg,
+  VerygoodTravelNoBgImg,
+  YellowBallonNoBgImg,
+} from '../assets/image';
+
+type AgencyNoBgImgType = {
+  // eslint-disable-next-line no-unused-vars
+  [key in string]: string;
+};
+
+const AGENCY_NO_BG_IMG: AgencyNoBgImgType = {
+  인터파크: InterparkNoBgImg,
+  트리플: TripleNoBgImg,
+  마이리얼트립: MyrealtripNoBgImg,
+  노랑풍선: YellowBallonNoBgImg,
+  트립닷컴: TripDotComNoBgImg,
+  참좋은여행: VerygoodTravelNoBgImg,
+  내일여행: TommorowTourNoBgImg,
+  익스피디아: ExpediaNoBgImg,
+};
+
+export default AGENCY_NO_BG_IMG;

src/pages/SiteMoving.tsx

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+import { GotoBgImg } from '../assets/image';
+import MovingInfo from '../components/siteMoving/MovingInfo';
+
+const SiteMoving = () => {
+  return (
+    <>
+      <SiteMovingBg src={GotoBgImg} alt="비행기와 하늘" />
+      <MovingInfo />
+    </>
+  );
+};
+
+export default SiteMoving;
+const SiteMovingBg = styled.img`
+  position: fixed;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;