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

Feat: 업로드할 파일 개수 표시 추가

Browse Source
This commit is contained in:
홍창기 2024-09-30 09:49:22 +09:00
parent 6ca60921aa
commit c91ccf42c0
3 changed files with 24 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
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,12 @@ import useUploadImageFileQuery from '@/queries/projects/useUploadImageFileQuery'
export default function ImageUploadFileForm({
onClose,
onFileCount,
projectId,
folderId,
}: {
onClose: () => void;
onFileCount: (fileCount: number) => void;
projectId: number;
folderId: number;
}) {
@ -87,6 +89,10 @@ export default function ImageUploadFileForm({
);
};
useEffect(() => {
onFileCount(files.length);
}, [files, onFileCount]);
return (
<div className="flex flex-col gap-5">
{!isUploading && (

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}
/>

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

@ -21,9 +21,10 @@ export default function WorkspaceDropdownMenu({
folderId: number;
refetch: () => 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 = () => {
@ -40,6 +41,10 @@ export default function WorkspaceDropdownMenu({
refetch();
setIsOpenUploadZip(false);
};
const handleFileCount = (fileCount: number) => {
console.log(fileCount);
setFileCount(fileCount);
};
return (
<>
@ -71,9 +76,10 @@ export default function WorkspaceDropdownMenu({
>
<DialogTrigger asChild></DialogTrigger>
<DialogContent className="max-w-2xl">
<DialogHeader title="파일 업로드" />
<DialogHeader title={fileCount > 0 ? `파일 업로드 (${fileCount})` : '파일 업로드'} />
<ImageUploadFileForm
onClose={handleCloseUploadFile}
onFileCount={handleFileCount}
projectId={projectId}
folderId={folderId}
/>