[spring] 팀프로젝트 - 짐 보관 예약 웹사이트

👉들어가기에 앞서 ❗개인 공부/복습 목적이기 때문에 부족하거나 내용상 오류가 있을 수 있다.❗ > 그동안 백엔드 공부를 하면서 만들었던 것들은 프로젝트라고 부르기 애매한? 개인적으로 만든 소소한 결과물 뿐이라 팀 프로젝트를 진행해보고 싶었다. 팀원을 구해 프론트/백엔드 1명씩 맡아서 프로젝트를 진행했고 시간이 부족했지만 다행히 계획했던 기간을 크게 ...

💡프로젝트 생성 및 기본 환경 설정은 게시판 만들기때 작성한 내용이기 때문에 생략했다. 💡

모든 항목들을 유효성 검사를 통해 회원가입이 가능하다. 그 중에서 아이디는 ajax 유효성 검사로 중복 체크 해 새로운 아이디로 가입이 가능하고 비밀번호 암호화를 통해 보안을 강화한다.

저장된 아이디와 비밀번호로 로그인 성공시 메인 페이지로 이동하고 틀린 정보를 입력시 로그인 페이지는 넘어가지 않는다.로그인 유지를 체크할 경우 자동 로그인이 가능하다.

로그인에 성공한 사용자는 세션을 갖게된다. 세션이 필요한 이유는 게시판 글 작성처럼 로그인한 유저만 사용 가능한 기능이 있기 때문이다.

로그인 유지 박스를 체크하고 로그인을 진행하면 브라우저에 쿠키가 남아 계속해서 로그인 상태를 유지 한다. 단, 로그아웃이나 쿠키 시간 만료라면 재 로그인이 필요하다.

로그아웃을 하면 세션이 만료된다.

로그인이 필요한 페이지는 인터셉터를 적용해 로그인 사용자만 이용가능하도록 처리한다. 인터셉터는 세션 코드를 인터셉터 클래스에 한번만 작성하면 되기 때문에 코드 간소화로 메모리 낭비를 줄일수 있다.

예약을 위해 시작/죵료 일자, 예약자, 지점명/사이즈는 3가지 옵션 중에서 선택하면 기간과 사이즈 별 이용요금이 계산되어 예약이 가능하다. 성공적으로 예약되면 성공 메시지와 함께 예약 내역이 뜨고 마이페이지에서도 조회와 취소를 할 수 있다.

게시판은 글번호, 제목, 작성자, 작성일, 조회수를 보여주고 페이징 처리로 한 페이지에 글 10개씩 보여진다. 최신 작성일이 상단에 오도록 정렬했고 제목을 클릭하면 상세 게시글을 볼 수 있다.

게시판 기능으로 인터셉터를 활용해 세션이 있는 사용자만 리뷰 작성/게시글 조회 가능하다.입력칸이 비어있는 채로 글 등록하기 버튼을 클릭하면 입력하라는 경고창이 뜨고 비어있는 입력칸으로 포커스가 이동한다.취소 버튼을 클릭하면 작성 중인 글이 초기화된다.

이용후기 목록에서 제목을 클릭하면 해당 사용자에 대한 정보를 그대로 가지고오고 상세글을 볼 수 있다. 글을 클릭할 때마다 조회수도 증가한다.

수정 버튼 클릭시 해당 사용자에 대한 정보를 그대로 가지고오고 내용을 수정하고 저장하면 전 내용은 삭제되고 새로운 내용으로 변경된다.본인이 작성한 글에서만 수정/삭제 권한이 있고 작성자가 아니라면 조회만 가능하다.

삭제 버튼 클릭시 해당 글은 삭제되고 db에서도 삭제된다.

마이페이지의 예약 확인을 클릭하면 예약 내역 조회가 가능하고취소 버튼 클릭시 예약 내역 삭제를 할 수 있다.예약 취소 버튼 클릭시 취소 실수를 방지하기 위해 경고창을 띄우고 취소에 성공하면 내역과 db에서 모두 삭제된다.

회원 정보를 클릭하면 해당 아이디의 회원 정보를 보여준다.

회원정보 수정하기는 해당 아이디의 회원 정보를 그대로 가져와 아이디를 제외한 다른 항목들을 변경할 수 있고 수정된 정보로 저장된다.

이메일을 입력하고 가입된 정보와 같은지 확인 후 세션이 만료 되며 모든 회원 정보는 삭제되고 탈퇴에 성공한다.

로그인 페이지에서 아이디 찾기를 클릭하면 간단하게 이름과 메일을 입력하면 해당 정보를 찾아 아이디를 알려준다. 비밀번호 찾기 역시 아이디/이름/이메일 입력후 회원 정보가 맞으면 알려준다.

관리자 페이지는 사용자 페이지와 다른 부분이 있다.로그인후 사용자에겐 예약하기 메뉴가 보이지만 관리자에겐 회원목록 메뉴가 보이고 예약 목록/회원 아이디 검색 기능이 있다. 회원 목록 페이지에선 회원 정보를 삭제할 수 있는 권한이 있다.

관리자는 공지사항을 등록/삭제할 수 있는 권한을 가지고 있고 사용자는 공지사항 조회만 가능하다.

프로젝트 회고

웹사이트 방문시 메인페이지에 팝업창이 뜨고 하루동안 보지 않기를 클릭하면 쿠키 생성과 함께 팝업창은 종료된다.

카카오맵 api를 이용해 지도에 위치 표시하기

인증번호를 통해 이메일 인증하기

아임포트 api를 이용해 결제를 한 후에 예약이 가능하도록 구현해 보았다.

아이디/비번이 틀린 경우 controller에서 바로 alert창 띄우기

카카오 로그인 연동해보자

게시판 검색 기능으로 검색 유형 선택과 키워드를 입력해 검색 결과를 가져온다.

마이페이지에서 내가 쓴글 + 더보기 버튼

비밀번호 찾기를하면 발급받은 임시 비밀번호가 암호화 되어 저장한다.

회원정보 수정하기는 디자인을 변경하고 다른 정보들은 그대로 불러오고 비밀번호만 입력 후 재확인이 일치하면 수정이 가능하도록 개선했다.

탈퇴한 회원의 작성글이 남아있다면 회원인지 비회원인지 알 수 없기 때문에 탈퇴시 해당 아이디로 작성된 게시판의 글은 모두 삭제 처리한다.

게시판 현재글에서 이전글/다음글이 표시되고 제목을 클릭하면 해당 글로 이동한다.