feat: 그룹 생성, 수정에 사용할 form 추가

Author: gihwan-dev

src/components/EditGroup/EditGroupForm.tsx

@@ -0,0 +1,41 @@
+import { FC } from 'react';
+import GroupFormNameInput from './GroupFormNameInput';
+import GroupFormDescriptionInput from './GroupFormDescriptionInput';
+import GroupFormDateInput from './GroupFormDateInput';
+import UserInvite from '../common/UserInvite';
+import GroupFormMemoInput from './GroupFormMemoInput';
+
+interface Props {
+  name?: string;
+  description?: string;
+  startDate?: string;
+  endDate?: string;
+  memo?: string;
+  onSubmit: React.FormEventHandler<HTMLFormElement>;
+}
+
+const GroupForm: FC<Props> = ({
+  name = '',
+  description = '',
+  startDate = new Date().toString(),
+  endDate = new Date().toString(),
+  memo = '',
+  onSubmit,
+}) => {
+  return (
+    <form onSubmit={onSubmit} className="container mx-auto flex max-w-sm flex-1 flex-col gap-4 pb-[50px] pt-4">
+      <div className="flex h-full w-full flex-1 flex-col gap-4">
+        <GroupFormNameInput name={name} />
+        <GroupFormDescriptionInput description={description} />
+        <GroupFormDateInput startDate={startDate} endDate={endDate} />
+        <UserInvite />
+        <GroupFormMemoInput memo={memo} />
+      </div>
+      <button type="submit" className="btn btn-outline btn-primary w-full">
+        저장
+      </button>
+    </form>
+  );
+};
+
+export default GroupForm;

src/components/GroupForm/GroupForm.tsx

