Feat: #38 input.length에 따라서 버튼 활성화, git OAuth 로그인 후 issues로 이동

* 아이디, 비밀번호 input의 value.length가 0보다 클 때 로그인 버튼 활성화
* input type="password"
* git OAuth 로그인 fetch 요청, 토큰 받아서 로컬스토리지에 저장

FE/issue-tracker/src/components/login/LoginMain.tsx

@@ -1,31 +1,88 @@
+import React, { useState, useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
+import queryString from 'query-string';
 
 import { Button } from '@chakra-ui/button';
 import { Stack } from '@chakra-ui/layout';
 import { Input } from '@chakra-ui/input';
+import { LinkBox, LinkOverlay } from '@chakra-ui/react';
 
 import { ReactComponent as LogoLarge } from '@assets/LogotypeLarge.svg';
-import { gitLoginStyle, idLoginStyle, inputStyle } from './style';
+import { LOGIN_URL } from '@const/var';
+import fetchToken from './getAccessToken';
+import {
+  gitLoginStyle,
+  activeLoginStyle,
+  inactiveLoginStyle,
+  inputStyle,
+} from './style';
 
 function LoginMain() {
+  const [isLoginActive, setIsActiveLogin] = useState(false);
+  const [isInputtedID, setIsInputtedID] = useState(false);
+  const [isInputtedPW, setIsInputtedPW] = useState(false);
+  const [isLogin, setIsLogin] = useState(false);
+  const [password, setPassword] = useState('');
+
+  const handleChangeID = (e: React.ChangeEvent) => {
+    const target = e.target as HTMLInputElement;
+    if (!isInputtedID && target.value.length > 0) setIsInputtedID(true);
+    else if (isInputtedID && target.value.length === 0) setIsInputtedID(false);
+  };
+
+  const handleChangePW = (e: React.ChangeEvent) => {
+    const target = e.target as HTMLInputElement;
+    target.value.length > 0 ? setPassword(target.value) : setPassword('');
+    if (!isInputtedPW && target.value.length > 0) setIsInputtedPW(true);
+    else if (isInputtedPW && target.value.length === 0) setIsInputtedPW(false);
+  };
+
+  useEffect(() => {
+    if (isInputtedID && isInputtedPW) setIsActiveLogin(true);
+    else setIsActiveLogin(false);
+  }, [isInputtedID, isInputtedPW]);
+
+  useEffect(() => {
+    const { code } = queryString.parse(window.location.search);
+    if (!code) return;
+    else if (typeof code === 'string') {
+      fetchToken({ isLogin, setIsLogin, code });
+    }
+  }, []);
+
   return (
     <MainWrap>
       <LogoLarge className="logo" />
-      <Button {...gitLoginStyle}>GitHub 계정으로 로그인</Button>
+      <LinkBox as="div">
+        <Button {...gitLoginStyle}>
+          <LinkOverlay href={LOGIN_URL}>GitHub 계정으로 로그인</LinkOverlay>
+        </Button>
+      </LinkBox>
       <Span>or</Span>
       <Stack spacing={2}>
-        <Input {...inputStyle} placeholder="아이디" />
-        <Input {...inputStyle} placeholder="비밀번호" />
+        <Input {...inputStyle} placeholder="아이디" onChange={handleChangeID} />
+        <Input
+          {...inputStyle}
+          type="password"
+          placeholder="비밀번호"
+          onChange={handleChangePW}
+        />
       </Stack>
       <Link to="issues">
-        <Button {...idLoginStyle}>아이디로 로그인</Button>
+        {isLoginActive ? (
+          <Button {...activeLoginStyle}>아이디로 로그인</Button>
+        ) : (
+          <Button {...inactiveLoginStyle}>아이디로 로그인</Button>
+        )}
       </Link>
       <Register>회원가입</Register>
     </MainWrap>
   );
 }
 
+export default LoginMain;
+
 const MainWrap = styled.div`
   display: flex;
   flex-direction: column;
@@ -50,5 +107,3 @@ const Register = styled.button`
   font-size: ${({ theme }) => theme.fontSizes.xs};
   font-weight: ${({ theme }) => theme.fontWeights.bold};
 `;
-
-export default LoginMain;