feat: [FN-215] 카드셋 수정 폼에 관리자 선택 기능 추가

Author: bebusl

src/features/cardset/components/cardset-update-dialog.tsx

@@ -67,6 +67,7 @@ const CardsetUpdateDialog = ({
       hashtag: form.hashtag?.map((tag) => tag.name) || [],
       category: form.category,
       image: form.imageRefId ? String(form.imageRefId) : undefined,
+      managers: form.managers?.length ? form.managers : undefined,
     };
 
     mutate({ groupId, cardsetId, data });
@@ -81,6 +82,7 @@ const CardsetUpdateDialog = ({
       ? cardset.hashtag.split(",").map((tag) => ({ name: tag.trim() }))
       : [],
     imageRefId: cardset.imageRefId,
+    managers: cardset.managers ?? [],
   };
 
   return (
@@ -91,6 +93,7 @@ const CardsetUpdateDialog = ({
           <DialogTitle>카드셋 수정</DialogTitle>
         </DialogHeader>
         <CardsetUpdateForm
+          groupId={groupId}
           formId={FORM_ID}
           onSubmit={handleSubmit}
           defaultValues={defaultValues}

src/features/cardset/components/cardset-update-form.tsx

@@ -13,34 +13,54 @@ import {
 import { Input } from "@/shared/components/input";
 import { Label } from "@/shared/components/label";
 import { uploadImage } from "@/shared/lib/upload-image";
+import { useGroupMembers } from "@/domain/members/hooks/use-group-members";
+import { MemberSelectDialog } from "@/domain/members/components/member-select-dialog";
+import type { GroupMemberInfo } from "@/shared/apis";
 
-import { X } from "lucide-react";
+import { UserPlus, X } from "lucide-react";
+import { useState } from "react";
 import type { ChangeEvent } from "react";
 import { useController, useFieldArray, useForm } from "react-hook-form";
 
+const ROLE_LABEL_MAP: Record<GroupMemberInfo["role"], string> = {
+  OWNER: "소유자",
+  HEAD_MANAGER: "총괄 매니저",
+  MANAGER: "매니저",
+  STAFF: "스태프",
+  MEMBER: "일반 회원",
+};
+
 export type CardsetUpdateFormField = {
   name: string;
   publicVisible?: boolean;
   category: GroupCategory;
   hashtag: { name: string }[];
   imageRefId?: number;
+  managers: number[];
 };
 
 type Props = {
+  groupId: number;
   onSubmit: (form: CardsetUpdateFormField) => void;
   formId?: string;
   defaultValues?: Partial<CardsetUpdateFormField>;
 };
 
 const CardsetUpdateForm = ({
+  groupId,
   onSubmit,
   formId = "cardset-update-form",
   defaultValues,
 }: Props) => {
+  const [managerDialogOpen, setManagerDialogOpen] = useState(false);
+
+  const { data: members = [] } = useGroupMembers(groupId);
+
   const { control, formState, register, setValue, handleSubmit } =
     useForm<CardsetUpdateFormField>({
       defaultValues: {
         hashtag: [],
+        managers: [],
         ...defaultValues,
       },
     });
@@ -60,11 +80,33 @@ const CardsetUpdateForm = ({
     control,
   });
 
+  const { field: managersField } = useController({
+    name: "managers",
+    control,
+  });
+
   const { fields, append, remove } = useFieldArray<CardsetUpdateFormField>({
     name: "hashtag",
     control,
   });
 
+  const selectedManagerIds: number[] = managersField.value ?? [];
+  const selectedManagers = members.filter((m) =>
+    selectedManagerIds.includes(m.id)
+  );
+  const availableManagers = members
+    .filter((m) => !selectedManagerIds.includes(m.id))
+    .map((m) => ({ ...m, subtitle: ROLE_LABEL_MAP[m.role] }));
+
+  const addManager = (member: GroupMemberInfo) => {
+    managersField.onChange([...selectedManagerIds, member.id]);
+    setManagerDialogOpen(false);
+  };
+
+  const removeManager = (id: number) => {
+    managersField.onChange(selectedManagerIds.filter((mId) => mId !== id));
+  };
+
   const handleChangeImage = async (e: ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
 
@@ -157,6 +199,56 @@ const CardsetUpdateForm = ({
           </Button>
         </div>
       </div>
+
+      <div>
+        <Label className="mb-1">카드셋 관리자</Label>
+        <Description>관리자만 카드셋을 수정할 수 있습니다.</Description>
+        {selectedManagers.length > 0 && (
+          <div className="flex flex-wrap gap-2 mb-2">
+            {selectedManagers.map((m) => (
+              <div
+                key={m.id}
+                className="flex items-center gap-1.5 bg-accent rounded-full pl-1.5 pr-2 py-1 text-sm"
+              >
+                <img
+                  src={
+                    m.profile ||
+                    `https://api.dicebear.com/7.x/avataaars/svg?seed=${m.name}`
+                  }
+                  alt={m.name}
+                  className="size-5 rounded-full object-cover"
+                />
+                <span>{m.name}</span>
+                <button
+                  type="button"
+                  onClick={() => removeManager(m.id)}
+                  className="text-muted-foreground hover:text-foreground transition-colors"
+                >
+                  <X className="size-3" />
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={() => setManagerDialogOpen(true)}
+        >
+          <UserPlus className="size-4 mr-1.5" />
+          관리자 추가
+        </Button>
+      </div>
+
+      <MemberSelectDialog
+        open={managerDialogOpen}
+        onOpenChange={setManagerDialogOpen}
+        members={availableManagers}
+        onSelect={addManager}
+        title="카드셋 관리자 추가"
+        description="카드셋을 관리할 멤버를 선택하세요."
+      />
     </form>
   );
 };