프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - product 페이지

프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - product 페이지

 product  페이지에서는 product 에 대한 상세 정보를 보고 필요에 따라서 수정할수 있다. 

 

product  페이지 준비하기 

product 폴더 및 파일을 생성한다. 

기본 react functional component 를 만든다. 

app.js 파일에 product/{id} 에 대한 route 를 업데이트 해준다. 

결과 화면 

이제 준비 작업이 완료되었다. 

 

Product 상세 페이지 및 업데이트

결과화면 

Product 페이지에서는 상단에는 상품에 대한 sales 및 제품 정보를 보여주고, 그 밑에 제품 업데이트 기능을 추가한다. 

TopLeft : product sales for 3months. 

챠트를 그리기 위한 data 를 만들어준다. 

dummyData.js

결과 화면

TopRight : 제품 이미지 및 상세 정보 

결과 

productTop 에 대한 css 작성

productTopRight 에 위젯에서 사용했던 shadow 값을 복사해서 재사용하였다. 

 

결과화면, 

productInfo 내부의 css 를 추가로 작성

제품의 이미지와 제품 이름사이에 margin 추가 

productBottom : 제품 업데이트 

결과 화면 

끝....