김건희 / OSSW_Weather_Briefing

Go to a project
Toggle navigation Toggle navigation pinning
김건희
e0133333 2 parents a3c4a288 17dcc5f6

[Merge] 'feature/mainpage' into 'frontend'

Inline Side-by-side
Showing 5 changed files with 517 additions and 0 deletions
1 import './App.css'; 1 import './App.css';
2 import RegisterPage from './component/views/RegisterPage/RegisterPage'; 2 import RegisterPage from './component/views/RegisterPage/RegisterPage';
3 import LoginPage from './component/views/LoginPage/LoginPage'; 3 import LoginPage from './component/views/LoginPage/LoginPage';
4 +import MainPage from './component/views/MainPage/MainPage';
5 +import SelectPage from './component/views/SelectPage/SelectPage';
4 import { Route, Routes } from 'react-router-dom'; 6 import { Route, Routes } from 'react-router-dom';
5 7
6 function App() { 8 function App() {
...@@ -9,6 +11,8 @@ function App() { ...@@ -9,6 +11,8 @@ function App() {
9 <Routes> 11 <Routes>
10 <Route exact path = "/login" element = {<LoginPage/>}/> 12 <Route exact path = "/login" element = {<LoginPage/>}/>
11 <Route exact path = "/register" element = {<RegisterPage/>}/> 13 <Route exact path = "/register" element = {<RegisterPage/>}/>
14 + <Route exact path = "/main" element = {<MainPage/>}/>
15 + <Route exact path = "/select" element = {<SelectPage/>}/>
12 </Routes> 16 </Routes>
13 </div> 17 </div>
14 ); 18 );
......
1 +import React, { useCallback, useState } from "react";
2 +import "../style/MainPage.scss"
3 +
4 +function MainPage(props) {
5 +
6 + //이름, 성별, 시구동주소
7 + const [Name, setName] = useState("");
8 + const [Sex, setSex] = useState("");
9 + const [CityAdd, setCityAdd] = useState("");
10 + const [GuAdd, setGuAdd] = useState("");
11 + const [DongAdd, setDongAdd] = useState("");
12 +
13 + const [checkNameError, setCheckNameError] = useState(false);
14 + const [checkSexError, setCheckSexError] = useState(true);
15 + const [checkCityAddError, setCheckCityAddError] = useState(true);
16 + const [checkGuAddError, setCheckGuAddError] = useState(true);
17 + const [checkDongAddError, setCheckDongAddError] = useState(true);
18 + const [checkSubmitError, setCheckSubmitError] = useState(true);
19 +
20 + const CityAddselectList = ["시/도 선택", "강원도", "경기도", "경상북도", "경상남도", "광주광역시", "대구광역시", "대전광역시", "부산광역시", "서울특별시", "울산광역시", "인천광역시", "전라북도", "전라남도", "제주특별자치도", "충청북도", "충청남도"];
21 +
22 + const [GuAddselectList, setGuAddselectList] = useState(["시/군/구 선택"]);
23 + const GangwonselectList = ["시/군 선택", "강릉시", "고성군", "동해시", "삼척시", "속초시", "양구군", "양양군", "영월군", "원주시", "인제군", "정선군", "철원군", "태백시", "평창군", "화천군", "홍천군", "횡성군"];
24 + const GyeongiselectList = ["시/군 선택", "가평시", "고양시", "과천시", "광명시", "광주시", "구리시", "군포시", "김포시", "남양주시", "동두천시", "부천시", "성남시", "수원시", "시흥시", "안산시", "안성시", "안양시", "양주시", "양평군", "여주시", "연천군", "오산시", "용인시", "의왕시", "의정부시", "이천시", " 파주시", "평택시", "포천시", "하남시", "화성시"];
25 +
26 + const [DongAddselectList, setDongAddselectList] = useState(["읍/면/동 선택"]);
27 + const PajuselectList = ["읍/면/동 선택", "파주동", "솔주동", "라주동"];
28 + const GuriselectList = ["읍/면/동 선택", "칠리동", "팔리동", "구리동"];
29 +
30 + const [Time, setTime] = useState("00:00:00");
31 +
32 + const currentTime = () => {
33 + const date = new Date();
34 + const hours = String(date.getHours()).padStart(2, "0");
35 + const minutes = String(date.getMinutes()).padStart(2, "0");
36 + const seconds = String(date.getSeconds()).padStart(2, "0");
37 + setTime(hours+":"+minutes+":"+seconds);
38 + }
39 +
40 + const startTimer = () => {
41 + setInterval(currentTime, 1000)
42 + }
43 +
44 + startTimer()
45 +
46 + const onNameHandler = useCallback((event) => {
47 + setName(event.currentTarget.value);
48 +
49 + // 이름 유효성 검사
50 + if (event.currentTarget.value.length < 2) {
51 + setCheckNameError(true);
52 + }
53 + else {
54 + setCheckNameError(false);
55 + }
56 + }, [checkNameError]);
57 +
58 + const onSexHandler = useCallback((event) => {
59 + setSex(event.currentTarget.value);
60 + setCheckSexError(false);
61 + }, [checkSexError]);
62 +
63 + const onCityAddhandler = useCallback((event) => {
64 + setCityAdd(event.currentTarget.value);
65 + setCheckGuAddError(false);
66 + }, [checkCityAddError]);
67 +
68 + const onGuAddhandler = useCallback((event) => {
69 + setGuAdd(event.currentTarget.value);
70 + setCheckGuAddError(false);
71 + }, [checkGuAddError]);
72 +
73 + const onDongAddhandler = useCallback((event) => {
74 + setDongAdd(event.currentTarget.value);
75 + setCheckDongAddError(false);
76 + }, [checkDongAddError]);
77 +
78 + const GuAddSelector = useCallback((event) => {
79 + event.preventDefault();
80 + setCityAdd(event.currentTarget.value);
81 +
82 + if (event.currentTarget.value === "강원도") {
83 + setGuAddselectList(GangwonselectList);
84 + }
85 + else if (event.currentTarget.value === "경기도") {
86 + setGuAddselectList(GyeongiselectList);
87 + }
88 + else {
89 + setGuAddselectList(GyeongiselectList);
90 + }
91 + }, [GuAddselectList]);
92 +
93 + const DongAddSelector = useCallback((event) => {
94 + event.preventDefault();
95 + setGuAdd(event.currentTarget.value);
96 +
97 + if (event.currentTarget.value === "구리시") {
98 + setDongAddselectList(GuriselectList);
99 + }
100 + else if (event.currentTarget.value === "파주시") {
101 + setDongAddselectList(PajuselectList);
102 + }
103 + else {
104 + setDongAddselectList(PajuselectList);
105 + }
106 + }, [DongAddselectList]);
107 +
108 + const onSubmitHandler = useCallback((event) => { //제출 전 오류 확인 함수
109 + event.preventDefault(); //체크박스 미리 클릭 방지
110 +
111 + if (checkNameError || Name === "") {
112 + setCheckSubmitError(true);
113 + }
114 + else if (checkSexError || Sex === "") {
115 + setCheckSubmitError(true);
116 + }
117 + else if (checkCityAddError || CityAdd === "") {
118 + setCheckSubmitError(true);
119 + }
120 + else if (checkGuAddError || GuAdd === "") {
121 + setCheckSubmitError(true);
122 + }
123 + else if (checkDongAddError || DongAdd === "") {
124 + setCheckSubmitError(true);
125 + }
126 + else {
127 + setCheckSubmitError(false);
128 + }
129 +
130 + if (!checkSubmitError) {
131 + const submitdata = {
132 + name: Name,
133 + sex: Sex,
134 + city: CityAdd,
135 + gu: GuAdd,
136 + dong: DongAdd
137 + };
138 + }
139 + }, [checkNameError, checkSexError, checkCityAddError, checkDongAddError, checkGuAddError, checkSubmitError, Name, Sex, CityAdd, GuAdd, DongAdd]);
140 +
141 + return (
142 + <>
143 + <dir id = "header">
144 + <dir className="header_clock">
145 + <h1 id="clock">{Time}</h1>
146 + </dir>
147 + <dir className="header_title">
148 + <h1>Weather_Briefing</h1>
149 + </dir>
150 + <dir className="header_choice_box">
151 + <button type="button">Login</button>
152 + <button type="button">Register</button>
153 + </dir>
154 + </dir>
155 +
156 + <div id = "body">
157 + <div className="info-box">
158 + <p className="info">정보를 입력해주세요.</p>
159 + <div className="main-input-area">
160 + <li>이름</li>
161 + <input
162 + placeholder="이름을 입력해주세요."
163 + type="text"
164 + value={Name}
165 + onChange={onNameHandler}
166 + />
167 + </div>
168 + <div className="main-check-variable">
169 + {checkNameError && <div style={{color : 'red'}}>이름을 두글자 이상 입력해 주세요.</div>}
170 + </div>
171 + <hr/>
172 + <div className="main-input-area">
173 + <li>성별</li>
174 + <p>남자</p>
175 + <input
176 + type="radio" //라디오 버튼 타입
177 + value = "0"
178 + checked = {Sex === "0"}
179 + onChange={onSexHandler}
180 + />
181 + <p>여자</p>
182 + <input
183 + type="radio"
184 + value = "1"
185 + checked = {Sex === "1"}
186 + onChange={onSexHandler}
187 + />
188 + </div>
189 + <hr/>
190 + <div className="main-input-area">
191 + <li>지역</li>
192 + <div className="CityAddSelect">
193 + <select onChange={onCityAddhandler && GuAddSelector} value={CityAdd}>
194 + {CityAddselectList.map((item) => (
195 + <option value={item} key={item}>
196 + {item}
197 + </option>
198 + ))}
199 + value값을 구 선택시 넘겨줘야함
200 + </select>
201 + </div>
202 + <div className="GuAddSelect">
203 + <select onChange={onGuAddhandler && DongAddSelector} value={GuAdd}>
204 + {GuAddselectList.map((item) => (
205 + <option value={item} key={item}>
206 + {item}
207 + </option>
208 + ))}
209 + </select>
210 + </div>
211 + <div className="DongAddSelect">
212 + <select onChange={onDongAddhandler} value={DongAdd}>
213 + {DongAddselectList.map((item) => (
214 + <option value={item} key={item}>
215 + {item}
216 + </option>
217 + ))}
218 + </select>
219 + </div>
220 + </div>
221 + <hr/>
222 + <div className="main-btn-area" onClick={onSubmitHandler}>
223 + <button className="submit-btn">
224 + 양식 제출
225 + </button>
226 + </div>
227 + <div className="main-check-variable">
228 + {checkSubmitError && <div style={{color : 'red'}}>정보를 제대로 입력해주세요.</div>}
229 + </div>
230 + </div>
231 + </div>
232 + </>
233 + );
234 +}
235 +
236 +export default MainPage;
...\ No newline at end of file ...\ No newline at end of file
1 +import React, { useCallback, useState } from "react";
2 +import "../style/SelectPage.scss"
3 +
4 +function SelectPage(props) {
5 +
6 + const today = new Date();
7 +
8 + const today_year = today.getFullYear();
9 + const today_month = today.getMonth();
10 + const today_date = today.getDate();
11 +
12 + const tomorrow = new Date(today.setDate(today.getDate() + 1));
13 +
14 + const tomorrow_year = tomorrow.getFullYear();
15 + const tomorrow_month = tomorrow.getMonth();
16 + const tomorrow_date = tomorrow.getDate();
17 +
18 + const [Time, setTime] = useState("00:00:00");
19 +
20 + const currentTime = () => {
21 + const date = new Date();
22 + const hours = String(date.getHours()).padStart(2, "0");
23 + const minutes = String(date.getMinutes()).padStart(2, "0");
24 + const seconds = String(date.getSeconds()).padStart(2, "0");
25 + setTime(hours+":"+minutes+":"+seconds);
26 + }
27 +
28 + const startTimer = () => {
29 + setInterval(currentTime, 1000)
30 + }
31 +
32 + startTimer()
33 +
34 + return (
35 + <>
36 + <dir id = "header">
37 + <dir className="clock">
38 + <h1 id="clock">{Time}</h1>
39 + </dir>
40 + <dir className="title">
41 + <h1>Weather_Briefing</h1>
42 + </dir>
43 + <dir className="Login-Register">
44 + <button type="button" onclick="location.href='http://localhost:3000/login';">Login</button>
45 + <button type="button" onclick="location.href='http://localhost:3000/register';">Register</button>
46 + </dir>
47 + </dir>
48 +
49 + <div id = "body">
50 + <dir className="date">
51 + <p>경기도 용인시 서천구</p>
52 + </dir>
53 + <dir className="today_weather">
54 + <dir className="days">
55 + <h1 id="today">오늘의 날씨</h1>
56 + <h2 id="day">{today_year}년 {today_month + 1}월 {today_date}일</h2>
57 + </dir>
58 + <dir className="weather">
59 + <h1 id="present_do">14도</h1>
60 + <p id="maxmin_do">최고: 22도 ㅣ 최저: 7도</p>
61 + </dir>
62 + </dir>
63 + <dir className="tomorrow_weather">
64 + <dir className="days">
65 + <h1 id="today">내일의 날씨</h1>
66 + <h2 id="day">{tomorrow_year}년 {tomorrow_month + 1}월 {tomorrow_date}일</h2>
67 + </dir>
68 + <dir className="weather">
69 + <h1 id="present_do">50도</h1>
70 + <p id="maxmin_do">최고: 13도 ㅣ 최저: 2도</p>
71 + </dir>
72 + </dir>
73 + </div>
74 +
75 + <dir id = "footer">
76 + <dir className="logo">
77 + <h1>logo</h1>
78 + </dir>
79 + <dir className="info">
80 + <p>경희대학교</p>
81 + <p>컴퓨터공학과 김건희ㅣ오석진ㅣ손수민</p>
82 + </dir>
83 + </dir>
84 + </>
85 + );
86 +}
87 +
88 +export default SelectPage;
...\ No newline at end of file ...\ No newline at end of file
1 +* {
2 + margin: 0;
3 + padding: 0;
4 + box-sizing: border-box;
5 + background-color: rgb(245, 235, 223);
6 + }
7 + #header {
8 + display: flex;
9 + position: fixed;
10 + justify-content: center;
11 + align-items: center;
12 + height: 15%;
13 + width: 100%;
14 + border-top: 2px solid;
15 + border-bottom: 2px solid;
16 +
17 + .header_clock {
18 + justify-content: left;
19 + align-items: left;
20 + width: 10%;
21 + height: 10%;
22 + h1{
23 + color:rgb(0, 0, 0);
24 + font-size: 15px;
25 + }
26 + }
27 +
28 + .header_title {
29 + display: flex;
30 + justify-content: center;
31 + align-items: center;
32 + margin-left: 300px;
33 + margin-right: 300px;
34 + h1 {
35 + font-size: 50px;
36 + font-family: 'Times New Roman', Times, serif;
37 + color: rgb(0, 0, 0);
38 + }
39 + }
40 + .header_choice_box {
41 + display: flex;
42 + justify-content: right;
43 + align-items: right;
44 + margin-right: 10x;
45 + }
46 + button {
47 + width: 70px;
48 + height: 25px;
49 + font-size: 15px;
50 + font-weight: bold;
51 + cursor: pointer;
52 + }
53 + }
54 +
55 + #body {
56 + display: flex;
57 + justify-content: center;
58 + align-items: center;
59 + border-top: 2px solid;
60 + border-bottom: 2px solid;
61 +
62 + .info-box {
63 + border: 2px solid;
64 + width: 55%;
65 + height: 100%;
66 + margin-top: 150px;
67 + margin-bottom: 30px;
68 + }
69 + hr {
70 + display: flex;
71 + justify-content: center;
72 + align-items: center;
73 + margin-top: 20px;
74 + margin-left: 100px;
75 + margin-right: 100px;
76 + }
77 + .info{
78 + display:flex;
79 + font-size: 30px;
80 + border: 2px solid rgb(225, 208, 134);
81 + background-color: rgb(242, 235, 130);
82 + color:rgb(255, 255, 255);
83 + justify-content: center;
84 + align-items: center;
85 + margin-top: 50px;
86 + margin-bottom: 50px;
87 + margin-left: 30%;
88 + margin-right: 30%;
89 + }
90 + .main-input-area {
91 + display: flex;
92 + justify-content: left;
93 + align-items: left;
94 + margin-top: 20px;
95 + margin-bottom: 15px;
96 + li{
97 + display:flex;
98 + font-size: 15px;
99 + color: gray;
100 + margin-left: 15%;
101 + margin-right: 10%;
102 + }
103 + p{
104 + display:flex;
105 + font-size: 15px;
106 + border: 2px dotted gray;
107 + margin-bottom: 5px;
108 + margin-left: 5%;
109 + }
110 + input {
111 + padding: 10px 2rem;
112 + background-color: rgb(255, 255, 255);
113 + margin-left: 50px;
114 + }
115 +
116 + select {
117 + padding: 10px 1.5rem;
118 + margin-right: 5px;
119 + background-color: rgb(255, 255, 255);
120 + }
121 + }
122 + .main-check-variable {
123 + display: flex;
124 + justify-content: center;
125 + align-items: center;
126 + margin-bottom: 5px;
127 + }
128 + .main-btn-area {
129 + display: flex;
130 + justify-content: center;
131 + margin-top: 60px;
132 + margin-bottom: 10px;
133 +
134 + button {
135 + width: 150px;
136 + height: 60px;
137 + font-size: 15px;
138 + font-weight: bold;
139 + background-color:rgb(255, 253, 238);
140 + cursor: pointer;
141 + }
142 + }
143 + }
144 +
...\ No newline at end of file ...\ No newline at end of file
1 +#body {
2 + display: flex;
3 + justify-content: center;
4 + align-items: center;
5 + flex-wrap: wrap;
6 + flex-direction: column;
7 + border-top: 2px solid;
8 + border-bottom: 2px solid;
9 + .date {
10 + display: flex;
11 + justify-content: center;
12 + align-items: center;
13 + margin-top: 150px;
14 + font-size: 30px;
15 + }
16 + .today_weather {
17 + display: flex;
18 + justify-content: center;
19 + align-items: center;
20 + border: 2px solid;
21 + width: 40%;
22 + margin-top: 30px;
23 + margin-bottom: 20px;
24 + }
25 + .tomorrow_weather {
26 + display: flex;
27 + justify-content: center;
28 + align-items: center;
29 + border: 2px solid;
30 + width: 40%;
31 + margin-top: 30px;
32 + margin-bottom: 120px;
33 + }
34 + .days {
35 + display: flex;
36 + justify-content: center;
37 + align-items: center;
38 + flex-wrap: wrap;
39 + flex-direction: column;
40 + margin-top: 25px;
41 + margin-bottom: 25px;
42 + margin-left: 15px;
43 + margin-right: 200px;
44 + }
45 + }
...\ No newline at end of file ...\ No newline at end of file