- 실제로 서비스를 이용하며 좋은 경험을 토대로, 대한민국 NO.1 여행 플랫폼 <마이 리얼 트립>의 클론 프로젝트를 진행하게 되었습니다.
- 2주간의 클로닝 프로젝트이기 때문에 선택과 집중을 하여 항공권 기능만 구현하였습니다.
- 개발은 초기 세팅부터 전부 직접 구현하였으며, 데모 영상에서 보이는 부분은 모두 백엔드와 연결하여 실제 사용할 수 있는 서비스 수준으로 개발한 것입니다.
- 2022/1/10~ 2022/1/21
- Frontend - 강희원, 김선주, 박준영, 성윤경
- Backend - 이민석, 이찬주
- Backend Link: https://github.com/wecode-bootcamp-korea/28-2nd-mycodetrip-backend.git
- Authorization & Social Login
- Kakao 아이디를 통한 회원가입 & 로그인 기능
-
- 출발지, 도착지, 여행기간, 인원 수를 선택한 비행 티켓 선택 기능 - 최근 검색한 항공권 기록 목록 제공 - 광고 배너(Carousel) - 추천 여행지 제공
-
- Main에서 명시한 조건에 따른 항공권 목록 조회 - 높은 가격 순, 낮은 가격 순, 항공사, 등 필터링 기능 제공 - 선택된 항공권 포지션을 가장 위로 올리는 기능 - 선택된 항공권 확인 및 금액 확인 페이지
-
- 예약자와 탑승객 정보를 받고, 선택된 항공권 확인 - 최종 금액을 반영, 구매 및 약관 동의 확인
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',
},
};
- 이 프로젝트는 마이리얼트립 사이트를 참조하여 학습목적으로 만들었습니다.
- 실무수준의 프로젝트이지만 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다.
- 이 프로젝트에서 사용하고 있는 사진 대부분은 위코드에서 구매한 것이므로 해당 프로젝트 외부인이 사용할 수 없습니다.