feat: Mpower 테스트용 board2 임시 생성

src/apis/board2.js

@@ -0,0 +1,32 @@
+//----------------------------------------------------------------------------
+// Board : 게시판 관리
+//----------------------------------------------------------------------------
+
+import axios from 'utils/axios';
+import { GET_BOARD_LIST, REMOVE_BOARD, SAVE_BOARD, SAVE_BOARD_HIT_CNT, GET_BOARD_LIST2 } from 'commons/ApiUrl';
+import { setRowId } from './common';
+
+// eslint-disable-next-line import/prefer-default-export
+export async function findBoards2(params) {
+  const res = await axios.get(GET_BOARD_LIST2, { params });
+  if (res.success) {
+    res.data = res.data.resultList.map((d, idx) => ({ ...d, rowId: setRowId(params, idx) }));
+    return res;
+  }
+  return res;
+}
+
+export async function saveBoard(params) {
+  // eslint-disable-next-line no-return-await
+  return await axios.post(SAVE_BOARD, params);
+}
+
+export async function removeBoard(inCode) {
+  // eslint-disable-next-line no-return-await
+  return await axios.post(REMOVE_BOARD + inCode);
+}
+
+export async function modifyBoardHitCount(inCode) {
+  // eslint-disable-next-line no-return-await
+  return await axios.put(SAVE_BOARD_HIT_CNT + inCode);
+}

src/commons/ApiUrl.js

@@ -17,6 +17,7 @@ export const GET_BOARD_LIST = '/api/v1/ctgy/board';
 export const SAVE_BOARD_HIT_CNT = '/api/v1/ctgy/board/hit/';
 export const SAVE_BOARD = '/api/v1/ctgy/board';
 export const REMOVE_BOARD = '/api/v1/ctgy/board/';
+export const GET_BOARD_LIST2 = '/api/v2/ctgy/board/';
 
 // 주정차 의견 진술
 export const GET_PARKING_LIST = '/api/v1/ctgy/parking';

src/routes/MainRoutes.js

@@ -4,6 +4,7 @@ import { lazy } from 'react';
 import MainLayout from 'layout/MainLayout';
 import Loadable from 'ui-component/Loadable';
 import AuthGuard from 'utils/route-guard/AuthGuard';
+import Board2 from '../views/biz/board/Board2';
 
 // sample page routing
 const SamplePage = Loadable(lazy(() => import('views/sample-page')));
@@ -100,7 +101,10 @@ const MainRoutes = {
       path: '/board',
       element: <Board />
     },
