Merge pull request #14 from cyjo9603/develop

로그인 시 입력 값 검증 기능 추가
cyjo9603 · Sep 10, 2020 · ff59f2c · ff59f2c
2 parents 4c8b2c5 + cfe65ec
commit ff59f2c
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/front/src/routes/SignIn/SignInContainer.tsx b/front/src/routes/SignIn/SignInContainer.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { useMutation } from '@apollo/react-hooks';
 import Router from 'next/router';
 
@@ -13,6 +13,7 @@ import { LOCAL_SIGN_IN } from '../../queries/client';
 const SignInContainer = () => {
   const [userId, , onChangeUserId] = useChangeEvent<HTMLInputElement>('');
   const [password, , onChangePassword] = useChangeEvent<HTMLInputElement>('');
+  const [hasIdAndPassword, setHasIdAndPassword] = useState(false);
   const [localSignIn] = useMutation(LOCAL_SIGN_IN);
   const [signInMutation] = useMutation<signIn>(SIGNIN_REQUEST, {
     onCompleted: ({ SignIn }) => {
@@ -24,7 +25,9 @@ const SignInContainer = () => {
           },
         });
         Router.push('/');
+        return;
       }
+      alert('아이디나 비밀번호가 올바르지 않습니다');
     },
   });
 
@@ -35,6 +38,14 @@ const SignInContainer = () => {
     }
   }, []);
 
+  useEffect(() => {
+    if (!hasIdAndPassword && userId && password) {
+      setHasIdAndPassword(true);
+    } else if (hasIdAndPassword && (!userId || !password)) {
+      setHasIdAndPassword(false);
+    }
+  }, [hasIdAndPassword, userId, password]);
+
   const onSubmit = useCallback(
     (e: React.FormEvent) => {
       e.preventDefault();
@@ -54,6 +65,7 @@ const SignInContainer = () => {
     <SignInPresenter
       userId={userId}
       password={password}
+      hasIdAndPassword={hasIdAndPassword}
       onChangeUserId={onChangeUserId}
       onChangePassword={onChangePassword}
       onSubmit={onSubmit}

diff --git a/front/src/routes/SignIn/SignInPresenter.tsx b/front/src/routes/SignIn/SignInPresenter.tsx
@@ -8,12 +8,13 @@ import { SignInWrapper } from './styled';
 interface Props {
   userId: string;
   password: string;
+  hasIdAndPassword: boolean;
   onChangeUserId: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onChangePassword: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onSubmit: (e: React.FormEvent) => void;
 }
 
-const SignInPresenter = ({ userId, password, onChangeUserId, onChangePassword, onSubmit }: Props) => (
+const SignInPresenter = ({ userId, password, hasIdAndPassword, onChangeUserId, onChangePassword, onSubmit }: Props) => (
   <>
     <Helmet>
       <title>로그인 :: chanyeong</title>
@@ -23,7 +24,7 @@ const SignInPresenter = ({ userId, password, onChangeUserId, onChangePassword, o
         <form onSubmit={onSubmit}>
           <Input placeholder="아이디" value={userId} onChange={onChangeUserId} />
           <Input type="password" placeholder="비밀번호" value={password} onChange={onChangePassword} />
-          <button>로그인</button>
+          <button disabled={!hasIdAndPassword}>로그인</button>
         </form>
       </SignInWrapper>
     </PageContainer>

diff --git a/front/src/routes/SignIn/styled.ts b/front/src/routes/SignIn/styled.ts
@@ -27,6 +27,12 @@ export const SignInWrapper = styled.section`
       &:hover {
         opacity: 0.9;
       }
+
+      &:disabled {
+        background-color: ${({ theme }) => theme.DISABLED};
+        opacity: 1;
+        cursor: not-allowed;
+      }
     }
   }
 `;
diff --git a/front/src/theme/index.ts b/front/src/theme/index.ts
@@ -27,6 +27,7 @@ export const lightTheme = {
   FOOTER_BACKGROUND: '#23374D',
   FONT_FOCUS: '#23374D',
   NEW_COLOR: '#E65F55',
+  DISABLED: '#5E6267',
 
   CODE_BACKGROUND: '#f5f7f8',
   CODE_KEWORD: '#95C76F',
@@ -63,6 +64,7 @@ export const darkTheme = {
   FOOTER_BACKGROUND: '#141414',
   FONT_FOCUS: '#1089FF',
   NEW_COLOR: '#E65F55',
+  DISABLED: '#000000',
 
   CODE_BACKGROUND: '#444444',
   CODE_KEWORD: '#95C76F',