Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gmmq 170 feat: 이벤트 생성 페이지 UI 개발 #20

Merged
merged 22 commits into from
Nov 3, 2023
Merged

Gmmq 170 feat: 이벤트 생성 페이지 UI 개발 #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
50d29bd
feat: FormDateInput 컴포넌트 추가
backward99 Oct 31, 2023
b08abbe
feat: FormDateInput 스토리 파일 생성
backward99 Oct 31, 2023
4d49bc0
fix: 파일 경로 수정
backward99 Oct 31, 2023
5381706
chore: FormInput 사용하던 곳 변경
backward99 Oct 31, 2023
89f3d8e
feat: 이벤트 생성 페이지 컴포넌트 구성
backward99 Oct 31, 2023
2776ece
feat: 사용하지 않는 컴포넌트 제거
backward99 Oct 31, 2023
969d614
fix: 사용하지 않는 컴포넌트 교체
backward99 Oct 31, 2023
ede2349
feat: 검사 내용 추가
backward99 Oct 31, 2023
100de79
fix: 사용하지 않는 컴포넌트 제거
backward99 Oct 31, 2023
d4232bd
fix: 컴포넌트 적용
backward99 Oct 31, 2023
27846b3
fix: 사용하지 않는 컴포넌트 제거
backward99 Oct 31, 2023
2568c5a
chore: 충돌 해결
backward99 Nov 1, 2023
ad43fb5
chore: 사용하지 않는 컴포넌트 삭제
backward99 Nov 1, 2023
9cdcd7e
feat: FormLabel - index 파일 생성
backward99 Nov 1, 2023
b1b2488
fix: FormTextInput 컴포넌트, 스토리 파일 수정
backward99 Nov 1, 2023
785bb53
feat: FormTextarea 컴포넌트 생성
backward99 Nov 1, 2023
bb2edd0
fix: 컴포넌트 별 스토리 파일 수정
backward99 Nov 1, 2023
e855e89
feat: CreateEventTemplate 생성
backward99 Nov 1, 2023
86652f2
chore: 충돌 해결
backward99 Nov 1, 2023
bf07aab
chore: FormDateInput 사용하는 곳 props 적용
backward99 Nov 2, 2023
f788fe5
refactor: rebase 후 TermInput 적용
backward99 Nov 2, 2023
4528d13
fix: rebase 후 코드 수정
backward99 Nov 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/components/atoms/FormLabel/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import FormLabel from './FormLabel';

export { FormLabel };
2 changes: 1 addition & 1 deletion src/components/molecules/FormControl/FormControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ type FormControlProps = {
} & ChakraFormControlProps;

