diff --git a/public/static/images/sub/copy_grid_ico.svg b/public/static/images/sub/copy_grid_ico.svg new file mode 100644 index 0000000..68b34dc --- /dev/null +++ b/public/static/images/sub/copy_grid_ico.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/sub/pagination_first.svg b/public/static/images/sub/pagination_first.svg new file mode 100644 index 0000000..61073b5 --- /dev/null +++ b/public/static/images/sub/pagination_first.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/sub/pagination_prev.svg b/public/static/images/sub/pagination_prev.svg new file mode 100644 index 0000000..e162ae4 --- /dev/null +++ b/public/static/images/sub/pagination_prev.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/app/grid/page.jsx b/src/app/grid/page.jsx index cb537ce..0804c4c 100644 --- a/src/app/grid/page.jsx +++ b/src/app/grid/page.jsx @@ -3,6 +3,8 @@ import { useEffect, useState } from 'react' import { useAxios } from '@/hooks/useAxios' import QGrid from '@/components/common/grid/QGrid' +import '@/styles/grid.scss' +import Pagination from '@/components/common/grid/Pagination' export default function GridPage() { const { get } = useAxios() @@ -22,5 +24,12 @@ export default function GridPage() { fetchData() }, []) - return + return ( +
+ +
+ +
+
+ ) } diff --git a/src/components/common/grid/Pagination.jsx b/src/components/common/grid/Pagination.jsx new file mode 100644 index 0000000..96d59d4 --- /dev/null +++ b/src/components/common/grid/Pagination.jsx @@ -0,0 +1,20 @@ +export default function Pagination (){ + return( +
    +
    2. +
    3. +
    4. +
    5. +
    6. +
    7. +
    8. +
    9. +
    10. +
    11. +
    12. +
    13. +
    14. +
    15. +
+ ) +} \ No newline at end of file diff --git a/src/components/common/grid/QGrid.jsx b/src/components/common/grid/QGrid.jsx index 99c3fd6..c8045c0 100644 --- a/src/components/common/grid/QGrid.jsx +++ b/src/components/common/grid/QGrid.jsx @@ -21,13 +21,20 @@ export default function QGrid(props) { */ const [colDefs, setColDefs] = useState( gridColumns ?? [ - { field: 'mission', filter: true }, - { field: 'company' }, - { field: 'location' }, - { field: 'date' }, - { field: 'price', valueFormatter: (params) => `₩ ${params.value.toLocaleString()}` }, - { field: 'successful' }, - { field: 'rocket' }, + { headerName: "更新日時", field: 'mission', filter: true, cellStyle: {textAlign: "center"}}, + { headerName: "品番", field: 'company' }, + { headerName: "プラン数", field: 'location', flex: 1, cellRenderer: (params) => { + return ( +
+ {params.value.toLocaleString()} + +
+ ); + }}, + { headerName: "商品名", field: 'date', cellStyle: {textAlign: "right"} }, + { headerName: "商品名", field: 'price', valueFormatter: (params) => `₩ ${params.value.toLocaleString()}` }, + { headerName: "販売店ID", field: 'successful', cellStyle: {display: "flex", justifyContent: 'center'} }, + { headerName: "代理店名", field: 'rocket' }, ], ) @@ -66,13 +73,14 @@ export default function QGrid(props) { // } console.log('use effect') - gridData ? setRowData(gridData) : '' + // 임의 10개 지정 + gridData ? setRowData(gridData.slice(0, 10)) : '' }, [gridData]) return (
) diff --git a/src/components/sub/management/productstate/ProductsList.jsx b/src/components/sub/management/productstate/ProductsList.jsx index 0663e4f..fa70ed7 100644 --- a/src/components/sub/management/productstate/ProductsList.jsx +++ b/src/components/sub/management/productstate/ProductsList.jsx @@ -1,4 +1,28 @@ +'use client' + +import { useEffect, useState } from 'react' +import { useAxios } from '@/hooks/useAxios' +import Pagination from "@/components/common/grid/Pagination" +import QGrid from "@/components/common/grid/QGrid" +import '@/styles/grid.scss' + export default function ProductsList(){ + const { get } = useAxios() + + const [gridProps, setGridProps] = useState({ + gridData: [], + isPageable: true, + }) + + useEffect(() => { + async function fetchData() { + // const response = await fetch('https://www.ag-grid.com/example-assets/space-mission-data.json') + // const data = await response.json() + const data = await get({ url: 'https://www.ag-grid.com/example-assets/space-mission-data.json' }) + setGridProps({ ...gridProps, gridData: data }) + } + fetchData() + }, []) return(
@@ -23,7 +47,12 @@ export default function ProductsList(){
- gird +
+ +
+ +
+
) diff --git a/src/components/sub/management/productstate/PropertyStatus.jsx b/src/components/sub/management/productstate/PropertyStatus.jsx index 95b55dc..6b10bb5 100644 --- a/src/components/sub/management/productstate/PropertyStatus.jsx +++ b/src/components/sub/management/productstate/PropertyStatus.jsx @@ -50,44 +50,13 @@ export default function PropertyStatus(){ - 販売代理店名 - -
- -
- - 仕様確認可否 - -
-
- - -
-
- - -
-
- - -
-
- - - - 担当者 - -
- -
- 見積もり
- 2次点の選択 + 販売代理店の選択
+
+ 期間検索 - +
@@ -111,11 +87,11 @@ export default function PropertyStatus(){
-
+
~ -
+
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index de383a2..6b7a506 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -578,6 +578,9 @@ justify-content: center; margin-top: 20px; } + .pagination-wrap{ + margin-top: 24px; + } } .infomation-box-wrap{ diff --git a/src/styles/_grid-detail.scss b/src/styles/_grid-detail.scss new file mode 100644 index 0000000..a673236 --- /dev/null +++ b/src/styles/_grid-detail.scss @@ -0,0 +1,61 @@ +.q-grid{ + height: fit-content; + .ag-theme-quartz { + outline: none; + border: none; + --ag-border-radius: 0px; + --ag-wrapper-border-radius: 0px; + --ag-header-height: 40px; + --ag-header-foreground-color: white; + --ag-header-background-color: #5D6A76; + // --ag-header-cell-hover-background-color: rgb(80, 40, 140); + --ag-header-cell-moving-background-color: #5D6A76; + .ag-root-wrapper{ + outline: none; + border: none; + + } + .ag-header{ + border-bottom: none; + border-radius: 4px; + } + .ag-header-cell{ + font-size: 13px; + color: #fff; + } + .ag-header-cell-label{ + justify-content: center; + } + .ag-header-cell-resize{ + &:after{ + display: none; + } + } + .ag-row{ + border-bottom: 1px solid #ECF0F4; + &:nth-child(2n){ + background-color: #F7F9FA; + } + } + .ag-cell{ + font-size: 13px; + color: #45576F; + } + .ag-icon-desc::before, + .ag-icon-asc::before, + .ag-icon-filter::before{ + color: #fff; + } + } + .copy-ico-wrap{ + display: flex; + align-items: center; + .copy_ico{ + width: 18px; + height: 18px; + background: url(../../public/static/images/sub/copy_grid_ico.svg)no-repeat center; + background-size: cover; + margin-left: 12px; + } + } +} \ No newline at end of file diff --git a/src/styles/_pagination.scss b/src/styles/_pagination.scss new file mode 100644 index 0000000..008527b --- /dev/null +++ b/src/styles/_pagination.scss @@ -0,0 +1,51 @@ +.pagination{ + display: flex; + align-items: center; + justify-content: center; + gap: 5px; + .page-item{ + button{ + font-family: 'Pretendard'; + display: flex; + align-items: center; + justify-content: center; + width: 24px; + height: 24px; + border: 1px solid #EAEAEA; + font-size: 12px; + font-weight: 400; + color: #808080; + } + &.on{ + button{ + border-color: #304961; + font-weight: 600; + color: #304961; + } + } + &.last, + &.first{ + button{ + background: url(../../public/static/images/sub/pagination_first.svg)no-repeat center; + background-size: 9px 8px; + } + } + &.last{ + button{ + transform: rotate(180deg); + } + } + &.next, + &.prev{ + button{ + background: url(../../public/static/images/sub/pagination_prev.svg)no-repeat center; + background-size: 5px 8px; + } + } + &.next{ + button{ + transform: rotate(180deg); + } + } + } +} \ No newline at end of file diff --git a/src/styles/_table.scss b/src/styles/_table.scss index b55fd03..1c9a0bd 100644 --- a/src/styles/_table.scss +++ b/src/styles/_table.scss @@ -22,6 +22,7 @@ padding: 0px 9px; border: 1px solid #ECF0F4 ; .radio-wrap{ + flex: none; @include flexbox; } .form-flex-wrap{ @@ -29,6 +30,7 @@ gap: 15px; } .date-picker-wrap{ + width: 100%; @include flexbox; span{ margin: 0 4px; diff --git a/src/styles/grid.scss b/src/styles/grid.scss new file mode 100644 index 0000000..71f4271 --- /dev/null +++ b/src/styles/grid.scss @@ -0,0 +1,2 @@ +@import '_grid-detail.scss'; +@import '_pagination.scss'; \ No newline at end of file