kcscDev/egovframe-template-simple-react-contribution/src/pages/standardCode/list/StandardCodeSearchForm.jsx

import React, {useEffect, useState} from "react";
import {Nav} from "react-bootstrap";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import {Link} from "react-router-dom";
import Button from "react-bootstrap/Button";

function StandardCodeSearchForm({param, reloadFunction, resultCnt, remarkCnt}){

    const [searchCondition, setSearchCondition] = useState({
        pageIndex: 1,
        tab: Number(param?.substring(0, 2)),
        category1: param?.substring(2, 4),
        category2: param?.substring(4, 6),
        searchWrd: ''
    });
    const [subTabsVisible, setSubTabsVisible] = useState(false);

    useEffect(() => {
        if(searchCondition.tab){
            if(searchCondition.tab !== 10 && searchCondition.tab !== 20){
                setSubTabsVisible(true)
            }else{
                setSubTabsVisible(false)
            }
        }
        reloadFunction(searchCondition)
    }, [searchCondition]);

    return (
        <>
            <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}>
                                <option value="">전체</option>

                            </select>
                        </label>
                    </li>
                    <li className="third_1 L">
                        <label className="f_select w_306" htmlFor="sel1">
                            <select id="sel2" title="조건" value={searchCondition.category2}>
                                <option value="">전체</option>
                            </select>
                        </label>
                    </li>
                    <li className="third_1 L">
                        <label className="f_select w_306" htmlFor="sel1">
                            <select id="sel3" title="조건" value={searchCondition.category3} >
                                <option value="">전체</option>
                            </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`}>통합 다운로드</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;