diff --git a/frontend/src/components/WorkspaceBrowseLayout/index.tsx b/frontend/src/components/WorkspaceBrowseLayout/index.tsx index a5dfa61..fb800fa 100644 --- a/frontend/src/components/WorkspaceBrowseLayout/index.tsx +++ b/frontend/src/components/WorkspaceBrowseLayout/index.tsx @@ -12,6 +12,8 @@ import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialog import WorkSpaceCreateForm, { WorkSpaceCreateFormValues } from '../WorkSpaceCreateModal/WorkSpaceCreateForm'; import ProjectCreateForm, { ProjectCreateFormValues } from '../ProjectCreateModal/ProjectCreateForm'; import useCreateProjectQuery from '@/queries/projects/useCreateProjectQuery'; +import WorkspaceUpdateForm, { WorkspaceUpdateFormValues } from '../WorkspaceUpdateModal/WorkspaceUpdateForm'; +import useUpdateWorkspaceQuery from '@/queries/workspaces/useUpdateWorkspaceQuery'; export default function WorkspaceBrowseLayout() { const location = useLocation(); @@ -30,10 +32,13 @@ export default function WorkspaceBrowseLayout() { }, [memberId, navigate]); const createWorkspace = useCreateWorkspaceQuery(); + const updateWorkspace = useUpdateWorkspaceQuery(); const createProject = useCreateProjectQuery(); - const { data: workspacesResponse } = useWorkspaceListQuery(memberId ?? 0); + + const { data: workspacesResponse, refetch } = useWorkspaceListQuery(memberId ?? 0); const workspaces = workspacesResponse?.workspaceResponses ?? []; const activeWorkspaceId: number = Number(location.pathname.split('/')[2] || '-1'); + const activeWorkspace = workspaces.filter((workspace) => workspace.id === activeWorkspaceId)[0] ?? null; const handleCreateWorkspace = (values: WorkSpaceCreateFormValues) => { const data: WorkspaceRequest = { @@ -49,6 +54,22 @@ export default function WorkspaceBrowseLayout() { setIsOpenWorkspaceCreate(false); }; + const handleUpdateWorkspace = (values: WorkspaceUpdateFormValues) => { + const data: WorkspaceRequest = { + title: values.workspaceName, + content: values.workspaceDescription || '', + }; + + updateWorkspace.mutate({ + workspaceId: activeWorkspaceId, + memberId, + data, + }); + + setIsOpenWorkspaceUpdate(false); + refetch(); + }; + const handleCreateProject = (values: ProjectCreateFormValues) => { const data: ProjectRequest = { title: values.projectName, @@ -65,6 +86,10 @@ export default function WorkspaceBrowseLayout() { setIsOpenProjectCreate(false); }; + useEffect(() => { + refetch(); + }, [isOpenWorkspaceUpdate, refetch]); + return ( <>
@@ -154,7 +179,10 @@ export default function WorkspaceBrowseLayout() { - console.log('hello')} /> + diff --git a/frontend/src/components/WorkspaceUpdateModal/WorkspaceUpdateForm.tsx b/frontend/src/components/WorkspaceUpdateModal/WorkspaceUpdateForm.tsx new file mode 100644 index 0000000..4a3c59c --- /dev/null +++ b/frontend/src/components/WorkspaceUpdateModal/WorkspaceUpdateForm.tsx @@ -0,0 +1,88 @@ +import { zodResolver } from '@hookform/resolvers/zod'; +import { useForm } from 'react-hook-form'; +import { z } from 'zod'; +import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form'; +import { Input } from '../ui/input'; +import { Button } from '../ui/button'; +import { WorkspaceResponse } from '@/types'; + +const formSchema = z.object({ + workspaceName: z + .string() + .min(1, { message: '이름을 입력해주세요.' }) + .max(50, { message: '이름은 50자 이내여야 합니다.' }), + workspaceDescription: z + .string() + .min(1, { message: '설명을 입력해주세요.' }) + .max(200, { message: '설명은 200자 이내여야 합니다.' }), +}); + +export type WorkspaceUpdateFormValues = z.infer; + +interface WorkspaceUpdateFormProps { + workspace: WorkspaceResponse; + onSubmit: (data: WorkspaceUpdateFormValues) => void; +} + +export default function WorkspaceUpdateForm({ workspace, onSubmit }: WorkspaceUpdateFormProps) { + const defaultValues: Partial = { + workspaceName: workspace.title, + workspaceDescription: workspace.content, + }; + + const form = useForm({ + resolver: zodResolver(formSchema), + defaultValues, + }); + + return ( +
+ + ( + + 워크스페이스 이름 + + + + + + )} + /> + ( + + 워크스페이스 설명 + + + + + + )} + /> + + + + ); +} diff --git a/frontend/src/components/WorkspaceUpdateModal/index.tsx b/frontend/src/components/WorkspaceUpdateModal/index.tsx new file mode 100644 index 0000000..17a7e07 --- /dev/null +++ b/frontend/src/components/WorkspaceUpdateModal/index.tsx @@ -0,0 +1,46 @@ +import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialogCustom'; +import { Plus } from 'lucide-react'; +import { WorkspaceRequest, WorkspaceResponse } from '@/types'; +import { useState } from 'react'; +import WorkspaceUpdateForm, { WorkspaceUpdateFormValues } from './WorkspaceUpdateForm'; + +interface WorkspaceUpdateModalProps { + workspace: WorkspaceResponse; + onSubmit: (data: WorkspaceRequest) => void; +} + +export default function WorkspaceUpdateModal({ workspace, onSubmit }: WorkspaceUpdateModalProps) { + const [isOpen, setIsOpen] = useState(false); + + const handleFormSubmit = (data: WorkspaceUpdateFormValues) => { + const formattedData: WorkspaceRequest = { + title: data.workspaceName, + content: data.workspaceDescription || '', + }; + onSubmit(formattedData); + setIsOpen(false); + }; + + return ( + + + + + + + + + + ); +}