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

Feat: Workspace 드롭다운 메뉴 컴포넌트 추가

Browse Source
This commit is contained in:
홍창기 2024-09-23 18:35:09 +09:00
parent 8f401a69a0
commit eef7325b7c
2 changed files with 94 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
frontend/src/components/WorkspaceDropdownMenu/index.tsx Normal file
View File

@ -0,0 +1,92 @@
import { Menu } from 'lucide-react';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '../ui/dropdown-menu';
import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom';
import ImageUploadFileForm from '../ImageUploadFileModal/ImageUploadFileForm';
import React from 'react';
import ImageUploadFolderForm from '../ImageUploadFolderModal/ImageUploadFolderForm';
import ImageUploadZipForm from '../ImageUploadZipModal/ImageUploadZipForm';
export default function WorkspaceDropdownMenu({ projectId, folderId }: { projectId: number; folderId: number }) {
const [isOpenUploadFile, setIsOpenUploadFile] = React.useState(false);
const [isOpenUploadFolder, setIsOpenUploadFolder] = React.useState(false);
const [isOpenUploadZip, setIsOpenUploadZip] = React.useState(false);
const handleOpenUploadFile = () => setIsOpenUploadFile(true);
const handleCloseUploadFile = () => setIsOpenUploadFile(false);
const handleOpenUploadFolder = () => setIsOpenUploadFolder(true);
const handleCloseUploadFolder = () => setIsOpenUploadFolder(false);
const handleOpenUploadZip = () => setIsOpenUploadZip(true);
const handleCloseUploadZip = () => setIsOpenUploadZip(false);
return (
<>
<DropdownMenu>
<DropdownMenuTrigger>
<Menu size={16} />
</DropdownMenuTrigger>
<DropdownMenuContent className="w-56">
<DropdownMenuItem
onClick={() => {
console.log('프로젝트 이름 수정');
}}
>
프로젝트 이름 수정
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={handleOpenUploadFile}>파일 업로드</DropdownMenuItem>
<DropdownMenuItem onClick={handleOpenUploadFolder}>폴더 업로드</DropdownMenuItem>
<DropdownMenuItem onClick={handleOpenUploadZip}>폴더 압축파일 업로드</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<Dialog
open={isOpenUploadFile}
onOpenChange={setIsOpenUploadFile}
>
<DialogTrigger asChild></DialogTrigger>
<DialogContent className="max-w-2xl">
<DialogHeader title="파일 업로드" />
<ImageUploadFileForm
onClose={handleCloseUploadFile}
projectId={projectId}
folderId={folderId}
/>
</DialogContent>
</Dialog>
<Dialog
open={isOpenUploadFolder}
onOpenChange={setIsOpenUploadFolder}
>
<DialogTrigger asChild></DialogTrigger>
<DialogContent className="max-w-2xl">
<DialogHeader title="폴더 업로드" />
<ImageUploadFolderForm
onClose={handleCloseUploadFolder}
projectId={projectId}
/>
</DialogContent>
</Dialog>
<Dialog
open={isOpenUploadZip}
onOpenChange={setIsOpenUploadZip}
>
<DialogTrigger asChild></DialogTrigger>
<DialogContent className="max-w-2xl">
<DialogHeader title="폴더 압축파일 업로드" />
<ImageUploadZipForm
onClose={handleCloseUploadZip}
projectId={projectId}
/>
</DialogContent>
</Dialog>
</>
);
}

8
frontend/src/pages/ImageFolderUploadTest.tsx
View File

@ -1,6 +1,4 @@
import ImageUploadFileModal from '@/components/ImageUploadFileModal';
import ImageUploadFolderModal from '@/components/ImageUploadFolderModal';
import ImageUploadZipModal from '@/components/ImageUploadZipModal';
import WorkspaceDropdownMenu from '@/components/WorkspaceDropdownMenu';
import { useParams } from 'react-router-dom';
export default function ImageFolderUploadTest() {
@ -9,12 +7,10 @@ export default function ImageFolderUploadTest() {
return (
<div className="min-h-screen w-full">
<ImageUploadFileModal
<WorkspaceDropdownMenu
projectId={projectId}
folderId={0}
/>
<ImageUploadFolderModal projectId={projectId} />
<ImageUploadZipModal projectId={projectId} />
</div>
);
}