김건희 / 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
import './App.css';
import RegisterPage from './component/views/RegisterPage/RegisterPage';
import LoginPage from './component/views/LoginPage/LoginPage';
import MainPage from './component/views/MainPage/MainPage';
import { Route, Routes } from 'react-router-dom';
function App() {
......@@ -9,6 +10,7 @@ function App() {
<Routes>
<Route exact path = "/login" element = {<LoginPage/>}/>
<Route exact path = "/register" element = {<RegisterPage/>}/>
<Route exact path = "/main" element = {<MainPage/>}/>
</Routes>
</div>
);
......
import React, { useCallback, useState } from "react";
import "../style/MainPage.scss"
function MainPage(props) {
//이름, 성별, 시구동주소
const [Name, setName] = useState("");
const [Sex, setSex] = useState("");
const [CityAdd, setCityAdd] = useState("");
const [GuAdd, setGuAdd] = useState("");
const [DongAdd, setDongAdd] = useState("");
const [checkNameError, setCheckNameError] = useState(false);
const [checkSexError, setCheckSexError] = useState(true);
const [checkCityAddError, setCheckCityAddError] = useState(true);
const [checkGuAddError, setCheckGuAddError] = useState(true);
const [checkDongAddError, setCheckDongAddError] = useState(true);
const [checkSubmitError, setCheckSubmitError] = useState(true);
const CityAddselectList = ["시/도 선택", "강원도", "경기도", "경상북도", "경상남도", "광주광역시", "대구광역시", "대전광역시", "부산광역시", "서울특별시", "울산광역시", "인천광역시", "전라북도", "전라남도", "제주특별자치도", "충청북도", "충청남도"];
const [GuAddselectList, setGuAddselectList] = useState(["시/군/구 선택"]);
const GangwonselectList = ["시/군 선택", "강릉시", "고성군", "동해시", "삼척시", "속초시", "양구군", "양양군", "영월군", "원주시", "인제군", "정선군", "철원군", "태백시", "평창군", "화천군", "홍천군", "횡성군"];
const GyeongiselectList = ["시/군 선택", "가평시", "고양시", "과천시", "광명시", "광주시", "구리시", "군포시", "김포시", "남양주시", "동두천시", "부천시", "성남시", "수원시", "시흥시", "안산시", "안성시", "안양시", "양주시", "양평군", "여주시", "연천군", "오산시", "용인시", "의왕시", "의정부시", "이천시", " 파주시", "평택시", "포천시", "하남시", "화성시"];
const [DongAddselectList, setDongAddselectList] = useState(["읍/면/동 선택"]);
const PajuselectList = ["읍/면/동 선택", "파주동", "솔주동", "라주동"];
const GuriselectList = ["읍/면/동 선택", "칠리동", "팔리동", "구리동"];
const [Time, setTime] = useState("00:00:00");
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}");
}
const startTimer = () => {
setInterval(currentTime, 1000)
}
startTimer()
const onNameHandler = useCallback((event) => {
setName(event.currentTarget.value);
// 이름 유효성 검사
if (event.currentTarget.value.length < 2) {
setCheckNameError(true);
}
else {
setCheckNameError(false);
}
}, [checkNameError]);
const onSexHandler = useCallback((event) => {
setSex(event.currentTarget.value);
setCheckSexError(false);
}, [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);
}
else {
setGuAddselectList(GyeongiselectList);
}
}, [GuAddselectList]);
const DongAddSelector = useCallback((event) => {
event.preventDefault();
setGuAdd(event.currentTarget.value);
if (event.currentTarget.value === "구리시") {
setDongAddselectList(GuriselectList);
}
else if (event.currentTarget.value === "파주시") {
setDongAddselectList(PajuselectList);
}
else {
setDongAddselectList(PajuselectList);
}
}, [DongAddselectList]);
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 (!checkSubmitError) {
const submitdata = {
name: Name,
sex: Sex,
city: CityAdd,
gu: GuAdd,
dong: DongAdd
};
}
}, [checkNameError, checkSexError, checkCityAddError, checkDongAddError, checkGuAddError, checkSubmitError, Name, Sex, CityAdd, GuAdd, DongAdd]);
return (
<>
<dir id = "header">
<dir className="clock">
<h1 id="clock">{Time}</h1>
</dir>
<dir className="title">
<h1>Weather_Briefing</h1>
</dir>
<dir className="Login-Register">
<button type="button" onclick="location.href='http://localhost:3000/login';">Login</button>
<button type="button" onclick="location.href='http://localhost:3000/register';">Register</button>
</dir>
</dir>
<div id = "body">
<div className="submit-box">
<p className="info">정보를 입력해주세요.</p>
<div className="input-area">
<li>이름</li>
<input
placeholder="이름을 적어주세요"
type="text"
value={Name}
onChange={onNameHandler}
/>
</div>
<div className="check-variable">
{checkNameError && <div style={{color : 'red'}}>이름을 두글자 이상 입력해 주세요.</div>}
</div>
<hr/>
<div className="input-area">
<li>성별</li>
<p>남자</p>
<input
type="radio" //라디오 버튼 타입
value = "0"
checked = {Sex === "0"}
onChange={onSexHandler}
/>
<p>여자</p>
<input
type="radio"
value = "1"
checked = {Sex === "1"}
onChange={onSexHandler}
/>
</div>
<hr/>
<div className="input-area">
<li>지역</li>
<div className="CityAddSelect">
<select onChange={onCityAddhandler && GuAddSelector} 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) => (
<option value={item} key={item}>
{item}
</option>
))}
</select>
</div>
<div className="DongAddSelect">
<select onChange={onDongAddhandler} value={DongAdd}>
{DongAddselectList.map((item) => (
<option value={item} key={item}>
{item}
</option>
))}
</select>
</div>
</div>
<hr/>
<div className="btn-area" onClick={onSubmitHandler}>
<button className="submit-btn">
양식 제출
</button>
</div>
<div className="check-variable">
{checkSubmitError && <div style={{color : 'red'}}>정보를 제대로 입력해주세요.</div>}
</div>
</div>
</div>
<dir id = "footer">
<dir className="logo">
<h1>logo</h1>
</dir>
<dir className="info">
<p>경희대학교</p>
<p>컴퓨터공학과 김건희ㅣ오석진ㅣ손수민</p>
</dir>
</dir>
</>
);
}
export default MainPage;
\ No newline at end of file
* {
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: rgb(245, 235, 223);
}
#header {
display: flex;
position: fixed;
justify-content: center;
align-items: center;
height: 15%;
width: 100%;
border-top: 2px solid;
border-bottom: 2px solid;
.clock {
justify-content: left;
align-items: left;
width: 10%;
height: 10%;
margin-left: 30px;
margin-top: 30px;
margin-bottom: 30px;
h1{
display: flex;
color:rgb(0, 0, 0);
font-size: 5px;
}
}
.title {
display: flex;
justify-content: center;
align-items: center;
margin-top: 100px;
margin-bottom: 100px;
margin-left: 300px;
margin-right: 300px;
h1 {
font-size: 50px;
font-family: 'Times New Roman', Times, serif;
color: rgb(0, 0, 0);
}
}
.Login-Register {
display: flex;
justify-content: right;
align-items: right;
margin-top: 50px;
margin-bottom: 5px;
margin-right: 10x;
}
button {
width: 50px;
height: 20px;
font-size: 10px;
font-weight: bold;
cursor: pointer;
}
}
#body {
display: flex;
justify-content: center;
align-items: center;
border-top: 2px solid;
border-bottom: 2px solid;
.submit-box {
border: 2px solid;
width: 90%;
height: 200%;
margin-top: 150px;
margin-bottom: 30px;
}
hr {
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
margin-left: 100px;
margin-right: 100px;
}
.info{
display:flex;
font-size: 30px;
border: 2px solid rgb(225, 208, 134);
background-color: rgb(242, 235, 130);
color:rgb(255, 255, 255);
justify-content: center;
align-items: center;
margin-top: 50px;
margin-bottom: 50px;
margin-left: 30%;
margin-right: 30%;
}
.input-area {
display: flex;
justify-content: left;
align-items: left;
margin-top: 100px;
margin-bottom: 15px;
li{
display:flex;
font-size: 15px;
color: gray;
margin-left: 20%;
margin-right: 10%;
}
p{
display:flex;
font-size: 15px;
border: 2px dotted gray;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 5%;
}
input {
padding: 10px 5rem;
background-color: rgb(255, 255, 255);
margin-left: 50px;
}
select {
padding: 10px 3rem;
margin-right: 5px;
background-color: rgb(255, 255, 255);
}
}
.check-variable {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 5px;
}
.btn-area {
display: flex;
justify-content: center;
margin-top: 60px;
margin-bottom: 10px;
button {
width: 150px;
height: 80px;
font-size: 15px;
font-weight: bold;
background-color:rgb(255, 253, 238);
cursor: pointer;
}
}
}
#footer {
display: flex;
background-color: rgb(225, 208, 134);
height: 10%;
}
\ No newline at end of file