• 실제로 서비스를 이용하며 좋은 경험을 토대로, 대한민국 NO.1 여행 플랫폼 <마이 리얼 트립>의 클론 프로젝트를 진행하게 되었습니다.
• 2주간의 클로닝 프로젝트이기 때문에 선택과 집중을 하여 항공권 기능만 구현하였습니다.
• 개발은 초기 세팅부터 전부 직접 구현하였으며, 데모 영상에서 보이는 부분은 모두 백엔드와 연결하여 실제 사용할 수 있는 서비스 수준으로 개발한 것입니다.

• 2022/1/10~ 2022/1/21
• Frontend - 강희원, 김선주, 박준영, 성윤경
• Backend - 이민석, 이찬주
• Backend Link: https://github.com/wecode-bootcamp-korea/28-2nd-mycodetrip-backend.git

Front-end

Back-end

1. Authorization & Social Login

• Kakao 아이디를 통한 회원가입 & 로그인 기능

2. Main

   - 출발지, 도착지, 여행기간, 인원 수를 선택한 비행 티켓 선택 기능
   - 최근 검색한 항공권 기록 목록 제공
   - 광고 배너(Carousel)
   - 추천 여행지 제공
   

3. Flight Ticket List

   - Main에서 명시한 조건에 따른 항공권 목록 조회
   - 높은 가격 순, 낮은 가격 순, 항공사, 등 필터링 기능 제공
   - 선택된 항공권 포지션을 가장 위로 올리는 기능
   - 선택된 항공권 확인 및 금액 확인 페이지
   

4. 예약 페이지

   - 예약자와 탑승객 정보를 받고, 선택된 항공권 확인
   - 최종 금액을 반영, 구매 및 약관 동의 확인
   

5. 마이 페이지 - 결제 버튼을 누른 항공권에 대한 정보를 조회

import styled from 'styled-components';
const MainWrapper = styled.div`
  ${({theme}) => theme.flex};
  background-color: red;
  color: ${({theme=> ({theme.color.gray_500};
`;

• 일반적인 태그 대신에 styled.Tag명으로내부에 sass 로직으로 스타일 작성
• sass 문법 이기에 Nesting이 가능하다.
• Components이기에 props를 받을 수 있으며 ${props => props.color} 또는 ${({color} => color)}와 같이 props를 스타일에 적용시킬 수 있다.

• props에는 ThemeProvider로 부터 전달받은 theme객체가 들어있고 내부의 값들은 아래와 같다.
• ${props => props.theme.색상명 또는 flex}로 적용시킬 수 있다.
• theme.flex의 경우 와 같이 props로 넘겨 주면 justify props가 theme.flex의 props로 들어가 적용이 된다.

export const theme = {
  flex: css`
    display: flex;
    align-items: center;
  `,
  color: {
    white: '#ffffff',
    black: '#222222',
    primary_300: '#e6f4fd',
    primary_400: '#2b96ec',
    primary_500: '#2a94e9',
    green: '#147b5e',
    gray_50: '#f0f3f5',
    gray_100: '#f0f3f5',
    gray_300: '#dfe3e6',
    gray_500: '#acb5bd',
    gray_800: '#656d75',
  },
};

• 이 프로젝트는 마이리얼트립 사이트를 참조하여 학습목적으로 만들었습니다.
• 실무수준의 프로젝트이지만 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다.
• 이 프로젝트에서 사용하고 있는 사진 대부분은 위코드에서 구매한 것이므로 해당 프로젝트 외부인이 사용할 수 없습니다.