DBNT
/
kcscDev
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

퍼블 업뎃

thkim
Lim\jun 2024-06-25 15:07:50 +09:00
parent 842f729ef0
commit 2f01abb5dd
18 changed files with 478 additions and 242 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
egovframe-template-simple-react-contribution/public/assets/images/down.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 535 B

BIN
egovframe-template-simple-react-contribution/public/assets/images/ge.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 554 B

BIN
egovframe-template-simple-react-contribution/public/assets/images/je.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 563 B

20
egovframe-template-simple-react-contribution/src/App.js
View File

@ -1,7 +1,8 @@
import RootRoutes from './routes'; import RootRoutes from './routes';
import ThemeCustomization from 'themes'; import ThemeCustomization from 'themes';
import ScrollTop from 'components/ScrollTop'; import ScrollTop from 'components/ScrollTop';
import React from 'react'; import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/css/bootstrap.min.css';
import './css/base.css'; import './css/base.css';
@ -11,17 +12,34 @@ import './css/page.css';
import './css/response.css'; import './css/response.css';
import './css/Custom/customMain.css' import './css/Custom/customMain.css'
import URL from "constants/url";
function App() { function App() {
return ( return (
<ThemeCustomization> <ThemeCustomization>
<ScrollTop> <ScrollTop>
<ScrollControl />
<RootRoutes /> <RootRoutes />
</ScrollTop> </ScrollTop>
</ThemeCustomization> </ThemeCustomization>
) )
} }
const ScrollControl = () => {
const location = useLocation();
useEffect(() => {
const hideFooterPaths = [URL.STANDARD_CODE_VIEWER, URL.STANDARD_CODE_LIST];
if (hideFooterPaths.some(path => location.pathname.includes(path))) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
}, [location]);
return null;
};
console.log("process.env.NODE_ENV", process.env.NODE_ENV); console.log("process.env.NODE_ENV", process.env.NODE_ENV);
console.log("process.env.REACT_APP_EGOV_CONTEXT_URL", "[" + process.env.REACT_APP_EGOV_CONTEXT_URL + "]"); console.log("process.env.REACT_APP_EGOV_CONTEXT_URL", "[" + process.env.REACT_APP_EGOV_CONTEXT_URL + "]");

6
egovframe-template-simple-react-contribution/src/components/EgovFooter.jsx
View File

