🚎 유로버스 🚎

이미지를 클릭하면 홈페이지로 이동합니다.

🔖 목차

1.개요
2.담당 모듈
3.의존성 및 버전 정보
4.분석 및 설계 과정
5.추가 학습
6.참고 사항

1.개요 😃

총 개발 기간 : 2개월
- 분석 및 설계 : 2020/01/01 ~ 2020/01/23
- 구현 : 2020/01/24 ~ 2020/03/07
총 개발 인원 : 6명
시스템 개요 : MVC2 모델을 기반으로 스프링 프레임워크를 이용하여 만든 유럽 여행 플래너 및 커뮤니티 사이트입니다. 크게 회원 관리, 주문 관리, 플래너, 커뮤니티, 채팅 및 알람 모듈로 구성되어 있습니다.

2.담당 모듈 🎯

1️⃣ 로그인

bootstrap 의 modal 을 사용하여 메인 페이지에서 로그인텍스트를 클릭하면 출력됩니다.ajax 를 사용하여 일치하는 회원이 없는경우 , 회원탈퇴한 회원이 로그인을 누르면 sweetalert 이 출력됩니다.아이디찾기와 비밀번호찾기 페이지로 이동할 수 있으며 naver,kakao,google sns계정으로 로그인하거나 되있으면 간단한 회원가입페이지로 이동할 수 있습니다.

2️⃣ 아이디찾기 비밀번호찾기

첫 단계에서는 이름, 핸드폰, 아이디(비밀번호 찾기)를 입력하고 찾기를 하면 일치하는 회원의 아이디(아이디 찾기) 3글자만 보여주고 뒤에는 *로 표시한다 ( ex=jis*****) 그리고 인증을 누르면 입력한 핸드폰 번호 또는 이메일로 청기와 랩, 자바 메일 api를 사용하여 인증번호를 발송하고 일치하는 인증번호를 입력하면 아이디 찾기는 *이 사라진 아이디를 확인할 수 있고 비밀번호 찾기는 비밀번호 변경을 하게 됩니다.

3️⃣ 회원가입

필수 입력 항목들은 정규식을 사용하여 알맞은 정보만 입력 가능하도록 설정하였고 ajax를 통한 비동기처리로 아이디와 닉네임의 중복을 방지하고있습니다. 프로필이미지는 미리보기가 가능하며 가고싶은 나라와 여행스타일을 선택 할 수 있습니다.

4️⃣ 마이페이지 , 회원정보수정

마이페이지에서는 회원의 프로필이미지 , 닉네임 , 이름 , 성별 , 이메일 , 전화번호 , 가입일자 , 가고싶은 나라 , 여행 스타일을 간단하게 볼 수 있으며 총포인트 , 총 여행일 수 , 보유 슬롯 수 , 작성한 게시글 수 , 작성한 댓글 수 , 참여한 동행도 마이페이지에서 바로 확인할 수 있습니다. 마이페이지에서 출석체크도 가능하며 출석시 100p씩 적립됩니다. 회원정보 수정에서는 기존의 정보들을 수정할 수 있으며 회원탈퇴도 가능합니다. 회원탈퇴 후 다시 로그인을 시도하면 '복구하시겠습니까?'문구가 출력되며 기존의 비밀번호를 입력하면 복구가 완료됩니다.

5️⃣ 게시판(포인트 사용 내역,나의 게시글/댓글,나의 북마크,플래너 초대,내가 찜한 상품,1:1문의)

모든 게시판은 PageNavigation모듈을 만들어서 페이징하고 있으며 포인트 사용내역에서는 포인트의 상태를 표시하고 총 포인트를 확인할 수 있으며 작성한 게시글 댓글을 볼 수 있고 나의 북마크에서는 비동기처리로 바로 북마크를 해제할 수 있습니다. 내가 찜한 상품에서 바로 구매페이지로 넘어 갈 수 있으며 1:1문의에 답글이 달리면 바로 확인할 수 있습니다.

6️⃣ 중복 로그인 방지

spring intercepter를 사용하여 preHandle에서 로그인한 회원의 아이피를 아이디와 함께 디비에 저장하고 다른 아이피로 동일한 아이디로 접근할 경우 기존에 있던 회원이 컨트롤을 타는 작업을 하는 순간 바로 자동으로 로그아웃하게 했습니다.

3.의존성 및 버전 정보 👬

Laguage : Java
Back-end : Spring Framework 4.0.1 / MyBatis / Apache Tomcat / Selenium
Front : HTML5 / BootStrap 4 / CSS3 / jQuery / Ajax / JSP
Database : Oracle 10g / MongoDB 3.6.1
VCS tool : GitHub
IDE : Eclipse
Open Source : Sweetalert / FullCalendar / SummerNote / Owl carousel / AOS / Swiper / Foreign exchange rates API / 공공데이터포털API / 청기와 LAB / I'mPort API / JavaMail API / 네이버로그인 API / 카카오로그인 API / GoogleMap API

4.분석 및 설계 과정 📊

1️⃣ 주제선정(현업 요구사항 정의서,Problem Statement)

2️⃣ 분석(UseCase유형정의 , UseCase정의서 , 요구사항추적표 , VOPC , ERD , 화면정의서)

3️⃣ 설계(VOPC , ERD , 테이블정의서)

4️⃣ 구현(풀캘린더 이용한 출석체크 , 플래너 초대 동의 코드 , 포인트 리스트 sql(mybatis))

5.추가 학습 ✏️

AWS 이용한 배포

학원 수료 후 AWS를 이용해 배포를 해보았습니다. 아마존 EC2의 인스턴스를 2개 생성하여 각각 웹 서버와 MongoDB를 설치하였고, 아마존 RDS를 이용하여 Oracle 12를 설정했습니다. 각 인스턴스끼리 연동을 한 뒤 탄력적 IP를 생성하여 고정 IPv4 주소를 연결했습니다.

(2020/04/24) 셀레니움 구동을 완성하지 못해 항공권 검색과 숙소 검색 기능은 작동하지 않습니다.
(2020/05/02) EC2의 인스턴스를 프리티어로 하나만 실행해야 무료인건데 두 개의 인스턴스를 동시실행하니 비용이 발생하기에 MongoDB 인스턴스를 중지 하여서 채팅 기능이 실행되지 않습니다.

6.참고 사항 ⁉️

문서:포토폴리오(유럽여행플랜커뮤니티홈페이지).pdf
영상:유튜브 발표영상

zi-seong / euroverse Goto Github PK

euroverse's Introduction