오늘의 목표

• 추가하려는 element 타입을 구분하여 원하는 스타일로 추가할 수 있는 기능 구현

수행 내역

• component splitting을 통해 MyPage 안에 일괄 작성 되었던 각 컴포넌트들을 별도의 파일로 분리
• dragStart 이벤트 발생 시 setData 를 통해 현재 어떤 element를 추가하려고 하는지 전달
  • 전달받은 데이터를 사용하여 추가되는 element 들을 구분하여 추가
  • onDragStart Props 참조

const BlogDroppable = ({ droppableItem }) => {
    return (
        <div
            className={`droppable-${droppableItem.className}-element`}
            draggable={true}
            unselectable='on'
            onDragStart={(e) => e.dataTransfer.setData('text/plain', JSON.stringify(droppableItem))}
        >
            <img
                className={`${droppableItem.className}-element-image`}
                src={droppableItem.imageSource}
                alt={droppableItem.tooltip}
            />
            <i>{droppableItem.tooltip}</i>
        </div>
    );
};

export default BlogDroppable;

const droppedItemData = e.dataTransfer.getData('text/plain');
        const droppedItemJSON = JSON.parse(droppedItemData);

문제 및 이슈

• 없음

참고자료

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

지원요청

• 없음

내일 계획

• element 타입에 따라 dropping 상태일 때의 임시 사이즈가 다르게 적용 될 수 있도록 구현
• element 별 클릭 이벤트 구현으로 원하는 미디어를 배치할 수 있도록 구현