Revert "[#523] [모임 상세] 모임 수정 페이지 (#527)"

This reverts commit f889a79.

src/app/group/[groupId]/edit/page.tsx

@@ -1,102 +1,43 @@
 'use client';
 
-import { notFound, useRouter } from 'next/navigation';
-import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
-
-import {
-  useBookGroupEditCurrentInfo,
-  useBookGroupInfoMutation,
-} from '@/queries/group/useBookGroupQuery';
-import type { APIGroupDetail, APIEditBookGroup } from '@/types/group';
-
-import { SERVICE_ERROR_MESSAGE } from '@/constants';
-import {
-  checkAuthentication,
-  isAxiosErrorWithCustomCode,
-} from '@/utils/helpers';
-
-import useToast from '@/v1/base/Toast/useToast';
-import BookGroupEditDateForm from '@/v1/bookGroup/edit/BookGroupEditDateForm';
-import BookGroupEditIntroduceForm from '@/v1/bookGroup/edit/BookGroupEditIntroduceForm';
-import BookGroupEditTitleForm from '@/v1/bookGroup/edit/BookGroupEditTitleForm';
-import BookGroupEditTopNavigation from '@/v1/bookGroup/edit/BookGroupEditTopNavigation';
-
-const BookGroupEditPage = ({
+import GroupAPI from '@/apis/group';
+import { APIGroupDetail } from '@/types/group';
+import AuthRequired from '@/ui/AuthRequired';
+import TopNavigation from '@/ui/common/TopNavigation';
+import EditGroupForm from '@/ui/Group/EditGroupForm';
+import { VStack } from '@chakra-ui/react';
+import { useCallback, useEffect, useState } from 'react';
+
+const GroupEditPage = ({
   params: { groupId },
 }: {
-  params: { groupId: APIGroupDetail['bookGroupId'] };
+  params: { groupId: number };
 }) => {
-  const router = useRouter();
-
-  const isAuthenticated = checkAuthentication();
-
-  const { data: bookGroupData } = useBookGroupEditCurrentInfo(groupId);
-  const { isOwner, title, description, maxMemberCount, startDate, endDate } =
-    bookGroupData;
-
-  if (!isAuthenticated || !isOwner) {
-    notFound();
-  }
-
-  const bookGroupEdit = useBookGroupInfoMutation(groupId);
-
-  const { show: showToast } = useToast();
-
-  const methods = useForm<Omit<APIEditBookGroup, 'isOwner'>>({
-    mode: 'all',
-    defaultValues: {
-      title: title,
-      introduce: description,
-      maxMemberCount: maxMemberCount ? maxMemberCount : 9999,
-      startDate: startDate,
-      endDate: endDate,
-    },
-  });
-
-  const handleFormSubmit: SubmitHandler<
-    Omit<APIEditBookGroup, 'isOwner' | 'startDate'>
-  > = async ({ title, introduce, maxMemberCount, endDate }) => {
-    bookGroupEdit.mutate(
-      { title, introduce, maxMemberCount, endDate },
-      {
-        onSuccess: () => {
-          router.push(`/group/${groupId}`);
-
-          showToast({ type: 'success', message: '모임 정보를 수정했어요! 🎉' });
-          return;
-        },
-        onError: error => {
-          if (isAxiosErrorWithCustomCode(error)) {
-            const { code } = error.response.data;
-            const message = SERVICE_ERROR_MESSAGE[code];
-
-            showToast({ type: 'error', message });
-            return;
-          }
-
-          showToast({
-            type: 'error',
-            message: '모임 정보 수정을 실패했어요 🥲',
-          });
-        },
-      }
-    );
-  };
+  const [group, setGroup] = useState<APIGroupDetail>();
+
+  const getGroup = useCallback(async () => {
+    try {
+      const { data } = await GroupAPI.getGroupDetailInfo({
+        bookGroupId: groupId,
+      });
+      setGroup(data);
+    } catch (error) {
+      console.error(error);
+    }
+  }, [groupId]);
+
+  useEffect(() => {
+    getGroup();
+  }, [getGroup]);
 
   return (
-    <FormProvider {...methods}>
-      <BookGroupEditTopNavigation onSubmit={handleFormSubmit} />
-
-      <form
-        className="mt-[2.5rem] flex flex-col gap-[3.2rem]"
-        onSubmit={methods.handleSubmit(handleFormSubmit)}
-      >
-        <BookGroupEditTitleForm />
-        <BookGroupEditIntroduceForm />
-        <BookGroupEditDateForm />
-      </form>
-    </FormProvider>
+    <AuthRequired>
+      <VStack justify="center" align="center">
+        <TopNavigation pageTitle="모임 수정" />
+        {group && <EditGroupForm group={group} />}
+      </VStack>
+    </AuthRequired>
   );
 };
 
-export default BookGroupEditPage;
+export default GroupEditPage;

src/queries/group/useBookGroupQuery.ts

@@ -1,17 +1,9 @@
-import {
-  useMutation,
-  useQueryClient,
-  UseQueryOptions,
-} from '@tanstack/react-query';
+import { UseQueryOptions } from '@tanstack/react-query';
 
-import type {
-  APIGroupDetail,
-  BookGroupDetail,
-  APIEditBookGroup,
-} from '@/types/group';
-import useQueryWithSuspense from '@/hooks/useQueryWithSuspense';
-import groupAPI from '@/apis/group';
+import { APIGroupDetail, BookGroupDetail } from '@/types/group';
 import { isExpired } from '@/utils/date';
+import GroupAPI from '@/apis/group';
+import useQueryWithSuspense from '@/hooks/useQueryWithSuspense';
 
 import bookGroupKeys from './key';
 
@@ -34,9 +26,9 @@ export const useBookGroupQuery = <TData = APIGroupDetail>(
   useQueryWithSuspense(
     bookGroupKeys.detail(groupId),
     () =>
-      groupAPI
-        .getGroupDetailInfo({ bookGroupId: groupId })
-        .then(({ data }) => data),
+      GroupAPI.getGroupDetailInfo({ bookGroupId: groupId }).then(
+        ({ data }) => data
+      ),
     options
   );
 
@@ -64,32 +56,3 @@ export const useBookGroupJoinInfo = (groupId: APIGroupDetail['bookGroupId']) =>
       question: data.joinQuestion,
     }),
   });
