feat: 지도 기능 구현

[jiohjung98]

close #5

해당 사항 (중복 선택)

• FEAT : 새로운 기능 추가 및 개선
• TEST : 테스트 추가 및 리팩토링
• FIX : 버그 수정
• REFACTOR : 결과의 변경 없이 코드의 구조를 재조정
• STYLE : 코드 스타일에 관련된 변경 사항
• DOCS : 코드가 아닌 문서를 수정한 경우
• REMOVE : 파일을 삭제하는 작업만 수행
• RENAME : 파일 또는 폴더명을 수정하거나 위치(경로)를 변경
• CHORE : 패키지 매니저 설정, 코드 수정 없이 설정 변경(eslint) 등 기타 사항

설명

Key Changes

• 지도 기능을 구현했습니다.

How it Works

1.mov

• 네이버 지도 라이브러리 추가
• 현재 위치 이동 기능
• 현재 위치 로딩 스피너
• 오피스 get api 연동
• 오피스 검색 기능 및 클릭 시, 모달 렌더링 및 지도 중심 변경
• 오피스 모달 생성
• 오피스 상세 정보 페이지
• 지점 위치 계산(현재 위치 계산 전에는 처음 지도 중심인 강남역 기준으로 표시, 현재 위치 받아온 후에는 현재 위치로부터 지점 거리 계산)

To Reviewers

• 아직 오피스 정보가 지점명, 지점위치밖에 없어서 그 부분만 작업 완료했습니다.

• 오피스 마커를 클릭하면 오피스 모달을 렌더링하고 있습니다. 근데 현재 위치 버튼 위치를 가려서, 삼항연산자로 모달이 오픈되었을 때는 버튼의 위치를 모달 보다 높게 설정해서 현재 위치 버튼이 가려지는 문제는 해결하였으나, 모달 컴포넌트에서 모달 외부를 클릭하면 모달을 닫히게 기능을 구현해둬서, 모달이 열려 있을 때 현재 위치 버튼을 누르면 현재 위치 로직이 동작하지 않고 모달이 닫히는 문제가 발생합니다. 모달 컴포넌트에서 모달 외부 어디든지 클릭하면 닫히게 구현해뒀는데 이부분을 해결할 수 있을지? 의문이라 남겨봅니다.

• 기존 정의해둔 get 메소드를 사용하면, 다음과 같이 'TypeError: getStaticPaths is not a function' 오류가 발생해 페이지 로드 자체가 안되는 문제가 발생했습니다. get 메소드 대신, fetch 로 api 호출하니까 해당 오류는 사라졌는데 다른 분들과 api 호출 양식이 달라서 일단 남겨두겠습니다. 기능 구현부터 먼저하고, 추후에 해당 문제 해결해보겠습니다. 혹시 해결 방법 아시면 공유해주시면 감사하겠습니다.

• 오피스 상세정보 페이지에 접속했다가 뒤로가기버튼을 누르면 현재 클릭한 오피스 위치가 떠야하는데, 다시 초기 위치(강남역)으로 이동하는 문제가 있어, 추후에 수정할 예정입니다.