feat; pagination productList

src/components/common/PaginationCommon/PaginationCommon.module.scss

@@ -0,0 +1,22 @@
+.warpper{
+    .item{
+        @apply inline-flex items-center justify-center cursor-pointer;
+        background-color: var(--gray);
+        margin: 0 0.4rem;
+        width: 3.2rem;
+        height: 3.2rem;
+        &.active{
+            @apply border border-solid;
+            border-color: var(--text-active);
+            background-color: var(--white);
+        }
+        &.disable{
+            svg{
+                path{
+                    fill: var(--disabled)
+                }
+            }
+            @apply text-disabled cursor-not-allowed;
+        }
+    }
+}

src/components/common/PaginationCommon/PaginationCommon.tsx

@@ -1,15 +1,74 @@
-import React from 'react'
-
+import classNames from 'classnames'
+import React, { useEffect, useState } from 'react'
+import { ArrowLeftSmall, ArrowRightSmall } from 'src/components/icons'
+import PaginationItem from './components/PaginationItem'
+import s from './PaginationCommon.module.scss'
 interface PaginationCommonProps {
-    
+  defaultCurrent?: number
+  pageSize: number
+  total: number
+  onChange?: (page: number, pageSize: number) => void
 }
 
-const PaginationCommon = (props: PaginationCommonProps) => {
-    return (
-        <div>
-            
-        </div>
-    )
+const PaginationCommon = ({
+  total,
+  pageSize,
+  defaultCurrent,
+  onChange,
+}: PaginationCommonProps) => {
+  const [pageNum, setPageNum] = useState<number>(0)
+  const [currentPage, setCurrentPage] = useState<number>(0)
+  useEffect(() => {
+    setPageNum(Math.ceil(total / pageSize))
+  }, [total, pageSize])
+
+  useEffect(() => {
+    if (defaultCurrent) {
+      setCurrentPage(defaultCurrent)
+    }
+  }, [defaultCurrent])
+
+  const onPageClick = (page: number) => {
+    setCurrentPage(page)
+    onChange && onChange(page, pageSize)
+  }
+
+  const onPrevClick = () => {
+    setCurrentPage(currentPage - 1 < 0 ? 0 : currentPage - 1)
+  }
+
+  const onNextClick = () => {
+    setCurrentPage((currentPage + 1) > (pageNum - 1) ? (pageNum - 1) : currentPage + 1)
+  }
+
+  return (
+    <div className={s.warpper}>
+      <div
+        className={classNames(s.item, { [`${s.disable}`]: currentPage <= 0 })}
+        onClick={onPrevClick}
+      >
+        <ArrowLeftSmall disable={currentPage <= 0} />
+      </div>
+      {[...Array(pageNum).keys()].map((index) => {
+        return (
+          <PaginationItem
+            page={index}
+            onClick={onPageClick}
+            key={`${index}-item`}
+            active={index === currentPage}
+          />
+        )
+      })}
+      <div
+        className={classNames(s.item, {
+          [`${s.disable}`]: currentPage >= pageNum - 1,
+        })}
+        onClick={onNextClick}
+      >
+        <ArrowRightSmall disable={currentPage >= pageNum} />
+      </div>
+    </div>
+  )
 }
 
 export default PaginationCommon

src/components/common/PaginationCommon/components/PaginationItem.tsx

@@ -0,0 +1,21 @@
+import classNames from 'classnames'
+import React from 'react'
+import s from "../PaginationCommon.module.scss"
+interface PaginationItemProps {
+    onClick:(page:number)=>void
+    page:number
+    active:boolean
+}
+
+const PaginationItem = ({onClick, page, active}: PaginationItemProps) => {
+    const onPageClick = () => {
+        onClick && onClick(page)
+    }
+    return (
+        <div onClick={onPageClick} className={classNames(s.item,{[`${s.active}`]:active})}>
+            {page+1}
+        </div>
+    )
+}
+
+export default PaginationItem

src/components/common/ProductList/ProductList.module.scss

@@ -0,0 +1,11 @@
+.wrapper{
+    .list{        
+        max-width: 109.4rem;
+        @apply flex flex-wrap;
+    }
+    .pagination{
+        padding-top: 4.8rem;
+        max-width: 109.4rem;
+        @apply flex justify-center items-center ;
+    }
+}

src/components/common/ProductList/ProductList.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react'
+import PaginationCommon from '../PaginationCommon/PaginationCommon'
+import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard'
+import s from "./ProductList.module.scss"
+interface ProductListProps {
+    data: ProductCardProps[]
+}
+
+const ProductList = ({data}: ProductListProps) => {
+    const [currentPage, setCurrentPage] = useState(0)
+    const onPageChange = (page:number) => {
+        setCurrentPage(page)
+    }
+    return (
+        <div className={s.wrapper}>
+            <div className={s.list}>
+                {
+                    data.slice(currentPage*20,(currentPage+1)*20).map((product)=>{
+                        return <ProductCard {...product}/>
+                    })
+                }
+            </div>
+            <div className={s.pagination}>
+                <PaginationCommon total={data.length} pageSize={20} onChange={onPageChange}/>
+            </div>
+        </div>
+    )
+}
+
+export default ProductList

src/components/common/index.ts

@@ -30,3 +30,4 @@ export { default as SelectCommon} from './SelectCommon/SelectCommon'
 export { default as ModalCommon} from './ModalCommon/ModalCommon'
 export { default as ModalConfirm} from "./ModalConfirm/ModalConfirm"
 export { default as ModalInfo} from "./ModalInfo/ModalInfo"
+export { default as ProductList} from "./ProductList/ProductList"