Feat: 워크스페이스 이름 변경 기능 추가
This commit is contained in:
parent
c1673f6b22
commit
8e30f95eb4
@ -12,6 +12,8 @@ import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../ui/dialog
|
|||||||
import WorkSpaceCreateForm, { WorkSpaceCreateFormValues } from '../WorkSpaceCreateModal/WorkSpaceCreateForm';
|
import WorkSpaceCreateForm, { WorkSpaceCreateFormValues } from '../WorkSpaceCreateModal/WorkSpaceCreateForm';
|
||||||
import ProjectCreateForm, { ProjectCreateFormValues } from '../ProjectCreateModal/ProjectCreateForm';
|
import ProjectCreateForm, { ProjectCreateFormValues } from '../ProjectCreateModal/ProjectCreateForm';
|
||||||
import useCreateProjectQuery from '@/queries/projects/useCreateProjectQuery';
|
import useCreateProjectQuery from '@/queries/projects/useCreateProjectQuery';
|
||||||
|
import WorkspaceUpdateForm, { WorkspaceUpdateFormValues } from '../WorkspaceUpdateModal/WorkspaceUpdateForm';
|
||||||
|
import useUpdateWorkspaceQuery from '@/queries/workspaces/useUpdateWorkspaceQuery';
|
||||||
|
|
||||||
export default function WorkspaceBrowseLayout() {
|
export default function WorkspaceBrowseLayout() {
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
@ -30,10 +32,13 @@ export default function WorkspaceBrowseLayout() {
|
|||||||
}, [memberId, navigate]);
|
}, [memberId, navigate]);
|
||||||
|
|
||||||
const createWorkspace = useCreateWorkspaceQuery();
|
const createWorkspace = useCreateWorkspaceQuery();
|
||||||
|
const updateWorkspace = useUpdateWorkspaceQuery();
|
||||||
const createProject = useCreateProjectQuery();
|
const createProject = useCreateProjectQuery();
|
||||||
const { data: workspacesResponse } = useWorkspaceListQuery(memberId ?? 0);
|
|
||||||
|
const { data: workspacesResponse, refetch } = useWorkspaceListQuery(memberId ?? 0);
|
||||||
const workspaces = workspacesResponse?.workspaceResponses ?? [];
|
const workspaces = workspacesResponse?.workspaceResponses ?? [];
|
||||||
const activeWorkspaceId: number = Number(location.pathname.split('/')[2] || '-1');
|
const activeWorkspaceId: number = Number(location.pathname.split('/')[2] || '-1');
|
||||||
|
const activeWorkspace = workspaces.filter((workspace) => workspace.id === activeWorkspaceId)[0] ?? null;
|
||||||
|
|
||||||
const handleCreateWorkspace = (values: WorkSpaceCreateFormValues) => {
|
const handleCreateWorkspace = (values: WorkSpaceCreateFormValues) => {
|
||||||
const data: WorkspaceRequest = {
|
const data: WorkspaceRequest = {
|
||||||
@ -49,6 +54,22 @@ export default function WorkspaceBrowseLayout() {
|
|||||||
setIsOpenWorkspaceCreate(false);
|
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 handleCreateProject = (values: ProjectCreateFormValues) => {
|
||||||
const data: ProjectRequest = {
|
const data: ProjectRequest = {
|
||||||
title: values.projectName,
|
title: values.projectName,
|
||||||
@ -65,6 +86,10 @@ export default function WorkspaceBrowseLayout() {
|
|||||||
setIsOpenProjectCreate(false);
|
setIsOpenProjectCreate(false);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
refetch();
|
||||||
|
}, [isOpenWorkspaceUpdate, refetch]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Header className="fixed left-0 top-0 w-full" />
|
<Header className="fixed left-0 top-0 w-full" />
|
||||||
@ -154,7 +179,10 @@ export default function WorkspaceBrowseLayout() {
|
|||||||
<DialogTrigger asChild></DialogTrigger>
|
<DialogTrigger asChild></DialogTrigger>
|
||||||
<DialogContent>
|
<DialogContent>
|
||||||
<DialogHeader title="워크스페이스 이름 변경" />
|
<DialogHeader title="워크스페이스 이름 변경" />
|
||||||
<WorkSpaceCreateForm onSubmit={() => console.log('hello')} />
|
<WorkspaceUpdateForm
|
||||||
|
workspace={activeWorkspace}
|
||||||
|
onSubmit={handleUpdateWorkspace}
|
||||||
|
/>
|
||||||
</DialogContent>
|
</DialogContent>
|
||||||
</Dialog>
|
</Dialog>
|
||||||
|
|
||||||
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
46
frontend/src/components/WorkspaceUpdateModal/index.tsx
Normal file
46
frontend/src/components/WorkspaceUpdateModal/index.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user