[Dev-log/이희수] 3월 24일

### 오늘은 어떻게 프로젝트에 기여했나요?
- 로그인 모달창 CSS 구현
### 오늘의 프로젝트에서 힘든 점은 무엇인가요?
- 항목별로 적어주세요.
- CSS에서 컴포넌트 위치가 마음대로 조정되지 않는다.
- Oauth 2.0이 이론적으로 이해가 가지 않는부분이 있어서 실제로 코드를 짜봐야할것 같다.
- redux 사용방법이 익숙하지 않아서 (옛날방식도 있고...) 실제 코드로 연습해봐야 할것 같다.

```import { useState, useRef } from 'react';
import { Link, Redirect } from "react-router-dom";
import styled from 'styled-components';
import axios from "axios";

const RowGroup = styled.div`
font-family: Dotum, "돋움", Helvetica, sans-serif;
font-size: 12px;
min-width: 220px;
max-width: 50%;
margin: 0 auto;
`;

const Title = styled.h3`
margin: 19px 0 8px;
font-size: 14px;
font-weight: 700;
`;

const Box = styled.input`
display: block;
position: relative;
width: 100%;
height: 51px;
border: solid 1px #dadada;
padding: 10px 110px 10px 14px;
box-sizing: border-box;
`;

const LoginBtn = styled.button`
display: block;
background: #000;
color: #eee;
width: 100%;
height: 51px;
margin: 19px 0 8px;
&:hover {
background: #ffffff;
text-decoration: underline;
color: #000;
}
`;

const JoinBtn = styled.button`
display: block;
background: #ffffff;
border: 1px solid #000;
width: 100%;
height: 51px;
margin: 19px 0 8px;
text-decoration: none;
&:hover {
background: #aaa;
text-decoration: underline;
}
`;
const GoogleBtn = styled.button`
display: block;
background: skyblue;
border: 1px solid #000;
width: 50%;
height: 51px;
margin: 19px 0 8px;
text-decoration: none;
&:hover {
background: #aaa;
}
`;
const KakaoBtn = styled.button`
display: block;
background: yellow;
border: 1px solid #000;
width: 50%;
height: 51px;
margin: 19px 0 8px;
text-decoration: none;
&:hover {
background: #aaa;
}
`;

const ModalContainer = styled.div`
// TODO : Modal을 구현하는데 전체적으로 필요한 CSS를 구현합니다.
display: flex;
justify-content: center;
height: 100%;
align-items: center;
`;

const ModalBackdrop = styled.div`
// TODO : Modal이 떴을 때의 배경을 깔아주는 CSS를 구현합니다.
width: 100%;
height: 100vh;
background-color: rgba(0,0,0,0.4);
z-index: 10;
position: fixed;
top: 0;
left: 0;
`;

const ModalBtn = styled.button`
box-sizing: border-box;
background-color: grey;
text-decoration: none;
border: none;
padding: 10px;
color: white;
border-radius: 10px;
width: 10% auto;
cursor: grab;
`;

const ModalView = styled.div.attrs(props => ({
// attrs 메소드를 이용해서 아래와 같이 div 엘리먼트에 속성을 추가할 수 있습니다.
role: 'dialog'
}))`
// TODO : Modal창 CSS를 구현합니다.
display: flex;
justify-content: center;
align-items: center;
background-color: white;
border: none;
border-radius: 10px;
color: black;
width: 600px;
height: 600px;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%, -50%);
z-index:100;
`;

const LoginModal = () => {
const [isOpen, setIsOpen] = useState(false);
const outSection = useRef();
const handleLogin = () => {}
const openModalHandler = () => {
// TODO : isOpen의 상태를 변경하는 메소드를 구현합니다.
setIsOpen(!isOpen)
};

return (
<>

{openModalHandler()}}
>
{isOpen === true ? "로그인 모달창 열린상태":"로그인/회원가입"}

{ isOpen === true ? {if(outSection.current === e.target){openModalHandler()}}} >
e.stopPropagation()}>

이메일
{console.log(e.target.value)}}
>
비밀번호
{console.log("비밀번호",e.target.value)}}
>

{}}>LOGIN

회원가입

구글로 시작하기

카카오로 시작하기



:null }


);
};
export default LoginModal;
```

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
- [ ] CSS공부 : 모달버트위치옮기기, container 위치조정,내용물삽입
- [x] Oauth인증 코드 공부(링크 https://redbinalgorithm.tistory.com/687)