Refactor: 통합 모달 기반으로 추가
This commit is contained in:
parent
c521739a84
commit
bd2232fd5f
@ -1,3 +1,4 @@
|
|||||||
|
import React from 'react';
|
||||||
import { Menu } from 'lucide-react';
|
import { Menu } from 'lucide-react';
|
||||||
import {
|
import {
|
||||||
DropdownMenu,
|
DropdownMenu,
|
||||||
@ -7,12 +8,12 @@ import {
|
|||||||
DropdownMenuTrigger,
|
DropdownMenuTrigger,
|
||||||
} from '../ui/dropdown-menu';
|
} from '../ui/dropdown-menu';
|
||||||
import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
|
import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
|
||||||
import React from 'react';
|
import ImageUploadForm from '../ImageUploadModal/ImageUploadForm';
|
||||||
import ImageUploadFileForm from '../ImageUploadFileModal/ImageUploadFileForm';
|
import ImageUploadPresignedForm from '../ImageUploadPresignedModal/ImageUploadPresignedForm';
|
||||||
import ImageUploadFolderFileForm from '../ImageUploadFolderFileModal/ImageUploadFolderFileForm';
|
import useUploadImageFileQuery from '@/queries/projects/useUploadImageFileQuery';
|
||||||
import ImageUploadFolderForm from '../ImageUploadFolderModal/ImageUploadFolderForm';
|
import useUploadImageFolderFileQuery from '@/queries/projects/useUploadImageFolderFileQuery';
|
||||||
import ImageUploadZipForm from '../ImageUploadZipModal/ImageUploadZipForm';
|
import useUploadImageZipQuery from '@/queries/projects/useUploadImageZipQuery';
|
||||||
import ImageUploadPresignedForm from '../ImageUploadPresignedModal/ImageUploadPresignedForm.tsx';
|
import useUploadImageFolderQuery from '@/queries/projects/useUploadImageFolderQuery';
|
||||||
|
|
||||||
export default function WorkspaceDropdownMenu({
|
export default function WorkspaceDropdownMenu({
|
||||||
projectId,
|
projectId,
|
||||||
@ -31,44 +32,30 @@ export default function WorkspaceDropdownMenu({
|
|||||||
const [isOpenUploadFolder, setIsOpenUploadFolder] = React.useState<boolean>(false);
|
const [isOpenUploadFolder, setIsOpenUploadFolder] = React.useState<boolean>(false);
|
||||||
const [isOpenUploadZip, setIsOpenUploadZip] = React.useState<boolean>(false);
|
const [isOpenUploadZip, setIsOpenUploadZip] = React.useState<boolean>(false);
|
||||||
|
|
||||||
const handleOpenUploadFile = () => setIsOpenUploadFile(true);
|
const uploadImageZipMutation = useUploadImageZipQuery();
|
||||||
|
const uploadImageFolderFileMutation = useUploadImageFolderFileQuery();
|
||||||
|
const uploadImageFileMutation = useUploadImageFileQuery();
|
||||||
|
const uploadImageFolderMutation = useUploadImageFolderQuery();
|
||||||
|
|
||||||
const handleCloseUploadFile = () => {
|
const handleOpenUploadFile = () => setIsOpenUploadFile(true);
|
||||||
setIsOpenUploadFile(false);
|
const handleCloseUploadFile = () => setIsOpenUploadFile(false);
|
||||||
};
|
const handleOpenUploadPresigned = () => setIsOpenUploadPresigned(true);
|
||||||
|
const handleCloseUploadPresigned = () => setIsOpenUploadPresigned(false);
|
||||||
|
const handleOpenUploadFolderFile = () => setIsOpenUploadFolderFile(true);
|
||||||
|
const handleCloseUploadFolderFile = () => setIsOpenUploadFolderFile(false);
|
||||||
|
const handleOpenUploadFolder = () => setIsOpenUploadFolder(true);
|
||||||
|
const handleCloseUploadFolder = () => setIsOpenUploadFolder(false);
|
||||||
|
const handleOpenUploadZip = () => setIsOpenUploadZip(true);
|
||||||
|
const handleCloseUploadZip = () => setIsOpenUploadZip(false);
|
||||||
|
|
||||||
const handleFileCount = (fileCount: number) => {
|
const handleFileCount = (fileCount: number) => {
|
||||||
setFileCount(fileCount);
|
setFileCount(fileCount);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleOpenUploadPresigned = () => setIsOpenUploadPresigned(true);
|
|
||||||
|
|
||||||
const handleCloseUploadPresigned = () => {
|
|
||||||
setIsOpenUploadPresigned(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handlePresignedCount = (fileCount: number) => {
|
const handlePresignedCount = (fileCount: number) => {
|
||||||
setPresignedCount(fileCount);
|
setPresignedCount(fileCount);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleOpenUploadFolderFile = () => setIsOpenUploadFolderFile(true);
|
|
||||||
|
|
||||||
const handleCloseUploadFolderFile = () => {
|
|
||||||
setIsOpenUploadFolderFile(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleOpenUploadFolder = () => setIsOpenUploadFolder(true);
|
|
||||||
|
|
||||||
const handleCloseUploadFolder = () => {
|
|
||||||
setIsOpenUploadFolder(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleOpenUploadZip = () => setIsOpenUploadZip(true);
|
|
||||||
|
|
||||||
const handleCloseUploadZip = () => {
|
|
||||||
setIsOpenUploadZip(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
@ -79,13 +66,7 @@ export default function WorkspaceDropdownMenu({
|
|||||||
/>
|
/>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent className="w-56">
|
<DropdownMenuContent className="w-56">
|
||||||
<DropdownMenuItem
|
<DropdownMenuItem onClick={() => console.log('프로젝트 이름 수정')}>프로젝트 이름 수정</DropdownMenuItem>
|
||||||
onClick={() => {
|
|
||||||
console.log('프로젝트 이름 수정');
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
프로젝트 이름 수정
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuSeparator />
|
<DropdownMenuSeparator />
|
||||||
<DropdownMenuItem onClick={handleOpenUploadFile}>파일 업로드</DropdownMenuItem>
|
<DropdownMenuItem onClick={handleOpenUploadFile}>파일 업로드</DropdownMenuItem>
|
||||||
<DropdownMenuItem onClick={handleOpenUploadPresigned}>파일 업로드 (PresignedUrl 이용)</DropdownMenuItem>
|
<DropdownMenuItem onClick={handleOpenUploadPresigned}>파일 업로드 (PresignedUrl 이용)</DropdownMenuItem>
|
||||||
@ -102,12 +83,16 @@ export default function WorkspaceDropdownMenu({
|
|||||||
<DialogTrigger asChild></DialogTrigger>
|
<DialogTrigger asChild></DialogTrigger>
|
||||||
<DialogContent className="max-w-2xl">
|
<DialogContent className="max-w-2xl">
|
||||||
<DialogHeader title={fileCount > 0 ? `파일 업로드 (${fileCount})` : '파일 업로드'} />
|
<DialogHeader title={fileCount > 0 ? `파일 업로드 (${fileCount})` : '파일 업로드'} />
|
||||||
<ImageUploadFileForm
|
<ImageUploadForm
|
||||||
onClose={handleCloseUploadFile}
|
onClose={handleCloseUploadFile}
|
||||||
onRefetch={onRefetch}
|
onRefetch={onRefetch}
|
||||||
onFileCount={handleFileCount}
|
onFileCount={handleFileCount}
|
||||||
projectId={projectId}
|
projectId={projectId}
|
||||||
folderId={folderId}
|
folderId={folderId}
|
||||||
|
uploadImageZipMutation={uploadImageZipMutation}
|
||||||
|
uploadImageFolderFileMutation={uploadImageFolderFileMutation}
|
||||||
|
uploadImageFileMutation={uploadImageFileMutation}
|
||||||
|
uploadImageFolderMutation={uploadImageFolderMutation}
|
||||||
/>
|
/>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
@ -138,11 +123,17 @@ export default function WorkspaceDropdownMenu({
|
|||||||
<DialogTrigger asChild></DialogTrigger>
|
<DialogTrigger asChild></DialogTrigger>
|
||||||
<DialogContent className="max-w-2xl">
|
<DialogContent className="max-w-2xl">
|
||||||
<DialogHeader title="폴더 업로드 (파일 업로드 API 이용)" />
|
<DialogHeader title="폴더 업로드 (파일 업로드 API 이용)" />
|
||||||
<ImageUploadFolderFileForm
|
<ImageUploadForm
|
||||||
onClose={handleCloseUploadFolderFile}
|
onClose={handleCloseUploadFolderFile}
|
||||||
onRefetch={onRefetch}
|
onRefetch={onRefetch}
|
||||||
|
onFileCount={handleFileCount}
|
||||||
projectId={projectId}
|
projectId={projectId}
|
||||||
folderId={folderId}
|
folderId={folderId}
|
||||||
|
isFolderUpload={true}
|
||||||
|
uploadImageZipMutation={uploadImageZipMutation}
|
||||||
|
uploadImageFolderFileMutation={uploadImageFolderFileMutation}
|
||||||
|
uploadImageFileMutation={uploadImageFileMutation}
|
||||||
|
uploadImageFolderMutation={uploadImageFolderMutation}
|
||||||
/>
|
/>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
@ -154,11 +145,17 @@ export default function WorkspaceDropdownMenu({
|
|||||||
<DialogTrigger asChild></DialogTrigger>
|
<DialogTrigger asChild></DialogTrigger>
|
||||||
<DialogContent className="max-w-2xl">
|
<DialogContent className="max-w-2xl">
|
||||||
<DialogHeader title="폴더 업로드 (백엔드 구현 필요)" />
|
<DialogHeader title="폴더 업로드 (백엔드 구현 필요)" />
|
||||||
<ImageUploadFolderForm
|
<ImageUploadForm
|
||||||
onClose={handleCloseUploadFolder}
|
onClose={handleCloseUploadFolder}
|
||||||
onRefetch={onRefetch}
|
onRefetch={onRefetch}
|
||||||
|
onFileCount={handleFileCount}
|
||||||
projectId={projectId}
|
projectId={projectId}
|
||||||
folderId={folderId}
|
folderId={folderId}
|
||||||
|
isFolderBackendUpload={true}
|
||||||
|
uploadImageZipMutation={uploadImageZipMutation}
|
||||||
|
uploadImageFolderFileMutation={uploadImageFolderFileMutation}
|
||||||
|
uploadImageFileMutation={uploadImageFileMutation}
|
||||||
|
uploadImageFolderMutation={uploadImageFolderMutation}
|
||||||
/>
|
/>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
@ -170,11 +167,17 @@ export default function WorkspaceDropdownMenu({
|
|||||||
<DialogTrigger asChild></DialogTrigger>
|
<DialogTrigger asChild></DialogTrigger>
|
||||||
<DialogContent className="max-w-2xl">
|
<DialogContent className="max-w-2xl">
|
||||||
<DialogHeader title="폴더 압축파일 업로드" />
|
<DialogHeader title="폴더 압축파일 업로드" />
|
||||||
<ImageUploadZipForm
|
<ImageUploadForm
|
||||||
onClose={handleCloseUploadZip}
|
onClose={handleCloseUploadZip}
|
||||||
onRefetch={onRefetch}
|
onRefetch={onRefetch}
|
||||||
|
onFileCount={handleFileCount}
|
||||||
projectId={projectId}
|
projectId={projectId}
|
||||||
folderId={folderId}
|
folderId={folderId}
|
||||||
|
isZipUpload={true}
|
||||||
|
uploadImageZipMutation={uploadImageZipMutation}
|
||||||
|
uploadImageFolderFileMutation={uploadImageFolderFileMutation}
|
||||||
|
uploadImageFileMutation={uploadImageFileMutation}
|
||||||
|
uploadImageFolderMutation={uploadImageFolderMutation}
|
||||||
/>
|
/>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
Loading…
Reference in New Issue
Block a user