Portfolio

프론트 진행현황 농구장 별 예약 현황 지도뷰 페이지 예약 페이지 새 농구장 추가 페이지 프로필 페이지 프로필 편집 페이지 즐겨찾는 농구장 페이지 예약 현황 페이지 중간 회고 백엔드 중간 회고 진행 현황 중간 회고

프론트, 백엔드 각 포지션 진행 현황

중간 회고록

전체 프로젝트 진행 현황

이미지 혹은 gif로 구현된 기능 중 일부 첨부

프론트

진행현황

🏀

한나 (농구장 별 예약 현황 지도뷰 페이지, 예약 페이지)

농구장 별 예약 현황 지도뷰 페이지

완료

지도 확대, 축소 기능 구현

사용자의 현재 위치 받아오는 기능 구현

경도와 위도 데이터를 통해 농구장을 지도뷰에 출력

농구장 예약 현황 별 애니메이션 출력

0명: 정지한 농구공
1-5명: 튀는 농구공 GIF
6명 이상: 불과 함께 튀는 농구공 GIF

현재 날짜로 부터 14일 이내의 날짜 선택 기능 구현

새벽, 아침, 낮, 밤 선택 기능 구현

농구공 클릭 시 농구장 상세정보 모달로 출력

모달

높이에 따른 컨텐츠 출력

미완료

API 연동

예약 페이지

완료

예약 현황을 출력하는 타임 테이블 구현

타임 테이블을 클릭하여 예약 시작 시간 선택

예약 생성

예약 생성시 설정한 시간에 대해 참여할 경우, 반영된 데이터로 타임 테이블을 렌더링
이미 예약한 시간대를 포함한 경우 예약을 생성할 수 없음

예약 수정

예약 수정 시 수정한 시간에 대해 수정할 경우, 반영된 데이터로 타임 테이블을 렌더링
이미 예약한 시간대를 포함한 경우 예약을 생성할 수 없음

미완료

API 연동

타임 테이블 헤더 UI

예약 생성 시 시작 시간과 끝 시간 자유 변경 기능

🏀

노체 (새 농구장 추가, 프로필 페이지)

완료

새 농구장 추가 form 구현
카카오 맵을 통해 새 농구장 위치 정보 받아오기
프로필 페이지 url Path에 따라 내 프로필 / 다른 유저 프로필 페이지 구분해 렌더링
프로필 페이지 마크업
팔로우 여부에 따라 버튼 종류 다르게 렌더링
프로필 편집 form 구현
유저 추가 정보를 받기 위한 Radio Input 컴포넌트 구현

진행 예정

새 농구장 추가 페이지, 프로필 페이지 API 연동
디자인 수정 사항에 맞춰 새 농구장 추가 페이지, 프로필 페이지 마크업 수정 및 스타일링
사용자 추가 정보 입력 페이지 구현
관리자용 새 농구장 제안 현황 볼 수 있는 페이지 구현

새 농구장 추가 페이지

새 농구장 추가 form 구현

카카오 지도로 특정 지역 위도, 경도값 받아오기

프로필 페이지

내 프로필 페이지

다른 유저 프로필 페이지

프로필 편집 페이지

🏀

앤 (즐겨찾는 농구장, 예약 현황)

즐겨찾는 농구장 페이지

완료

즐겨찾기가 없는 경우 map페이지로 이동하는 링크
카카오톡 공유하기, 채팅, 예약하기 링크

진행중

즐겨찾기 api 연동

예약 현황 페이지

다가올 예약

완료

확성기 (경기 한시간 전 보이기)
예약 확인 링크
함께하는 사람 보기/숨기기
팔로잉/팔로우 토글 버튼

진행중

확성기 (한번 누르면 사라짐, 경기시간 지나면 사라짐)
카카오맵 농구장 위치 띄우기
카카오톡 공유하기, 채팅 링크

지난 예약

완료

예약 확인 링크
함께하는 사람 보기/숨기기
팔로잉/팔로우 토글 버튼

진행중

카카오맵 농구장 위치 띄우기
카카오톡 공유하기, 채팅 링크

🏀

마누(종현) - Navigation/Auth/Socket Provider, Netlify 배포, 라우트 가드(고차 컴포넌트 패턴), 카카오 로그인, 로그인 리다이렉트 페이지

AuthProvider에서 전역에서 앱 실행시 사용자 정보 받아오는 동안 스플래쉬 페이지 보여주고 (Lottie 애니메이션 구현)

