HANYANG_REACT/www/ksvc/component/Header.js

60 lines
2.0 KiB
JavaScript

const Header = ({req}) =>{
return (
<div className="inner-container">
<div className="search-container">
{req.searchReq.map(s=>{
switch(s.type){
case "text":
return (
<div className="input-container flexcol gap06">
<div className="input-box">
<input type={s.type} id={s.id} placeholder={s.placeholder}></input>
</div>
</div>
);
case "checkbox":
return (
<div class="input-container flexrow checkbox-container">
<label for={s.id}>{s.label}</label>
<div class="input-box">
<input type={s.type} id={s.id} checked={s.checked}></input>
</div>
</div>
)
case "select":
return (
<div class="input-container flexcol gap06">
<div class="input-box">
<select name={s.id} id={s.id}>
<option value="">- 전체 -</option>
{s.option.map(op=>(
<option value={op.value}>{op.text}</option>
))}
</select>
</div>
</div>
)
}
})}
</div>
<div className="button-container">
<div className="button-box">
<button className="point-btn" id="excel_down">엑셀 양식 다운로드</button>
<input type="file" id="fileInput" hidden accept=".xlsx, .xls"></input>
<button className="point-btn" id="excel_data">엑셀 다운로드</button>
<button className="point-btn" id="excel_up">엑셀 업로드</button>
<button className="point-btn" id="filter_btn">조회</button>
<button className="point-btn" id="put_btn">저장</button>
</div>
</div>
</div>
);
};