예시입니다.

미리보기 글을 여기에 적습니다.

코드블럭

OverlayMarker.tsx

interface OverlayMarkerProps {
  celeb: { id: number; name: string; profileImageUrl: string };
  map: google.maps.Map;
  restaurant: { id: number; name: string; lat: number; lng: number };
}
function OverlayMarker({ celeb, map, restaurant }: OverlayMarkerProps) {
  const { id, name, lat, lng } = restaurant;
  const [isClicked, setIsClicked] = useState(false);
  const ref = useRef();
  const hoveredId = useHoveredRestaurantState((state) => state.id);

  const clickMarker = () => setIsClicked(true);

  return (
    map && (
      <Overlay
        position={{ lat, lng }}
        map={map}
        zIndex={isClicked || hoveredId === restaurantId ? 10 : 0}
      >
        <StyledMarkerContainer ref={ref}>
          <StyledMarker
            onClick={clickMarker}
            isClicked={isClicked}
            isRestaurantHovered={hoveredId === restaurantId}
            data-cy={`${restaurant.name} 마커`}
          >
            <ProfileImage
              name={celeb.name}
              imageUrl={celeb.profileImageUrl}
              size="32px"
            />
          </StyledMarker>
        </StyledMarkerContainer>
      </Overlay>
    )
  );
}
export default OverlayMarker;

추가 박스 예시

tip

예시입니다.

example

예시입니다.

사진 사용 예시

비디오 사용 예시