@ -1,14 +1,16 @@
import React, { useState, useCallback } from 'react'; import React, { useState, useCallback } from 'react';
import {Link, NavLink} from 'react-router-dom'; import {Link, NavLink} from 'react-router-dom';
import URL from "../constants/url"; import URL from "constants/url";
import Collapse from 'react-bootstrap/Collapse' import Collapse from 'react-bootstrap/Collapse'
function EgovFooter() { function EgovFooter() {
const [toggle, setToggle] = useState(false); const [toggle, setToggle] = useState(false);
const toggleFunc = useCallback(() => setToggle(!toggle), [toggle]); const toggleFunc = useCallback(() => setToggle(!toggle), [toggle]);
const hideFooterPaths = [URL.STANDARD_CODE_VIEWER, URL.STANDARD_CODE_LIST];
const currentPath = window.location.pathname;
if(window.location.pathname.includes("/standardCode/viewer")){ if(hideFooterPaths.some(path => currentPath.includes(path))){
return null; return null;
}else{ }else{
return ( return (

139
egovframe-template-simple-react-contribution/src/components/EgovHeader.jsx
View File

@ -92,68 +92,91 @@ function EgovHeader({ loginUser, onChangeLogin }) {
// <!-- header --> // <!-- header -->
<div className="header"> <div className="header">
<div className="inner"> <div className="inner">
<div className="row logo w-100 justify-content-between pt-3"> <Row className="logo pt-4">
<div className="col-3"> <Col xs={3}>
<Link to={URL.MAIN} className="w"><img src="/assets/images/logo.png" alt="국가건설기준센터" /></Link> <Link to={URL.MAIN} className="w"><img src="/assets/images/logo.png" alt="국가건설기준센터" /></Link>
<Link to={URL.MAIN} className="m"><img src="/assets/images/logo_m.png" alt="국가건설기준센터" /></Link> <Link to={URL.MAIN} className="m"><img src="/assets/images/logo_m.png" alt="국가건설기준센터" /></Link>
</div> </Col>
<div className="col-6 d-flex justify-content-center align-items-end"><img src="/assets/images/copy.png" alt="국가건설기준센터" className="align-self-end" /></div> <Col xs={6} className="text-center">
<div className="col-3 d-flex justify-content-end align-items-end"> {/*<img src="/assets/images/copy.png" alt="국가건설기준센터" className="align-self-end" />*/}
<div className="col-1 person" onClick={myHandler}></div> <div className="search">
<div className="col-1 right_a" onClick={allMenuControl}> <div className="search_input">
<button type="button" className="btn btnAllMenu" title="전체메뉴 닫힘">전체메뉴</button> <form className="row justify-content-between w-100 m-0">
<button type="button" className="btn mobile btnAllMenuM" title="전체메뉴 닫힘">전체메뉴</button> <div className="col-2">
<select name="" className="form-select shadow-none">
<option value="">코드명</option>
<option value="">목차</option>
<option value="">본문</option>
</select>
</div>
<div className="col-10 d-flex justify-content-between">
<div className="col-11"><input type="text" className="form-control shadow-none" placeholder="검색어를 입력하세요." lang="ko" /></div>
<div className="col-1 text-center">
<button type="button" className="topsearch" onClick={SearchHandler}></button>
</div>
</div>
</form>
</div>
</div> </div>
</div> </Col>
</div> <Col xs={3}>
<div className="search"> <Row className="justify-content-end">
<div className="search_input"> <Col xs={"auto"} className="person mt-2" onClick={myHandler}></Col>
<form className="row justify-content-between w-100 m-0"> <Col xs={"auto"} className="right_a mt-2" onClick={allMenuControl}>
<div className="col-2"> <button type="button" className="btn btnAllMenu" title="전체메뉴 닫힘">전체메뉴</button>
<select name="" className="form-select shadow-none"> <button type="button" className="btn mobile btnAllMenuM" title="전체메뉴 닫힘">전체메뉴</button>
<option value="">코드명</option> </Col>
<option value="">목차</option>
<option value="">본문</option>
</select>
</div>
<div className="col-10 d-flex justify-content-between">
<div className="col-11"><input type="text" className="form-control shadow-none" placeholder="검색어를 입력하세요." lang="ko" /></div>
<div className="col-1 text-center">
<button type="button" className="topsearch" onClick={SearchHandler}></button>
</div>
</div>
</form>
</div>
</div>
<div className="topcode d-flex justify-content-center w-100">
<div className={showMore ? 'topcode_c justify-content-center' : 'topcode_n justify-content-center'}>
<Row className="">
<Col><a href="/standardCode/list/1010" title="공통코드" className={"topcodebnt"}>공통코드</a></Col>
<Col><a href="/standardCode/list/101011" title="지반코드" className={"topcodebnt"}>지반코드</a></Col>
<Col><a href="/standardCode/list/101014" title="구조코드" className={"topcodebnt"}>구조코드</a></Col>
<Col><a href="/standardCode/list/101017" title="내진코드" className={"topcodebnt"}>내진코드</a></Col>
<Col><a href="/standardCode/list/102021" title="가설코드" className={"topcodebnt"}>가설코드</a></Col>
<Col><a href="/standardCode/list/102024" title="교량코드" className={"topcodebnt"}>교량코드</a></Col>
<Col><a href="/standardCode/list/102027" title="터널코드" className={"topcodebnt"}>터널코드</a></Col>
<Col><a href="/standardCode/list/102029" title="공동구코드" className={"topcodebnt"}>공동구코드</a></Col>
<Col><a href="/standardCode/list/102031" title="설비코드" className={"topcodebnt"}>설비코드</a></Col>
<Col><Link onClick={toggleShowMore} title="..." className={"topcodebnt"}>{showMore ? (<b> Ⅹ </b>) : (<b> · · · </b>)}</Link></Col>
</Row> </Row>
{showMore && ( </Col>
<Row className=""> </Row>
<Col><a href="/standardCode/list/102034" title="조경코드" className="topcodebnt">조경코드</a></Col> {/*<div className="search">*/}
<Col><a href="/standardCode/list/102041" title="건축코드" className="topcodebnt">건축코드</a></Col> {/* <div className="search_input">*/}
<Col><a href="/standardCode/list/102044" title="도로코드" className="topcodebnt">도로코드</a></Col> {/* <form className="row justify-content-between w-100 m-0">*/}
<Col><a href="/standardCode/list/102047" title="철도코드" className="topcodebnt">철도코드</a></Col> {/* <div className="col-2">*/}
<Col><a href="/standardCode/list/102051" title="하천코드" className="topcodebnt">하천코드</a></Col> {/* <select name="" className="form-select shadow-none">*/}
<Col><a href="/standardCode/list/102054" title="댐코드" className="topcodebnt">댐코드</a></Col> {/* <option value="">코드명</option>*/}
<Col><a href="/standardCode/list/102057" title="상수도코드" className="topcodebnt">상수도코드</a></Col> {/* <option value="">목차</option>*/}
<Col><a href="/standardCode/list/102061" title="하수도코드" className="topcodebnt">하수도코드</a></Col> {/* <option value="">본문</option>*/}
<Col><a href="/standardCode/list/102067" title="농업기반코드" className="topcodebnt">농업기반코드</a></Col> {/* </select>*/}
</Row> {/* </div>*/}
)} {/* <div className="col-10 d-flex justify-content-between">*/}
</div> {/* <div className="col-11"><input type="text" className="form-control shadow-none" placeholder="검색어를 입력하세요." lang="ko" /></div>*/}
</div> {/* <div className="col-1 text-center">*/}
{/* <button type="button" className="topsearch" onClick={SearchHandler}></button>*/}
{/* </div>*/}
{/* </div>*/}
{/* </form>*/}
{/* </div>*/}
{/*</div>*/}
{/*<div className="topcode d-flex justify-content-center w-100">*/}
{/* <div className={showMore ? 'topcode_c justify-content-center' : 'topcode_n justify-content-center'}>*/}
{/* <Row className="">*/}
{/* <Col><a href="/standardCode/list/1010" title="공통코드" className={"topcodebnt"}>공통코드</a></Col>*/}
{/* <Col><a href="/standardCode/list/101011" title="지반코드" className={"topcodebnt"}>지반코드</a></Col>*/}
{/* <Col><a href="/standardCode/list/101014" title="구조코드" className={"topcodebnt"}>구조코드</a></Col>*/}
{/* <Col><a href="/standardCode/list/101017" title="내진코드" className={"topcodebnt"}>내진코드</a></Col>*/}
{/* <Col><a href="/standardCode/list/102021" title="가설코드" className={"topcodebnt"}>가설코드</a></Col>*/}
{/* <Col><a href="/standardCode/list/102024" title="교량코드" className={"topcodebnt"}>교량코드</a></Col>*/}
{/* <Col><a href="/standardCode/list/102027" title="터널코드" className={"topcodebnt"}>터널코드</a></Col>*/}
{/* <Col><a href="/standardCode/list/102029" title="공동구코드" className={"topcodebnt"}>공동구코드</a></Col>*/}
{/* <Col><a href="/standardCode/list/102031" title="설비코드" className={"topcodebnt"}>설비코드</a></Col>*/}
{/* <Col><Link onClick={toggleShowMore} title="..." className={"topcodebnt"}>{showMore ? (<b> Ⅹ </b>) : (<b> · · · </b>)}</Link></Col>*/}
{/* </Row>*/}
{/* {showMore && (*/}
{/* <Row className="">*/}
{/* <Col><a href="/standardCode/list/102034" title="조경코드" className="topcodebnt">조경코드</a></Col>*/}
{/* <Col><a href="/standardCode/list/102041" title="건축코드" className="topcodebnt">건축코드</a></Col>*/}
{/* <Col><a href="/standardCode/list/102044" title="도로코드" className="topcodebnt">도로코드</a></Col>*/}
{/* <Col><a href="/standardCode/list/102047" title="철도코드" className="topcodebnt">철도코드</a></Col>*/}
{/* <Col><a href="/standardCode/list/102051" title="하천코드" className="topcodebnt">하천코드</a></Col>*/}
{/* <Col><a href="/standardCode/list/102054" title="댐코드" className="topcodebnt">댐코드</a></Col>*/}
{/* <Col><a href="/standardCode/list/102057" title="상수도코드" className="topcodebnt">상수도코드</a></Col>*/}
{/* <Col><a href="/standardCode/list/102061" title="하수도코드" className="topcodebnt">하수도코드</a></Col>*/}
{/* <Col><a href="/standardCode/list/102067" title="농업기반코드" className="topcodebnt">농업기반코드</a></Col>*/}
{/* </Row>*/}
{/* )}*/}
{/* </div>*/}
{/*</div>*/}
{/*<h1 className="logo">*/} {/*<h1 className="logo">*/}
{/* <Link to={URL.MAIN} className="w">*/} {/* <Link to={URL.MAIN} className="w">*/}

86
egovframe-template-simple-react-contribution/src/css/Custom/customMain.css
View File

@ -12,49 +12,55 @@
background-color: #212121; background-color: #212121;
} }
.code_list .head >span:nth-child(1),.code_list .result .List_Codes >div:nth-child(1){ /*.code_list .head >span:nth-child(1),.code_list .result .List_Codes >div:nth-child(1){*/
text-align: left; /* text-align: left;*/
width: 12%; /* width: 12%;*/
} /*}*/
.code_list .head >span:nth-child(2),.code_list .result .List_Codes >div:nth-child(2){ /*.code_list .head >span:nth-child(2),.code_list .result .List_Codes >div:nth-child(2){*/
text-align: left; /* text-align: left;*/
width: 15%; /* width: 15%;*/
} /*}*/
.code_list .head >span:nth-child(3),.code_list .result .List_Codes >div:nth-child(3){ /*.code_list .head >span:nth-child(3),.code_list .result .List_Codes >div:nth-child(3){*/
text-align: left; /* text-align: left;*/
width: 10%; /* width: 10%;*/
} /*}*/
.code_list .head >span:nth-child(4),.code_list .result .List_Codes >div:nth-child(4) { /*.code_list .head >span:nth-child(4),.code_list .result .List_Codes >div:nth-child(4) {*/
width: 34%; /* width: 34%;*/
text-align: left; /* text-align: left;*/
} /*}*/
.code_list .head >span:nth-child(5),.code_list .result .List_Codes >div:nth-child(5){ /*.code_list .head >span:nth-child(5),.code_list .result .List_Codes >div:nth-child(5){*/
width: 15%; /* width: 15%;*/
} /*}*/
.code_list .head >span:nth-child(6),.code_list .result .List_Codes >div:nth-child(6){ /*.code_list .head >span:nth-child(6),.code_list .result .List_Codes >div:nth-child(6){*/
width: 15%; /* width: 15%;*/
} /*}*/
.code_list .head > span:nth-child(7),.code_list .result .List_Codes >div:nth-child(7){ /*.code_list .head > span:nth-child(7),.code_list .result .List_Codes >div:nth-child(7){*/
width: 7%; /* width: 7%;*/
} /*}*/
.code_list .result .List_Codes >div:nth-child(1), /*.code_list .result .List_Codes >div:nth-child(1),*/
.code_list .result .List_Codes >div:nth-child(2), /*.code_list .result .List_Codes >div:nth-child(2),*/
.code_list .result .List_Codes >div:nth-child(3), /*.code_list .result .List_Codes >div:nth-child(3),*/
.code_list .result .List_Codes >div:nth-child(4), /*.code_list .result .List_Codes >div:nth-child(4),*/
.code_list .result .List_Codes >div:nth-child(5), /*.code_list .result .List_Codes >div:nth-child(5),*/
.code_list .result .List_Codes >div:nth-child(6), /*.code_list .result .List_Codes >div:nth-child(6),*/
.code_list .result .List_Codes >div:nth-child(7){ /*.code_list .result .List_Codes >div:nth-child(7){*/
font-size: 14px; /* font-size: 14px;*/
} /*}*/
.standard_code_modal .head >span:nth-child(1),.standard_code_modal .result .list_item >div:nth-child(1){width: 12%;} /*.standard_code_modal .head >span:nth-child(1),.standard_code_modal .result .list_item >div:nth-child(1){width: 12%;}*/
.standard_code_modal .head >span:nth-child(2),.standard_code_modal .result .list_item >div:nth-child(2){width: 15%;} /*.standard_code_modal .head >span:nth-child(2),.standard_code_modal .result .list_item >div:nth-child(2){width: 15%;}*/
.standard_code_modal .head >span:nth-child(3),.standard_code_modal .result .list_item >div:nth-child(3){width: 10%;} /*.standard_code_modal .head >span:nth-child(3),.standard_code_modal .result .list_item >div:nth-child(3){width: 10%;}*/
.standard_code_result{ .standard_code_result{
max-height: 520px; max-height: calc(100vh - 238px);
overflow-y: auto; overflow-y: scroll;
} }
.standard_code_result_detail{
max-height: calc(100vh - 577px);
overflow-y: scroll;
}
.download_list{ .download_list{
max-height: 550px; max-height: 550px;
overflow-y: auto; overflow-y: auto;
@ -67,7 +73,7 @@
max-width: 100%; max-width: 100%;
} }
.listTableDiv{ .listTableDiv{
padding: 0 !important; padding: 0 10px !important;
} }
.vieweratag{ .vieweratag{
color: black; color: black;

4
egovframe-template-simple-react-contribution/src/css/base.css
View File

@ -64,6 +64,7 @@ button {cursor: pointer;}
.w_full {width: 100%;} .w_full {width: 100%;}
.w_half {width: 50%;} .w_half {width: 50%;}
.w_quarter {width: 25%;} .w_quarter {width: 25%;}
.w_20 {width: 20px;}
.w_50 {width: 50px;} .w_50 {width: 50px;}
.w_70 {width: 70px;} .w_70 {width: 70px;}
.w_80 {width: 80px;} .w_80 {width: 80px;}
@ -82,6 +83,7 @@ button {cursor: pointer;}
.mw_400 {max-width: 400px;} .mw_400 {max-width: 400px;}
.mw_450 {max-width: 450px;} .mw_450 {max-width: 450px;}
.h_20 {height: 20px;}
.h_25 {height: 25px;} .h_25 {height: 25px;}
.h_30 {height: 30px;} .h_30 {height: 30px;}
.h_40 {height: 40px;} .h_40 {height: 40px;}
@ -97,6 +99,7 @@ button {cursor: pointer;}
.f_15 {font-size: 15px;} .f_15 {font-size: 15px;}
.f_16 {font-size: 16px;} .f_16 {font-size: 16px;}
.f_17 {font-size: 17px;} .f_17 {font-size: 17px;}
.f_30 {font-size: 30px;}
/* 여백 */ /* 여백 */
@ -108,6 +111,7 @@ button {cursor: pointer;}
.bg-fa {background: #FAFAFA !important;} .bg-fa {background: #FAFAFA !important;}
.bg-224 {background: #22498E !important;} .bg-224 {background: #22498E !important;}
.bg-f8f {background: #F8FAFC !important;}
.text-4c6 {color: #4C6C84 !important;} .text-4c6 {color: #4C6C84 !important;}
.text-224 {color: #22498E !important;} .text-224 {color: #22498E !important;}

9
egovframe-template-simple-react-contribution/src/css/component.css
View File

@ -66,6 +66,10 @@
.board_list .result .list_item1 {display: table; width: 100%; table-layout: fixed; margin-left: 0px;} .board_list .result .list_item1 {display: table; width: 100%; table-layout: fixed; margin-left: 0px;}
.board_list .result .list_item1 > div {display: table-cell; padding: 5px 0; border-bottom: 1px solid #dde2e5; color: #666; font-size: 14px; text-align: center; vertical-align: middle; } .board_list .result .list_item1 > div {display: table-cell; padding: 5px 0; border-bottom: 1px solid #dde2e5; color: #666; font-size: 14px; text-align: center; vertical-align: middle; }
/* 건설기준 리스트 */
.board_list .result .list_item2 {display: table; width: 100%; table-layout: fixed; margin-left: 0px;}
.board_list .result .list_item2 > div {display: table-cell; padding-top: 5px; border-bottom: 1px solid #dde2e5; color: #666; font-size: 14px; text-align: center; vertical-align: middle; }
.board_bot {margin-top: 40px;} .board_bot {margin-top: 40px;}
.paging {text-align: center;} .paging {text-align: center;}
@ -255,9 +259,10 @@ select::-ms-expand {display:none;}
/* 건설기준코드list 설계기준 표준시방서 전문시방서 통합 다운로드 탭 */ /* 건설기준코드list 설계기준 표준시방서 전문시방서 통합 다운로드 탭 */
.right_col {display: flex; justify-content: space-between; align-items: center;} .right_col {display: flex; justify-content: space-between; align-items: center;}
.mini_board ul {display: flex; list-style: none; padding: 0; margin: 0;} .mini_board ul {display: flex; list-style: none; padding: 0; margin: 0;}
.tab {padding: 5px 10px; margin-right: 10px; cursor: pointer; border: 1px solid #ccc; border-radius: 5px; transition: background-color 0.3s;} .tab {width: 100px; padding: 5px 0; cursor: pointer; border: 1px solid #ccc; border-radius: 10px; transition: background-color 0.3s;}
.tab:hover {background-color: #f0f0f0;} .tab:hover {background-color: #f0f0f0;}
.active {background-color: #007bff; color: #fff;} .active {background-color: #22498E; color: #fff;}
.nav-item a {color: #6C6C6C;}
.f_input {height: 46px; padding: 0 20px; border: 0; border-radius: 5px; color: #222; font-size: 16px; background: #f7f7f7;} .f_input {height: 46px; padding: 0 20px; border: 0; border-radius: 5px; color: #222; font-size: 16px; background: #f7f7f7;}
.f_input1 {width:200px; height: 32px; padding: 0 30px 0 0; border: 0; border-radius: 5px; color: #222; font-size: 16px; background: #f7f7f7 url(css/images/bg_btn_calendar.png) no-repeat;background-position: right center; background-size: 32px 32px; cursor: pointer;} /* made by lim f_input1*/ .f_input1 {width:200px; height: 32px; padding: 0 30px 0 0; border: 0; border-radius: 5px; color: #222; font-size: 16px; background: #f7f7f7 url(css/images/bg_btn_calendar.png) no-repeat;background-position: right center; background-size: 32px 32px; cursor: pointer;} /* made by lim f_input1*/

6
egovframe-template-simple-react-contribution/src/css/layout.css
View File

@ -4,7 +4,7 @@ body {min-width: 1400px;}
/*.header {position: relative;}*/ /*.header {position: relative;}*/
.header::after {content: ""; display: block; left: 0; bottom: 0; width: 100%; height: 1px; background: #dedede;} .header::after {content: ""; display: block; left: 0; bottom: 0; width: 100%; height: 1px; background: #dedede;}
.header > .inner {max-width: 1400px; height: 210px; margin: 0 auto; } /* position: relative; padding: 0 50px; */ .header > .inner {max-width: 1400px; height: 110px; margin: 0 auto; } /* position: relative; padding: 0 50px; */
.header h1 {display: inline-block; margin-top: 32px;} .header h1 {display: inline-block; margin-top: 32px;}
.header h1 a, .header h1 a,
.header h1 img {display: block;} .header h1 img {display: block;}
@ -28,8 +28,8 @@ body {min-width: 1400px;}
.header .right_a .btn.active {background: url(css/images/ico_allmenu_close.png) no-repeat center; background-size: 22px 18px;} .header .right_a .btn.active {background: url(css/images/ico_allmenu_close.png) no-repeat center; background-size: 22px 18px;}
.header .right_a .btn.mobile {display: none;} .header .right_a .btn.mobile {display: none;}
.header .search {height:96px; padding:24px 0px 10px; margin: 0 auto; } .header .search {height:66px; padding:0; margin: 0 auto; }
.header .search .search_input {max-width: 734px; width: calc(100% - 40px); height:62px; margin: 0 auto; border: 2px solid #004994; border-radius: 20px; padding: 10px} .header .search .search_input {max-width: 734px; width: calc(100% - 40px); height:52px; margin: 0 auto; border: 2px solid #004994; border-radius: 20px; padding: 5px}
.header .search .search_input select {border: none;} .header .search .search_input select {border: none;}
.header .search .search_input input {ime-mode:active; border: none;} .header .search .search_input input {ime-mode:active; border: none;}
.header .search .topsearch {width: 40px; height: 40px; background: url(css/images/ico_search_b.png) no-repeat center center; background-size: 22px 22px; filter: brightness(1) sepia(1) saturate(3) hue-rotate(175deg);} .header .search .topsearch {width: 40px; height: 40px; background: url(css/images/ico_search_b.png) no-repeat center center; background-size: 22px 22px; filter: brightness(1) sepia(1) saturate(3) hue-rotate(175deg);}

28
egovframe-template-simple-react-contribution/src/css/page.css
View File

@ -410,6 +410,9 @@
.BOARD_USE_LIST .board_view2 dl dt {width: 185px;} .BOARD_USE_LIST .board_view2 dl dt {width: 185px;}
.BOARD_USE_LIST .board_view2 dl:nth-child(2) dd .f_input2 {width: 490px; margin-left: 17px;} .BOARD_USE_LIST .board_view2 dl:nth-child(2) dd .f_input2 {width: 490px; margin-left: 17px;}
/* 검색화면 */
/*.board_view2*/
/* 사용자 게시판 */ /* 사용자 게시판 */
.BRD013 .head > span:nth-child(1) {position: relative; width: 60px;} .BRD013 .head > span:nth-child(1) {position: relative; width: 60px;}
@ -505,6 +508,31 @@
.BRD020 .result .list_item > div:nth-child(6) {width: 120px;} .BRD020 .result .list_item > div:nth-child(6) {width: 120px;}
.BRD020 .result .list_item > div:nth-child(7) {width: 100px;} .BRD020 .result .list_item > div:nth-child(7) {width: 100px;}
/* 기준코드 리스트 */
.BRD021 .head > span:nth-child(1) {position: relative; width: 120px;}
.BRD021 .head > span:nth-child(2) {position: relative; }
.BRD021 .head > span:nth-child(3) {position: relative; width: 120px;}
.BRD021 .head > span:nth-child(4) {position: relative; width: 200px;}
.BRD021 .head > span:nth-child(5) {position: relative; width: 250px;}
.BRD021 .head > span:nth-child(6) {position: relative; width: 100px;}
.BRD021 .head > span:nth-child(7) {width: 100px;} /* 스크롤바 크기만큼 width 더 잡아야 함.*/
.BRD021 .head > span:nth-child(-n+6)::after {position: absolute; content: ''; right: 0; bottom: 0; height: 50%; border-right: 1px solid #B5B5B5;}
.BRD021 .result .list_item2 > div:nth-child(1) {width: 120px;}
.BRD021 .result .list_item2 > div:nth-child(2) {text-overflow: ellipsis; white-space: nowrap; overflow: hidden; text-align: left; padding-left: 10px;}
.BRD021 .result .list_item2 > div:nth-child(3) {width: 120px;}
.BRD021 .result .list_item2 > div:nth-child(4) {width: 200px;}
.BRD021 .result .list_item2 > div:nth-child(5) {width: 250px; padding-left: 10px;}
.BRD021 .result .list_item2 > div:nth-child(6) {width: 100px;}
.BRD021 .result .list_item2 > div:nth-child(7) {width: 80px;}
/* 통합다운로드 */
.BRD022 .head > span:nth-child(1) {position: relative; width: 40%; }
.BRD022 .head > span:nth-child(2) {position: relative; width: 30%; }
.BRD022 .head > span:nth-child(3) {position: relative; width: 30%; }
.BRD022 .head > span:nth-child(-n+2)::after {position: absolute; content: ''; right: 0; bottom: 0; height: 50%; border-right: 1px solid #B5B5B5;}
.BRD022 .result .list_item > div:nth-child(1) {width: 40%; text-align: center;}
.BRD022 .result .list_item > div:nth-child(2) {width: 30%; text-align: center;}
.BRD022 .result .list_item > div:nth-child(3) {width: 30%; text-align: center;}
/* 찾아오시는길 */ /* 찾아오시는길 */
.SITE_CONTACT_US .map {margin-top: 43px;} .SITE_CONTACT_US .map {margin-top: 43px;}

4
egovframe-template-simple-react-contribution/src/css/response.css
View File

@ -5,8 +5,8 @@
/* Layout */ /* Layout */
body {min-width: auto;} body {min-width: auto;}
.header .inner {width: 100%; height: 70px; padding: 0 20px;} .header .inner {width: 100%; padding: 0 10px;}
.header h1 {margin-top: 22.5px;} /*.header h1 {margin-top: 22.5px;}*/
.header .logo .w {display: none;} .header .logo .w {display: none;}
.header .logo .m {display: block;} .header .logo .m {display: block;}
.header .logo .m img {height: 25px;} .header .logo .m img {height: 25px;}

57
egovframe-template-simple-react-contribution/src/pages/standardCode/list/DownloadModal.jsx
View File

@ -3,6 +3,8 @@ import {Button, Modal, Nav} from "react-bootstrap";
import Col from "react-bootstrap/Col"; import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row"; import Row from "react-bootstrap/Row";
import * as EgovNet from "api/egovFetch"; import * as EgovNet from "api/egovFetch";
import URL from "constants/url";
import {Link} from "react-router-dom";
function DownloadModal({closeFn}){ function DownloadModal({closeFn}){
@ -33,22 +35,40 @@ function DownloadModal({closeFn}){
<Modal.Title id="example-modal-sizes-title-lg">통합다운로드</Modal.Title> <Modal.Title id="example-modal-sizes-title-lg">통합다운로드</Modal.Title>
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body>
<Row className={"justify-content-start py-1 mx-1"}>
<Col xs={"auto px-1"}> <div className="condition bg-fa">
<div className={`tab ${tab === 10 ? 'active' : ''}`} <ul className={"d-flex justify-content-start"}>
onClick={() => {setTab(10); setSubTabsVisible(false)}}>설계기준</div> <li className="col-auto">
</Col> <div className={`tab ${tab === 10 ? 'active' : ''}`}
<Col xs={"auto px-1"}> onClick={() => {setTab(10); setSubTabsVisible(false)}}>설계기준</div>
<div className={`tab ${tab === 20 ? 'active' : ''}`} </li>
onClick={() => {setTab(20); setSubTabsVisible(false)}}>표준시방서</div> <li className="col-auto">
</Col> <div className={`tab ${tab === 20 ? 'active' : ''}`}
<Col xs={"auto px-1"}> onClick={() => {setTab(20); setSubTabsVisible(false)}}>표준시방서</div>
<div className={`tab ${[40, 50, 60, 70, 80, 90].includes(tab) ? 'active' : ''}`} </li>
onClick={() => {setTab(40); setSubTabsVisible(true)}}>전문시방서</div> <li className="col-auto">
</Col> <div className={`tab ${[40, 50, 60, 70, 80, 90].includes(tab) ? 'active' : ''}`}
</Row> onClick={() => {setTab(40); setSubTabsVisible(true)}}>전문시방서</div>
</li>
</ul>
</div>
{/*<Row className={"justify-content-start py-1 mx-1"}>*/}
{/* <Col xs={"auto px-1"}>*/}
{/* <div className={`tab ${tab === 10 ? 'active' : ''}`}*/}
{/* onClick={() => {setTab(10); setSubTabsVisible(false)}}>설계기준</div>*/}
{/* </Col>*/}
{/* <Col xs={"auto px-1"}>*/}
{/* <div className={`tab ${tab === 20 ? 'active' : ''}`}*/}
{/* onClick={() => {setTab(20); setSubTabsVisible(false)}}>표준시방서</div>*/}
{/* </Col>*/}
{/* <Col xs={"auto px-1"}>*/}
{/* <div className={`tab ${[40, 50, 60, 70, 80, 90].includes(tab) ? 'active' : ''}`}*/}
{/* onClick={() => {setTab(40); setSubTabsVisible(true)}}>전문시방서</div>*/}
{/* </Col>*/}
{/*</Row>*/}
{subTabsVisible && ( {subTabsVisible && (
<Nav className={"tabs"} variant={"tabs"} > <Nav className={"tabs mt-2 text-4c6"} variant={"tabs"} >
<Nav.Item><Nav.Link className={`${tab === 40 ? 'active' : ''}`} onClick={() => {setTab(40)}}>서울특별시</Nav.Link></Nav.Item> <Nav.Item><Nav.Link className={`${tab === 40 ? 'active' : ''}`} onClick={() => {setTab(40)}}>서울특별시</Nav.Link></Nav.Item>
<Nav.Item><Nav.Link className={`${tab === 50 ? 'active' : ''}`} onClick={() => {setTab(50)}}>고속도로공사</Nav.Link></Nav.Item> <Nav.Item><Nav.Link className={`${tab === 50 ? 'active' : ''}`} onClick={() => {setTab(50)}}>고속도로공사</Nav.Link></Nav.Item>
<Nav.Item><Nav.Link className={`${tab === 60 ? 'active' : ''}`} onClick={() => {setTab(60)}}>한국농어촌공사</Nav.Link></Nav.Item> <Nav.Item><Nav.Link className={`${tab === 60 ? 'active' : ''}`} onClick={() => {setTab(60)}}>한국농어촌공사</Nav.Link></Nav.Item>
@ -57,7 +77,7 @@ function DownloadModal({closeFn}){
<Nav.Item><Nav.Link className={`${tab === 90 ? 'active' : ''}`} onClick={() => {setTab(90)}}>K-Water</Nav.Link></Nav.Item> <Nav.Item><Nav.Link className={`${tab === 90 ? 'active' : ''}`} onClick={() => {setTab(90)}}>K-Water</Nav.Link></Nav.Item>
</Nav> </Nav>
)} )}
<div className="board_list standard_code_modal download_list"> <div className="board_list BRD022 download_list"> {/*standard_code_modal */}
<div className="head"> <div className="head">
<span>구분</span> <span>구분</span>
<span>코드</span> <span>코드</span>
@ -72,7 +92,8 @@ function DownloadModal({closeFn}){
<div className="mainCategory">{item.groupNm}</div> <div className="mainCategory">{item.groupNm}</div>
<div className="middleCategory">{item.groupCurCd}</div> <div className="middleCategory">{item.groupCurCd}</div>
<div className="kcscCd"> <div className="kcscCd">
<Button size={"sm"} variant={"outline-secondary"}>다운로드</Button> {/*<Button size={"sm"} variant={"outline-secondary"}>다운로드</Button>*/}
<Link to=""><img src={"/assets/images/down.png"} className={"h_20"} /></Link>
</div> </div>
</div> </div>
) )
@ -80,7 +101,7 @@ function DownloadModal({closeFn}){
</div> </div>
</div> </div>
</Modal.Body> </Modal.Body>
<Modal.Footer><Button onClick={closeFn}>닫기</Button></Modal.Footer> {/*<Modal.Footer><Button onClick={closeFn}>닫기</Button></Modal.Footer>*/}
</> </>
) )
} }

2
egovframe-template-simple-react-contribution/src/pages/standardCode/list/FavoriteIcon.jsx
View File

@ -38,7 +38,7 @@ function FavoriteIcon({item}){
alert("로그인 후 이용 가능한 서비스 입니다.") alert("로그인 후 이용 가능한 서비스 입니다.")
} }
}}> }}>
<AiFillStar color={favoriteChk?'#FFC000':''}/> <AiFillStar color={favoriteChk?'#FFC000':''} size={25} />
</div> </div>
); );
} }

14
egovframe-template-simple-react-contribution/src/pages/standardCode/list/HistoryModal.jsx
View File

@ -1,4 +1,6 @@
import React from "react"; import React from "react";
import {Link} from "react-router-dom";
import * as File from "utils/file" import * as File from "utils/file"
import {Button, Modal, Nav} from "react-bootstrap"; import {Button, Modal, Nav} from "react-bootstrap";
@ -11,7 +13,7 @@ function HistoryModal({closeFn, standardCode}){
</Modal.Header> </Modal.Header>
<Modal.Body> <Modal.Body>
<div>코드 : {standardCode.kcscCd}</div> <div>코드 : {standardCode.kcscCd}</div>
<div className="board_list standard_code_modal"> <div className="board_list BRD022">
<div className="head"> <div className="head">
<span>고시일</span> <span>고시일</span>
<span>기준코드</span> <span>기준코드</span>
@ -25,12 +27,12 @@ function HistoryModal({closeFn, standardCode}){
<div className="list_item"> <div className="list_item">
<div className="mainCategory">{history.rvsnYmd.split('T')[0]}</div> <div className="mainCategory">{history.rvsnYmd.split('T')[0]}</div>
<div className="middleCategory"> <div className="middleCategory">
{history.docFileGrpId} {/*{history.docFileGrpId}*/}
{history.docFileGrpId?<Button size={"sm"} variant={"outline-secondary"} onClick={()=>File.standardCode(history.docFileGrpId)}>다운로드 </Button>:''} {history.docFileGrpId?<Link to={""} onClick={()=>File.standardCode(history.docFileGrpId)}><img src={"/assets/images/down.png"} className={"h_20"} /> </Link>:''}
</div> </div>
<div className="kcscCd"> <div className="kcscCd">
{history.rvsnFileGrpId} {/*{history.rvsnFileGrpId}*/}
{history.rvsnFileGrpId?<Button size={"sm"} variant={"outline-secondary"} onClick={()=>File.download(history.rvsnFileGrpId)}>다운로드 </Button>:''} {history.rvsnFileGrpId?<Link to={""} onClick={()=>File.download(history.rvsnFileGrpId)}><img src={"/assets/images/down.png"} className={"h_20"} /> </Link>:''}
</div> </div>
</div> </div>
) )
@ -38,7 +40,7 @@ function HistoryModal({closeFn, standardCode}){
</div> </div>
</div> </div>
</Modal.Body> </Modal.Body>
<Modal.Footer><Button onClick={closeFn}>닫기</Button></Modal.Footer> {/*<Modal.Footer><Button onClick={closeFn}>닫기</Button></Modal.Footer>*/}
</> </>
) )
} }

53
egovframe-template-simple-react-contribution/src/pages/standardCode/list/StandardCodeList.jsx
View File

@ -1,17 +1,19 @@
import React from 'react'; import React from 'react';
import {Link} from 'react-router-dom';
import Col from "react-bootstrap/Col"; import Col from "react-bootstrap/Col";
import Row from "react-bootstrap/Row"; import Row from "react-bootstrap/Row";
import FavoriteIcon from "./FavoriteIcon"; import FavoriteIcon from "./FavoriteIcon";
import Button from "react-bootstrap/Button"; import Button from "react-bootstrap/Button";
function StandardCodeList({listData, filterData, getHistoryModal}) { function StandardCodeList({listData, filterData, getHistoryModal, isDetailSearchOpen}) {
function historyBtn(item){ function historyBtn(item){
getHistoryModal(item); getHistoryModal(item);
} }
return ( return (
<div className={"result standard_code_result"}> <div className={isDetailSearchOpen ? 'result standard_code_result_detail' : 'result standard_code_result'}>
{listData.filter(item => { {listData.filter(item => {
if (item.groupNm.includes(filterData)) { if (item.groupNm.includes(filterData)) {
return item return item
@ -19,15 +21,12 @@ function StandardCodeList({listData, filterData, getHistoryModal}) {
return null return null
}).map(item => { }).map(item => {
return ( return (
<div className="list_item List_Codes"> <div className="list_item2 List_Codes">
<div className="kcscCd">{item.kcscCd}</div>
<div className="groupNm">{item.groupNm}<br /><span className={"text-danger f_12 pt-0"}>{item.rvsnRemark}</span></div>
<div className="mainCategory">{item.mainCategory}</div> <div className="mainCategory">{item.mainCategory}</div>
<div className="middleCategory">{item.middleCategory}</div> <div className="middleCategory">{item.middleCategory}</div>
<div className="kcscCd">{item.kcscCd}</div> <div className="">
<div className="groupNm">{item.groupNm}<br/><span className={"text-danger"}>{item.rvsnRemark}</span></div>
<div className="Revisionhistory">
<Button size={"sm"} variant={"outline-secondary"} onClick={()=>{historyBtn(item)}}>개정 이력</Button>
</div>
<div className="fille">
<Row className={"justify-content-start"}> <Row className={"justify-content-start"}>
{item.historyList.filter(history => { {item.historyList.filter(history => {
return history; return history;
@ -39,25 +38,43 @@ function StandardCodeList({listData, filterData, getHistoryModal}) {
}else{ }else{
buttonClass += "btn-primary " buttonClass += "btn-primary "
} }
const handleClick = () => {
const rvsnYmd = new Date(history.rvsnYmd);
rvsnYmd.setHours(rvsnYmd.getHours() + 9);
window.open("/standardCode/viewer/" + history.kcscCd + ":" + rvsnYmd.toISOString().split('T')[0]);
};
return ( return (
<Col xs={"auto"} className={"px-1"}> <Col xs={"auto"} className={"px-1"}>
<input type="button" {/*<input type="button"*/}
className={buttonClass} {/* className={buttonClass}*/}
value={history.docEr==='E'?'제':'개'} {/* value={history.docEr==='E'?'제':'개'}*/}
onClick={()=>{ {/* onClick={()=>{*/}
const rvsnYmd = new Date(history.rvsnYmd) {/* const rvsnYmd = new Date(history.rvsnYmd)*/}
rvsnYmd.setHours(rvsnYmd.getHours()+9) {/* rvsnYmd.setHours(rvsnYmd.getHours()+9)*/}
window.open("/standardCode/viewer/"+history.kcscCd+":"+rvsnYmd.toISOString().split('T')[0]); {/* window.open("/standardCode/viewer/"+history.kcscCd+":"+rvsnYmd.toISOString().split('T')[0]);*/}
}} {/* }}*/}
{/*/>*/}
<Link to="" onClick={handleClick}>
<img
src={history.docEr === 'E' ? '/assets/images/je.png' : '/assets/images/ge.png'}
alt={history.docEr === 'E' ? '제' : '개'}
className={"h_20"}
/> />
<br/> <br/>
<p className={pClass}>{history.docYr}</p> <p className={pClass}>{history.docYr}</p>
</Link>
</Col> </Col>
) )
})} })}
</Row> </Row>
</div> </div>
<FavoriteIcon item={item}/> <div className="Revisionhistory">
{/*<Button size={"sm"} variant={"outline-secondary"} onClick={()=>{historyBtn(item)}}>개정 이력</Button>*/}
<Link to="" onClick={()=>{historyBtn(item)}}><img src={"/assets/images/down.png"} className={"h_20"} /></Link>
</div>
<FavoriteIcon item={item} />
</div> </div>
) )
})} })}

44
egovframe-template-simple-react-contribution/src/pages/standardCode/list/StandardCodePage.jsx
View File

@ -18,6 +18,7 @@ function StandardCodePage({}) {
const [resultCnt, setResultCnt] = useState(0); const [resultCnt, setResultCnt] = useState(0);
const [remarkCnt, setRemarkCnt] = useState(0); const [remarkCnt, setRemarkCnt] = useState(0);
const [modalContent, setModalContent] = useState([]); const [modalContent, setModalContent] = useState([]);
const [isDetailSearchOpen, setIsDetailSearchOpen] = useState(false);
const [show, setShow] = useState(false); const [show, setShow] = useState(false);
function close() { function close() {
@ -56,39 +57,34 @@ function StandardCodePage({}) {
setModalContent(<HistoryModal closeFn={close} standardCode={item}/>) setModalContent(<HistoryModal closeFn={close} standardCode={item}/>)
} }
const toggleDetailSearch = () => {
setIsDetailSearchOpen(prevState => !prevState);
};
return ( return (
<div className=""> <div className="">
<div className="c_wrap"> <div className="c_wrap">
{/*<div className="location">
<ul>
<li><Link to={URL.MAIN} className="home">Home</Link></li>
<li>건설기준코드</li>
<li><Link to={URL.STANDARD_CODE_LIST} >건설기준코드 검색</Link></li>
</ul>
</div>*/}
<div className="layout"> <div className="layout">
<div className="contents NOTICE_LIST" id="contents"> {/*<div className="contents NOTICE_LIST" id="contents">*/}
{/*<div className="top_tit"> {/* <div className="StandardCodeList container">*/}
<h1 className="tit_1">건설기준코드 검색</h1> {/* <div className="c_wrap codeListContent">*/}
</div>*/} {/* <div className="layout">*/}
<div className="StandardCodeList container">
<div className="c_wrap codeListContent">
<div className="layout">
<div className="contents NOTICE_LIST listTableDiv"> <div className="contents NOTICE_LIST listTableDiv">
<StandardCodeSearchForm param={listCode?listCode:'10'} reloadFunction={retrieveList} resultCnt={resultCnt} remarkCnt={remarkCnt} downloadModal={downloadModal}/> <StandardCodeSearchForm param={listCode?listCode:'10'} reloadFunction={retrieveList} resultCnt={resultCnt} remarkCnt={remarkCnt} downloadModal={downloadModal}
<div className="board_list code_list"> toggleDetailSearch={toggleDetailSearch} isDetailSearchOpen={isDetailSearchOpen}/>
<div className="board_list BRD021"> {/*code_list*/}
<div className="head"> <div className="head">
<span>대분류</span>
<span>중분류</span>
<span>코드번호</span> <span>코드번호</span>
<span>코드명</span> <span>코드명</span>
<span>대분류</span>
<span>중분류</span>
<span>개정이력</span> <span>개정이력</span>
<span className={"text-start"}>보기</span> <span>다운로드</span>
<span>즐겨찾기</span> <span>즐겨찾기</span>
</div> </div>
{ {
listLoading?(<Loading loadingState={true}/>):( listLoading?(<Loading loadingState={true}/>):(
<StandardCodeList listData={listData} filterData={filterData} getHistoryModal={historyModal}/> <StandardCodeList listData={listData} filterData={filterData} getHistoryModal={historyModal} isDetailSearchOpen={isDetailSearchOpen} />
) )
} }
</div> </div>
@ -96,10 +92,10 @@ function StandardCodePage({}) {
{modalContent} {modalContent}
</Modal> </Modal>
</div> </div>
</div> {/* </div>*/}
</div> {/* </div>*/}
</div> {/* </div>*/}
</div> {/*</div>*/}
</div> </div>
</div> </div>
</div> </div>

248
egovframe-template-simple-react-contribution/src/pages/standardCode/list/StandardCodeSearchForm.jsx
View File

@ -1,12 +1,15 @@
import React, {useEffect, useState} from "react"; import React, {useEffect, useState, memo} from "react";
import {Link} from "react-router-dom";
import URL from "constants/url";
import {Nav} from "react-bootstrap"; import {Nav} from "react-bootstrap";
import Row from "react-bootstrap/Row"; import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col"; import Col from "react-bootstrap/Col";
import {Link} from "react-router-dom";
import Button from "react-bootstrap/Button"; import Button from "react-bootstrap/Button";
import * as EgovNet from "../../../api/egovFetch";
function StandardCodeSearchForm({param, reloadFunction, resultCnt, remarkCnt, downloadModal}){ import * as EgovNet from "api/egovFetch";
function StandardCodeSearchForm({param, reloadFunction, resultCnt, remarkCnt, downloadModal, toggleDetailSearch, isDetailSearchOpen}){
const [searchCondition, setSearchCondition] = useState({ const [searchCondition, setSearchCondition] = useState({
tab: Number(param?.substring(0, 2)), tab: Number(param?.substring(0, 2)),
@ -53,7 +56,7 @@ function StandardCodeSearchForm({param, reloadFunction, resultCnt, remarkCnt, do
getSelectBoxOption(groupCd, (resp)=>{ getSelectBoxOption(groupCd, (resp)=>{
const options = []; const options = [];
resp.result.groupList.forEach(function (item, index){ resp.result.groupList.forEach(function (item, index){
options.push(<option value={item.groupCurCd}>{item.groupNm}</option>) options.push(<option key={item.groupCurCd} value={item.groupCurCd}>{item.groupNm}</option>)
}) })
setCat1SelectOption(options) setCat1SelectOption(options)
}) })
@ -65,7 +68,7 @@ function StandardCodeSearchForm({param, reloadFunction, resultCnt, remarkCnt, do
getSelectBoxOption(groupCd, (resp)=>{ getSelectBoxOption(groupCd, (resp)=>{
const options = []; const options = [];
resp.result.groupList.forEach(function (item, index){ resp.result.groupList.forEach(function (item, index){
options.push(<option value={item.groupCurCd}>{item.groupNm}</option>) options.push(<option key={item.groupCurCd} value={item.groupCurCd}>{item.groupNm}</option>)
}) })
setCat2SelectOption(options) setCat2SelectOption(options)
}) })
@ -77,88 +80,199 @@ function StandardCodeSearchForm({param, reloadFunction, resultCnt, remarkCnt, do
getSelectBoxOption(groupCd, (resp)=>{ getSelectBoxOption(groupCd, (resp)=>{
const options = []; const options = [];
resp.result.groupList.forEach(function (item, index){ resp.result.groupList.forEach(function (item, index){
options.push(<option value={item.groupCurCd}>{item.groupNm}</option>) options.push(<option key={item.groupCurCd} value={item.groupCurCd}>{item.groupNm}</option>)
}) })
setCat3SelectOption(options) setCat3SelectOption(options)
}) })
}, [searchCondition.category2]); }, [searchCondition.category2]);
//상세검색 토글관련
const handleSearch = () => {
reloadFunction({ param });
if (isDetailSearchOpen) {
toggleDetailSearch();
}
};
return ( return (
<> <>
<div className="condition"> {/* <!-- 검색조건 --> */}
<ul> <div className="condition my-2 bg-fa">
<li className="third_1 L"> <ul className={"d-flex justify-content-between"}>
<div className={`tab ${searchCondition.tab === 10 ? 'active' : ''}`} <li className="col-auto">
onClick={() => {setSearchCondition({...searchCondition, tab: 10})}}>설계기준</div> <Button type="button" variant={"outline-22498E"} className="px-4" onClick={downloadModal}>통합다운로드</Button>
</li> </li>
<li className="third_1 L"> <li className="col-auto">
<div className={`tab ${searchCondition.tab === 20 ? 'active' : ''}`} <Button type="button" variant={"outline-22498E"} className="px-4" href={URL.STANDARD_CODE_INFO}>건설기준코드 안내</Button>
onClick={() => {setSearchCondition({...searchCondition, tab: 20})}}>표준시방서</div>
</li> </li>
<li className="third_1 L"> <li className="w-100">
<div className={`tab ${[40, 50, 60, 70, 80, 90].includes(searchCondition.tab) ? 'active' : ''}`}
onClick={() => {setSearchCondition({...searchCondition, tab: 40})}}>전문시방서</div>
</li> </li>
<li className="third_1 L"> {/*<li className="col-auto">*/}
<label className="f_select" htmlFor="sel1"> {/* <input type="text" name="" placeholder="검색어를 입력해 주세요." className="form-control shadow-none rounded-2" />*/}
<select id="sel1" title="조건" value={searchCondition.category1} {/*</li>*/}
onChange={(e)=>{setSearchCondition({...searchCondition, category1: e.target.value})}}> {/*<li className="col-auto">*/}
<option value="">전체</option> {/* <Button type="button" className="btn btn-22498E px-4" onClick={handleSearch}>검색</Button>*/}
{cat1SelectOption} {/*</li>*/}
</select> <li className="col-auto d-flex align-items-center">
</label>
</li>
<li className="third_1 L">
<label className="f_select w_306" htmlFor="sel1">
<select id="sel2" title="조건" value={searchCondition.category2}
onChange={(e)=>{setSearchCondition({...searchCondition, category2: e.target.value})}}>
<option value="">전체</option>
{cat2SelectOption}
</select>
</label>
</li>
<li className="third_1 L">
<label className="f_select w_306" htmlFor="sel1">
<select id="sel3" title="조건" value={searchCondition.category3}
onChange={(e)=>{setSearchCondition({...searchCondition, category3: e.target.value})}}>
<option value="">전체</option>
{cat3SelectOption}
</select>
</label>
</li>
<li className="third_1 L">
{remarkCnt?( {remarkCnt?(
<span>전체 {resultCnt} / <span className={"text-danger"}>{remarkCnt}</span> 건</span> <span>전체 {resultCnt} / <span className={"text-danger"}>{remarkCnt}</span> 건</span>
):( ):(
<span>전체 {resultCnt} 건</span> <span>전체 {resultCnt} 건</span>
)} )}
</li> </li>
<li className="third_1 L"> <li className="col-auto">
<div className={`tab`} onClick={downloadModal}>통합 다운로드</div> <Button type="button" variant={"outline-22498E"} className="px-4" onClick={toggleDetailSearch}>상세검색 {isDetailSearchOpen ? '∧' : '∨'}</Button>
</li> </li>
</ul> </ul>
</div> </div>
<Row className={"justify-content-between"}> {/* <!--// 검색조건 --> */}
<Col>
{subTabsVisible && ( {isDetailSearchOpen && (
<Nav className={"tabs"} variant={"tabs"} > <div className="detail-search">
<Nav.Item><Nav.Link className={`${searchCondition.tab === 40 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 40})}}>서울특별시</Nav.Link></Nav.Item> {/* 상세 검색 조건을 여기에 추가 */}
<Nav.Item><Nav.Link className={`${searchCondition.tab === 50 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 50})}}>고속도로공사</Nav.Link></Nav.Item> <div className="board_view2">
<Nav.Item><Nav.Link className={`${searchCondition.tab === 60 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 60})}}>한국농어촌공사</Nav.Link></Nav.Item> <dl className={"bg-f8f border-bottom"}>
<Nav.Item><Nav.Link className={`${searchCondition.tab === 70 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 70})}}>철도건설공사</Nav.Link></Nav.Item> <dd>
<Nav.Item><Nav.Link className={`${searchCondition.tab === 80 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 80})}}>LH한국토지주택공사</Nav.Link></Nav.Item> <Row>
<Nav.Item><Nav.Link className={`${searchCondition.tab === 90 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 90})}}>K-Water</Nav.Link></Nav.Item> <Col xs={"auto"} className={"d-flex align-items-center"}><Button type={"button"} variant={"outline-secondary"} className={"w_20 h_20 px-0 pt-0 me-2 f_12 rounded-0"}>X</Button>설계기준(KDS)</Col>
</Nav> <Col xs={"auto"} className={"d-flex align-items-center"}><Button type={"button"} variant={"outline-secondary"} className={"w_20 h_20 px-0 pt-0 me-2 f_12 rounded-0"}>X</Button>설계기준(KDS)</Col>
)} <Col xs={"auto"} className={"d-flex align-items-center"}><Button type={"button"} variant={"outline-secondary"} className={"w_20 h_20 px-0 pt-0 me-2 f_12 rounded-0"}>X</Button>설계기준(KDS)</Col>
</Col> <Col xs={"auto"} className={"d-flex align-items-center"}><Button type={"button"} variant={"outline-secondary"} className={"w_20 h_20 px-0 pt-0 me-2 f_12 rounded-0"}>X</Button>설계기준(KDS)</Col>
<Col xs={"auto"}> </Row>
<Button href={"/standardCode/info"} size={"sm"} variant={"secondary"}>건설기준코드 안내</Button> </dd>
</Col> </dl>
</Row> <dl>
<dt>건설기준</dt>
<dd>
<input type={"checkbox"} name={"chk1"} id={"chk1"} className={"form-check-inline me-1"} /> <label className="pe-3" htmlFor="chk1">설계기준(KDS)</label>
<input type={"checkbox"} name={"chk2"} id={"chk2"} className={"form-check-inline me-1"} /> <label className="pe-3" htmlFor="chk2">표준시방서(KCS)</label>
</dd>
</dl>
<dl>
<dt>전문시방서</dt>
<dd>
<input type={"checkbox"} name={"chk3"} id={"chk3"} className={"form-check-inline me-1"} /> <label className="pe-3" htmlFor="chk3">서울시(SMCS)</label>
<input type={"checkbox"} name={"chk4"} id={"chk4"} className={"form-check-inline me-1"} /> <label className="pe-3" htmlFor="chk4">고속도로공사(EXCS)</label>
<input type={"checkbox"} name={"chk5"} id={"chk5"} className={"form-check-inline me-1"} /> <label className="pe-3" htmlFor="chk5">농업생산기반시설(KRCCS)</label>
<input type={"checkbox"} name={"chk6"} id={"chk6"} className={"form-check-inline me-1"} /> <label className="pe-3" htmlFor="chk6">철도건설공사(KRACS)</label>
<input type={"checkbox"} name={"chk7"} id={"chk7"} className={"form-check-inline me-1"} /> <label className="pe-3" htmlFor="chk7">LH 한국토지주택공사(LHCS)</label>
<input type={"checkbox"} name={"chk8"} id={"chk8"} className={"form-check-inline me-1"} /> <label className="pe-3" htmlFor="chk8">K-water(KWCS)</label>
</dd>
</dl>
<dl>
<dt>카테고리</dt>
<dd>
<label className="pe-3" htmlFor="sel1">
<select className={"form-select form-select-sm shadow-none"} id="sel1" title="조건" value={searchCondition.category1}
onChange={(e)=>{setSearchCondition({...searchCondition, category1: e.target.value})}}>
<option value="">전체</option>
{cat1SelectOption}
</select>
</label>
<label className="pe-3" htmlFor="sel1">
<select className={"form-select form-select-sm shadow-none"} id="sel2" title="조건" value={searchCondition.category2}
onChange={(e)=>{setSearchCondition({...searchCondition, category2: e.target.value})}}>
<option value="">전체</option>
{cat2SelectOption}
</select>
</label>
<label className="pe-3" htmlFor="sel1">
<select className={"form-select form-select-sm shadow-none"} id="sel3" title="조건" value={searchCondition.category3}
onChange={(e)=>{setSearchCondition({...searchCondition, category3: e.target.value})}}>
<option value="">전체</option>
{cat3SelectOption}
</select>
</label>
</dd>
</dl>
<dl>
<dt>검색어</dt>
<dd>
<input type="text" name="" placeholder="검색어를 입력해 주세요." className="form-control shadow-none rounded-2" />
</dd>
</dl>
</div>
<div className="text-center w-100 py-3">
<Button type="button" variant={"secondary"} className="px-4 me-3">초기화</Button>
<Button type="button" variant={"22498E"} className="px-4">상세검색</Button>
</div>
</div>
)}
{/*<div className="condition">*/}
{/* <ul>*/}
{/* <li className="third_1 L">*/}
{/* <div className={`tab ${searchCondition.tab === 10 ? 'active' : ''}`}*/}
{/* onClick={() => {setSearchCondition({...searchCondition, tab: 10})}}>설계기준</div>*/}
{/* </li>*/}
{/* <li className="third_1 L">*/}
{/* <div className={`tab ${searchCondition.tab === 20 ? 'active' : ''}`}*/}
{/* onClick={() => {setSearchCondition({...searchCondition, tab: 20})}}>표준시방서</div>*/}
{/* </li>*/}
{/* <li className="third_1 L">*/}
{/* <div className={`tab ${[40, 50, 60, 70, 80, 90].includes(searchCondition.tab) ? 'active' : ''}`}*/}
{/* onClick={() => {setSearchCondition({...searchCondition, tab: 40})}}>전문시방서</div>*/}
{/* </li>*/}
{/* <li className="third_1 L">*/}
{/* <label className="f_select" htmlFor="sel1">*/}
{/* <select id="sel1" title="조건" value={searchCondition.category1}*/}
{/* onChange={(e)=>{setSearchCondition({...searchCondition, category1: e.target.value})}}>*/}
{/* <option value="">전체</option>*/}
{/* {cat1SelectOption}*/}
{/* </select>*/}
{/* </label>*/}
{/* </li>*/}
{/* <li className="third_1 L">*/}
{/* <label className="f_select w_306" htmlFor="sel1">*/}
{/* <select id="sel2" title="조건" value={searchCondition.category2}*/}
{/* onChange={(e)=>{setSearchCondition({...searchCondition, category2: e.target.value})}}>*/}
{/* <option value="">전체</option>*/}
{/* {cat2SelectOption}*/}
{/* </select>*/}
{/* </label>*/}
{/* </li>*/}
{/* <li className="third_1 L">*/}
{/* <label className="f_select w_306" htmlFor="sel1">*/}
{/* <select id="sel3" title="조건" value={searchCondition.category3}*/}
{/* onChange={(e)=>{setSearchCondition({...searchCondition, category3: e.target.value})}}>*/}
{/* <option value="">전체</option>*/}
{/* {cat3SelectOption}*/}
{/* </select>*/}
{/* </label>*/}
{/* </li>*/}
{/* <li className="third_1 L">*/}
{/* {remarkCnt?(*/}
{/* <span>전체 {resultCnt} / <span className={"text-danger"}>{remarkCnt}</span> 건</span>*/}
{/* ):(*/}
{/* <span>전체 {resultCnt} 건</span>*/}
{/* )}*/}
{/* </li>*/}
{/* <li className="third_1 L">*/}
{/* <div className={`tab`} onClick={downloadModal}>통합 다운로드</div>*/}
{/* </li>*/}
{/* </ul>*/}
{/*</div>*/}
{/*<Row className={"justify-content-between"}>*/}
{/* <Col>*/}
{/* {subTabsVisible && (*/}
{/* <Nav className={"tabs"} variant={"tabs"} >*/}
{/* <Nav.Item><Nav.Link className={`${searchCondition.tab === 40 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 40})}}>서울특별시</Nav.Link></Nav.Item>*/}
{/* <Nav.Item><Nav.Link className={`${searchCondition.tab === 50 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 50})}}>고속도로공사</Nav.Link></Nav.Item>*/}
{/* <Nav.Item><Nav.Link className={`${searchCondition.tab === 60 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 60})}}>한국농어촌공사</Nav.Link></Nav.Item>*/}
{/* <Nav.Item><Nav.Link className={`${searchCondition.tab === 70 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 70})}}>철도건설공사</Nav.Link></Nav.Item>*/}
{/* <Nav.Item><Nav.Link className={`${searchCondition.tab === 80 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 80})}}>LH한국토지주택공사</Nav.Link></Nav.Item>*/}
{/* <Nav.Item><Nav.Link className={`${searchCondition.tab === 90 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 90})}}>K-Water</Nav.Link></Nav.Item>*/}
{/* </Nav>*/}
{/* )}*/}
{/* </Col>*/}
{/* <Col xs={"auto"}>*/}
{/* <Button href={"/standardCode/info"} size={"sm"} variant={"secondary"}>건설기준코드 안내</Button>*/}
{/* </Col>*/}
{/*</Row>*/}
</> </>
); );
} }
export default StandardCodeSearchForm; export default memo(StandardCodeSearchForm);;