From 71f354a6146551da6e32efdbb8975d5d696d8349 Mon Sep 17 00:00:00 2001
From: backward99 <wjeeho@naver.com>
Date: Wed, 1 Nov 2023 23:39:38 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20CreateEventTemplate=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CreateEventTemplate.tsx                   | 223 +++++++++++++
 .../templates/CreateEventTemplate/index.ts    |   3 +
 src/pages/EventPage/CreateEventPage.tsx       | 306 +-----------------
 3 files changed, 228 insertions(+), 304 deletions(-)
 create mode 100644 src/components/templates/CreateEventTemplate/CreateEventTemplate.tsx
 create mode 100644 src/components/templates/CreateEventTemplate/index.ts

diff --git a/src/components/templates/CreateEventTemplate/CreateEventTemplate.tsx b/src/components/templates/CreateEventTemplate/CreateEventTemplate.tsx
new file mode 100644
index 00000000..57c83dea
--- /dev/null
+++ b/src/components/templates/CreateEventTemplate/CreateEventTemplate.tsx
@@ -0,0 +1,223 @@
+import { VStack, Input, Divider, FormErrorMessage, HStack, Flex, Text } from '@chakra-ui/react';
+import { useForm } from 'react-hook-form';
+import { UseFormRegister, FieldValues, FieldErrors } from 'react-hook-form';
+import { FormTextarea } from './../../molecules/FormTextarea';
+import { BorderBox } from '~/components/atoms/BorderBox';
+import { Button } from '~/components/atoms/Button';
+import { FormLabel } from '~/components/atoms/FormLabel';
+import { FormControl } from '~/components/molecules/FormControl';
+import { FormDateInput } from '~/components/molecules/FormDateInput';
+import FormTextInput from '~/components/molecules/FormTextInput/FormTextInput';
+import { LabelCheckboxGroup } from '~/components/molecules/LabelCheckboxGroup';
+
+//Todo: TermInputProps 부분은 컴포넌트가 추가되면 제거
+type TermInputProps = {
+  startDateName: string;
+  endDateName: string;
+  isEndDateDisabled?: boolean;
+  isRequired?: boolean;
+  register: UseFormRegister<FieldValues>;
+  errors: FieldErrors<FieldValues>;
+  type?: 'date' | 'datetime-local';
+};
+
+const TermInput = ({
+  startDateName,
+  endDateName,
+  isEndDateDisabled = false,
+  isRequired = false,
+  register,
+  errors,
+  type,
+}: TermInputProps) => {
+  return (
+    <HStack flexGrow={1}>
+      <FormControl isInvalid={!!errors[startDateName]}>
+        <Input
+          id={startDateName}
+          type={type}
+          {...register(startDateName, {
+            required: isRequired ? '시작일을 입력하세요.' : false,
+            valueAsDate: true,
+          })}
+        />
+        <FormErrorMessage>
+          {errors.startDateName && errors.startDateName.message?.toString()}
+        </FormErrorMessage>
+      </FormControl>
+      <Divider
+        w={'1rem'}
+        borderColor={'gray.400'}
+      />
+      <FormControl isInvalid={!!errors[endDateName]}>
+        <VStack
+          flexGrow={1}
+          alignItems={'start'}
+        >
+          <Input
+            id={endDateName}
+            type={type}
+            disabled={isEndDateDisabled}
+            {...register(endDateName, {
+              required: isRequired ? '종료일을 입력하세요.' : false,
+              valueAsDate: true,
+            })}
+          />
+          <FormErrorMessage>
+            {errors.endDateName && errors.endDateName.message?.toString()}
+          </FormErrorMessage>
+        </VStack>
+      </FormControl>
+    </HStack>
+  );
+};
+
+const CreateEventTemplate = () => {
+  const {
+    control,
+    handleSubmit,
+    register,
+    formState: { errors, isSubmitting },
+  } = useForm();
+
+  const onSubmit = (values: { [key: string]: string }) => {
+    return new Promise(() => {
+      setTimeout(() => {
+        alert(JSON.stringify(values, null, 2));
+      }, 3000);
+    });
+  };
+
+  return (
+    <>
+      <Text
+        mt={'3rem'}
+        fontSize={'2xl'}
+        fontWeight={600}
+        color={'gray.900'}
+      >
+        첨삭 이벤트 생성
+      </Text>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <BorderBox>
+          <Flex
+            direction={'column'}
+            gap={'1.25rem'}
+          >
+            <FormControl isInvalid={!!errors['title']}>
+              <FormLabel
+                htmlFor={'title'}
+                isRequired={true}
+              >
+                이벤트 제목
+              </FormLabel>
+
+              <FormTextInput
+                w={'100%'}
+                id="title"
+                register={{ ...register('title', { required: true }) }}
+                errors={errors}
+                placeholder="이벤트 제목을 입력해주세요."
+              />
+            </FormControl>
+            <FormControl isInvalid={!!errors['maximumAttendee']}>
+              <FormLabel
+                htmlFor={'maximumAttendee'}
+                isRequired={true}
+              >
+                인원 수
+              </FormLabel>
+              <FormTextInput
+                id="maximumAttendee"
+                register={{
+                  ...register('maximumAttendee', {
+                    required: true,
+                    max: { value: 10, message: '10이하로 입력해 주세요.' },
+                    min: { value: 2, message: '2이상 입력해 주세요.' },
+                    pattern: { value: /^(?:[2-9]|10)$/, message: '숫자를 입력해 주세요.' },
+                  }),
+                }}
+                errors={errors}
+                placeholder="신청 받을 인원 수(2~10)를 입력해주세요."
+              />
+            </FormControl>
+            <FormControl
+              spacing="1.63rem"
+              isInvalid={!!errors['positions']}
+            >
+              <FormLabel
+                htmlFor={'positions'}
+                isRequired={true}
+              >
+                직무
+              </FormLabel>
+              <LabelCheckboxGroup
+                control={control}
+                name="positions"
+                variant="role"
+              />
+            </FormControl>
+            <HStack spacing={'1.6rem'}>
+              <FormLabel isRequired={true}>신청 기간</FormLabel>
+              <TermInput
+                type="datetime-local"
+                errors={errors}
+                register={register}
+                isRequired={true}
+                endDateName="closeDateTime"
+                startDateName="openDateTime"
+              />
+            </HStack>
+            <FormControl isInvalid={!!errors['endDate']}>
+              <FormLabel isRequired={true}>첨삭 종료일</FormLabel>
+              <FormDateInput
+                w={'100%'}
+                maxW={'386px'}
+                register={{ ...register('endDate', { required: true }) }}
+              />
+            </FormControl>
+            <FormControl
+              spacing="1.63rem"
+              isInvalid={!!errors['content']}
+            >
+              <FormLabel
+                htmlFor={'content'}
+                isRequired={true}
+              >
+                내용
+              </FormLabel>
+              <FormTextarea
+                errors={errors}
+                id="content"
+                register={{ ...register('content', { required: true }) }}
+                placeholder="이벤트에 대한 상세 내용을 입력해주세요."
+              />
+            </FormControl>
+          </Flex>
+        </BorderBox>
+        <Flex>
+          <Button
+            ml={'auto'}
+            size={'md'}
+            mt={'2.62rem'}
+            isLoading={isSubmitting}
+            type="button"
+          >
+            미리보기
+          </Button>
+          <Button
+            size={'md'}
+            ml={'2.06rem'}
+            mt={'2.62rem'}
+            isLoading={isSubmitting}
+            type="submit"
+          >
+            등록하기
+          </Button>
+        </Flex>
+      </form>
+    </>
+  );
+};
+
+export default CreateEventTemplate;
diff --git a/src/components/templates/CreateEventTemplate/index.ts b/src/components/templates/CreateEventTemplate/index.ts
new file mode 100644
index 00000000..47c14c74
--- /dev/null
+++ b/src/components/templates/CreateEventTemplate/index.ts
@@ -0,0 +1,3 @@
+import CreateEventTemplate from './CreateEventTemplate';
+
+export { CreateEventTemplate };
diff --git a/src/pages/EventPage/CreateEventPage.tsx b/src/pages/EventPage/CreateEventPage.tsx
index 827eed4c..faacb6b2 100644
--- a/src/pages/EventPage/CreateEventPage.tsx
+++ b/src/pages/EventPage/CreateEventPage.tsx
@@ -1,309 +1,7 @@
-import {
-  Divider,
-  Flex,
-  FormErrorMessage,
-  HStack,
-  Input,
-  Text,
-  Textarea,
-  VStack,
-} from '@chakra-ui/react';
-import { useForm } from 'react-hook-form';
-import { BorderBox } from '~/components/atoms/BorderBox';
-import { Button } from '~/components/atoms/Button';
-import FormLabel from '~/components/atoms/FormLabel/FormLabel';
-import { FormControl } from '~/components/molecules/FormControl';
-import FormDateInput from '~/components/molecules/FormDateInpur/FormDateInput';
-import { LabelCheckboxGroup } from '~/components/molecules/LabelCheckboxGroup';
-import { FormInputSchema } from '~/types/formInput';
+import { CreateEventTemplate } from '~/components/templates/CreateEventTemplate';
 
 const CreateEventPage = () => {
-  const {
-    control,
-    handleSubmit,
-    register,
-    formState: { errors, isSubmitting },
-  } = useForm();
-
-  const onSubmit = (values: { [key: string]: string }) => {
-    return new Promise(() => {
-      setTimeout(() => {
-        alert(JSON.stringify(values, null, 2));
-      }, 3000);
-    });
-  };
-
-  const FORM_TEXT_INPUT_SCHEMA: FormInputSchema = {
-    eventTitle: {
-      errorTypes: {
-        required: true,
-      },
-      label: '이벤트 제목',
-      placeholder: '이벤트 제목을 입력해주세요.',
-    },
-    headCount: {
-      label: '인원 수',
-      placeholder: '신청 받을 인원 수(2~10)를 입력해주세요.',
-      errorTypes: {
-        required: true,
-        max: { message: '10명 이하로 입력해 주세요.', value: 10 },
-        min: { message: '2명 이상 입력해 주세요.', value: 2 },
-      },
-    },
-  };
-
-  const FORM_EVENT_DATE_INPUT_SCHEMA: FormInputSchema = {
-    openEventDate: {
-      type: 'datetime-local',
-      label: '신청 기간',
-      placeholder: '',
-      errorTypes: {
-        required: true,
-      },
-    },
-    closeEventDate: {
-      type: 'datetime-local',
-      label: '',
-      placeholder: '',
-      errorTypes: {
-        required: true,
-      },
-    },
-  };
-
-  const FORM_RESUME_DATE_INPUT_SCHEMA: FormInputSchema = {
-    endEventDate: {
-      type: 'date',
-      label: '첨삭 종료일',
-      placeholder: '',
-      errorTypes: {
-        required: true,
-      },
-    },
-  };
-
-  const FORM_TEXT_AREA_INPUT_SCHEMA: FormInputSchema = {
-    eventContent: {
-      errorTypes: {
-        required: true,
-      },
-      label: '내용',
-      placeholder: '이벤트에 대한 상세 내용을 입력해주세요.',
-    },
-  };
-
-  return (
-    <>
-      <Text
-        mt={'3rem'}
-        fontSize={'2xl'}
-        fontWeight={600}
-        color={'gray.900'}
-      >
-        첨삭 이벤트 생성
-      </Text>
-      <form onSubmit={handleSubmit(onSubmit)}>
-        <Flex
-          mt={'2.81rem'}
-          gap={'1.25rem'}
-          direction={'column'}
-        >
-          {Object.keys(FORM_TEXT_INPUT_SCHEMA).map((key) => (
-            <BorderBox key={key}>
-              <FormControl
-                spacing="1.63rem"
-                isInvalid={!!errors[key]}
-              >
-                <FormLabel
-                  alignSelf={'center'}
-                  htmlFor={key}
-                  isRequired={'required' in FORM_TEXT_INPUT_SCHEMA[key].errorTypes}
-                >
-                  {FORM_TEXT_INPUT_SCHEMA[key].label}
-                </FormLabel>
-                <Flex
-                  direction={'column'}
-                  w={'100%'}
-                >
-                  <Input
-                    w={'43.5rem'}
-                    id={key}
-                    placeholder={FORM_TEXT_INPUT_SCHEMA[key].placeholder}
-                    {...register(key, { ...FORM_TEXT_INPUT_SCHEMA[key].errorTypes })}
-                  />
-                  {errors[key]?.message && (
-                    <FormErrorMessage>{errors[key]?.message as string}</FormErrorMessage>
-                  )}
-                </Flex>
-              </FormControl>
-            </BorderBox>
-          ))}
-          <BorderBox>
-            <FormControl
-              spacing="1.63rem"
-              isInvalid={!!errors['jobs']}
-            >
-              <FormLabel
-                htmlFor="jobs"
-                isRequired
-              >
-                직무
-              </FormLabel>
-              <LabelCheckboxGroup
-                required={false}
-                variant="role"
-                control={control}
-                name="jobs"
-              />
-            </FormControl>
-          </BorderBox>
-
-          <BorderBox>
-            <HStack spacing="2.17rem">
-              <FormControl
-                w={'fit-content'}
-                spacing="1.63rem"
-                isInvalid={!!errors['openEventDate']}
-                key={'openEventDate'}
-              >
-                {FORM_EVENT_DATE_INPUT_SCHEMA['openEventDate'].label && (
-                  <FormLabel
-                    alignSelf={'center'}
-                    htmlFor={'openEventDate'}
-                    isRequired={
-                      'required' in FORM_EVENT_DATE_INPUT_SCHEMA['openEventDate'].errorTypes
-                    }
-                  >
-                    {FORM_EVENT_DATE_INPUT_SCHEMA['openEventDate'].label}
-                  </FormLabel>
-                )}
-                <VStack justifyContent={'space-between'}>
-                  <FormDateInput
-                    w={'13rem'}
-                    type="datetime-local"
-                    control={control}
-                    dateRegister={{
-                      ...register('openEventDate', {
-                        ...FORM_EVENT_DATE_INPUT_SCHEMA['openEventDate'].errorTypes,
-                      }),
-                    }}
-                    timeRegister={{
-                      ...register(`${'openEventDate'}Time`, {
-                        ...FORM_EVENT_DATE_INPUT_SCHEMA['openEventDate'].errorTypes,
-                      }),
-                    }}
-                    id={'openEventDate'}
-                  />
-                </VStack>
-              </FormControl>
-              <Divider
-                w={'1.75rem'}
-                h={'0.0625rem'}
-                border={'1px'}
-                borderColor={'gray.400'}
-                bgColor={'gray.400'}
-              />
-              <FormControl
-                w={'fit-content'}
-                spacing="1.63rem"
-                isInvalid={!!errors['closeEventDate']}
-                key={'closeEventDate'}
-              >
-                <VStack justifyContent={'space-between'}>
-                  <FormDateInput
-                    w={'13rem'}
-                    type="datetime-local"
-                    control={control}
-                    dateRegister={{
-                      ...register('closeEventDate', {
-                        ...FORM_EVENT_DATE_INPUT_SCHEMA['closeEventDate'].errorTypes,
-                      }),
-                    }}
-                    timeRegister={{
-                      ...register(`${'closeEventDate'}Time`, {
-                        ...FORM_EVENT_DATE_INPUT_SCHEMA['closeEventDate'].errorTypes,
-                      }),
-                    }}
-                    id={'closeEventDate'}
-                  />
-                </VStack>
-              </FormControl>
-            </HStack>
-          </BorderBox>
-          <BorderBox>
-            <FormControl
-              spacing="1.63rem"
-              isInvalid={!!errors['endEventDate']}
-              key={'endEventDate'}
-            >
-              {FORM_RESUME_DATE_INPUT_SCHEMA['endEventDate'].label && (
-                <FormLabel
-                  alignSelf={'center'}
-                  htmlFor={'endEventDate'}
-                  isRequired={
-                    'required' in FORM_RESUME_DATE_INPUT_SCHEMA['endEventDate'].errorTypes
-                  }
-                >
-                  {FORM_RESUME_DATE_INPUT_SCHEMA['endEventDate'].label}
-                </FormLabel>
-              )}
-              <Flex direction={'column'}>
-                <FormDateInput
-                  w={'13rem'}
-                  control={control}
-                  dateRegister={{
-                    ...register('endEventDate', {
-                      ...FORM_RESUME_DATE_INPUT_SCHEMA['endEventDate'].errorTypes,
-                    }),
-                  }}
-                  id={'endEventDate'}
-                />
-              </Flex>
-            </FormControl>
-          </BorderBox>
-          <BorderBox>
-            <FormControl
-              spacing="1.63rem"
-              isInvalid={!!errors['eventContent']}
-            >
-              <FormLabel
-                htmlFor="eventContent"
-                isRequired
-              >
-                {FORM_TEXT_AREA_INPUT_SCHEMA['eventContent'].label}
-              </FormLabel>
-              <Textarea
-                w={'43.5rem'}
-                h={'26.75rem'}
-                id="eventContent"
-                placeholder={FORM_TEXT_AREA_INPUT_SCHEMA['eventContent'].placeholder}
-              />
-            </FormControl>
-          </BorderBox>
-        </Flex>
-        <Flex>
-          <Button
-            ml={'auto'}
-            size={'md'}
-            mt={'2.62rem'}
-            isLoading={isSubmitting}
-            type="button"
-          >
-            미리보기
-          </Button>
-          <Button
-            size={'md'}
-            ml={'2.06rem'}
-            mt={'2.62rem'}
-            isLoading={isSubmitting}
-            type="submit"
-          >
-            등록하기
-          </Button>
-        </Flex>
-      </form>
-    </>
-  );
+  return <CreateEventTemplate />;
 };
 
 export default CreateEventPage;