피드 생성 스키마 정의 (#381)

* refactor: 폴더 이동 * feat: 스키마 정의
sopt-makers · Sep 17, 2023 · 2d36c97 · 2d36c97
1 parent af09758
commit 2d36c97
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 15 deletions.
diff --git 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/.../Feed/Modal/FeedModal/FeedCreateModal.tsx → ...tingDetail/Feed/Modal/FeedCreateModal.tsx b/.../Feed/Modal/FeedModal/FeedCreateModal.tsx → ...tingDetail/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<FormType> = 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
+            }
           />
         </FormProvider>
       </SDialogWrapper>

diff --git a/.../Modal/FeedModal/FeedFormPresentation.tsx → ...etail/Feed/Modal/FeedFormPresentation.tsx b/.../Modal/FeedModal/FeedFormPresentation.tsx → ...etail/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({
         <SFeedContentTextArea placeholder="피드 내용을 입력해주세요." />
         <SDivider />
         <FormController
-          name="files"
+          name="images"
           defaultValue={[]}
           render={({ field: { value: imageUrls, onChange, onBlur }, fieldState: { error } }) => (
             <>

diff --git a/...ed/Modal/FeedModal/ImagePreview/index.tsx → ...gDetail/Feed/Modal/ImagePreview/index.tsx b/...ed/Modal/FeedModal/ImagePreview/index.tsx → ...gDetail/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
@@ -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<typeof schema>;
+
+export const MAX_FILE_SIZE = 5 * 1024 ** 2; // 5MB
+
+export const ACCEPTED_IMAGE_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp', 'image/gif'];