refactor: 인풋 에러 validation 추가

depromeet · Sep 13, 2024 · 29701e8 · 29701e8
1 parent 8fe0910
commit 29701e8
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 23 deletions.
diff --git a/packages/web-domains/src/user/features/get-user-info/components/Form/BasicInfoForm.tsx b/packages/web-domains/src/user/features/get-user-info/components/Form/BasicInfoForm.tsx
@@ -27,13 +27,14 @@ export const BasicInfoForm = () => {
     register,
     handleSubmit,
     control,
-    formState: { isValid },
+    formState: { isValid, errors },
   } = useForm<BasicInfo>({
     defaultValues: {
       userName: searchParams.get('userName') || '',
       birth: searchParams.get('birth') || '',
       gender: searchParams.get('gender') || '',
     },
+    mode: 'onTouched',
   });
 
   const goToNextPage = (data: BasicInfo) => {
@@ -46,7 +47,8 @@ export const BasicInfoForm = () => {
         label="이름이 무엇인가요?"
         answerNumber={1}
         placeholder="이름을 입력해주세요"
-        errorMessage="2자 이상, 5자 이하로 입력해주세요"
+        hintMessage="2자 이상, 5자 이하로 입력해주세요"
+        error={errors.userName}
         maxLength={5}
         {...register('userName', {
           required: true,
@@ -56,16 +58,17 @@ export const BasicInfoForm = () => {
         })}
       />
       <TextInput
-        label="나이가 어떻게 되나요?"
+        label="생년월일을 입력해주세요"
         answerNumber={2}
+        error={errors.birth}
         placeholder="생년월일 8자리를 입력해주세요"
         maxLength={8}
         {...register('birth', {
           required: true,
           maxLength: 8,
           pattern: {
             value: /^\d{8}$/,
-            message: '생년월일은 숫자 8자리여야 합니다',
+            message: '생년월일 8자리를 입력해주세요',
           },
         })}
       />

diff --git a/packages/web-domains/src/user/features/get-user-info/components/Form/ExtraInfoForm.tsx b/packages/web-domains/src/user/features/get-user-info/components/Form/ExtraInfoForm.tsx
@@ -23,12 +23,13 @@ export const ExtraInfoForm = () => {
   const {
     register,
     handleSubmit,
-    formState: { isValid },
+    formState: { isValid, errors },
   } = useForm<ExtraInfo>({
     defaultValues: {
       job: searchParams.get('job') || '',
       location: searchParams.get('location') || '',
     },
+    mode: 'onTouched',
   });
 
   const goToNextPage = (data: ExtraInfo) => {
@@ -42,7 +43,8 @@ export const ExtraInfoForm = () => {
         answerNumber={4}
         placeholder="예) 돈 많은 백수"
         maxLength={15}
-        errorMessage="1자 이상, 15자 이하로 입력해주세요"
+        error={errors.job}
+        hintMessage="1자 이상, 15자 이하로 입력해주세요"
         {...register('job', {
           required: true,
           minLength: 1,
@@ -54,8 +56,9 @@ export const ExtraInfoForm = () => {
         answerNumber={5}
         label="어디에 거주하고 계신가요?"
         maxLength={15}
+        error={errors.location}
         placeholder="예) 사랑시 고백구 행복동"
-        errorMessage="1자 이상, 15자 이하로 입력해주세요"
+        hintMessage="1자 이상, 15자 이하로 입력해주세요"
         {...register('location', {
           required: true,
           minLength: 1,

diff --git a/packages/web-domains/src/user/features/get-user-info/components/TextInput/TextInput.tsx b/packages/web-domains/src/user/features/get-user-info/components/TextInput/TextInput.tsx
@@ -1,17 +1,19 @@
 import { Txt } from '@sambad/sds/components';
 import { size, colors } from '@sambad/sds/theme';
 import { ChangeEvent, forwardRef, InputHTMLAttributes } from 'react';
+import { FieldError } from 'react-hook-form';
 
 import { inputCss, textInputcss } from './styles';
 
 export interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
   label: string;
-  errorMessage?: string;
+  hintMessage?: string;
   answerNumber: string | number;
+  error?: FieldError;
 }
 
 export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, ref) => {
-  const { maxLength, label, errorMessage, answerNumber, onChange, ...restProps } = props;
+  const { maxLength, label, hintMessage, answerNumber, onChange, error, ...restProps } = props;
 
   const formattedAnswerNumber = answerNumber.toString().padStart(2, '0');
 
@@ -33,10 +35,15 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, re
           {label}
         </Txt>
       </label>
-      <input ref={ref} css={inputCss} onChange={handleChange} {...restProps} />
-      {errorMessage && (
-        <Txt as="p" typography="body4" color={colors.grey600}>
-          {errorMessage}
+      <input ref={ref} css={inputCss(!!error)} onChange={handleChange} {...restProps} />
+      {hintMessage && (
+        <Txt as="p" typography="body4" color={error ? colors.primary500 : colors.grey600}>
+          {hintMessage}
+        </Txt>
+      )}
+      {!hintMessage && error && (
+        <Txt as="p" typography="body4" color={colors.primary500}>
+          {error?.message}
         </Txt>
       )}
     </div>

diff --git a/packages/web-domains/src/user/features/get-user-info/components/TextInput/styles.ts b/packages/web-domains/src/user/features/get-user-info/components/TextInput/styles.ts
@@ -1,16 +1,17 @@
 import { css } from '@emotion/react';
 import { colors, borderRadiusVariants, size } from '@sambad/sds/theme';
 
-export const inputCss = css({
-  display: 'block',
-  width: '100%',
-  backgroundColor: colors.grey200,
-  border: `1px solid ${colors.grey400}`,
-  padding: '12px 16px',
-  borderRadius: borderRadiusVariants.medium,
-  ':focus': { borderColor: colors.grey600 },
-  outline: 'none',
-});
+export const inputCss = (error?: boolean) =>
+  css({
+    display: 'block',
+    width: '100%',
+    backgroundColor: colors.grey200,
+    border: `1px solid ${error ? colors.primary500 : colors.grey400}`,
+    padding: '12px 16px',
+    borderRadius: borderRadiusVariants.medium,
+    ':focus': { borderColor: colors.grey600 },
+    outline: 'none',
+  });
 
 export const textInputcss = css({
   display: 'flex',