Refactor: 업로드 부분 통합 모달 구현
This commit is contained in:
정현조
parent
1c9bd12f1b
commit
b46a43be41
271
frontend/src/components/ImageUploadModal/ImageUploadForm.tsx
Normal file
271
frontend/src/components/ImageUploadModal/ImageUploadForm.tsx
Normal file
@ -0,0 +1,271 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Button } from '../ui/button';
|
||||
import { cn } from '@/lib/utils';
|
||||
import useAuthStore from '@/stores/useAuthStore';
|
||||
import { CircleCheckBig, CircleDashed, CircleX, X } from 'lucide-react';
|
||||
import { FixedSizeList } from 'react-window';
|
||||
import { UseMutationResult } from '@tanstack/react-query';
|
||||
import { UploadZipParams, UploadFolderParams } from '@/types/uploadTypes';
|
||||
|
||||
interface UploadFormProps {
|
||||
onClose: () => void;
|
||||
onRefetch?: () => void;
|
||||
onFileCount: (fileCount: number) => void;
|
||||
projectId: number;
|
||||
folderId: number;
|
||||
isFolderUpload?: boolean;
|
||||
isZipUpload?: boolean;
|
||||
isFolderBackendUpload?: boolean;
|
||||
uploadImageZipMutation: UseMutationResult<unknown, Error, UploadZipParams, unknown>;
|
||||
uploadImageFolderFileMutation: UseMutationResult<unknown, Error, UploadFolderParams, unknown>;
|
||||
uploadImageFileMutation: UseMutationResult<unknown, Error, UploadFolderParams, unknown>;
|
||||
uploadImageFolderMutation: UseMutationResult<unknown, Error, UploadFolderParams, unknown>;
|
||||
}
|
||||
|
||||
export default function ImageUploadForm({
|
||||
onClose,
|
||||
onRefetch,
|
||||
onFileCount,
|
||||
projectId,
|
||||
folderId,
|
||||
isFolderUpload = false,
|
||||
isZipUpload = false,
|
||||
isFolderBackendUpload = false,
|
||||
uploadImageZipMutation,
|
||||
uploadImageFolderFileMutation,
|
||||
uploadImageFileMutation,
|
||||
uploadImageFolderMutation,
|
||||
}: UploadFormProps) {
|
||||
const profile = useAuthStore((state) => state.profile);
|
||||
const memberId = profile?.id || 0;
|
||||
|
||||
const [files, setFiles] = useState<File[]>([]);
|
||||
const [inputKey, setInputKey] = useState<number>(0);
|
||||
const [isDragging, setIsDragging] = useState<boolean>(false);
|
||||
const [isUploading, setIsUploading] = useState<boolean>(false);
|
||||
const [isUploaded, setIsUploaded] = useState<boolean>(false);
|
||||
const [isFailed, setIsFailed] = useState<boolean>(false);
|
||||
const [progress, setProgress] = useState<number>(0);
|
||||
|
||||
const handleClose = () => {
|
||||
onClose();
|
||||
setFiles([]);
|
||||
setInputKey((prevKey) => prevKey + 1);
|
||||
setIsUploading(false);
|
||||
setIsUploaded(false);
|
||||
setIsFailed(false);
|
||||
setProgress(0);
|
||||
};
|
||||
|
||||
const handleRefetch = () => {
|
||||
if (onRefetch) {
|
||||
onRefetch();
|
||||
}
|
||||
};
|
||||
|
||||
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const newFiles = event.target.files;
|
||||
|
||||
if (newFiles) {
|
||||
setFiles((prevFiles) => [...prevFiles, ...Array.from(newFiles)]);
|
||||
}
|
||||
|
||||
event.target.value = '';
|
||||
};
|
||||
|
||||
const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
setIsDragging(true);
|
||||
};
|
||||
|
||||
const handleDragLeave = (event: React.DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
setIsDragging(false);
|
||||
};
|
||||
|
||||
const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
setIsDragging(false);
|
||||
const droppedFiles = event.dataTransfer.files;
|
||||
if (droppedFiles) {
|
||||
setFiles((prevFiles) => [...prevFiles, ...Array.from(droppedFiles)]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRemoveFile = (index: number) => {
|
||||
if (isFolderUpload) {
|
||||
setFiles([]);
|
||||
setInputKey((prevKey) => prevKey + 1);
|
||||
} else {
|
||||
setFiles(files.filter((_, i) => i !== index));
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpload = () => {
|
||||
if (files.length > 0) {
|
||||
setIsUploading(true);
|
||||
setIsUploaded(false);
|
||||
setIsFailed(false);
|
||||
|
||||
const progressCallback = (progress: number) => {
|
||||
setProgress(progress);
|
||||
};
|
||||
|
||||
if (isZipUpload) {
|
||||
const variables: UploadZipParams = {
|
||||
memberId,
|
||||
projectId,
|
||||
folderId,
|
||||
file: files[0],
|
||||
progressCallback,
|
||||
};
|
||||
uploadImageZipMutation.mutate(variables, {
|
||||
onSuccess: () => {
|
||||
handleRefetch();
|
||||
setIsUploaded(true);
|
||||
},
|
||||
onError: () => {
|
||||
setIsFailed(true);
|
||||
},
|
||||
});
|
||||
} else {
|
||||
const variables: UploadFolderParams = {
|
||||
memberId,
|
||||
projectId,
|
||||
folderId,
|
||||
files,
|
||||
progressCallback,
|
||||
};
|
||||
const mutation = isFolderBackendUpload
|
||||
? uploadImageFolderMutation
|
||||
: isFolderUpload
|
||||
? uploadImageFolderFileMutation
|
||||
: uploadImageFileMutation;
|
||||
|
||||
mutation.mutate(variables, {
|
||||
onSuccess: () => {
|
||||
handleRefetch();
|
||||
setIsUploaded(true);
|
||||
},
|
||||
onError: () => {
|
||||
setIsFailed(true);
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
onFileCount(files.length);
|
||||
}, [files, onFileCount]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-5">
|
||||
{!isUploading && (
|
||||
<div
|
||||
className={cn(
|
||||
'relative flex h-[200px] w-full cursor-pointer items-center justify-center rounded-lg border-2 text-center',
|
||||
isDragging ? 'border-solid border-primary bg-blue-200' : 'border-dashed border-gray-500 bg-gray-100'
|
||||
)}
|
||||
onDragOver={handleDragOver}
|
||||
onDragLeave={handleDragLeave}
|
||||
onDrop={handleDrop}
|
||||
>
|
||||
<input
|
||||
key={inputKey}
|
||||
type="file"
|
||||
{...(isFolderUpload ? { webkitdirectory: '' } : { multiple: !isZipUpload })}
|
||||
accept={isZipUpload ? '.zip' : undefined}
|
||||
className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
|
||||
onChange={handleChange}
|
||||
/>
|
||||
{isDragging ? (
|
||||
<p className="text-primary">
|
||||
{isFolderUpload ? '드래그한 폴더를 여기에 놓으세요' : '드래그한 파일을 여기에 놓으세요'}
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-gray-500">
|
||||
{isFolderUpload
|
||||
? '폴더를 업로드하려면 여기를 클릭하거나 폴더를 드래그하여 여기에 놓으세요'
|
||||
: '파일을 업로드하려면 여기를 클릭하거나 파일을 드래그하여 여기에 놓으세요'}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{files.length > 0 && (
|
||||
<ul className="m-0 max-h-[260px] list-none overflow-y-auto p-0">
|
||||
<FixedSizeList
|
||||
height={260}
|
||||
itemCount={files.length}
|
||||
itemSize={40}
|
||||
width="100%"
|
||||
>
|
||||
{({ index, style }) => (
|
||||
<li
|
||||
key={index}
|
||||
className="flex items-center justify-between p-1"
|
||||
style={style}
|
||||
>
|
||||
<span className="truncate">{files[index].webkitRelativePath || files[index].name}</span>
|
||||
{isUploading ? (
|
||||
<div className="p-2">
|
||||
{isUploaded ? (
|
||||
<CircleCheckBig
|
||||
className="stroke-green-500"
|
||||
size={16}
|
||||
strokeWidth="2"
|
||||
/>
|
||||
) : isFailed ? (
|
||||
<CircleX
|
||||
className="stroke-red-500"
|
||||
size={16}
|
||||
strokeWidth="2"
|
||||
/>
|
||||
) : (
|
||||
<CircleDashed
|
||||
className="stroke-gray-500"
|
||||
size={16}
|
||||
strokeWidth="2"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<button
|
||||
className="cursor-pointer p-2"
|
||||
onClick={() => handleRemoveFile(index)}
|
||||
>
|
||||
<X
|
||||
color="red"
|
||||
size={16}
|
||||
strokeWidth="2"
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</li>
|
||||
)}
|
||||
</FixedSizeList>
|
||||
</ul>
|
||||
)}
|
||||
{isUploading ? (
|
||||
<Button
|
||||
onClick={handleClose}
|
||||
variant={isFailed ? 'red' : 'blue'}
|
||||
disabled={!isUploaded && !isFailed}
|
||||
>
|
||||
{isFailed ? '업로드 실패 (닫기)' : isUploaded ? '업로드 완료 (닫기)' : `업로드 중... ${progress}%`}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
onClick={handleUpload}
|
||||
variant="blue"
|
||||
disabled={files.length === 0}
|
||||
>
|
||||
업로드
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
70
frontend/src/components/ImageUploadModal/index.tsx
Normal file
70
frontend/src/components/ImageUploadModal/index.tsx
Normal file
@ -0,0 +1,70 @@
|
||||
import React from 'react';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
|
||||
import { Plus } from 'lucide-react';
|
||||
import ImageUploadForm from './ImageUploadForm';
|
||||
import useUploadImageFileQuery from '@/queries/projects/useUploadImageFileQuery';
|
||||
import useUploadImageFolderFileQuery from '@/queries/projects/useUploadImageFolderFileQuery';
|
||||
import useUploadImageZipQuery from '@/queries/projects/useUploadImageZipQuery';
|
||||
import useUploadImageFolderQuery from '@/queries/projects/useUploadImageFolderQuery';
|
||||
|
||||
interface ImageUploadModalProps {
|
||||
projectId: number;
|
||||
folderId: number;
|
||||
isFolderUpload?: boolean;
|
||||
isZipUpload?: boolean;
|
||||
isFolderBackendUpload?: boolean;
|
||||
}
|
||||
|
||||
export default function ImageUploadModal({
|
||||
projectId,
|
||||
folderId,
|
||||
isFolderUpload = false,
|
||||
isZipUpload = false,
|
||||
isFolderBackendUpload = false,
|
||||
}: ImageUploadModalProps) {
|
||||
const [isOpen, setIsOpen] = React.useState(false);
|
||||
const [fileCount, setFileCount] = React.useState<number>(0);
|
||||
|
||||
const handleOpen = () => setIsOpen(true);
|
||||
const handleClose = () => setIsOpen(false);
|
||||
const handleFileCount = (fileCount: number) => {
|
||||
setFileCount(fileCount);
|
||||
};
|
||||
|
||||
const uploadImageZipMutation = useUploadImageZipQuery();
|
||||
const uploadImageFolderFileMutation = useUploadImageFolderFileQuery();
|
||||
const uploadImageFileMutation = useUploadImageFileQuery();
|
||||
const uploadImageFolderMutation = useUploadImageFolderQuery();
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={isOpen}
|
||||
onOpenChange={setIsOpen}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<button
|
||||
className="flex items-center justify-center p-2"
|
||||
onClick={handleOpen}
|
||||
>
|
||||
<Plus size={20} />
|
||||
</button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader title={fileCount > 0 ? `파일 업로드 (${fileCount})` : '파일 업로드'} />
|
||||
<ImageUploadForm
|
||||
onClose={handleClose}
|
||||
onFileCount={handleFileCount}
|
||||
projectId={projectId}
|
||||
folderId={folderId}
|
||||
isFolderUpload={isFolderUpload}
|
||||
isZipUpload={isZipUpload}
|
||||
isFolderBackendUpload={isFolderBackendUpload}
|
||||
uploadImageZipMutation={uploadImageZipMutation}
|
||||
uploadImageFolderFileMutation={uploadImageFolderFileMutation}
|
||||
uploadImageFileMutation={uploadImageFileMutation}
|
||||
uploadImageFolderMutation={uploadImageFolderMutation}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user