OffiSpace - 거점 공유 오피스 예약 웹앱 서비스

OffiSpace 바로가기

• testID : [email protected]
• testPW : Office123!

Tech Stack

My Contribute

[ 오피스 설정 ]

• 예약페이지의 지점의 경우, 메인에서 지점을 변경하면 해당 값을 받아와야하고 예약페이지 내 및 지도페이지에서 지점 변경 시 해당 값을 받아와야 함
• -> zustand를 사용해 오피스 정보 전역으로 2개 관리(오피스 전역 1번, 2번)
• -> 각 전역 값 업데이트 하는 시간을 저장 후 예약페이지에서 더 최근에 업데이트된 전역 상태를 가져옴

• 메인에서 지점 설정(오피스 정보 1번 전역 상태) -> 오피스 정보 1번 전역 상태 업데이트 -> 메인 지점, 예약페이지의 지점 변경
• 예약페이지 지점 설정(오피스 정보 2번 전역 상태) -> 오피스 정보 2번 전역 상태 업데이트 -> 예약페이지의 지점만 변경
• 지도페이지의 오피스모달, 지점 상세정보에서의 예약 바로가기 -> 오피스 정보 2번 전역 상태 업데이트 -> 예약페이지의 지점만 변경

Offispace-.mov

[ 오피스 상세정보 ]

• 오피스 상세정보 api 연동
• 미팅룸, 리차징룸, 포커스존 각 탭에 따라 예약하기 페이지 탭 설정

Offispace-.mov

[ 지도 및 오피스 정보 ]

• 네이버지도 api 연동
• 오피스 정보 api 연동 - 위도, 경도에 따라 오피스 마커 설정
• 현재 사용중인 미팅룸 개수 api 연동
• 현재 버튼을 통해 사용자 위치 확인 -> 오피스 검색 시, 현위치로부터 오피스와의 거리 측정

Offispace-.mov

[ 미팅룸 ]

• 미팅룸 api 연동 -> 현재 시간 기준으로 예약 가능한 시간대 검색 후, 해당 오피스의 미팅룸 리스트 나열
• 필터 적용 값으로 해당 오피스 미팅룸 재검색 후 리스트 반환

Offispace-.mov

[ 미팅룸 추천 ]

• 주변 미팅룸 api 연동 -> 해당 오피스에 필터에 맞는 미팅룸 부재 시 주변 미팅룸으로부터 해당 필터값에 해당하는 미팅룸 검색 후 반환

Offispace-.mov

[ 미팅룸 예약 ]

• 미팅룸 예약 api 연동
• 사용자 초대 api 연동 -> 미팅룸 최대 인원 - 1 만큼 초대 가능

Offispace-.mov

[ 오피스별 랜덤 공지 및 사진 부여, 자동 스크롤 ]

• 오피스별 랜덤 공지 및 사진 부여
• 메인페이지의 오피스 긴급 공지 클릭 시, 해당 오피스 긴급 공지 토글 자동 오픈

Offispace-.mov

Trouble Shooting

오피스페이스에서는 지점 설정을 총 3곳에서 할 수 있습니다. 메인페이지, 예약페이지, 지도의 예약하기를 통해 예약 지점을 설정할 수 있습니다.

메인페이지에서 지점을 변경하면 예약페이지의 지점 또한 변경되어야하지만, 예약페이지 및 지도의 예약하기 버튼을 통한 지점 설정은 메인페이지의 설정된 지점과는 관계가 없으므로, 메인페이지의 설정된 지점에는 변화가 없어야합니다.

zustand 를 사용해 오피스 정보를 전역으로 1개 사용했는데, 예약페이지 및 지도의 예약하기 버튼을 통해 지점 설정을 한 경우에 기존에 메인페이지에 설정된 지점이 변경되는 문제가 발생했습니다.

오피스 정보를 전역으로 1개 관리하다 보니, 다른 곳에서 업데이트가 일어나면 그 값으로 변하는 문제였습니다.

해당 부분을 어떻게 해결할 수 있을 지 고민해보았고 오피스 정보를 전역으로 2개 관리하면서 각각 업데이트 되는 시간도 전역으로 저장하면 해결 할 수 있을 것 같아서 다음과 같이 적용해보았습니다.

오피스 전역 상태 1

오피스 전역 상태 2

예약 페이지에서의 오피스 전역 상태 불러오는 방법

예약 페이지에서는 지점 설정을 총 3가지 방법으로 할 수 있습니다. 메인페이지에서 지점 설정, 예약페이지 내에서 지점 설정, 지도의 오피스 모달에서의 예약하기 버튼을 통해 지점 설정이 이뤄지는데,

메인페이지에서 지점 설정 시 전역상태 1번의 업데이트 시간을 같이 저장하고 예약페이지 및 지도의 오피스 모달의 예약하기 버튼을 통한 지점 설정 시 전역상태 2번의 업데이트 시간을 같이 저장합니다.

그 후 예약페이지 접근 시 두 개의 전역 상태 중 더 최근에 업데이트가 된 값을 가져오고 예약페이지 및 지도의 오피스 모달에서의 예약하기 버튼을 통한 전역 상태를 메인페이지의 오피스 전역 상태와 분리함으로써 메인페이지의 오피스 전역 상태에 영향을 끼치는 문제를 해결할 수 있었습니다.

Team Convention

태그	설명
feat:	새로운 기능 추가 및 개선
style:	코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
design:	CSS 등 사용자 UI 디자인 변경
fix:	기존 기능 수정 (주로 안 좋았던 것에서 좋은 것으로)
bug:	버그 수정
refactor:	결과의 변경 없이 코드의 구조를 재조정한 경우
test:	테스트 코드 추가
docs:	코드가 아닌 문서를 수정한 경우
remove:	파일을 삭제하는 작업만 수행
rename:	파일 또는 폴더명을 수정하거나 위치(경로)를 변경
asset:	이미지 등 assets 파일 추가
chore:	그 외 기타 수정

Script

앱 실행

$ npm run build
$ npm run dev