반응형에 대한 문제

태그를 했을 때 현재 이 부분에서 ClientRect를 이용해서 이미지의 x,y좌표를 따와서 

 const handleImageClick = (event: React.MouseEvent<HTMLImageElement>) => {

    if (addTagMode) {

      //  이미지를 정해서 해당 이미지에서만 Tag가 찍힘

      const image = event.currentTarget;

      const imageRect = image.getBoundingClientRect();

      const x = event.clientX - imageRect.left;

      const y = event.clientY - imageRect.top;

      // 이미 값을 가지고 있는 태그 중 마지막에 값을 가지지 않은 태그의 인덱스를 찾음

      const lastEmptyTagIndex = tags.findIndex((tag) => !tag.prodData);

      const updatedTags = [...tags];

      // 값이 없는 태그가 있고, 그 태그가 마지막에 추가한 태그라면 삭제 처리

      if (lastEmptyTagIndex !== -1) {

        updatedTags.splice(lastEmptyTagIndex, 1);

      }

      //태그 안에 담을 데이터를 가진 newTag변수

      const newTag = { x, y, prodData: '', img: '', price: '', prodBrand: '', id: '' };

      setTags([...updatedTags, newTag]);

      setContents(contents);

      setSelectedTagIndex(updatedTags.length);

      setselectedTagVisible(true);

      setSearchFormHandler(true);

    }

  };

 

 

아래의 부분에서 그 좌표값을 스타일을줘서 태그를 찍고 있는데 

 <S.TagContainer

                key={index}

                onClick={() => handleTagClick(index)}

                onMouseDown={(event) => handleTagDrag(index, event)}

                style={{

                  left: tag.x,

                  top: tag.y

                }}

              >

 

이 이미지의 크기와 

 

<S.ImageContainer>

      <div onMouseEnter={() => setIsMouseOverImage(true)} onMouseLeave={() => setIsMouseOverImage(false)}>

        <S.Image src={imageUrl} alt={imageUrl} />

        {tagsForImage?.map((tag, tagIndex) => (

          <S.TagContainer

            key={tagIndex}

            style={{

              left: tag.x * 2.1944 - 20,

              top: tag.y * 2.1944 - 20

            }}

            onClick={() => handleTagClick(tag)}

          >

현재는 정적으로 웹에서 정해둔 이미지 크기의 간극을 알 수 있기에 그 차이만큼 수식을 곱해줘서 위치를 맞췄는데
반응형으로 하려면 이것을 모든 크기에 호환되게 바꾸어야할 것 같다 프로젝트때 했던것을 곱씹어 보다가 생각이나서 이곳에 적어둔다 빠른시일내에 해결방안을 찾아봐야겠다