Button으로 Resizable 구현하기

프로젝트 도중 Resizable 구현

이전에 Draggable 을 구현한것 처럼 아래와 같은 코드로 구현을 해보았다.

import { RefObject } from 'react';
import styles from './resizeButton.module.css';

interface ResizeButtonProps {
  resizableRef: RefObject<HTMLDivElement>;
}

const ResizeButton = ({ resizableRef }: ResizeButtonProps) => {
  const resize = (pageX: number, pageY: number) => {
    if (resizableRef.current) {
      const rect = resizableRef.current.getBoundingClientRect();
      const newWidth = pageX - rect.left;
      const newHeight = pageY - rect.top;
      resizableRef.current.style.width = `${newWidth}px`;
      resizableRef.current.style.height = `${newHeight}px`;
    }
  };

  const onMouseMove = (e: MouseEvent) => {
    resize(e.pageX, e.pageY);
  };

  const onMouseUp = () => {
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  };

  const onMouseDown = () => {
    console.log('클릭');
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
  };

  return 
	(
    	<div className={styles.resize_button} onMouseDown={onMouseDown}></div>
    );
};

export default ResizeButton;

onMoseDown : 마우스 클릭시 이벤트 실행

onMoseUp : 마우스 클릭을 땔 시에 실행

onMoseMove : 마우스를 움직일때 resize를 실행

resize : 참조한 ref의 크기를 마우스의 변경정도 만큼 변경시킴