프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - display and edit user

프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - display and edit user

 

이번에는 개별 사용자에 정보를 보여주고 필요에 따라서 수정하는 페이지를 생성한다. 

 

사용자 페이지를 위한 폴더와 파일을 생성한다. 

 

그리고 App.js 에서 /user/{userID} 요청에 대해서 포워딩 해주도록 설정한다. 

결과 화면: 

이제 부터는 사용자 정보를 보여는 페이지를 만든다. 첫번째로 페이지 타이틀 만들기. 

 

결과 화면

다음은 show / update 영역을 1:2로 분할하고, show에서는 이미지를 포함한 디테일 정보가 표시되고 update 영역에서 정보를 수정해서 변경할수 있게 할 예정이다. 그럼  flex를 이용해서 화면 분할 부터 시작한다. 

 

userShow 와  userUpdate 는 box-shadow 를 주는데, 이전에 위젯 생성시 사용한 설정을 그대로 복사해서 사용한다. 

결과 화면: 

 

userShow 영역 만들기 

 

top / bottom 영역으로 구분하고, top 에서는 이미지, username 및 title 을 보여준다. 

bottom 영역에는 ... 생일, 이메일, 연락처, 위치 등등의 내용을 표시해준다. 

결과 화면

 

update 영역 만들기 

오른쪽에 사용자 정보를 업데이트하는 부분을 추가한다. 왼쪽/오른쪽 두개의 영역으로 나눠서 새로운 정보를 업데이트 할 수 있도록 form 을 사용해서 구현한다. 

 

userUpdateLeft 에는 username, full name, email, phone, address 는 넣는다. 

그리고 userUpdateRight 에는 이미지와 버튼을 추가한다. 

 파일 업로드는 위해서 material UI 의 아이콘을 이용했고, 또 input 태그를 사용해서 file 업로드 버튼이 중복해서 생성되었다. 파일 버튼을 화면에서 안보이도록 설정한다. 

아이콘을 클릭하면 파일을 선택할수 있는 파일브라우져가 나타난다. 

 

일단 화면에 보이는 이미지 부터 크기를 조절해 보자. 

 

이제 update 영역을 디자인한다. 

다음은 개별 아이템(userUpdateItem)에 대한 디자인 변경 

userUpdateItem 내의 label 과 input 에 대한 디자인 

다음은 userUpdate 오른쪽에 대한 디자안 변경한다. 먼저 업데이트를 위한 버튼을 추가한다. 

 

다음은 이미지 업로드 버튼과 업데이트 버튼에 대한 디자인 

- 업로드 아이콘에 className 추가하고 css 를 추가한다. 

 

사용자 정보 수정 페이지가 마무리 되었다.  Create 버튼을 누르면 새로운 사용자를 생성하는 페이지로 이동할수 있도록 Link 를 추가해준다. 

오른쪽 Create 버튼을 누르면 localhost:3000/newUser 페이지로 이동하는 것을 확인할 수 있다. 

 

끝.