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' import { callUserInfo } from '../utils/CheckDB'; import { routesClient } from '../routesClient'; 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: '90%', 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([]) // DOE const [sggs, setSggs] = useState([]) // SGG const [emds, setEmds] = useState([]) // EMD const [sggsArray, setSggsArray] = useState([]) // DOE 와 SGG 내의 code_doe 같을 때 => sgg 값 const [emdsArray, setEmdsArray] = useState([]) // SGG 과 EMD 내의 code_sgg && DOE 와 EMD 내의 code_doe => emd 값 const doeSelect = document.getElementById('select-doe') const sggSelect = document.getElementById('select-sgg') const emdSelect = document.getElementById('select-emd') // Local code 받아오기 useEffect(() => { async function getLocCode() { const res = await axios.get(routesClient.localdata) const local_codes = res.data.contents.loc_code setDoes(local_codes.DOE) setSggs(local_codes.SGG) setEmds(local_codes.EMD) } getLocCode() }, []) function selectLocal() { sggs.map(function (sggvalue) { if (Number(doeSelect.value) === sggvalue['code_doe']) { setSggsArray(sggvalue['sgg']) } }) emds.map(function (emdvalue) { if ((Number(sggSelect.value) === emdvalue['code_sgg']) && (Number(doeSelect.value) === emdvalue['code_doe'])) { setEmdsArray(emdvalue['emd']) } }) } async function handleSubmit(event) { event.preventDefault() if (doeSelect.options[doeSelect.selectedIndex].text !== '도' && sggSelect.options[sggSelect.selectedIndex].text !== '시군구' && emdSelect.options[emdSelect.selectedIndex].text !== '읍면동') { const saveCodeEmd = emdSelect.value await axios.post(routesClient.edit, { loc_code: saveCodeEmd }) // loccal code 수정 callUserInfo().then((res) => { console.log('loc_code', res[0].loc_code) if (res[0].loc_code) { Swal.fire({ title: '변경되었습니다.', text: '축하드립니다!👏', icon: 'success', customClass: 'swal-wide', confirmButtonText: '확인', }).then((res) => { if (res.isConfirmed) { window.location.replace('/') } else { window.location.replace('/') } }) } }) } else { Swal.fire({ title: '실패', text: '전부 선택해주세요', icon: 'error', customClass: 'swal-wide', confirmButtonText: '확인' }) } } return ( 지역 코드 본인의 지역을 선택해주세요
{ does.map((doevalue) => ( )) } { sggsArray.map((sggvalue) => ( )) } { emdsArray.map((emdvalue) => ( )) }
) } export default LocCodeChange;