Style/#267: 건물번호 필터링 버튼 위치 변경 && 토스트 메세지 구현

[hwinkr]

🤠 개요

• closes : Style: 건물번호 필터링 버튼 위치 변경 #267
• 건물번호 필터링 버튼 위치를 아래에서 위로 올렸어요
• 토스트 메세지를 구현했어요

💫 설명

토스트 추가하기

const { addToast } = useToasts();
//...
addToast(TOAST_MESSAGES.SHARE_LOCATION, 'warning');

• addToast 함수에 전달할 메세지와, 아이콘을 전달해주면 뷰포트 기준 오른쪽 아래에 2초동안 토스트 메세지가 렌더링 돼요
• 사용자가 직접 토스트 버튼을 닫을 수 있는 버튼을 같이 만들까 했지만 프로그레시브 바를 통해서 곧 사라진다는 것을 알려주니 버튼이 없어도 될 것 같다고 판단해서 만들지 않았는데, 한번 얘기해보면 좋겠네요
• 디자인이 완성되지는 않아서, 일단 임의로 디자인 해서 올렸는데 완성되면 바로 수정할게요
• 토스트 메세지 구현 과정은 부림이 블로그에 올려둘게요~

컴포넌트 분리

• BuildingFilterButtons 컴포넌트에서 건물번호 오버레이를 렌더링 할건지를 결정하는 버튼을 렌더링 하고, 사용자 위치를 새로고침 하는 아이콘도 렌더링 하고 있었는데,
  • 컴포넌트 이름은 필터링 버튼이지만, 위치를 새로고침 하는 책임도 지고 있음
  • 한 컴포넌트가 너무 많은 책임을 지고 있고, 코드가 길어져서 가독성도 떨어짐

위와 같은 2가지 이유로, FilterButtons & RefreshButtons 컴포넌트로 분리하기로 했어요

📷 스크린샷 (Optional)

KakaoTalk_Video_2023-10-13-11-12-50.mp4

[pp449]

지도 필터랑 아이콘이 훨씬 잘 보이고 좋아진거 같아요
토스트 메세지도 예쁘고 사용하기 쉽게 만들어뒀군요 👍
지도에 고생이 많네요,,, ㅋㅋㅋ