FE-73✨ 필수항목 입력했을때 버튼 활성화

epigram5-9 · Jul 23, 2024 · e81bee6 · e81bee6
1 parent d68b2c6
commit e81bee6
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git a/src/apis/index.ts b/src/apis/index.ts
@@ -2,7 +2,7 @@ import axios from 'axios';
 import qs from 'qs';
 
 const getToken = () =>
-  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjIsInRlYW1JZCI6IjUtOSIsInNjb3BlIjoiYWNjZXNzIiwiaWF0IjoxNzIxNzI1NTI4LCJleHAiOjE3MjE3MjczMjgsImlzcyI6InNwLWVwaWdyYW0ifQ.9mNv7cYvpAelu8Z9Db6yvmyn4jj8UcaESnXDyefSRWc';
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjIsInRlYW1JZCI6IjUtOSIsInNjb3BlIjoiYWNjZXNzIiwiaWF0IjoxNzIxNzQ0MDk3LCJleHAiOjE3MjE3NDU4OTcsImlzcyI6InNwLWVwaWdyYW0ifQ.vLG7eh4hG3Ka5r5xfmP9So2zt9-PcighDrTCmQ8wkAk';
 
 const httpClient = axios.create({
   baseURL: process.env.NEXT_PUBLIC_BASE_URL,

diff --git a/src/pageLayout/Epigram/AddEpigram.tsx b/src/pageLayout/Epigram/AddEpigram.tsx
@@ -114,6 +114,11 @@ function AddEpigram() {
     addEpigramMutation.mutate(submitData);
   };
 
+  const isRequiredFieldsValid = () => {
+    const { content, author, tags } = form.getValues();
+    return content.trim() !== '' && author.trim() !== '' && tags.length > 0;
+  };
+
   return (
     <>
       <Header icon='search' routerPage='/search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
@@ -254,7 +259,7 @@ function AddEpigram() {
                     {field.value.map((tag) => (
                       <div key={tag} className='bg-background-100 px-2 py-1 rounded-full flex items-center'>
                         <span className='text-sm md:text-lg lg:text-2xl'>{tag}</span>
-                        <Button type='button' className='ml-2 text-red-500 text-sm md:text-lg lg:text-2xl' onClick={() => handleRemoveTag(tag)}>
+                        <Button type='button' className='text-red-500 text-sm md:text-lg lg:text-2xl p-0 px-2' onClick={() => handleRemoveTag(tag)}>
                           ×
                         </Button>
                       </div>
@@ -267,7 +272,7 @@ function AddEpigram() {
             <Button
               className='h-11 lg:h-16 rounded-xl text-semibold lg:text-2xl text-white bg-black-500 disabled:bg-blue-400 '
               type='submit'
-              // disabled={addEpigramMutation.isPending || !form.formState.isValid}
+              disabled={addEpigramMutation.isPending || !isRequiredFieldsValid()}
             >
               {addEpigramMutation.isPending ? '제출 중...' : '작성 완료'}
             </Button>

diff --git a/src/schema/addEpigram.ts b/src/schema/addEpigram.ts
@@ -4,7 +4,7 @@ const urlRegex = /^https?:\/\/.+/;
 
 export const AddEpigramRequestSchema = z.object({
   tags: z.array(z.string().min(1).max(10)).max(3),
-  referenceUrl: z.string().url().regex(urlRegex, { message: '올바른 URL 형식이 아닙니다.' }).optional().nullable(),
+  referenceUrl: z.string().url().regex(urlRegex).optional().nullable(),
   referenceTitle: z.string().max(100).optional().nullable(),
   author: z.string().min(1).max(30),
   content: z.string().min(1).max(500),
@@ -27,13 +27,18 @@ export const AddEpigramResponseSchema = z.object({
 });
 
 // 폼 입력값을 위한 스키마
-export const AddEpigramFormSchema = z.object({
-  tags: z.array(z.string().min(1).max(10)).min(1, { message: '최소 1개의 태그를 추가해주세요.' }).max(3),
-  referenceUrl: z.union([z.string().url().regex(urlRegex), z.string().max(0)]).optional(),
-  referenceTitle: z.string().max(100).optional(),
-  author: z.string().min(1, { message: '저자의 이름을 입력해주세요' }).max(30),
-  content: z.string().min(1, { message: '내용을 입력해주세요.' }).max(500, { message: '500자 이내로 입력해주세요.' }),
-});
+export const AddEpigramFormSchema = z
+  .object({
+    tags: z.array(z.string().min(1).max(10)).min(1, { message: '최소 1개의 태그를 추가해주세요.' }).max(3),
+    author: z.string().min(1, { message: '저자의 이름을 입력해주세요' }).max(30),
+    content: z.string().min(1, { message: '내용을 입력해주세요.' }).max(500, { message: '500자 이내로 입력해주세요.' }),
+    referenceUrl: z.union([z.string().url().regex(urlRegex, { message: '올바른 URL 형식이 아닙니다.' }), z.literal('')]).optional(),
+    referenceTitle: z.union([z.string().max(100, { message: '100자 이내로 입력해주세요.' }), z.literal('')]).optional(),
+  })
+  .refine((data) => (data.referenceUrl === '' && data.referenceTitle === '') || (data.referenceUrl !== '' && data.referenceTitle !== ''), {
+    message: 'URL과 제목을 모두 입력하거나 모두 비워두세요.',
+    path: ['referenceUrl', 'referenceTitle'],
+  });
 
 export type AddEpigramRequestType = z.infer<typeof AddEpigramRequestSchema>;
 export type AddEpigramResponseType = z.infer<typeof AddEpigramResponseSchema>;