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


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

- 비밀번호 변경을 위한 모달창 구현
- 비밀번호의 유효성 검사 구현

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

- 유효성을 체크하기 위한 여러 시행착오를 겪어서 체력적으로 힘들었고 시간이 많이 걸렸다.

```js

// 처음에는 메세지를 하나씩 다 작성하여 return 안에서 삼항연산자를 돌리려고 하였다.
// 하지만 코드가 가독성이 떨어져서 useState로 ErrorMSG를 보여주고 삼항연산자를 구현하였다.
---> 처음 작성 코드

useEffect(() => {
setMessage({
...message,
password:
currentPwd.new_pwd.length >= 8
? checkPassword(currentPwd.new_pwd)
? "사용할 수 있는 비밀번호 입니다."
: "비밀번호는 영문, 숫자 조합이어야 합니다."
: "비밀번호는 8글자 이상, 영문, 숫자 조합이어야 합니다.",
verifyPassword:
currentPwd.verifyPassword.length >= currentPwd.new_pwd.length &&
currentPwd.verifyPassword.length >= 8
? currentPwd.verifyPassword === currentPwd.new_pwd
? "비밀번호가 일치합니다."
: "비밀번호가 불일치합니다."
: "비밀번호를 확인해주세요.",
});
setValidation({
...validation,
password: checkPassword(currentPwd.new_pwd),
verifyPassword: currentPwd.new_pwd === currentPwd.verifyPassword,
});
}, [currentPwd]);

---->이후 변경 코드

const fixPasswordHandler = () => {
const accessToken = localStorage.getItem("accessToken");
const { cur_pwd, new_pwd, verifyPassword } = currentPwd;
//재확인
if (!cur_pwd || !new_pwd || !verifyPassword) {
setErrorMsg("비밀번호를 확인해주세요");
} else if (!checkPassword(new_pwd) || !onChangePasswordChk()) {
setErrorMsg("올바른 정보를 입력해주세요");
} else {
setErrorMsg("");
if (!accessToken) {
return;
} else {
axios
.patch(
`http://localhost:80/user/password`,
{
data: { cur_pwd, new_pwd },
},
{
headers: { authorization: `Bearer ${accessToken}` },
withCredentials: true,
}
)
.then(() => {
setPassword(true);
navigate("/mypage");
})
.catch((err) => {
setErrorMsg("비밀번호를 확인해주세요.");
console.log(err);
});
}
}
};

// return문

{password ? (


비밀번호가 변경되었습니다.

닫기를 눌러주세요.

닫기

) : (



{!currentPwd.new_pwd ? (

비밀번호는 8글자 이상, 영문, 숫자 조합이어야 합니다.

) : currentPwd.new_pwd.length >= 8 ||
checkPassword(currentPwd.new_pwd) ? (
사용할 수 있는 비밀번호 입니다.
) : (

)}

{onChangePasswordChk() || !currentPwd.verifyPassword ? (
비밀번호가 일치합니다.
) : (
비밀번호가 일치하지 않습니다.
)}

```

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

- [x] mypage의 유저 정보를 보여주기 위한 onClick 구현
- [x] mypage의 유저 정보를 보여주기 위한 CSS 구현
- [x] mypage의 유저 정보를 보여주기 위한 컴포넌트 구현