• 우선 프로젝트에서 사용했던 library들과 기술들을 소개할까 한다. 그중 첫번째가 바로 Rnd이다.

Rnd

• 공식홈페이지 : https://github.com/bokuweb/react-rnd
  특징으로는 매우 부족한 예제 설명들과 턱없이 부족한 자료들이다.
  이에 나중에 이를 사용하고자하는 사람들에게 도움이 되고자 작성한다.
  
• 기능은 우선 위와 같다.

1. 당연히 drag 가능
2. resize 가능
3. drag enable 기능
4. boundary 설정 기능
5. z-index 설정 기능

예제 코드

• 우선 예제 코드를 살펴보며 각 기능들을 한큐에 살펴보자.

...

return (
        <Rnd 
            // 1.
          	 minWidth={100}
             minHeight={100}
             default={{x: props.positionX, y: props.positionY, 
      					width: props.width, height: +props.height + 23}}
             // 2.
             bounds={"parent"}
             // 3.
             disableDragging={dragable}
             onDragStart={dragStart}
             onDragStop={dragStop}
             onResize={resizeStart}
             onResizeStop={resizeStop}
             style={{zIndex: props.positionZ}}
        >
            <div className={classes.postIt} style={{원하는 스타일}}
                 onMouseEnter={mouseIn} onMouseLeave={mouseOut}>
                <span className={classes.tab} ref={tabRef}>
                    <span onClick={closeEvent}><FontAwesomeIcon icon={원하는 아이콘}/></span>
                    <span onClick={pinEvent}><FontAwesomeIcon icon={원하는 아이콘}/></span>
                </span>
                <div className={classes.content}>
                    // 4.
                    <Image src={props.content} alt={props.title} width={isFirstLoad ? props.width : +picWidth}
                           height={isFirstLoad ? props.height : +picHeight - 23}/>
                </div>
            </div>
        </Rnd>
    );

1. 우선 가장 위부터 default 값과 최대, 최소값을 설정해주는 prop들이다.
2. 또한 앞서 말했듯 bounds로 컴포넌트들이 어디까지 움직일 수 있게 해주는지 설정해주는 속성값이다. ("window", "parent")로 설정하능 이때 string type으로 설정해주어야한다.
3. disalbeDragging은 드래그 가능 여부를 설정해준다. 여기서는 pinEvent 메서트로 state를 관리하여 작동 여부를 설정하였다.
4. 마지막으로 Image 태그는 next.js에서 제공하는 태그를 작성하여 delay를 최소화 할 수 있도록 하였고 여기에도 state를 설정하여 resize를 하였을 때 Rnd 컴포넌트 뿐만 아니라 안의 내용물도 같이 움직일 수 있도록 설정하였다.

• 다음은 Rnd의 prop들의 메서드들과 어떻게 활용하면 좋을지 예제들도 함께 소개하겠다.

dragStart

const dragStart = (e, d, id = props.id) => {
  const setIndex = setZIndex(d.node.style.zIndex, +d.node.style.zIndex + 1);
  d.node.style.zIndex = setIndex
  const Z = {id: id, z: setIndex, colName: "postIts"};
  updateZIndex(Z);
}

• 각각 event, data들이 매개변수로 자동으로 들어간다.
• 필자같은 경우는 수 많은 데이터들 중 id값을 식별하여 따로 데이터를 관리해야하기에 id값을 추가로 부여하였다.
• dragStart 메서드 같은 경우, d(data) 매개변수의 node.style prop으로 스타일에 접근이 가능하다.
• setZindex 메서드는 그냥 드래그 시 zindex를 +1을 해주어 드래그나 클릭으로 z-index를 조절할 수 있도록 만들었다.

dragStop

const dragStop = (e, d, id = props.id) => {
  const XY = {id: id, x: d.x, y: d.y, colName: "postIts"}
  updateXYPosition(XY);
}

• 드래그를 멈췄을 때 최종 위치를 저장하는 코드이다.
• 좌표에 대한 정보는 모두 d(data) 속성에 담겨있다.

resizeStart

const resizeStart = (e, d, ref, delta, position) => {
  setFirstLoad(false);
  setPicWidth(+ref.style.width.replace("px", ""));
  setPicHeight(+ref.style.height.replace("px", ""));
  setDiagramWidth(ref.style.width);
  setDiagramHeight(ref.style.height);
}

• 사이즈를 변경했을 때 div와 img 데이터를 모두 한꺼번에 바꿔줘야 사용자가 해당 데이터만큼 범위를 인식할 수 있다.
• 그래서 Pic(img), Diagram(div)에 해당하는 높이, 너비값을 따로 state를 주어 관리해주면 된다.

resizeStop

const resizeStop = (e, d, ref, delta, position, id = props.id) => {
  const width = props.width + delta.width
  const height = props.height + delta.height
  const XYHW = {id: id, x: position.x, y: position.y, h: height, w: width, colName: "postIts"}
  updateWHPosition(XYHW);
}

• 이 메서드는 특이하게 d(data)에 최종 width, height 값이 담기는 것이 아닌 delta값에 증감값이 담기기에 기존에 DB나 미리 설정된 default값에서 연산을 해줘야한다.