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,65 +54,36 @@ export default function ProjectMemberManageForm({ workspaceMembers }: ProjectMem
   };
 
   return (
-    <Form {...form}>
+    <div className="flex w-full flex-col gap-4">
-      <div className="flex w-full flex-col gap-4">
+      {[...projectMembers, ...noRoleMembers].map((member) => (
-        {form.getValues('members').map((member, index) => (
+        <div
-          <div
+          key={member.memberId}
-            key={member.memberId}
+          className="flex items-center gap-4"
-            className="flex items-center gap-4"
+        >
-          >
+          <span className="flex-1">{member.nickname}</span>
-            <FormField
+          <div className="flex-1">
-              name={`members.${index}.nickname`}
+            <Select
-              control={form.control}
+              onValueChange={(value) => handleRoleChange(member.memberId, value as Role)}
-              render={({ field }) => (
+              defaultValue={projectMembers.find((m) => m.memberId === member.memberId)?.privilegeType || 'NONE'}
-                <FormItem className="flex-1">
+              disabled={projectMembers.some((m) => m.memberId === member.memberId && m.privilegeType === 'ADMIN')}
-                  <FormControl>
+            >
-                    <Input
+              <SelectTrigger>
-                      placeholder="닉네임을 입력하세요."
+                <SelectValue placeholder="역할을 선택해주세요." />
-                      {...field}
+              </SelectTrigger>
-                    />
+              <SelectContent>
-                  </FormControl>
+                {roles.map((role) => (
-                  <FormMessage />
+                  <SelectItem
-                </FormItem>
+                    key={role}
-              )}
+                    value={role}
-            />
+                  >
-
+                    {roleToStr[role]}
-            <FormField
+                  </SelectItem>
-              name={`members.${index}.role`}
+                ))}
-              control={form.control}
+              </SelectContent>
-              render={({ field }) => (
+            </Select>
-                <FormItem className="flex-1">
-                  <FormControl>
-                    <Select
-                      onValueChange={(value) => {
-                        field.onChange(value);
-                        handleRoleChange(member.memberId, value as Role);
-                      }}
-                      defaultValue={field.value}
-                      disabled={member.role === 'ADMIN'}
-                    >
-                      <SelectTrigger>
-                        <SelectValue placeholder="역할을 선택해주세요." />
-                      </SelectTrigger>
-                      <SelectContent>
-                        {roles.map((role) => (
-                          <SelectItem
-                            key={role}
-                            value={role}
-                          >
-                            {roleToStr[role]}
-                          </SelectItem>
-                        ))}
-                      </SelectContent>
-                    </Select>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              )}
-            />
           </div>
-        ))}
+        </div>
-      </div>
+      ))}
-    </Form>
+    </div>
   );
 }