-
+    {
+      path: '/board2',
+      element: <Board2 />
+    },
     // ----------------------------------------
     {
       path: '/judge/parking/review',

src/views/biz/board/Board2.jsx

@@ -0,0 +1,260 @@
+import { useCallback, useEffect, useState } from 'react';
+
+// material-ui
+import { Button, Divider, FormControl, Grid, InputAdornment, InputLabel, Link, MenuItem, OutlinedInput, Select } from '@mui/material';
+
+// assets
+import { IconSearch } from '@tabler/icons';
+
+// berry ui
+import MainCard from 'ui-component/cards/MainCard';
+
+// project imports
+import MuiDataGrid from 'views/cmm/mui-grid/MuiDataGrid';
+import { findBoards2, modifyBoardHitCount, removeBoard, saveBoard } from 'apis/board2';
+import { useAlert } from 'react-alert';
+import CmmModal from 'views/cmm/CmmModal';
+import ModifyBoardForm from './ModifyBoardForm';
+import useAuth from 'hooks/useAuth';
+import { Save } from '@mui/icons-material';
+import NewBoardForm from './NewBoardForm';
+
+const Board = () => {
+  const { user } = useAuth();
+  const [owner, setOwner] = useState(false);
+  const [category, setCategory] = useState('ciTitle');
+  const [searchTxt, setSearchTxt] = useState('');
+
+  const [totalCount, setTotalCount] = useState(0);
+  const [rowsState, setRowsState] = useState({
+    page: 0,
+    pageSize: 20,
+    rows: []
+    // loading: false
+  });
+  const [open, setOpen] = useState(false);
+  const [newBoard, setNewBoard] = useState(false);
+  const [selectedRow, setSelectedRow] = useState({});
+  const [create, setCreate] = useState(false);
+  const [title, setTitle] = useState();
+  const alert = useAlert();
+
+  const columns = [
+    { headerName: '글번호', headerAlign: 'center', field: 'ciContentno', align: 'center' },
+    {
+      headerName: '제목',
+      headerAlign: 'center',
+      field: 'ciTitle',
+      editable: true,
+      width: 400,
+      renderCell: (params) => {
+        let prefix = '';
+        // eslint-disable-next-line no-plusplus
+        for (let idx = 0; idx < params.row.ciStep; idx++) {
+          prefix += ' ';
+        }
+        if (params.row.ciStep > 0) prefix += '↳ ';
+        return (
+          <Link underline="hover" href="#">
+            {prefix}
+            {params.value}
+          </Link>
+        );
+      }
+    },
+    { headerName: '작성자', headerAlign: 'center', field: 'ciName', align: 'center' },
+    { headerName: '작성일', headerAlign: 'center', field: 'ciNalja', align: 'center' },
+    { headerName: '조회수', headerAlign: 'center', field: 'ciHit', align: 'center' },
+    { headerName: '게시판코드', headerAlign: 'center', field: 'ciCode', hide: true },
+    { headerName: '작성자ID', headerAlign: 'center', field: 'ciId', hide: true },
+    { headerName: '등록시간', headerAlign: 'center', field: 'ciTime', hide: true },
+    { headerName: 'ref', headerAlign: 'center', field: 'ciRef', hide: true },
+    { headerName: 'step', headerAlign: 'center', field: 'ciStep', hide: true },
+    { headerName: '비번', headerAlign: 'center', field: 'ciPass', hide: true },
+    { headerName: '내용', headerAlign: 'center', field: 'ciContents', hide: true },
+    { headerName: 'IP', headerAlign: 'center', field: `ciIp`, hide: true },
+    { headerName: 'level', headerAlign: 'center', field: 'ciRevel', hide: true }
+  ];
+
+  const search = useCallback(() => {
+    let params = {
+      page: rowsState.page,
+      size: rowsState.pageSize
+    };
+
+    if (searchTxt) {
+      params = {
+        ...params,
+        [category]: searchTxt
+      };
+    }
+
+    findBoards2(params).then((response) => {
+      if (response && response.data) {
+        setTotalCount(response.count);
+        setRowsState((prevState) => ({ ...prevState, rows: response.data }));
+      }
+    });
+  }, [rowsState.page, rowsState.pageSize, category, searchTxt]);
+
+  const handleSearch = async (event) => {
+    if (event.type === 'keydown' && event.key === 'Enter') {
+      const newString = event?.target.value;
+      setSearchTxt(newString);
+    }
+  };
+
+  const handleOnCellClick = (e) => {
+    if (e?.field === 'ciTitle') {
+      setOwner(user.id === e?.row.ciId);
+      setNewBoard(false);
+      setCreate(false);
+      setTitle('게시판 상세');
+      setSelectedRow(e?.row);
+      if (user.id !== e?.row.ciId) modifyBoardHitCount(e?.row?.ciCode);
+      setOpen(true);
+    }
+  };
+
+  const submitBoard = (type, payload) => {
+    switch (type) {
+      case 'SAVE':
+        if (window.confirm('저장 하시겠습니까?')) {
+          saveBoard(payload).then((res) => {
+            if (res?.success) {
+              search();
+              setOpen(false);
+            } else {
+              alert.show(`${res?.data.message}`);
+            }
+          }); // .then((res) => {
+        } else {
+          window.close();
+        }
+        break;
+      case 'DELETE':
+        if (window.confirm('삭제 하시겠습니까?')) {
+          removeBoard(payload).then((res) => {
+            if (res?.success) {
+              search();
+              setOpen(false);
+            } else {
+              alert.show(`${res?.data.message}`);
+            }
+          }); // .then((res) => {
+        } else {
+          window.close();
+        }
+        break;
+      default:
+    }
+  };
+
+  /**
+   * 댓글인 경우 부모 댓글 번호를 ciRef, ciStep set
+   * @param parentCiCode
+   */
+  const onNewBoard = (e, parentCiCode, parentCiRef) => {
+    let title = '';
+    if (parentCiCode) {
+      setSelectedRow({
+        ciName: user.name,
+        ciRef: parentCiRef ?? parentCiCode,
+        ciStep: 1,
+        ciRevel: 1
+      });
+      title = '게시판 댓글 등록';
+    } else {
+      setSelectedRow({
+        ciName: user.name,
+        ciStep: 0,
+        ciRevel: 0
+      });
+      title = '게시판 새글 등록';
+    }
+    setNewBoard(true);
+    setTitle(title);
+    setOpen(true);
+  };
+
+  useEffect(() => {
+    search();
+  }, [search]); // rowsState.page, rowsState.pageSize, rowsState.rows]);
+
+  return (
+    <MainCard>
+      <Grid container spacing={2} alignItems="center">
+        <Grid item xs={12}>
+          <Grid container spacing={1}>
+            <Grid item>
+              <FormControl fullWidth>
+                <InputLabel required>구분</InputLabel>
+                <Select
+                  size="small"
+                  id="category"
+                  name="reviewYear"
+                  defaultValue={category}
+                  value={category}
+                  onChange={(e) => setCategory(e.target.value)}
+                >
+                  <MenuItem key="1" value="ciTitle">
+                    제목
+                  </MenuItem>
+                  <MenuItem key="2" value="ciName">
+                    이름
+                  </MenuItem>
+                  <MenuItem key="3" value="ciContents">
+                    내용
+                  </MenuItem>
+                </Select>
+              </FormControl>
+            </Grid>
+            <Grid item>
+              <OutlinedInput
+                placeholder="Search"
+                onKeyDown={handleSearch}
+                size="small"
+                autoFocus
+                endAdornment={
+                  <InputAdornment position="end">
+                    <IconSearch stroke={1.5} size="1rem" />
+                  </InputAdornment>
+                }
+              />
+              {/* <IconSearch stroke={1.5} size="1rem" /> */}
+            </Grid>
+            <Grid item style={{ marginLeft: 'auto' }}>
+              <Button variant="contained" size="small" startIcon={<Save />} onClick={onNewBoard}>
+                글쓰기
+              </Button>
+            </Grid>
+          </Grid>
+        </Grid>
+      </Grid>
+      <Grid item xs={12} mt={1} mb={1}>
+        <Divider />
+      </Grid>
+      <MuiDataGrid
+        columns={columns}
+        rowsState={rowsState}
+        totalCount={totalCount}
+        setRowsState={setRowsState}
+        handleCellClick={handleOnCellClick}
+      />
+      <CmmModal isBackdrop title={title} open={open} setOpen={setOpen}>
+        {newBoard && <NewBoardForm setOpen={setOpen} handleModalSave={submitBoard} rowData={selectedRow} owner={owner} />}
+        {!newBoard && (
+          <ModifyBoardForm
+            create={create}
+            setOpen={setOpen}
+            handleModalSave={submitBoard}
+            rowData={selectedRow}
+            owner={owner}
+            handleNewBoard={onNewBoard}
+          />
+        )}
+      </CmmModal>
+    </MainCard>
+  );
+};
+export default Board;