2020년 1학기에 진행한 '소프트웨어 시스템 개발' 팀 프로젝트입니다✨
반려동물 정보를 공유할 수 있는 반려동물 커뮤니티 사이트입니다.
-
정보 게시판
반려동물 정보를 공유할 수 있는 게시판입니다.
-
질문 게시판
- 반려동물에 관한 질문을 하는 공간으로, 댓글로 답변을 달 수 있습니다.
- 정보 게시판과 달리 채택 기능이 있어 글 작성자가 답변을 채택하면, 더이상 답변을 달 수 없게 설정했습니다.
-
공구 게시판은 사용자들이 공동 구매를 진행할 수 있는 게시판입니다.
- 마감기한과 목표 인원, 물품 이름 등을 작성할 수 있습니다.
- 사용자가 결제를 하면 현재 인원이 증가하고, 스케줄러를 통해 마감기한이 되면 현재 인원과 목표 인원을 비교해 게시글 제목에 공구 성공 여부를 알려줍니다.
-
중고 게시판은 사용자 간의 중고 물품을 거래할 수 있는 게시판입니다.
- 사용자가 사이트 내의 결제 시스템을 이용하여 1:1로 거래할 수 있습니다.
-
펫시터 게시판은 펫시터들이 글을 작성하는 매칭 게시판, 펫시터 리뷰를 작성할 수 있는 리뷰 게시판으로 나뉘어 있습니다. 매칭 게시판은 펫시터 회원만 작성이 가능하고 리뷰 게시판은 일반 회원만 글 작성이 가능합니다.
- 리뷰 게시판에서 글을 작성할 때, 매칭됐었던 펫시터 리스트를 불러올 수 있습니다.
- 매칭 게시판에서 글을 작성할 때는 요일, 반려동물의 크기, 가격, 지역 등을 입력할 수 있습니다. 특히, 지역은 카카오 지도를 사용해 위치를 표시할 수 있도록 하였습니다.
- 매칭 게시판에서는 사용자가 원하는 조건을 선택해서 게시글을 필터링할 수 있습니다.
-
메인 페이지 🐾
- 슬라이드 배너에서 오늘 추천 수가 가장 많은 게시글을 확인할 수 있습니다.
- 메인 페이지 하단에서는 일주일 간 추천 수가 가장 많은 게시글들을 최대 3개까지 확인할 수 있습니다.
- 모든 페이지 상단에는 네비게이션 바가 있어 언제든지 다른 게시판으로의 이동이나 로그인 / 회원가입이 가능합니다.
-
로그인 | 회원가입 🐕
- 회원가입 시 회원 타입을 선택해야 하고, 회원 타입에 따라 게시판 이용에 제한이 있습니다.
- Spring Security를 적용해 회원가입을 하면 비밀번호가 Bcrypt로 인코딩됩니다.
-
게시판 🐈
- 게시판은 정보 게시판, 질문 게시판, 공구 게시판, 중고 게시판, 펫시터 게시판으로 나뉘어 있습니다.
- 각 게시판에서는 게시글을 모아볼 수 있고 글 제목/ 글 내용 / 작성자 별 검색이 가능합니다.
- 한 페이지당 글 10개씩 배치될 수 있도록 페이지네이션을 적용하였고 5페이지가 넘어가면 화살표로 페이지 이동이 가능합니다.
-
게시글 상세 보기 🐩
- 게시글 상세 보기에서는 추천이 가능합니다. 단, 글 작성자는 추천이 불가능합니다.
- 게시글 상세 보기 하단에서는 댓글과 답글 작성이 가능합니다.
- 본인이 작성한 글 / 댓글에 한해서만 수정, 삭제가 가능합니다.
- 중고 게시판, 공구 게시판에서는 추천 대신 장바구니 기능이 있습니다.
-
게시글 작성하기 🦮
- 글 작성 시, 네이버 스마트 에디터를 이용할 수 있습니다. 사진 첨부 기능까지 추가돼 있어 다중 이미지 첨부도 가능합니다.
- 일반 글쓰기 폼은 제목과 글 쓰기 란만 있으나, 펫시터 게시판, 중고 게시판, 공구 게시판의 경우 게시판의 성격에 따라 조건을 추가 입력할 수 있습니다.
-
마이페이지 🎨
- 마이페이지는 로그인한 회원만 접근이 가능합니다.
- 마이페이지에서는 내가 쓴 글, 댓글, 북마크를 위와 같은 화면처럼 확인할 수 있습니다.
- 회원 정보 수정으로 비밀번호를 변경할 수 있습니다.
- 장바구니는 공구 게시판, 중고 게시판을 구분해서 확인할 수 있습니다.
- 주문 내역에서는 현재까지 사용자가 주문한 내역을 확인할 수 있습니다.
-
장바구니 😻
- 장바구니에서는 장바구니에 들어있는 상품을 삭제할 수 있습니다.
- 체크 박스에 체크한 상품만 계산이 되며 총상품금액과 결제 예상 금액이 변동됩니다.
-
결제하기 💸
- 결제 폼에서는 주문 상품 정보와 결제 정보, 최종 결제 금액을 확인할 수 있습니다.
- 결제 정보에서는 카드 번호, CVC 번호 등 결제에 필요한 정보를 입력할 수 있고, 각각의 값은 validation을 진행합니다.
✅ 데모영상은 여기에서 확인할 수 있습니다.