feat: 관리자 - 팝업 관리 > 특정 글 수정 시, 파일 여러개 일 경우 파일 목록이 안 나타나는 문제 수정

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

@@ -6,6 +6,7 @@
     "@ant-design/colors": "^6.0.0",
     "@ant-design/icons": "^4.7.0",
     "@babel/runtime": "^7.23.9",
+    "@base2/pretty-print-object": "^1.0.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@material-ui/core": "^4.12.4",

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

@@ -0,0 +1,214 @@
+import React, { useState, useEffect } from 'react';
+import AttachFileIcon from '@mui/icons-material/AttachFile';
+import IconButton from '@mui/material/IconButton';
+import DeleteIcon from '@mui/icons-material/Delete';
+import styled from "styled-components";
+import FileDragDrop from "./FileDragDrop";
+
+const StyledDiv = styled.div`
+    label {
+        //background: red;
+        width: 100%;
+        height: auto;
+        border: 2px dashed #888;
+        border-radius: 6px;  
+        & > div {
+            height: 100%;
+            line-height: 37px;
+            padding: 20px;
+            color: #999999;
+        }  
+    }
+`;
+
+
+function AttachFile(props) {
+
+    const multiple = props.multiple ? props.multiple : false;
+    
+    // 삭제 버튼 눌렀을 때 파일선택 dialog가 뜨는 것을 방지
+    let oldTagName;
+    useEffect(function () {
+
+        const labelEle = document.querySelectorAll("label[for='preDataFile']")[0];
+        console.log(labelEle); // NodeList(3) [li, li, li]
+        // event
+        const onClickLabel = (e) => {
+            
+            const tagName = String(e.target.tagName).toLowerCase();
+            
+            if( tagName !== 'input' ) {
+                // eslint-disable-next-line react-hooks/exhaustive-deps
+                oldTagName = tagName;
+                e.preventDefault();
+                return false;
+            } else {
+                if(
+                    oldTagName === 'path' ||
+                    oldTagName === 'svg' ||
+                    oldTagName === 'button'
+                ) {
+                    oldTagName = undefined;
+                    e.preventDefault();
+                    return false;
+                }
+            }
+            
+        }
+        // remove Event
+        labelEle.removeEventListener("click", onClickLabel);
+        labelEle.addEventListener("click", onClickLabel);
+        
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+
+    //기존 server에 upload된 file인 props.serverFiles file들을 렌더링 초기에 넣어 놓기
+    useEffect(function () {
+
+        
+        if( !props.serverFiles ) {
+            return;
+        }
+
+        let items = [];
+        let nNewIndex = 0;
+        for( let idx in props.serverFiles ) {
+            props.serverFiles[idx].index=nNewIndex++;
+            items.push( props.serverFiles[idx] );
+        }
+        setFileItem(items);
+        
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.serverFiles]);
+    
+
+    
+      
+    const [disabled, setDisabled] = useState( props.disabled ? props.disabled : false );
+    useEffect(function () {
+        if( !props.disabled ) {
+            return;
+        }
+        setDisabled(props.disabled);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.disabled]);
+
+
+    const [maxSize, setMaxSize] = useState(props.maxSize ? props.maxSize : 100);
+    useEffect(function () {
+        if( !props.maxSize ) {
+            return;
+        }
+        setMaxSize(props.maxSize);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [props.maxSize]);
+
+
+    const [fileItem, setFileItem] = useState();
+
+    const onDrop = (e) => {
+        //alert('ddd');
+    };
+    
+    
+    const handleChange = (files) => {        
+       
+
+        if( !files ) {
+            return;
+        }
+        
+        let items = [];
+        let nNewIndex = 0;
+
+        //파일이 이미 첨부되어 있는 상태에서 추가로 첨부한 경우 기존 것을 먼저 추가 후 새로운 항목을 추가한다.
+        for( let idx in fileItem ) {
+            fileItem[idx].index=nNewIndex++;
+            items.push( fileItem[idx] );
+        }
+
+        Object.keys(files).forEach(function(key, index) {
+            //console.log(key, props.files[key]);
+            if( typeof files[key].name === 'undefined' ) {
+                return;
+            }
+            files[key].index=nNewIndex++;
+            items.push( files[key] );
+        });
+        console.log('%o\n%o', files, items);
+        setFileItem(items);
+        props.setFiles(items);
+    };    
+
+
+    const onClickDeleteItem = (e, targetEle) => {
+
+        const dataIndex = Number(targetEle.getAttribute('data-index'));
+
+        let items = [];
+        let nNewIndex = 0;
+        Object.keys(fileItem).forEach(function(key, index) {                       
+            if(  dataIndex !== index ) {
+                fileItem[key].index=nNewIndex++;
+                items.push( fileItem[key] );
+            }
+        });
+
+        setFileItem(items);
+        props.setFiles(items);
+    }
+
+    return (
+        <StyledDiv>
+            <FileDragDrop
+                className="file-drag-drop"
+                multiple={multiple}
+                name={props.name}
+                fileTypes={props.fileTypes}
+                onDrop={onDrop}
+                handleChange={handleChange}
+                dropMessageStyle={{backgroundColor: '#cfe2ff'}}                
+                maxSize={maxSize}
+                disabled={disabled}
+            >
+                <div>
+                          
+                    {fileItem && fileItem.length > 0
+                    ?
+                    fileItem.map((item) => (
+                            <span key={item.index} data-index={item.index}>
+                                <IconButton aria-label="delete" size="small"
+                                    onClick={(e)=> {                                        
+                                        e = e || window.event;
+                                        const target = e.target || e.srcElement;
+
+                                        console.log('%o', target);                                        
+                                        const tagName = String(target.tagName).toLowerCase();
+
+                                        // target 보정
+                                        let targetEle = target.parentNode.parentNode.parentNode;
+                                        if( tagName === 'svg' ) {
+                                            targetEle = target.parentNode.parentNode;
+                                        } else if( tagName === 'button' ) {
+                                            targetEle = target.parentNode;
+                                        } 
+                                        
+                                        onClickDeleteItem(e, targetEle);
+                                    }}
+                                >
+                                    <DeleteIcon fontSize="small" />
+                                </IconButton>
+                                {item.name}<br />
+                            </span>
+                        ))
+                    :
+                        <span><AttachFileIcon /> 파일을 마우스로 끌어놓으세요.</span>
+                    }              
+                </div>
+            </FileDragDrop>
+        </StyledDiv>
+    );
+    
+}
+export default AttachFile;

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

@@ -7,17 +7,25 @@ import { FileUploader } from "react-drag-drop-files";
  * @param {fileTypes} const fileTypes = ["JPG", "PNG", "GIF"]; 
  * @returns 
  */
-function FileDragDrop({fileTypes, children, multiple, label, onDrop, handleChange, file, setFile, dropMessageStyle, name}) {
+function FileDragDrop({fileTypes, children, multiple, label, onDrop, handleChange, file, setFile, dropMessageStyle, name, maxSize, disabled}) {
+
+  const temp = 0;
 
   return (
     <FileUploader
+        hoverTitle="여기에 파일을 놓아주세요"
         handleChange={handleChange}
         name={name}
         types={fileTypes ? fileTypes : "*"}
-        multiple={multiple && false}
+        multiple={multiple ? multiple : false}
         label={label}
         onDrop={onDrop}
         dropMessageStyle={dropMessageStyle}
+        maxSize={maxSize}
+        disabled={disabled}        
+        onSelect={(e)=> {
+          e = e || window.event;
+        }}
     >
         {children && children}
     </FileUploader>

egovframe-template-simple-react-contribution/src/pages/admin/committee/ProgressStatus/Edit.jsx

@@ -1,21 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 import DatePicker from "react-datepicker";
-import AttachFileIcon from '@mui/icons-material/AttachFile';
+import AttachFile from "components/file/AttachFile";
-
-
-import FileDragDrop from "components/file/FileDragDrop";
-
-
-
 import * as EgovNet from 'api/egovFetch';
 import URL from 'constants/url';
 import CODE from 'constants/code';
 
 import { default as EgovLeftNav } from 'components/leftmenu/EgovLeftNavAdmin';
 
-import 'react-datepicker/dist/react-datepicker.css';
-
 import styled from "styled-components";
 import { makeStyles } from "@mui/styles";
 
@@ -35,15 +27,6 @@ const useStyles = makeStyles(() => ({
   }));
 
 const StyledDiv = styled.div`
-    .org-under-id {
-        margin-left: 20px;
-        @media only screen and (max-width: 768px) {
-            display: block;
-            margin-left: 0px;
-            margin-top: 20px;
-        }
-    }
-
     .f_select.w_250 {
         @media only screen and (max-width: 768px) {
             width: 100%;
@@ -55,40 +38,17 @@ const StyledDiv = styled.div`
             width: 100%;
         }
     }
+
+    .org-group-id-1 {
+        margin: 0px 29px;
+        @media only screen and (max-width: 768px) {    
+            margin: 0px;
+        }
+    }
 `;
 
 
-function AttachFile(props) {
+function ProgressStatusEdit(props) {
-
-    const fileTypes = ["JPG", "PNG", "GIF", "PDF", "HWP", "HWPX", "ZIP", "JPEG", "MP4", "TXT"];
-    const onDrop = (e) => {
-        //alert('ddd');
-    };
-    
-    const handleChange = (file) => {        
-        props.setFile(file);
-    };    
-
-    return (
-        <FileDragDrop
-            className="file-drag-drop"
-            multiple={false}
-            name={props.name}
-            fileTypes={fileTypes}
-            onDrop={onDrop}
-            handleChange={handleChange}
-            dropMessageStyle={{backgroundColor: '#cfe2ff'}}
-        >
-            <div>
-                <AttachFileIcon />
-                {props.file ? props.file.name : props.fileName ? props.fileName : "파일을 마우스로 끌어놓으세요."}
-            </div>
-        </FileDragDrop>
-    );
-    
-}
-
-function SchedulesEdit(props) {
     console.group("EgovAdminScheduleEdit");
     console.log("[Start] EgovAdminScheduleEdit ------------------------------");
     console.log("EgovAdminScheduleEdit [props] : ", props);
@@ -117,16 +77,16 @@ function SchedulesEdit(props) {
     const [requestItems, setRequestItems] = useState
         (
             {
+                orgGroupId: 1,
                 startDate: new Date(),         
                 eventId : 0,
             }
         );
 
-    const [schdulBgndeHH, setSchdulBgndeHH] = useState();
+    const [drftDatetimeHH, setDrftDatetimeHH] = useState();
-    const [schdulBgndeMM, setSchdulBgndeMM] = useState();
+    const [drftDatetimeMM, setDrftDatetimeMM] = useState();
 
     const [scheduleInit, setScheduleInit] = useState({});
-    const [scheduleApiOrgApiDepthList, setScheduleApiOrgApiDepthList] = useState({ });
 
 
     const initMode = () => {
@@ -152,7 +112,8 @@ function SchedulesEdit(props) {
 			default:
                 navigate({pathname: URL.ERROR}, {state: {msg : ""}});
         }
-        retrieveDetail();
+        
+        getList(orgSearchCondition);
     }
 
     const convertDate = (str) => {
@@ -171,35 +132,106 @@ function SchedulesEdit(props) {
         }
     }
 
-    const retrieveDetail = () => {  
 
-        EgovNet.requestFetch("/schedule/init",
+    const [orgSearchCondition, setOrgSearchCondition] = useState({ paramCodeGroup: null, paramCodeLevel: 'LV_01' });
-            requestOptions,
+    const [orgArray, setOrgArray] = useState([]);
-            function (resp) {
+    const [orgSelectedIndex, setOrgSelectedIndex] = useState([]);
-                setScheduleInit(
-                    resp
-                );
 
-                if (modeInfo.mode === CODE.MODE_CREATE) {     
+
+
+
+    useEffect(function () {
+        getList(orgSearchCondition);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [orgSearchCondition]);
+
+
+
+
+
+    useEffect(function () {
+        if ( typeof orgArray[0] === 'undefined' || typeof orgSelectedIndex[0] === 'undefined' ) {
             return;
         }
 
-                const retrieveDetailURL = `/schedule/${location.state?.schdulId}`;
+        if( orgSelectedIndex[0] === 0) {
-                const requestOptions = {
+            orgArray[1] = undefined;
-                    method: "GET",
+            orgArray[2] = undefined;
-                    headers: {
+            let forChangeObject = [...orgArray];
-                        'Content-type': 'application/json'
+            setOrgArray(forChangeObject);
+            setOrgSelectedIndex([orgSelectedIndex[0], undefined, undefined]);
+            return;
         }
+
+        if ( typeof orgArray[0][orgSelectedIndex[0]-1] === 'undefined' ) {
+            return;
         }
-                EgovNet.requestFetch(retrieveDetailURL,
+
+        const paramCodeLevel = 'LV_02';
+        const paramCodeGroup = orgArray[0][orgSelectedIndex[0]-1].orgId;
+        setOrgSearchCondition({ paramCodeGroup, paramCodeLevel });
+        orgArray[1] = undefined;
+        orgArray[2] = undefined;
+        let forChangeObject = [...orgArray];
+        setOrgArray(forChangeObject);
+        setOrgSelectedIndex([orgSelectedIndex[0], undefined, undefined]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [orgSelectedIndex[0]]);
+
+
+
+
+    useEffect(function () {
+        if ( typeof orgArray[1] === 'undefined' || typeof orgSelectedIndex[1] === 'undefined' ) {
+            return;
+        }
+
+        if( orgSelectedIndex[1] === 0) {
+            orgArray[2] = undefined;
+            let forChangeObject = [...orgArray];
+            setOrgArray(forChangeObject);
+            setOrgSelectedIndex([orgSelectedIndex[0], orgSelectedIndex[1], undefined]);
+            return;
+        }
+
+        if ( typeof orgArray[0][orgSelectedIndex[1]-1] === 'undefined' ) {
+            return;
+        }
+
+        const paramCodeLevel = 'LV_03';
+        const paramCodeGroup = orgArray[1][orgSelectedIndex[1]-1].orgId;
+        setOrgSearchCondition({ paramCodeGroup, paramCodeLevel });
+
+        orgArray[2] = undefined;   
+        let forChangeObject = [...orgArray];
+        setOrgArray(forChangeObject);
+        setOrgSelectedIndex([orgSelectedIndex[0], orgSelectedIndex[1], undefined]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [orgSelectedIndex[1]]);
+
+
+
+
+    useEffect(function () {
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [orgSelectedIndex[2]]);
+    
+
+    
+
+    const getList = (orgSearchCondition) => {  
+        
+        EgovNet.requestFetch(`/admin/config/committee-code-management?paramCodeGroup=${orgSearchCondition.paramCodeGroup}&paramCodeLevel=${orgSearchCondition.paramCodeLevel}`,
             requestOptions,
             function (resp) {
+                const myIndex = Number(String(orgSearchCondition.paramCodeLevel).replace('LV_','')) - 1;
+                const forCopy = [...orgArray];
+                forCopy[myIndex] = resp.result.list;
+                setOrgArray(forCopy);
             }
         );        
     }
-        );
 
-    }
 
     const updateSchedule = () => {
         const formData = new FormData();
@@ -283,46 +315,7 @@ function SchedulesEdit(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [requestItems]);
     
-    useEffect(function () {        
+    const fileTypes = ["JPG", "PNG", "GIF", "PDF", "HWP", "HWPX", "ZIP", "JPEG", "MP4", "TXT"];
-
-        EgovNet.requestFetch(`/schedule/api/org-api/depth/list?paramCodeGroup=${requestItems.upCommittee}`,
-            requestOptions,
-            function (resp) {
-                setScheduleApiOrgApiDepthList(
-                    resp
-                );                
-            }
-        );
-        console.log("------------------------------EgovAdminScheduleEdit [%o]", requestItems);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [requestItems && requestItems.upCommittee]);
-    
-
-    const onClickDeleteSchedule = (schdulId) => {
-        const deleteBoardURL = `/schedule/${schdulId}`;
-
-        const requestOptions = {
-            method: "DELETE",
-            headers: {
-                'Content-type': 'application/json',
-            }
-        }
-
-        EgovNet.requestFetch(deleteBoardURL,
-            requestOptions,
-            (resp) => {
-                console.log("====>>> Schdule delete= ", resp);
-                if (Number(resp.resultCode) === Number(CODE.RCV_SUCCESS)) {
-                    alert("게시글이 삭제되었습니다.")
-                    navigate(URL.ADMIN__COMMITTEE__SCHEDULES ,{ replace: true });
-                } else {
-                    navigate({pathname: URL.ERROR}, {state: {msg : resp.resultMessage}});
-                }
-
-            }
-        );
-    }
-
     //사전검토자료
     const [preDataFile, setPreDataFile] = useState(null);
     const [preDataFileName, setPreDataFileName] = useState(null);
@@ -333,11 +326,11 @@ function SchedulesEdit(props) {
     const [partnerFile, setPartnerFile] = useState(null);
     const [partnerFileName, setPartnerFileName] = useState(null);
     //조치계획서
-    //const [preDataFile, setPreDataFile] = useState(null);
+    const [actionPlanFile, setActionPlanFile] = useState(null);
-    //const [preDataFileName, setPreDataFileName] = useState(null);
+    const [actionPlanFileName, setActionPlanFileName] = useState(null);
     //조치결과서
-    //const [preDataFile, setPreDataFile] = useState(null);
+    const [actionResultReportFile, setActionResultReportFile] = useState(null);
-    //const [preDataFileName, setPreDataFileName] = useState(null);
+    const [actionResultReportFileName, setActionResultReportFileName] = useState(null);
 
 
 
@@ -372,30 +365,30 @@ function SchedulesEdit(props) {
                         {/* <!-- 게시판 상세보기 --> */}
                         <StyledDiv className="board_view2">
                             <dl>
-                                <dt><label htmlFor="title">안건</label><span className="req">필수</span></dt>
+                                <dt><label>안건</label><span className="req">필수</span></dt>
                                 <dd>
-                                    <input className="f_input2 w_full" type="text" name="title" title="안건" id="title" placeholder="안건을 입력하세요."
+                                    <input className="f_input2 w_full" type="text" name="title" title="안건" placeholder="안건을 입력하세요"
                                         value={requestItems.title}
                                         onChange={(e) => setRequestItems({ ...requestItems, title: e.target.value })}
                                     />
                                 </dd>
                             </dl>
                             <dl>
-                                <dt><label htmlFor="title">기준코드</label><span className="req">필수</span></dt>
+                                <dt><label>기준코드</label><span className="req">필수</span></dt>
                                 <dd>
-                                    <input className="f_input2 w_full" type="text" name="title" title="제목" id="title" placeholder="제목을 입력하세요."
+                                    <input className="f_input2 w_full" type="text" name="categoryId" title="기준코드" placeholder="여기를 눌러 기준코드를 선택하세요"
-                                        value={requestItems.title}
+                                        value={requestItems.categoryId}
-                                        onChange={(e) => setRequestItems({ ...requestItems, title: e.target.value })}
+                                        onChange={(e) => setRequestItems({ ...requestItems, categoryId: e.target.value })}
                                     />
                                 </dd>
                             </dl>
                             <dl>
-                                <dt><label htmlFor="title">구분</label><span className="req">필수</span></dt>
+                                <dt><label>구분</label><span className="req">필수</span></dt>
                                 <dd>
-                                    <label className="f_select w_150" htmlFor="div-meet">
+                                    <label className="f_select w_150" >
-                                        <select id="div-meet" name="div-meet" title="일정구분"
+                                        <select name="div-meet" title="재정 개정 재개정 선택"
-                                            value={requestItems.divMeet}
+                                            value={requestItems.drftTypeCode}
-                                            onChange={(e) => setRequestItems({ ...requestItems, divMeet: e.target.value })}>
+                                            onChange={(e) => setRequestItems({ ...requestItems, drftTypeCode: e.target.value })}>
                                             <option key={"none"} value="">선택</option>
                                             {scheduleInit && scheduleInit.result && scheduleInit.result.listCodes
                                             && scheduleInit.result.listCodes.map((item) => (
@@ -406,60 +399,70 @@ function SchedulesEdit(props) {
                                 </dd>
                             </dl>
                             <dl>
-                                <dt><label htmlFor="title">회의일자</label><span className="req">필수</span></dt>
+                                <dt><label>회의일자</label><span className="req">필수</span></dt>
                                 <dd className="datetime">
                                     <span className="line_break">
                                         <DatePicker
-                                            selected={requestItems.startDate}
+                                            selected={requestItems.drftDatetime}
-                                            name="schdulBgnde"
+                                            name="drftDatetime"
                                             className="f_input"
-                                            dateFormat="yyyy-MM-dd HH:mm"
+                                            dateFormat="yyyy-MM-dd"
-                                            showTimeInput
                                             onChange={(date) => {
-                                                console.log("setStartDate : ", date);
+                                                setRequestItems({ ...requestItems, schdulBgnde: getDateFourteenDigit(date), drftDatetimeYYYMMDD: getYYYYMMDD(date), drftDatetime: date });
-                                                setRequestItems({ ...requestItems, schdulBgnde: getDateFourteenDigit(date), schdulBgndeYYYMMDD: getYYYYMMDD(date), schdulBgndeHH: date.getHours(), schdulBgndeMM: date.getMinutes(), startDate: date });
+                                                setDrftDatetimeHH(date.getHours());
-                                                setSchdulBgndeHH(date.getHours());
+                                                setDrftDatetimeMM(date.getMinutes());
-                                                setSchdulBgndeMM(date.getMinutes());
                                             }} />
-                                        <input type="hidden" name="schdulBgndeHH" defaultValue={schdulBgndeHH} readOnly />
+                                        <input type="hidden" name="drftDatetimeMM" defaultValue={drftDatetimeMM} readOnly />
-                                        <input type="hidden" name="schdulBgndeMM" defaultValue={schdulBgndeMM} readOnly />
                                     </span>
                                 </dd>
                             </dl>
                             <dl>
-                                <dt><label htmlFor="title">위원회</label><span className="req">필수</span></dt>
+                                <dt><label>위원회</label><span className="req">필수</span></dt>
                                 <dd>
                                     {/** top org */}
                                     <label className="f_select w_250 org-group-id" htmlFor="org-group-id">
-                                        <select id="org-group-id" name="orgGroupId" title="심의위원회-상위"
+                                        <select id="org-group-id" name="orgGroupId" title="중앙건설기술심의 선택"
-                                            value={requestItems.upCommittee}
+                                            value={requestItems.orgGroupId}
-                                            onChange={(e) => setRequestItems({ ...requestItems, upCommittee: e.target.value })}>
+                                            onChange={(e) => {
-                                            <option value="">선택</option>
+                                                setRequestItems({ ...requestItems, orgGroupId: e.target.value });
-                                            {scheduleInit && scheduleInit.result && scheduleInit.result.listTopOrg
+                                                orgSelectedIndex[0] = e.target.options.selectedIndex;    
-                                            && scheduleInit.result.listTopOrg.map((item) => (
+                                                let forChangeObject = [...orgSelectedIndex];
-                                                <option key={item.id} value={item.id}>{item.name}</option>
+                                                setOrgSelectedIndex(forChangeObject);
+                                            }}>
+                                                <option value="">중앙건설기술심의 선택</option>
+                                            {orgArray && orgArray[0] && orgArray[0].map && orgArray[0].map((item, index) => (
+                                                <option key={item.orgId} value={item.orgId} data-index={index}>{item.orgNm}</option>
                                             ))}
                                         </select>
                                     </label>
                                     <label className="f_select w_250 org-group-id-1" htmlFor="org-group-id-1">
-                                        <select id="org-group-id-1" name="orgGroupId1" title="심의위원회-상위"
+                                        <select id="org-group-id-1" name="orgGroupId1" title="총괄건설기준위원회 선택"
-                                            value={requestItems.upCommittee}
+                                            value={requestItems.orgGroupId1}
-                                            onChange={(e) => setRequestItems({ ...requestItems, upCommittee: e.target.value })}>
+                                            defaultValue='1'
-                                            <option value="">선택</option>
+                                            onChange={(e) => {
-                                            {scheduleInit && scheduleInit.result && scheduleInit.result.listTopOrg
+                                                setRequestItems({ ...requestItems, orgGroupId1: e.target.value });
-                                            && scheduleInit.result.listTopOrg.map((item) => (
+                                                orgSelectedIndex[1] = e.target.options.selectedIndex;
-                                                <option key={item.id} value={item.id}>{item.name}</option>
+                                                let forChangeObject = [...orgSelectedIndex];
+                                                setOrgSelectedIndex(forChangeObject);
+                                            }}>
+                                            <option value="">총괄건설기준위원회 선택</option>
+                                            {orgArray && orgArray[1] && orgArray[1].map((item, index) => (
+                                                <option key={item.orgId} value={item.orgId} data-index={index}>{item.orgNm}</option>
                                             ))}
                                         </select>
                                     </label>
                                     <label className="f_select w_250 org-group-id-2" htmlFor="org-group-id-2">
-                                        <select id="org-group-id-2" name="orgGroupId2" title="심의위원회-하위"
+                                        <select id="org-group-id-2" name="orgGroupId2" title="기준위원회 선택"
-                                            value={requestItems.committee}
+                                            value={requestItems.orgGroupId2}
-                                            onChange={(e) => setRequestItems({ ...requestItems, committee: e.target.value })}>
+                                            onChange={(e) => {
-                                            <option value="">선택</option>
+                                                setRequestItems({ ...requestItems, orgGroupId2: e.target.value });
-                                            {scheduleApiOrgApiDepthList && scheduleApiOrgApiDepthList.result && scheduleApiOrgApiDepthList.result.list
+                                                orgSelectedIndex[2] = e.target.options.selectedIndex;    
-                                            && scheduleApiOrgApiDepthList.result.list.map((item) => (
+                                                let forChangeObject = [...orgSelectedIndex];
-                                                <option key={item.id} value={item.id}>{item.name}</option>
+                                                setOrgSelectedIndex(forChangeObject);
+                                            }}>
+                                            <option value="">기준위원회 선택</option>
+                                            {orgArray && orgArray[2] && orgArray[2].map((item, index) => (
+                                                <option key={item.orgId} value={item.orgId} data-index={index}>{item.orgNm}</option>
                                             ))}
                                         </select>
                                     </label>
@@ -468,81 +471,57 @@ function SchedulesEdit(props) {
                             <dl>
                                 <dt><label htmlFor="title">사전검토자료</label><span className="req">필수</span></dt>
                                 <dd>
-                                    <AttachFile name="preDataFile" file={preDataFile} setFile={setPreDataFile} fileName={preDataFileName}  />
+                                    <AttachFile name="preDataFile" file={preDataFile} setFile={setPreDataFile} fileName={preDataFileName} fileTypes={fileTypes}  />
                                 </dd>     
                             </dl>
                             <dl>
                                 <dt><label htmlFor="title">사전검토양식</label><span className="req">필수</span></dt>
                                 <dd>
+                                    <AttachFile name="preFormFile" file={preFormFile} setFile={setPreFormFile} fileName={preFormFileName} fileTypes={fileTypes}  />
                                 </dd>
                             </dl>
                             <dl>
                                 <dt><label htmlFor="title">관계기관의견</label><span className="req">필수</span></dt>
                                 <dd>
+                                    <AttachFile name="partnerFile" file={partnerFile} setFile={setPartnerFile} fileName={partnerFileName} fileTypes={fileTypes}  />
                                 </dd>
                             </dl>
                             <dl>
                                 <dt><label htmlFor="title">조치계획서</label><span className="req">필수</span></dt>
                                 <dd>
+                                    <AttachFile name="actionPlanFile" file={actionPlanFile} setFile={setActionPlanFile} fileName={actionPlanFileName} fileTypes={fileTypes}  />
                                 </dd>
                             </dl>
                             <dl>
-                                <dt><label htmlFor="title">조치결과서</label><span className="req">필수</span></dt>
+                                <dt><label>조치결과서</label><span className="req">필수</span></dt>
                                 <dd>
+                                    <AttachFile name="actionResultReportFile" file={actionResultReportFile} setFile={setActionResultReportFile} fileName={actionResultReportFileName} fileTypes={fileTypes}  />
                                 </dd>
                             </dl>
                             <dl>
-                                <dt><label htmlFor="title">회의담당자</label><span className="req">필수</span></dt>
+                                <dt><label>회의담당자</label><span className="req">필수</span></dt>
                                 <dd>
-                                    <input className="f_input2 w_full" type="text" name="title" title="제목" id="title" placeholder="제목을 입력하세요."
+                                    <input className="f_input2 w_full" type="text" name="drftConfeCharger" title="회의 담당자" placeholder="여기를 눌러 회의담당자를 선택하세요"
-                                        value={requestItems.title}
+                                        value={requestItems.drftConfeCharger}
-                                        onChange={(e) => setRequestItems({ ...requestItems, title: e.target.value })}
+                                        onChange={(e) => setRequestItems({ ...requestItems, drftConfeCharger: e.target.value })}
                                     />
                                 </dd>
                             </dl>
                             <dl>
-                                <dt><label htmlFor="title">회의실 비밀번호</label><span className="req">필수</span></dt>
+                                <dt><label>회의실 비밀번호</label><span className="req">필수</span></dt>
                                 <dd>
-                                    <input className="f_input2 w_full" type="text" name="title" title="제목" id="title" placeholder="제목을 입력하세요."
+                                    <input className="f_input2 w_full" type="text" name="drftConfePw" title="제목" placeholder="회의실 비밀번호를 입력하세요"
-                                        value={requestItems.title}
+                                        value={requestItems.drftConfePw}
-                                        onChange={(e) => setRequestItems({ ...requestItems, title: e.target.value })}
+                                        onChange={(e) => setRequestItems({ ...requestItems, drftConfePw: e.target.value })}
                                     />
                                 </dd>
                             </dl>
                             <dl>
-                                <dt><label htmlFor="title">회의 안건</label><span className="req">필수</span></dt>
+                                <dt><label>회의 안건</label><span className="req">필수</span></dt>
                                 <dd>
-                                    <input className="f_input2 w_full" type="text" name="title" title="제목" id="title" placeholder="제목을 입력하세요."
+                                    <textarea className="f_txtar w_full h_100" name="drftSummery" cols="30" rows="10" placeholder="회의 안건 내용을 입력하세요."
-                                        value={requestItems.title}
+                                        defaultValue={requestItems.drftSummery}
-                                        onChange={(e) => setRequestItems({ ...requestItems, title: e.target.value })}
+                                        onChange={(e) => setRequestItems({ ...requestItems, drftSummery: e.target.value })}
-                                    />
-                                </dd>
-                            </dl>
-
-
-                            <dl>
-                                <dt><label htmlFor="title">제목</label><span className="req">필수</span></dt>
-                                <dd>
-                                    <input className="f_input2 w_full" type="text" name="title" title="제목" id="title" placeholder="제목을 입력하세요."
-                                        value={requestItems.title}
-                                        onChange={(e) => setRequestItems({ ...requestItems, title: e.target.value })}
-                                    />
-                                </dd>
-                            </dl>
-                            <dl>
-                                <dt><label htmlFor="location">장소</label><span className="req">필수</span></dt>
-                                <dd>
-                                    <input className="f_input2 w_full" type="text" name="location" title="장소" id="location" placeholder="장소를 입력하세요."
-                                        defaultValue={requestItems.location}
-                                        onChange={(e) => setRequestItems({ ...requestItems, location: e.target.value })} />
-                                </dd>
-                            </dl>
-                            <dl>
-                                <dt><label htmlFor="contents">내용</label><span className="req">필수</span></dt>
-                                <dd>
-                                    <textarea className="f_txtar w_full h_100" name="contents" id="contents" cols="30" rows="10" placeholder="일정 내용을 입력하세요."
-                                        defaultValue={requestItems.contents}
-                                        onChange={(e) => setRequestItems({ ...requestItems, contents: e.target.value })}
                                     ></textarea>
                                 </dd>
                             </dl>
@@ -553,12 +532,6 @@ function SchedulesEdit(props) {
                                     <button className="btn btn_skyblue_h46 w_100"
                                         onClick={() => updateSchedule()}
                                     > 저장</button>            
-                                    {modeInfo.mode === CODE.MODE_MODIFY &&
-                                        <button className="btn btn_skyblue_h46 w_100"
-                                        onClick={(e) => {
-                                            onClickDeleteSchedule(location.state?.schdulId);
-                                        }}>삭제</button> 
-                                    }
                                     
                                 </div>
 
@@ -578,4 +551,4 @@ function SchedulesEdit(props) {
     );
 }
 
-export default SchedulesEdit;
+export default ProgressStatusEdit;

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

@@ -1,10 +1,7 @@
 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 AttachFile from "../../../../components/file/AttachFile";
-import AttachFileIcon from '@mui/icons-material/AttachFile';
-
-import EgovAttachFile from 'components/EgovAttachFile';
 import RichTextEditor from "../../../../components/editor/RichTextEditor";
 import AlertDialogSlide from "../../../../components/alert/AlertDialogSlide";
 import CODE from 'constants/code';
@@ -59,7 +56,7 @@ function PopupEditor(props) {
     const [schdulBgndeMM, setSchdulBgndeMM] = useState();
     const [schdulEnddeHH, setSchdulEnddeHH] = useState();
     const [schdulEnddeMM, setSchdulEnddeMM] = useState();
-    const [fileName, setFileName] = useState();
+    
 
     const [confirm, setConfirm] = React.useState();
 
@@ -140,8 +137,8 @@ function PopupEditor(props) {
                 setText(rawDetail.contents);
                 setTextOriginal(rawDetail.contents);
 
-                if( rawDetail.fileName ) {
+                if( rawDetail.files ) {
-                    setFileName(rawDetail.fileName);
+                    setServerFiles(rawDetail.files);
                 }
             }
         );
@@ -167,7 +164,14 @@ function PopupEditor(props) {
         formData.append("contents", text); 
         
         //첨부파일
-        formData.append("file", file);
+        //formData.append("files", files);
+        for(let i=0; i<files.length; i++) {
+            // seq 항목을 가지고 있다면 그건 server에 이미 upload된 file이므로 continue
+            if( files[i].seq ) {
+                continue;
+            }
+            formData.append("files", files[i]);
+        }
 
         if (formValidator(formData)) {
             const requestOptions = {
@@ -264,22 +268,15 @@ function PopupEditor(props) {
     }
 
     const fileTypes = ["JPG", "PNG", "GIF", "PDF", "HWP", "HWPX", "ZIP", "JPEG", "MP4", "TXT"];
-    const onDrop = (e) => {
+
-        //alert('ddd');
+    const [serverFiles, setServerFiles] = useState();
+    const [files, setFiles] = useState();
+    /*
+    let files = null;
+    const setFiles = (myFiles) => {
+        files = myFiles;
     };
-
+    */
-    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() {
@@ -367,21 +364,7 @@ function PopupEditor(props) {
                                 <dl className="file-attach-wrapper">
                                     <dt>첨부파일</dt>
                                     <dd>
-                                        <span className="file_attach">
+                                        <AttachFile name="preDataFile" multiple={true} files={files} setFiles={setFiles} serverFiles={serverFiles} fileTypes={fileTypes}  />
-                                            <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>
                                 

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

@@ -1135,6 +1135,11 @@
   resolved "https://registry.npmjs.org/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz"
   integrity sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==
 
+"@base2/pretty-print-object@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.2.tgz#e30192222fd13e3c1e97040163d6628a95f70844"
+  integrity sha512-rBha0UDfV7EmBRjWrGG7Cpwxg8WomPlo0q+R2so47ZFf9wy4YKJzLuHcVa0UGFjdcLZj/4F/1FNC46GIQhe7sA==
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz"
@@ -8623,7 +8628,7 @@ react-drag-drop-files@^2.3.10:
 
 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"
+  resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz#1cafd5b6ad41946ffc8755e254da3fc752a01ac6"
   integrity sha512-UDg4lXB6BzlobN60P8fHWVPX3Kyw8ORrTeBtClmIlGdkOOE+GYQSFvmEU5iLLpwp/6v42DINwNcwOhOLfQ//FQ==
   dependencies:
     "@base2/pretty-print-object" "1.0.1"