Fix/173/final inspect (#180)

* 🐛 fix : comment 스키마 재지정

* ♻️ refactor : schema trim 추가

* 🐛 fix : tags 길이 제한 추가 및 에러메시지 핸들링

* 🐛 fix:컬럼 생성 시 공백 생성 제한(z.trim.min 추가)

---------

Co-authored-by: Tokyun02 <developtk02@gmail.com>
Co-authored-by: chanki.kim <chanki.kim89@gmail.com>

Author: 3 people

src/apis/auth/types.ts

@@ -31,9 +31,9 @@ export type LoginResponse = Promise<LoginSuccessResponse | LoginFailResponse>;
 
 export const passwordSchema = z
   .object({
-    password: z.string().min(PASSWORD_PUT_FORM_VALID_LENGTH.PASSWORD.MIN, PASSWORD_PUT_FORM_ERROR_MESSAGE.PASSWORD.MIN),
-    newPassword: z.string().min(PASSWORD_PUT_FORM_VALID_LENGTH.NEW_PASSWORD.MIN, PASSWORD_PUT_FORM_ERROR_MESSAGE.NEW_PASSWORD.MIN),
-    newPasswordConfirm: z.string(),
+    password: z.string().min(PASSWORD_PUT_FORM_VALID_LENGTH.PASSWORD.MIN, PASSWORD_PUT_FORM_ERROR_MESSAGE.PASSWORD.MIN).trim(),
+    newPassword: z.string().min(PASSWORD_PUT_FORM_VALID_LENGTH.NEW_PASSWORD.MIN, PASSWORD_PUT_FORM_ERROR_MESSAGE.NEW_PASSWORD.MIN).trim(),
+    newPasswordConfirm: z.string().trim(),
   })
   .refine((check) => check.newPassword === check.newPasswordConfirm, {
     message: PASSWORD_PUT_FORM_ERROR_MESSAGE.NEW_PASSWORD_CONFRIM.NOT_MATCH,

src/apis/cards/types.ts

@@ -6,12 +6,12 @@ const IMAGE_URL = 'https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/tas
 const cardBaseSchema = z.object({
   dashboardId: z.number(),
   columnId: z.number(),
-  title: z.string(),
-  description: z.string(),
+  title: z.string().trim(),
+  description: z.string().trim(),
   dueDate: z.union([z.string(), z.instanceof(Date)]).refine((date) => isValidDate(date), {
     message: '유효하지 않은 날짜 형식입니다.',
   }),
-  tags: z.array(z.string()),
+  tags: z.array(z.string().trim().max(10, '10글자 이하로 작성해주세요')),
   imageUrl: z.string().url(),
 });
 

src/apis/columns/types.ts

@@ -25,7 +25,7 @@ export const getColumnsParamsSchema = z.object({
 export type GetColumnsParams = z.infer<typeof getColumnsParamsSchema>;
 
 export const columnFormSchema = z.object({
-  title: z.string(),
+  title: z.string().trim().min(2, { message: '컬럼 이름은 최소 2글자 이상이어야 합니다.' }),
 });
 
 export type ColumnForm = z.infer<typeof columnFormSchema>;

src/apis/comments/index.ts

@@ -26,7 +26,7 @@ export const getComments = async (params: GetCommentsParams) => {
  */
 export const putComment = async (commentId: number, putCommentForm: PutCommentForm) => {
   const response = await axiosClientHelper.put<Comment>(`/comments/${commentId}`, putCommentForm);
-  return safeResponse(response.data, commentsResponseSchema);
+  return safeResponse(response.data, commentSchema);
 };
 
 /**

src/apis/comments/types.ts

@@ -16,7 +16,7 @@ export const commentSchema = z.object({
 export type Comment = z.infer<typeof commentSchema>;
 
 export const commentFormSchema = z.object({
-  content: z.string(),
+  content: z.string().trim(),
   cardId: z.number(),
   columnId: z.number(),
   dashboardId: z.number(),

src/apis/dashboards/types.ts

@@ -30,6 +30,7 @@ export type GetDashboardsRequest = Partial<BasePagination> & {
 export const dashboardFormSchema = z.object({
   title: z
     .string()
+    .trim()
     .min(DASHBOARD_FORM_VALID_LENGTH.TITLE.MIN, { message: DASHBOARD_FORM_ERROR_MESSAGE.TITLE.MIN })
     .max(DASHBOARD_FORM_VALID_LENGTH.TITLE.MAX, { message: DASHBOARD_FORM_ERROR_MESSAGE.TITLE.MAX }),
   color: z.enum(DEFAULT_COLORS),

src/apis/users/types.ts

@@ -9,9 +9,9 @@ interface FailResponse {
 export const signupSchema = z
   .object({
     email: z.string().min(SIGNUP_FORM_VALID_LENGTH.EMAIL.MIN, SIGNUP_FORM_ERROR_MESSAGE.EMAIL.MIN).email(SIGNUP_FORM_ERROR_MESSAGE.EMAIL.NOT_FORM),
-    nickname: z.string().min(SIGNUP_FORM_VALID_LENGTH.NICKNAME.MIN, SIGNUP_FORM_ERROR_MESSAGE.NICKNAME.MIN).max(SIGNUP_FORM_VALID_LENGTH.NICKNAME.MAX, SIGNUP_FORM_ERROR_MESSAGE.NICKNAME.MAX),
-    password: z.string().min(SIGNUP_FORM_VALID_LENGTH.PASSWORD.MIN, SIGNUP_FORM_ERROR_MESSAGE.PASSWORD.MIN),
-    passwordConfirm: z.string(),
+    nickname: z.string().trim().min(SIGNUP_FORM_VALID_LENGTH.NICKNAME.MIN, SIGNUP_FORM_ERROR_MESSAGE.NICKNAME.MIN).max(SIGNUP_FORM_VALID_LENGTH.NICKNAME.MAX, SIGNUP_FORM_ERROR_MESSAGE.NICKNAME.MAX),
+    password: z.string().trim().min(SIGNUP_FORM_VALID_LENGTH.PASSWORD.MIN, SIGNUP_FORM_ERROR_MESSAGE.PASSWORD.MIN),
+    passwordConfirm: z.string().trim(),
     terms: z.boolean(),
   })
   .refine((check) => check.password === check.passwordConfirm, {

src/components/columns/CreateCard.tsx

@@ -3,6 +3,7 @@
 import { Ref } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { isArray } from 'es-toolkit/compat';
 import useAlert from '@/hooks/useAlert';
 import { CardForm, cardFormSchema } from '@/apis/cards/types';
 import { useCreateCard } from '@/apis/cards/queries';
@@ -100,7 +101,8 @@ export default function CreateCard({ dashboardId, columnId, ref }: CreateCardPro
             name='tags'
             control={control}
             render={({ field }) => {
-              return <TagInput label='태그' error={errors.tags?.message} placeholder='입력후 Enter' {...field} />;
+              const errorMessage = isArray(errors.tags) ? errors.tags.find((error) => !!error)?.message : undefined;
+              return <TagInput label='태그' error={errorMessage} placeholder='입력후 Enter' {...field} />;
             }}
           />
           <Controller

src/components/todo/TodoEditModal.tsx

@@ -1,6 +1,7 @@
 import { Ref } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import { isArray } from 'es-toolkit/compat';
 import useAlert from '@/hooks/useAlert';
 import { Card, CardForm, cardFormSchema } from '@/apis/cards/types';
 import { useColumnsQuery } from '@/apis/columns/queries';
@@ -105,7 +106,14 @@ export default function TodoEditModal({ card, ref }: TodoEditModalProps) {
 
             <Controller name='dueDate' control={control} render={({ field }) => <DateInput label='마감일' error={errors.dueDate?.message} placeholder='날짜를 입력해주세요' required {...field} />} />
 
-            <Controller name='tags' control={control} render={({ field }) => <TagInput label='태그' error={errors.tags?.message} placeholder='입력 후 Enter' {...field} />} />
+            <Controller
+              name='tags'
+              control={control}
+              render={({ field }) => {
+                const errorMessage = isArray(errors.tags) ? errors.tags.find((error) => !!error)?.message : undefined;
+                return <TagInput label='태그' error={errorMessage} placeholder='입력 후 Enter' {...field} />;
+              }}
+            />
 
             <Controller name='imageUrl' control={control} render={({ field }) => <ImageUpload label='이미지' error={errors.imageUrl?.message} defaultValue={card.imageUrl} {...field} />} />
           </div>