bugfix menu tree dnd update
This commit is contained in:
shinmj
@@ -202,339 +202,338 @@ const BoardItem = ({
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<FormProvider {...methods}>
|
||||
<form>
|
||||
<Grid container spacing={1}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box boxShadow={1}>
|
||||
<Controller
|
||||
name="boardName"
|
||||
control={control}
|
||||
rules={{ required: true, maxLength: 100 }}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
autoFocus
|
||||
label={t('board.board_name')}
|
||||
name="boardName"
|
||||
required
|
||||
inputProps={{ maxLength: 100 }}
|
||||
id="outlined-full-width"
|
||||
placeholder={format(t('msg.placeholder.format'), [
|
||||
t('board.board_name'),
|
||||
])}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.boardName && (
|
||||
<ValidationAlert
|
||||
fieldError={errors.boardName}
|
||||
target={[100]}
|
||||
<Grid container spacing={1}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box boxShadow={1}>
|
||||
<Controller
|
||||
name="boardName"
|
||||
control={control}
|
||||
rules={{ required: true, maxLength: 100 }}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
autoFocus
|
||||
label={t('board.board_name')}
|
||||
name="boardName"
|
||||
required
|
||||
inputProps={{ maxLength: 100 }}
|
||||
id="outlined-full-width"
|
||||
placeholder={format(t('msg.placeholder.format'), [
|
||||
t('board.board_name'),
|
||||
])}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<FormControl variant="outlined" className={classes.formControl}>
|
||||
<InputLabel id="skinTypeCode-label" required>
|
||||
{t('board.skin_type_code')}
|
||||
</InputLabel>
|
||||
<Controller
|
||||
name="skinTypeCode"
|
||||
control={control}
|
||||
defaultValue={initData?.skinTypeCode}
|
||||
rules={{ required: true }}
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
variant="outlined"
|
||||
name="skinTypeCode"
|
||||
required
|
||||
labelId="skinTypeCode-label"
|
||||
label={t('board.skin_type_code')}
|
||||
margin="dense"
|
||||
{...field}
|
||||
>
|
||||
{skinTypeCodeList.map(option => (
|
||||
<MenuItem key={option.codeId} value={option.codeId}>
|
||||
{option.codeName}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
defaultValue={''}
|
||||
/>
|
||||
{errors.boardName && (
|
||||
<ValidationAlert
|
||||
fieldError={errors.boardName}
|
||||
target={[100]}
|
||||
label={t('board.board_name')}
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box boxShadow={1}>
|
||||
<Controller
|
||||
name="titleDisplayLength"
|
||||
control={control}
|
||||
rules={{ required: true, min: 1, max: 99999 }}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
label={t('board.title_display_length')}
|
||||
name="titleDisplayLength"
|
||||
required
|
||||
type="number"
|
||||
id="outlined-full-width"
|
||||
placeholder={format(t('msg.placeholder.format'), [
|
||||
t('board.title_display_length'),
|
||||
])}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.titleDisplayLength && (
|
||||
<ValidationAlert
|
||||
fieldError={errors.titleDisplayLength}
|
||||
target={[1, 99999]}
|
||||
label={t('board.title_display_length')}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box boxShadow={1}>
|
||||
<Controller
|
||||
name="postDisplayCount"
|
||||
control={control}
|
||||
rules={{ required: true, min: 1, max: 99999 }}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
label={t('board.post_display_count')}
|
||||
name="postDisplayCount"
|
||||
required
|
||||
type="number"
|
||||
id="outlined-full-width"
|
||||
placeholder={format(t('msg.placeholder.format'), [
|
||||
t('board.post_display_count'),
|
||||
])}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.postDisplayCount && (
|
||||
<ValidationAlert
|
||||
fieldError={errors.postDisplayCount}
|
||||
target={[1, 99999]}
|
||||
label={t('board.post_display_count')}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box boxShadow={1}>
|
||||
<Controller
|
||||
name="pageDisplayCount"
|
||||
control={control}
|
||||
rules={{ required: true, min: 1, max: 99999 }}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
label={t('board.page_display_count')}
|
||||
name="pageDisplayCount"
|
||||
required
|
||||
type="number"
|
||||
id="outlined-full-width"
|
||||
placeholder={format(t('msg.placeholder.format'), [
|
||||
t('board.page_display_count'),
|
||||
])}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.pageDisplayCount && (
|
||||
<ValidationAlert
|
||||
fieldError={errors.pageDisplayCount}
|
||||
target={[1, 99999]}
|
||||
label={t('board.page_display_count')}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box boxShadow={1}>
|
||||
<Controller
|
||||
name="newDisplayDayCount"
|
||||
control={control}
|
||||
rules={{ required: true, min: 1, max: 99999 }}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
label={t('board.new_display_day_count')}
|
||||
name="newDisplayDayCount"
|
||||
required
|
||||
type="number"
|
||||
id="outlined-full-width"
|
||||
placeholder={format(t('msg.placeholder.format'), [
|
||||
t('board.new_display_day_count'),
|
||||
])}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.newDisplayDayCount && (
|
||||
<ValidationAlert
|
||||
fieldError={errors.newDisplayDayCount}
|
||||
target={[1, 99999]}
|
||||
label={t('board.new_display_day_count')}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box boxShadow={1} className={classes.switchBox}>
|
||||
<FormControlLabel
|
||||
label={t('board.editor_use_at')}
|
||||
labelPlacement="start"
|
||||
control={
|
||||
<Controller
|
||||
name="editorUseAt"
|
||||
control={control}
|
||||
render={({ field: { onChange, ref, value } }) =>
|
||||
getSwitch(onChange, ref, value)
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box boxShadow={1} className={classes.switchBox}>
|
||||
<FormControlLabel
|
||||
label={t('board.user_write_at')}
|
||||
labelPlacement="start"
|
||||
control={
|
||||
<Controller
|
||||
name="userWriteAt"
|
||||
control={control}
|
||||
render={({ field: { onChange, ref, value } }) =>
|
||||
getSwitch(onChange, ref, value)
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box boxShadow={1} className={classes.switchBox}>
|
||||
<FormControlLabel
|
||||
label={t('board.upload_use_at')}
|
||||
labelPlacement="start"
|
||||
control={
|
||||
<Controller
|
||||
name="uploadUseAt"
|
||||
control={control}
|
||||
render={({ field: { onChange, ref, value } }) => (
|
||||
<Switch
|
||||
inputProps={{ 'aria-label': 'secondary checkbox' }}
|
||||
onClick={handleChangeUploadUseAt}
|
||||
onChange={onChange}
|
||||
inputRef={ref}
|
||||
checked={value}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box boxShadow={1} className={classes.switchBox}>
|
||||
<FormControlLabel
|
||||
label={t('board.comment_use_at')}
|
||||
labelPlacement="start"
|
||||
control={
|
||||
<Controller
|
||||
name="commentUseAt"
|
||||
control={control}
|
||||
render={({ field: { onChange, ref, value } }) =>
|
||||
getSwitch(onChange, ref, value)
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={6} hidden={!uploadUseAt}>
|
||||
<Box boxShadow={1}>
|
||||
<Controller
|
||||
name="uploadLimitCount"
|
||||
control={control}
|
||||
rules={{ required: uploadUseAt, min: 1, max: 99999 }}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
label={t('board.upload_limit_count')}
|
||||
name="uploadLimitCount"
|
||||
type="number"
|
||||
id="outlined-full-width"
|
||||
placeholder={format(t('msg.placeholder.format'), [
|
||||
t('board.upload_limit_count'),
|
||||
])}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.uploadLimitCount && (
|
||||
<ValidationAlert
|
||||
fieldError={errors.uploadLimitCount}
|
||||
target={[1, 99999]}
|
||||
label={t('board.upload_limit_count')}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} hidden={!uploadUseAt}>
|
||||
<Box boxShadow={1}>
|
||||
<Controller
|
||||
name="uploadLimitSize"
|
||||
control={control}
|
||||
rules={{
|
||||
required: uploadUseAt,
|
||||
min: 1,
|
||||
max: 99999999999999999999,
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
label={t('board.upload_limit_size')}
|
||||
name="uploadLimitSize"
|
||||
type="number"
|
||||
id="outlined-full-width"
|
||||
placeholder={format(t('msg.placeholder.format'), [
|
||||
t('board.upload_limit_size'),
|
||||
])}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.uploadLimitSize && (
|
||||
<ValidationAlert
|
||||
fieldError={errors.uploadLimitSize}
|
||||
target={[1, 99999]}
|
||||
label={t('board.upload_limit_size')}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Grid>
|
||||
)}
|
||||
</Box>
|
||||
</Grid>
|
||||
</form>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<FormControl variant="outlined" className={classes.formControl}>
|
||||
<InputLabel id="skinTypeCode-label" required>
|
||||
{t('board.skin_type_code')}
|
||||
</InputLabel>
|
||||
<Controller
|
||||
name="skinTypeCode"
|
||||
control={control}
|
||||
defaultValue={initData?.skinTypeCode}
|
||||
rules={{ required: true }}
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
variant="outlined"
|
||||
name="skinTypeCode"
|
||||
required
|
||||
labelId="skinTypeCode-label"
|
||||
label={t('board.skin_type_code')}
|
||||
margin="dense"
|
||||
{...field}
|
||||
>
|
||||
{skinTypeCodeList.map(option => (
|
||||
<MenuItem key={option.codeId} value={option.codeId}>
|
||||
{option.codeName}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box boxShadow={1}>
|
||||
<Controller
|
||||
name="titleDisplayLength"
|
||||
control={control}
|
||||
rules={{ required: true, min: 1, max: 99999 }}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
label={t('board.title_display_length')}
|
||||
name="titleDisplayLength"
|
||||
required
|
||||
type="number"
|
||||
id="outlined-full-width"
|
||||
placeholder={format(t('msg.placeholder.format'), [
|
||||
t('board.title_display_length'),
|
||||
])}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.titleDisplayLength && (
|
||||
<ValidationAlert
|
||||
fieldError={errors.titleDisplayLength}
|
||||
target={[1, 99999]}
|
||||
label={t('board.title_display_length')}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box boxShadow={1}>
|
||||
<Controller
|
||||
name="postDisplayCount"
|
||||
control={control}
|
||||
rules={{ required: true, min: 1, max: 99999 }}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
label={t('board.post_display_count')}
|
||||
name="postDisplayCount"
|
||||
required
|
||||
type="number"
|
||||
id="outlined-full-width"
|
||||
placeholder={format(t('msg.placeholder.format'), [
|
||||
t('board.post_display_count'),
|
||||
])}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.postDisplayCount && (
|
||||
<ValidationAlert
|
||||
fieldError={errors.postDisplayCount}
|
||||
target={[1, 99999]}
|
||||
label={t('board.post_display_count')}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box boxShadow={1}>
|
||||
<Controller
|
||||
name="pageDisplayCount"
|
||||
control={control}
|
||||
rules={{ required: true, min: 1, max: 99999 }}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
label={t('board.page_display_count')}
|
||||
name="pageDisplayCount"
|
||||
required
|
||||
type="number"
|
||||
id="outlined-full-width"
|
||||
placeholder={format(t('msg.placeholder.format'), [
|
||||
t('board.page_display_count'),
|
||||
])}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.pageDisplayCount && (
|
||||
<ValidationAlert
|
||||
fieldError={errors.pageDisplayCount}
|
||||
target={[1, 99999]}
|
||||
label={t('board.page_display_count')}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box boxShadow={1}>
|
||||
<Controller
|
||||
name="newDisplayDayCount"
|
||||
control={control}
|
||||
rules={{ required: true, min: 1, max: 99999 }}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
label={t('board.new_display_day_count')}
|
||||
name="newDisplayDayCount"
|
||||
required
|
||||
type="number"
|
||||
id="outlined-full-width"
|
||||
placeholder={format(t('msg.placeholder.format'), [
|
||||
t('board.new_display_day_count'),
|
||||
])}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.newDisplayDayCount && (
|
||||
<ValidationAlert
|
||||
fieldError={errors.newDisplayDayCount}
|
||||
target={[1, 99999]}
|
||||
label={t('board.new_display_day_count')}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box boxShadow={1} className={classes.switchBox}>
|
||||
<FormControlLabel
|
||||
label={t('board.editor_use_at')}
|
||||
labelPlacement="start"
|
||||
control={
|
||||
<Controller
|
||||
name="editorUseAt"
|
||||
control={control}
|
||||
render={({ field: { onChange, ref, value } }) =>
|
||||
getSwitch(onChange, ref, value)
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box boxShadow={1} className={classes.switchBox}>
|
||||
<FormControlLabel
|
||||
label={t('board.user_write_at')}
|
||||
labelPlacement="start"
|
||||
control={
|
||||
<Controller
|
||||
name="userWriteAt"
|
||||
control={control}
|
||||
render={({ field: { onChange, ref, value } }) =>
|
||||
getSwitch(onChange, ref, value)
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box boxShadow={1} className={classes.switchBox}>
|
||||
<FormControlLabel
|
||||
label={t('board.upload_use_at')}
|
||||
labelPlacement="start"
|
||||
control={
|
||||
<Controller
|
||||
name="uploadUseAt"
|
||||
control={control}
|
||||
render={({ field: { onChange, ref, value } }) => (
|
||||
<Switch
|
||||
inputProps={{ 'aria-label': 'secondary checkbox' }}
|
||||
onClick={handleChangeUploadUseAt}
|
||||
onChange={onChange}
|
||||
inputRef={ref}
|
||||
checked={value}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Box boxShadow={1} className={classes.switchBox}>
|
||||
<FormControlLabel
|
||||
label={t('board.comment_use_at')}
|
||||
labelPlacement="start"
|
||||
control={
|
||||
<Controller
|
||||
name="commentUseAt"
|
||||
control={control}
|
||||
render={({ field: { onChange, ref, value } }) =>
|
||||
getSwitch(onChange, ref, value)
|
||||
}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} sm={6} hidden={!uploadUseAt}>
|
||||
<Box boxShadow={1}>
|
||||
<Controller
|
||||
name="uploadLimitCount"
|
||||
control={control}
|
||||
rules={{ required: uploadUseAt, min: 1, max: 99999 }}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
label={t('board.upload_limit_count')}
|
||||
name="uploadLimitCount"
|
||||
type="number"
|
||||
id="outlined-full-width"
|
||||
placeholder={format(t('msg.placeholder.format'), [
|
||||
t('board.upload_limit_count'),
|
||||
])}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.uploadLimitCount && (
|
||||
<ValidationAlert
|
||||
fieldError={errors.uploadLimitCount}
|
||||
target={[1, 99999]}
|
||||
label={t('board.upload_limit_count')}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6} hidden={!uploadUseAt}>
|
||||
<Box boxShadow={1}>
|
||||
<Controller
|
||||
name="uploadLimitSize"
|
||||
control={control}
|
||||
rules={{
|
||||
required: uploadUseAt,
|
||||
min: 1,
|
||||
max: 99999999999999999999,
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
label={t('board.upload_limit_size')}
|
||||
name="uploadLimitSize"
|
||||
type="number"
|
||||
id="outlined-full-width"
|
||||
placeholder={format(t('msg.placeholder.format'), [
|
||||
t('board.upload_limit_size'),
|
||||
])}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.uploadLimitSize && (
|
||||
<ValidationAlert
|
||||
fieldError={errors.uploadLimitSize}
|
||||
target={[1, 99999]}
|
||||
label={t('board.upload_limit_size')}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</FormProvider>
|
||||
<DetailButtons
|
||||
handleList={() => {
|
||||
|
||||
@@ -1,9 +1,14 @@
|
||||
import React, { useCallback, useMemo } from 'react'
|
||||
import { AxiosError } from 'axios'
|
||||
import { NextPage } from 'next'
|
||||
import { useRouter } from 'next/router'
|
||||
import { TFunction, useTranslation } from 'next-i18next'
|
||||
|
||||
import { CustomButtons, IButtonProps } from '@components/Buttons'
|
||||
import { ConfirmDialog } from '@components/Confirm'
|
||||
import { PopupProps } from '@components/DialogPopup'
|
||||
import Search, { IKeywordType } from '@components/Search'
|
||||
import CustomDataGrid from '@components/Table/CustomDataGrid'
|
||||
import { GRID_PAGE_SIZE } from '@constants'
|
||||
import usePage from '@hooks/usePage'
|
||||
import useSearchTypes from '@hooks/useSearchType'
|
||||
// 내부 컴포넌트 및 custom hook, etc...
|
||||
import { convertStringToDateFormat } from '@libs/date'
|
||||
import Button from '@material-ui/core/Button'
|
||||
// material-ui deps
|
||||
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
|
||||
import {
|
||||
@@ -12,28 +17,21 @@ import {
|
||||
GridValueFormatterParams,
|
||||
GridValueGetterParams,
|
||||
} from '@material-ui/data-grid'
|
||||
|
||||
// 내부 컴포넌트 및 custom hook, etc...
|
||||
import { convertStringToDateFormat } from '@libs/date'
|
||||
import CustomDataGrid from '@components/Table/CustomDataGrid'
|
||||
import { CustomButtons, IButtonProps } from '@components/Buttons'
|
||||
import { Page, rownum } from '@utils'
|
||||
import Search, { IKeywordType } from '@components/Search'
|
||||
|
||||
// 상태관리 recoil
|
||||
import { useRecoilValue, useSetRecoilState } from 'recoil'
|
||||
// api
|
||||
import { boardService } from '@service'
|
||||
import {
|
||||
conditionAtom,
|
||||
detailButtonsSnackAtom,
|
||||
errorStateSelector,
|
||||
} from '@stores'
|
||||
|
||||
// api
|
||||
import { boardService } from '@service'
|
||||
import { PopupProps } from '@components/DialogPopup'
|
||||
import Button from '@material-ui/core/Button'
|
||||
import usePage from '@hooks/usePage'
|
||||
import { GRID_PAGE_SIZE } from '@constants'
|
||||
import { Page, rownum } from '@utils'
|
||||
import { AxiosError } from 'axios'
|
||||
import { NextPage } from 'next'
|
||||
import { TFunction, useTranslation } from 'next-i18next'
|
||||
import { useRouter } from 'next/router'
|
||||
import React, { useCallback, useMemo, useState } from 'react'
|
||||
// 상태관리 recoil
|
||||
import { useRecoilValue, useSetRecoilState } from 'recoil'
|
||||
|
||||
// material-ui style
|
||||
const useStyles = makeStyles((theme: Theme) =>
|
||||
@@ -133,12 +131,12 @@ const Board: NextPage<BoardProps> = props => {
|
||||
const setSuccessSnackBar = useSetRecoilState(detailButtonsSnackAtom)
|
||||
|
||||
// 조회조건 select items
|
||||
const searchTypes: IKeywordType[] = [
|
||||
const searchTypes: IKeywordType[] = useSearchTypes([
|
||||
{
|
||||
key: 'boardName',
|
||||
label: t('board.board_name'),
|
||||
},
|
||||
]
|
||||
])
|
||||
|
||||
/**
|
||||
* 상태관리 필요한 훅
|
||||
@@ -150,6 +148,14 @@ const Board: NextPage<BoardProps> = props => {
|
||||
// 현 페이지내 필요한 hook
|
||||
const { page, setPageValue } = usePage(conditionKey)
|
||||
|
||||
const [deleteConfirmState, setDeleteConfirmState] = useState<{
|
||||
open: boolean
|
||||
boardNo: number
|
||||
}>({
|
||||
open: false,
|
||||
boardNo: null,
|
||||
})
|
||||
|
||||
// 목록 데이터 조회 및 관리
|
||||
const { data, mutate } = boardService.search({
|
||||
keywordType: keywordState?.keywordType || 'boardName',
|
||||
@@ -177,19 +183,17 @@ const Board: NextPage<BoardProps> = props => {
|
||||
// 삭제
|
||||
const handleDelete = useCallback(
|
||||
(row: any) => {
|
||||
const { boardNo } = row
|
||||
const { boardNo, isPosts } = row
|
||||
|
||||
setSuccessSnackBar('loading')
|
||||
if (isPosts) {
|
||||
setDeleteConfirmState({
|
||||
open: true,
|
||||
boardNo,
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
boardService.delete({
|
||||
boardNo,
|
||||
callback: () => {
|
||||
setSuccessSnackBar('success')
|
||||
|
||||
mutate()
|
||||
},
|
||||
errorCallback,
|
||||
})
|
||||
deleteBoard(boardNo)
|
||||
},
|
||||
[errorCallback, mutate, setSuccessSnackBar],
|
||||
)
|
||||
@@ -251,6 +255,36 @@ const Board: NextPage<BoardProps> = props => {
|
||||
route.push('board/-1')
|
||||
}
|
||||
|
||||
const handleConfirmClose = () => {
|
||||
setDeleteConfirmState({
|
||||
open: false,
|
||||
boardNo: null,
|
||||
})
|
||||
}
|
||||
|
||||
const deleteBoard = (boardNo: number) => {
|
||||
setSuccessSnackBar('loading')
|
||||
|
||||
boardService.delete({
|
||||
boardNo,
|
||||
callback: () => {
|
||||
setSuccessSnackBar('success')
|
||||
|
||||
mutate()
|
||||
},
|
||||
errorCallback,
|
||||
})
|
||||
}
|
||||
|
||||
const handleConfirm = () => {
|
||||
const { boardNo } = deleteConfirmState
|
||||
deleteBoard(boardNo)
|
||||
setDeleteConfirmState({
|
||||
open: false,
|
||||
boardNo: null,
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<Search
|
||||
@@ -270,6 +304,12 @@ const Board: NextPage<BoardProps> = props => {
|
||||
onPageChange={handlePageChange}
|
||||
getRowId={r => r.boardNo}
|
||||
/>
|
||||
<ConfirmDialog
|
||||
open={deleteConfirmState.open}
|
||||
contentText={'게시물이 존재합니다. 삭제하시겠습니까?'}
|
||||
handleClose={handleConfirmClose}
|
||||
handleConfirm={handleConfirm}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -166,7 +166,6 @@ const Menu = ({ sites, menuTypes }: MenuProps) => {
|
||||
}
|
||||
|
||||
const handleSave = async (formData: IMenuInfoForm) => {
|
||||
console.log(formData)
|
||||
setSuccessSnackBar('loading')
|
||||
try {
|
||||
const result = await menuService.update(treeSelected.menuId, formData)
|
||||
|
||||
@@ -302,81 +302,119 @@ const PostsItem = ({ boardNo, postsNo, board, initData }: IPostsItemsProps) => {
|
||||
return (
|
||||
<div className={classes.root}>
|
||||
<FormProvider {...methods}>
|
||||
<form>
|
||||
<Grid container spacing={1}>
|
||||
<Grid item xs={12} sm={12}>
|
||||
<Grid container spacing={1}>
|
||||
<Grid item xs={12} sm={12}>
|
||||
<Box boxShadow={1}>
|
||||
<Controller
|
||||
name="postsTitle"
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
autoFocus
|
||||
label={t('posts.posts_title')}
|
||||
name="postsTitle"
|
||||
required
|
||||
inputProps={{ maxLength: 100 }}
|
||||
id="outlined-full-width"
|
||||
placeholder={format(t('msg.placeholder.format'), [
|
||||
t('posts.posts_title'),
|
||||
])}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
control={control}
|
||||
rules={{ required: true, maxLength: 100 }}
|
||||
/>
|
||||
{errors.postsTitle && (
|
||||
<ValidationAlert
|
||||
fieldError={errors.postsTitle}
|
||||
target={[100]}
|
||||
label={t('posts.posts_title')}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12}>
|
||||
<Box boxShadow={1} className={classes.switchBox}>
|
||||
<FormControlLabel
|
||||
label={t('posts.notice_at')}
|
||||
labelPlacement="start"
|
||||
control={
|
||||
<Controller
|
||||
name="noticeAt"
|
||||
control={control}
|
||||
render={({ field: { onChange, ref, value } }) => (
|
||||
<Switch
|
||||
inputProps={{ 'aria-label': 'secondary checkbox' }}
|
||||
onChange={onChange}
|
||||
inputRef={ref}
|
||||
checked={value}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12}>
|
||||
{board.editorUseAt && (
|
||||
<Editor contents={postsContent} setContents={setPostsContent} />
|
||||
)}
|
||||
{!board.editorUseAt && (
|
||||
<Box boxShadow={1}>
|
||||
<Controller
|
||||
name="postsTitle"
|
||||
name="postsContent"
|
||||
control={control}
|
||||
rules={{ required: true }}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
autoFocus
|
||||
label={t('posts.posts_title')}
|
||||
name="postsTitle"
|
||||
required
|
||||
inputProps={{ maxLength: 100 }}
|
||||
label={t('posts.posts_content')}
|
||||
name="postsContent"
|
||||
multiline
|
||||
minRows={9.2}
|
||||
id="outlined-full-width"
|
||||
placeholder={format(t('msg.placeholder.format'), [
|
||||
t('posts.posts_title'),
|
||||
t('posts.posts_content'),
|
||||
])}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
control={control}
|
||||
rules={{ required: true, maxLength: 100 }}
|
||||
/>
|
||||
{errors.postsTitle && (
|
||||
{errors.postsContent && (
|
||||
<ValidationAlert
|
||||
fieldError={errors.postsTitle}
|
||||
target={[100]}
|
||||
label={t('posts.posts_title')}
|
||||
fieldError={errors.postsContent}
|
||||
label={t('posts.posts_content')}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={12}>
|
||||
<Box boxShadow={1} className={classes.switchBox}>
|
||||
<FormControlLabel
|
||||
label={t('posts.notice_at')}
|
||||
labelPlacement="start"
|
||||
control={
|
||||
<Controller
|
||||
name="noticeAt"
|
||||
control={control}
|
||||
render={({ field: { onChange, ref, value } }) => (
|
||||
<Switch
|
||||
inputProps={{ 'aria-label': 'secondary checkbox' }}
|
||||
onChange={onChange}
|
||||
inputRef={ref}
|
||||
checked={value}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
{(board.skinTypeCode === SKINT_TYPE_CODE_FAQ ||
|
||||
board.skinTypeCode === SKINT_TYPE_CODE_QNA) && (
|
||||
<Grid item xs={12} sm={12}>
|
||||
{board.editorUseAt && (
|
||||
<Editor contents={postsContent} setContents={setPostsContent} />
|
||||
<Editor
|
||||
contents={postsAnswerContent}
|
||||
setContents={setPostsAnswerContent}
|
||||
/>
|
||||
)}
|
||||
{!board.editorUseAt && (
|
||||
<Box boxShadow={1}>
|
||||
<Controller
|
||||
name="postsContent"
|
||||
name="postsAnswerContent"
|
||||
control={control}
|
||||
rules={{ required: true }}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
label={t('posts.posts_content')}
|
||||
name="postsContent"
|
||||
label={t('posts.posts_answer_content')}
|
||||
name="postsAnswerContent"
|
||||
multiline
|
||||
minRows={9.2}
|
||||
id="outlined-full-width"
|
||||
placeholder={format(t('msg.placeholder.format'), [
|
||||
t('posts.posts_content'),
|
||||
t('posts.posts_answer_content'),
|
||||
])}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
@@ -384,68 +422,28 @@ const PostsItem = ({ boardNo, postsNo, board, initData }: IPostsItemsProps) => {
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
{errors.postsContent && (
|
||||
<ValidationAlert
|
||||
fieldError={errors.postsContent}
|
||||
label={t('posts.posts_content')}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</Grid>
|
||||
{(board.skinTypeCode === SKINT_TYPE_CODE_FAQ ||
|
||||
board.skinTypeCode === SKINT_TYPE_CODE_QNA) && (
|
||||
<Grid item xs={12} sm={12}>
|
||||
{board.editorUseAt && (
|
||||
<Editor
|
||||
contents={postsAnswerContent}
|
||||
setContents={setPostsAnswerContent}
|
||||
/>
|
||||
)}
|
||||
{board.uploadUseAt && (
|
||||
<Grid item xs={12} sm={12}>
|
||||
<Box boxShadow={1}>
|
||||
<Upload
|
||||
ref={uploadRef}
|
||||
multi
|
||||
uploadLimitCount={board.uploadLimitCount}
|
||||
uploadLimitSize={board.uploadLimitSize}
|
||||
attachmentCode={initData.attachmentCode}
|
||||
attachData={attachData}
|
||||
/>
|
||||
{attachData && (
|
||||
<AttachList data={attachData} setData={setAttachData} />
|
||||
)}
|
||||
{!board.editorUseAt && (
|
||||
<Box boxShadow={1}>
|
||||
<Controller
|
||||
name="postsAnswerContent"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
label={t('posts.posts_answer_content')}
|
||||
name="postsAnswerContent"
|
||||
multiline
|
||||
minRows={9.2}
|
||||
id="outlined-full-width"
|
||||
placeholder={format(t('msg.placeholder.format'), [
|
||||
t('posts.posts_answer_content'),
|
||||
])}
|
||||
fullWidth
|
||||
variant="outlined"
|
||||
{...field}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
</Grid>
|
||||
)}
|
||||
{board.uploadUseAt && (
|
||||
<Grid item xs={12} sm={12}>
|
||||
<Box boxShadow={1}>
|
||||
<Upload
|
||||
ref={uploadRef}
|
||||
multi
|
||||
uploadLimitCount={board.uploadLimitCount}
|
||||
uploadLimitSize={board.uploadLimitSize}
|
||||
attachmentCode={initData.attachmentCode}
|
||||
attachData={attachData}
|
||||
/>
|
||||
{attachData && (
|
||||
<AttachList data={attachData} setData={setAttachData} />
|
||||
)}
|
||||
</Box>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
</form>
|
||||
</Box>
|
||||
</Grid>
|
||||
)}
|
||||
</Grid>
|
||||
</FormProvider>
|
||||
<CustomButtons buttons={[saveButton, prevButton]} />
|
||||
<CustomAlert
|
||||
|
||||
Reference in New Issue
Block a user