[✍️ Dev Log] 송다영 / 2022-01-07


### 오늘은 어떻게 프로젝트에 기여했나요?

- 간단한 회원 탈퇴 모달창을 CSS로 구현하였고 전체적인 Props 연결을 하였습니다.

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?

- 간단하게 구현은 했으나 서버와 함께 맞추다 보니 작은 오류들 때문에 시간을 많이 사용하였습니다.
- Props를 계속 넘겨줘야 하고 코드가 길어져서 헷갈리고 가독성이 떨어졌습니다.

```js

// 전제적인 양식 안에서 버튼을 두 개 만들고 useState를 이용해 (네, 아니요) 선택 버튼으로 navigate('/')이동을 시켰습니다.
//page : SignOut.js

const TextForm = styled.div`
position: relative;
display: flex;
/* border: 1px solid black; */
text-align: center;
top: 22%;
`;
const Text = styled.div`
position: relative;
line-height: 170%;
font-family: "Kfont";
font-size: 1.2rem;
font-weight: 600;
`;
const Btn = styled.div`
/* border: 1px solid black; */
display: flex;
width: 100%;
height: 25%;
flex-direction: row;
position: absolute;
top: 80%;
justify-content: space-between;
`;
const CancleBtn = styled.button`
z-index: 999;
width: 45%;
height: 90%;
background: #e1e1e1;
color: black;
font-family: "Kfont";
border-style: none;
border-radius: 4px;
font-weight: bold;
position: relative;
cursor: pointer;
:hover::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.07);
}
`;
const SignOutBtn = styled.button`
z-index: 999;
width: 45%;
height: 90%;
background: #0474e8;
color: white;
font-family: "Kfont";
border-style: none;
border-radius: 4px;
font-weight: bold;
position: relative;
cursor: pointer;
:hover::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.1);
}
`;
//=======================================================================

function SignOut({ showModal, closeModal, accessToken, setIsLogin }) {
const navigate = useNavigate();
function signOut() {
axios
.delete("http://localhost:80/user", {
headers: { Authorization: `Bearer ${accessToken}` },
})
.then((res) => {
setIsLogin(false);
navigate("/");
});
}
return (



정말로 탈퇴하시나요?

탈퇴시 유저 정보가 모두 삭제됩니다.




아니요. 취소합니다.


네. 탈퇴합니다.



)
```

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [x] Redux를 이용한 상태 관리 : 두 시간 정도 시간 소요 예상
- [x] 비밀번호 변경을 위한 모달 창 생성 (CSS + 기능)