검색기능구현

egovframe-template-simple-react-contribution/src/pages/standardCode/StandardCodeList.jsx

@@ -82,6 +82,10 @@ function StandardCodeList(props) {
 
     const [listTag, setListTag] = useState([]);
 
+    /* 검색기능 추가 변수*/
+    const [listdata,setlistdata] = useState([]);
+    const [filterData,setfilterData] = useState('');
+
     const retrieveList = useCallback((searchCondition) => {
         console.groupCollapsed("StandardCodeList.retrieveList()");
 
@@ -99,35 +103,9 @@ function StandardCodeList(props) {
             (resp) => {
                 setMasterBoard(resp.result.tnDocumentInfo);
                 setPaginationInfo(resp.result.paginationInfo);
-
+                /*검색을 위한 리스트 state에 저장*/
-                let mutListTag = [];
+                setlistdata(resp.result.resultList);
-                mutListTag.push(<p className="no_data" key="0">검색된 결과가 없습니다.</p>); // 게시판 목록 초기값
-
-                const resultCnt = parseInt(resp.result.resultCnt);
-                const currentPageNo = resp.result.paginationInfo.currentPageNo;
-                const pageSize = resp.result.paginationInfo.pageSize;
-                console.log(resp)
                 // 리스트 항목 구성
-                resp.result.resultList.forEach(function (item, index) {
-                    if (index === 0) mutListTag = []; // 목록 초기화
-                    const listIdx = itemIdxByPage(resultCnt , currentPageNo, pageSize, index);
-
-                    mutListTag.push(
-                        <div
-                            key={listIdx}
-                            className="list_item List_Codes" >
-                            <div className="mainCategory">{item.mainCategory}</div>
-                            <div className="middleCategory">{item.middleCategory}</div>
-                            <div className="kcscCd">{item.kcscCd}</div>
-                            <div className="groupNm">{item.groupNm}</div>
-                            <div className="Revisionhistory"><a className="vieweratag"  href = {'#'} onClick={showhandling}  data-groupseq = {item.groupSeq} >개정이력</a></div>
-                            <div className="fille">{item.contentcount>0?<a  className="vieweratag" href = {"/standardCode/viewer/"+item.kcscCd}>내용보기</a>:null}</div>
-                            <div className="viewer">{item.docFileGrpId==null?null:<a href ={"https://www.kcsc.re.kr/file/DownloadGrp/"+item.docFileGrpId}><AiFillFileMarkdown/></a>}</div>
-                            <div className="star"><AiFillStar/></div>
-                        </div>
-                    );
-                });
-                setListTag(mutListTag);
             },
             function (resp) {
                 console.log("err response : ", resp);
@@ -190,7 +168,8 @@ function StandardCodeList(props) {
                                     <span className="f_search w_500">
                                         <input type="text" name="" defaultValue={searchCondition.searchWrd} placeholder="코드명" ref={wrdRef}
                                                onChange={e => {
-                                                   wrdRef.current.value = e.target.value;
+
+                                                   setfilterData(e.target.value);
                                                }}
                                         />
                                         <button type="button"
@@ -219,7 +198,27 @@ function StandardCodeList(props) {
                                 <span>즐겨찾기</span>
                             </div>
                             <div className="result">
-                                {listTag}
+
+                                {/*검색기능 filterData가 없는경우 모든 데이터 출력*/}
+                                {listdata.filter(item=>{
+                                    if (item.groupNm.includes(filterData)){
+                                        return item
+                                    }
+                                    return null
+                                }).map(item=>{
+                                   return(
+                                    <div className="list_item List_Codes" >
+                                        <div className="mainCategory">{item.mainCategory}</div>
+                                        <div className="middleCategory">{item.middleCategory}</div>
+                                        <div className="kcscCd">{item.kcscCd}</div>
+                                        <div className="groupNm">{item.groupNm}</div>
+                                        <div className="Revisionhistory"><a className="vieweratag"  href = {'#'} onClick={showhandling}  data-groupseq = {item.groupSeq} >개정이력</a></div>
+                                        <div className="fille">{item.contentcount>0?<a  className="vieweratag" href = {"/standardCode/viewer/"+item.kcscCd}>내용보기</a>:null}</div>
+                                        <div className="viewer">{item.docFileGrpId==null?null:<a href ={"https://www.kcsc.re.kr/file/DownloadGrp/"+item.docFileGrpId}><AiFillFileMarkdown/></a>}</div>
+                                        <div className="star"><AiFillStar/></div>
+                                    </div>
+                                       )
+                                })}
                             </div>
                         </div>
                         {/* <!--// 게시판목록 --> */}