오늘의 목표

• element 타입에 따라 dropping 상태일 때의 임시 사이즈가 다르게 적용 될 수 있도록 구현

수행 내역

• useContext로 onDragStart 이벤트의 element 요소 값을 useState로 업데이트 하고, 그 값을 이용해 RGL의 Props 인 DroppingItem 으로 전달

import { createContext, useState } from 'react';

export const BlogContext = createContext(null);

export const BlogProvider = ({ children }) => {
    const [draggingItem, setDraggingItem] = useState(null);
    const value = { draggingItem, setDraggingItem };

    return <BlogContext.Provider value={value}>{children}</BlogContext.Provider>;
};

const { draggingItem, setDraggingItem } = useContext(BlogContext);

    const handleDragStart = (e) => {
        setDraggingItem(droppableItem);
        e.dataTransfer.setData('text/plain', '');
    };

    const handleDragEnd = () => {
        setDraggingItem(null);
    };

<ReactGridLayout
    layout={layout}
    cols={5}
    rowHeight={170}
    width={900}
    onDrop={onDrop}
    isDroppable={true}
    isDraggable={false}
    droppingItem={{
        i: '__dropping-elem__',
        w: draggingItem ? draggingItem.w : 1,
        h: draggingItem ? draggingItem.h : 1,
    }}
    compactType={'vertical'}
    onLayoutChange={onLayoutChange}
>
    {renderGridItems()}
</ReactGridLayout>

문제 및 이슈

• 없음

참고자료

• https://www.npmjs.com/package/react-grid-layout/v/1.5.2#demos

지원요청

• 없음

내일 계획

• element 별 클릭 이벤트 구현으로 원하는 미디어를 배치할 수 있도록 구현