티스토리 뷰
REACT/Admin Dashboard - project #1
프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - productList 페이지
브라이언77 2022. 1. 7. 14:03반응형
프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - productList 페이지
ProductList 페이지 준비
productList 를 위한 폴더 및 파일 생성하고 기본 react fuctional component 를 생성한다.
app.js 에서 product 를 위한 routes 를 설정해 준다.
user 와 동일하게 productList, product, newProduct 를 만들어 주고 이번 포스팅에서는 ProductList를 구현한다.
/products 링크로 들어같을때 다음과 같이 나오면 준비가 완료된 것이다.
ProductList 데이터 테이블 만들기
userList 에 DataGrid 를 참고해서 products 테이블을 만들면 된다. UserList.jsx 와 거의 유사하므로 아래 코드를 보고 필요한 부분만 수정해서 productList.jsx 를 작성한다.
ProductList.jsx
import React from 'react'
import './productList.css'
import { DataGrid } from '@mui/x-data-grid'
import { DeleteOutline } from '@mui/icons-material'
import { productRows } from '../../dummyData'
import { Link } from 'react-router-dom'
import { useState } from 'react'
export default function ProductList() {
const [data, setData] = useState(productRows)
const handleDelete = (id) => {
setData(data.filter((item) => item.id !== id))
}
const columns = [
{ field: 'id', headerName: 'ID', width: 70 },
{
field: 'product',
headerName: 'Product',
width: 200,
renderCell: (params) => {
return (
<div className="productListItem">
<img className="productListImg" src={params.row.img} alt="" />
{params.row.name}
</div>
)
},
},
{ field: 'stock', headerName: 'Stock', width: 200 },
{
field: 'status',
headerName: 'Status',
width: 110,
},
{
field: 'price',
headerName: 'Price',
width: 130,
},
{
field: 'action',
headerName: 'Action',
width: 150,
renderCell: (params) => {
return (
<>
<Link to={'/product/' + params.row.id}>
<button className="productListEdit">Edit</button>
</Link>
<DeleteOutline
className="productListDelete"
onClick={() => handleDelete(params.row.id)}
/>
</>
)
},
},
]
return (
<div className="productList">
<DataGrid
rows={data}
disableSelectionOnClick
columns={columns}
pageSize={10}
rowsPerPageOptions={[5]}
checkboxSelection
/>
</div>
)
}
productList.css
.productList {
flex: 4;
}
.productListItem {
display: flex;
align-items: center;
}
.productListImg {
width: 32px;
height: 32px;
border-radius: 50%;
object-fit: cover;
margin-right: 10px;
}
.productListEdit {
border: none;
border-radius: 10px;
padding: 5px 10px;
background-color: #3bb077;
color: white;
cursor: pointer;
margin-right: 15px;
}
.productListDelete {
color: red;
cursor: point;
}
dummyData.js - productRows
export const productRows = [
{
id: 1,
name: 'Apple Watch',
img:
'https://images.pexels.com/photos/8066715/pexels-photo-8066715.png?cs=srgb&dl=pexels-mediamodifier-8066715.jpg&fm=jpg',
stock: 23,
status: 'active',
price: '$120.00',
},
{
id: 2,
name: 'Apple Macbook',
img:
'https://images.pexels.com/photos/4065890/pexels-photo-4065890.jpeg?cs=srgb&dl=pexels-cottonbro-4065890.jpg&fm=jpg',
stock: 12,
status: 'active',
price: '$120.00',
},
{
id: 3,
name: 'Apple Airpods',
img:
'https://images.pexels.com/photos/7205060/pexels-photo-7205060.jpeg?cs=srgb&dl=pexels-levi-loot-7205060.jpg&fm=jpg',
stock: 6,
status: 'active',
price: '$120.00',
},
{
id: 4,
name: 'Apple Airpods',
img:
'https://images.pexels.com/photos/4158/apple-iphone-smartphone-desk.jpg?cs=srgb&dl=pexels-pixabay-4158.jpg&fm=jpg',
stock: 123,
status: 'active',
price: '$120.00',
},
{
id: 5,
name: 'Apple Airpods',
img: '',
stock: 123,
status: 'active',
price: '$120.00',
},
{
id: 6,
name: 'Apple Airpods',
img: '',
stock: 123,
status: 'active',
price: '$120.00',
},
{
id: 7,
name: 'Apple Airpods',
img: '',
stock: 123,
status: 'active',
price: '$120.00',
},
{
id: 8,
name: 'Apple Airpods',
img: '',
stock: 123,
status: 'active',
price: '$120.00',
},
{
id: 9,
name: 'Apple Airpods',
img: '',
stock: 123,
status: 'active',
price: '$120.00',
},
{
id: 10,
name: 'Apple Airpods',
img: '',
stock: 123,
status: 'active',
price: '$120.00',
},
]
결과 화면
끝.
'REACT > Admin Dashboard - project #1' 카테고리의 다른 글
프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - new product (0) | 2022.01.07 |
---|---|
프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - product 페이지 (0) | 2022.01.07 |
프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - new user (0) | 2022.01.07 |
프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - display and edit user (0) | 2022.01.02 |
프로젝트 #1 - REACT 를 이용해서 Admin Dashboard - Material UI Table tutorial (1) | 2021.12.30 |
댓글
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 프로젝트 생성
- http 요청
- HOME key
- df 명령어
- angular
- 메시지 전송
- vscode
- python message
- 미밴드4
- webhook
- 장고
- venv
- END key
- 디스크 사용량
- Python
- 파이썬
- 미밴드
- du 명령어
- win7
- cmd실행
- channel oauth
- HOME/END
- django
- 팀 소통
- slack api
- cmd창
- win10
- amaztools
- Karabiner-Elements
- python slack
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
글 보관함