feat: 그룹 스케줄 수정 폼 유효성 검증 로직 추가

Author: gihwan-dev

src/components/Group/GroupFormDateInput.tsx

@@ -1,12 +1,28 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import { dateToYYMMDD } from '@/utils/dateUtils';
+import { getGroupSchedulePeriodErrorDefineObject } from '@/utils/groupScheduleUtils';
 
 interface Props {
   startDate: string;
   endDate: string;
 }
 
 const GroupFormDateInput: FC<Props> = ({ startDate, endDate }) => {
+  const [curStartDate, setCurStartDate] = useState<string>(dateToYYMMDD(startDate));
+  const [curEndDate, setCurEndDate] = useState<string>(dateToYYMMDD(endDate));
+  const { errorText, isError } = getGroupSchedulePeriodErrorDefineObject({
+    startDate: curStartDate,
+    endDate: curEndDate,
+  });
+
+  const onStartDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCurStartDate(e.target.value);
+  };
+
+  const onEndDateChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCurEndDate(e.target.value);
+  };
+
   return (
     <div className="w-full">
       <label className="label label-text w-full text-start">모임 설정 기간 *</label>
@@ -17,7 +33,8 @@ const GroupFormDateInput: FC<Props> = ({ startDate, endDate }) => {
         <input
           className="input border-none"
           type="date"
-          defaultValue={dateToYYMMDD(new Date(startDate))}
+          onChange={onStartDateChange}
+          value={curStartDate}
           id="group-start-date-input"
           name="startDate"
         />
@@ -28,11 +45,15 @@ const GroupFormDateInput: FC<Props> = ({ startDate, endDate }) => {
         <input
           className="input border-none"
           type="date"
+          onChange={onEndDateChange}
           id="group-end-date-input"
-          defaultValue={dateToYYMMDD(new Date(endDate))}
+          value={curEndDate}
           name="endDate"
         />
       </div>
+      <div className="label flex h-8 flex-row items-center">
+        <span className={`label-text-alt ${isError ? 'text-error' : ''}`}>{isError ? errorText : ''}</span>
+      </div>
     </div>
   );
 };

src/components/Group/GroupFormNameInput.tsx

@@ -1,20 +1,29 @@
-import { FC } from 'react';
+import { FC, useState } from 'react';
 import InputForm from '../common/InputForm';
+import { isValidGroupScheduleName } from '@/utils/groupScheduleUtils';
 
 interface Props {
   name: string;
 }
 
 const GroupFormNameInput: FC<Props> = ({ name = '' }) => {
+  const [isError, setIsError] = useState(false);
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setIsError(!isValidGroupScheduleName(e.target.value));
+  };
+
   return (
     <InputForm
       id="group-name-input"
       type="text"
       defaultValue={name}
       placeholder="모임명을 입력하세요"
-      onChange={() => {}}
+      onChange={onChange}
       title="모임명 *"
       hint=""
+      error={isError}
+      errorText="모임명을 입력해주세요."
       name="name"
     />
   );

src/utils/dateUtils.ts

@@ -1,4 +1,5 @@
-export const dateToYYMMDD = (date: Date) => {
+export const dateToYYMMDD = (value: string) => {
+  const date = new Date(value);
   const year = date.getFullYear();
   const month = date.getMonth() + 1;
   const day = date.getDate();

src/utils/groupScheduleUtils.ts

@@ -0,0 +1,37 @@
+export const isValidGroupScheduleName = (name: string) => {
+  return name.length > 0;
+};
+
+interface IsValidGroupSchedulePeriodParams {
+  startDate: string;
+  endDate: string;
+}
+
+export const getGroupSchedulePeriodErrorDefineObject = ({ startDate, endDate }: IsValidGroupSchedulePeriodParams) => {
+  if (!bothDatesHasValue({ startDate, endDate })) {
+    return {
+      isError: true,
+      errorText: '모임 시작일과 종료일을 입력해주세요.',
+    };
+  }
+
+  if (!startDateIsEarlierThanEndDate({ startDate, endDate })) {
+    return {
+      isError: true,
+      errorText: '모임 시작일이 종료일보다 빠를 수 없습니다.',
+    };
+  }
+
+  return {
+    isError: false,
+    errorText: '',
+  };
+};
+
+const bothDatesHasValue = ({ startDate, endDate }: IsValidGroupSchedulePeriodParams) => {
+  return startDate.length > 0 && endDate.length > 0;
+};
+
+const startDateIsEarlierThanEndDate = ({ startDate, endDate }: IsValidGroupSchedulePeriodParams) => {
+  return new Date(startDate) < new Date(endDate);
+};