diff --git a/pages/detail/index.tsx b/pages/detail/index.tsx index 5ba1352f..f04e7442 100644 --- a/pages/detail/index.tsx +++ b/pages/detail/index.tsx @@ -11,8 +11,8 @@ import FeedPanel from '@components/page/meetingDetail/Feed/FeedPanel'; import { Fragment, useState } from 'react'; import dayjs from 'dayjs'; import 'dayjs/locale/ko'; -import FeedCreateModal from '@components/page/meetingDetail/Feed/Modal/FeedModal/FeedCreateModal'; import { useOverlay } from '@hooks/useOverlay/Index'; +import FeedCreateModal from '@components/page/meetingDetail/Feed/Modal/FeedCreateModal'; dayjs.locale('ko'); const enum SelectedTab { diff --git a/src/components/page/meetingDetail/Feed/Modal/FeedModal/FeedCreateModal.tsx b/src/components/page/meetingDetail/Feed/Modal/FeedCreateModal.tsx similarity index 81% rename from src/components/page/meetingDetail/Feed/Modal/FeedModal/FeedCreateModal.tsx rename to src/components/page/meetingDetail/Feed/Modal/FeedCreateModal.tsx index 27bad348..ca713f60 100644 --- a/src/components/page/meetingDetail/Feed/Modal/FeedModal/FeedCreateModal.tsx +++ b/src/components/page/meetingDetail/Feed/Modal/FeedCreateModal.tsx @@ -1,14 +1,12 @@ import { FormProvider, SubmitHandler, useForm } from 'react-hook-form'; -import { FormType, schema } from '@type/form'; import { styled } from 'stitches.config'; import { zodResolver } from '@hookform/resolvers/zod'; -import { createMeeting } from '@api/meeting'; import { useRouter } from 'next/router'; -import { useMutation } from '@tanstack/react-query'; import dynamic from 'next/dynamic'; import { Box } from '@components/box/Box'; import ModalContainer, { ModalContainerProps } from '@components/modal/ModalContainer'; import FeedFormPresentation from './FeedFormPresentation'; +import { FormType, schema } from './schema'; const DevTool = dynamic(() => import('@hookform/devtools').then(module => module.DevTool), { ssr: false, @@ -23,15 +21,15 @@ function FeedCreateModal({ isModalOpened, handleModalClose }: ModalContainerProp const { isValid } = formMethods.formState; - const { mutateAsync: mutateCreateMeeting, isLoading: isSubmitting } = useMutation({ - mutationFn: (formData: FormType) => createMeeting(formData), - onError: () => alert('피드를 개설하지 못했습니다.'), - }); + // const { mutateAsync: mutateCreateMeeting, isLoading: isSubmitting } = useMutation({ + // mutationFn: (formData: FormType) => createMeeting(formData), + // onError: () => alert('피드를 개설하지 못했습니다.'), + // }); const handleDeleteImage = (index: number) => { - const files = formMethods.getValues().files.slice(); - files.splice(index, 1); - formMethods.setValue('files', files); + const images = formMethods.getValues().images.slice(); + images.splice(index, 1); + formMethods.setValue('images', images); }; const onSubmit: SubmitHandler = async formData => { @@ -57,7 +55,10 @@ function FeedCreateModal({ isModalOpened, handleModalClose }: ModalContainerProp handleDeleteImage={handleDeleteImage} handleModalClose={handleModalClose} onSubmit={formMethods.handleSubmit(onSubmit)} - disabled={isSubmitting || !isValid} + disabled={ + // isSubmitting || + !isValid + } /> diff --git a/src/components/page/meetingDetail/Feed/Modal/FeedModal/FeedFormPresentation.tsx b/src/components/page/meetingDetail/Feed/Modal/FeedFormPresentation.tsx similarity index 98% rename from src/components/page/meetingDetail/Feed/Modal/FeedModal/FeedFormPresentation.tsx rename to src/components/page/meetingDetail/Feed/Modal/FeedFormPresentation.tsx index 118e327c..dc19c7e9 100644 --- a/src/components/page/meetingDetail/Feed/Modal/FeedModal/FeedFormPresentation.tsx +++ b/src/components/page/meetingDetail/Feed/Modal/FeedFormPresentation.tsx @@ -55,8 +55,8 @@ function FeedFormPresentation({ return; } const filesCount = imageUrls.length + newFiles.length; - if (filesCount > 6) { - alert('이미지는 최대 6개까지 업로드 가능합니다.'); + if (filesCount > 10) { + alert('이미지는 최대 10개까지 업로드 가능합니다.'); return; } else { const urls = await Promise.all(newFiles.map(async file => await uploadFile(file))); @@ -100,7 +100,7 @@ function FeedFormPresentation({ ( <> diff --git a/src/components/page/meetingDetail/Feed/Modal/FeedModal/ImagePreview/index.tsx b/src/components/page/meetingDetail/Feed/Modal/ImagePreview/index.tsx similarity index 100% rename from src/components/page/meetingDetail/Feed/Modal/FeedModal/ImagePreview/index.tsx rename to src/components/page/meetingDetail/Feed/Modal/ImagePreview/index.tsx diff --git a/src/components/page/meetingDetail/Feed/Modal/schema.ts b/src/components/page/meetingDetail/Feed/Modal/schema.ts new file mode 100644 index 00000000..e7ad4f06 --- /dev/null +++ b/src/components/page/meetingDetail/Feed/Modal/schema.ts @@ -0,0 +1,17 @@ +import { z } from 'zod'; + +export const schema = z.object({ + title: z + .string() + .max(100, { message: '최대 100자까지만 입력할 수 있어요' }) + .min(1, { message: '피드 제목을 입력해주세요.' }), + + contents: z.string().min(1, { message: '피드 내용을 입력해주세요.' }), + images: z.array(z.string()), +}); + +export type FormType = z.infer; + +export const MAX_FILE_SIZE = 5 * 1024 ** 2; // 5MB + +export const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/gif'];