easy하게 이미지 Drag & Drop 코드 작성하기

// AddCardPage.jsx (전체 코드 중 일부만 발췌)
 
export default function AddCardPage() {
 
const [isDragOver, setIsDragOver] = useState(false);
const files = Array.from(event.dataTransfer.files);
 
const handleDragOver = (event) => {
    event.preventDefault(); // 브라우저의 기본 드래그 오버 동작을 방지
    event.stopPropagation(); // 이벤트가 상위 요소로 전파되는 것을 막음
    setIsDragOver(true); // 드래그 오버 상태로 설정
};
 
const handleDragLeave = (event) => {
    event.preventDefault(); // 브라우저의 기본 드래그 리브 동작을 방지
    event.stopPropagation(); // 이벤트가 상위 요소로 전파되는 것을 막음
    setIsDragOver(false); // 드래그 오버 상태 해제
};
 
const handleDrop = (event) => {
    event.preventDefault(); // 브라우저의 기본 드롭 동작을 방지 (파일 열기 등)
    event.stopPropagation(); // 이벤트가 상위 요소로 전파되는 것을 막음
    setIsDragOver(false); // 드래그 오버 상태 해제
    onUploadImage(event); // 드롭된 파일 처리
};
 
return (
    <>
        <S.DashedBorder
            onDragOver={handleDragOver}
            onDragLeave={handleDragLeave}
            onDrop={handleDrop}
           isDragOver={isDragOver}
        >
    </>
)

// AddCardPage.style.jsx (전체 코드 중 일부만 발췌)
 
export const DashedBorder = styled.div`
  background-color: ${(props) =>
    props.isDragOver ? '#f0f0ff' : 'transparent'};
  transition: background-color 0.3s ease;
`;