Feat: 멤버관련 작업 중

2024-09-20 07:32:47 +09:00 · 2024-09-20 07:32:47 +09:00 · cd4427fd74
commit cd4427fd74
parent 6ac6ddf987
5 changed files with 199 additions and 27 deletions
--- a/frontend/src/components/AdminMemberManage/ProjectMemberManageForm.tsx
+++ b/frontend/src/components/AdminMemberManage/ProjectMemberManageForm.tsx
@ -29,17 +29,17 @@ const formSchema = z.object({
  ),
 });

-export type MemberManageFormValues = z.infer<typeof formSchema>;
+export type ProjectMemberManageFormValues = z.infer<typeof formSchema>;

-interface AdminMemberManageFormProps {
+interface ProjectMemberManageFormProps {
  members: ProjectMemberResponse[];
 }

-export default function AdminMemberManageForm({ members }: AdminMemberManageFormProps) {
+export default function ProjectMemberManageForm({ members }: ProjectMemberManageFormProps) {
  const { projectId } = useParams<{ projectId: string }>();
  const { mutate: updatePrivilege } = useUpdateProjectMemberPrivilegeQuery();

-  const form = useForm<MemberManageFormValues>({
+  const form = useForm<ProjectMemberManageFormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      members: members.map((m) => ({
--- a/frontend/src/components/AdminMemberManage/WorkspaceMemberManageForm.tsx
+++ b/frontend/src/components/AdminMemberManage/WorkspaceMemberManageForm.tsx
@ -0,0 +1,125 @@
+import { useParams } 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 { WorkspaceMemberResponse } from '@/types';
+import useUpdateProjectMemberPrivilegeQuery from '@/queries/projects/useUpdateProjectMemberPrivilegeQuery';
+
+type Role = 'ADMIN' | 'MANAGER' | 'EDITOR' | 'VIEWER';
+
+const roles: Role[] = ['ADMIN', 'MANAGER', 'EDITOR', 'VIEWER'];
+
+const roleToStr: { [key in Role]: string } = {
+  ADMIN: '관리자',
+  MANAGER: '매니저',
+  EDITOR: '에디터',
+  VIEWER: '뷰어',
+};
+
+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 WorkspaceMemberManageFormValues = z.infer<typeof formSchema>;
+
+interface WorkspaceMemberManageFormProps {
+  members: WorkspaceMemberResponse[];
+}
+
+export default function WorkspaceMemberManageForm({ members }: WorkspaceMemberManageFormProps) {
+  const { workspaceId } = useParams<{ workspaceId: string }>();
+  const { mutate: updatePrivilege } = useUpdateProjectMemberPrivilegeQuery();
+
+  const form = useForm<WorkspaceMemberManageFormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      members: members.map((m) => ({
+        memberId: m.memberId,
+        nickname: m.nickname,
+        role: m.privilegeType as Role,
+      })),
+    },
+  });
+
+  const handleRoleChange = (memberId: number, role: Role) => {
+    updatePrivilege({
+      workspaceId: Number(workspaceId),
+      memberId,
+      privilegeData: {
+        memberId,
+        privilegeType: role,
+      },
+    });
+  };
+
+  return (
+    <Form {...form}>
+      <div className="flex w-full flex-col gap-4">
+        {members.map((member, index) => (
+          <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>
+                    <Select
+                      onValueChange={(value) => {
+                        field.onChange(value);
+                        handleRoleChange(member.memberId, value as Role);
+                      }}
+                      defaultValue={field.value}
+                    >
+                      <SelectTrigger>
+                        <SelectValue placeholder="역할을 선택해주세요." />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {roles.map((role) => (
+                          <SelectItem
+                            key={role}
+                            value={role}
+                          >
+                            {roleToStr[role]}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+        ))}
+      </div>
+    </Form>
+  );
+}
--- a/frontend/src/components/AdminMemberManage/index.tsx
+++ b/frontend/src/components/AdminMemberManage/index.tsx
@ -1,34 +1,44 @@
 import { useState } from 'react';
-import AdminMemberManageForm from './AdminMemberManageForm';
 import { useParams } from 'react-router-dom';
-import useProjectMembersQuery from '@/queries/projects/useProjectMembersQuery';
 import useAuthStore from '@/stores/useAuthStore';
+import useAddWorkspaceMemberQuery from '@/queries/workspaces/useAddWorkspaceMemberQuery';
 import useAddProjectMemberQuery from '@/queries/projects/useAddProjectMemberQuery';
+import useWorkspaceMembersQuery from '@/queries/workspaces/useWorkspaceMembersQuery';
+import useProjectMembersQuery from '@/queries/projects/useProjectMembersQuery';
 import MemberAddModal from '../MemberAddModal';
 import { MemberAddFormValues } from '../MemberAddModal/MemberAddForm';
+import WorkspaceMemberManageForm from './WorkspaceMemberManageForm';
+import ProjectMemberManageForm from './ProjectMemberManageForm';

 export default function AdminMemberManage() {
-  const { projectId } = useParams<{ workspaceId: string; projectId: string }>();
+  const { workspaceId, projectId } = useParams<{ workspaceId?: string; projectId?: string }>();
  const profile = useAuthStore((state) => state.profile);
  const memberId = profile?.id || 0;

-  const { data: members = [] } = useProjectMembersQuery(Number(projectId), memberId);
-  const addProjectMember = useAddProjectMemberQuery();
-
  const [, setInviteModalOpen] = useState(false);

  const handleMemberInvite = (data: MemberAddFormValues) => {
-    addProjectMember.mutate({
-      projectId: Number(projectId),
+    if (workspaceId) {
+      const addWorkspaceMember = useAddWorkspaceMemberQuery();
+      addWorkspaceMember.mutate({
+        workspaceId: Number(workspaceId),
        memberId: memberId,
        newMember: {
-        // Todo : 멤버 id로 수정하는 로직 수정해야한다.
-        // memberId: data.email,
          memberId: 0,
          privilegeType: data.role,
        },
      });
-    console.log('Invited:', data);
+    } else if (projectId) {
+      const addProjectMember = useAddProjectMemberQuery();
+      addProjectMember.mutate({
+        projectId: Number(projectId),
+        memberId: memberId,
+        newMember: {
+          memberId: 0,
+          privilegeType: data.role,
+        },
+      });
+    }
    setInviteModalOpen(false);
  };

@ -39,7 +49,10 @@ export default function AdminMemberManage() {
        <MemberAddModal onSubmit={handleMemberInvite} />
      </header>

-      <AdminMemberManageForm members={members} />
+      {workspaceId && <WorkspaceMemberManageForm members={useWorkspaceMembersQuery(Number(workspaceId)).data || []} />}
+      {projectId && (
+        <ProjectMemberManageForm members={useProjectMembersQuery(Number(projectId), memberId).data || []} />
+      )}
    </div>
  );
 }
--- a/frontend/src/components/MemberAddModal/MemberAddForm.tsx
+++ b/frontend/src/components/MemberAddModal/MemberAddForm.tsx
@ -1,10 +1,12 @@
+import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '../ui/form';
-import { Input } from '../ui/input';
 import { Button } from '../ui/button';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../ui/select';
+import SearchInput from '../ui/search-input';
+import useSearchMembersByEmailQuery from '@/queries/members/useSearchMembersByEmailQuery';

 type PrivilegeType = 'ADMIN' | 'MANAGER' | 'EDITOR' | 'VIEWER';

@ -43,6 +45,9 @@ export default function MemberAddForm({ onSubmit }: { onSubmit: (data: MemberAdd
    defaultValues,
  });

+  const [keyword, setKeyword] = useState('');
+  const { data: members } = useSearchMembersByEmailQuery(keyword);
+
  return (
    <Form {...form}>
      <form
@ -56,16 +61,39 @@ export default function MemberAddForm({ onSubmit }: { onSubmit: (data: MemberAdd
            <FormItem>
              <FormLabel className="body-strong">이메일</FormLabel>
              <FormControl>
-                <Input
-                  placeholder="초대할 멤버의 이메일 주소를 입력해주세요."
-                  maxLength={40}
-                  {...field}
+                <SearchInput
+                  placeholder="초대할 멤버의 이메일을 검색하세요."
+                  value={field.value}
+                  onChange={(e) => {
+                    field.onChange(e);
+                    setKeyword(e.target.value);
+                  }}
                />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
+        {members && (
+          <ul className="mt-2">
+            {members.map((member) => (
+              <li
+                key={member.id}
+                className="py-1"
+              >
+                <img
+                  src={member.profileImage}
+                  alt={member.nickname}
+                  className="h-8 w-8 rounded-full"
+                />
+                <span className="ml-2">
+                  {member.nickname} ({member.email})
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+
        <FormField
          name="role"
          control={form.control}
--- a/frontend/src/router/index.tsx
+++ b/frontend/src/router/index.tsx
@ -13,6 +13,8 @@ import { Suspense } from 'react';
 import WorkspaceBrowseIndex from '@/pages/WorkspaceBrowseIndex';
 import AdminIndex from '@/pages/AdminIndex';
 import LabelCanvas from '@/pages/LabelCanvas';
+import ReviewDetail from '@/components/ReviewDetail';
+
 export const webPath = {
  home: () => '/',
  browse: () => '/browse',
@ -86,6 +88,10 @@ const router = createBrowserRouter([
        path: 'reviews',
        element: <ReviewList />,
      },
+      {
+        path: 'reviews/:projectId/:reviewId',
+        element: <ReviewDetail />,
+      },
      {
        path: 'members',
        element: <AdminMemberManage />,