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

import React, {useEffect, useState} from "react";

function StandardCodeSearchForm({param, reloadFunction}){

    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">
                        <div className={`tab`}>통합 다운로드</div>
                    </li>
                </ul>
            </div>
            {subTabsVisible && (
                <div className="right_col">
                    <div className="mini_board">
                        <ul>
                            <div className={`tab ${searchCondition.tab === 40 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 40})}}>서울특별시</div>
                            <div className={`tab ${searchCondition.tab === 50 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 50})}}>고속도로공사</div>
                            <div className={`tab ${searchCondition.tab === 60 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 60})}}>한국농어촌공사</div>
                            <div className={`tab ${searchCondition.tab === 70 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 70})}}>철도건설공사</div>
                            <div className={`tab ${searchCondition.tab === 80 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 80})}}>LH한국토지주택공사</div>
                            <div className={`tab ${searchCondition.tab === 90 ? 'active' : ''}`} onClick={() => {setSearchCondition({...searchCondition, tab: 90})}}>K-Water</div>
                        </ul>
                    </div>
                </div>
            )}
        </>
    );
}

export default StandardCodeSearchForm;