Feat: 워크스페이스 이름 변경 기능 추가

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 (
     <>
       <Header className="fixed left-0 top-0 w-full" />
@@ -154,7 +179,10 @@ export default function WorkspaceBrowseLayout() {
         <DialogTrigger asChild></DialogTrigger>
         <DialogContent>
           <DialogHeader title="워크스페이스 이름 변경" />
-          <WorkSpaceCreateForm onSubmit={() => console.log('hello')} />
+          <WorkspaceUpdateForm
+            workspace={activeWorkspace}
+            onSubmit={handleUpdateWorkspace}
+          />
         </DialogContent>
       </Dialog>
 

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<typeof formSchema>;
+
+interface WorkspaceUpdateFormProps {
+  workspace: WorkspaceResponse;
+  onSubmit: (data: WorkspaceUpdateFormValues) => void;
+}
+
+export default function WorkspaceUpdateForm({ workspace, onSubmit }: WorkspaceUpdateFormProps) {
+  const defaultValues: Partial<WorkspaceUpdateFormValues> = {
+    workspaceName: workspace.title,
+    workspaceDescription: workspace.content,
+  };
+
+  const form = useForm<WorkspaceUpdateFormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues,
+  });
+
+  return (
+    <Form {...form}>
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className="flex flex-col gap-5"
+      >
+        <FormField
+          name="workspaceName"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="body-strong">워크스페이스 이름</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder="이름을 입력해주세요."
+                  maxLength={50}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <FormField
+          name="workspaceDescription"
+          control={form.control}
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel className="body-strong">워크스페이스 설명</FormLabel>
+              <FormControl>
+                <Input
+                  placeholder="워크스페이스 설명을 입력해주세요."
+                  maxLength={200}
+                  {...field}
+                />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button
+          type="submit"
+          variant="blue"
+          disabled={!form.formState.isValid}
+        >
+          워크스페이스 이름 변경하기
+        </Button>
+      </form>
+    </Form>
+  );
+}

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 (
+    <Dialog
+      open={isOpen}
+      onOpenChange={setIsOpen}
+    >
+      <DialogTrigger asChild>
+        <button
+          className="flex items-center justify-center p-2"
+          onClick={() => setIsOpen(true)}
+        >
+          <Plus size={20} />
+        </button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader title="워크스페이스 이름 변경" />
+        <WorkspaceUpdateForm
+          workspace={workspace}
+          onSubmit={handleFormSubmit}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}