components

FormField

'use client';import{FormProvider,useForm}from'react-hook-form';import{zodResolver}from'@hookform/resolvers/zod';import{z}from'zod';import{FormCheckbox,FormCheckboxGroup,FormCheckboxItem,}from'@/components/FormField/FormCheckbox';import{FormControl}from'@/components/FormField/FormControl';importFormDatePickerfrom'@/components/FormField/FormDatePicker';importFormFieldfrom'@/components/FormField/FormField';importFormHintfrom'@/components/FormField/FormHint';importFormImageUploadfrom'@/components/FormField/FormImageUpload';importFormInputfrom'@/components/FormField/FormInput';importFormLabelfrom'@/components/FormField/FormLabel';import{FormRadio,FormRadioGroup}from'@/components/FormField/FormRadio';importFormSelectfrom'@/components/FormField/FormSelect';importFormTextAreafrom'@/components/FormField/FormTextArea';constschema=z.object({email: z.email('올바른 이메일 형식을 입력하세요.'),password: z.string().min(1,'한글자 이상 입력 필요').max(10,'열글자 이하 입력 필요'),plan: z.preprocess((val)=>val??'',z.string().min(1,'요금제를 선택 해주세요')),description: z.string().min(10,'10자 이상 입력 필요'),interests: z.array(z.string()).min(0,''),agreement: z.boolean().refine((val)=>val===true,{message: '동의가 필요합니다',}),images: z.record(z.string(),z.instanceof(File).nullable()).refine((images)=>Object.keys(images).length>=1,{message: '최소 1개 이상의 이미지를 업로드해주세요',}),repeat: z.string().min(1,'반복 횟수를 설정해주세요'),date: z.date("날짜를 선택해주세요")});constHome=()=>{constmethods=useForm({resolver: zodResolver(schema),mode: 'onChange',defaultValues: {email: '',password: '',plan: 'pro',description: '',interests: [],agreement: false,images: {},repeat: '',date: undefined},});constonSubmit=(data: z.infer<typeofschema>)=>{console.log(data);};return(<divclassName='ml-100'><FormProvider{...methods}><formonSubmit={methods.handleSubmit(onSubmit)}><FormFieldname='email'><FormLabelrequired>이메일</FormLabel><FormInputplaceholder='email@example.com'type='email'/><FormHint/></FormField><FormFieldname='password'><FormLabelrequired>비밀번호</FormLabel><FormInputplaceholder='password'type='password'/><FormHint/></FormField><FormFieldname='plan'><FormLabelrequired>요금제 선택</FormLabel><FormRadioGroup><FormRadiovalue='basic'>베이직</FormRadio><FormRadiovalue='pro'>프로</FormRadio></FormRadioGroup><FormHint/></FormField><FormFieldname='description'><FormLabelrequired>자기소개</FormLabel><FormTextAreamaxLength={300}placeholder='입력해주세요'showCount/><FormHint/></FormField><FormFieldname='interests'><FormLabel>관심사</FormLabel><FormCheckboxGroup><FormCheckboxItemvalue='tech'>기술</FormCheckboxItem><FormCheckboxItemvalue='design'>디자인</FormCheckboxItem><FormCheckboxItemvalue='business'>비즈니스</FormCheckboxItem></FormCheckboxGroup><FormHint/></FormField><FormFieldname='agreement'><FormLabelrequired>약관 동의</FormLabel><FormCheckbox>이용 약관에 동의합니다</FormCheckbox><FormHint/></FormField><FormFieldname='images'><FormLabelrequired>상품 이미지</FormLabel><FormControl>{(field)=>(<FormImageUploadmaxFiles={5}mode='append'multiplevalue={field.value}onChange={field.onChange}/>)}</FormControl><FormHint/></FormField><FormFieldname='repeat'><FormLabelrequired>반복</FormLabel><FormControl>{(field)=>(<FormSelectlistMap={[{value: 'never',children: '반복 없음'},{value: 'once',children: '한번'},{value: 'infinite',children: '무한'},]}placeholder='값을 선택해주세요'value={field.value}onValueChange={field.onChange}/>)}</FormControl><FormHint/></FormField><FormFieldname='date'><FormLabelrequired>날짜 선택</FormLabel><FormControl>{(field)=>(<FormDatePickervalue={field.value}onChange={field.onChange}><FormDatePicker.Triggerplaceholder='날짜를 입력해주세요'/><FormDatePicker.Content/></FormDatePicker>)}</FormControl><FormHint/></FormField><button>출력</button></form></FormProvider></div>);};exportdefaultHome;

ui

Dropdown

constHome=()=>{constlistMap=[{label: 'option 1',onClick: ()=>console.log('option 1')},{label: 'option 2',onClick: ()=>console.log('option 2')},{label: 'option 3',onClick: ()=>console.log('option 3')},];return(<Dropdown><Dropdown.triggerclassName='border-1 border-black'>select</Dropdown.trigger><Dropdown.listclassName='absolute w-25 border-1 border-black'>{listMap.map(({ label, onClick },index)=>(<Dropdown.itemkey={index}onClick={onClick}>{label}</Dropdown.item>))}</Dropdown.list></Dropdown>);}

Tabs

constHome=()=>{const[selectedValue,setSelectedValue]=useState('created');constlistMap=[{value: 'created',children: '등록한 상품'},{value: 'favorite',children: '찜한 상품'},{value: 'reviewed',children: '리뷰 남긴 상품'},];return(<Tabsvalue={selectedValue}onValueChange={setSelectedValue}><Tabs.listclassName='flex w-fit flex-row gap-5 border-1'>{listMap.map(({ value, children })=>(<Tabs.itemkey={value}className='w-30 border-black data-[state=active]:border-b-1'value={value}>{children}</Tabs.item>))}</Tabs.list></Tabs>);}

Select

constHome=()=>{const[selectedValue,setSelectedValue]=useState('created');constlistMap=[{value: 'created',children: '최신순'},{value: 'favorite',children: '좋아요순'},{value: 'suggest',children: '추천순'},];return(<Selectvalue={selectedValue}onValueChange={setSelectedValue}><Select.trigger><Select.value/></Select.trigger><Select.list>{listMap.map(({ value, children })=>(<Select.itemkey={value}value={value}>{children}</Select.item>))}</Select.list></Select>);};

Modal

constModal=()=>{return(<ModalContentclassName='flex h-100 w-100 flex-col items-center justify-center bg-white'><ModalTitleclassName='sr-only'>다이얼로그 제목입니다</ModalTitle><ModalDescriptionclassName='sr-only'>다이얼로그 설명입니다</ModalDescription><input/><input/><input/><ModalCloseButton>닫기</ModalCloseButton></ModalContent>);};constHome=()=>{const{ open }=useModal();return<buttononClick={()=>open(<Modal/>)}>모달 열기</button>;};