1 / 18

Time Travel 제안서_Thrip(4조)

Time Travel - Thrip(4uc870)

jihyeg29
Télécharger la présentation

Time Travel 제안서_Thrip(4조)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. [웹 개발 2차 프로젝트] 여행 계획을위한 공유 Scheduler 4조 Thrip | 지현우 최지은 김지혜

  2. INDEX 05 웹페이지 상세 기능 06 Error 및 해결방안 07 역할분담표 04 데이터 베이스 ERD 03 페이지 설계도 08 진행 타임라인 01 프로젝트 개요 02 개발환경 각 페이지 별 구조 및 기능, 코드 프로젝트 진행 중 발생한 Error, 해결방안 팀원별 구현 내용 전체 페이지의 기능, 연결 과정 데이터 베이스 관계 모델링 프로젝트 개발 시 사용한 툴, 라이브러리, 패키지 프로젝트 제안 배경 및 목적 2024.02.22-03.10 2차 프로젝트 진행 과정

  3. 01 프로젝트 개요 여행을 계획할 때 유용하게 사용할 수 있는 Schedular , Time Travel 가족, 친구 등 함께 여행하는 사람들과 공유할 수 있는 Schedular 1. 데이터 베이스(My SQL)를 사용하여 나의 일정을 관리 2. Socket.io를 사용하여 함께 하는 이들과 편하게 소통 데이터 베이스(My SQL)를 사용하여 나의 일정을 수정

  4. 02 개발 환경 Backend Frontend UI API

  5. 03 페이지 설계도 Time Travel http://15.164.87.187 Y N

  6. 04 데이터 베이스 ERD

  7. 05 웹페이지 상세 기능 1(1) 회원가입/로그인 아이디/ 비밀번호를 찾는 메일 전송 회원가입/로그인 입력한 이름/아이디 + 메일 주소가 모두 일치하는 회원 정보가 DB에 있다면 입력한 메일 주소를 구글 스프레드 시트에 저장하고 구글 Apps Script를 실행 임의의 숫자로 인증번호를 생성하고 인증번호를 담은 메일을 발송 인증번호가 일치하면 아이디 노출 또는 비밀번호 재설정을 하고, 로그인 하기 버튼 클릭 시 해당 아이디 자동으로 입력

  8. 05 웹페이지 상세 기능 2(1) 메인 페이지여행일정좋아요♡ 누르기 메인 페이지 추천 수가 가장 많은 6개의 일정을 메인에 노출 페이지 접속 시 추천 리스트에 접속자의 index값이 존재하면 버튼을 active 상태로 변경 추천 X 추천 O 추천 버튼을 눌렀을 때 회원 index가 리스트에 존재하면리스트에서 제거하고, 존재하지 않으면 추가

  9. 05 웹페이지 상세 기능 3(1) 일정 생성캘린더 출발일과 도착일 선택해서 일정 만들기 selectedDate에 선택한 날짜의 연도, 월 일자, 요일을 객체의 value 값으로 저장, calendar.js 일정생성 달력의 날짜 태그 함수 selectArr() 함수 selectDep() selectedDate Arr객체에 값 할당 DB에 저장 selectedDate Dep 객체에값 할당 DB에 저장

  10. 05 웹페이지 상세 기능 3(2) 일정 생성여행크루 선택 일정 생성 검색 버튼 클릭 시 해당 문자를 포함한 아이디를 가진 회원을 검색하여 보여줌 클릭하면 멤버 리스트에 추가하고, 이미 리스트에 존재하는 회원을 클릭하면 리스트에서 제거

  11. 05 웹페이지 상세 기능 4(1) 세부 일정 생성지도 API를 사용한 거리 계산 지도 상의 마커의 위치 정보 (위도, 경도, 위치 이름)를 변수에 각각 저장 , map.js 세부 일정 생성 place_name: "서울역“ place.x: "126.970606917394“ place.y: "37.5546788388674" 출발지(위도1, 경도1) & 위도 경도 위치 이름 도착지(위도2, 경도2)의 위치 정보를 사용해 거리 계산 함수 getDistance(위도1, 경도1, 위도2, 경도2)

  12. 05 웹페이지 상세 기능 5(1) 일정 목록캘린더 상에 여행 일정 표시 각 일정별 출발 객체 { 연도, 월, 일} & 도착 객체 { 연도, 월, 일}, triplist.js 출발 객체 도착 객체 여행 일정에 대한 두가지 Case Case1. 출발일과 도착일이 같은 달인 같을 경우 Case2. 출발일과 도착일이 다른 달인 경우 해당하는 날짜에 표기 Case1

  13. 05 웹페이지 상세 기능 6(1) 일정 목록지도 API로 각 일정의 위치 마크 생성 일정 목록  const { category, arrTime, distance, detailMemo, place } <div id="map" style="height:200px;"></div> 지도 추가 Kakao map API의 마커 Marker 함수에 위도와 경도 입력, 해당 장소의 마커 표출

  14. 06 Error 및 해결방안 1. 지도 지도 API 중복 연동 불가 Error 해결방안 Toggle 기능 추가 Toggle버튼, 기능을 추가하여 클릭 시 지도 위치 생성 두번째 일정의 위치가 첫번째 일정의 지도 위치에 잘못 적용 두번째 일정의 지도 미출력 Toggle버튼, 기능을 추가하여 클릭 시 지도 위치 생성

  15. 06 Error 및 해결방안 2. 회원가입회원가입 시 연락처 DB저장 오류 Data type 변경 Error 해결방안 Data type을 문자(string)로 변경하고 연락처의 data type을 숫자(integer)로 설정 제일 앞의 0이 생략 DB에 저장 숫자만 입력 가능, 자동으로 하이픈(-) 생성하도록 수정 회원정보 수정페이지에서 데이터를 불러왔을 때에도 10********의형태로 DB에 저장

  16. 06 Error 및 해결방안 회원가입 오류 Error 해결방안 스크립트 수정 {NULL} 값 입력 회원 가입 시 아무 정보를 입력하지 않아도 회원 가입이 됨 회원 가입 버튼 클릭 시 미입력된input이 있으면 해당 input영역으로 focus이동하도록 스크립트 수정

  17. 07 진행 타임라인 01 주제 선정 02 UI 03 개발 04 수정 및 배포 일자 2/22 2/24 2/25 2/26 2/27 2/28 2/29 3/01 3/02 3/03 3/04 3/05 3/06 3/07 3/08 3/09 3/10 2/23 주제 선정 GIT연결 Figma 작성 모바일 버전 Figma 작성 PC 버전 AWS데이터 베이스 구축 작업 방식 결정 map 지도 거리 계산 오류 수정 map Kakao Map API Key 발급 map Kakao Map API 검색 기능 map Kakao Map API 마커 연동 필요 기능 결정 Calendar 캘린더 오류 수정 Calendar 캘린더 구현, 여행 일정 생성 triplist 내 여행 일정 표기 Chat 채팅 기능 구현 Login, Signup 로그인& 회원가입 AWS 회원 DB 저장 AWS 여행 일정 DB 저장 AWS 채팅 정보 저장 CSS 모바일 ver CSS PCver

  18. 08 역할분담표

More Related