Skip to content

Commit

Permalink
fix: mds TextField, TextArea에서 value prop을 필수로 요구하여 임시 처리
Browse files Browse the repository at this point in the history
  • Loading branch information
@simeunseo
simeunseo committed Jan 4, 2025
1 parent d9a78c2 commit 0ebf32e
Show file tree
Hide file tree
Showing 3 changed files with 49 additions and 15 deletions.
34 changes: 27 additions & 7 deletions src/components/members/upload/FormSection/Basic/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export default function MemberBasicFormSection() {
const {
control,
register,
watch,
formState: { errors },
getValues,
setValue,
Expand Down Expand Up @@ -76,6 +77,7 @@ export default function MemberBasicFormSection() {
<StyledTextField
disabled
{...register('name')}
value={watch('name') || ''}
isError={errors.hasOwnProperty('name')}
errorMessage={errors.name?.message}
placeholder='이름 입력'
Expand All @@ -85,20 +87,23 @@ export default function MemberBasicFormSection() {
<BirthdayInputWrapper>
<StyledTextField
{...register('birthday.year')}
value={watch('birthday.year') || ''}
placeholder='년도'
isError={errors.birthday?.hasOwnProperty('year')}
type='number'
pattern='\d*'
/>
<StyledTextField
{...register('birthday.month')}
value={watch('birthday.month') || ''}
placeholder='월'
isError={errors.birthday?.hasOwnProperty('month')}
type='number'
pattern='\d*'
/>
<StyledTextField
{...register('birthday.day')}
value={watch('birthday.day') || ''}
placeholder='일'
isError={errors.birthday?.hasOwnProperty('day')}
type='number'
Expand All @@ -114,36 +119,45 @@ export default function MemberBasicFormSection() {
onClick={(e) => handleBlind(e, 'isPhoneBlind', openMaskingPhoneModal)}
/>
</StyledBlindSwitch>
<StyledTextField {...register('phone')} placeholder='010XXXXXXXX' />
<StyledTextField {...register('phone')} value={watch('phone') || ''} placeholder='010XXXXXXXX' />
</FormItem>
<FormItem title='이메일' required errorMessage={errors.email?.message} className='maskable'>
<StyledTextField {...register('email')} type='email' placeholder='이메일 입력' />
<StyledTextField {...register('email')} value={watch('email') || ''} type='email' placeholder='이메일 입력' />
</FormItem>
<FormItem
title='활동 지역'
description={`가까운 지하철역을 작성해주세요. \n활동 지역이 여러개일 경우 쉼표(,)로 구분해서 적어주세요.`}
>
<StyledTextField
{...register('address')}
value={watch('address') || ''}
placeholder='ex) 광나루역, 서울역, 홍대입구역'
style={{ marginTop: '4px' }}
/>
</FormItem>
<Responsive only='desktop'>
<EducationInputWrapper>
<FormItem title='학교'>
<StyledEducationInput {...register('university')} placeholder='학교 입력' />
<StyledEducationInput
{...register('university')}
value={watch('university') || ''}
placeholder='학교 입력'
/>
</FormItem>
<FormItem title='전공'>
<StyledEducationInput {...register('major')} placeholder='전공 입력' />
<StyledEducationInput {...register('major')} value={watch('major') || ''} placeholder='전공 입력' />
</FormItem>
</EducationInputWrapper>
</Responsive>
<Responsive only='mobile' asChild>
<FormItem title='학교 / 전공'>
<EducationInputWrapper>
<StyledEducationInput {...register('university')} placeholder='학교 입력' />
<StyledEducationInput {...register('major')} placeholder='전공 입력' />
<StyledEducationInput
{...register('university')}
value={watch('university') || ''}
placeholder='학교 입력'
/>
<StyledEducationInput {...register('major')} value={watch('major') || ''} placeholder='전공 입력' />
</EducationInputWrapper>
</FormItem>
</Responsive>
Expand All @@ -152,7 +166,12 @@ export default function MemberBasicFormSection() {
<Controller
name='introduction'
render={({ field }) => (
<StyledTextarea {...field} placeholder='ex) 프로 밤샘러, 데드리프트 잘하고 싶어요 등 ' maxLength={15} />
<StyledTextarea
{...field}
placeholder='ex) 프로 밤샘러, 데드리프트 잘하고 싶어요 등 '
value={field.value}
maxLength={15}
/>
)}
control={control}
/>
Expand All @@ -164,6 +183,7 @@ export default function MemberBasicFormSection() {
<StyledTextarea
placeholder='ex) 프로 밤샘러, 데드리프트 잘하고 싶어요 등 '
{...field}
value={field.value}
maxLength={15}
fixedHeight={78}
/>
Expand Down
13 changes: 9 additions & 4 deletions src/components/members/upload/FormSection/Career.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ import { FormEvent, ReactNode } from 'react';
import { Controller, FieldError, useFieldArray, useFormContext, useWatch } from 'react-hook-form';

import BottomSheetSelect from '@/components/coffeechat/upload/CoffeechatForm/BottomSheetSelect';
import EditableSelect from '@/components/common/EditableSelect';
import Input from '@/components/common/Input';
import MonthPicker from '@/components/common/MonthPicker';
import Responsive from '@/components/common/Responsive';
import Switch from '@/components/common/Switch';
Expand All @@ -19,7 +17,6 @@ import { DEFAULT_CAREER, DEFAULT_LINK, LINK_TITLES } from '@/components/members/
import MemberFormItem from '@/components/members/upload/forms/FormItem';
import { MemberFormSection as FormSection } from '@/components/members/upload/forms/FormSection';
import Select from '@/components/members/upload/forms/Select';
import MemberSelectOptions from '@/components/members/upload/forms/SelectOptions';
import { MemberUploadForm } from '@/components/members/upload/types';
import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
import { textStyles } from '@/styles/typography';
Expand Down Expand Up @@ -120,9 +117,14 @@ export default function CareerFormSection({ header }: CareerFormSectionProps) {
<CareerInputWrapper>
<TextField
{...register(`careers.${index}.companyName`)}
value={watch(`careers.${index}.companyName`) || ''}
placeholder='회사 입력 ex. 토스, 네이버, 당근, 쿠팡'
/>
<TextField {...register(`careers.${index}.title`)} placeholder='직무 입력 ex. 프로덕트 디자이너' />
<TextField
{...register(`careers.${index}.title`)}
value={watch(`careers.${index}.title`) || ''}
placeholder='직무 입력 ex. 프로덕트 디자이너'
/>
</CareerInputWrapper>
<CareerDetail>
<IsCurrent>
Expand Down Expand Up @@ -161,13 +163,15 @@ export default function CareerFormSection({ header }: CareerFormSectionProps) {
<Responsive only='desktop' asChild>
<StyledTextField
{...register('skill')}
value={watch('skill') || ''}
onChange={(e) => setValue('skill', e.target.value, { shouldDirty: true })}
placeholder='ex) Node, Product Managing, Branding, UI'
/>
</Responsive>
<Responsive only='mobile'>
<StyledTextarea
{...register('skill')}
value={watch('skill') || ''}
onChange={(e) => setValue('skill', e.target.value, { shouldDirty: true })}
placeholder='ex) Node, Product Managing, BI/BX'
fixedHeight={128}
Expand Down Expand Up @@ -217,6 +221,7 @@ export default function CareerFormSection({ header }: CareerFormSectionProps) {
/>
<TextField
{...register(`links.${index}.url`)}
value={watch(`links.${index}.url`) || ''}
isError={errors?.links?.[index]?.hasOwnProperty('url')}
placeholder='https://'
className='link'
Expand Down
17 changes: 13 additions & 4 deletions src/components/members/upload/FormSection/Tmi/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { colors } from '@sopt-makers/colors';
import { TextArea, TextField } from '@sopt-makers/ui';
import { Controller, useFormContext } from 'react-hook-form';

import BottomSheetSelect from '@/components/coffeechat/upload/CoffeechatForm/BottomSheetSelect';
import Input from '@/components/common/Input';
import Responsive from '@/components/common/Responsive';
import { SOJU_CAPACITY_RANGE } from '@/components/members/upload/constants';
import MemberCountableTextArea from '@/components/members/upload/forms/CountableTextArea';
Expand All @@ -32,6 +30,7 @@ export default function TmiFormSection() {
control,
formState: { errors },
register,
watch,
} = useFormContext<MemberUploadForm>();

const getMbtiErrorMessage = () => {
Expand Down Expand Up @@ -62,7 +61,12 @@ export default function TmiFormSection() {
/>
)}
/>
<StyledTextArea {...register('mbtiDescription')} placeholder='ex) 저는 극강의 EEE에요.' fixedHeight={100} />
<StyledTextArea
{...register('mbtiDescription')}
value={watch('mbtiDescription') || ''}
placeholder='ex) 저는 극강의 EEE에요.'
fixedHeight={100}
/>
</MbtiWrapper>
</StyledMemberFormItem>

Expand Down Expand Up @@ -97,11 +101,16 @@ export default function TmiFormSection() {

<StyledMemberFormItem title='저는 요새 이런 걸 좋아해요!'>
<Responsive only='desktop' asChild>
<StyledTextField {...register('interest')} placeholder='ex) 요즘 넷플릭스 ‘더 글로리’에 빠졌어요.' />
<StyledTextField
{...register('interest')}
value={watch('interest') || ''}
placeholder='ex) 요즘 넷플릭스 ‘더 글로리’에 빠졌어요.'
/>
</Responsive>
<Responsive only='mobile'>
<StyledTextArea
{...register('interest')}
value={watch('interest') || ''}
placeholder='ex) 요즘 넷플릭스 ‘더 글로리’에 빠졌어요.'
fixedHeight={100}
/>
Expand Down

0 comments on commit 0ebf32e

Please sign in to comment.