Feat/#313: 건물 정보 UI 구현 #314
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- 스타일을 외부에서 주입할 수 있도록 JSX.Element를 반환하는 함수를 props로 전달하도록 구현(render props) - FAQ 페이지에서도 해당 컴포넌트를 사용하도록 변경할 예정
- 건물 정보를 보여주는 컴포넌트가 마운트 되면, box-shadow가 사라지는 문제를 해결하기 위해서 z-index를 변경
- 기존에는 오버레이 onClick 이벤트 발생 시 길찾기를 확인하는 모달을 렌더링 했어야 했는데, 책임이 변경되면서 모달 로직이 필요 없어져 해당 로직을 전부 삭제
- 건물 정보 컴포넌트가 렌더링 될 경우 setUserLocation 함수를 호출해서 지도 페이지 전체가 리렌더링되는 문제가 발생했고, 이를 해결하기 위해서 early return 패턴을 적용
- 해당 컴포넌트의 높이를 참조하기 위해서 useRef 훅을 사용 - useRef 훅을 전달할 수 있도록 React.forwardRef 사용
- 컴포넌트를 드래그해서 높이를 조절할 수 있도록 top, height 조절 - 컴포넌트 영역 밖을 클릭하는 경우 해당 컴포넌트를 언마운트 하도록 구현
- document에 클릭 또는 터치 이벤트를 추가해서 지도 위 오버레이(span)을 클릭할 경우 해당 건물 정보를 렌더링하는 컴포넌트를 반환하도록 구현
- 지하, 지상, 옥탑으로 구분짓고 해당 정보를 렌더링 하도록 구현
- 건물 이름, 사진, 길찾기, 건물 정보를 렌더링 - 현재 건물 정보 컴포넌트의 높이가 변할 때마다 BuildingInfo 컴포넌트가 리렌더링 되어, 자식 컴포넌트인 InfoContent 또한 리렌더링 되는데 이를 방지하기 위해서 memo 사용
- 건물 검색 결과, 건물 정보 확인, 길찾기 url, 층별 정보 문자열
- 위치 정보를 허용하는지, 사용자가 학교 내부에 있는지 확인하는 함수 구현
pp449
approved these changes
Jan 30, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🤠 개요
💫 설명
ToggleInfoFAQ, 건물 정보 컴포넌트에서 모두 정보를 보여줄 때 토글 기능이 있어요. 재활용할 수 있는 컴포넌트로 만들기 위해서
render props를 사용해서ToggleInfo컴포넌트를 구현했어요. 현재 해당 컴포넌트는 건물 정보 컴포넌트에서 활용하고 있고 다음 이슈에서 FAQ 페이지에서 사용하는 컴포넌트에도 적용할 예정이에요📷 스크린샷 (Optional)