[Project] Agile 시스템 구축 - 04.07 멘토링

지난 회의 이후 첫 시작화면과 메인화면의

header, sidebar 등을 만들어보았다.

---

1. 첫 시작 화면

 

시작화면 페이지 구상

첫 시작화면은 다음과 같이 구상하였고하단에 보이는 Slide bar의 사진에는 앞으로 우리가 만든 웹에서의 기능이나 화면을 캡처해서 넣을 예정이다.

 

로그인 버튼에는 회원 가입, 아이디 찾기, 비밀번호 찾기 버튼도 추가 예정이다.

---

2. 로그인 페이지

로그인 폼

로그인 폼은 react-bootstrap에서

가져와 css를 수정했다. 

 

여기에도 역시

아이디 찾기, 비밀번호 찾기, 회원 가입

버튼을 만들 예정이다. 

 

3. 로그인 후 들어가는 페이지 (header, sidebar 컴포넌트 구성)

Header, Sidebar 구성

header와 sidebar 역시 bootstrap에서 가져와서 수정을 했다.앞으로 header 우측 계정 부분에

프로필 사진을 추가 넣고

헤더와 사이드 바 탭 기능 추가

사이드 바가 움직이도록 해볼 예정이다. 

 

이렇게 만든 페이지를 React의 Router로 경로 설정도 해주었다..! 

 

 

---

멘토링 이후 많은 피드백을 받았다. 

(노션에 기록)

 

그 중에서 요번주에 해보아야 할 것은

 

Redux를 이용하여 로그인 상태 관리 이다. 

 

아직까지 공부가 덜 되어 공부 해보면서 적용해볼 예정이다. 

 

백엔드팀에서 DB설계를 하고 

우리팀의 프론트엔드와 백엔드 첫연동을 해봐야겠다!