일일회고

📌 scrum

• 22.4.15

  어제: 로그인 완성, 인증 로직은 다 못했고, 디자인은 피그마 끄적여둿음 // 오늘: 인증 화면 얼추 마감한 뒤에 서버랑 통신 로직도 맞출 예정.

  ▶️ 인증 화면은 간단하게 완료했다. 다만 완벽한 반응형을 위해선 여러 작업이 추후에 필요할 것 같음.. 애니메이션을 위해서 리액트 부트스트랩을 사용했는데, 이를 입맛에 맞게 커스터마이징 하는 방식이 익숙하지 않다.
  

✔️ issue

css - style

react bootstrap은 그냥 style을 오버라이드 한다고 해결되는 것이 아니었다. 개발자 도구를 참고해서 다음과 같이 수정을 했다.

/* EliceUserAuth.module.css */
.btn {
  color: white;
  background-color: #7353ea;
  border-color: #7353ea;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn:hover {
  background-color: #5426ab;
  border-color: #5426ab;
}

좀 번거롭긴 하지만 엘리스에서 배운 transition으로 해결 ^^

login - auth - admin 로직

로그인 - 인증 간의 로직을 많이 고민해봤다. 처음에는 로그인 화면을 만들어 비유저용 홈의 헤더에서 접근 할 수 있도록 했는데, 백엔드 팀원 분과 상의한 결과 로그인 화면도 필요가 없다고 판단. => 비유저용 홈에서 로그인 버튼/헤더 버튼으로 접근하도록 결정했다.
인증 같은 경우도 인증 여부나 답안을 프론트에서 저장하기 보다는 백엔드 차원에서 관리 하는 것이 좋다고 판단하여 프론트에서는 정답만 body로 보내주고 응답을 받는 것으로 결정.

로그인 로직은 네가지로 갈라지는데,
1. 비유저
2. 유저인데 로그인만 한 유저
3. 유저인데 로그인과 인증을 모두 마친 유저
4. 어드민

이때, 유저인데 로그인만 했을 경우, 홈에 어디까지 접근을 가능할지에 관해 고민하다가 인증절차를 모두 마친 유저에게만 접근 권한을 주기로 했다.
따라서 로그인만 한 유저는 인증페이지로 이동시켜, 이곳에서 인증절차를 거치지 못한 경우 홈으로 접근을 못하도록 헤더를 모두 날리기로 했다. 로그아웃 버튼 추가를 고려해야 한다.

이러한 4가지 유형의 유저들을 모두 로그인 컴포넌트에서 관리하려다, Home 컴포넌트에서 관리하는 것이 낫다고 판단하였다.

✔️ 내일 할일

홈화면 UI / 기능 구현하기!