diff --git a/src/components/pages/create-group/fields/cap-field/index.tsx b/src/components/pages/create-group/fields/cap-field/index.tsx index 8aacd059..d43e4d1d 100644 --- a/src/components/pages/create-group/fields/cap-field/index.tsx +++ b/src/components/pages/create-group/fields/cap-field/index.tsx @@ -10,11 +10,11 @@ interface Props { participantCount?: number; } -export const GroupCapField = ({ field, participantCount = 0 }: Props) => { +export const GroupCapField = ({ field, participantCount }: Props) => { const handleOnBlur = (e: React.ChangeEvent) => { const value = Number(e.target.value); - if (value < participantCount) field.handleChange(participantCount); + if (participantCount && value < participantCount) field.handleChange(participantCount); else if (value < 2) field.handleChange(2); else if (value > 12) field.handleChange(12); }; @@ -40,12 +40,15 @@ export const GroupCapField = ({ field, participantCount = 0 }: Props) => { placeholder='최대 인원을 선택해주세요' required type='number' - value={!!field.state.value && field.state.value} + value={field.state.value ? field.state.value : ''} onBlur={(e) => handleOnBlur(e)} onChange={(e) => { field.handleChange(Number(e.target.value)); }} /> +

+ 최대 12명까지 모집할 수 있어요. +

); }; diff --git a/src/components/pages/create-group/fields/detail-feild/index.tsx b/src/components/pages/create-group/fields/detail-feild/index.tsx index c0da08c7..2b25e67f 100644 --- a/src/components/pages/create-group/fields/detail-feild/index.tsx +++ b/src/components/pages/create-group/fields/detail-feild/index.tsx @@ -25,7 +25,7 @@ export const GroupDetailField = ({ field }: Props) => { value={field.state.value} onChange={(e) => field.handleChange(e.target.value)} /> -
+
{isInvalid && } {field.state.value.length}/300