2024-01-16 본 캠프 73일차 / 92일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기)

2024-01-16 본 캠프 73일차 / 92일차 TIL (react-dnd 활용 영상공유 레이아웃 만들기)

 

주요 진행사항

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

 

 

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

 

유저가 직접 영상공유 레이아웃을 커스텀하기 위해 다음과 같은 기술이 필요했다.

 

드래그하여 일정한 위치에 가이드 라인이 나오고 해당 위치로 레이아웃이 생성되는 것이다.

 

이런 기능을 구현하기 위해서 라이브러리를 사용하였으며,

react-dnd와 react-beautiful-dnd 두개의 라이브러리를 고민하였다.

 

레이아웃을 설정하고 그리드의 위치를 조절해야하기 때문에 좀더 복잡한 구현이 가능하고 유연한 react-dnd를 선택하였다.

---

 

react-dnd 설치 명령어

yarn add react-dnd react-dnd-html5-backend

 

 

1. react-dnd를 사용하기 위해 provider로 사용하려는 부분을 감싸준다.

 

_app.tsx

import { NextPage } from "next";
import type { AppProps } from "next/app";
import { ReactElement, ReactNode } from "react";
import { DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

export default function App({ Component, pageProps }: AppPropsWithLayout) {

  return (
      <DndProvider backend={HTML5Backend}>
          {getLayout(
            <>
              <Component {...pageProps} />
            </>
          )}
      </DndProvider>
  );
}

 

 

drag를 이용하여 레이아웃을 움직여 부모컨테이너로 이동시키기 위해서 이동시킬 대상 컴포넌트와 이동시킬 아이템 컴포넌트를 제작한다.

 

2. drag parent container

  const [, drop] = useDrop({
    accept: "VIDEO", // drag item의 종류? 
    hover: (item, monitor) => {}, // drag item이 호버 되었을 때
    drop: (item: { id: string }) => {}, // drop item이 드랍 되었을 때
  });

 

drag event의 부모 컨테이너 부분에는 useDrop이라는 dnd에서 제공하는 hook을 사용하여 설정한다.

1. drop : drop 이벤트를 적용할 컴포넌트의 ref

2. accept: drop 이벤트를 적용시킬 종류 (drag item의 type과 매칭되는 요소)

3. hover: drag item의 호버이벤트가 일어났을 때 적용할 코드

4. drop: drop 이벤트가 일어날 때 적용할 코드

 

 

3. drag item

  const [{ isDragging }, drag, preview] = useDrag(() => ({
    type: "VIDEO",
    item: { id },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
    canDrag: active ? false : true,
  }));

  return (
    <StShareScreenDragItemContainer>
      <StDrag ref={drag} />
    </StShareScreenDragItemContainer>
  );
}

const StShareScreenDragItemContainer = styled.div`
  position: relative;
`;
const StDrag = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  background: transparent;
`;

 

react-dnd에서 제공하는 useDrag hook을 통해서 드래그 아이템에 대한 설정을 할 수 있다.

1. isDragging: 드래그가 활성화되 있는지 여부

2. drag: 드래그 하는 item의 ref

3. preview: 드래그 할 때 따라 움직이는 요소