xit-front
/
xit-opst-fo
20
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: PropTypes 적용

Browse Source
main
Lim Jonguk 3 years ago
parent 06e0dc61cf
commit e3e2bf54b8
6 changed files with 55 additions and 260 deletions
Show Stats Download Patch File Download Diff File

2
public/index.html
Unescape Escape View File

@ -88,6 +88,7 @@
-->
<!-- Global site tag (gtag.js) - Google Analytics -->
<!--
<script async src="https://www.googletagmanager.com/gtag/js?id=G-X1LG1CJ1GG"></script>
<script>
window.dataLayer = window.dataLayer || [];
@ -98,5 +99,6 @@
gtag('config', 'G-X1LG1CJ1GG');
gtag('event', 'action', { non_interaction: true });
</script>
-->
</body>
</html>

13
src/apis/BoardService.js
Unescape Escape View File

@ -2,10 +2,13 @@ import { BOARD_LIST_URL } from 'commons/ApiUrl';
import axios from 'utils/axios';
class BoardService {
getBoardList = (params) =>
axios.get(BOARD_LIST_URL, { params }).then((r) => {
console.log(r);
return r;
});
// eslint-disable-next-line no-return-await
getBoardList = async (params) => await axios.get(BOARD_LIST_URL, { params });
// const res = await axios.get(BOARD_LIST_URL, { params });
// return res;
// axios.get(BOARD_LIST_URL, { params }).then((r) => {
// console.log(r);
// return r;
// });
}
export default new BoardService();

14
src/ui-component/MuiGridList.jsx
Unescape Escape View File