Lottie의 svg태그가 CPU를 많이 잡아 먹기 때문에 fadeout으로 Opacity가 0이 되는 순간 dom에서도 삭제되도록 성능 최적화

애니메이션 스플래쉬 로딩 (Lottie 활용)

카카오로그인

https://slams.app 으로 배포

STMOP(Streaming Text Orientated Messaging Protocol) (sockjs와 stompjs 활용) 백엔드와 핸드세이킹 성공 (앞으로의 일, 소켓 사용 파트: 팔로우, 알림, 채팅, 사람 급구 확성기)

중간 회고

🛫

프론트 회고록

백엔드

🏀

헤이 (할당된 Domain →court, reservation, favorite)

Court

사용자에 의해 코트 추가, 코트 목록 조회 가능 완료
위도, 경도 내의 boundary내의 예약된 농구장 검색 진행중

court, reservation 내의 join 후 진행

Court Dummy 데이터 넣어서 실행 완료

Reservation

사용자에 의해 코트 예약, 변경, 취소하기 완료
court, follow와 연결된 테이블과의 domain 기능 진행중

Favorite

농구장 즐겨찾기, 조회, 제거 진행중

user, court, favorite 테이블과 연관됨

공통 ERD 설계

중간 회고

백엔드와의 협업

팀원들끼리 서로 모르는 부분을 공유하면서 채워주니깐 빠르게 해결되서 매우 만족
지금까지 배웠던 부분을 공유하고 코드를 확인하면서 부족한 부분을 채울수 있었음.
특히 .. .git ignore을 반드시 생활화하고 먼저 만들자..ㅠㅠ 😂
팀원들한테 너무 고마움

프론트와의 협업

프론트와 협업하면서 무엇을 요구하고 프론트가 어떤 작업을 하는지 알 수 있었던 시간이였습니다.
각자의 아이디어를 제시 및 토론하면서 하나의 공통 product 프로젝트를 하고 있다는 느낌을 받을수 있었음
처음엔 경계하였지만 점차 One Team이 되는 느낌을 받았습니다.

🏀

젤리 (할당된 Domain → user, follow, management)

진행 현황

USER

완료 회원가입 / 로그인 → OAuth2 카카오 연동

참고한 시퀀스 다이어그램

완료 추가 정보 입력 api
완료 내 정보 조회 api
완료 프로필 이미지 수정 api
완료 프로필 이미지 삭제 api
진행중 다른 사람 정보 조회 api

중간 회고

기획 너무 어려워🥲🥲

새로운 서비스 하나를 기획하는 일이 개발보다 어려운 것 같다는 걸 느꼈다. 우리 서비스만의 규칙을 조율하는 작업만 거의 일주일이 걸렸고 사실 지금도 조금씩 수정하고 있다. 다들 아이디어가 넘치다보니까 중간지점을 찾아 정리하는 일이 어려웠다.

내가 짠 코드의 화면에 잘 나타나네?! 너무 신기해😲😆

프론트랑 작업하는게 처음이다. 이전에 내가 짠 코드가 잘 돌아가는 지 확인해볼 수 있는 방법은 1. 테스트 코드 짜기 2. postman으로 api 쏴보기 가 전부였는데 이번엔 프론트에 내가 보내준 값이 잘 나타나는지 확인해볼 수 있었다. 확실히 화면으로 보니까 더 신기했고 그래서 이번 프로젝트가 더 재미있게 느껴진다.

🏀

플로라 (할당된 Domain → alarm, chat)

할당된 업무 계획

할당된 업무 진행 상황 (기준일: 2021년 12월 8일 오후 7시)

entity 구현 (완료)
entity 테스트 코드 작성 (완료)
service 로직 구현 (진행중)
service 로직 테스트 코드 작성 (진행중)
controller 로직 구현 (진행중)

이미지 혹은 gif로 구현된 기능 중 일부 첨부

alram entity test code 결과

chatDetails entity test code 결과

chatTitle entity test code 결과

userCourtMapping entity test code 결과

진행중인 리렉토리 구조

중간 회고

2주차 프로젝트 진행 현황

프론트

진행현황

농구장 별 예약 현황 지도뷰 페이지

예약 페이지

새 농구장 추가 페이지

프로필 페이지

프로필 편집 페이지

즐겨찾는 농구장 페이지

예약 현황 페이지

중간 회고

백엔드

중간 회고

진행 현황

중간 회고