내일배움캠프 백오피스 프로젝트 - 펫시터 매칭 사이트 후기, 소감

내일배움캠프 백오피스 프로젝트 - 펫시터 매칭 사이트 후기, 소감

 

 

일주일간 팀원과 작업한 펫시터 매칭 사이트가 끝났습니다. 여러 우여곡절이 있었지만 목표한 대로 마쳤기에 만족하고 있습니다. 작업과정과 후기, 튜터님께 받은 피드백과 소감에 대해 소개하겠습니다.

 

 

펫시터 매칭 사이트 소개

 

간략히 설명하면 펫시터 매칭 사이트는 반려동물 키우는 사람들을 위한 사이트로, 반려동물을 대신 돌봐주는 펫시터를 매칭하는 서비스 입니다. 

 

 

개발환경

• 프로그래밍 언어 : javascript (Node.js)
• 프레임워크 : Express.js
• 데이터베이스 : AWS RDS, Firebase Storage
• 버전 관리 시스템 : Git 
• 개발 도구 : Visual Studio Code
• 협업 도구 : Slack, Notion
• 배포 환경 : AWS
• 테스트 도구 : Thunder client

 

 

와이어 프레임

 

 

 

ERD DIAGRAM

ERDCloud

 

 

최종 구현 화면

 

위의 기획을 기반으로 아래와 같은 결과물을 만들어낼 수 있었습니다.

 

최종 프로젝트 Github

GitHub - lemon-table/backoffice_project

 

 

시연 영상

 

 

로그인

페이지에 접속하면 가장 먼저 로그인 창이 보이도록 하였습니다.

 

 

 

회원가입

회원가입은 이메일과 패스워드, 닉네임, 성별, 이름, 나이를 입력 받게 하였고, 유효성 검사(이메일 형식, 비밀번호 확인, 모든 항목 필수 입력)을 추가하였습니다.

 

 

 

 

메인페이지 (펫시터 예약 조회)

회원가입 후 로그인을 하면 아래와 같은 현재 펫시터 예약된 글들이 보여집니다. 

 

 

 

예약 상세 조회

게시물을 클릭하면 '볼보(펫시터 예약자)님의 리뷰 작성 페이지'라는 소제목 아래 예약 정보가 보입니다. 예약 제목과 일자, 내용, 요청한 펫시터와 리뷰 적을 수 있는 란이 나옵니다. 리뷰는 예약자만 작성하도록 하였고, 리뷰가 있다면 오른쪽에 리뷰가 적혀 나옵니다.

 

 

 

프로필 편집

메인페이지의 오른쪽 상단에 '프로필 편집' 버튼이 있습니다. 이를 클릭하면 아래와 같은 화면이 나옵니다. 이 페이지에서는 프로필 정보 (닉네임, 사용자이름, 성별, 나이) 와 프로필 이미지도 수정할 수 있습니다.

 

 

 

 

 

 

 

*이미지 업로드 다운로드 하기 위해 참고한 기술

(Firebase storage, multer)

웹에서 Cloud Storage로 파일 업로드  |  Cloud Storage for Firebase

 

웹에서 Cloud Storage로 파일 다운로드  |  Cloud Storage for Firebase

 

[Node.js] express + multer로 이미지 업로드 구현하기

 

 

예약하기

메인페이지 게시물 오른쪽 위에 있는 예약하기 버튼을 누르면 다음과 같은 화면이 나옵니다. 예약제목, 일자, 내용 및 펫시터를 선택할 수 있습니다.  

 

 

여기서 메인페이지에 예약된 펫시터의 일자는 달력에서 비활성화되어 나옵니다. 예를 들어 위 화면에 선택된 황정민 펫시터 선택 후 달력을 보면 28일이 제외되어 있는데 이 날짜는 메인페이지에 이미 예약되어 있기 때문에 비활성화 되어 있는 것입니다.

 

펫시터는 하루 한 건만 작업한다는 조건이 있기에 이를 맞추기 위해 일자별 중복을 없애는 작업을 했습니다.

 

 

 

* 지정한 일자 제외하도록 참고한 기술 (datepicker)

부트스트랩 달력 특정일자 비활성화 하는 방법 bootstrap datepicker

 

 

토큰 만료시

로그인 시 토큰이 생성되며 10분이 지나면 토큰이 만료되어 재로그인 하도록 구현하였습니다.

 

 

 

펫시터 정보

메인페이지 게시물 왼쪽을 보면 펫시터 정보가 있습니다. 이를 클릭하면 아래와 같은 팝업창이 나옵니다. 이름, 인기(서비스 횟수), 리뷰 순 버튼을 클릭하면 해당 항목에 맞게 정렬되도록 구현했습니다. 

 

 

위 팝업창에서 리뷰순은 게시물에 등록된 리뷰들의 평균 값을 나타낸것으로 만약 황정민 펫시터가 리뷰 평점을 4점, 2점을 받았다면 평균값이 3점이 이곳 팝업창에 나타납니다.

 

이 기능을 구현하기 위해 prisma에 SQL문을 직접 입력하는 방법으로 복잡한 쿼리문을 구현하기 쉽게 하였습니다.

 

* 복잡한 쿼리문 prisma에 구현한 코드

  readAllSitters = async () => {
    const readAllSitters = await this.prisma.$queryRaw`SELECT a.*, COALESCE(b.popScore, 0) as popScore
      FROM petsitters a
      LEFT JOIN (
        SELECT b.sitterId, AVG(a.star) popScore
        FROM reviews a
        JOIN bookings b ON a.bookingId = b.bookingId
        GROUP BY b.sitterId
      ) b ON a.sitterId = b.sitterId`;

    return readAllSitters;
  };

 

prisma.$queryRaw를 사용하면 sql문을 바로 적어 반영할 수 있다는 것을 이번 프로젝트를 통해 알게 되었습니다.

 

 

프로젝트 피드백

 

필자는 이번 프로젝트에서 로그인, 회원가입, 프로필 편집과 전체적인 프론트엔드를 중점으로 담당하였습니다. 개인적으로 완성도 있다 판단하여 만족한 프로젝트 였지만 튜터님 피드백 반응은 반반이었습니다.

 

"잘했다와 아쉬웠다"

 

 

소감

 

필자가 담당했던 프론트엔드에 대해서는 그럭저럭 긍정적인 평가를 받았지만 펫시터를 입력하는 운영자 입장의 서비스는 구현하지 못한 점에서 아쉽다는 평을 받았습니다. 기획과 작업 진행 방향은 분명 팀원과 협의하여 진행했지만 이번 프로젝트 팀장을 맡아서 그런지 아쉽다는 평이 크게 다가왔습니다. 노력한게 허사가 된 것 같기도 한 기분이지만 다음 프로젝트에서는 이 점은 보완하여 더 나은 결과물을 만들어야겠다는 자극을 얻을 수도 있었습니다.

 

걸림돌이 아닌 디딤돌이 되길 바라는 이번 프로젝트 였습니다.

 

▼ 함께 보면 좋은 글 ▼

 

내일배움캠프 팀 프로젝트 - 영화 검색 사이트 (상세 페이지 추가)

내일배움캠프 팀 프로젝트 - 영화 검색 사이트 (상세 페이지 추가)