From fe85046dc4b8cf574f8cf9412d136202e003b37a Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Fri, 30 May 2025 20:52:59 +0900
Subject: [PATCH 1/5] Chore : install react-hook-form & zod

---
 package-lock.json | 48 ++++++++++++++++++++++++++++++++++++++++++++++-
 package.json      |  5 ++++-
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 17295683..39c6eae2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^10.0.0",
+        "@hookform/resolvers": "^5.0.1",
         "axios": "^1.9.0",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
@@ -19,8 +20,10 @@
         "react-calendar": "^5.1.0",
         "react-dom": "^19.0.0",
         "react-error-boundary": "^6.0.0",
+        "react-hook-form": "^7.56.4",
         "react-intersection-observer": "^9.16.0",
-        "react-toastify": "^11.0.5"
+        "react-toastify": "^11.0.5",
+        "zod": "^3.25.41"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -2048,6 +2051,18 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.0.1.tgz",
+      "integrity": "sha512-u/+Jp83luQNx9AdyW2fIPGY6Y7NG68eN2ZW8FOJYL+M0i4s49+refdJdOp/A9n9HFQtQs3HIDHQvX3ZET2o7YA==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/utils": "^0.3.0"
+      },
+      "peerDependencies": {
+        "react-hook-form": "^7.55.0"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.1",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
@@ -2774,6 +2789,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
     "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
@@ -8181,6 +8202,22 @@
         "react": ">=16.13.1"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.56.4",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.56.4.tgz",
+      "integrity": "sha512-Rob7Ftz2vyZ/ZGsQZPaRdIefkgOSrQSPXfqBdvOPwJfoGnjwRJUs7EM7Kc1mcoDv3NOtqBzPGbcMB8CGn9CKgw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-intersection-observer": {
       "version": "9.16.0",
       "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.16.0.tgz",
@@ -9718,6 +9755,15 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "3.25.41",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.41.tgz",
+      "integrity": "sha512-8+sDJTGtCYIDBhdqDygp0ffj8kzziRKqAJPhpYObbElJ+3TRe/mnlnwH+/OMa3kKhueS4Drm5UMW00/u1p07zA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index fe185f42..53b9ef08 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
+    "@hookform/resolvers": "^5.0.1",
     "axios": "^1.9.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
@@ -20,8 +21,10 @@
     "react-calendar": "^5.1.0",
     "react-dom": "^19.0.0",
     "react-error-boundary": "^6.0.0",
+    "react-hook-form": "^7.56.4",
     "react-intersection-observer": "^9.16.0",
-    "react-toastify": "^11.0.5"
+    "react-toastify": "^11.0.5",
+    "zod": "^3.25.41"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",

From 6b4995f6a1d25f7aef9a3c43e5a92edc686404d0 Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Sun, 1 Jun 2025 20:52:14 +0900
Subject: [PATCH 2/5] Refactor : new form field

---
 src/components/common/formField/Fields.tsx    | 32 +++++++++++++++++++
 .../common/formField/compound/Input.tsx       |  3 +-
 src/components/common/formField/style.ts      |  1 +
 src/components/common/formField/type.ts       | 19 +++++++++--
 4 files changed, 52 insertions(+), 3 deletions(-)
 create mode 100644 src/components/common/formField/Fields.tsx

diff --git a/src/components/common/formField/Fields.tsx b/src/components/common/formField/Fields.tsx
new file mode 100644
index 00000000..94b82820
--- /dev/null
+++ b/src/components/common/formField/Fields.tsx
@@ -0,0 +1,32 @@
+'use client';
+
+import clsx from 'clsx';
+import { GAP_SIZE, LABEL_SIZE } from './style';
+import { FieldProps } from './type';
+
+export default function Fields({
+  label,
+  required,
+  errorMessage,
+  gapSize = '12',
+  labelSize = '16/16',
+  render,
+}: FieldProps) {
+  const showError = !!errorMessage;
+
+  return (
+    <div className="flex w-full flex-col gap-2">
+      <div className={clsx('flex flex-col', GAP_SIZE[gapSize])}>
+        {label && (
+          <label className={clsx('flex gap-1.5', LABEL_SIZE[labelSize])}>
+            {required && <span className="text-tertiary text-2lg-bold sm:text-xl-bold">*</span>}
+            {label}
+          </label>
+        )}
+        {render()}
+      </div>
+
+      {showError && <span className="text-danger text-md-md text-left">{errorMessage}</span>}
+    </div>
+  );
+}
diff --git a/src/components/common/formField/compound/Input.tsx b/src/components/common/formField/compound/Input.tsx
index 7803517a..631f6cee 100644
--- a/src/components/common/formField/compound/Input.tsx
+++ b/src/components/common/formField/compound/Input.tsx
@@ -7,6 +7,7 @@ import { InputProps } from '../type';
 export default function Input({
   leftSlot = null,
   rightSlot = null,
+  hasError,
   borderClassName = 'border-border',
   className,
   ref,
@@ -16,7 +17,7 @@ export default function Input({
     <div
       className={clsx(
         'bg-bg200 flex h-11 w-full gap-3 rounded-xl border px-4 py-2.5 sm:h-12',
-        borderClassName,
+        hasError ? 'border-danger' : borderClassName,
         className
       )}
     >
diff --git a/src/components/common/formField/style.ts b/src/components/common/formField/style.ts
index 5a285b87..4b5b3aa2 100644
--- a/src/components/common/formField/style.ts
+++ b/src/components/common/formField/style.ts
@@ -14,6 +14,7 @@ export const LABEL_SIZE = {
   '16/20': 'text-lg-md sm:text-xl-bold',
 } as const;
 
+// 삭제 예정
 export const getBorderClassName = ({
   isFocused,
   showSuccess,
diff --git a/src/components/common/formField/type.ts b/src/components/common/formField/type.ts
index 9118aadc..32d44d27 100644
--- a/src/components/common/formField/type.ts
+++ b/src/components/common/formField/type.ts
@@ -1,8 +1,10 @@
 import { InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { GAP_SIZE, LABEL_SIZE } from './style';
 
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   leftSlot?: React.ReactNode;
   rightSlot?: React.ReactNode;
+  hasError?: boolean;
   borderClassName?: string;
   className?: string;
   ref?: React.Ref<HTMLInputElement>;
@@ -15,14 +17,17 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
   className?: string;
 }
 
+// 삭제 예정
 export type ImageUploaderType = 'board' | 'team' | 'user';
 
 export interface FileInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  // imageUploaderType 삭제 예정
   imageUploaderType?: ImageUploaderType;
   image: string | null;
   onImageChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
+// 삭제 예정
 export interface FormFieldProps {
   field: 'input' | 'textarea' | 'file-input';
   imageUploaderType?: ImageUploaderType;
@@ -34,10 +39,20 @@ export interface FormFieldProps {
   errorMessage?: string;
   gapSize?: '12' | '16' | '24' | '32';
   labelSize?: '16/16' | '14/16' | '16/20';
-  onFieldFocus?: () => void;
-  onFieldBlur?: () => void;
+  onFieldFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+  onFieldBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
 }
 
+export interface FieldProps {
+  label?: string;
+  required?: boolean;
+  errorMessage?: string;
+  gapSize?: keyof typeof GAP_SIZE;
+  labelSize?: keyof typeof LABEL_SIZE;
+  render: () => React.ReactNode;
+}
+
+// 삭제 에정
 export type FieldComponentProps =
   | (InputProps & FormFieldProps & { field?: 'input' })
   | (TextareaProps & FormFieldProps & { field?: 'textarea' })

From 0fd2311715fc9a1039b4c2fc7cbe0c9d9257a8e5 Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Mon, 2 Jun 2025 03:35:38 +0900
Subject: [PATCH 3/5] Refactor : useZodForm

---
 src/hooks/useZodForm.ts | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)
 create mode 100644 src/hooks/useZodForm.ts

diff --git a/src/hooks/useZodForm.ts b/src/hooks/useZodForm.ts
new file mode 100644
index 00000000..f9770ed1
--- /dev/null
+++ b/src/hooks/useZodForm.ts
@@ -0,0 +1,19 @@
+import { useForm, UseFormProps, UseFormReturn } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { ZodSchema } from 'zod';
+
+export default function useZodForm<T extends Record<string, unknown>>({
+  validationSchema,
+  defaultValues,
+  ...rest
+}: {
+  validationSchema: ZodSchema<T>;
+  defaultValues: UseFormProps<T>['defaultValues'];
+} & Omit<UseFormProps<T>, 'resolver' | 'defaultValues'>): UseFormReturn<T> {
+  return useForm<T>({
+    resolver: zodResolver(validationSchema),
+    defaultValues,
+    mode: 'all',
+    ...rest,
+  });
+}

From 9336cbe7bad97b1ce144e4d500a1cabf99e33bb9 Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Mon, 2 Jun 2025 03:57:34 +0900
Subject: [PATCH 4/5] Refactor : image uploader object-cover

---
 src/components/common/formField/compound/ImageUploader.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/common/formField/compound/ImageUploader.tsx b/src/components/common/formField/compound/ImageUploader.tsx
index 30691c3f..4fef0de7 100644
--- a/src/components/common/formField/compound/ImageUploader.tsx
+++ b/src/components/common/formField/compound/ImageUploader.tsx
@@ -41,12 +41,12 @@ export default function ImageUploader({ imageUploaderType, image, inputRef }: Im
       <button
         onClick={triggerUploadClick}
         className={clsx(
-          'border-border relative flex h-16 w-16 cursor-pointer items-center justify-center rounded-full border-2',
+          'border-border relative flex h-16 w-16 cursor-pointer items-center justify-center overflow-hidden rounded-full border-2',
           TEAM ? 'bg-bg200' : 'bg-bg100'
         )}
       >
         {image ? (
-          <Image src={image} fill alt="profile" className="rounded-full" />
+          <Image src={image} fill alt="profile" className="object-cover" />
         ) : (
           <Image
             src={defaultIcon}

From b526e9c9b10e76f89b8c94c5b939a200f4a910ea Mon Sep 17 00:00:00 2001
From: heejin <heejin0857@naver.com>
Date: Mon, 2 Jun 2025 03:59:30 +0900
Subject: [PATCH 5/5] Refactor : apply useZodForm

---
 src/components/manage-group/ManageGroup.tsx   |  78 +++++-----
 src/components/manage-group/useManageGroup.ts | 138 +++++++-----------
 2 files changed, 96 insertions(+), 120 deletions(-)

diff --git a/src/components/manage-group/ManageGroup.tsx b/src/components/manage-group/ManageGroup.tsx
index 02c4ed6b..d6410e13 100644
--- a/src/components/manage-group/ManageGroup.tsx
+++ b/src/components/manage-group/ManageGroup.tsx
@@ -1,66 +1,70 @@
 'use client';
 
 import Button from '@/components/common/Button';
-import FormField from '@/components/common/formField';
+import Fields from '../common/formField/Fields';
+import Input from '../common/formField/compound/Input';
+import FileInput from '../common/formField/compound/FileInput';
+import ImageUploader from '../common/formField/compound/ImageUploader';
 import BouncingDots from '@/components/common/loading/BouncingDots';
 import useManageGroup from './useManageGroup';
 import { Group } from '@/types/group';
 
 export type ManageGroup = Partial<Pick<Group, 'id'>> & Pick<Group, 'name' | 'image'>;
 
-interface MangeGroupProps {
+interface ManageGroupProps {
   groupData?: ManageGroup;
   groupNames: string[];
 }
 
-export default function ManageGroup({ groupData, groupNames }: MangeGroupProps) {
+export default function ManageGroup({ groupData, groupNames }: ManageGroupProps) {
   const isEdit = !!groupData;
+  const groupButtonText = isEdit ? '수정하기' : '생성하기';
 
   const {
-    group,
-    isNameFailure,
-    isImageEmpty,
-    isSubmit,
+    form: {
+      register,
+      handleSubmit,
+      formState: { errors },
+    },
+    image,
     isPending,
-    imageErrorMessage,
-    nameErrorMessage,
-    handleNameChange,
     handleImageChange,
-    handleManageGroupSubmit,
-  } = useManageGroup({
-    isEdit,
-    groupData,
-    groupNames,
-  });
-
-  const groupButtonText = isEdit ? '수정하기' : '생성하기';
+    handleSubmitGroup,
+  } = useManageGroup({ isEdit, groupData, groupNames });
 
   return (
-    <form onSubmit={handleManageGroupSubmit} className="flex w-full flex-col gap-10">
+    <form onSubmit={handleSubmit(handleSubmitGroup)} className="flex w-full flex-col gap-10">
       <div className="flex w-full flex-col gap-6">
-        <FormField
-          field="file-input"
-          name="image"
+        <Fields
           label="팀 프로필"
-          imageUploaderType="team"
-          isFailure={isImageEmpty}
-          isSubmit={isSubmit}
-          errorMessage={imageErrorMessage()}
-          image={group.image}
-          onImageChange={handleImageChange}
+          errorMessage={errors.image?.message}
+          render={() => (
+            <FileInput name="image" onImageChange={handleImageChange}>
+              {({ inputRef }) => (
+                <ImageUploader image={image} imageUploaderType="team" inputRef={inputRef} />
+              )}
+            </FileInput>
+          )}
         />
-        <FormField
-          field="input"
-          name="name"
+
+        <Fields
           label="팀 이름"
-          placeholder="팀 이름을 입력해 주세요."
-          isFailure={isNameFailure}
-          isSubmit={isSubmit}
-          errorMessage={nameErrorMessage()}
-          value={group.name}
-          onChange={handleNameChange}
+          errorMessage={errors.name?.message}
+          render={() => {
+            const { onBlur, ...inputProps } = register('name');
+            return (
+              <Input
+                {...inputProps}
+                name="name"
+                placeholder="팀 이름을 입력해 주세요."
+                onBlur={onBlur}
+                hasError={!!errors.name}
+              />
+            );
+          }}
         />
       </div>
+
       <div className="flex flex-col gap-6">
         <Button type="submit" variant="solid" size="fullWidth" disabled={isPending}>
           {isPending ? <BouncingDots /> : groupButtonText}
diff --git a/src/components/manage-group/useManageGroup.ts b/src/components/manage-group/useManageGroup.ts
index 8bfc2ba6..1f329284 100644
--- a/src/components/manage-group/useManageGroup.ts
+++ b/src/components/manage-group/useManageGroup.ts
@@ -1,137 +1,109 @@
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
+import { z } from 'zod';
 import postImageUrl from '@/lib/api/image/postImageUrl';
 import axiosClient from '@/lib/axiosClient';
-import { validateEmptyValue } from '@/utils/validators';
 import { Toast } from '../common/Toastify';
 import { ManageGroup } from './ManageGroup';
 import { useUser } from '@/contexts/UserContext';
+import useZodForm from '@/hooks/useZodForm';
+
+interface ManageGroupProps {
+  isEdit: boolean;
+  groupData?: ManageGroup;
+  groupNames: string[];
+}
+
+interface GroupValue {
+  name: string;
+  image: string;
+}
 
 const GROUP_MESSAGE = {
   EMPTY_GROUP_IMAGE: '프로필 이미지를 넣어주세요.',
   EMPTY_GROUP_NAME: '팀 이름을 작성해 주세요.',
   DUPLICATED_GROUP_NAME: '이미 존재하는 팀 이름입니다.',
   OVER_LENGTH_GROUP_NAME: '팀 이름은 10글자까지 가능합니다.',
+  INVALID_GROUP_IMAGE_URL: '올바른 이미지 주소가 아닙니다.',
 };
 
-const INITIAL_GROUP_VALUE: ManageGroup = {
-  image: '',
-  name: '',
-};
-
-export default function useManageGroup({
-  isEdit,
-  groupData,
-  groupNames,
-}: {
-  isEdit: boolean;
-  groupData?: ManageGroup;
-  groupNames: string[];
-}) {
-  const [group, setGroup] = useState<ManageGroup>(groupData ?? INITIAL_GROUP_VALUE);
-  const [isSubmit, setIsSubmit] = useState(false);
+export default function useManageGroup({ isEdit, groupData, groupNames }: ManageGroupProps) {
   const [isPending, setIsPending] = useState(false);
-  const { fetchUser } = useUser();
-
   const router = useRouter();
+  const { fetchUser } = useUser();
 
-  const isImageEmpty = group.image === '';
-  const isNameEmpty = validateEmptyValue(group.name);
-  const isNameOverLimit = group.name.length > 10;
-  const isNameDuplicate = isEdit
-    ? groupNames.filter((name) => name !== groupData?.name).includes(group.name)
-    : groupNames.includes(group.name);
-
-  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setGroup((prev) => ({
-      ...prev,
-      name: e.target.value,
-    }));
+  const isDuplicatedName = groupNames.filter((n) => n !== groupData?.name);
+
+  const groupSchema = z.object({
+    name: z
+      .string()
+      .min(1, { message: GROUP_MESSAGE.EMPTY_GROUP_NAME })
+      .max(10, { message: GROUP_MESSAGE.OVER_LENGTH_GROUP_NAME })
+      .refine((value) => !isDuplicatedName.includes(value), {
+        message: GROUP_MESSAGE.DUPLICATED_GROUP_NAME,
+      }),
+    image: z
+      .string()
+      .min(1, { message: GROUP_MESSAGE.EMPTY_GROUP_IMAGE })
+      .url({ message: GROUP_MESSAGE.INVALID_GROUP_IMAGE_URL }),
+  });
+
+  const defaultValues = {
+    name: groupData?.name ?? '',
+    image: groupData?.image ?? '',
   };
 
+  const form = useZodForm({
+    validationSchema: groupSchema,
+    defaultValues,
+  });
+
   const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
 
     postImageUrl(file)
-      .then((result) => {
-        setGroup((prev) => ({
-          ...prev,
-          image: result.url,
-        }));
-      })
-      .catch((err) => {
-        console.error(err);
+      .then((result) => form.setValue('image', result.url, { shouldValidate: true }))
+      .catch(() => {
+        Toast.error('이미지 불러오기 실패');
       });
   };
 
-  const imageErrorMessage = () => {
-    if (isImageEmpty) return GROUP_MESSAGE.EMPTY_GROUP_IMAGE;
-  };
-
-  const nameErrorMessage = () => {
-    if (isNameEmpty) return GROUP_MESSAGE.EMPTY_GROUP_NAME;
+  const image = form.watch('image');
 
-    if (isNameDuplicate) return GROUP_MESSAGE.DUPLICATED_GROUP_NAME;
-
-    if (isNameOverLimit) return GROUP_MESSAGE.OVER_LENGTH_GROUP_NAME;
-  };
+  const handleSubmitGroup = ({ name, image }: GroupValue) => {
+    const isUnchanged = name === groupData?.name && image === groupData?.image;
 
-  const isNameFailure = isNameEmpty || isNameDuplicate || isNameOverLimit;
-
-  const isManageTeamFormValid =
-    !isImageEmpty && !isNameEmpty && !isNameDuplicate && !isNameOverLimit;
-
-  const isGroupDataUnchanged = group.image === groupData?.image && group.name === groupData.name;
-
-  const handleManageGroupSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    setIsSubmit(true);
-
-    if (!isManageTeamFormValid) return;
-
-    if (isGroupDataUnchanged) {
+    if (isUnchanged) {
       Toast.info('변경 사항이 없습니다.');
       return;
     }
+
     setIsPending(true);
 
     axiosClient
       .request({
         url: isEdit ? `/groups/${groupData?.id}` : '/groups',
         method: isEdit ? 'patch' : 'post',
-        data: {
-          name: group.name,
-          image: group.image,
-        },
+        data: { name, image },
       })
       .then((result) => {
         fetchUser();
-
-        setTimeout(() => {
-          router.push(`/${result.data.id}`);
-        }, 500);
+        setTimeout(() => router.push(`/${result.data.id}`), 500);
       })
       .catch(() => {
-        const action = isEdit ? '수정' : '생성';
-        Toast.error(`팀 ${action} 실패`);
+        Toast.error(`팀 ${isEdit ? '수정' : '생성'} 실패`);
       })
       .finally(() => {
-        setIsPending(true);
-        setIsSubmit(false);
+        setIsPending(false);
       });
   };
 
   return {
-    group,
-    isNameFailure,
-    isImageEmpty,
-    isSubmit,
+    form,
+    image,
     isPending,
-    imageErrorMessage,
-    nameErrorMessage,
-    handleNameChange,
+    handleSubmitGroup,
     handleImageChange,
-    handleManageGroupSubmit,
   };
 }