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

프로젝트 #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',
  },
]

 

결과 화면

끝.