개발자
류준열
바탕화면 구현을 위해 Draggable 컴포넌트 만들기
바탕화면에서 아이콘을 드래그 할 수 있도록 Draggable 컴포넌트를 만들었다.
그리고 이 Draggable 컴포넌트를 재사용하여 폴더내에서도 똑같은 기능을 구현하였다.
코드는 다음과 같다.
// 바탕화면
export const Home = () => {
...
return (
<div className={styles.home}>
<Draggable icons={ICONS} />
...
</div>
);
};
// window 창 : 폴더이면 Draggable, 파일이면 markdown
export const WindowBox = ({ icon, index }: WindowBoxProps) => {
...
return (
<section>
{icon.type===IconType.FOLDER ? <Draggable icons={icon.children || []} /> : <Markdown markdown={icon.markdown} />
</section>
}
Draggable 컴포넌트 내부
Draggable 컴포넌트 내부는 2개의 로컬state와 1개의 전역 state가 있다.
export const Draggable = ({ icons: _icons }: DraggableProps) => {
const [draggingIcon, setDraggingIcon] = useState<{ id: number } | null>(null);
const isDraggable = useDraggableStore(state => state.isDraggable);
const [icons, setIcons] = useState(_icons);
...
- draggingIcon은 지금 끌고 있는 icon
- isDraggable은 드래그 가능한 상태인지를 나타내는 boolean값이다. 이름변경, 우클릭 등이 발생했을때는 false이다.
- icons는 현재 Draggable내에 있는 각 icon들의 이름,위치,zIndex등을 갖고 있는 state이다. 아래는 예시코드
const ICONS = [ {
type: 'file',
windowState: 'closed',
id: 5,
src: CodestatesLogo,
alt: '지원선발 시스템',
left: 50,
top: 50,
zIndex: 100,
markdown: '/markdown/admission-admin.md',
},{
type: 'folder',
windowState: 'closed',
id: 3,
src: FolderSVG,
alt: '프로젝트',
left: 50,
top: 350,
zIndex: 100,
children: [
{
type: 'file',
windowState: 'closed',
id: 4,
src: CodestatesLogo,
alt: '코드스테이츠 랜딩페이지',
left: 50,
top: 150,
zIndex: 100,
markdown: '/markdown/landing-page.md',
}]}],
Icon을 드래그 하기 시작 할 때 : onDragStart
드래그 할 Icon.tsx는 다음과 같다.
export const Icon = () => {
return (
<div draggable={isDraggable} onDragStart={e=>handleDragStart(e,icon.id}>
<img className = 'icon_img' .. />
<input className = 'icon_name' .. />
</div>
)
}
Icon을 드래그 할 때 실행되는 handleDragStart는 dragEvent와 icon.id를 매개변수로 받고 다음과 같이 작동한다.
export const handleDragStart = (
e: DragEvent,
id: number
) => {
if (isDraggable) {
// 드래그 중인 아이콘을 확인하고 이동한 위치에 해당 아이콘을 배치하기 위해 id를 추적한다.
e.dataTransfer.setData('id', id.toString());
setDraggingIcon({ id });
}
};
Icon을 Draggable 컴포넌트 상에서 드래그 할 때 : onDragover
일단 Dragglable.tsx 컴포넌트 리턴문은 다음과 같다.
export const Draggable = () => {
...
return (
<div
onDragOver={handleDragOver}
onDrop={handleDrop}
>
<div>
{icons.map(icon=>(<Icon key = {icon.id} .... />))}
</div>
</div>)
}
onDragOver는 MDN에서 보면 엘리먼트가 유효한 드래그 영역 내에서 드래그 될 때 every few hundreds 타임마다 발생하는 이벤트이다.
브라우저 고유의 이벤트가 발생하는 것을 방지하기 위해 e.prevetDefault()만 깔아주었다.
export const Draggable = () => {
...
const handleDragOver = (e: DragEvent) => {
e.preventDefault();
};
...
return (
<div>
onDragOver={handleDragOver}
onDrop={handleDrop}
</div>)
}
Icon을 Drop 할 때 : onDrop
그리고 drop할 때 발생하는 handleDrop까지 추가해주었다.
역시 브라우저 고유의 이벤트때문에 방해받지 않도록 e.preventDefault()를 사용했다.
그리고 Icon.tsx 의 onDragStart에서 추적하던 icon.id를 받아서 drop할 icon를 결정하고
drag event에 내장된 마우스 위치를 icon.left, icon.top에 할당한다.
export const Draggable = () => {
...
const handleDragOver = (e: DragEvent) => {
e.preventDefault();
};
const handleDrop = (
e: DragEvent
) => {
if (isDraggable) {
e.preventDefault();
if (draggingIcon) {
const id = Number(e.dataTransfer.getData('id'));
const icon = icons.find(i => i.id === id);
if (icon) {
const rect = e.currentTarget.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const updatedIcons = icons.map(i => {
if (i.id === id) {
return { ...i, left: x - 30, top: y - 25 };
}
return i;
});
setIcons(updatedIcons);
}
setDraggingIcon(null);
}
}
};
...
return (
<div>
onDragOver={handleDragOver}
onDrop={handleDrop}
</div>)
}
그리고 icon.left와 icon.top을 Icon.tsx에서 Icon의 left,top값으로 넣어준다.
export const Icon = (...) => {
return (
<>
<div
draggable={isDraggable}
onDragStart={e => handleDragStart(e, icon.id)}
style={{
left: icon.left,
top: icon.top,
}}
>
...
</div>
</>
이렇게 하여 Draggable.tsx를 만들었다.
Draggable 컴포넌트 예시
실제 구현체는 더 많은 코드가 있는데, Icon을 Drag하는 기능만 들어간 Draggable 컴포넌트는 다음과 같다.
import React, { useState } from 'react';
const Desktop: React.FC = () => {
const [icons, setIcons] = useState([
{ id: 1, icon: '🌟', left: 50, top: 50 },
{ id: 2, icon: '📁', left: 150, top: 50 },
{ id: 3, icon: '📎', left: 250, top: 50 },
]);
const [draggingIcon, setDraggingIcon] = useState<{ id: number } | null>(null);
const handleDragStart = (e: React.DragEvent, id: number) => {
e.dataTransfer.setData('id', id.toString());
setDraggingIcon({ id });
};
const handleDragOver = (e: React.DragEvent) => {
e.preventDefault();
};
const handleDrop = (e: React.DragEvent) => {
e.preventDefault();
if (draggingIcon) {
const id = Number(e.dataTransfer.getData('id'));
const icon = icons.find((i) => i.id === id);
if (icon) {
const rect = e.currentTarget.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const updatedIcons = icons.map((i) => {
if (i.id === id) {
return { ...i, left: x, top: y };
}
return i;
});
setIcons(updatedIcons);
}
setDraggingIcon(null);
}
};
const iconElements = icons.map((icon) => (
<div
key={icon.id}
style={{
position: 'absolute',
left: icon.left,
top: icon.top,
cursor: 'pointer',
}}
draggable
onDragStart={(e) => handleDragStart(e, icon.id)}
>
{icon.icon}
</div>
));
return (
<div
style={{
width: '100%',
height: '100%',
position: 'relative',
backgroundColor: 'lightgray',
}}
onDragOver={handleDragOver}
onDrop={handleDrop}
>
{iconElements}
</div>
);
};
export default Desktop;