Pet care project.
- 펫들을 관리할 수 있는 사이트.
- 시터와 유저 둘다 처리되어 1:1거래(?)는 아닌 예약과 현황 확인 등을 할 수 있는 간단한 프로젝트를 만들어보았다.
프론트엔드는 각각 맡았던 CRUD 관련으로 프론트 엔드를 구현하기로 하였다.
개발진행 과정
-
초기 와이어 프레임.
(지금은 엄청나게 많이 바뀌었다.)
-
간단한 틀은 main page에서 button 클릭 시 현재 등록되어있는 시터들을 나열하여 쉽고 간편하게 예약할 수 있게끔 기능을 구현하게 되었었다.
-
마이페이지에서 회원정보 및 펫 관련 수정과 조회가 가능하며, 예약 현황을 표로 확인할 수 있게끔 간단한 와이어 프레임을 짜보도록 하였다.
-
-
Users 테이블을 기반으로 Reservation과 Pets는 1:N 관계로 데이터베이스를 구현하여, 하나의 유저가 여러 pet을 둘 수 있으며 여러 예약을 잡을 수 있게끔 데이터를 구현하였다.
( 시터도 당연히 외래키 처리되어, 어떠한 예약을 잡았을 때 SitterId와 userId가 같이 묶여서 데이터로 처리 될 수 있게끔 ERD를 짜게 되었다.) (사실 한번 엎었다.)
main page
메인 페이지에 와이어 프레임과 동일하게끔 화면이 나오고, '파트너 찾기' 를 눌렀을 때 Sitter를 조회하는 것보다 기민하게 반응 할 수 있도록 Frontend 메인 페이지를 들어가게되면.
언제든지 바로 정보를 조회할 수 있도록 메인페이지 접속과 동시에 Sitter Id를 불러오게 되었다. 이 후 '파트너 찾기' 버튼 클릭시
sitter list
현재 Sitter로 등록되어있는 유저들의 정보를 모두 불러서 '현재 예약이 가능한 Sitter' 들의 리스트를 불러오게 했었고. '바로가기' 버튼을 누르면 빠르게 현재 해당 시터의 예약 현황들을 자세히 확인해 볼 수 있다.
Reservation list
예약 버튼을 눌렀을 때 등록된 펫이 없으면, 펫을 등록할 수 있게 알럿창이 뜨게되며, 빠르게 이동가능하다.
pet list
펫 리스트에서는 수정 / 삭제 / 등록을 모두 할 수 있게끔 처리되어 빠르게 현황과 펫 관련 CRUD를 모두 확인 해 볼 수 있다.
reservation list
예약을 하게된다면 현재 화면과 같이 표로 예약내역이 존재하는지, 언제 예약이 되었는지 확인이 가능하다.
user update
회원정보는 사실상 크게 건드릴게 없어서 패스워드만 변경할 수 있는 모달창만 띄웠다. 변경할 패스워드와 컨펌 패스워드가 일치하지 않으면
안맞다는 알럿까지 구현하였다.
사실상 DB관련하여 백엔드를 구현하는 것 까지는 수월(?)하고 쉽게 개발을 끝마쳤으나, 추후 프론트엔드 API를 연결하는 부분에서 무지막지한 에러들이 발생했었다.
깃허브 주소 : https://github.com/Beardevelope/petsitter
