김건희 / OSSW_Weather_Briefing

Go to a project
Toggle navigation Toggle navigation pinning
손수민
7352bf45 1 parent b8117a42

[Add] MainPage Files

Inline Side-by-side
Showing 3 changed files with 408 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';
4 import { Route, Routes } from 'react-router-dom'; 5 import { Route, Routes } from 'react-router-dom';
5 6
6 function App() { 7 function App() {
...@@ -9,6 +10,7 @@ function App() { ...@@ -9,6 +10,7 @@ function App() {
9 <Routes> 10 <Routes>
10 <Route exact path = "/login" element = {<LoginPage/>}/> 11 <Route exact path = "/login" element = {<LoginPage/>}/>
11 <Route exact path = "/register" element = {<RegisterPage/>}/> 12 <Route exact path = "/register" element = {<RegisterPage/>}/>
13 + <Route exact path = "/main" element = {<MainPage/>}/>
12 </Routes> 14 </Routes>
13 </div> 15 </div>
14 ); 16 );
......
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="clock">
145 + <h1 id="clock">{Time}</h1>
146 + </dir>
147 + <dir className="title">
148 + <h1>Weather_Briefing</h1>
149 + </dir>
150 + <dir className="Login-Register">
151 + <button type="button" onclick="location.href='http://localhost:3000/login';">Login</button>
152 + <button type="button" onclick="location.href='http://localhost:3000/register';">Register</button>
153 + </dir>
154 + </dir>
155 +
156 + <div id = "body">
157 + <div className="submit-box">
158 + <p className="info">정보를 입력해주세요.</p>
159 + <div className="input-area">
160 + <li>이름</li>
161 + <input
162 + placeholder="이름을 적어주세요"
163 + type="text"
164 + value={Name}
165 + onChange={onNameHandler}
166 + />
167 + </div>
168 + <div className="check-variable">
169 + {checkNameError && <div style={{color : 'red'}}>이름을 두글자 이상 입력해 주세요.</div>}
170 + </div>
171 + <hr/>
172 + <div className="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="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="btn-area" onClick={onSubmitHandler}>
223 + <button className="submit-btn">
224 + 양식 제출
225 + </button>
226 + </div>
227 + <div className="check-variable">
228 + {checkSubmitError && <div style={{color : 'red'}}>정보를 제대로 입력해주세요.</div>}
229 + </div>
230 + </div>
231 + </div>
232 +
233 + <dir id = "footer">
234 + <dir className="logo">
235 + <h1>logo</h1>
236 + </dir>
237 + <dir className="info">
238 + <p>경희대학교</p>
239 + <p>컴퓨터공학과 김건희ㅣ오석진ㅣ손수민</p>
240 + </dir>
241 + </dir>
242 + </>
243 + );
244 +}
245 +
246 +export default MainPage;
...\ 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 + .clock {
18 + justify-content: left;
19 + align-items: left;
20 + width: 10%;
21 + height: 10%;
22 + margin-left: 30px;
23 + margin-top: 30px;
24 + margin-bottom: 30px;
25 + h1{
26 + display: flex;
27 + color:rgb(0, 0, 0);
28 + font-size: 5px;
29 + }
30 + }
31 +
32 + .title {
33 + display: flex;
34 + justify-content: center;
35 + align-items: center;
36 + margin-top: 100px;
37 + margin-bottom: 100px;
38 + margin-left: 300px;
39 + margin-right: 300px;
40 + h1 {
41 + font-size: 50px;
42 + font-family: 'Times New Roman', Times, serif;
43 + color: rgb(0, 0, 0);
44 + }
45 + }
46 + .Login-Register {
47 + display: flex;
48 + justify-content: right;
49 + align-items: right;
50 + margin-top: 50px;
51 + margin-bottom: 5px;
52 + margin-right: 10x;
53 + }
54 + button {
55 + width: 50px;
56 + height: 20px;
57 + font-size: 10px;
58 + font-weight: bold;
59 + cursor: pointer;
60 + }
61 + }
62 +
63 + #body {
64 + display: flex;
65 + justify-content: center;
66 + align-items: center;
67 + border-top: 2px solid;
68 + border-bottom: 2px solid;
69 +
70 + .submit-box {
71 + border: 2px solid;
72 + width: 90%;
73 + height: 200%;
74 + margin-top: 150px;
75 + margin-bottom: 30px;
76 + }
77 + hr {
78 + display: flex;
79 + justify-content: center;
80 + align-items: center;
81 + margin-top: 50px;
82 + margin-left: 100px;
83 + margin-right: 100px;
84 + }
85 + .info{
86 + display:flex;
87 + font-size: 30px;
88 + border: 2px solid rgb(225, 208, 134);
89 + background-color: rgb(242, 235, 130);
90 + color:rgb(255, 255, 255);
91 + justify-content: center;
92 + align-items: center;
93 + margin-top: 50px;
94 + margin-bottom: 50px;
95 + margin-left: 30%;
96 + margin-right: 30%;
97 + }
98 + .input-area {
99 + display: flex;
100 + justify-content: left;
101 + align-items: left;
102 + margin-top: 100px;
103 + margin-bottom: 15px;
104 + li{
105 + display:flex;
106 + font-size: 15px;
107 + color: gray;
108 + margin-left: 20%;
109 + margin-right: 10%;
110 + }
111 + p{
112 + display:flex;
113 + font-size: 15px;
114 + border: 2px dotted gray;
115 + margin-top: 5px;
116 + margin-bottom: 5px;
117 + margin-left: 5%;
118 + }
119 + input {
120 + padding: 10px 5rem;
121 + background-color: rgb(255, 255, 255);
122 + margin-left: 50px;
123 + }
124 +
125 + select {
126 +
127 + padding: 10px 3rem;
128 + margin-right: 5px;
129 + background-color: rgb(255, 255, 255);
130 + }
131 + }
132 + .check-variable {
133 + display: flex;
134 + justify-content: center;
135 + align-items: center;
136 + margin-bottom: 5px;
137 + }
138 + .btn-area {
139 + display: flex;
140 + justify-content: center;
141 + margin-top: 60px;
142 + margin-bottom: 10px;
143 +
144 + button {
145 + width: 150px;
146 + height: 80px;
147 + font-size: 15px;
148 + font-weight: bold;
149 + background-color:rgb(255, 253, 238);
150 + cursor: pointer;
151 + }
152 + }
153 + }
154 + #footer {
155 + display: flex;
156 + background-color: rgb(225, 208, 134);
157 + height: 10%;
158 +
159 + }
160 +
...\ No newline at end of file ...\ No newline at end of file