jhynsoo/worlabel
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'fe/refactor/image-upload' into 'fe/develop'

Browse Source 
Refactor: 이미지 업로드 컴포넌트 리팩토링 - S11P21S002-243

See merge request s11-s-project/S11P21S002!239
This commit is contained in:
정현조 2024-09-30 12:47:49 +09:00
commit c0e25cc2f1
12 changed files with 169 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/api/imageApi.ts
View File

@ -31,7 +31,13 @@ export async function changeImageStatus(
.then(({ data }) => data);
}
export async function uploadImageFile(memberId: number, projectId: number, folderId: number, files: File[]) {
export async function uploadImageFile(
memberId: number,
projectId: number,
folderId: number,
files: File[],
processCallback: (progress: number) => void
) {
const formData = new FormData();
files.forEach((file) => {
formData.append('imageList', file);
@ -40,30 +46,60 @@ export async function uploadImageFile(memberId: number, projectId: number, folde
return api
.post(`/projects/${projectId}/folders/${folderId}/images/file`, formData, {
params: { memberId },
onUploadProgress: (progressEvent) => {
if (progressEvent.total) {
const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
processCallback(progress);
}
},
})
.then(({ data }) => data);
}
export async function uploadImageFolder(memberId: number, projectId: number, files: File[]) {
export async function uploadImageFolder(
memberId: number,
projectId: number,
folderId: number,
files: File[],
processCallback: (progress: number) => void
) {
const formData = new FormData();
files.forEach((file) => {
formData.append('imageList', file);
});
return api
.post(`/projects/${projectId}/folders/${0}/images/file`, formData, {
.post(`/projects/${projectId}/folders/${folderId}/images/file`, formData, {
params: { memberId },
onUploadProgress: (progressEvent) => {
if (progressEvent.total) {
const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
processCallback(progress);
}
},
})
.then(({ data }) => data);
}
export async function uploadImageZip(memberId: number, projectId: number, file: File) {
export async function uploadImageZip(
memberId: number,
projectId: number,
folderId: number,
file: File,
processCallback: (progress: number) => void
) {
const formData = new FormData();
formData.append('folderZip', file);
return api
.post(`/projects/${projectId}/folders/${0}/images/zip`, formData, {
.post(`/projects/${projectId}/folders/${folderId}/images/zip`, formData, {
params: { memberId },
onUploadProgress: (progressEvent) => {
if (progressEvent.total) {
const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
processCallback(progress);
}
},
})
.then(({ data }) => data);
}

27
frontend/src/components/ImageUploadFileModal/ImageUploadFileForm.tsx
View File

@ -1,4 +1,4 @@
import { useState } from 'react';
import { useEffect, useState } from 'react';
import { Button } from '../ui/button';
import { cn } from '@/lib/utils';
import useAuthStore from '@/stores/useAuthStore';
@ -7,10 +7,14 @@ import useUploadImageFileQuery from '@/queries/projects/useUploadImageFileQuery'
export default function ImageUploadFileForm({
onClose,
onRefetch,
onFileCount,
projectId,
folderId,
}: {
onClose: () => void;
onRefetch: () => void;
onFileCount: (fileCount: number) => void;
projectId: number;
folderId: number;
}) {
@ -22,6 +26,7 @@ export default function ImageUploadFileForm({
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 uploadImageFile = useUploadImageFileQuery();
@ -71,9 +76,13 @@ export default function ImageUploadFileForm({
projectId,
folderId,
files,
progressCallback: (progress: number) => {
setProgress(progress);
},
},
{
onSuccess: () => {
onRefetch();
setIsUploaded(true);
},
onError: () => {
@ -83,6 +92,10 @@ export default function ImageUploadFileForm({
);
};
useEffect(() => {
onFileCount(files.length);
}, [files, onFileCount]);
return (
<div className="flex flex-col gap-5">
{!isUploading && (
@ -115,11 +128,11 @@ export default function ImageUploadFileForm({
</div>
)}
{files.length > 0 && (
<ul className="m-0 max-h-[200px] list-none overflow-y-auto p-0">
<ul className="m-0 max-h-[260px] list-none overflow-y-auto p-0">
{files.map((file, index) => (
<li
key={index}
className={cn('flex items-center justify-between p-1')}
className="flex items-center justify-between p-1"
>
<span className="truncate">{file.webkitRelativePath || file.name}</span>
{isUploading ? (
@ -127,19 +140,19 @@ export default function ImageUploadFileForm({
{isUploaded ? (
<CircleCheckBig
className="stroke-green-500"
size={20}
size={16}
strokeWidth="2"
/>
) : isFailed ? (
<CircleX
className="stroke-red-500"
size={20}
size={16}
strokeWidth="2"
/>
) : (
<CircleDashed
className="stroke-gray-500"
size={20}
size={16}
strokeWidth="2"
/>
)}
@ -171,7 +184,7 @@ export default function ImageUploadFileForm({
}
disabled={!isUploaded && !isFailed}
>
{isFailed ? '업로드 실패 (닫기)' : isUploaded ? '업로드 완료 (닫기)' : '업로드 중...'}
{isFailed ? '업로드 실패 (닫기)' : isUploaded ? '업로드 완료 (닫기)' : `업로드 중... ${progress}%`}
</Button>
) : (
<Button

9
frontend/src/components/ImageUploadFileModal/index.tsx
View File

@ -4,10 +4,14 @@ import { Plus } from 'lucide-react';
import ImageUploadFileForm from './ImageUploadFileForm';
export default function ImageUploadFileModal({ projectId, folderId }: { projectId: number; folderId: number }) {
const [isOpen, setIsOpen] = React.useState(false);
const [isOpen, setIsOpen] = React.useState<boolean>(false);
const [fileCount, setFileCount] = React.useState<number>(0);
const handleOpen = () => setIsOpen(true);
const handleClose = () => setIsOpen(false);
const handleFileCount = (fileCount: number) => {
setFileCount(fileCount);
};
return (
<Dialog
@ -23,9 +27,10 @@ export default function ImageUploadFileModal({ projectId, folderId }: { projectI
</button>
</DialogTrigger>
<DialogContent className="max-w-2xl">
<DialogHeader title="파일 업로드" />
<DialogHeader title={fileCount > 0 ? `파일 업로드 (${fileCount})` : '파일 업로드'} />
<ImageUploadFileForm
onClose={handleClose}
onFileCount={handleFileCount}
projectId={projectId}
folderId={folderId}
/>

30
frontend/src/components/ImageUploadFolderModal/ImageUploadFolderForm.tsx
View File

@ -5,7 +5,17 @@ import useAuthStore from '@/stores/useAuthStore';
import { CircleCheckBig, CircleDashed, CircleX, X } from 'lucide-react';
import useUploadImageFolderQuery from '@/queries/projects/useUploadImageFolderQuery';
export default function ImageUploadFolderForm({ onClose, projectId }: { onClose: () => void; projectId: number }) {
export default function ImageUploadFolderForm({
onClose,
onRefetch,
projectId,
folderId,
}: {
onClose: () => void;
onRefetch: () => void;
projectId: number;
folderId: number;
}) {
const profile = useAuthStore((state) => state.profile);
const memberId = profile?.id || 0;
@ -14,6 +24,7 @@ export default function ImageUploadFolderForm({ onClose, projectId }: { onClose:
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 uploadImageFolder = useUploadImageFolderQuery();
@ -56,10 +67,15 @@ export default function ImageUploadFolderForm({ onClose, projectId }: { onClose:
{
memberId,
projectId,
folderId,
files,
progressCallback: (progress: number) => {
setProgress(progress);
},
},
{
onSuccess: () => {
onRefetch;
setIsUploaded(true);
},
onError: () => {
@ -100,11 +116,11 @@ export default function ImageUploadFolderForm({ onClose, projectId }: { onClose:
</div>
)}
{files.length > 0 && (
<ul className="m-0 max-h-[200px] list-none overflow-y-auto p-0">
<ul className="m-0 max-h-[260px] list-none overflow-y-auto p-0">
{files.map((file, index) => (
<li
key={index}
className={cn('flex items-center justify-between p-1')}
className="flex items-center justify-between p-1"
>
<span className="truncate">{file.webkitRelativePath || file.name}</span>
{isUploading ? (
@ -112,19 +128,19 @@ export default function ImageUploadFolderForm({ onClose, projectId }: { onClose:
{isUploaded ? (
<CircleCheckBig
className="stroke-green-500"
size={20}
size={16}
strokeWidth="2"
/>
) : isFailed ? (
<CircleX
className="stroke-red-500"
size={20}
size={16}
strokeWidth="2"
/>
) : (
<CircleDashed
className="stroke-gray-500"
size={20}
size={16}
strokeWidth="2"
/>
)}
@ -156,7 +172,7 @@ export default function ImageUploadFolderForm({ onClose, projectId }: { onClose:
}
disabled={!isUploaded && !isFailed}
>
{isFailed ? '업로드 실패 (닫기)' : isUploaded ? '업로드 완료 (닫기)' : '업로드 중...'}
{isFailed ? '업로드 실패 (닫기)' : isUploaded ? '업로드 완료 (닫기)' : `업로드 중... ${progress}%`}
</Button>
) : (
<Button

3
frontend/src/components/ImageUploadFolderModal/index.tsx
View File

@ -3,7 +3,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialog
import { Plus } from 'lucide-react';
import ImageUploadFolderForm from './ImageUploadFolderForm';
export default function ImageUploadFolderModal({ projectId }: { projectId: number }) {
export default function ImageUploadFolderModal({ projectId, folderId }: { projectId: number; folderId: number }) {
const [isOpen, setIsOpen] = React.useState(false);
const handleOpen = () => setIsOpen(true);
@ -27,6 +27,7 @@ export default function ImageUploadFolderModal({ projectId }: { projectId: numbe
<ImageUploadFolderForm
onClose={handleClose}
projectId={projectId}
folderId={folderId}
/>
</DialogContent>
</Dialog>

26
frontend/src/components/ImageUploadZipModal/ImageUploadZipForm.tsx
View File

@ -5,7 +5,17 @@ import useAuthStore from '@/stores/useAuthStore';
import { CircleCheckBig, CircleDashed, CircleX, X } from 'lucide-react';
import useUploadImageZipQuery from '@/queries/projects/useUploadImageZipQuery';
export default function ImageUploadZipForm({ onClose, projectId }: { onClose: () => void; projectId: number }) {
export default function ImageUploadZipForm({
onClose,
onRefetch,
projectId,
folderId,
}: {
onClose: () => void;
onRefetch: () => void;
projectId: number;
folderId: number;
}) {
const profile = useAuthStore((state) => state.profile);
const memberId = profile?.id || 0;
@ -14,6 +24,7 @@ export default function ImageUploadZipForm({ onClose, projectId }: { onClose: ()
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 uploadImageZip = useUploadImageZipQuery();
@ -57,10 +68,15 @@ export default function ImageUploadZipForm({ onClose, projectId }: { onClose: ()
{
memberId,
projectId,
folderId,
file,
progressCallback: (progress: number) => {
setProgress(progress);
},
},
{
onSuccess: () => {
onRefetch();
setIsUploaded(true);
},
onError: () => {
@ -110,19 +126,19 @@ export default function ImageUploadZipForm({ onClose, projectId }: { onClose: ()
{isUploaded ? (
<CircleCheckBig
className="stroke-green-500"
size={20}
size={16}
strokeWidth="2"
/>
) : isFailed ? (
<CircleX
className="stroke-red-500"
size={20}
size={16}
strokeWidth="2"
/>
) : (
<CircleDashed
className="stroke-gray-500"
size={20}
size={16}
strokeWidth="2"
/>
)}
@ -152,7 +168,7 @@ export default function ImageUploadZipForm({ onClose, projectId }: { onClose: ()
}
disabled={!isUploaded && !isFailed}
>
{isFailed ? '업로드 실패 (닫기)' : isUploaded ? '업로드 완료 (닫기)' : '업로드 중...'}
{isFailed ? '업로드 실패 (닫기)' : isUploaded ? '업로드 완료 (닫기)' : `업로드 중... ${progress}%`}
</Button>
) : (
<Button

3
frontend/src/components/ImageUploadZipModal/index.tsx
View File

@ -3,7 +3,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialog
import { Plus } from 'lucide-react';
import ImageUploadZipForm from './ImageUploadZipForm';
export default function ImageUploadZipModal({ projectId }: { projectId: number }) {
export default function ImageUploadZipModal({ projectId, folderId }: { projectId: number; folderId: number }) {
const [isOpen, setIsOpen] = React.useState(false);
const handleOpen = () => setIsOpen(true);
@ -27,6 +27,7 @@ export default function ImageUploadZipModal({ projectId }: { projectId: number }
<ImageUploadZipForm
onClose={handleClose}
projectId={projectId}
folderId={folderId}
/>
</DialogContent>
</Dialog>

32
frontend/src/components/WorkspaceDropdownMenu/index.tsx
View File

@ -15,32 +15,40 @@ import ImageUploadZipForm from '../ImageUploadZipModal/ImageUploadZipForm';
export default function WorkspaceDropdownMenu({
projectId,
folderId,
refetch,
onRefetch,
}: {
projectId: number;
folderId: number;
refetch: () => void;
onRefetch: () => void;
}) {
const [isOpenUploadFile, setIsOpenUploadFile] = React.useState(false);
const [isOpenUploadFolder, setIsOpenUploadFolder] = React.useState(false);
const [isOpenUploadZip, setIsOpenUploadZip] = React.useState(false);
const [isOpenUploadFile, setIsOpenUploadFile] = React.useState<boolean>(false);
const [fileCount, setFileCount] = React.useState<number>(0);
const [isOpenUploadFolder, setIsOpenUploadFolder] = React.useState<boolean>(false);
const [isOpenUploadZip, setIsOpenUploadZip] = React.useState<boolean>(false);
const handleOpenUploadFile = () => setIsOpenUploadFile(true);
const handleCloseUploadFile = () => {
refetch();
setIsOpenUploadFile(false);
};
const handleOpenUploadFolder = () => setIsOpenUploadFolder(true);
const handleCloseUploadFolder = () => {
refetch();
setIsOpenUploadFolder(false);
};
const handleOpenUploadZip = () => setIsOpenUploadZip(true);
const handleCloseUploadZip = () => {
refetch();
setIsOpenUploadZip(false);
};
const handleFileCount = (fileCount: number) => {
console.log(fileCount);
setFileCount(fileCount);
};
return (
<>
<DropdownMenu>
@ -71,9 +79,11 @@ export default function WorkspaceDropdownMenu({
>
<DialogTrigger asChild></DialogTrigger>
<DialogContent className="max-w-2xl">
<DialogHeader title="파일 업로드" />
<DialogHeader title={fileCount > 0 ? `파일 업로드 (${fileCount})` : '파일 업로드'} />
<ImageUploadFileForm
onClose={handleCloseUploadFile}
onRefetch={onRefetch}
onFileCount={handleFileCount}
projectId={projectId}
folderId={folderId}
/>
@ -89,7 +99,9 @@ export default function WorkspaceDropdownMenu({
<DialogHeader title="폴더 업로드 (임시)" />
<ImageUploadFolderForm
onClose={handleCloseUploadFolder}
onRefetch={onRefetch}
projectId={projectId}
folderId={folderId}
/>
</DialogContent>
</Dialog>
@ -103,7 +115,9 @@ export default function WorkspaceDropdownMenu({
<DialogHeader title="폴더 압축파일 업로드" />
<ImageUploadZipForm
onClose={handleCloseUploadZip}
onRefetch={onRefetch}
projectId={projectId}
folderId={folderId}
/>
</DialogContent>
</Dialog>

2
frontend/src/components/WorkspaceSidebar/ProjectStructure.tsx
View File

@ -40,7 +40,7 @@ export default function ProjectStructure({ project }: { project: Project }) {
<WorkspaceDropdownMenu
projectId={project.id}
folderId={0}
refetch={refetch}
onRefetch={refetch}
/>
</header>
{folderData.children.length === 0 && folderData.images.length === 0 ? (

4
frontend/src/queries/projects/useUploadImageFileQuery.ts
View File

@ -8,11 +8,13 @@ export default function useUploadImageFileQuery() {
projectId,
folderId,
files,
progressCallback,
}: {
memberId: number;
projectId: number;
folderId: number;
files: File[];
}) => uploadImageFile(memberId, projectId, folderId, files),
progressCallback: (progress: number) => void;
}) => uploadImageFile(memberId, projectId, folderId, files, progressCallback),
});
}

15
frontend/src/queries/projects/useUploadImageFolderQuery.ts
View File

@ -3,7 +3,18 @@ import { useMutation } from '@tanstack/react-query';
export default function useUploadImageFolderQuery() {
return useMutation({
mutationFn: ({ memberId, projectId, files }: { memberId: number; projectId: number; files: File[] }) =>
uploadImageFolder(memberId, projectId, files),
mutationFn: ({
memberId,
projectId,
folderId,
files,
progressCallback,
}: {
memberId: number;
projectId: number;
folderId: number;
files: File[];
progressCallback: (progress: number) => void;
}) => uploadImageFolder(memberId, projectId, folderId, files, progressCallback),
});
}

15
frontend/src/queries/projects/useUploadImageZipQuery.ts
View File

@ -3,7 +3,18 @@ import { useMutation } from '@tanstack/react-query';
export default function useUploadImageZipQuery() {
return useMutation({
mutationFn: ({ memberId, projectId, file }: { memberId: number; projectId: number; file: File }) =>
uploadImageZip(memberId, projectId, file),
mutationFn: ({
memberId,
projectId,
folderId,
file,
progressCallback,
}: {
memberId: number;
projectId: number;
folderId: number;
file: File;
progressCallback: (progress: number) => void;
}) => uploadImageZip(memberId, projectId, folderId, file, progressCallback),
});
}