feat: 관리자 - 컨텐츠관리> 팝업 관리 첨부파일 drag & drop지원 건
parent
c3582ed28c
commit
6e4266dde9
|
|
@ -25,6 +25,7 @@
|
|||
"react-csv": "^2.2.2",
|
||||
"react-datepicker": "^4.8.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-drag-drop-files": "^2.3.10",
|
||||
"react-element-to-jsx-string": "^15.0.0",
|
||||
"react-icons": "^4.11.0",
|
||||
"react-loader-spinner": "^5.4.5",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
import React, { useState } from "react";
|
||||
import { FileUploader } from "react-drag-drop-files";
|
||||
|
||||
|
||||
/**
|
||||
* https://www.npmjs.com/package/react-drag-drop-files를 참고해주세요.
|
||||
* @param {fileTypes} const fileTypes = ["JPG", "PNG", "GIF"];
|
||||
* @returns
|
||||
*/
|
||||
function FileDragDrop({fileTypes, children, multiple, label, onDrop, handleChange, file, setFile, dropMessageStyle}) {
|
||||
|
||||
return (
|
||||
<FileUploader
|
||||
handleChange={handleChange}
|
||||
name="file"
|
||||
types={fileTypes ? fileTypes : "*"}
|
||||
multiple={multiple && false}
|
||||
label={label}
|
||||
onDrop={onDrop}
|
||||
dropMessageStyle={dropMessageStyle}
|
||||
>
|
||||
{children && children}
|
||||
</FileUploader>
|
||||
);
|
||||
}
|
||||
|
||||
export default FileDragDrop;
|
||||
|
|
@ -115,7 +115,7 @@ function ListCreateUpdateDelete(props) {
|
|||
</Grid>
|
||||
</Typography>
|
||||
<Demo>
|
||||
<List dense={false} sx={{ px: 0, '&': { minHeight: '315px', height: '650px', overflowY: 'auto'}}}>
|
||||
<List dense={false} sx={{ px: 0, '&': { minHeight: '315px', height: '615px', overflowY: 'auto'}}}>
|
||||
{generate(
|
||||
props.items,
|
||||
<ListItem
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { Link, useLocation, useNavigate } from 'react-router-dom';
|
||||
import DatePicker from "react-datepicker";
|
||||
import FileDragDrop from "../../../../components/file/FileDragDrop";
|
||||
import AttachFileIcon from '@mui/icons-material/AttachFile';
|
||||
|
||||
import EgovAttachFile from 'components/EgovAttachFile';
|
||||
import RichTextEditor from "../../../../components/editor/RichTextEditor";
|
||||
|
|
@ -19,11 +21,30 @@ const StyledDiv = styled.div`
|
|||
|
||||
.board_view2 {
|
||||
margin-bottom: 30px;
|
||||
dl.file-attach-wrapper dd {
|
||||
padding: 0px;
|
||||
|
||||
|
||||
.file_attach {
|
||||
width: 100%;
|
||||
label {
|
||||
width: 100%;
|
||||
padding: 0px 0px;
|
||||
div {
|
||||
padding: 30px 10px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
`;
|
||||
|
||||
|
||||
|
||||
|
||||
function PopupEditor(props) {
|
||||
|
||||
const navigate = useNavigate();
|
||||
|
|
@ -38,7 +59,7 @@ function PopupEditor(props) {
|
|||
const [schdulBgndeMM, setSchdulBgndeMM] = useState();
|
||||
const [schdulEnddeHH, setSchdulEnddeHH] = useState();
|
||||
const [schdulEnddeMM, setSchdulEnddeMM] = useState();
|
||||
const [boardAttachFiles, setBoardAttachFiles] = useState();
|
||||
const [fileName, setFileName] = useState();
|
||||
|
||||
const [confirm, setConfirm] = React.useState();
|
||||
|
||||
|
|
@ -118,6 +139,10 @@ function PopupEditor(props) {
|
|||
});
|
||||
setText(rawDetail.contents);
|
||||
setTextOriginal(rawDetail.contents);
|
||||
|
||||
if( rawDetail.fileName ) {
|
||||
setFileName(rawDetail.fileName);
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
|
@ -139,7 +164,10 @@ function PopupEditor(props) {
|
|||
|
||||
//게시글 내용
|
||||
formData.delete("contents");
|
||||
formData.append("contents", text);
|
||||
formData.append("contents", text);
|
||||
|
||||
//첨부파일
|
||||
formData.append("file", file);
|
||||
|
||||
if (formValidator(formData)) {
|
||||
const requestOptions = {
|
||||
|
|
@ -165,9 +193,11 @@ function PopupEditor(props) {
|
|||
|
||||
|
||||
if (modeInfo.mode === CODE.MODE_CREATE) {
|
||||
setConfirm({...confirm, open: true, body: "추가하시겠습니까?", yesCallback: requestTask, yesCallbackParams: {requestUrl:modeInfo.editURL}});
|
||||
//setConfirm({...confirm, open: true, body: "추가하시겠습니까?", yesCallback: requestTask, yesCallbackParams: {requestUrl:modeInfo.editURL}});
|
||||
requestTask({requestUrl:modeInfo.editURL});
|
||||
} else if (modeInfo.mode === CODE.MODE_MODIFY) {
|
||||
setConfirm({...confirm, open: true, body: "수정하시겠습니까?", yesCallback: requestTask, yesCallbackParams: {requestUrl:`${modeInfo.editURL}/${location.state?.popupId}`}});
|
||||
//setConfirm({...confirm, open: true, body: "수정하시겠습니까?", yesCallback: requestTask, yesCallbackParams: {requestUrl:`${modeInfo.editURL}/${location.state?.popupId}`}});
|
||||
requestTask({requestUrl:`${modeInfo.editURL}/${location.state?.popupId}`});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -233,7 +263,25 @@ function PopupEditor(props) {
|
|||
return number < 10 ? "0" + number : number.toString();
|
||||
}
|
||||
|
||||
const fileTypes = ["JPG", "PNG", "GIF", "PDF", "HWP", "HWPX", "ZIP", "JPEG", "MP4", "TXT"];
|
||||
const onDrop = (e) => {
|
||||
//alert('ddd');
|
||||
};
|
||||
|
||||
const [file, setFile] = useState(null);
|
||||
const handleChange = (file) => {
|
||||
setFile(file);
|
||||
};
|
||||
|
||||
|
||||
useEffect(function () {
|
||||
if( file ) {
|
||||
console.log('%o', file);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [file]);
|
||||
|
||||
|
||||
const Location = React.memo(function Location() {
|
||||
return (
|
||||
<div className="location">
|
||||
|
|
@ -263,7 +311,7 @@ function PopupEditor(props) {
|
|||
{/* <!-- 본문 --> */}
|
||||
<StyledDiv>
|
||||
<div className="top_tit">
|
||||
<h1 className="tit_1">팝업 추가</h1>
|
||||
<h1 className="tit_1">팝업 관리</h1>
|
||||
</div>
|
||||
{/* <!-- 상단 입력 form --> */}
|
||||
<div className='board_view2'>
|
||||
|
|
@ -315,22 +363,28 @@ function PopupEditor(props) {
|
|||
<input type="hidden" name="schdulEnddeMM" defaultValue={schdulEnddeMM} readOnly />
|
||||
</span>
|
||||
</dd>
|
||||
</dl>
|
||||
<dl className="file-attach-wrapper">
|
||||
<dt>첨부파일</dt>
|
||||
<dd>
|
||||
<span className="file_attach">
|
||||
<FileDragDrop
|
||||
className="file-drag-drop"
|
||||
multiple={false}
|
||||
fileTypes={fileTypes}
|
||||
onDrop={onDrop}
|
||||
handleChange={handleChange}
|
||||
dropMessageStyle={{backgroundColor: '#cfe2ff'}}
|
||||
>
|
||||
<div>
|
||||
<AttachFileIcon />
|
||||
{file ? file.name : fileName ? fileName : "파일을 마우스로 끌어놓으세요."}
|
||||
</div>
|
||||
</FileDragDrop>
|
||||
</span>
|
||||
</dd>
|
||||
</dl>
|
||||
<EgovAttachFile
|
||||
fnChangeFile={(attachfile) => {
|
||||
console.log("====>>> Changed attachfile file = ", attachfile);
|
||||
const arrayConcat = { ...popupDetail}; // 기존 단일 파일 업로드에서 다중파일 객체 추가로 변환(아래 for문으로)
|
||||
for ( let i = 0; i < attachfile.length; i++) {
|
||||
arrayConcat[`file_${i}`] = attachfile[i];
|
||||
}
|
||||
setPopupDetail(arrayConcat);
|
||||
}}
|
||||
fnDeleteFile={(deletedFile) => {
|
||||
console.log("====>>> Delete deletedFile = ", deletedFile);
|
||||
setBoardAttachFiles(deletedFile);
|
||||
}}
|
||||
boardFiles={boardAttachFiles}
|
||||
mode={props.mode} />
|
||||
|
||||
</div>
|
||||
{/* <!--// 상단 입력 form --> */}
|
||||
|
||||
|
|
@ -339,22 +393,22 @@ function PopupEditor(props) {
|
|||
{/* <!--// 게시판 --> */}
|
||||
|
||||
{/* <!-- 버튼영역 --> */}
|
||||
<div className="board_btn_area">
|
||||
<div className="board_btn_area">
|
||||
<div className="left_col btn1">
|
||||
<button className="btn btn_blue_h46 w_100"
|
||||
onClick={onClickList}>목록</button>
|
||||
</div>
|
||||
<div className="right_col btn1">
|
||||
<button className="btn btn_skyblue_h46 w_100"
|
||||
onClick={() => createPopup()}
|
||||
> 저장</button>
|
||||
{modeInfo.mode === CODE.MODE_MODIFY &&
|
||||
<button className="btn btn_skyblue_h46 w_100"
|
||||
<button className="btn btn_red_h46 w_100"
|
||||
onClick={(e) => {
|
||||
onClickDelete(location.state?.popupId);
|
||||
}}>삭제</button>
|
||||
}
|
||||
</div>
|
||||
<div className="right_col btn1">
|
||||
<button className="btn btn_blue_h46 w_100"
|
||||
onClick={onClickList}>목록</button>
|
||||
</div>
|
||||
</div>
|
||||
{/* <!--// 버튼영역 --> */}
|
||||
|
||||
|
|
|
|||
|
|
@ -14,12 +14,26 @@ import styled from "styled-components";
|
|||
|
||||
const StyledDiv = styled.div`
|
||||
.BRD008 {
|
||||
.head > span:nth-child(3) {
|
||||
width: 200px;
|
||||
.head {
|
||||
span:nth-child(3) {
|
||||
width: 200px;
|
||||
}
|
||||
span:nth-child(4) {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
.result .list_item > div:nth-child(3) {
|
||||
width: 200px;
|
||||
.result .list_item {
|
||||
& > div {
|
||||
&:nth-child(3) {
|
||||
width: 200px;
|
||||
}
|
||||
&:nth-child(4) {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.board-bot {
|
||||
|
|
|
|||
|
|
@ -8613,6 +8613,14 @@ react-dom@^18.2.0:
|
|||
loose-envify "^1.1.0"
|
||||
scheduler "^0.23.0"
|
||||
|
||||
react-drag-drop-files@^2.3.10:
|
||||
version "2.3.10"
|
||||
resolved "https://registry.yarnpkg.com/react-drag-drop-files/-/react-drag-drop-files-2.3.10.tgz#3f6ea316f8ad66a6f76b312cc4108c7c14065b06"
|
||||
integrity sha512-Fv614W9+OtXFB5O+gjompTxQZLYGO7wJeT4paETGiXtiADB9yPOMGYD4A3PMCTY9Be874/wcpl+2dm3MvCIRzg==
|
||||
dependencies:
|
||||
prop-types "^15.7.2"
|
||||
styled-components "^5.3.0"
|
||||
|
||||
react-element-to-jsx-string@^15.0.0:
|
||||
version "15.0.0"
|
||||
resolved "https://registry.npmjs.org/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz"
|
||||
|
|
@ -9604,7 +9612,7 @@ style-loader@^3.3.1:
|
|||
resolved "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz"
|
||||
integrity sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==
|
||||
|
||||
styled-components@^5.3.5:
|
||||
styled-components@^5.3.0, styled-components@^5.3.5:
|
||||
version "5.3.11"
|
||||
resolved "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz"
|
||||
integrity sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
package com.dbnt.kcscbackend.util;public class NetworkUtil {
|
||||
}
|
||||
Loading…
Reference in New Issue