김건희 / 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 105 additions and 80 deletions
1 -import React, { useCallback, useState } from "react"; 1 +import React, { useCallback, useEffect, useState } from "react";
2 import { useDispatch, useSelector } from "react-redux"; 2 import { useDispatch, useSelector } from "react-redux";
3 import { useNavigate } from "react-router-dom"; 3 import { useNavigate } from "react-router-dom";
4 -import { address } from "../../../modules/weather"; 4 +import { address, coordinate, information } from "../../../modules/weather";
5 import "../style/MainPage.scss" 5 import "../style/MainPage.scss"
6 6
7 function MainPage(props) { 7 function MainPage(props) {
...@@ -25,37 +25,28 @@ function MainPage(props) { ...@@ -25,37 +25,28 @@ function MainPage(props) {
25 const [checkCityAddError, setCheckCityAddError] = useState(true); 25 const [checkCityAddError, setCheckCityAddError] = useState(true);
26 const [checkGuAddError, setCheckGuAddError] = useState(true); 26 const [checkGuAddError, setCheckGuAddError] = useState(true);
27 const [checkDongAddError, setCheckDongAddError] = useState(true); 27 const [checkDongAddError, setCheckDongAddError] = useState(true);
28 - const [checkSubmitError, setCheckSubmitError] = useState(true); 28 + const [checkSubmitError, setCheckSubmitError] = useState(false);
29 29
30 - const CityAddselectList = ["시/도 선택", "강원도", "경기도", "경상북도", "경상남도", "광주광역시", "대구광역시", "대전광역시", "부산광역시", "서울특별시", "울산광역시", "인천광역시", "전라북도", "전라남도", "제주특별자치도", "충청북도", "충청남도"]; 30 + const CityAddSelectList = ["시/도 선택", "강원도", "경기도", "경상북도", "경상남도", "광주광역시", "대구광역시", "대전광역시", "부산광역시", "서울특별시", "울산광역시", "인천광역시", "전라북도", "전라남도", "제주특별자치도", "충청북도", "충청남도"];
31 31
32 - const [GuAddselectList, setGuAddselectList] = useState(["시/군/구 선택"]); 32 + const [GuAddSelectList, setGuAddselectList] = useState(["시/군/구 선택"]);
33 - const GangwonselectList = ["시/군 선택", "강릉시", "고성군", "동해시", "삼척시", "속초시", "양구군", "양양군", "영월군", "원주시", "인제군", "정선군", "철원군", "태백시", "평창군", "화천군", "홍천군", "횡성군"]; 33 + const [DongAddSelectList, setDongAddselectList] = useState(["읍/면/동 선택"]);
34 - const GyeongiselectList = ["시/군 선택", "가평시", "고양시", "과천시", "광명시", "광주시", "구리시", "군포시", "김포시", "남양주시", "동두천시", "부천시", "성남시", "수원시", "시흥시", "안산시", "안성시", "안양시", "양주시", "양평군", "여주시", "연천군", "오산시", "용인시", "의왕시", "의정부시", "이천시", " 파주시", "평택시", "포천시", "하남시", "화성시"];
35 -
36 - const [DongAddselectList, setDongAddselectList] = useState(["읍/면/동 선택"]);
37 - const PajuselectList = ["읍/면/동 선택", "파주동", "솔주동", "라주동"];
38 - const GuriselectList = ["읍/면/동 선택", "칠리동", "팔리동", "구리동"];
39 34
40 const [Time, setTime] = useState("00:00:00"); 35 const [Time, setTime] = useState("00:00:00");
41 36
42 - if (checkAddress === false) { 37 + useEffect(() => {
43 - addressResult.then((result) => {
44 - console.log(result);
45 - });
46 user.then((result) => { 38 user.then((result) => {
47 - console.log(result); 39 + setName(result.logData.name);
40 + setSex(result.logData.gender);
48 }) 41 })
49 - 42 + }, [user])
50 - setCheckAddress(true);
51 - }
52 43
53 const currentTime = () => { 44 const currentTime = () => {
54 const date = new Date(); 45 const date = new Date();
55 const hours = String(date.getHours()).padStart(2, "0"); 46 const hours = String(date.getHours()).padStart(2, "0");
56 const minutes = String(date.getMinutes()).padStart(2, "0"); 47 const minutes = String(date.getMinutes()).padStart(2, "0");
57 const seconds = String(date.getSeconds()).padStart(2, "0"); 48 const seconds = String(date.getSeconds()).padStart(2, "0");
58 - setTime(hours+":"+minutes+":"+seconds); 49 + setTime(hours+" : "+minutes+" : "+seconds);
59 } 50 }
60 51
61 const startTimer = () => { 52 const startTimer = () => {
...@@ -64,6 +55,43 @@ function MainPage(props) { ...@@ -64,6 +55,43 @@ function MainPage(props) {
64 55
65 startTimer() 56 startTimer()
66 57
58 + // 시/군/구 주소
59 + useEffect(() => {
60 + const tempList = [];
61 +
62 + addressResult.then((result) => {
63 +
64 + for (let i = 0; i < result.length; i++) {
65 + if (result[i].address1 === CityAdd) {
66 + if (tempList[tempList.length - 1] !== result[i].address2){
67 + tempList.push(result[i].address2);
68 + }
69 + }
70 + }
71 + tempList[0] = "시/군/구 선택";
72 + setGuAddselectList(tempList);
73 + setDongAddselectList(["읍/면/동 선택"]);
74 + });
75 + }, [CityAdd]);
76 +
77 + // 읍/면/동 주소
78 + useEffect(() => {
79 + const tempList = [];
80 +
81 + addressResult.then((result) => {
82 +
83 + for (let i = 0; i < result.length; i++) {
84 + if (result[i].address2 === GuAdd) {
85 + if ((tempList[tempList.length - 1] !== result[i].address3) && tempList[0] !== result[i].address3){
86 + tempList.push(result[i].address3);
87 + }
88 + }
89 + }
90 + tempList[0] = "읍/면/동 선택";
91 + setDongAddselectList(tempList);
92 + });
93 + }, [GuAdd]);
94 +
67 const onNameHandler = useCallback((event) => { 95 const onNameHandler = useCallback((event) => {
68 setName(event.currentTarget.value); 96 setName(event.currentTarget.value);
69 97
...@@ -83,80 +111,78 @@ function MainPage(props) { ...@@ -83,80 +111,78 @@ function MainPage(props) {
83 111
84 const onCityAddhandler = useCallback((event) => { 112 const onCityAddhandler = useCallback((event) => {
85 setCityAdd(event.currentTarget.value); 113 setCityAdd(event.currentTarget.value);
86 - setCheckGuAddError(false); 114 +
115 + if (event.currentTarget.value === "시/도 선택") {
116 + setCheckCityAddError(true);
117 + }
118 + else {
119 + setCheckCityAddError(false);
120 + }
87 }, [checkCityAddError]); 121 }, [checkCityAddError]);
88 122
89 const onGuAddhandler = useCallback((event) => { 123 const onGuAddhandler = useCallback((event) => {
90 setGuAdd(event.currentTarget.value); 124 setGuAdd(event.currentTarget.value);
125 +
126 + if (event.currentTarget.value === "시/군/구 선택") {
127 + setCheckGuAddError(true);
128 + }
129 + else {
91 setCheckGuAddError(false); 130 setCheckGuAddError(false);
131 + }
132 +
92 }, [checkGuAddError]); 133 }, [checkGuAddError]);
93 134
94 const onDongAddhandler = useCallback((event) => { 135 const onDongAddhandler = useCallback((event) => {
95 setDongAdd(event.currentTarget.value); 136 setDongAdd(event.currentTarget.value);
137 +
138 + if (event.currentTarget.value === "읍/면/동 선택") {
139 + setCheckDongAddError(true);
140 + }
141 + else {
96 setCheckDongAddError(false); 142 setCheckDongAddError(false);
143 + }
97 }, [checkDongAddError]); 144 }, [checkDongAddError]);
98 145
99 - const GuAddSelector = useCallback((event) => { 146 + const onSubmitHandler = useCallback((event) => { //제출 전 오류 확인 함수
100 - event.preventDefault(); 147 + event.preventDefault(); //체크박스 미리 클릭 방지
101 - setCityAdd(event.currentTarget.value);
102 148
103 - if (event.currentTarget.value === "강원도") { 149 + if (checkNameError || Name === "") {
104 - setGuAddselectList(GangwonselectList); 150 + setCheckSubmitError(true);
105 } 151 }
106 - else if (event.currentTarget.value === "경기도") { 152 + else if (checkSexError || Sex === "") {
107 - setGuAddselectList(GyeongiselectList); 153 + setCheckSubmitError(true);
108 } 154 }
109 - else { 155 + else if (checkCityAddError || CityAdd === "") {
110 - setGuAddselectList(GyeongiselectList); 156 + setCheckSubmitError(true);
111 } 157 }
112 - }, [GuAddselectList]); 158 + else if (checkGuAddError || GuAdd === "") {
113 - 159 + setCheckSubmitError(true);
114 - const DongAddSelector = useCallback((event) => {
115 - event.preventDefault();
116 - setGuAdd(event.currentTarget.value);
117 -
118 - if (event.currentTarget.value === "구리시") {
119 - setDongAddselectList(GuriselectList);
120 } 160 }
121 - else if (event.currentTarget.value === "파주시") { 161 + else if (checkDongAddError || DongAdd === "") {
122 - setDongAddselectList(PajuselectList); 162 + setCheckSubmitError(true);
123 } 163 }
124 else { 164 else {
125 - setDongAddselectList(PajuselectList); 165 + setCheckSubmitError(false);
126 } 166 }
127 - }, [DongAddselectList]);
128 167
129 - const onSubmitHandler = useCallback((event) => { //제출 전 오류 확인 함수 168 + if (!checkSubmitError) {
130 - event.preventDefault(); //체크박스 미리 클릭 방지
131 169
132 - // if (checkNameError || Name === "") { 170 + addressResult.then((result) => {
133 - // setCheckSubmitError(true); 171 + for (let i = 0; i<result.length; i++) {
134 - // } 172 +
135 - // else if (checkSexError || Sex === "") { 173 + if (result[i].address1 === CityAdd && result[i].address2 === GuAdd && result[i].address3 === DongAdd) {
136 - // setCheckSubmitError(true); 174 + console.log(CityAdd, GuAdd, DongAdd);
137 - // } 175 + const dotData = {
138 - // else if (checkCityAddError || CityAdd === "") { 176 + dotX : result[i].dotX,
139 - // setCheckSubmitError(true); 177 + dotY : result[i].dotY,
140 - // } 178 + }
141 - // else if (checkGuAddError || GuAdd === "") { 179 +
142 - // setCheckSubmitError(true); 180 + dispatch(information(dotData));
143 - // } 181 + break;
144 - // else if (checkDongAddError || DongAdd === "") { 182 + }
145 - // setCheckSubmitError(true); 183 + }
146 - // } 184 + })
147 - // else { 185 + }
148 - // setCheckSubmitError(false);
149 - // }
150 -
151 - // if (!checkSubmitError) {
152 - // const submitdata = {
153 - // name: Name,
154 - // sex: Sex,
155 - // city: CityAdd,
156 - // gu: GuAdd,
157 - // dong: DongAdd
158 - // };
159 - // }
160 186
161 }, [checkNameError, checkSexError, checkCityAddError, checkDongAddError, checkGuAddError, checkSubmitError, Name, Sex, CityAdd, GuAdd, DongAdd]); 187 }, [checkNameError, checkSexError, checkCityAddError, checkDongAddError, checkGuAddError, checkSubmitError, Name, Sex, CityAdd, GuAdd, DongAdd]);
162 188
...@@ -181,7 +207,7 @@ function MainPage(props) { ...@@ -181,7 +207,7 @@ function MainPage(props) {
181 <div className="main-input-area"> 207 <div className="main-input-area">
182 <li>이름</li> 208 <li>이름</li>
183 <input 209 <input
184 - placeholder="이름을 입력해주세요." 210 + placeholder={Name}
185 type="text" 211 type="text"
186 value={Name} 212 value={Name}
187 onChange={onNameHandler} 213 onChange={onNameHandler}
...@@ -212,18 +238,17 @@ function MainPage(props) { ...@@ -212,18 +238,17 @@ function MainPage(props) {
212 <div className="main-input-area"> 238 <div className="main-input-area">
213 <li>지역</li> 239 <li>지역</li>
214 <div className="CityAddSelect"> 240 <div className="CityAddSelect">
215 - <select onChange={onCityAddhandler && GuAddSelector} value={CityAdd}> 241 + <select onChange={onCityAddhandler} value={CityAdd}>
216 - {CityAddselectList.map((item) => ( 242 + {CityAddSelectList.map((item) => (
217 <option value={item} key={item}> 243 <option value={item} key={item}>
218 {item} 244 {item}
219 </option> 245 </option>
220 ))} 246 ))}
221 - value값을 구 선택시 넘겨줘야함
222 </select> 247 </select>
223 </div> 248 </div>
224 <div className="GuAddSelect"> 249 <div className="GuAddSelect">
225 - <select onChange={onGuAddhandler && DongAddSelector} value={GuAdd}> 250 + <select onChange={onGuAddhandler} value={GuAdd}>
226 - {GuAddselectList.map((item) => ( 251 + {GuAddSelectList.map((item) => (
227 <option value={item} key={item}> 252 <option value={item} key={item}>
228 {item} 253 {item}
229 </option> 254 </option>
...@@ -232,8 +257,8 @@ function MainPage(props) { ...@@ -232,8 +257,8 @@ function MainPage(props) {
232 </div> 257 </div>
233 <div className="DongAddSelect"> 258 <div className="DongAddSelect">
234 <select onChange={onDongAddhandler} value={DongAdd}> 259 <select onChange={onDongAddhandler} value={DongAdd}>
235 - {DongAddselectList.map((item) => ( 260 + {DongAddSelectList.map((item) => (
236 - <option value={item} key={item}> 261 + <option value={item} key={CityAdd+GuAdd+item}>
237 {item} 262 {item}
238 </option> 263 </option>
239 ))} 264 ))}
......