Merge pull request #192 from imaginer-dev/30-생성-수정-버튼-클릭시-유효성-검증을-실행해야-한다

30 유효성 검사 및 캘린더 이벤트 스타일 수정

Author: gihwan-dev

src/components/common/Calendar.tsx

@@ -184,7 +184,7 @@ export default memo(function Calendar({
 function renderEventContent(eventInfo: EventInfo) {
   return (
     <>
-      <div className="w-full border-0 bg-secondary p-0.5 text-white">
+      <div className="line-clamp-1 w-full text-wrap border-0 bg-secondary p-0.5 text-white">
         <b className="border-0">{eventInfo.timeText}</b>
         <i> {eventInfo.event.title}</i>
       </div>

src/hooks/useAddGroupSchedule.ts

@@ -1,6 +1,7 @@
 import { useAddNewGroup } from '@/react-queries/useAddNewGroup';
 import { Member } from '@/types/Member';
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
+import { isValidGroupInput } from '@/utils/groupScheduleUtils.ts';
 
 interface DialogElement {
   openModal: () => void;
@@ -12,6 +13,8 @@ export const useAddGroupSchedule = () => {
   const successDialogRef = useRef<DialogElement | null>(null);
   const failDialogRef = useRef<DialogElement | null>(null);
 
+  const [errorText, setErrorText] = useState('모임 일정 등록에 실패했습니다.');
+
   const addGroupSchedule = (e: React.FormEvent<HTMLFormElement>, userList: Member[]) => {
     e.preventDefault();
     const formData = new FormData(e.currentTarget);
@@ -23,6 +26,15 @@ export const useAddGroupSchedule = () => {
       memo: formData.get('memo') as string,
       newMemberList: userList,
     };
+
+    const validationResult = isValidGroupInput(newGroupSchedule);
+
+    if (validationResult.error) {
+      failDialogRef?.current?.openModal();
+      setErrorText(validationResult.errorText);
+      return;
+    }
+
     mutate(newGroupSchedule, {
       onError: (error) => {
         console.error(error);
@@ -36,6 +48,7 @@ export const useAddGroupSchedule = () => {
 
   return {
     addGroupSchedule,
+    errorText,
     isPending,
     successDialogRef,
     failDialogRef,

src/pages/AddGroupPage.tsx

@@ -5,12 +5,10 @@ import { useAddGroupSchedule } from '@/hooks/useAddGroupSchedule';
 import { Member } from '@/types/Member';
 
 const AddGroupPage = () => {
-  const { addGroupSchedule, isPending, failDialogRef, successDialogRef } = useAddGroupSchedule();
+  const { addGroupSchedule, isPending, failDialogRef, successDialogRef, errorText } = useAddGroupSchedule();
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>, userList: Member[]) => {
     e.preventDefault();
-    // TODO: 멤버 1명 이상이여야 한다.
-    // TODO: 타이틀, 시작일, 종료시간 은 필수 값이며 빈 값일 수 없다.
-    // TODO: 종료일은 시작일보다 크거나 같아야 한다.
+
     addGroupSchedule(e, userList);
   };
 
@@ -19,7 +17,7 @@ const AddGroupPage = () => {
       <AppBar backButton title={'모임 등록하기'} />
       <GroupForm onSubmit={handleSubmit} isLoading={isPending} />
       <Dialog ref={successDialogRef} desc="모임 일정이 등록되었습니다." />
-      <Dialog ref={failDialogRef} desc="모임 일정 등록에 실패했습니다." />
+      <Dialog ref={failDialogRef} desc={errorText} />
     </div>
   );
 };

src/pages/EditGroupPage.tsx

@@ -12,7 +12,7 @@ const EditGroupPage = () => {
   const groupId = params.groupId!;
 
   const { groupMemberData, groupData, error, isLoading, isError } = useGetGroupScheduleDefaultData(groupId);
-  const { mutate, successDialog, errorDialogRef, isPending: updateIsPending } = useUpdateGroup();
+  const { mutate, errorText, successDialog, errorDialogRef, isPending: updateIsPending } = useUpdateGroup();
 
   if (isError) {
     return <div>{error!.message}</div>;
@@ -54,7 +54,7 @@ const EditGroupPage = () => {
             memberList={groupMemberData}
             isLoading={updateIsPending}
           />
-          <Dialog ref={errorDialogRef} desc="오류가 발생했습니다. 다시시도해 주세요." />
+          <Dialog ref={errorDialogRef} desc={errorText} />
           <Dialog ref={successDialog} desc="성공적으로 수정했습니다." />
         </div>
       )}

src/react-queries/useUpdateGroup.ts

@@ -2,9 +2,10 @@ import { useMutation } from '@tanstack/react-query';
 import { queries } from './queryKeys';
 import { Member } from '@/types/Member';
 import { useNavigate } from 'react-router-dom';
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { updateGroup } from '@/apis/updateGroupApi.ts';
 import { updateGroupMember } from '@/apis/updateGroupMemberApi.ts';
+import { isValidGroupInput } from '@/utils/groupScheduleUtils.ts';
 
 interface UpdateGroup {
   name: string;
@@ -27,6 +28,8 @@ export const useUpdateGroup = () => {
   const errorDialogRef = useRef<DialogElement | null>(null);
   const successDialog = useRef<DialogElement | null>(null);
 
+  const [errorText, setErrorText] = useState('모임 일정 수정에 실패했습니다.');
+
   const {
     mutate: updateGroupMutate,
     isPending: updateGroupIsPending,
@@ -50,6 +53,14 @@ export const useUpdateGroup = () => {
   });
 
   const mutate = (data: UpdateGroup) => {
+    const validationResult = isValidGroupInput(data);
+
+    if (validationResult.error) {
+      errorDialogRef?.current?.openModal();
+      setErrorText(validationResult.errorText);
+      return;
+    }
+
     updateGroupMutate(data);
     updateGroupMemberMutate({
       updatedMemberList: data.newMemberList,
@@ -75,6 +86,7 @@ export const useUpdateGroup = () => {
 
   return {
     mutate,
+    errorText,
     isPending: updateGroupIsPending || updateGroupMemberIsPending,
     errorDialogRef,
     successDialog,

src/utils/groupScheduleUtils.ts

@@ -1,3 +1,5 @@
+import { isEmptyString } from '@/utils/stringUtils.ts';
+
 export const isValidGroupScheduleName = (name: string) => {
   return name.length > 0;
 };
@@ -33,5 +35,32 @@ const bothDatesHasValue = ({ startDate, endDate }: IsValidGroupSchedulePeriodPar
 };
 
 const startDateIsEarlierThanEndDate = ({ startDate, endDate }: IsValidGroupSchedulePeriodParams) => {
-  return new Date(startDate) < new Date(endDate);
+  return new Date(startDate).toISOString().split('T')[0] <= new Date(endDate).toISOString().split('T')[0];
+};
+
+interface IsValidGroupInputParams {
+  name: string;
+  startDate: string;
+  endDate: string;
+}
+
+export const isValidGroupInput = ({ name, startDate, endDate }: IsValidGroupInputParams) => {
+  if (isEmptyString(name) || isEmptyString(startDate) || isEmptyString(endDate)) {
+    return {
+      error: true,
+      errorText: '그룹 이름, 시작일, 종료일은 필수 입력 사항입니다.',
+    };
+  }
+
+  if (!startDateIsEarlierThanEndDate({ startDate, endDate })) {
+    return {
+      error: true,
+      errorText: '모임 시작일이 종료일보다 빠를 수 없습니다.',
+    };
+  }
+
+  return {
+    error: false,
+    errorText: '',
+  };
 };

src/utils/stringUtils.ts

@@ -0,0 +1 @@
+export const isEmptyString = (str: string) => str.trim() === '';