- README
친구와 함께하는 여행계획 플랫폼
코로나19가 엔데믹에 접어들어 여행을 가려는 사람의 수가 증가하고 있다. 여행 계획을 짤 때 참여하여 의견을 제시하고 싶지만 시간적, 공간적 여유가 되지않아 참여할 수 없는 사람과 여행 날짜만 정하고 세부계획은 아무도 작성하지 않아 혼자 여행계획을 작성하는 사람의 문제가 있다. 또 여행 계획을 작성할 때 여러가지 서비스를 사용해야하는 번거로움이 있다.
- 같은 공간에 있지 않아도 화상통화를 하며 함께 여행 계획을 작성할 수 있다.
- 일정 계획 과정을 실시간으로 공유함으로 참여자들의 반응을 확인할 수 있다.
- 여행 계획을 작성할 때 사용하는 여러 서비스의 기능을 모아 한 번에 사용가능하게 한다.
- 같은 방에 속한 사람들과 화상통화 및 채팅
- 키워드로 여행 장소 검색
- 카테고리별 여행 장소 검색
- 여행 장소를 지도에 표시하는 마커를 실시간 공유
- 같은 방에 속한 사람들과 일정 계획 과정 실시간 공유
- 작성한 일정을 이미지로 공유
- 의사 결정을 위한 투표
- openJDK 8
- IntelliJ IDE
- Springboot 2.7.7
- Spring Data JPA
- Spring Security
- Spring Web
- WebSocket: Stomp
- MySql: 5.7.30
- VsCode
- Node.js 16.19.0
- React 18.2.0
- SASS
- Git
- Notion
- Jira
- Discord
- Figma
- 코드 버전을 관리
- 회의가 있을 때 마다 회의록을 기록해 보관
- 기술 공부 시 문서를 작성해 팀원과 공유
- 같은 버그 발생 시 빠른 해결을 위해 디버깅 내역을 기록
- 기능명세서, ERD, REST API 등 모두가 공유해야하는 문서 관리
- 컨벤션 정리
- 간트차트 관리
- 매주 목표량을 설정해 Sprint 진행
- 업무의 할당량을 정해 Story Point를 설정하고, In-Progress → Done 순으로 작업
- 화면 공유로 팀원간 원활한 비대면 소통
- 화면 설계서 작성
- 화면 우측 상단 “일정 만들기” 버튼 또는 메인 페이지의 “바로 시작하기” 버튼을 클릭한다.
- 여행일자를 선택하고 일정제목을 입력한다.
- 로고 밑의 토글 버튼을 클릭해 친구초대 창으로 전환한다.
- 친구의 아이디를 입력한다.
- 출력되는 친구의 계정 옆의 “+” 버튼을 클릭해 일정을 생성할 때 친구를 초대할 수 있다.
- 화면 하단의 “방 생성하기” 버튼을 클릭해 일정을 생성하고 일정 계획 화면으로 전환된다.
- 왼쪽 메뉴 바에서 “검색”버튼을 클릭해 검색할 수 있다.
- 검색어를 입력하고 “Enter”를 클릭하면 연관된 장소가 카드 형식과 지도에 마커로 출력된다.
- 장소 카드를 클릭하면 해당 장소의 위치로 지도가 이동한다.
- 장소 카드의 “가게 정보 확인하기” 버튼을 누르면 가게 정보를 확인할 수 있다.
- 장소 카드의 오른쪽 위의 “+” 버튼을 클릭하거나 마커를 클릭한 후 “장소추가” 버튼을 클릭해 장소를 추가할 수 있다.
- 추가된 장소는 왼쪽 메뉴 바에서 “장소” 버튼을 클릭해 확인 할 수 있다.
- 변경된 사항은 참여자들에게 모두 실시간 공유된다.
- 지도 오른쪽 상단의 카테고리를 클릭하면 현재 지도에서 카테고리에 해당하는 장소가 마커로 출력된다.
- 장소 카드의 오른쪽 위의 “+” 버튼을 클릭하거나 마커를 클릭한 후 “장소추가” 버튼을 클릭해 장소를 추가할 수 있다.
- 추가된 장소는 왼쪽 메뉴 바에서 “장소” 버튼을 클릭해 확인 할 수 있다.
- 변경된 사항은 참여자들에게 모두 실시간 공유된다.
- 왼쪽 메뉴 바에서 “장소” 버튼을 클릭해 현재 담긴 장소를 확인할 수 있다.
- 장소는 카테고리 별로 분리되어 있다.
- 담긴 장소 태그의 색깔 부분을 클릭하면 지도가 해당하는 장소 위치로 이동한다.
- 담긴 장소 태그의 이름 부분을 클릭하면 해당 장소가 일정에 추가된다.
- 변경된 사항은 참여자들에게 모두 실시간 공유된다.
- 추가된 일정을 원하는 날짜 박스로 드래그해서 일정을 조정할 수 있다.
- 변경된 사항은 참여자들에게 모두 실시간 공유된다.
- 왼쪽 메뉴 바의 “일정” 에서만 이미지로 추출이 가능하다.
- 왼쪽 메뉴 바의 오른쪽 상단 “공유하기” 버튼을 눌러 이미지로 추출한다.
- 왼쪽 메뉴 바의 “투표” 버튼을 클릭한다.
- “투표 내역” 글씨 옆의 “+” 버튼을 눌러 투표를 생성할 수 있다.
- 투표 제목과 항목을 입력하고 “OK” 버튼을 눌러 투표를 생성할 수 있다.
- 항목을 선택하고 “투표하기” 버튼을 클릭하여 투표를 할 수 있다.
- 참여자들과 채팅을 할 수 있다.
- 화면 상단 가운데 “저장” 버튼을 클릭해 작업한 상황을 저장할 수 있다.
- 메인 페이지에서 오른쪽 상단의 프로필을 누르면 마이페이지로 이동한다.
- “진행 중인 여행 일정” 에서 일정 카드의 “입장” 버튼을 누르면 진행 중인 여행 일정에 입장한다.
- 아이디를 입력하고 “확인” 버튼을 눌러 아이디 중복 체크를 한다.
- 나머지 입력 사항을 모두 입력하고 가입하기 버튼을 누르면 가입이 완료된다.
- 아이디와 비밀번호를 입력하고 “로그인” 버튼을 누르면 로그인이 완료된다.
2023.01.03 ~ 2023.02.17 (약 7주)
| 포트 | 유형 | 프로그램 | 사용포트내용 |
|---|---|---|---|
| 22 | TCP | SSH | Ubuntu 접속을 위해 |
| 80 | TCP | HTTP | HTTP 기본 Port |
| 443 | TCP | HTTPS | HTTPS 기본 Port |
| 3000 | TCP | DOCKER, REACT | planit_front_container의 react port |
| 3478 | TCP/UDP | DOCKER, OpenVidu | 클라이언트 IP 확인을 위해 STUN/TURN 서버에서 사용 |
| 8080 | TCP | DOCKER, Spring | planit_back_container의 Spring Port |
| 8443 | TCP | DOCKER, OpenVidu | OpenVidu Client-side |
| 9090 | TCP | DOCKER, Jenkins | Jenkins Port(8080 → 9090) |
| 9091 | TCP | DOCKER, Jenkins | SSL 인증 Jenkins(9090 → 9091) |
| 40000:57000 | TCP/UDP | DOCKER, OpenVidu | Kurento media Server에서 미디어 연결 설정 시 사용 |
| 57001:65535 | TCP/UDP | DOCKER, OpenVidu | TURN 서버에서 릴레이 된 미디어 연결 설정 시 사용 |