@ -1,12 +1,15 @@
import PropTypes from 'prop-types';
// material-ui
// import type { GridColumns } from '@mui/x-data-grid/colDef';
import { DataGrid } from '@mui/x-data-grid';
import { Box } from '@mui/material';
import { useTheme } from '@mui/material/styles';
// project imports
const MuiGridList = (props) => {
const { columns, rowsState, totalCount, setRowsState } = props;
const MuiGridList = ({ columns, rowsState, totalCount, setRowsState }) => {
// const { columns, rowsState, totalCount, setRowsState } = props;
const theme = useTheme();
return (
@ -49,4 +52,11 @@ const MuiGridList = (props) => {
);
};
MuiGridList.propTypes = {
columns: PropTypes.array,
rowsState: PropTypes.any,
totalCount: PropTypes.number,
setRowsState: PropTypes.func
};
export default MuiGridList;

26
src/views/biz/board/BoardList.jsx
Unescape Escape View File

@ -9,6 +9,7 @@ import { useTheme } from '@mui/material/styles';
// project imports
import CmmService from 'apis/CmmService';
import boardService from '../../../apis/BoardService';
const columns = [
{ headerName: '게시판코드', field: 'ciCode' },
@ -55,20 +56,21 @@ const BoardList = () => {
// loading: false
});
const [ciDiv, setCiDiv] = useState<[ICmmCode]>();
const [ciDiv, setCiDiv] = useState();
useEffect(() => {
// setRowsState(prev => ({...prev}))
fetch(
// `https://jsonplaceholder.typicode.com/comments?_start=${params.startRow}&_end=${params.endRow}`
`http://localhost:8090/api/v1/ctgy/board?page=${rowsState.page + 1}&size=${rowsState.pageSize}`
)
.then((r) => r.json())
.then((data) => {
setTotalCount(data.count);
// setTableData(data.data);
setRowsState((prev) => ({ ...prev, rows: data.data }));
});
const params = {
page: rowsState.page + 1,
size: rowsState.pageSize
};
boardService.getBoardList(params).then((response) => {
console.log(response);
if (response && response.data) {
setTotalCount(response.count);
setRowsState((prevState) => ({ ...prevState, rows: response.data }));
}
});
}, [rowsState.page, rowsState.pageSize]); // rowsState.page, rowsState.pageSize, rowsState.rows]);
return (

180
src/views/biz/board/index.jsx
Unescape Escape View File

@ -8,26 +8,14 @@ import { IconSearch } from '@tabler/icons';
// berry ui
import MainCard from 'ui-component/cards/MainCard';
import { useDispatch, useSelector } from 'store';
// project imports
import MuiGridList from 'ui-component/MuiGridList';
import boardService from 'apis/BoardService';
const Index = () => {
const dispatch = useDispatch();
const [category, setCategory] = useState('ciTitle');
const [searchTxt, setSearchTxt] = useState('');
// const handleSearch = async (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | undefined) => {
// const newString = event?.target.value;
// setSearch(newString);
//
// if (newString) {
// dispatch(filterDetailCards(newString));
// } else {
// dispatch(getDetailCards());
// }
// };
const [totalCount, setTotalCount] = useState(0);
const [rowsState, setRowsState] = useState({
@ -70,22 +58,13 @@ const Index = () => {
}
];
const handleSearch = async (event) => {
console.log('~~~');
if (event.type === 'keydown' && event.key === 'Enter') {
const newString = event?.target.value;
setSearchTxt(newString);
// if (newString) {
// dispatch(filterDetailCards(newString));
// } else {
// dispatch(getDetailCards());
// }
}
};
useEffect(() => {
// setRowsState(prev => ({...prev}))
let params = {
page: rowsState.page + 1,
size: rowsState.pageSize
@ -98,166 +77,19 @@ const Index = () => {
};
}
const res = boardService.getBoardList(params).then((response) => {
boardService.getBoardList(params).then((response) => {
console.log(response);
if (response && response.data) {
// setTotalCount(response?.count);
setTotalCount(response.count);
setRowsState((prevState) => ({ ...prevState, rows: response.data }));
}
});
// if (res) {
// setTotalCount(res.count);
// setRowsState((prev) => ({ ...prev, rows: res.data }));
// }
// fetch(
// // `https://jsonplaceholder.typicode.com/comments?_start=${params.startRow}&_end=${params.endRow}`
// `http://localhost:8090/api/v1/ctgy/board?page=${rowsState.page + 1}&size=${rowsState.pageSize}${search}`
// )
// .then((r) => r.json())
// .then((data) => {
// setTotalCount(data.count);
// // setTableData(data.data);
// setRowsState((prev) => ({ ...prev, rows: data.data }));
// });
}, [rowsState.page, rowsState.pageSize, searchTxt]); // rowsState.page, rowsState.pageSize, rowsState.rows]);
return (
<MainCard
// title={
// <Grid container alignItems="center" justifyContent="space-between" spacing={gridSpacing}>
// <Grid item>
// <Typography variant="h3">List</Typography>
// </Grid>
// <Grid item>
// <OutlinedInput
// id="input-search-list-style1"
// placeholder="Search"
// // onChange={handleSearch}
// onKeyDown={handleSearch}
// startAdornment={
// <InputAdornment position="start">
// <IconSearch stroke={1.5} size="1rem" />
// </InputAdornment>
// }
// size="small"
// />
// </Grid>
// </Grid>
// }
>
<MainCard>
<Grid container spacing={2} alignItems="center">
{/*
<Grid item xs={12} lg={4}>
<Grid container spacing={2} alignItems="center">
<Grid item xs={12} sm={3} lg={4} sx={{ pt: { xs: 2, sm: '0 !important' } }}>
<InputLabel horizontal sx={{ textAlign: { xs: 'left', sm: 'right' } }}>
Name :
</InputLabel>
</Grid>
<Grid item xs={12} sm={9} lg={8}>
<TextField fullWidth placeholder="Enter full name" />
</Grid>
</Grid>
</Grid>
<Grid item xs={12} lg={4}>
<Grid container spacing={2} alignItems="center">
<Grid item xs={12} sm={3} lg={4} sx={{ pt: { xs: 2, sm: '0 !important' } }}>
<InputLabel horizontal sx={{ textAlign: { xs: 'left', sm: 'right' } }}>
Email :
</InputLabel>
</Grid>
<Grid item xs={12} sm={9} lg={8}>
<TextField fullWidth placeholder="Enter email" />
</Grid>
</Grid>
</Grid>
<Grid item xs={12} lg={4}>
<Grid container spacing={2} alignItems="center">
<Grid item xs={12} sm={3} lg={4} sx={{ pt: { xs: 2, sm: '0 !important' } }}>
<InputLabel horizontal sx={{ textAlign: { xs: 'left', sm: 'right' } }}>
Password :
</InputLabel>
</Grid>
<Grid item xs={12} sm={9} lg={8}>
<TextField
type="password"
fullWidth
placeholder="Enter Password"
InputProps={{
startAdornment: (
<InputAdornment position="start">
<LockTwoToneIcon />
</InputAdornment>
)
}}
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} lg={4}>
<Grid container spacing={2} alignItems="center">
<Grid item xs={12} sm={3} lg={4} sx={{ pt: { xs: 2, sm: '0 !important' } }}>
<InputLabel horizontal sx={{ textAlign: { xs: 'left', sm: 'right' } }}>
Contact :
</InputLabel>
</Grid>
<Grid item xs={12} sm={9} lg={8}>
<TextField fullWidth placeholder="Enter contact number" />
<FormHelperText>Please enter your contact</FormHelperText>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} lg={4}>
<Grid container spacing={2} alignItems="center">
<Grid item xs={12} sm={3} lg={4} sx={{ pt: { xs: 2, sm: '0 !important' } }}>
<InputLabel horizontal sx={{ textAlign: { xs: 'left', sm: 'right' } }}>
Profile URL :
</InputLabel>
</Grid>
<Grid item xs={12} sm={9} lg={8}>
<TextField
fullWidth
placeholder="Please enter your Profile URL"
InputProps={{
endAdornment: (
<InputAdornment position="end">
<LinkTwoToneIcon />
</InputAdornment>
)
}}
/>
</Grid>
</Grid>
</Grid>
<Grid item xs={12} lg={4}>
<Grid container spacing={2} alignItems="center">
<Grid item xs={12} sm={3} lg={4} sx={{ pt: { xs: 2, sm: '0 !important' } }}>
<InputLabel horizontal sx={{ textAlign: { xs: 'left', sm: 'right' } }}>
Pincode :
</InputLabel>
</Grid>
<Grid item xs={12} sm={9} lg={8}>
<TextField fullWidth placeholder="Enter your postcode" />
</Grid>
</Grid>
</Grid>
<Grid item xs={12} lg={4}>
<Grid container spacing={2} alignItems="center">
<Grid item xs={12} sm={3} lg={4} sx={{ pt: { xs: 2, sm: '0 !important' } }}>
<InputLabel horizontal sx={{ textAlign: { xs: 'left', sm: 'right' } }}>
Address :
</InputLabel>
</Grid>
<Grid item xs={12} sm={9} lg={8}>
<TextField fullWidth placeholder="Enter your address" />
</Grid>
</Grid>
</Grid>
*/}
{/* <Grid item xs={12} lg={4}> */}
{/* <Grid container spacing={2} alignItems="center"> */}
<Grid item xs={6} lg={3}>
<Grid item xs={12} lg={6}>
<Grid container spacing={1}>
<Grid item>
<FormControl>
@ -281,14 +113,12 @@ const Index = () => {
</Grid>
</Grid>
</Grid>
{/* </Grid> */}
<Grid item xs={12}>
<Divider />
</Grid>
<Grid item xs={12}>
<Divider />
</Grid>
<MuiGridList columns={columns} rowsState={rowsState} totalCount={totalCount} setRowsState={setRowsState} />
</MainCard>
);

80
src/views/biz/board/public.jsx
Unescape Escape View File

@ -9,27 +9,13 @@ import LockTwoToneIcon from '@mui/icons-material/LockTwoTone';
// berry ui
import MainCard from 'ui-component/cards/MainCard';
import { useDispatch } from 'store';
import { getDetailCards, filterDetailCards } from 'store/slices/user';
// project imports
import MuiGridList from 'ui-component/MuiGridList';
import InputLabel from 'ui-component/extended/Form/InputLabel';
import boardService from '../../../apis/BoardService';
const Index = () => {
const dispatch = useDispatch();
const [search, setSearch] = useState('');
// const handleSearch = async (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | undefined) => {
// const newString = event?.target.value;
// setSearch(newString);
//
// if (newString) {
// dispatch(filterDetailCards(newString));
// } else {
// dispatch(getDetailCards());
// }
// };
const [totalCount, setTotalCount] = useState(0);
const [rowsState, setRowsState] = useState({
page: 0,
@ -70,59 +56,24 @@ const Index = () => {
field: `ciIp`
}
];
const handleSearch = async (event) => {
console.log('~~~');
if (event.type === 'keydown' && event.key === 'Enter') {
const newString = event?.target.value;
setSearch(newString);
if (newString) {
dispatch(filterDetailCards(newString));
} else {
dispatch(getDetailCards());
}
}
};
useEffect(() => {
// setRowsState(prev => ({...prev}))
fetch(
// `https://jsonplaceholder.typicode.com/comments?_start=${params.startRow}&_end=${params.endRow}`
`http://localhost:8090/api/v1/ctgy/board?page=${rowsState.page + 1}&size=${rowsState.pageSize}`
)
.then((r) => r.json())
.then((data) => {
setTotalCount(data.count);
// setTableData(data.data);
setRowsState((prev) => ({ ...prev, rows: data.data }));
});
const params = {
page: rowsState.page + 1,
size: rowsState.pageSize
};
boardService.getBoardList(params).then((response) => {
console.log(response);
if (response && response.data) {
setTotalCount(response.count);
setRowsState((prevState) => ({ ...prevState, rows: response.data }));
}
});
}, [rowsState.page, rowsState.pageSize]); // rowsState.page, rowsState.pageSize, rowsState.rows]);
return (
<MainCard
// title={
// <Grid container alignItems="center" justifyContent="space-between" spacing={gridSpacing}>
// <Grid item>
// <Typography variant="h3">List</Typography>
// </Grid>
// <Grid item>
// <OutlinedInput
// id="input-search-list-style1"
// placeholder="Search"
// // onChange={handleSearch}
// onKeyDown={handleSearch}
// startAdornment={
// <InputAdornment position="start">
// <IconSearch stroke={1.5} size="1rem" />
// </InputAdornment>
// }
// size="small"
// />
// </Grid>
// </Grid>
// }
>
{/* <Grid item xs={12}> */}
<MainCard>
<Grid container spacing={2} alignItems="center">
<Grid item xs={12} lg={4}>
<Grid container spacing={2} alignItems="center">
@ -253,10 +204,7 @@ const Index = () => {
<Divider />
</Grid>
{/* </Grid> */}
{/* <Grid container> */}
<MuiGridList columns={columns} rowsState={rowsState} totalCount={totalCount} setRowsState={setRowsState} />
{/* </Grid> */}
</MainCard>
);
};

Write Preview
Loading…
Cancel
Save