✨:: #7 useRef type 추가

src/component/Auth/Login.tsx

@@ -1,17 +1,16 @@
 import { useRef, useState } from 'react';
 import styled from 'styled-components';
 import { useForm } from 'react-hook-form';
-import { AuthContent, RightAlignedLink, RegisterButton } from '.';
-import { theme, flexCenter, gap } from '../../style/theme';
+import { AuthContent, RightAlignedLink, RegisterButton, LoginButton } from '.';
+import { theme, flexCenter, inputForm, inputlabel } from '../../style/theme';
 
 const Login = () => {
   const [passwordType, setPasswordType] = useState({
     type: 'password',
     visible: false,
   });
 
-  // password type 변경하는 함수
-  const handlePasswordType = (e) => {
+  const handlePasswordType = () => {
     setPasswordType(() => {
       if (!passwordType.visible) {
         return { type: 'text', visible: true };
@@ -36,13 +35,14 @@ const Login = () => {
     mode: 'onSubmit',
     defaultValues: initValue,
   });
-  const password = useRef();
-  password.current = watch('pw'); // pw 관찰
+  const password = useRef<string>();
+  password.current = watch('pw');
   // 데이터 전송시 작동할 함수
   const onSubmit = (data: Form) => {
     console.log(data);
   };
   console.log(watch());
+  // console.log(!errors.id, !errors.pw);
   return (
     <Wrapper>
       <AuthContent title="로그인" />
@@ -89,7 +89,10 @@ const Login = () => {
           {errors.pw && <SubmitMessage>{errors.pw.message}</SubmitMessage>}
           <span onClick={handlePasswordType} />
         </InputWrapper>
-        <LoginButton type="submit" value="로그인" />
+        <LoginButton
+          isDisabled={!errors.id && !errors.pw ? false : true}
+          value="로그인"
+        />
         <RegisterButton to="auth/register">회원가입</RegisterButton>
       </form>
       <RightAlignedLink to="find/login">
@@ -101,23 +104,6 @@ const Login = () => {
 
 export default Login;
 
-const LoginButton = styled.input`
-  ${flexCenter}
-  width: 58rem;
-  border-radius: 5px;
-  cursor: pointer;
-  height: 7rem;
-  margin-top: 2rem;
-  background: ${theme.color.Main};
-  color: white;
-  height: ${(props) => props.height};
-  font-size: 1.6rem;
-  &:hover {
-    background: ${theme.color.Main_lighten};
-    color: white;
-  }
-`;
-
 const Wrapper = styled.div`
   ${flexCenter}
   width: 58rem;
@@ -128,17 +114,14 @@ const Wrapper = styled.div`
     text-align: center;
     font-size: 2rem;
     line-height: 3rem;
-    margin-bottom: 3rem;
+    margin-bottom: 5rem;
+  }
+  .label {
+    ${inputlabel}
   }
   & + & {
     margin: 3rem;
   }
-  .label {
-    font-size: 1.6rem;
-    margin-bottom: 1rem;
-    font-weight: bold;
-    color: ${theme.color.dark_gray};
-  }
 `;
 
 const InputWrapper = styled.div`
@@ -153,14 +136,5 @@ const SubmitMessage = styled.div`
 `;
 
 const Input = styled.input`
-  width: 58rem;
-  border: 0;
-  border-bottom: 1px solid #e0e0e0;
-  outline: none;
-  border-radius: 0px;
-  line-height: 2.5rem;
-  font-size: 1.4rem;
-  margin-bottom: 1rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
+  ${inputForm}
 `;

src/component/Auth/Register.tsx

@@ -1,24 +1,19 @@
-import { useRef, useState } from 'react';
+import { useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import styled from 'styled-components';
-import { flexCenter, theme } from '../../style/theme';
-import { AuthContent } from '.';
+import { flexCenter, theme, inputForm, inputlabel } from '../../style/theme';
+import { AuthContent, LoginButton } from '.';
 import usePassword from '../../hooks/usePassword';
 
 const Register = () => {
-  const [isEmailError, setIsEmailError] = useState(false);
-
-  // hooks
   const [passwordType, handlePasswordType] = usePassword({
     type: 'password',
     visible: false,
   });
-
   const [passwordConfirmType, handlePasswordConfirmType] = usePassword({
     type: 'password',
     visible: false,
   });
-
   interface Form {
     email: string;
     id: string;
@@ -31,7 +26,6 @@ const Register = () => {
     pw: '',
     pwConfirm: '',
   };
-
   const {
     handleSubmit,
     register,
@@ -41,14 +35,11 @@ const Register = () => {
     mode: 'onSubmit',
     defaultValues: initValue,
   });
-  const password = useRef();
-  const email = useRef();
-  password.current = watch('pw'); // pw 관찰
-  // 데이터 전송시 작동할 함수
+  const password = useRef<string>();
+  password.current = watch('pw');
   const onSubmit = (data: Form) => {
     console.log(data);
   };
-  console.log(watch());
 
   return (
     <Wrapper>
@@ -57,8 +48,8 @@ const Register = () => {
       <form onSubmit={handleSubmit(onSubmit)}>
         <InputWrapper>
           <div className="label">이메일</div>
-          <input
-            className={isEmailError ? 'error' : 'correct'}
+          <Input
+            className={errors.email ? 'error' : ''}
             placeholder="[email protected]"
             {...register('email', {
               required: '이메일을 입력해주세요.',
@@ -68,13 +59,15 @@ const Register = () => {
               },
             })}
           />
+          <button className="email-auth">인증</button>
           {errors.email && (
             <SubmitMessage>{errors.email.message}</SubmitMessage>
           )}
         </InputWrapper>
         <InputWrapper>
           <div className="label">아이디</div>
           <Input
+            className={errors.id ? 'error' : ''}
             placeholder="아이디"
             {...register('id', {
               required: '아이디를 입력해주세요.',
@@ -90,6 +83,7 @@ const Register = () => {
         <InputWrapper>
           <div className="label">비밀번호</div>
           <Input
+            className={errors.pw ? 'error' : ''}
             type={passwordType.type}
             placeholder="영문, 숫자를 혼용하여 8~16자를 입력해주세요"
             {...register('pw', {
@@ -114,20 +108,27 @@ const Register = () => {
         <InputWrapper>
           <div className="label">비밀번호 확인</div>
           <Input
+            className={errors.pwConfirm ? 'error' : ''}
             type={passwordConfirmType.type}
             placeholder="비밀번호 확인"
             {...register('pwConfirm', {
               required: '비밀번호를 적어주세요',
-              validate: (value) => value === password.current, // 콜백 함수 넘겨줌
+              validate: (value) => value === password.current,
             })}
           />
           {errors.pwConfirm && errors.pwConfirm.type == 'validate' && (
             <SubmitMessage>비밀번호가 일치하지 않습니다</SubmitMessage>
           )}
           <span onClick={handlePasswordConfirmType} />
         </InputWrapper>
-
-        <RegisterButton type="submit" value="회원가입" />
+        <LoginButton
+          value="다음"
+          isDisabled={
+            !errors.id && !errors.pw && !errors.email && !errors.pwConfirm
+              ? false
+              : true
+          }
+        />
       </form>
     </Wrapper>
   );
@@ -143,31 +144,20 @@ const Wrapper = styled.div`
     ${flexCenter}
     color: #bdbdbd;
     font-size: 2rem;
+    margin-top: 2rem;
     margin-bottom: 3rem;
     text-align: center;
   }
   .label {
-    font-size: 1.6rem;
-    margin-bottom: 1rem;
-    font-weight: bold;
-    color: #9e9e9e;
+    ${inputlabel}
   }
   & + & {
     margin: 5rem;
   }
 `;
 
 const Input = styled.input`
-  width: 58rem;
-  border: 0;
-  border-bottom: 1px solid #e0e0e0;
-  outline: none;
-  border-radius: 0px;
-  line-height: 2.5rem;
-  font-size: 1.4rem;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  margin-bottom: 1.8rem;
+  ${inputForm}
 `;
 
 const SubmitMessage = styled.div`
@@ -177,45 +167,17 @@ const SubmitMessage = styled.div`
 `;
 
 const InputWrapper = styled.div`
-  input {
-    width: 58rem;
-    border: 0;
-    border-bottom: 1px solid #e0e0e0;
-    outline: none;
-    border-radius: 0px;
-    line-height: 2.5rem;
-    font-size: 1.4rem;
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    margin-bottom: 1.8rem;
-    &.error {
-      border-bottom: 1px solid red;
-    }
-    &.correct {
-      border-bottom: 1px solid green;
-    }
-  }
-
-  .input-error {
+  position: relative;
+  .email-auth {
+    position: absolute;
+    right: 0;
+    width: 7rem;
+    height: 3.4rem;
+    color: ${theme.color.Main};
+    border-radius: 7px;
+    border: 2px solid ${theme.color.Main};
   }
   & + & {
     margin-top: 1rem;
   }
 `;
-
-const RegisterButton = styled.input`
-  ${flexCenter}
-  width: 58rem;
-  border-radius: 5px;
-  cursor: pointer;
-  height: 40px;
-  margin-top: 1rem;
-  background: ${theme.color.Main};
-  color: white;
-  height: 7rem;
-  font-size: 14px;
-  &:hover {
-    background: grey;
-    color: white;
-  }
-`;