Skip to content

Commit

Permalink
fix: 컴포넌트 별 스토리 파일 수정
Browse files Browse the repository at this point in the history
  • Loading branch information
@backward99
backward99 committed Nov 1, 2023
1 parent 2bb0833 commit a2d183a
Show file tree
Hide file tree
Showing 3 changed files with 73 additions and 88 deletions.
2 changes: 1 addition & 1 deletion src/components/molecules/FormControl/FormControl.tsx
View file
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
105 changes: 32 additions & 73 deletions src/components/molecules/FormControl/index.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
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 { FormInputSchema } from '~/types/formInput';
import { FormLabel } from '~/components/atoms/FormLabel';

const meta = {
Expand All @@ -18,7 +16,6 @@ export default meta;

export const DefaultFormControl = () => {
const {
control,
handleSubmit,
register,
formState: { errors, isSubmitting },
Expand All @@ -32,44 +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'}
control={control}
dateRegister={{
...register('endEventDate', {
...FORM_RESUME_DATE_INPUT_SCHEMA['endEventDate'].errorTypes,
}),
}}
id={'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 All @@ -87,7 +64,6 @@ export const DefaultFormControl = () => {

export const ColumnFormControl = () => {
const {
control,
handleSubmit,
register,
formState: { errors, isSubmitting },
Expand All @@ -101,45 +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'}
control={control}
dateRegister={{
...register('endEventDate', {
...FORM_RESUME_DATE_INPUT_SCHEMA['endEventDate'].errorTypes,
}),
}}
id={'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
54 changes: 40 additions & 14 deletions src/components/molecules/FormDateInput/index.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
import type { Meta } from '@storybook/react';
import { useForm } from 'react-hook-form';
import FormDateInput from './FormDateInput';
import { FormControl } from '../FormControl';
import { BorderBox } from '~/components/atoms/BorderBox';
import { Button } from '~/components/atoms/Button';
import { FormLabel } from '~/components/atoms/FormLabel';

const meta = {
title: 'Resumeme/Components/FormDateInput',
Expand All @@ -10,20 +15,41 @@ const meta = {
export default meta;

export const DefaultFormDateInput = () => {
// const {
// control,
// handleSubmit,
// register,
// formState: { errors, isSubmitting },
// } = useForm();
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 onSubmit = (values: { [key: string]: string }) => {
return new Promise(() => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
}, 3000);
});
};

return <></>;
return (
<form onSubmit={handleSubmit(onSubmit)}>
<BorderBox>
<FormControl isInvalid={!!errors['endDate']}>
<FormLabel isRequired={true}>첨삭 종료일</FormLabel>
<FormDateInput
w={'100%'}
maxW={'386px'}
register={{ ...register('endDate', { required: true }) }}
/>
</FormControl>
</BorderBox>
<Button
size={'md'}
ml={'2.06rem'}
mt={'2.62rem'}
isLoading={isSubmitting}
type="submit"
>
등록하기
</Button>
</form>
);
};

0 comments on commit a2d183a

Please sign in to comment.