Merge pull request #156 from imaginer-dev/30-그룹-일정-관련-유효성-검증

30 그룹 일정 관련 유효성 검증을 할 수 있어야 한다.

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/tests/EditGroupSchedulePage.test.tsx

@@ -33,8 +33,8 @@ describe('EditGroupPage', () => {
 
     expect(groupNameInput.value).toBe(groupScheduleFixture[0].title);
     expect(groupDescriptionInput.value).toBe(groupScheduleFixture[0].description);
-    expect(groupDateStartInput.value).toBe(dateToYYMMDD(new Date(groupScheduleFixture[0].start_date)));
-    expect(groupDateEndInput.value).toBe(dateToYYMMDD(new Date(groupScheduleFixture[0].end_date)));
+    expect(groupDateStartInput.value).toBe(dateToYYMMDD(groupScheduleFixture[0].start_date));
+    expect(groupDateEndInput.value).toBe(dateToYYMMDD(groupScheduleFixture[0].end_date));
     expect(groupMemoInput.value).toBe(groupScheduleFixture[0].memo);
   });
 });

src/tests/GroupForm.test.tsx

@@ -27,8 +27,8 @@ describe('EditGroupForm', () => {
 
     expect(groupNameInput.value).toBe('name');
     expect(groupDescriptionInput.value).toBe('description');
-    expect(groupDateStartInput.value).toBe(dateToYYMMDD(new Date(startDate)));
-    expect(groupDateEndInput.value).toBe(dateToYYMMDD(new Date(endDate)));
+    expect(groupDateStartInput.value).toBe(dateToYYMMDD(startDate));
+    expect(groupDateEndInput.value).toBe(dateToYYMMDD(endDate));
     expect(groupMemoInput.value).toBe('memo');
   });
   it('모임명, 설명, 메모를 수정할 수 있어야 한다.', async () => {

src/utils/__test__/dateUtils.test.ts

@@ -3,8 +3,7 @@ import { dateToYYMMDD } from '../dateUtils';
 
 describe('dateUtils', () => {
   it('should return a date string', () => {
-    const date = new Date('2021-09-01');
-    const result = dateToYYMMDD(date);
+    const result = dateToYYMMDD(new Date('2021-09-01').toString());
     expect(result).toBe('2021-09-01');
   });
 });

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);
+};