@@ -0,0 +1,40 @@
+import { FC } from 'react';
+import { dateToYYMMDD } from '@/utils/dateUtils';
+
+interface Props {
+  startDate: string;
+  endDate: string;
+}
+
+const GroupFormDateInput: FC<Props> = ({ startDate, endDate }) => {
+  return (
+    <div className="w-full">
+      <label className="label label-text w-full text-start">모임 설정 기간 *</label>
+      <div className="input input-bordered flex w-full flex-row items-center gap-1 p-0">
+        <label className="hidden" htmlFor="group-start-date-input">
+          모임 시작
+        </label>
+        <input
+          className="input border-none"
+          type="date"
+          defaultValue={dateToYYMMDD(new Date(startDate))}
+          id="group-start-date-input"
+          name="startDate"
+        />
+        ~
+        <label className="hidden" htmlFor="group-end-date-input">
+          모임 종료
+        </label>
+        <input
+          className="input border-none"
+          type="date"
+          id="group-end-date-input"
+          defaultValue={dateToYYMMDD(new Date(endDate))}
+          name="endDate"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default GroupFormDateInput;

src/components/GroupForm/GroupFormDateInput.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import InputForm from '../common/InputForm';
+
+interface Props {
+  description: string;
+}
+
+const GroupFormDescriptionInput: FC<Props> = ({ description }) => {
+  return (
+    <InputForm
+      id="group-description-input"
+      type="text"
+      defaultValue={description}
+      placeholder="모임 설명을 입력하세요"
+      onChange={() => {}}
+      title="모임 설명"
+      hint=""
+      name="description"
+    />
+  );
+};
+
+export default GroupFormDescriptionInput;

src/components/GroupForm/GroupFormDescriptionInput.tsx

@@ -0,0 +1,26 @@
+import { FC } from 'react';
+
+interface Props {
+  memo: string;
+}
+
+const GroupFormMemoInput: FC<Props> = ({ memo }) => {
+  return (
+    <div>
+      <label className="label label-text w-full text-start">메모</label>
+      <textarea
+        id="group-memo-input"
+        className="input input-bordered h-24 w-full"
+        rows={10}
+        placeholder="메모를 입력하세요"
+        defaultValue={memo}
+        onChange={() => {}}
+        title="메모"
+        name="memo"
+      />
+      <p className="label-text-alt">최대 500자 까지 입력할 수 있습니다.</p>
+    </div>
+  );
+};
+
+export default GroupFormMemoInput;

src/components/GroupForm/GroupFormMemoInput.tsx

@@ -0,0 +1,23 @@
+import { FC } from 'react';
+import InputForm from '../common/InputForm';
+
+interface Props {
+  name: string;
+}
+
+const GroupFormNameInput: FC<Props> = ({ name = '' }) => {
+  return (
+    <InputForm
+      id="group-name-input"
+      type="text"
+      defaultValue={name}
+      placeholder="모임명을 입력하세요"
+      onChange={() => {}}
+      title="모임명 *"
+      hint=""
+      name="name"
+    />
+  );
+};
+
+export default GroupFormNameInput;

src/components/GroupForm/GroupFormNameInput.tsx

@@ -0,0 +1,69 @@
+import EditGroupForm from '@/components/GroupForm/GroupForm';
+import { dateToYYMMDD } from '@/utils/dateUtils';
+import { act, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+
+describe('EditGroupForm', () => {
+  it('수정하는 경우 기본값을 전달할 수 있어야 한다.', () => {
+    const startDate = new Date().toString();
+    const endDate = new Date().toString();
+
+    render(
+      <EditGroupForm
+        onSubmit={() => {}}
+        name="name"
+        description="description"
+        startDate={startDate}
+        endDate={endDate}
+        memo="memo"
+      />,
+    );
+    const groupNameInput = screen.getByPlaceholderText(/모임명/) as HTMLInputElement;
+    const groupDescriptionInput = screen.getByPlaceholderText(/모임 설명/) as HTMLInputElement;
+    const groupDateStartInput = screen.getByLabelText(/모임 시작/) as HTMLInputElement;
+    const groupDateEndInput = screen.getByLabelText(/모임 종료/) as HTMLInputElement;
+    const groupMemoInput = screen.getByPlaceholderText(/메모/) as HTMLInputElement;
+
+    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(groupMemoInput.value).toBe('memo');
+  });
+  it('모임명, 설명, 메모를 수정할 수 있어야 한다.', async () => {
+    const user = userEvent.setup();
+    render(<EditGroupForm onSubmit={() => {}} />);
+
+    const groupNameInput = screen.getByPlaceholderText(/모임명/) as HTMLInputElement;
+    const groupDescriptionInput = screen.getByPlaceholderText(/모임 설명/) as HTMLInputElement;
+    const groupDateStartInput = screen.getByLabelText(/모임 시작/) as HTMLInputElement;
+    const groupDateEndInput = screen.getByLabelText(/모임 종료/) as HTMLInputElement;
+    const groupMemoInput = screen.getByPlaceholderText(/메모/) as HTMLInputElement;
+
+    expect(groupNameInput).toBeInTheDocument();
+    expect(groupDescriptionInput).toBeInTheDocument();
+    expect(groupDateStartInput).toBeInTheDocument();
+    expect(groupDateEndInput).toBeInTheDocument();
+    expect(groupMemoInput).toBeInTheDocument();
+
+    await act(async () => {
+      // 기존 값이 존재하는 경우 type을 하게 되면 기존 값에 이를 추가하려고 함.
+      // 그러므로 clear를 통해 기존 날짜 값을 초기화 해줘야 함.
+      await user.clear(groupDateStartInput);
+      await user.clear(groupDateEndInput);
+
+      await user.type(groupNameInput, 'name');
+      await user.type(groupDescriptionInput, 'description');
+      await user.type(groupMemoInput, 'memo');
+      await user.type(groupDateStartInput, '2022-01-01');
+      await user.type(groupDateEndInput, '2022-01-02');
+    });
+
+    expect(groupNameInput).toHaveValue('name');
+    expect(groupDescriptionInput).toHaveValue('description');
+    expect(groupMemoInput).toHaveValue('memo');
+    expect(groupDateStartInput).toHaveValue('2022-01-01');
+    expect(groupDateEndInput).toHaveValue('2022-01-02');
+  });
+});

src/tests/EditGrouptForm.test.tsx

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

src/tests/GroupForm.test.tsx

@@ -0,0 +1,6 @@
+export const dateToYYMMDD = (date: Date) => {
+  const year = date.getFullYear();
+  const month = date.getMonth() + 1;
+  const day = date.getDate();
+  return `${year}-${month < 10 ? `0${month}` : month}-${day < 10 ? `0${day}` : day}`;
+};