Feat: 파일 업로드 시 프로젝트 폴더 구조 갱신하도록 변경

This commit is contained in:
jhynsoo 2024-09-24 11:13:18 +09:00
parent c65cb1204e
commit 6faed26f92
3 changed files with 25 additions and 6 deletions

View File

@ -12,17 +12,34 @@ import React from 'react';
import ImageUploadFolderForm from '../ImageUploadFolderModal/ImageUploadFolderForm'; import ImageUploadFolderForm from '../ImageUploadFolderModal/ImageUploadFolderForm';
import ImageUploadZipForm from '../ImageUploadZipModal/ImageUploadZipForm'; import ImageUploadZipForm from '../ImageUploadZipModal/ImageUploadZipForm';
export default function WorkspaceDropdownMenu({ projectId, folderId }: { projectId: number; folderId: number }) { export default function WorkspaceDropdownMenu({
projectId,
folderId,
refetch,
}: {
projectId: number;
folderId: number;
refetch: () => void;
}) {
const [isOpenUploadFile, setIsOpenUploadFile] = React.useState(false); const [isOpenUploadFile, setIsOpenUploadFile] = React.useState(false);
const [isOpenUploadFolder, setIsOpenUploadFolder] = React.useState(false); const [isOpenUploadFolder, setIsOpenUploadFolder] = React.useState(false);
const [isOpenUploadZip, setIsOpenUploadZip] = React.useState(false); const [isOpenUploadZip, setIsOpenUploadZip] = React.useState(false);
const handleOpenUploadFile = () => setIsOpenUploadFile(true); const handleOpenUploadFile = () => setIsOpenUploadFile(true);
const handleCloseUploadFile = () => setIsOpenUploadFile(false); const handleCloseUploadFile = () => {
refetch();
setIsOpenUploadFile(false);
};
const handleOpenUploadFolder = () => setIsOpenUploadFolder(true); const handleOpenUploadFolder = () => setIsOpenUploadFolder(true);
const handleCloseUploadFolder = () => setIsOpenUploadFolder(false); const handleCloseUploadFolder = () => {
refetch();
setIsOpenUploadFolder(false);
};
const handleOpenUploadZip = () => setIsOpenUploadZip(true); const handleOpenUploadZip = () => setIsOpenUploadZip(true);
const handleCloseUploadZip = () => setIsOpenUploadZip(false); const handleCloseUploadZip = () => {
refetch();
setIsOpenUploadZip(false);
};
return ( return (
<> <>

View File

@ -11,7 +11,7 @@ import WorkspaceDropdownMenu from '../WorkspaceDropdownMenu';
export default function ProjectStructure({ project }: { project: Project }) { export default function ProjectStructure({ project }: { project: Project }) {
const setProject = useCanvasStore((state) => state.setProject); const setProject = useCanvasStore((state) => state.setProject);
const image = useCanvasStore((state) => state.image); const image = useCanvasStore((state) => state.image);
const { data: folderData } = useFolderQuery(project.id.toString(), 0); const { data: folderData, refetch } = useFolderQuery(project.id.toString(), 0);
useEffect(() => { useEffect(() => {
setProject(project); setProject(project);
@ -27,6 +27,7 @@ export default function ProjectStructure({ project }: { project: Project }) {
<WorkspaceDropdownMenu <WorkspaceDropdownMenu
projectId={project.id} projectId={project.id}
folderId={0} folderId={0}
refetch={refetch}
/> />
</header> </header>
{folderData.children.length === 0 && folderData.images.length === 0 ? ( {folderData.children.length === 0 && folderData.images.length === 0 ? (

View File

@ -5,6 +5,7 @@ import { Project } from '@/types';
import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '../ui/select'; import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '../ui/select';
import useCanvasStore from '@/stores/useCanvasStore'; import useCanvasStore from '@/stores/useCanvasStore';
import { webPath } from '@/router'; import { webPath } from '@/router';
import { Suspense } from 'react';
export default function WorkspaceSidebar({ workspaceName, projects }: { workspaceName: string; projects: Project[] }) { export default function WorkspaceSidebar({ workspaceName, projects }: { workspaceName: string; projects: Project[] }) {
const { projectId: selectedProjectId } = useParams<{ projectId: string }>(); const { projectId: selectedProjectId } = useParams<{ projectId: string }>();
@ -48,7 +49,7 @@ export default function WorkspaceSidebar({ workspaceName, projects }: { workspac
</SelectContent> </SelectContent>
</Select> </Select>
</div> </div>
{selectedProject && <ProjectStructure project={selectedProject} />} <Suspense fallback={<div></div>}>{selectedProject && <ProjectStructure project={selectedProject} />}</Suspense>
</ResizablePanel> </ResizablePanel>
<ResizableHandle className="bg-gray-300" /> <ResizableHandle className="bg-gray-300" />
</> </>