김건희 / OSSW_Weather_Briefing

Go to a project
Toggle navigation Toggle navigation pinning
김건희
a1cb903a 1 parent 0ce17ed5

[Update] Address, User Data

Inline Side-by-side
Showing 1 changed file with 113 additions and 88 deletions
import React, { useCallback, useState } from "react";
import React, { useCallback, useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import { address } from "../../../modules/weather";
import { address, coordinate, information } from "../../../modules/weather";
import "../style/MainPage.scss"
function MainPage(props) {
......@@ -25,37 +25,28 @@ function MainPage(props) {
const [checkCityAddError, setCheckCityAddError] = useState(true);
const [checkGuAddError, setCheckGuAddError] = useState(true);
const [checkDongAddError, setCheckDongAddError] = useState(true);
const [checkSubmitError, setCheckSubmitError] = useState(true);
const [checkSubmitError, setCheckSubmitError] = useState(false);
const CityAddselectList = ["시/도 선택", "강원도", "경기도", "경상북도", "경상남도", "광주광역시", "대구광역시", "대전광역시", "부산광역시", "서울특별시", "울산광역시", "인천광역시", "전라북도", "전라남도", "제주특별자치도", "충청북도", "충청남도"];
const CityAddSelectList = ["시/도 선택", "강원도", "경기도", "경상북도", "경상남도", "광주광역시", "대구광역시", "대전광역시", "부산광역시", "서울특별시", "울산광역시", "인천광역시", "전라북도", "전라남도", "제주특별자치도", "충청북도", "충청남도"];
const [GuAddselectList, setGuAddselectList] = useState(["시/군/구 선택"]);
const GangwonselectList = ["시/군 선택", "강릉시", "고성군", "동해시", "삼척시", "속초시", "양구군", "양양군", "영월군", "원주시", "인제군", "정선군", "철원군", "태백시", "평창군", "화천군", "홍천군", "횡성군"];
const GyeongiselectList = ["시/군 선택", "가평시", "고양시", "과천시", "광명시", "광주시", "구리시", "군포시", "김포시", "남양주시", "동두천시", "부천시", "성남시", "수원시", "시흥시", "안산시", "안성시", "안양시", "양주시", "양평군", "여주시", "연천군", "오산시", "용인시", "의왕시", "의정부시", "이천시", " 파주시", "평택시", "포천시", "하남시", "화성시"];
const [DongAddselectList, setDongAddselectList] = useState(["읍/면/동 선택"]);
const PajuselectList = ["읍/면/동 선택", "파주동", "솔주동", "라주동"];
const GuriselectList = ["읍/면/동 선택", "칠리동", "팔리동", "구리동"];
const [GuAddSelectList, setGuAddselectList] = useState(["시/군/구 선택"]);
const [DongAddSelectList, setDongAddselectList] = useState(["읍/면/동 선택"]);
const [Time, setTime] = useState("00:00:00");
if (checkAddress === false) {
addressResult.then((result) => {
console.log(result);
});
useEffect(() => {
user.then((result) => {
console.log(result);
setName(result.logData.name);
setSex(result.logData.gender);
})
setCheckAddress(true);
}
}, [user])
const currentTime = () => {
const date = new Date();
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, "0");
setTime(hours+":"+minutes+":"+seconds);
setTime(hours+" : "+minutes+" : "+seconds);
}
const startTimer = () => {
......@@ -64,6 +55,43 @@ function MainPage(props) {
startTimer()
// 시/군/구 주소
useEffect(() => {
const tempList = [];
addressResult.then((result) => {
for (let i = 0; i < result.length; i++) {
if (result[i].address1 === CityAdd) {
if (tempList[tempList.length - 1] !== result[i].address2){
tempList.push(result[i].address2);
}
}
}
tempList[0] = "시/군/구 선택";
setGuAddselectList(tempList);
setDongAddselectList(["읍/면/동 선택"]);
});
}, [CityAdd]);
// 읍/면/동 주소
useEffect(() => {
const tempList = [];
addressResult.then((result) => {
for (let i = 0; i < result.length; i++) {
if (result[i].address2 === GuAdd) {
if ((tempList[tempList.length - 1] !== result[i].address3) && tempList[0] !== result[i].address3){
tempList.push(result[i].address3);
}
}
}
tempList[0] = "읍/면/동 선택";
setDongAddselectList(tempList);
});
}, [GuAdd]);
const onNameHandler = useCallback((event) => {
setName(event.currentTarget.value);
......@@ -82,81 +110,79 @@ function MainPage(props) {
}, [checkSexError]);
const onCityAddhandler = useCallback((event) => {
setCityAdd(event.currentTarget.value);
setCheckGuAddError(false);
}, [checkCityAddError]);
const onGuAddhandler = useCallback((event) => {
setGuAdd(event.currentTarget.value);
setCheckGuAddError(false);
}, [checkGuAddError]);
const onDongAddhandler = useCallback((event) => {
setDongAdd(event.currentTarget.value);
setCheckDongAddError(false);
}, [checkDongAddError]);
const GuAddSelector = useCallback((event) => {
event.preventDefault();
setCityAdd(event.currentTarget.value);
if (event.currentTarget.value === "강원도") {
setGuAddselectList(GangwonselectList);
}
else if (event.currentTarget.value === "경기도") {
setGuAddselectList(GyeongiselectList);
if (event.currentTarget.value === "시/도 선택") {
setCheckCityAddError(true);
}
else {
setGuAddselectList(GyeongiselectList);
setCheckCityAddError(false);
}
}, [GuAddselectList]);
}, [checkCityAddError]);
const DongAddSelector = useCallback((event) => {
event.preventDefault();
const onGuAddhandler = useCallback((event) => {
setGuAdd(event.currentTarget.value);
if (event.currentTarget.value === "구리시") {
setDongAddselectList(GuriselectList);
if (event.currentTarget.value === "시/군/구 선택") {
setCheckGuAddError(true);
}
else if (event.currentTarget.value === "파주시") {
setDongAddselectList(PajuselectList);
else {
setCheckGuAddError(false);
}
}, [checkGuAddError]);
const onDongAddhandler = useCallback((event) => {
setDongAdd(event.currentTarget.value);
if (event.currentTarget.value === "읍/면/동 선택") {
setCheckDongAddError(true);
}
else {
setDongAddselectList(PajuselectList);
setCheckDongAddError(false);
}
}, [DongAddselectList]);
}, [checkDongAddError]);
const onSubmitHandler = useCallback((event) => { //제출 전 오류 확인 함수
event.preventDefault(); //체크박스 미리 클릭 방지
if (checkNameError || Name === "") {
setCheckSubmitError(true);
}
else if (checkSexError || Sex === "") {
setCheckSubmitError(true);
}
else if (checkCityAddError || CityAdd === "") {
setCheckSubmitError(true);
}
else if (checkGuAddError || GuAdd === "") {
setCheckSubmitError(true);
}
else if (checkDongAddError || DongAdd === "") {
setCheckSubmitError(true);
}
else {
setCheckSubmitError(false);
}
// if (checkNameError || Name === "") {
// setCheckSubmitError(true);
// }
// else if (checkSexError || Sex === "") {
// setCheckSubmitError(true);
// }
// else if (checkCityAddError || CityAdd === "") {
// setCheckSubmitError(true);
// }
// else if (checkGuAddError || GuAdd === "") {
// setCheckSubmitError(true);
// }
// else if (checkDongAddError || DongAdd === "") {
// setCheckSubmitError(true);
// }
// else {
// setCheckSubmitError(false);
// }
// if (!checkSubmitError) {
// const submitdata = {
// name: Name,
// sex: Sex,
// city: CityAdd,
// gu: GuAdd,
// dong: DongAdd
// };
// }
if (!checkSubmitError) {
addressResult.then((result) => {
for (let i = 0; i<result.length; i++) {
if (result[i].address1 === CityAdd && result[i].address2 === GuAdd && result[i].address3 === DongAdd) {
console.log(CityAdd, GuAdd, DongAdd);
const dotData = {
dotX : result[i].dotX,
dotY : result[i].dotY,
}
dispatch(information(dotData));
break;
}
}
})
}
}, [checkNameError, checkSexError, checkCityAddError, checkDongAddError, checkGuAddError, checkSubmitError, Name, Sex, CityAdd, GuAdd, DongAdd]);
......@@ -181,7 +207,7 @@ function MainPage(props) {
<div className="main-input-area">
<li>이름</li>
<input
placeholder="이름을 입력해주세요."
placeholder={Name}
type="text"
value={Name}
onChange={onNameHandler}
......@@ -212,18 +238,17 @@ function MainPage(props) {
<div className="main-input-area">
<li>지역</li>
<div className="CityAddSelect">
<select onChange={onCityAddhandler && GuAddSelector} value={CityAdd}>
{CityAddselectList.map((item) => (
<select onChange={onCityAddhandler} value={CityAdd}>
{CityAddSelectList.map((item) => (
<option value={item} key={item}>
{item}
</option>
))}
value값을 구 선택시 넘겨줘야함
</select>
</div>
<div className="GuAddSelect">
<select onChange={onGuAddhandler && DongAddSelector} value={GuAdd}>
{GuAddselectList.map((item) => (
<select onChange={onGuAddhandler} value={GuAdd}>
{GuAddSelectList.map((item) => (
<option value={item} key={item}>
{item}
</option>
......@@ -232,8 +257,8 @@ function MainPage(props) {
</div>
<div className="DongAddSelect">
<select onChange={onDongAddhandler} value={DongAdd}>
{DongAddselectList.map((item) => (
<option value={item} key={item}>
{DongAddSelectList.map((item) => (
<option value={item} key={CityAdd+GuAdd+item}>
{item}
</option>
))}
......