💨 PetConnect
동물 병원 및 장묘 업체 찾기 서비스 웹 사이트 개발
💨 기획 의도
1. 한 사이트에서 반려인이 원하는 지역의 동물 병원 및 장묘 업체 조회 가능 → 편의성 확보
2. 업체 정보 확인과 후기 등록 및 확인 → 정보 제공
3. 반려동물 관련 자유로운 소통 가능 → 커뮤니티 기능
💨 개발 환경
운영체제) Window11
IDE) Eclipse sts 4.18.0
데이터베이스) MariaDB
협업도구) Discord, GitHub, Notion
서버측 도구 및 기술) java 17.0.7, Apache Tomcat, Gradle, Spring boot 2.5.4,
Spring Security, Spring Data JPA(Hibernate)
클라이언트측 도구 및 기술) HTML, CSS, JavaScript, Bootstrap, Ajax, Thymeleaf, Jquery
💨 개발 일정
약 한달 간의 프로젝트 기간으로 9월 20일 발표!
💨 주요 기능 소개
📌 메인 페이지
아래에서 동물병원 및 장묘업체를 선택할 수 있고 시, 도를 선택하면 그에 해당하는 군, 구만 뜬다.
예를 들어서 "서울 특별시 강남구의 동물 병원"을 검색해보자.
📌 지도
검색한 해당 위치의 업체들 리스트와 이에 해당하는 마커들이 찍히는 것을 확인할 수 있다.
지도 리스트에서 병원을 선택을 하면 해당 동물 병원의 마커로 이동하게 되고 인포윈도우창이 표시된다.
또한 지도를 축소하면 클러스터러 기능을 사용해서 보기 쉽게 만들었다.
현재 위치 받아오기 버튼을 누르면 현재 자신의 위치도 받아올 수 있다.
📌 리뷰
로그인을 한 회원에게만 리뷰를 작성할 수 있는 버튼이 보인다.
리뷰를 작성하는 것이 아닌 그냥 리뷰를 보는 것은 로그인을 하지 않아도 가능하다.
리뷰 작성 버튼을 누르면 위의 사진과 같이 모달창으로 별점 및 리뷰를 작성할 수 있다!
200자가 넘으면 자동으로 알림창을 띄워 리뷰를 작성할 수 없도록 했다.
SweetAlert2라고 라이브러리가 있는데 쉽게 이쁜 모달창을 만들 수 있으니 참고 바란다!
📌 회원 가입 및 로그인
스프링 시큐리티를 사용하여 회원 가입 및 로그인을 구현했다.
로그인을 한 회원만 게시판 글 작성, 리뷰 작성이 가능하고 보는 것은 로그인을 하지 않은 회원 모두 가능하다.
📌 게시판 (자유 게시판 & 질문 게시판)
먼저 게시판 리스트에서 최신순과 조회순으로 정렬이 가능하다.
또한 게시글이 10개가 넘어간다면 페이징을 할 수 있도록 구현했고 아래와 같이 검색도 가능하다.
이제 글을 작성해보자.
사진을 포함해서 글을 작성할 수 있고, 자동으로 글자 수를 세주는 것을 확인할 수 있다.
1000자를 넘는다면 마찬가지로 알림창을 띄워준다.
글을 작성한 사람에게만 수정 및 삭제 버튼을 보일 수 있도록 구현했다.
작성한 글마다 댓글을 달 수 있도록 기능을 구현했다.
마찬가지로 댓글을 작성한 회원에게만 수정 및 삭제 버튼이 보이고, 200자 내로 작성할 수 있다.
📌 마이페이지
자신의 회원 정보를 수정할 수 있고, 회원 탈퇴를 할 수 있다.
ID는 수정할 수 없도록 막아놓았기 때문에 기존의 ID가 그대로 보이는 것을 확인할 수 있다.
마이페이지에서 자신이 작성한 글과 댓글, 리뷰 목록을 볼 수 있다.
💨 느낀점 및 개선사항
아쉬웠던 점
- 관리자 페이지
원래 구현하려고 했으나 시간 부족의 이유로 구현하지 못했다. - 배포
거의 마지막까지 기능을 구현했기 때문에 이 또한 시간 부족으로 하지 못했다. - 게시판에서 게시글을 수정할 때 이미지에서 발생하는 문제
게시글을 수정할 때 이미지를 삭제하지 않고 글만 수정해서 올리면 사진은 그대로 올라가며
내용만 수정이 되어야 하는데 사진 삭제 버튼을 구현하니까 수정할 때 이미지를 삭제하지 않았음에도 불구하고
계속해서 이미지가 삭제되는 문제가 발생했는데 해결하지 못했다. - 수익성 창출
보호자와 업체를 연결하는 중간 매개체로서 동물병원, 장묘업체 광고 문의 진행
좋았던 점
- 팀원들의 도움
절대 해결하지 못할 것 같던 오류들도 팀원과 함께 고민해서 해결할 수 있다. - 더 쉽게 이해 가능
직접 기능들을 구현해나가면서 수업 시간에 배웠던 내용들의 전체적인 흐름을 알 수 있었다. - 깃
깃을 사용해서 협업을 해보고 싶었는데 삭제도 많이 하고 오류도 많이 났지만..
많은 시행착오를 겪으면서 깃을 잘 사용해본 것 같다.
아쉬웠던 부분도 있지만 내가 배울 수 있는 부분이 더 크고 여러모로 성장할 수 있었던 프로젝트였다.😁
우리팀 모두 수고하셨습니다‼
'국비 지원 > 국비 일기' 카테고리의 다른 글
| 국비 2차 프로젝트 회고(2) (1) | 2023.10.26 |
|---|---|
| 국비 2차 프로젝트 회고 (1) (4) | 2023.10.26 |
| 국비 1차 프로젝트 회고 (1) (0) | 2023.09.25 |
| 국비 지원 한 달 넘은 후기 (0) | 2023.06.17 |
| 개발자 국비 지원 알아보기 (0) | 2023.03.23 |
