Nextjs에서 DragDrop Resize 사용하기

https://velog.io/@bepyan/series/DND-%EB%BD%80%EA%B0%9C%EA%B8%B0
위 게시물을 참조했습니다.

마우스 드래그 이벤트 함수인 registDragEvent.ts와 바운더리 범위를 계산해주는 inRange함수는 그대로 사용했습니다.

넥타이 디자인 프로젝트 이전 버전

1. 리엑트 Konva를 사용했었습니다.
2. Next.js가 아닌 React를 사용했었습니다.

변경 이유

1-1. Konva 라이브러리의 내부 코드 구조 이해가 어려워 화면 추가 기능(스크린샷) 이어지는데 어려움
1-2. Konva가 Next.js에 최적화 안됨
2. 기업홍보 사이트인데 SEO가 안되는 것은 매우 큰 약점

참조 코드 개선한 점

1. 코드의 가독성을 위해 Resize를 위한 컴포넌트를 분리
2. 기존 임의로 박스의 x,y 좌표와 w,h 길이를 useEffect를 통해 최초랜더링시 임의로 지정해주던 코드를 저의 프로젝트에서는 이미지가 등록될 경우에 좌표와 길이를 정해주면 되기 때문에 file input에서 이미지가 업로드 함수 내부에 setConfig useState를 사용했습니다.

변경된 코드

2. setConfig의 변경 부분이 반영된 코드입니다.

const OptionBody: React.FC<OptionBodyProps> = ({ styleMode, setPointLogo, setConfig, boundaryRef }) => {
  function handleChange(e: any) {
    setPointLogo(URL.createObjectURL(e.target.files[0]));
    const boundary = boundaryRef.current?.getBoundingClientRect();
	
    //❗️❗️❗️
    if (boundary) {
      const DEFAULT_W = 80;
      const DEFAULT_H = 80;
      setConfig({
        x: Math.floor(boundary.width / 2 - DEFAULT_W / 2),
        y: Math.floor(boundary.height / 2 - DEFAULT_H / 2),
        w: DEFAULT_W,
        h: DEFAULT_H,
      });
    }
  }

  const inputRef = useRef<HTMLInputElement | null>(null);

  const resetFileInput = () => {
    if (inputRef.current) {
      inputRef.current.value = "";
    }
  };

  switch (styleMode) {
    case "pointLogo":
      return (
        <div className="relative">
          <input
            type="file"
            ref={inputRef}
            className="w-full p-4 bg-white border-2 rounded-md outline-none border-neutral-300 focus:border-black"
            onChange={handleChange}
          />
          <div
            onClick={() => {
              setPointLogo("");
              resetFileInput();
            }}
          >
            <IoMdClose size={24} className="absolute top-4 right-4 z-10 cursor-pointer" />
          </div>
        </div>
      );
    case "textLogo":
      return <div></div>;
    default:
      return <div></div>;
  }
};

export default OptionBody;