[Update] MainPage Design

@@ -141,35 +141,35 @@ 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">
+      <div className="info-box">
         <p className="info">정보를 입력해주세요.</p>
-        <div className="input-area">
+          <div className="main-input-area">
             <li>이름</li>
             <input 
-            placeholder="이름을 적어주세요"
+              placeholder="이름을 입력해주세요."
               type="text"
               value={Name}
               onChange={onNameHandler}
             />
           </div>
-        <div className="check-variable">
+          <div className="main-check-variable">
             {checkNameError && <div style={{color : 'red'}}>이름을 두글자 이상 입력해 주세요.</div>}
           </div>
           <hr/>
-        <div className="input-area">
+          <div className="main-input-area">
             <li>성별</li>
             <p>남자</p>
             <input 
@@ -187,7 +187,7 @@ function MainPage(props) {
             />
           </div>
           <hr/>
-        <div className="input-area">
+          <div className="main-input-area">
               <li>지역</li>
               <div className="CityAddSelect">
                   <select onChange={onCityAddhandler && GuAddSelector} value={CityAdd}>
@@ -219,26 +219,16 @@ function MainPage(props) {
               </div>
           </div>
           <hr/>
-        <div className="btn-area" onClick={onSubmitHandler}>
+          <div className="main-btn-area" onClick={onSubmitHandler}>
             <button className="submit-btn">
               양식 제출
             </button>
           </div>
-        <div className="check-variable">
+          <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