import React, { useEffect, useState } from 'react' import '../App.css' import { Form, Button, Row, Col, Card } from 'react-bootstrap'; import axios from 'axios'; import Swal from 'sweetalert2' function LocCodeChange() { const cardstyled = { margin: 'auto', padding: '1em', display: 'flex', justifyContent: 'center', width: '100%', borderWidth: '3px', borderRadius: '20px', borderColor: 'rgb(110, 189, 142)', color: '#04AB70' } const inboxstyled = { display: 'flex', flexDirection: 'column', maxWidth: '80%', justifyContent: 'center', margin: 'auto', padding: '0.5em', color: 'black' } const btnstyled2 = { background: 'white', width: '50%', borderWidth: '2px', color: 'rgb(110, 189, 142)', borderColor: 'rgba(195, 195, 195, 0.753)', } const [does, setDoes] = useState([]) const [sggs, setSggs] = useState([]) const [emds, setEmds] = useState([]) const [sggsArray, setSggsArray] = useState([]) const [emdsArray, setEmdsArray] = useState([]) const doeSelect = document.getElementById('select-doe') const sggSelect = document.getElementById('select-sgg') const emdSelect = document.getElementById('select-emd') function handleClickLoc() { if (doeSelect.options[doeSelect.selectedIndex].text !== '도' && sggSelect.options[sggSelect.selectedIndex].text !== '시군구' && emdSelect.options[emdSelect.selectedIndex].text !== '읍면동') { localStorage.setItem('code_doe', doeSelect.value) localStorage.setItem('name_doe', doeSelect.options[doeSelect.selectedIndex].text) localStorage.setItem('code_sgg', sggSelect.value) localStorage.setItem('name_sgg', sggSelect.options[sggSelect.selectedIndex].text) localStorage.setItem('code_emd', emdSelect.value) localStorage.setItem('name_emd', emdSelect.options[emdSelect.selectedIndex].text) if (localStorage.getItem('name_emd')) { Swal.fire({ title: '변경되었습니다.', text: '축하드립니다!👏', icon: 'success', customClass: 'swal-wide', confirmButtonText: '확인', }).then((res) => { if (res.isConfirmed) { window.location.reload() } else { window.location.reload() } }) } } else { Swal.fire({ title: '실패', text: '전부 선택해주세요', icon: 'error', customClass: 'swal-wide', confirmButtonText: '확인' }) } } async function getLocCode() { const res = await axios.get("http://localhost:4500/api/data/loccode") const local_codes = res.data.locCodes setDoes(local_codes.DOE) setSggs(local_codes.SGG) setEmds(local_codes.EMD) } useEffect(() => { getLocCode() }, []) function selectLocal() { sggs.map(function (sggvalue) { if (doeSelect.value == sggvalue['code_doe']) { setSggsArray(sggvalue['sgg']) } }) emds.map(function (emdvalue) { if (sggSelect.value == emdvalue['code_sgg']) { setEmdsArray(emdvalue['emd']) } }) } return ( 지역 코드 본인의 지역을 선택해주세요
{ does.map((doevalue) => ( )) } { sggsArray.map((sggvalue) => ( )) } { emdsArray.map((emdvalue) => ( )) }
) } export default LocCodeChange;