지도 기능 사용법을 연습하고 있어요.

json 파일을 생성했고, 지도 기능을 이용하여 각 데이터를 표시하고 싶습니다.

데이터가 아주 잘 전송됩니다. 하지만 문제는 이미지가 표시되는 방식입니다.

이미지는 모두 하나의 파일로 되어 있으며, 이미지를 표시하는 방법은 background-position를 사용하여 이미지의 일부를 표시하는 것입니다.

이를 위해 'target'의 'Background-position' 값을 json 파일에 넣었습니다.

질문

그런데 이 수치를 어떻게 전달해야 할지 모르겠습니다. 코드 작성을 시도했지만 작동하지 않습니다.

스타일 컴포넌트에 값을 전달하는 방식이 잘못된 것 같습니다. 다양한 이미지를 표시하려면 어떻게 해야 하나요?

문제의 장소는 ID가 list__img인 장소입니다.

codespan을 보시면 코드를 이해하기가 더 쉬울 것입니다.

코드

데이터베이스

코드 범위

https://codesandbox.io/s/characterselectmap-t2mqef?file=/src/App.js:0-1990