From 2d36c972bbf8cae5254f487408ac955db61fdf24 Mon Sep 17 00:00:00 2001 From: NaReum Date: Sun, 17 Sep 2023 13:41:56 +0900 Subject: [PATCH] =?UTF-8?q?=ED=94=BC=EB=93=9C=20=EC=83=9D=EC=84=B1=20?= =?UTF-8?q?=EC=8A=A4=ED=82=A4=EB=A7=88=20=EC=A0=95=EC=9D=98=20(#381)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * refactor: 폴더 이동 * feat: 스키마 정의 --- pages/detail/index.tsx | 2 +- .../Modal/{FeedModal => }/FeedCreateModal.tsx | 23 ++++++++++--------- .../{FeedModal => }/FeedFormPresentation.tsx | 6 ++--- .../{FeedModal => }/ImagePreview/index.tsx | 0 .../page/meetingDetail/Feed/Modal/schema.ts | 17 ++++++++++++++ 5 files changed, 33 insertions(+), 15 deletions(-) rename src/components/page/meetingDetail/Feed/Modal/{FeedModal => }/FeedCreateModal.tsx (81%) rename src/components/page/meetingDetail/Feed/Modal/{FeedModal => }/FeedFormPresentation.tsx (98%) rename src/components/page/meetingDetail/Feed/Modal/{FeedModal => }/ImagePreview/index.tsx (100%) create mode 100644 src/components/page/meetingDetail/Feed/Modal/schema.ts 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'];