feat: 로그인, 회원가입 react-hook-form으로 변경

codeit-bootcamp-frontend · May 19, 2024 · 666c40c · 666c40c
1 parent 3717a86
commit 666c40c
Show file tree

Hide file tree

Showing 8 changed files with 568 additions and 221 deletions.
diff --git a/components/Input/Input.styled.ts b/components/Input/Input.styled.ts
@@ -1,27 +1,42 @@
 import styled from 'styled-components';
-import { InputProps } from './Input';
 
 const inputSize = {
   sm: '28',
   md: '40',
   lg: '50',
 };
 
-const InputModal = styled.input<InputProps>`
-  display: flex;
-  width: ${({ size }) => inputSize[size]}rem;
-  padding: 1.8rem 1.5rem;
-  justify-content: center;
-  align-items: center;
-  border-radius: 0.8rem;
-  border: 1px solid
-    var(${({ $error }) => ($error ? '--ErrorMessage' : '--Linkbrary-gray20')});
-  background: var(--Section-white);
-  font-size: 1.6rem;
+export const InputModal = styled.div<{
+  size: 'sm' | 'md' | 'lg';
+  $error: boolean;
+}>`
+  input {
+    display: flex;
+    width: ${({ size }) => inputSize[size]}rem;
+    padding: 1.8rem 1.5rem;
+    justify-content: center;
+    align-items: center;
+    border: 0.1rem solid
+      var(${({ $error }) => ($error ? '--ErrorMessage' : '--Linkbrary-gray20')});
+    border-radius: 0.8rem;
+    background: var(--Section-white);
+    font-size: 1.6rem;
+  }
 
   &:focus {
     border: 1px solid var(--Primary);
   }
 `;
 
-export default InputModal;
+export const TextArea = styled.div`
+  height: 3rem;
+  width: 100%;
+  display: flex;
+  align-items: center;
+`;
+
+export const WarningMessage = styled.p`
+  color: var(--ErrorMessage);
+  font-size: 1.4rem;
+  margin: 0;
+`;
diff --git a/components/Input/Input.tsx b/components/Input/Input.tsx
@@ -1,28 +1,38 @@
-import { ChangeEvent, HtmlHTMLAttributes } from 'react';
-import InputModal from './Input.styled';
+import {
+  ControllerRenderProps,
+  FieldError,
+  FieldValues,
+} from 'react-hook-form';
+import * as S from './Input.styled';
+import { useEffect, useState } from 'react';
 
-export interface InputProps extends HtmlHTMLAttributes<HTMLInputElement> {
+export interface InputProps {
+  placeholder: string;
   type: string;
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
-  $error: string;
   size: 'sm' | 'md' | 'lg';
-  placeholder: string;
+  field: ControllerRenderProps<FieldValues, any>;
+  id: string;
+  error: FieldError | undefined;
 }
 
-function Input({ id, placeholder, type, onChange, $error, size }: InputProps) {
+function Input({ placeholder, type, size, field, error }: InputProps) {
+  const [errorMessage, setErrorMessage] = useState(false);
+
+  useEffect(() => {
+    if (error) {
+      setErrorMessage(true);
+    } else {
+      setErrorMessage(false);
+    }
+  }, [error]);
+
   return (
-    <>
-      <InputModal
-        type={type}
-        autoCapitalize="off"
-        id={id}
-        placeholder={placeholder}
-        onChange={onChange}
-        onBlur={onChange}
-        $error={$error}
-        size={size}
-      />
-    </>
+    <S.InputModal size={size} $error={errorMessage}>
+      <input type={type} placeholder={placeholder} {...field} />
+      <S.TextArea>
+        {error && <S.WarningMessage>{error.message}</S.WarningMessage>}
+      </S.TextArea>
+    </S.InputModal>
   );
 }