김건희 / OSSW_Weather_Briefing

Go to a project
Toggle navigation Toggle navigation pinning
김건희
17dcc5f6 1 parent 0471c48c

[Update] MainPage Design

Inline Side-by-side
Showing 3 changed files with 97 additions and 123 deletions
This diff could not be displayed because it is too large.
......@@ -141,104 +141,94 @@ function MainPage(props) {
return (
<>
<dir id = "header">
<dir className="clock">
<dir className="header_clock">
<h1 id="clock">{Time}</h1>
</dir>
<dir className="title">
<dir className="header_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 className="header_choice_box">
<button type="button">Login</button>
<button type="button">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 className="info-box">
<p className="info">정보를 입력해주세요.</p>
<div className="main-input-area">
<li>이름</li>
<input
placeholder="이름을 입력해주세요."
type="text"
value={Name}
onChange={onNameHandler}
/>
</div>
<div className="main-check-variable">
{checkNameError && <div style={{color : 'red'}}>이름을 두글자 이상 입력해 주세요.</div>}
</div>
<hr/>
<div className="main-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="main-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="main-btn-area" onClick={onSubmitHandler}>
<button className="submit-btn">
양식 제출
</button>
</div>
<div className="main-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>
</>
);
}
......
......@@ -14,27 +14,21 @@
border-top: 2px solid;
border-bottom: 2px solid;
.clock {
.header_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;
font-size: 15px;
}
}
.title {
.header_title {
display: flex;
justify-content: center;
align-items: center;
margin-top: 100px;
margin-bottom: 100px;
margin-left: 300px;
margin-right: 300px;
h1 {
......@@ -43,18 +37,16 @@
color: rgb(0, 0, 0);
}
}
.Login-Register {
.header_choice_box {
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;
width: 70px;
height: 25px;
font-size: 15px;
font-weight: bold;
cursor: pointer;
}
......@@ -67,10 +59,10 @@
border-top: 2px solid;
border-bottom: 2px solid;
.submit-box {
.info-box {
border: 2px solid;
width: 90%;
height: 200%;
width: 55%;
height: 100%;
margin-top: 150px;
margin-bottom: 30px;
}
......@@ -78,7 +70,7 @@
display: flex;
justify-content: center;
align-items: center;
margin-top: 50px;
margin-top: 20px;
margin-left: 100px;
margin-right: 100px;
}
......@@ -95,47 +87,45 @@
margin-left: 30%;
margin-right: 30%;
}
.input-area {
.main-input-area {
display: flex;
justify-content: left;
align-items: left;
margin-top: 100px;
margin-top: 20px;
margin-bottom: 15px;
li{
display:flex;
font-size: 15px;
color: gray;
margin-left: 20%;
margin-left: 15%;
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;
padding: 10px 2rem;
background-color: rgb(255, 255, 255);
margin-left: 50px;
}
select {
padding: 10px 3rem;
padding: 10px 1.5rem;
margin-right: 5px;
background-color: rgb(255, 255, 255);
}
}
.check-variable {
.main-check-variable {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 5px;
}
.btn-area {
.main-btn-area {
display: flex;
justify-content: center;
margin-top: 60px;
......@@ -143,7 +133,7 @@
button {
width: 150px;
height: 80px;
height: 60px;
font-size: 15px;
font-weight: bold;
background-color:rgb(255, 253, 238);
......@@ -151,10 +141,4 @@
}
}
}
#footer {
display: flex;
background-color: rgb(225, 208, 134);
height: 10%;
}
\ No newline at end of file
......