안녕하세요 프로젝트에 도움이 되고 싶어서 css 수정 조금 해봤습니다.

[gusdas]

Marker.js 에서 닫기 버튼을 추가하고 싶었는데 기능 수정이 어렵더라구요
조금 가르쳐주 실 수 있을까요?

import { useEffect } from "react";
import ReactDOMServer from "react-dom/server";
import styled from "styled-components";
import * as NAVER from "../../util/naverMapHelper";
import { useHomesState, useHomesDispatch } from "./../../provider/HomeContext";

export function InfoWindowContent({ data, homeInfo }) {
  const sells = homeInfo.sells;

  return (
    <InfoWindowDiv>
      <Header>
        <h3>
          [{homeInfo.gov}] {homeInfo.name}
        </h3>
        <CloseButton>X</CloseButton>
      </Header>
      <p>임대조건(2,3순위 청년 기준, 보증금 최대전환 시)</p>
      <InfoWindowScroll>
        <div>
          <span className="notranslate">
            {sells.map((sell, idx) => {
              return (
                <ul key={idx}>
                  <li>주택정보: {sell.classes}</li>
                  <li>보증금: {sell.totalPrice}</li>
                  <li>임대료: {sell.monthPay}</li>
                </ul>
              );
            })}
          </span>
        </div>
      </InfoWindowScroll>
    </InfoWindowDiv>
  );
}

export default function Marker() {
  const state = useHomesState();
  const dispatch = useHomesDispatch();
  const addCommas = (n) => {
    return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  };

  const { loading, data, error } = state.homes;
  // console.log(`Marker`);
  // console.log(data);

  NAVER.createMarker(data, state.map.data, (props) => {
    const htmlString = ReactDOMServer.renderToStaticMarkup(
      <InfoWindowContent
        data={state.map.data}
        homeInfo={props}
      ></InfoWindowContent>
    );
    return htmlString;
  });
}
const Header = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
`;
const CloseButton = styled.button`
  background: none;
  outline: none;
  border: none;
  opacity: 1;
  color: #16933a;
  font-weight: bold;
  font-size: 20px;

  &:hover {
    opacity: 0.7;
  }
  &:before,
  &:after {
    background-color: #333;
  }

  &:before {
    transform: rotate(45deg);
  }
  &:after {
    transform: rotate(-45deg);
  }
`;
const InfoWindowDiv = styled.div`
  width: 350px;
  text-align: left;
  padding: 10px;
`;

const InfoWindowScroll = styled.div`
  display: flex;
  overflow: auto;
  height: 30vh;
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.4);
  }
  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
  }
`;

[cyberjam]

감사합니다!
issue에도 보셨겠지만 그 부분은 정말 사용자가 편리할 수 있지만 기능을 어떻게 해야할지 딱 떠오르지 않아 미뤄둔 task입니다.
다만 제가 이번에 다른 프로젝트 Modal 창을 만들면서 한가지 힌트를 얻은게 있긴 해서 코드를 어떻게 짜면 좋을까 머리 속으로 그려보고 있는 중입니다.

생각나는 대로 적어 놓겠습니다.
.
.
.
.

네 지금 바로요.

키워드는 useState와 callback, props, && 연산자 입니다.

marker 생성하는 부분에서 infoWindow 상태값(infoWindowOpen===openBool)을 useState로 boolean을 넣어 만들어 줍니다. 그러면 infoWindow 상태값이 바뀔때마다 렌더링 될거라 생각합니다.
infoWindow 상태값(infoWindowOpen)은 마커를 누를 시 true가 되도록 합니다.
infoWindow 생성하는 component의 props에 infoWindow 상태값과 infoWindow 상태값을 false로 만들어주는 콜백함수를 넣어줍니다.
infoWindow 생성하는 component에서는 && 연산자 앞에 infoWindowOpen이 true니 뒷부분 이 표시될거고
X 버튼에는 infoWindow 상태값을 false로 만들어주는 콜백함수(closeInfoWindow === closeCallBack)를 이벤트 리스너로 입력하면 됩니다.

다른 방법으로는 redux를 사용하면 편리하겠다 싶은데 제가 아직 redux 미숙자라 설명드리기 어렵네요.

const [infoWindowOpen, setInfoWindowOpen] = useState(false)
const openInfoWindow = () => {
    setInfoWindow Open(true);
  };
  const closeInfoWindow = () => {
    setInfoWindow Open(false);
  };
  
  
  
  

  <~~~Marker onClick={openInfoWindow }> </~~~Marker>
  <InfoWindowContent
      openBool={infoWindowOpen}
      closeCallBack={closeInfoWindow }
  > ~~</<InfoWindowContent>
  
  
export function InfoWindowContent({ openBool, closeCallBack}) {
  return (
   {openBool && (
            infoWindow 나타낼 내용
            <CloseButton>
                <button type="button" className="close" onClick={closeCallBack}>
                     X
                </button>
            </CloseButton>
      )}
  

이런식으로 지금 제 머리 속에 그려지는 만큼만 게워내듯 적어보긴 했는데 해봐야 알긴 하겠습니다.

[cyberjam]

infoWindow 상태값이 바뀔때마다 렌더링되면 전체가 렌더링 되는 걸까 싶네요.
그러면 데이터가 많을 수록 효율성이 좋지 않을 것 같기도 하구요.
이렇게 간지러운 부분이 있긴한데 딱 해답을 찾지 못했기도 하고 마침 다른 프로젝트 시작도 해야해서 부랴부랴 미뤄두고 지금까지 있었네요.
도와주세요! ㅋㅋㅋㅋ

[cyberjam]

https://phrygia.github.io/react/2021-09-21-react-modal/
모달창 만들때 참고한 곳입니다.

[gusdas]

제가 네이버 api는 처음 사용해봐서 그런지 eventListner를 달아줘야지 event가 발생하는 것 같더라구요?

component에 props로 onClick 이벤트를 전달했더니 발생하지않는걸 보니 map에서 event들을 다 먹어버리나 봅니다.

상태관리를 현재 context 사용 하시는 것 같은데 Redux는 제가 좀 사용해보아서 cyberjam님께서 네이버 지도 코드 설명해주시고 제가 redux 사용법 설명을 드려도 될까요?

discord 나 오픈카톡으로 소통했으면 좋겠습니다.

홍현승#1818 디스코드아이디입니다. 연락주세요!!!

[cyberjam]

아하 그렇군요. 제가 필요한 공부만 편식해서 redux는 상태관리에 용이한거라고 개념으로만 알고 있습니다. 말씀해주신대로라면 redux로 한들 이벤트가 먹히는건 마찬가지가 아닐까 싶습니다. (아니라면 제 지식이 그정도라 이해를 바랍니다 😅)

코드 설명은 제가 드릴 수도 있지만 동료 @ParkAward 에게 설명을 듣는게 더 좋겠습니다.
코드 설명 가능여부는 동료와 상의하여 수일 내 연락드리도록 하겠습니다.

기다리는 도중에 궁금한 부분을 질문해주셔도 좋겠습니다. 감사합니다.