Merge pull request #73 from YAPP-Github/feature/FE-053

src/app/login/components/LoginForm/LoginForm.tsx

@@ -43,6 +43,7 @@ const LoginForm = () => {
               name="email"
               placeholder="회사 이메일"
               showError={true}
+              fix 
             />
           </InputSection>
           <InputSection label="비밀번호" direction="column">
@@ -54,6 +55,7 @@ const LoginForm = () => {
               name="password"
               placeholder="비밀번호"
               showError={true}
+              fix
             />
           </InputSection>
           {<LoginButton submitErrorMsg={errors?.submit?.message as string} />}

src/components/Input/Input.css.ts

@@ -102,6 +102,17 @@ export const inputError = style({
   border: `1px solid ${color.red500}`,
 });
 
+export const fixedError = recipe({
+  base: {},
+  variants: {
+    fix: {
+      true: {
+        height: space.lg,
+      },
+    },
+  },
+});
+
 globalStyle(`${clearButton} > img`, {
   margin: '0 auto',
   backgroundPosition: 'center',

src/components/Input/Input.tsx

@@ -19,10 +19,11 @@ type InputProps = {
   name: string;
   type?: Type;
   showError?: boolean;
+  fix?: boolean;
 } & React.ComponentPropsWithoutRef<'input'>;
 
 const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
-  const { type, name, placeholder, showError, className, ...rest } = props;
+  const { type, name, placeholder, showError, className, fix, ...rest } = props;
   const { formState, resetField } = useFormContext();
   const handleReset = useCallback(() => resetField(name, { defaultValue: '', keepDirty: false }), [name, resetField]);
   const errorMessage = formState.errors[name]?.message as string;
@@ -57,7 +58,7 @@ const Input = forwardRef(function Input(props: InputProps, ref: ForwardedRef<HTM
           <SvgIcon id="clear" width={24} height={24} />
         </button>
       </div>
-      <InputErrorMessage name={name} showError={showError} />
+      <InputErrorMessage name={name} showError={showError} fix={fix} />
     </div>
   );
 });

src/components/Input/InputErrorMessage.tsx

@@ -1,20 +1,24 @@
 import Typography from '../Typography/Typography';
 import { useFormContext } from 'react-hook-form';
+import { fixedError } from './Input.css';
 
 type errorProps = {
-	name: string;
-	showError?: boolean;
+  name: string;
+  showError?: boolean;
+  fix?: boolean;
 };
 
-const InputErrorMessage = ({ name, showError = true }: errorProps) => {
-	const { formState } = useFormContext();
-	const errorMessage = showError && (formState.errors[name]?.message as string);
+const InputErrorMessage = ({ name, showError = true, fix = false }: errorProps) => {
+  const { formState } = useFormContext();
+  const errorMessage = showError && (formState.errors[name]?.message as string);
 
-	return (
-		<Typography style={{ marginTop: '8px' }} color="red500" variant="label5" as="p">
-			{errorMessage}
-		</Typography>
-	);
+  return (
+    <div className={fixedError({ fix })}>
+      <Typography style={{ marginTop: '8px' }} color="red500" variant="label5" as="p">
+        {errorMessage}
+      </Typography>
+    </div>
+  );
 };
 
 export default InputErrorMessage;