[TIL] 230719

헤더 버튼

헤더에 원하는 지역을 한눈에 볼 수 있도록 SelectBox를 제어할 수 있는 버튼을 추가하였다.
Main.jsx

<Header setArea={setArea} />

버튼에 상태를 관리하는 hook을 내려주어 사용할 수 있게 만들었다.
Header.jsx

const changeAreaButtonHandler = (selectedArea) => {
    setArea(selectedArea);
  };
.
.
<S.ButtonStyle onClick={(e) => changeAreaButtonHandler(e.target.innerText)}>전체</S.ButtonStyle>
<S.ButtonStyle onClick={(e) => changeAreaButtonHandler(e.target.innerText)}>조천</S.ButtonStyle>
<S.ButtonStyle onClick={(e) => changeAreaButtonHandler(e.target.innerText)}>애월</S.ButtonStyle>
<S.ButtonStyle onClick={(e) => changeAreaButtonHandler(e.target.innerText)}>안덕</S.ButtonStyle>

마커 클릭 이벤트

현재 모달 창이 redux로 관리되고 있기 때문에 적절한 값만 넣어주면 마커를 클릭할 때, 모달창이 열리게 할 수 있다.
MainMap.jsx
해당 컴포넌트에서 map의 마커 표시를 하고 있기 때문에 각각의 데이터에 클릭 이벤트를 달아주면 해당하는 데이터를 모달 창으로 출력할 수 있다.

const dispatch = useDispatch();

  const listOnclickHandler = (item) => {
    dispatch(setDetailModalData(item));
    dispatch(setDetailModalOn(true));
  };
filteredData.forEach(function (position) {
  .
  .
kakao.maps.event.addListener(marker, 'click', function () {
              listOnclickHandler(position);
              // 중심좌표, level 변경
              const newCenter = new kakao.maps.LatLng(result[0].y, result[0].x);
              map.setCenter(newCenter);
              map.setLevel(3);
            });
}

마커를 클릭하면 데이터에 알맞는 모달 창이 나타나고, 클릭한 마커가 지도의 중심으로 이동하고 화면도 확대된다!

Style-component

const S = {
  Container: styled.div`
    /* width: 100vw; */
    height: calc(100vh - 70px);
    display: flex;
  `,
  WelcomeMessage: styled.p`
    font-size: 2em;
    font-weight: bold;
    margin: 20px 0;
  `,
  AsideContainer: styled.div`
    display: flex;
  `,
  AsideContainer: styled.div`
    display: flex;
  `
};

다음과 같이 객체에 Style을 담을 수 있다.

reset

import reset from 'styled-reset';
reset을 라이브러리로 받을 수 있고
reset 코드와 함께 GlobalStyle을 설정할 수 있다.

const GlobalStyle = createGlobalStyle`
${reset}
* {
    color: #2b2b2b;
  }
  svg, path {
    color:inherit;
  }
`;

오늘은 팀원들의 코드를 이해하고 해당 기능에 기능을 추가하는 작업을 수행했다. 작업을 진행하면서 코드를 이해하는 시간과 어떤 의도로 작업을 해두었는지 코드에 대한 이해가 중요하다고 느낄 수 있었다.