🚃 TripLog,
여행 계획부터 정산까지 하나로 끝내는 트립로그

---

💻 프로젝트

제작 의도	여행을 하는 순간뿐 아니라! 과정까지 기록을 남겨 브이로그같은 서비스를 구현하고자 트립로그라는 이름으로 제작하였습니다
개발기간	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

---

💁🏻‍♀️ ABOUT US

@thals0	@bokjunwoo	@lzns960	@ddingyull
Main Web View	Sub Main List & Detail Mypage UI	Category Content View Search View	Category Content View Search View

📁 유저 플로우

📍 구현한 핵심 기능

1. 지도로 동선을 보면서 일자별로 여행계획을짜고 친구에게 공유할 수 있는 기능
   
2. 체크리스트, 가계부처럼 부가적으로 일상에서 필요한 기능
   
3. 만개가 넘는 많은양의 데이터를 지역에 따라 소팅된 정보들에 접근하는 기능
   
   

📍 페이지별 상세 기능

[로그인 (로컬 / 카카오), 로그아웃, 회원가입]

• 백엔드에서 중복검사를 통해 같은 이메일로 중복 가입 불가

• 로그인 정보를 미리 담아둬서 바로 로그인 가능

• 로그인을 하면 로그아웃 하기 전까지 로그인 정보를 리덕스에 저장해서 페이지 이동마다 로그인 정보 가져와 사용 가능 이를 통해 각 페이지 별로 isLogin 확인 할 수 있고, 닉네임 정보 벡에 보내서 해당 유저의 정보만들 받을 수 있음

• KakaoDveloper 앱 제작하여 카카오 로그인이 가능하도록 구현

[메인] 모든 지역으로 진입 가능한 메인 페이지

[서브메인] 각 지역별 메인 페이지 ( 지역 아이콘 선택에 따라 해당 지역의 데이터만 보여짐)

• 각 지역의 메인페이지로 저희가 추천하는 여행지들을 추천받을 수 있도록 지역코드를 통해 변수로 받아 라우팅 될 수 있도록 구현
• 단, 각 지역의 이름, 특색 이미지가 보여지되, 페이지가 분리되지 않도록 배열을 이용해 이미지를 구현

submain.mov

[여행 날짜 선택] 각 지역에서 원하는 날짜 선택

• 첫번째 클릭값과 두번째클립값, 그리고 그 기간을 하나씩 넣은 배열을 통해 컴포넌트 구현

[여행 계획 짜고 공유] 여행을 계획하는 페이지로 이동

• 나만의 여행일기장으로 느껴질 수 있도록 유저의 여행일자를 화면에 표시 • 장소추가 눌렀을때 해당지역에 대해 여행지를 검색

1. 지역코드를 통해 해당 지역의 api데이터만 가져와서 해당 지역 여행지를 보여줌
2. 리듀서에 저장해놓은 지도좌표를 통해 좌표값으로 반복문으로 지도가 보여지도록 구현
3. 이때, 추후에 날짜별로 각각 여행지를 추가하기 위해 리듀서에 "일자별 컴포넌트의 idx값, 카카오지도의 idx값" 저장하여 반복문으로 컴포넌트개수만큼 구현하였음
4. 클릭한 지역의 데이터를 리듀서에 배열로 담은 후 추가되는 item에 데이터를 불러와서 넣어줍니다 이때, 아까 저장해두었던 지도 idx또한 따로 저장해줘서 각각 좌표가 따로 찍힐 수 있도록 하였습니다.
5. 계획을 완료하였다면 저장하기 버튼을 통해 저장
6. 카카오톡으로도 공유도 할 수 있음
   

plan.mov

[나만의 체크리스트]

• Redux에 저장된 유저 정보로 DB에서 해당 유저의 체크리스트 불러옴
• React useState 사용하여 check여부 확인 후 mongnDB에 저장
• 아이템 추가하기, 삭제하기 또한 useState 활용하여 DB에 저장
• useEffect를 활용하여 추가, 삭제, 체크시 바로 체크리스트에 반영되도록 함 (랜더링)
• react bootstrap으로 ui 구현

[가계부]

• React-Calendar 라이브러리로 날짜 선택
• 내용, 금액 입력 후 등록시 가계부에 등록 완료
• 정산 할 인원이 늘어나면 명당 계산 금액 계산
• 가계부 초기화 가능

[여행지 목록 페이지]

• 각 지역 별 sorting 후 지역안에서도 관광, 문화, 음식, 숙소, 쇼핑의 카테고리로 다시 한 번 sorting (지역코드, 카테고리 아이디를 변수로 활용)

[디테일 페이지]

• useState, •useEffect를 활용한 좋아요 및 조회수 구현
• axios를 활용하여 서버와 연결
• 리뷰 업데이트를 redux에 저장하여 리뷰가 생성 혹은 삭제 될 때마다 페이지 재랜더링

[마이 페이지]페이지에서 활동한 내용은 마이페이지에서 확인할 수 있음

• Redux를 활용하여 로그인 확인 후 axios를 통해 DB에서 해당 유저 정보 반환
• 여행 조회, 나만의 체크리스트, 가계부, 내가 쓴 리뷰 등 조회 가능
• 체크리스트, 가계부는 업데이트 가능
• 재랜더링 되지 않도록 기본적인 nav는 고정하고 데이터에 따라서만 랜더될 수 있도록 tab을 활용하여 구현

mypage.mov