From 6e4266dde93324107ddbe1983e1209f86afd8b7c Mon Sep 17 00:00:00 2001
From: thkim <thkim@dbnt.co.kr>
Date: Tue, 5 Mar 2024 13:28:41 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B4=80=EB=A6=AC=EC=9E=90=20-=20?=
 =?UTF-8?q?=EC=BB=A8=ED=85=90=EC=B8=A0=EA=B4=80=EB=A6=AC>=20=ED=8C=9D?=
 =?UTF-8?q?=EC=97=85=20=EA=B4=80=EB=A6=AC=20=EC=B2=A8=EB=B6=80=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=20drag=20&=20drop=EC=A7=80=EC=9B=90=20=EA=B1=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../package.json                              |   1 +
 .../src/components/file/FileDragDrop.jsx      |  27 +++++
 .../list/ListCreateUpdateDelete.jsx           |   2 +-
 .../admin/contents/PopUp/PopupEditor.jsx      | 108 +++++++++++++-----
 .../pages/admin/contents/StandardResearch.jsx |  22 +++-
 .../yarn.lock                                 |  10 +-
 .../service}/EgovFileMngUtil.java             |   0
 .../dbnt/kcscbackend/util/NetworkUtil.java    |   2 +
 8 files changed, 139 insertions(+), 33 deletions(-)
 create mode 100644 egovframe-template-simple-react-contribution/src/components/file/FileDragDrop.jsx
 rename kcsc-back-end/src/main/java/com/dbnt/kcscbackend/{admin/contents/popUp/utils => file/service}/EgovFileMngUtil.java (100%)
 create mode 100644 kcsc-back-end/src/main/java/com/dbnt/kcscbackend/util/NetworkUtil.java

diff --git a/egovframe-template-simple-react-contribution/package.json b/egovframe-template-simple-react-contribution/package.json
index ee83992..bd8d7f2 100644
--- a/egovframe-template-simple-react-contribution/package.json
+++ b/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",
diff --git a/egovframe-template-simple-react-contribution/src/components/file/FileDragDrop.jsx b/egovframe-template-simple-react-contribution/src/components/file/FileDragDrop.jsx
new file mode 100644
index 0000000..4cc8a16
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/egovframe-template-simple-react-contribution/src/components/list/ListCreateUpdateDelete.jsx b/egovframe-template-simple-react-contribution/src/components/list/ListCreateUpdateDelete.jsx
index 09eeb11..e382b40 100644
--- a/egovframe-template-simple-react-contribution/src/components/list/ListCreateUpdateDelete.jsx
+++ b/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
diff --git a/egovframe-template-simple-react-contribution/src/pages/admin/contents/PopUp/PopupEditor.jsx b/egovframe-template-simple-react-contribution/src/pages/admin/contents/PopUp/PopupEditor.jsx
index 05460a2..b75acda 100644
--- a/egovframe-template-simple-react-contribution/src/pages/admin/contents/PopUp/PopupEditor.jsx
+++ b/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);
+                }
             }
         );        
     }
@@ -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>
                             {/* <!--// 버튼영역 --> */}
 
diff --git a/egovframe-template-simple-react-contribution/src/pages/admin/contents/StandardResearch.jsx b/egovframe-template-simple-react-contribution/src/pages/admin/contents/StandardResearch.jsx
index 7d1a67a..69a13ca 100644
--- a/egovframe-template-simple-react-contribution/src/pages/admin/contents/StandardResearch.jsx
+++ b/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) {
-            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 {
diff --git a/egovframe-template-simple-react-contribution/yarn.lock b/egovframe-template-simple-react-contribution/yarn.lock
index 42e9a01..b9950ec 100644
--- a/egovframe-template-simple-react-contribution/yarn.lock
+++ b/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==
diff --git a/kcsc-back-end/src/main/java/com/dbnt/kcscbackend/admin/contents/popUp/utils/EgovFileMngUtil.java b/kcsc-back-end/src/main/java/com/dbnt/kcscbackend/file/service/EgovFileMngUtil.java
similarity index 100%
rename from kcsc-back-end/src/main/java/com/dbnt/kcscbackend/admin/contents/popUp/utils/EgovFileMngUtil.java
rename to kcsc-back-end/src/main/java/com/dbnt/kcscbackend/file/service/EgovFileMngUtil.java
diff --git a/kcsc-back-end/src/main/java/com/dbnt/kcscbackend/util/NetworkUtil.java b/kcsc-back-end/src/main/java/com/dbnt/kcscbackend/util/NetworkUtil.java
new file mode 100644
index 0000000..7a6fd72
--- /dev/null
+++ b/kcsc-back-end/src/main/java/com/dbnt/kcscbackend/util/NetworkUtil.java
@@ -0,0 +1,2 @@
+package com.dbnt.kcscbackend.util;public class NetworkUtil {
+}