-
-export const useBookGroupEditCurrentInfo = (
-  groupId: APIGroupDetail['bookGroupId']
-) =>
-  useBookGroupQuery(groupId, {
-    select: data => ({
-      isOwner: data.isOwner,
-      title: data.title,
-      description: data.introduce,
-      maxMemberCount: data.maxMemberCount,
-      startDate: data.startDate,
-      endDate: data.endDate,
-    }),
-  });
-
-export const useBookGroupInfoMutation = (
-  bookGroupId: APIGroupDetail['bookGroupId']
-) => {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: (group: Omit<APIEditBookGroup, 'isOwner' | 'startDate'>) =>
-      groupAPI.updateGroupInfo({ bookGroupId, group }).then(({ data }) => data),
-    onSuccess: () =>
-      queryClient.invalidateQueries({
-        queryKey: bookGroupKeys.detail(bookGroupId),
-      }),
-  });
-};

src/styles/theme.tsx

@@ -107,6 +107,24 @@ const theme: ThemeOverride = extendTheme({
   buttonSizes,
   colors,
   scheme,
+  styles: {
+    global: {
+      'input[type="date"]': {
+        position: 'relative',
+      },
+      'input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-calendar-picker-indicator':
+        {
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          width: '100%',
+          height: '100%',
+          background: 'transparent',
+          color: 'transparent',
+          cursor: 'pointer',
+        },
+    },
+  },
   shadows,
 });
 

src/types/group.ts

@@ -95,12 +95,3 @@ export type BookGroupComment = {
   createdAt: APIGroupComment['createdAt'];
   content: APIGroupComment['contents'];
 };
-
-export type APIEditBookGroup = {
-  isOwner: APIGroupDetail['isOwner'];
-  title: APIGroupDetail['title'];
-  introduce: APIGroupDetail['introduce'];
-  maxMemberCount: APIGroupDetail['maxMemberCount'];
-  startDate: APIGroupDetail['startDate'];
-  endDate: APIGroupDetail['endDate'];
-};

src/v1/base/DatePicker.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import {
   ChangeEventHandler,
   forwardRef,
@@ -53,7 +51,7 @@ const DatePicker = (
 
   return (
     <label
-      className={`relative flex h-[3rem] max-w-[14rem] items-center justify-between gap-[0.5rem] bg-transparent ${disabledClasses}`}
+      className={`relative flex h-[3rem] max-w-[14rem] items-center justify-between bg-transparent ${disabledClasses}`}
       htmlFor={name}
     >
       <div className="flex h-full min-w-0 flex-grow items-center">

src/v1/base/InputLength.tsx

@@ -1,12 +1,12 @@
 type InputLengthProps = {
-  currentLength?: number;
-  isError?: boolean;
-  maxLength?: number;
+  currentLength: number;
+  isError: boolean;
+  maxLength: number;
 };
 
 const InputLength = ({
   currentLength,
-  isError = false,
+  isError,
   maxLength,
 }: InputLengthProps) => {
   const textColor = isError ? 'text-warning-800 ' : 'text-main-900';

src/v1/base/TextArea.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import {
   ChangeEventHandler,
   ForwardedRef,
@@ -18,7 +16,6 @@ import InputLength from './InputLength';
 interface BaseTextAreaProps
   extends TextareaHTMLAttributes<HTMLTextAreaElement> {
   error?: boolean;
-  defaultValue?: string;
 }
 interface TextAreaProps extends BaseTextAreaProps {
   count?: boolean;
@@ -27,7 +24,6 @@ interface TextAreaProps extends BaseTextAreaProps {
 const _TextArea = (
   {
     maxLength = 500,
-    defaultValue,
     count = false,
     error = false,
     onChange,
@@ -36,7 +32,7 @@ const _TextArea = (
   }: PropsWithChildren<TextAreaProps>,
   ref: ForwardedRef<HTMLTextAreaElement>
 ) => {
-  const [value, setValue] = useState(defaultValue || '');
+  const [value, setValue] = useState('');
 
   const handleChange: ChangeEventHandler<HTMLTextAreaElement> = e => {
     setValue(e.target.value);
@@ -72,13 +68,13 @@ const TextArea = Object.assign(forwardRef(_TextArea), {
   Error: ErrorMessage,
 });
 
-const ErrorMessageType = (<ErrorMessage />).type;
+const ErrorMeesageType = (<ErrorMessage />).type;
 
 const getErrorChildren = (children: ReactNode) => {
   const childrenArray = Children.toArray(children);
 
   return childrenArray.find(
-    child => isValidElement(child) && child.type === ErrorMessageType
+    child => isValidElement(child) && child.type === ErrorMeesageType
   );
 };