Merge branch 'design/Layout/#46' into feat/reservationPost/#53

src/assets/image/index.ts

@@ -87,6 +87,7 @@ 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 './[email protected]';
+export { default as MainBannerImg } from './main_banner.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';

src/components/common/SearchBar.tsx

@@ -1,9 +1,12 @@
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { CheckboxImg } from '../../assets/image';
 import Calendar from '../main/Calendar';
 
 const SearchBar = () => {
+  const navigate = useNavigate();
+
   return (
     <SearchBarContainer>
       <FlightWayContainer>
@@ -35,7 +38,9 @@ const SearchBar = () => {
           <InfoTitle>인원, 좌석등급</InfoTitle>
           <InfoSeat>1명, 일반석</InfoSeat>
         </InfoDiv>
-        <SearchBtn>검색하기</SearchBtn>
+        <SearchBtn type="button" onClick={() => navigate(`/ticketList`)}>
+          검색하기
+        </SearchBtn>
       </FlightInfoContainer>
     </SearchBarContainer>
   );
@@ -141,19 +146,13 @@ const InfoDestination = styled.span`
   ${({ theme }) => theme.fonts.heading09};
 `;
 
-const InfoDate = styled.span`
-  margin-right: 1.3rem;
-  color: ${({ theme }) => theme.colors.skscanGrey900};
-  ${({ theme }) => theme.fonts.heading09};
-`;
-
 const InfoSeat = styled.span`
   margin-right: 8.5rem;
   color: ${({ theme }) => theme.colors.skscanGrey900};
   ${({ theme }) => theme.fonts.heading09};
 `;
 
-const SearchBtn = styled.div`
+const SearchBtn = styled.button`
   display: flex;
   align-items: center;
   justify-content: center;

src/components/main/Calendar.tsx

@@ -14,21 +14,23 @@ type MoveBtnProps = {
 };
 
 const Calendar = () => {
-  const [dateRange, setDateRange] = useState<[Date | null, Date | null]>([null, null]);
+  const [startDate, setStartDate] = useState<Date | null>(null);
+  const [endDate, setEnddate] = useState<Date | null>(null);
 
   const selectDays = (dates: [Date | null, Date | null]) => {
-    setDateRange(dates);
+    setStartDate(dates[0]);
+    setEnddate(dates[1]);
   };
 
   const [isSame, setSame] = useState(false);
 
   useEffect(() => {
     setSame(
-      dateRange[0]?.getFullYear() === dateRange[1]?.getFullYear() &&
-        dateRange[0]?.getMonth() === dateRange[1]?.getMonth() &&
-        dateRange[0]?.getDate() === dateRange[1]?.getDate(),
+      startDate?.getFullYear() === endDate?.getFullYear() &&
+        startDate?.getMonth() === endDate?.getMonth() &&
+        startDate?.getDate() === endDate?.getDate(),
     );
-  }, [dateRange]);
+  }, [startDate, endDate]);
 
   const [show, setShow] = useState(true);
 
@@ -55,8 +57,8 @@ const Calendar = () => {
         locale={ko}
         dateFormat="MM.dd(EE)"
         minDate={new Date()}
-        startDate={dateRange[0]}
-        endDate={dateRange[1]}
+        startDate={startDate}
+        endDate={endDate}
         selectsRange={true}
         onChange={selectDays}
         onInputClick={() => setShow(true)}
@@ -86,6 +88,7 @@ const CalendarWrapper = styled.section<{ $isSame: boolean; $show: boolean }>`
     visibility: ${({ $show }) => ($show ? null : 'hidden')};
     margin-top: 5.35rem;
     border-radius: 1.2rem;
+    background-color: ${({ theme }) => theme.colors.skscanWt};
     padding: 2.4rem;
     color: ${({ theme }) => theme.colors.skscanGrey900};
     ${({ theme }) => theme.effects.boxDrop};

src/components/main/CalendarItem.tsx

@@ -38,6 +38,7 @@ const StyledCalendarContainer = styled(CalendarContainer)`
   display: flex;
   flex-direction: column;
   gap: 2rem;
+  background-color: ${({ theme }) => theme.colors.skscanWt};
 `;
 
 const CalendarHeader = styled.div`

src/components/main/Header.tsx

@@ -44,15 +44,15 @@ const HeaderContainer = styled.header`
   justify-content: center;
   background-color: ${({ theme }) => theme.colors.skscanPrimary};
   padding: 3.4rem calc((100vw - 104.6rem) / 2) 0;
-  width: 100vw;
-  height: 14.6rem;
+  width: 100%;
+  height: 35.3rem;
   color: ${({ theme }) => theme.colors.skscanWt};
 `;
 
 const HeaderBar = styled.div`
   display: flex;
   flex-direction: column;
-  justify-content: space-between;
+  gap: 4.4rem;
   width: 100%;
   height: 100%;
 `;

src/components/main/Insight.tsx

@@ -92,7 +92,6 @@ const RightArticle = styled(Article)`
 `;
 
 const ArticleImg = styled.img`
-  z-index: -1;
   border-radius: 0.8rem;
   overflow: hidden;
   object-fit: cover;

src/components/main/Nav.tsx

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+import SearchBar from '../common/SearchBar';
+
+const Nav = () => {
+  return (
+    <NavContainer>
+      <Title>수백만 개의 저가 항공권, 검색 한 번으로 간단하게</Title>
+      <SearchBar />
+    </NavContainer>
+  );
+};
+
+export default Nav;
+
+const NavContainer = styled.section`
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+  padding-top: 4.8rem;
+`;
+
+const Title = styled.h1`
+  color: ${({ theme }) => theme.colors.skscanWt};
+  ${({ theme }) => theme.fonts.heading04};
+`;

src/components/main/QnA.tsx

@@ -40,6 +40,7 @@ const QnAContainer = styled.section`
   display: flex;
   flex-direction: column;
   gap: 2.8rem;
+  margin-bottom: 7.9rem;
 `;
 
 const QnAHeader = styled.div`

src/pages/Main.tsx

@@ -1,9 +1,12 @@
 import styled from 'styled-components';
 
+import { MainBannerImg } from '../assets/image';
+import Footer from '../components/common/Footer';
 import SearchBar from '../components/common/SearchBar';
 import Header from '../components/main/Header';
 import Insight from '../components/main/Insight';
 import LowestFlights from '../components/main/LowestFlights';
+import Nav from '../components/main/Nav';
 import QnA from '../components/main/QnA';
 import RecommendDestination from '../components/main/RecommendDestination';
 import RecommendFlight from '../components/main/RecommendFlight';
@@ -14,22 +17,29 @@ const Main = () => {
       <Header />
       <SearchBar />
       <Container>
+        <Nav />
         <Insight />
         <RecommendDestination />
         <RecommendFlight />
+        <ADImg src={MainBannerImg} alt="MainBannerImg" />
         <LowestFlights />
         <QnA />
       </Container>
+      <Footer />
     </>
   );
 };
 
 export default Main;
 
-export const Container = styled.main`
+const Container = styled.main`
   display: flex;
   position: relative;
   top: 14.6rem;
   flex-direction: column;
   gap: 10rem;
 `;
+
+const ADImg = styled.img`
+  object-fit: contain;
+`;