
File name
Commit message
Commit date
2023-02-27
File name
Commit message
Commit date
2023-02-27
import { style } from "d3";
import React, { useState } from "react";
import Button from "./Button.jsx";
const CATEGORY_LIST = [
{ id: 0, data: "서울" },
{ id: 1, data: "인천" },
{ id: 2, data: "경기" },
{ id: 3, data: "경북" },
{ id: 4, data: "경남" },
{ id: 5, data: "전북" },
{ id: 6, data: "전남" },
{ id: 7, data: "제주" },
];
const CATEGORY_LIST1 = [
{ id: 0, data: "전체" },
{ id: 0, data: "광현리" },
{ id: 1, data: "금구리" },
{ id: 2, data: "내량리" },
{ id: 3, data: "대북리" },
{ id: 4, data: "대흥리" },
{ id: 5, data: "동부리" },
{ id: 6, data: "무성리" },
{ id: 7, data: "사직리" },
{ id: 8, data: "삽령리" },
{ id: 9, data: "상곡리" },
{ id: 10, data: "서부리" },
{ id: 11, data: "수서리" },
{ id: 12, data: "오곡리" },
{ id: 13, data: "외량리" },
{ id: 14, data: "용대리" },
{ id: 15, data: "정리" },
{ id: 15, data: "하곡리" },
];
const CATEGORY_LIST2 = [
{ id: 0, data: "전체" },
{ id: 0, data: "사리리" },
{ id: 1, data: "보현리" },
{ id: 2, data: "복성리" },
{ id: 3, data: "위성리" },
{ id: 4, data: "달산리" },
{ id: 5, data: "송원리" },
{ id: 6, data: "신계리" },
{ id: 7, data: "도산리" },
{ id: 8, data: "서경리" },
{ id: 9, data: "평호리" },
{ id: 10, data: "산법리" },
{ id: 11, data: "내의리" },
{ id: 12, data: "봉황리" },
{ id: 13, data: "봉소리" },
];
const CATEGORY_LIST3 = [
{ id: 0, data: "전체" },
{ id: 0, data: "노행리" },
{ id: 1, data: "오천리" },
{ id: 2, data: "성리" },
{ id: 3, data: "병수리" },
{ id: 4, data: "불로리" },
{ id: 5, data: "내리리" },
{ id: 6, data: "중구리" },
{ id: 7, data: "거매리" },
{ id: 8, data: "장군리" },
{ id: 9, data: "장기리" },
{ id: 10, data: "금매리" },
{ id: 11, data: "화계리" },
{ id: 12, data: "마시리" },
{ id: 13, data: "매곡리" },
{ id: 14, data: "고곡리" },
];
const CATEGORY_LIST4 = [
{ id: 0, data: "전체" },
{ id: 0, data: "창평리" },
{ id: 1, data: "가호리" },
{ id: 2, data: "춘산리" },
{ id: 3, data: "대율리" },
{ id: 4, data: "동산리" },
{ id: 5, data: "남산리" },
{ id: 6, data: "명산리" },
{ id: 7, data: "신화리" },
];
const CATEGORY_LIST5 = [
{ id: 0, data: "전체" },
{ id: 0, data: "나호리" },
{ id: 1, data: "이화리" },
{ id: 2, data: "두북리" },
{ id: 3, data: "선곡리" },
{ id: 4, data: "미성리" },
{ id: 5, data: "모산리" },
{ id: 6, data: "문덕리" },
{ id: 7, data: "달산리" },
{ id: 8, data: "봉산리" },
];
const CATEGORY_LIST6 = [
{ id: 0, data: "전체" },
{ id: 0, data: "읍내리" },
{ id: 1, data: "수북리" },
{ id: 2, data: "수서리" },
{ id: 3, data: "이지리" },
{ id: 4, data: "파전리" },
{ id: 5, data: "신덕리" },
{ id: 6, data: "지호리" },
{ id: 7, data: "연계리" },
{ id: 8, data: "매성리" },
{ id: 9, data: "원산리" },
{ id: 10, data: "금양리" },
];
const CATEGORY_LIST7 = [
{ id: 0, data: "전체" },
{ id: 0, data: "백학리" },
{ id: 1, data: "삼산리" },
{ id: 2, data: "봉림리" },
{ id: 3, data: "무암리" },
{ id: 4, data: "운산리" },
{ id: 5, data: "화본리" },
{ id: 6, data: "화전리" },
];
const CATEGORY_LIST8 = [
{ id: 0, data: "전체" },
{ id: 0, data: "화수리" },
{ id: 1, data: "화북리" },
{ id: 2, data: "괴산리" },
{ id: 3, data: "학성리" },
{ id: 4, data: "장곡리" },
{ id: 5, data: "인곡리" },
{ id: 6, data: "양지리" },
{ id: 7, data: "낙전리" },
{ id: 8, data: "가암리" },
{ id: 9, data: "석산리" },
{ id: 10, data: "학암리" },
];
const locations = [
{
id: "no1",
label: "군위읍",
list: CATEGORY_LIST1,
},
{
id: "no2",
label: "소보면",
list: CATEGORY_LIST2,
},
];
export default function DetailSearch({}) {
const [checkedList, setCheckedList] = useState([]);
const [selectArea, setSelectArea] = React.useState();
const onCheckedElement = (checked, item) => {
if (checked) {
setCheckedList([...checkedList, item]);
} else if (!checked) {
setCheckedList(checkedList.filter((el) => el !== item));
}
};
const onRemove = (item) => {
setCheckedList(checkedList.filter((el) => el !== item));
};
const categories = locations.map((location) => (
<li>
<label htmlFor={location.id}>{location.label}</label>
<input type="radio" name="location" id={location.id} />
<div className="area-list flex">
<ul className="flex">
{location.list.map((item) => (
<li className="flex-start">
<input
type="checkbox"
className="checkCon"
id={item.id}
value={item.data}
onChange={(e) => {
onCheckedElement(e.target.checked, e.target.value);
}}
checked={checkedList.includes(item.data) ? true : false}
/>
<label htmlFor={item.id}>{item.data}</label>
</li>
))}
</ul>
</div>
</li>
));
return (
<div className="search-group">
<div className="search-area flex" style={{ width:"50%"}}>
<div className="detail-search" style={{ width:"85%"}}>
<table>
<tbody>
<tr>
<th>기관명 검색</th>
<td colSpan={3}>
<div className="flex">
<select name="" id="">
<option value="">전체</option>
<option value="">복지관1</option>
<option value="">복지관2</option>
<option value="">병원1</option>
<option value="">병원2</option>
</select>
<input type="text" />
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div className="btn-box flex-center" style={{ width:"15%"}}>
<Button className={"btn-small gray-btn"} btnName={"조회"} />
</div>
</div>
</div>
);
}