✂️ 분배된 이슈

• 연관 검색어 클릭 시 이벤트 발생(#74)
• 인구 밀도 정보 시간 표시(#83)

🚩 구현 목표

• 연관 검색어 및 북마크 클릭 시 해당 위치로 이동
• 로그아웃 css 적용
• 현재 기준 시간 표시

🍀 세부 목표

• 그래프 기준 시간 표시
• 현재 정보 기준 시간 표시
• 북마크 목록 및 검색 목록 에서 지역 클릭 시 해당 지역으로 이동
• 로그아웃 css 적용

🖥️ 구현 내용

MyInfoSideBar 주의 사항 해결

• 아래와 같은 주의 메시지가 콘솔에 찍힘

  

• 이유는 아래와 같이 컴포넌트 안에 styled-component가 선언되었기 때문이므로, LogoutLink를 MyInfoSideBar 밖으로 빼서 에러 해결

  ...
  useEffect(() => {
      if (!userInfo || !areas) {
        return;
      }
  
      makeBookmarks();
    }, [userInfo, areas]);
  
    const LogoutLink = styled.a`
      position: absolute;
      bottom: 5%;
      left: 50%;
      transform: translate(-50%, 0);
  
      font-size: 1rem;
    `;
  ...
  

해당 장소명 클릭 시 마커 이벤트 사용

• atom의 markerArray에 모든 마커의 정보가 들어있음

• marker의 trigger 메소드를 사용하면 등록한 이벤트 리스너를 실행시킬 수 있음

• 좌표 값으로 해당하는 마커를 찾아 trigger(’click’)을 실행함

• MyInfoSideBar.tsx

  // MainPage에서 좌표 설정 setState 가져와서 클릭한 위치로 이동
    const onClickAreaName = (areaInfo: CoordinatesPopulationTypes) => {
      if (!setCoordinates) {
        return;
      }
      const { latitude, longitude } = areaInfo;
  
      const marker = markers.find(
        item =>
          item.getPosition().x === longitude && item.getPosition().y === latitude
      );
  
      if (!marker) {
        alert('혼잡도 필터를 확인해주세요!');
        return;
      }
  
      marker.trigger('click');
      setIsMyInfoSideBarOpen(false);
    };
  

• RelatedAreaList.tsx

  • e.target.id는 RelatedAreaItem에서 설정한 완성된 지역 이름임

  const RelatedSearchList: React.FC<RelatedSearchListProps> = ({
    searchAreaName,
    relatedAreaInfo
  }) => {
    const [isEmptyRelatedList, setIsEmptyRelatedList] = useState(true);
    const markers = useAtomValue(markerArray);
  
    const onClickRelatedAreaList: React.MouseEventHandler<
      HTMLUListElement
    > = e => {
      if (e.target instanceof Element) {
        const { latitude, longitude } = relatedAreaInfo[e.target.id];
  
        const marker = markers.find(
          item =>
            item.getPosition().x === longitude &&
            item.getPosition().y === latitude
        );
  
        if (!marker) {
          return;
        }
  
        marker.trigger('click');
      }
    };
  

📖학습 내용

Event.target의 Id 타입이 없는 경우

• 태그(Element)의 자식이라고 명시해주면 event.target.id를 쓸 수 있음
  • https://velog.io/@e_juhee/TypeScript-EventType

ApexChart에서 label 줄 바꿈

• 아래와 같이 배열로 넣어준 부분은 줄바꿈이 됨

xaxis: {
  categories: [
    'Apples',
    'Pineapples',
    'Pears',
    ['Quararibea', 'cordata'],
    ['Prickly', 'Pear'],
    'Tangerines'
  ]
}

🎸 기타

• RelatedAreaList에서 위치 이동 시 검색 창 닫아야함
• infodetail에서 그래프 레이블 글자색 바꾸는게 났지 않을지