2024-01-18 본 캠프 75일차 / 94일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기(3)

2024-01-18 본 캠프 75일차 / 94일차 TIL (react-zoom-pan-pinch 활용 영상공유 레이아웃 만들기(3)

주요 진행사항

- react-zoom-pan-pinch 활용 레이아웃 만들기

 

---

 

(이전) react-dnd 활용 영상공유 레이아웃 만들기 (2) 

2024-01-17 본 캠프 74일차 / 93일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기(2)

 

영상의 레이아웃의 처리는 완료가 되었으며, 추가적으로 유저 편의 기능인 줌과 드래그 이벤트를 주고자하였다.

해당 기능은 유저가 화면의 레이아웃을 설정하였을 때 보고 싶은 부분을 줌하여 더 자세히 볼 수 있도록 하는 기능이다.

 

이 기능을 구현하기 위해서 컴포넌트를 줌 할 수 있는 라이브러리가 필요하였으며, react-zoom-pan-pinch 라는 라이브러리를 찾게 되었다.

react-zoom-pan-pinch는 컴포넌트의 zoom과 zoom 이후 drag로 원하는 위치를 확인 할 수 있도록 도와준다.

 

설치

yarn add react-zoom-pan-pinch

 

사용

  return (
    <StShareScreenDragItemContainer>
      <StDragContainer ref={preview} $active={active} $isDragging={isDragging}>
        {active && (
          <button
            onClick={() => {
              handleInactive && handleInactive(id);
            }}
          >
            레이아웃 제거
          </button>
        )}
        <TransformWrapper
          wheel={{ activationKeys: ["Control", "Meta"] }}
          panning={{
            activationKeys: ["Control", "Meta"],
            disabled: active ? false : true,
          }}
        >
          <TransformComponent>{children}</TransformComponent>
        </TransformWrapper>
      </StDragContainer>
    </StShareScreenDragItemContainer>
  );
}

 

해당 기능을 사용하고자 하는 부분을 TransformWrapper로 묶어준 후 (Provider역할) 해당 컴포넌트를 TransfromComponent로 감싸준다.

 

TransformWrapper에는 다양한 속성을 넣을 수 있는데 wheel 속성은 휠을 이용한 줌이벤트설정, panning은 드래그를 이용한 줌 요소 화면 이동이다.

 

이때 activationKeys는 키 다운 이벤트와 함께 사용해야만 이벤트가 적용되게 하는 속성으로 Control은 windows의 ctrl, Meta는 맥의 Cmd 키이다.

 

 

트러블 슈팅 

드래그 이벤트 중복 발생

해당 drag item 내부에서 react-dnd, react-zoom-pan-pinch 모두 드래그 이벤트를 사용하므로, 이벤트가 겹치는 문제 발생하였다. 따라서 dnd drag 이벤트가 작동을 안하는 문제가 발생하였다.

 

이를 해결하기 위해서 drag item의 크기를 가지고 있고 background가 투명한 dummy 컴포넌트를 더 높은 z-index로 생성하여 해당 부분에 dnd drag ref를 적용시켰다.

 

dnd는 레이아웃에 위치한 후에는 필요가 없기 때문에 레이아웃에 위치했는지 여부를 알 수 있는 active 값에 따라서 조건부로 생성, 삭제 하였다.

 

다음은 위 내용을 적용한 코드이다.

return (
    <StShareScreenDragItemContainer>
      {!active && <StDrag ref={drag} />}
      <StDragContainer ref={preview} $active={active} $isDragging={isDragging}>
        {active && (
          <button
            onClick={() => {
              handleInactive && handleInactive(id);
            }}
          >
            레이아웃 제거
          </button>
        )}
        <TransformWrapper
          wheel={{ activationKeys: ["Control", "Meta"] }}
          panning={{
            activationKeys: ["Control", "Meta"],
            disabled: active ? false : true,
          }}
        >
          <TransformComponent>{children}</TransformComponent>
        </TransformWrapper>
      </StDragContainer>
    </StShareScreenDragItemContainer>
  );
}

 

 

위 내용을 적용한 결과물은 다음과 같다.