제작 의도 | 여행을 하는 순간뿐 아니라! 과정까지 기록을 남겨 브이로그같은 서비스를 구현하고자 트립로그라는 이름으로 제작하였습니다 |
---|---|
개발기간 | 2022년 10월 19일 ~ 11월 4일 |
플랫폼 | Web |
개발 인원 | 총 4명 (프론트엔드 2명, 백엔드 2명) |
Page Link | http://13.125.234.1:3000/ |
환경 | 상세 스택 |
---|---|
언어 |
HTML, CSS, Javascript, Node.js, MongoDB |
프레임워크 & 라이브러리 |
React, Redux, React Bootstrap, React-Calendar, styled-component |
보조 프로그램 |
Illustration, Figma, AWS |
@thals0 | @bokjunwoo | @lzns960 | @ddingyull |
---|---|---|---|
Main Web View |
Sub Main List & Detail Mypage UI |
Category Content View Search View |
Category Content View Search View |
- 지도로 동선을 보면서 일자별로 여행계획을짜고 친구에게 공유할 수 있는 기능
- 체크리스트, 가계부처럼 부가적으로 일상에서 필요한 기능
- 만개가 넘는 많은양의 데이터를 지역에 따라 소팅된 정보들에 접근하는 기능
• 백엔드에서 중복검사를 통해 같은 이메일로 중복 가입 불가
• 로그인 정보를 미리 담아둬서 바로 로그인 가능
• 로그인을 하면 로그아웃 하기 전까지 로그인 정보를 리덕스에 저장해서 페이지 이동마다 로그인 정보 가져와 사용 가능 이를 통해 각 페이지 별로 isLogin 확인 할 수 있고, 닉네임 정보 벡에 보내서 해당 유저의 정보만들 받을 수 있음
• KakaoDveloper 앱 제작하여 카카오 로그인이 가능하도록 구현
• 각 지역의 메인페이지로 저희가 추천하는 여행지들을 추천받을 수 있도록 지역코드를 통해 변수로 받아 라우팅 될 수 있도록 구현
• 단, 각 지역의 이름, 특색 이미지가 보여지되, 페이지가 분리되지 않도록 배열을 이용해 이미지를 구현
submain.mov
• 첫번째 클릭값과 두번째클립값, 그리고 그 기간을 하나씩 넣은 배열을 통해 컴포넌트 구현
• 나만의 여행일기장으로 느껴질 수 있도록 유저의 여행일자를 화면에 표시 • 장소추가 눌렀을때 해당지역에 대해 여행지를 검색
- 지역코드를 통해 해당 지역의 api데이터만 가져와서 해당 지역 여행지를 보여줌
- 리듀서에 저장해놓은 지도좌표를 통해 좌표값으로 반복문으로 지도가 보여지도록 구현
- 이때, 추후에 날짜별로 각각 여행지를 추가하기 위해 리듀서에 "일자별 컴포넌트의 idx값, 카카오지도의 idx값" 저장하여 반복문으로 컴포넌트개수만큼 구현하였음
- 클릭한 지역의 데이터를 리듀서에 배열로 담은 후 추가되는 item에 데이터를 불러와서 넣어줍니다 이때, 아까 저장해두었던 지도 idx또한 따로 저장해줘서 각각 좌표가 따로 찍힐 수 있도록 하였습니다.
- 계획을 완료하였다면 저장하기 버튼을 통해 저장
- 카카오톡으로도 공유도 할 수 있음
plan.mov
• React useState 사용하여 check여부 확인 후 mongnDB에 저장
• 아이템 추가하기, 삭제하기 또한 useState 활용하여 DB에 저장
• useEffect를 활용하여 추가, 삭제, 체크시 바로 체크리스트에 반영되도록 함 (랜더링)
• react bootstrap으로 ui 구현
• React-Calendar 라이브러리로 날짜 선택
• 내용, 금액 입력 후 등록시 가계부에 등록 완료
• 정산 할 인원이 늘어나면 명당 계산 금액 계산
• 가계부 초기화 가능
• 각 지역 별 sorting 후 지역안에서도 관광, 문화, 음식, 숙소, 쇼핑의 카테고리로 다시 한 번 sorting (지역코드, 카테고리 아이디를 변수로 활용)
• useState, •useEffect를 활용한 좋아요 및 조회수 구현
• axios를 활용하여 서버와 연결
• 리뷰 업데이트를 redux에 저장하여 리뷰가 생성 혹은 삭제 될 때마다 페이지 재랜더링
• Redux를 활용하여 로그인 확인 후 axios를 통해 DB에서 해당 유저 정보 반환
• 여행 조회, 나만의 체크리스트, 가계부, 내가 쓴 리뷰 등 조회 가능
• 체크리스트, 가계부는 업데이트 가능
• 재랜더링 되지 않도록 기본적인 nav는 고정하고 데이터에 따라서만 랜더될 수 있도록 tab을 활용하여 구현