Refactor: 필요없는 form 제거

frontend/src/components/AdminMemberManage/ProjectMemberManageForm.tsx

@@ -1,9 +1,4 @@
 import { useLocation } from 'react-router-dom';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { Form, FormControl, FormField, FormItem, FormMessage } from '../ui/form';
-import { Input } from '../ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
 import useUpdateProjectMemberPrivilegeQuery from '@/queries/projects/useUpdateProjectMemberPrivilegeQuery';
 import useRemoveProjectMemberQuery from '@/queries/projects/useRemoveProjectMemberQuery';
@@ -22,18 +17,6 @@ const roleToStr: { [key in Role]: string } = {
   NONE: '역할 없음',
 };
 
-const formSchema = z.object({
-  members: z.array(
-    z.object({
-      memberId: z.number(),
-      nickname: z.string().nonempty('닉네임을 입력하세요.'),
-      role: z.enum(roles as [Role, ...Role[]], { errorMap: () => ({ message: '역할을 선택해주세요.' }) }),
-    })
-  ),
-});
-
-export type ProjectMemberManageFormValues = z.infer<typeof formSchema>;
-
 interface ProjectMemberManageFormProps {
   workspaceMembers: Array<{ memberId: number; nickname: string }>;
 }
@@ -51,24 +34,6 @@ export default function ProjectMemberManageForm({ workspaceMembers }: ProjectMem
 
   const noRoleMembers = workspaceMembers.filter((wm) => !projectMembers.some((pm) => pm.memberId === wm.memberId));
 
-  const form = useForm<ProjectMemberManageFormValues>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      members: [
-        ...projectMembers.map((m) => ({
-          memberId: m.memberId,
-          nickname: m.nickname,
-          role: m.privilegeType as Role,
-        })),
-        ...noRoleMembers.map((m) => ({
-          memberId: m.memberId,
-          nickname: m.nickname,
-          role: 'NONE' as Role,
-        })),
-      ],
-    },
-  });
-
   const handleRoleChange = (memberId: number, role: Role) => {
     if (role === 'NONE') {
       removeMember({
@@ -89,42 +54,18 @@ export default function ProjectMemberManageForm({ workspaceMembers }: ProjectMem
   };
 
   return (
-    <Form {...form}>
     <div className="flex w-full flex-col gap-4">
-        {form.getValues('members').map((member, index) => (
+      {[...projectMembers, ...noRoleMembers].map((member) => (
         <div
           key={member.memberId}
           className="flex items-center gap-4"
         >
-            <FormField
-              name={`members.${index}.nickname`}
-              control={form.control}
-              render={({ field }) => (
-                <FormItem className="flex-1">
-                  <FormControl>
-                    <Input
-                      placeholder="닉네임을 입력하세요."
-                      {...field}
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
-
-            <FormField
-              name={`members.${index}.role`}
-              control={form.control}
-              render={({ field }) => (
-                <FormItem className="flex-1">
-                  <FormControl>
+          <span className="flex-1">{member.nickname}</span>
+          <div className="flex-1">
             <Select
-                      onValueChange={(value) => {
-                        field.onChange(value);
-                        handleRoleChange(member.memberId, value as Role);
-                      }}
-                      defaultValue={field.value}
-                      disabled={member.role === 'ADMIN'}
+              onValueChange={(value) => handleRoleChange(member.memberId, value as Role)}
+              defaultValue={projectMembers.find((m) => m.memberId === member.memberId)?.privilegeType || 'NONE'}
+              disabled={projectMembers.some((m) => m.memberId === member.memberId && m.privilegeType === 'ADMIN')}
             >
               <SelectTrigger>
                 <SelectValue placeholder="역할을 선택해주세요." />
@@ -140,14 +81,9 @@ export default function ProjectMemberManageForm({ workspaceMembers }: ProjectMem
                 ))}
               </SelectContent>
             </Select>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
+          </div>
         </div>
       ))}
     </div>
-    </Form>
   );
 }