Merge pull request #149 from imaginer-dev/29-그룹-일정과-관련된-데이터를-수정할-수-있어야한다

29 그룹 일정과 관련된 데이터를 수정할 수 있어야한다

Author: Rose4tune

src/components/GroupForm/GroupForm.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/GroupFormDateInput.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/GroupFormDescriptionInput.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/GroupFormMemoInput.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/GroupFormNameInput.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/common/AppBar.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from '@storybook/react';
+import AppBar from './AppBar';
+import { BrowserRouter } from 'react-router-dom';
+
+const meta: Meta<typeof AppBar> = {
+  title: 'AppBar',
+  component: AppBar,
+  render: (args) => (
+    <BrowserRouter>
+      <AppBar {...args} />
+    </BrowserRouter>
+  ),
+};
+
+export default meta;
+
+export type story = StoryObj<typeof AppBar>;
+
+export const Default: story = {
+  args: {
+    title: '모임 일정 등록하기',
+    backButton: true,
+  },
+};

src/components/common/AppBar.tsx

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import HistoryBackButton from './HistoryBackButton';
+
+interface AppBarProps {
+  title?: string;
+  backButton?: boolean;
+}
+
+const AppBar: FC<AppBarProps> = ({ title = '', backButton = true }) => {
+  return (
+    <nav className="grid grid-cols-5 py-5">
+      <div className="col-span-1">{backButton ? <HistoryBackButton /> : <span />}</div>
+      <h1 className="col-span-3 text-center">{title}</h1>
+      <span className="col-span-1" />
+    </nav>
+  );
+};
+
+export default AppBar;

src/components/common/DialogButton.tsx

@@ -25,7 +25,7 @@ function DialogButton({ classname, name, title, desc, children }: Props) {
 
   return (
     <div>
-      <button className={classname} onClick={() => openModal(dialogRef)}>
+      <button type="button" className={classname} onClick={() => openModal(dialogRef)}>
         {name}
       </button>
       <Dialog ref={dialogRef} title={title} desc={desc}>

src/components/common/HistoryBackButton.tsx

@@ -8,20 +8,14 @@ const HistoryBackButton: React.FC = () => {
   };
 
   return (
-    <div className="mr-auto w-3 md:w-4">
-      <svg
-        onClick={handleBack}
-        className={'shrink-0'}
-        width="100%"
-        height="100%"
-        viewBox="0 0 256 512"
-        fill="#429400"
-        preserveAspectRatio="xMinYMin meet"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path d="M9.4 278.6c-12.5-12.5-12.5-32.8 0-45.3l128-128c9.2-9.2 22.9-11.9 34.9-6.9s19.8 16.6 19.8 29.6l0 256c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-128-128z" />
+    <button type="button" onClick={handleBack}>
+      <svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M10.7 15.1595C11.6989 15.7893 13 15.0714 13 13.8907L13 2.10951C13 0.928727 11.6989 0.21091 10.7 0.840621L1.35638 6.73119C0.422984 7.31964 0.422986 8.68052 1.35638 9.26897L10.7 15.1595Z"
+          fill="#429400"
+        />
       </svg>
-    </div>
+    </button>
   );
 };