feat: 관리자 - 컨텐츠관리> 팝업 관리 첨부파일 drag & drop지원 건

egovframe-template-simple-react-contribution/package.json

@@ -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",

egovframe-template-simple-react-contribution/src/components/file/FileDragDrop.jsx

@@ -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;

egovframe-template-simple-react-contribution/src/components/list/ListCreateUpdateDelete.jsx

@@ -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

egovframe-template-simple-react-contribution/src/pages/admin/contents/PopUp/PopupEditor.jsx

@@ -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);
+                }
             }
         );        
     }
@@ -141,6 +166,9 @@ function PopupEditor(props) {
         formData.delete("contents");
         formData.append("contents", text); 
         
+        //첨부파일
+        formData.append("file", file);
+
         if (formValidator(formData)) {
             const requestOptions = {
                 method: modeInfo.method,
@@ -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,6 +263,24 @@ 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 (
@@ -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'>
@@ -316,21 +364,27 @@ function PopupEditor(props) {
                                         </span>
                                     </dd>
                                 </dl>                                
-                                <EgovAttachFile
+                                <dl className="file-attach-wrapper">
-                                fnChangeFile={(attachfile) => {
+                                    <dt>첨부파일</dt>
-                                    console.log("====>>> Changed attachfile file = ", attachfile);
+                                    <dd>
-                                    const arrayConcat = { ...popupDetail}; // 기존 단일 파일 업로드에서 다중파일 객체 추가로 변환(아래 for문으로)
+                                        <span className="file_attach">
-									for ( let i = 0; i < attachfile.length; i++) {
+                                            <FileDragDrop
-										arrayConcat[`file_${i}`] = attachfile[i];
+                                                className="file-drag-drop"
-									}
+                                                multiple={false}
-                                    setPopupDetail(arrayConcat);
+                                                fileTypes={fileTypes}
-                                }}
+                                                onDrop={onDrop}
-                                fnDeleteFile={(deletedFile) => {
+                                                handleChange={handleChange}
-                                    console.log("====>>> Delete deletedFile = ", deletedFile);
+                                                dropMessageStyle={{backgroundColor: '#cfe2ff'}}
-                                    setBoardAttachFiles(deletedFile);
+                                            >
-                                }}
+                                                <div>
-                                boardFiles={boardAttachFiles}
+                                                    <AttachFileIcon />
-                                mode={props.mode} />
+                                                    {file ? file.name : fileName ? fileName : "파일을 마우스로 끌어놓으세요."}
+                                                </div>
+                                            </FileDragDrop>
+                                        </span>
+                                    </dd>
+                                </dl>
+                                
                             </div>
                             {/* <!--// 상단 입력 form --> */}
 
@@ -341,20 +395,20 @@ function PopupEditor(props) {
                             {/* <!-- 버튼영역 --> */}
                             <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>
                             {/* <!--// 버튼영역 --> */}
 

egovframe-template-simple-react-contribution/src/pages/admin/contents/StandardResearch.jsx

@@ -14,12 +14,26 @@ import styled from "styled-components";
 
 const StyledDiv = styled.div`
     .BRD008 {
-        .head > span:nth-child(3) {
+        .head {
-            width: 200px;
+            span:nth-child(3) {
+                width: 200px;
+            }
+            span:nth-child(4) {
+                width: 200px;
+            }
         }
-        .result .list_item > div:nth-child(3) {
+        .result .list_item {
-            width: 200px;
+            & > div {
+                &:nth-child(3) {
+                    width: 200px;
+                }
+                &:nth-child(4) {
+                    width: 200px;
+                }
+            }
         }
+
+
     }
 
     .board-bot {

egovframe-template-simple-react-contribution/yarn.lock

@@ -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==

kcsc-back-end/src/main/java/com/dbnt/kcscbackend/util/NetworkUtil.java

@@ -0,0 +1,2 @@
+package com.dbnt.kcscbackend.util;public class NetworkUtil {
+}