From dd7b3eef26848c62e27d4709a64321c16ef34c51 Mon Sep 17 00:00:00 2001
From: eve712 <62237639+eve712@users.noreply.github.com>
Date: Tue, 15 Jun 2021 18:55:20 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20#38=20input.length=EC=97=90=20=EB=94=B0?=
 =?UTF-8?q?=EB=9D=BC=EC=84=9C=20=EB=B2=84=ED=8A=BC=20=ED=99=9C=EC=84=B1?=
 =?UTF-8?q?=ED=99=94,=20git=20OAuth=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=ED=9B=84=20issues=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 아이디, 비밀번호 input의 value.length가 0보다 클 때 로그인 버튼 활성화
* input type="password"
* git OAuth 로그인 fetch 요청, 토큰 받아서 로컬스토리지에 저장
---
 .../src/components/login/LoginMain.tsx        | 69 +++++++++++++++++--
 1 file changed, 62 insertions(+), 7 deletions(-)

diff --git a/FE/issue-tracker/src/components/login/LoginMain.tsx b/FE/issue-tracker/src/components/login/LoginMain.tsx
index 86bbbb2b7..4cf34b93b 100644
--- a/FE/issue-tracker/src/components/login/LoginMain.tsx
+++ b/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;