[Fix] members 페이지 css 수정 및 teams페이지 에러 수정

apps/api/src/models/teamModel.ts

@@ -6,7 +6,7 @@ export interface TeamDocument extends Omit<TeamType, "_id">, Document {}
 const TeamSchema = new Schema<TeamDocument>(
   {
     name: { type: String, unique: true, required: true },
-    order: { type: Number, required: true },
+    order: { type: Number, unique: true, required: false },
   },
   { timestamps: true, versionKey: false },
 );

apps/web/app/admin/members/_components/sidepanel/Form.tsx

@@ -57,60 +57,61 @@ export default function MemberForm({ selectedMember, onClose }: MemberFormProps)
   };
 
   return (
-    <form onSubmit={(...args) => void handleSubmit(membersFormSubmit)(...args)}>
-      <div className="w-154 mb-24">
-        <Controller
-          name="role"
-          control={control}
-          rules={{ required: MEMBER_FORM_MESSAGES.VALIDATION.ROLE.REQUIRED }}
-          render={({ field: { value, onChange } }) => (
-            <Radio.Group
-              value={getRoleDisplay(value)}
-              onChange={(displayText) => {
-                onChange(getRoleValue(displayText));
-              }}
-            >
-              <Radio.Option value={ROLE_LABELS.member}>{ROLE_LABELS.member}</Radio.Option>
-              <Radio.Option value={ROLE_LABELS.admin}>{ROLE_LABELS.admin}</Radio.Option>
-            </Radio.Group>
-          )}
+    <form
+      className="flex h-full flex-col justify-between"
+      onSubmit={(...args) => void handleSubmit(membersFormSubmit)(...args)}
+    >
+      <div>
+        <div className="w-154 mb-24">
+          <Controller
+            name="role"
+            control={control}
+            rules={{ required: MEMBER_FORM_MESSAGES.VALIDATION.ROLE.REQUIRED }}
+            render={({ field: { value, onChange } }) => (
+              <Radio.Group
+                value={getRoleDisplay(value)}
+                onChange={(displayText) => {
+                  onChange(getRoleValue(displayText));
+                }}
+              >
+                <Radio.Option value={ROLE_LABELS.member}>{ROLE_LABELS.member}</Radio.Option>
+                <Radio.Option value={ROLE_LABELS.admin}>{ROLE_LABELS.admin}</Radio.Option>
+              </Radio.Group>
+            )}
+          />
+        </div>
+        <Input
+          placeholder={MEMBER_FORM_MESSAGES.PLACEHOLDER.NAME}
+          error={errors.name}
+          {...register("name", {
+            required: MEMBER_FORM_MESSAGES.VALIDATION.NAME.REQUIRED,
+            minLength: {
+              value: 2,
+              message: MEMBER_FORM_MESSAGES.VALIDATION.NAME.MIN_LENGTH,
+            },
+          })}
         />
-      </div>
-
-      <Input
-        placeholder={MEMBER_FORM_MESSAGES.PLACEHOLDER.NAME}
-        error={errors.name}
-        {...register("name", {
-          required: MEMBER_FORM_MESSAGES.VALIDATION.NAME.REQUIRED,
-          minLength: {
-            value: 2,
-            message: MEMBER_FORM_MESSAGES.VALIDATION.NAME.MIN_LENGTH,
-          },
-        })}
-      />
-
-      <Input
-        placeholder={MEMBER_FORM_MESSAGES.PLACEHOLDER.EMAIL}
-        error={errors.email}
-        {...register("email", {
-          required: MEMBER_FORM_MESSAGES.VALIDATION.EMAIL.REQUIRED,
-          pattern: {
-            value: REGEXP_PATTERNS.EMAIL,
-            message: MEMBER_FORM_MESSAGES.VALIDATION.EMAIL.PATTERN,
-          },
-        })}
-      />
-
-      <div className="mb-24">
-        <Controller
-          name="teams"
-          control={control}
-          render={({ field: { value, onChange } }) => <TeamDropdown value={value} onSelect={onChange} />}
+        <Input
+          placeholder={MEMBER_FORM_MESSAGES.PLACEHOLDER.EMAIL}
+          error={errors.email}
+          {...register("email", {
+            required: MEMBER_FORM_MESSAGES.VALIDATION.EMAIL.REQUIRED,
+            pattern: {
+              value: REGEXP_PATTERNS.EMAIL,
+              message: MEMBER_FORM_MESSAGES.VALIDATION.EMAIL.PATTERN,
+            },
+          })}
         />
+        <div className="mb-24">
+          <Controller
+            name="teams"
+            control={control}
+            render={({ field: { value, onChange } }) => <TeamDropdown value={value} onSelect={onChange} />}
+          />
+        </div>
+        <ProfileImageUploader currentImage={getCurrentImage()} onImageChange={handleImageChange} />
       </div>
 
-      <ProfileImageUploader currentImage={getCurrentImage()} onImageChange={handleImageChange} />
-
       <Button variant="Primary" type="submit" className="h-48 w-full" isPending={isPending}>
         {getButtonText()}
       </Button>

apps/web/app/admin/members/_components/sidepanel/Header.tsx

@@ -20,24 +20,22 @@ export default function PanelHeader({ selectedMember, onClose }: PanelHeaderProp
 
   return (
     <>
-      <button onClick={onClose} type="button" className="mb-32 ml-16 mt-16 flex flex-row">
+      <button onClick={onClose} type="button" className="flex flex-row">
         <DoubleChevron />
       </button>
-      <div className="mx-32">
-        <div className={selectedMember ? "flex justify-between" : ""}>
-          <h1 className="text-3xl-bold mb-32">
-            {selectedMember ? MEMBER_FORM_MESSAGES.TITLE.UPDATE : MEMBER_FORM_MESSAGES.TITLE.ADD}
-          </h1>
-          {selectedMember ? (
-            <button
-              type="button"
-              onClick={handleWithdraw}
-              className="text-sm-medium text-custom-black/80 hover:bg-custom-black/5 hover:text-custom-black w-71 rounded-6 border-custom-black/20 h-32 border transition-all duration-300"
-            >
-              {MEMBER_FORM_MESSAGES.BUTTON.WITHDRAW}
-            </button>
-          ) : null}
-        </div>
+      <div className={selectedMember ? "flex justify-between" : ""}>
+        <h1 className="text-3xl-bold">
+          {selectedMember ? MEMBER_FORM_MESSAGES.TITLE.UPDATE : MEMBER_FORM_MESSAGES.TITLE.ADD}
+        </h1>
+        {selectedMember ? (
+          <button
+            type="button"
+            onClick={handleWithdraw}
+            className="text-sm-medium text-custom-black/80 hover:bg-custom-black/5 hover:text-custom-black w-71 rounded-6 border-custom-black/20 h-32 border transition-all duration-300"
+          >
+            {MEMBER_FORM_MESSAGES.BUTTON.WITHDRAW}
+          </button>
+        ) : null}
       </div>
     </>
   );

apps/web/app/admin/members/_components/sidepanel/index.tsx

@@ -20,14 +20,12 @@ export default function SidePanel({ isOpen, onClose, selectedMember }: SidePanel
   return (
     <div
       ref={sidePanelRef}
-      className={`md:w-414 border-custom-black/20 fixed right-0 top-0 z-20 h-full w-full transform border-l bg-white shadow-[0px_2px_14px_0px_rgba(0,0,0,0.08)] transition-transform duration-300 ease-in-out ${
+      className={`md:w-414 border-custom-black/20 fixed right-0 top-0 z-20 flex h-full w-full transform flex-col gap-32 border-l bg-white px-32 pb-40 pt-16 shadow-[0px_2px_14px_0px_rgba(0,0,0,0.08)] transition-transform duration-300 ease-in-out ${
         isOpen ? "translate-x-0" : "translate-x-full"
       }`}
     >
       <PanelHeader selectedMember={selectedMember} onClose={onClose} />
-      <div className="mx-32 mb-40">
-        <MemberForm selectedMember={selectedMember} onClose={onClose} />
-      </div>
+      <MemberForm selectedMember={selectedMember} onClose={onClose} />
     </div>
   );
 }

apps/web/app/admin/teams/_hooks/useTeamsMutations.ts

@@ -59,7 +59,9 @@ interface UpdateRequest {
   newName: string;
 }
 
-export const useUpdateTeamName = (): UseMutationResult<MessageResponse, AxiosError<MessageResponse>, UpdateRequest> => {
+export const useUpdateTeamName = (
+  onClose?: () => void,
+): UseMutationResult<MessageResponse, AxiosError<MessageResponse>, UpdateRequest> => {
   const queryClient = useQueryClient();
   const prevTeamsRef = useRef<TeamType[] | undefined>();
 
@@ -76,6 +78,7 @@ export const useUpdateTeamName = (): UseMutationResult<MessageResponse, AxiosErr
 
     onSuccess: (res) => {
       notify("success", res.message);
+      onClose?.();
     },
     onError: (error) => {
       if (prevTeamsRef.current) void queryClient.setQueryData<TeamType[]>(QUERY_KEYS.TEAMS.ALL, prevTeamsRef.current);

apps/web/app/settings/_components/modals/ManageTeamModal.tsx

@@ -50,12 +50,12 @@ export default function ManageTeamModal({
   return (
     <SettingsModal isOpen={isOpen} onClose={onClose}>
       <SettingsModalHeader title={title} actions={actions} />
-      <SettingsModalContent className="pt-16">
-        <form onSubmit={(...rest) => void handleSubmit(onSubmit)(...rest)}>
+      <form onSubmit={(...rest) => void handleSubmit(onSubmit)(...rest)}>
+        <SettingsModalContent className="pt-16">
           <Input id="teamName" placeholder="팀 이름" {...register("teamName")} />
-        </form>
-      </SettingsModalContent>
-      <SettingsModalButton type="submit">{buttonText}</SettingsModalButton>
+        </SettingsModalContent>
+        <SettingsModalButton type="submit">{buttonText}</SettingsModalButton>
+      </form>
     </SettingsModal>
   );
 }