const FormControl = ({
spacing = '0',
spacing = '1.63rem',
direction = 'row',
children,
...props
Expand Down
103 changes: 33 additions & 70 deletions src/components/molecules/FormControl/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import { Flex } from '@chakra-ui/react';
import type { Meta } from '@storybook/react';
import { useForm } from 'react-hook-form';
import FormControl from './FormControl';
import { FormDateInput } from '../FormDateInput';
import { FormTextInput } from '../FormTextInput';
import { BorderBox } from '~/components/atoms/BorderBox';
import { Button } from '~/components/atoms/Button';
import FormLabel from '~/components/atoms/FormLabel/FormLabel';
import { FormInputSchema } from '~/types/formInput';
import { FormLabel } from '~/components/atoms/FormLabel';

const meta = {
title: 'Resumeme/Components/FormControl',
Expand All @@ -31,43 +29,24 @@ export const DefaultFormControl = () => {
});
};

const FORM_RESUME_DATE_INPUT_SCHEMA: FormInputSchema = {
endEventDate: {
type: 'date',
label: '첨삭 종료일',
placeholder: '',
errorTypes: {
required: true,
},
},
};

return (
<form onSubmit={handleSubmit(onSubmit)}>
<BorderBox>
<FormControl
isInvalid={!!errors['endEventDate']}
key={'endEventDate'}
>
{FORM_RESUME_DATE_INPUT_SCHEMA['endEventDate'].label && (
<FormLabel
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={'16rem'}
register={{
...register('endEventDate', {
...FORM_RESUME_DATE_INPUT_SCHEMA['endEventDate'].errorTypes,
}),
}}
name={'endEventDate'}
/>
</Flex>
<FormControl isInvalid={!!errors['title']}>
<FormLabel
htmlFor={'title'}
isRequired={true}
>
이벤트 제목
</FormLabel>

<FormTextInput
w={'100%'}
id="title"
register={{ ...register('title', { required: true }) }}
errors={errors}
placeholder="이벤트 제목을 입력해주세요."
/>
</FormControl>
</BorderBox>
<Button
Expand Down Expand Up @@ -98,44 +77,28 @@ export const ColumnFormControl = () => {
});
};

const FORM_RESUME_DATE_INPUT_SCHEMA: FormInputSchema = {
endEventDate: {
type: 'date',
label: '첨삭 종료일',
placeholder: '',
errorTypes: {
required: true,
},
},
};

return (
<form onSubmit={handleSubmit(onSubmit)}>
<BorderBox>
<FormControl
direction="column"
isInvalid={!!errors['endEventDate']}
key={'endEventDate'}
spacing="0.5rem"
isInvalid={!!errors['title']}
>
{FORM_RESUME_DATE_INPUT_SCHEMA['endEventDate'].label && (
<FormLabel
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={'16rem'}
register={{
...register('endEventDate', {
...FORM_RESUME_DATE_INPUT_SCHEMA['endEventDate'].errorTypes,
}),
}}
name={'endEventDate'}
/>
</Flex>
<FormLabel
htmlFor={'title'}
isRequired={true}
>
이벤트 제목
</FormLabel>

<FormTextInput
w={'100%'}
id="title"
register={{ ...register('title', { required: true }) }}
errors={errors}
placeholder="이벤트 제목을 입력해주세요."
/>
</FormControl>
</BorderBox>
<Button
Expand Down
9 changes: 6 additions & 3 deletions src/components/molecules/FormDateInput/FormDateInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Input, InputProps, VStack, FormErrorMessage } from '@chakra-ui/react';
import { Input, InputProps, FormErrorMessage, Flex } from '@chakra-ui/react';
import { UseFormRegisterReturn, FieldErrors } from 'react-hook-form';

type FormDateInputProps = {
Expand All @@ -18,7 +18,10 @@ const FormDateInput = ({
...props
}: FormDateInputProps) => {
return (
<VStack w={'100%'}>
<Flex
w={'100%'}
direction={'column'}
>
<Input
type={type}
disabled={isDisabled}
Expand All @@ -28,7 +31,7 @@ const FormDateInput = ({
{errors && (
<FormErrorMessage>{errors[name] && errors[name]?.message?.toString()}</FormErrorMessage>
)}
</VStack>
</Flex>
);
};

Expand Down
120 changes: 10 additions & 110 deletions src/components/molecules/FormDateInput/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import { Flex, HStack } from '@chakra-ui/react';
import type { Meta } from '@storybook/react';
import { useForm } from 'react-hook-form';
import FormDateInput from './FormDateInput';
import FormControl from '../FormControl/FormControl';
import { FormControl } from '../FormControl';
import { BorderBox } from '~/components/atoms/BorderBox';
import { Button } from '~/components/atoms/Button';
import FormLabel from '~/components/atoms/FormLabel/FormLabel';
import { FormInputSchema } from '~/types/formInput';
import { FormLabel } from '~/components/atoms/FormLabel';

const meta = {
title: 'Resumeme/Components/FormDateInput',
Expand All @@ -31,115 +29,17 @@ export const DefaultFormDateInput = () => {
});
};

const FORM_RESUME_DATE_INPUT_SCHEMA: FormInputSchema = {
endEventDate: {
type: 'date',
label: '첨삭 종료일',
placeholder: '',
errorTypes: {
required: true,
},
},
};

return (
<form onSubmit={handleSubmit(onSubmit)}>
<BorderBox>
<FormControl
isInvalid={!!errors['endEventDate']}
key={'endEventDate'}
>
<HStack spacing={0}>
{FORM_RESUME_DATE_INPUT_SCHEMA['endEventDate'].label && (
<FormLabel
htmlFor={'endEventDate'}
isRequired={'required' in FORM_RESUME_DATE_INPUT_SCHEMA['endEventDate'].errorTypes}
>
{FORM_RESUME_DATE_INPUT_SCHEMA['endEventDate'].label}
</FormLabel>
)}
<Flex direction={'column'}>
<FormDateInput
name="endEventDate"
w={'16rem'}
register={{
...register('endEventDate', {
...FORM_RESUME_DATE_INPUT_SCHEMA['endEventDate'].errorTypes,
}),
}}
/>
</Flex>
</HStack>
</FormControl>
</BorderBox>
<Button
size={'md'}
ml={'2.06rem'}
mt={'2.62rem'}
isLoading={isSubmitting}
type="submit"
>
등록하기
</Button>
</form>
);
};

export const TimeFormDateInput = () => {
const {
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_RESUME_DATE_INPUT_SCHEMA: FormInputSchema = {
endEventDate: {
type: 'datetime-local',
label: '첨삭 종료일',
placeholder: '',
errorTypes: {
required: true,
},
},
};

return (
<form onSubmit={handleSubmit(onSubmit)}>
<BorderBox>
<FormControl
isInvalid={!!errors['endEventDate']}
key={'endEventDate'}
>
<HStack spacing={0}>
{FORM_RESUME_DATE_INPUT_SCHEMA['endEventDate'].label && (
<FormLabel
htmlFor={'endEventDate'}
isRequired={'required' in FORM_RESUME_DATE_INPUT_SCHEMA['endEventDate'].errorTypes}
>
{FORM_RESUME_DATE_INPUT_SCHEMA['endEventDate'].label}
</FormLabel>
)}
<Flex direction={'column'}>
<FormDateInput
type="datetime-local"
w={'16rem'}
register={{
...register('endEventDate', {
...FORM_RESUME_DATE_INPUT_SCHEMA['endEventDate'].errorTypes,
}),
}}
name={'endEventDate'}
/>
</Flex>
</HStack>
<FormControl isInvalid={!!errors['endDate']}>
<FormLabel isRequired={true}>첨삭 종료일</FormLabel>
<FormDateInput
name="endDate"
w={'100%'}
maxW={'386px'}
register={{ ...register('endDate', { required: true }) }}
/>
</FormControl>
</BorderBox>
<Button
Expand Down
56 changes: 16 additions & 40 deletions src/components/molecules/FormTextInput/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import { Flex } from '@chakra-ui/react';
import type { Meta } from '@storybook/react';
import { useForm } from 'react-hook-form';
import FormTextInput from './FormTextInput';
import FormControl from '../FormControl/FormControl';
import { BorderBox } from '~/components/atoms/BorderBox';
import { Button } from '~/components/atoms/Button';
import FormLabel from '~/components/atoms/FormLabel/FormLabel';
import { FormInputSchema } from '~/types/formInput';
import { FormLabel } from '~/components/atoms/FormLabel';

const meta = {
title: 'Resumeme/Components/FormTextInput',
Expand All @@ -31,46 +29,24 @@ export const DefaultFormTextInput = () => {
});
};

const FORM_RESUME_TEXT_INPUT_SCHEMA: FormInputSchema = {
title: {
label: '제목',
placeholder: '제목을 입력하세요',
errorTypes: {
required: { value: true, message: '필수 입력값 입니다.' },
},
},
};

return (
<form onSubmit={handleSubmit(onSubmit)}>
<BorderBox>
<FormControl
isInvalid={!!errors['title']}
key={'title'}
>
<Flex>
{FORM_RESUME_TEXT_INPUT_SCHEMA['title'].label && (
<FormLabel
htmlFor={'title'}
isRequired={'required' in FORM_RESUME_TEXT_INPUT_SCHEMA['title'].errorTypes}
>
{FORM_RESUME_TEXT_INPUT_SCHEMA['title'].label}
</FormLabel>
)}
<Flex direction={'column'}>
<FormTextInput
errors={errors}
w={'25rem'}
register={{
...register('title', {
...FORM_RESUME_TEXT_INPUT_SCHEMA['title'].errorTypes,
}),
}}
id={'title'}
placeholder={FORM_RESUME_TEXT_INPUT_SCHEMA['title'].placeholder}
/>
</Flex>
</Flex>
<FormControl isInvalid={!!errors['title']}>
<FormLabel
htmlFor={'title'}
isRequired={true}
>
이벤트 제목
</FormLabel>

<FormTextInput
w={'100%'}
id="title"
register={{ ...register('title', { required: true }) }}
errors={errors}
placeholder="이벤트 제목을 입력해주세요."
/>
</FormControl>
</BorderBox>
<Button
Expand Down
Loading