React를 사용하여 이미지에 대화형 마커 배치

Question

도와주세요. 홈 페이지에 표시되는 아래와 같은 이미지(더 큰 이미지)가 있습니다. "FORGE" 집에는 중앙에 검은색 화살표가 있는 흰색과 파란색 마커가 있습니다.

'임대' 주택도 마찬가지입니다.

각 마커는 대화형 버튼 역할을 합니다. 예상되는 상호 작용 동작은 다음과 같습니다.

• 마우스를 올리면 파란색 배경이 확장되어 "Forge" 또는 "Rentals"라는 텍스트가 표시됩니다
• 클릭하면 사용자가 해당 "Forge" 또는 "Rentals" 페이지로 이동합니다.

또한 반응형이기를 원하면 화면 크기가 조정될 때 버튼이 특정 위치에 유지되어야 합니다.

절대 위치 지정, x, y 좌표를 사용하여 작동시키려고 합니다. 하지만 저는 이런 유형의 사용자 인터페이스 경험을 좋아하기 때문에 제대로 작동하는 솔루션을 찾을 수 없습니다. 캔버스를 사용해야 할지 아니면 다른 것을 사용해야 할지 잘 모르겠습니다.

어떤 도움이라도 대단히 감사하겠습니다.

내 코드는 다음과 같지만 올바른 방향으로 가고 있지 않은 것 같습니다.

으아악

Answer 1

이미지 컨테이너의 절대 위치에 컨트롤을 배치해야 합니다. 구현은 이미지가 배치된 위치, 전체 화면인지, 이미지 전후에 콘텐츠가 있는지 등 다양한 요소에 따라 달라집니다. 하지만 이 코드는 주요 원칙을 보여줍니다.

창 크기 조절 시 이미지 크기도 조절된다면, 이미지와 동일한 컨테이너를 생성해야 합니다. 그런 다음 해당 컨테이너를 기준으로 컨트롤의 위치를 ​​설정하고 해당 지점에 고정할 수 있습니다.

으아악 으아악

코드를 사용하면 다음과 같이 보일 것입니다. (하지만 반응에서 모듈 스타일을 사용하는 방법을 알아보려면 스타일 파일에서 스타일을 이동하는 것이 좋습니다.):

으아악

위치를 수정하고 일반 컨트롤 뷰를 추가하면 됩니다.

제어를 위해서는 별도의 구성요소를 만들어야 합니다. 다음은 원하는 동작을 달성하는 방법에 대한 예입니다.

으아악 으아악