React Admin - 4. featured info 컨포넌트 만들기

React Admin - 4. featured info 컨포넌트 만들기

 

home 페이지를 만들었으니 안에 들어갈 featured info 컴포넌트를 생성해서 화면에 추가할 예정이다. 

 

새로운 featuredInfo 컴포넌트를 생성한다. component 폴더를 만들고, jxs와 css 파일도 추가한다. 

featured 아이템을 꾸미기위해서 featured 와 featuredItem class 만 지정한 컴포넌트를 만든다. 

featuredInfo 에서는  Revenue, Sales, Cost 에 대한 정보를 보여줄 예정이다. 먼저 Revenue 에는 money, 지난분기와 비교 정보까지 들어간다. 

이렇게 만들어진 컴포넌트를 home 페이지에 추가해보자. 

여기서 moneyRate 의 경우, 증가/감소에 따라서 아이콘을 추가해 보자. 

이제 Revenue 에 대한 컴포넌트가 끝났고, 이를 복사해서 Sales / Cost  featuredItem 을 추가하면 된다. 

Cost 경우, 테스트를 위해서 MoneyRate 을 증가로 만들고 MaterialUi 에서 ArrowUpward 아이콘을 import 해서 추가하였다. 

이제부터 css 를 통해서 featuredItem 에 대해서 화면 디자인을 변경한다. 

 

featured 영역은 home page 의 100%를 사용하고, 각각의 item은 flex 를 통해서 옆으로 배치하고 아이템 사이에 공백을 준다. 

 

다음은 각각의  featuredItem에 대한 디자인이다. 

 

 각 item 은 같은 사이즈(flex:1) 을 갖게되고 margin/padding 을 주어 다른 item 사이에서 여백을 준다. 각item에 shadow 을 주었을때 radius를 10px 주어서 둥글게 표시할 생각이다. 아직 이부분은 화면에서 보여지지 않는다. 

 

featuredItem 에 box shadow 를 적용하기 https://html-css-js.com/css/generator/box-shadow/ 사이트를 이용하면 쉽에 css 코드를 만들수 있다. 원하는 shadow 를 만들고, 코드를 복사해서 css 에 붙여넣으면 된다. 

 

 

여기서 보면 featuredItem 의 box shadow 위쪽이 조금 짤리것을 볼수 있다. 이를 해결하기 위해서 app.css 의 container 에 margin을 조금 주면된다. 

 

featuredItem 안에 있는 내용에 대해서 디자인 해보자. 

featuredItem 에는 title, money, moneyRate, featuredSub 가 있으며, 이 클라스에 대한 css 를 적용해면된다. 

 

featureTitle 에 폰트크기를 크게하고, money 정보를 가지고 있는 MoneyContainer 에 margin을 설정한다. 

다음은 money 와 moneyRate 에 대한 설정이다. 

가장 강조하고 싶은 money 에 대한 폰트 크기는 30px / bold 로 설정하고, rate 는 money 와 margin 을 두어서 쉽게 구분되도록 한다. 

다음은 arrow 에 대한 설정이다. 현재 arrow의 경우 material UI 의 컴포넌트를 그대로 가져와서 사용하고 있다. 여기에  css 를 적용하기 위해서는 className 을 추가해주어야 한다. 

featuredIcon , negative 에 css를 적용해보자. 

( font size 가 적용 안되면 !important 를 추가해준다. ) 

featuredIcon에 negative class가 있는지 없는지에 따라서 화살표 색상이 달라진다. 

마지막으로 featuredSub 클라스에 대한 설정이다. 

여기까지해서 featured 컴포넌트가 설정이 끝이다.

featured 컴포넌트

 

 

다음은 "Recharts" 라이브러리를 이용해서 그래프를 화면에 추가할 예정이다.