하하하하항

src/components/Header/index.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import logo from '../../assets/images/logo.svg'
+import './style.css'
+
+const index = () => {
+  return (
+    <div className='header'>
+            <div className='logo'><img src={logo} alt='logo'></img></div>
+            <div className='rightbox'>
+                <div className='profile'></div>
+            </div>
+    </div>
+  )
+}
+
+export default index

src/components/Header/style.css

@@ -0,0 +1,37 @@
+.header{
+    height: 80px;
+    width: 100vw;
+    border-bottom: 1px solid lightgray;
+}
+.logo{
+    width: 80px;
+    margin-left: 20px;
+    height: 100%;
+    float: left;
+    position:relative;
+}
+.logo img{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+}
+.header .rightbox{
+    width: 80px;
+    margin-right:20px;
+    height: 80px;
+    float: right;
+    position: relative;
+}   
+.profile{
+    height: 50px;
+    width: 50px;
+    border-radius: 100%;
+    background-image: url("../../assets/images/profile_logo.png");
+    background-size: contain;
+    float: right;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translatey(-50%);
+}

src/components/Login/index.jsx

@@ -103,6 +103,7 @@ const Login = () => {
         pauseOnFocusLoss
         pauseOnHover={false}
         limit={5}
+        style={{width:"350px"}}
        />
     </div>
   );

src/pages/LoginPage/style.css

@@ -17,22 +17,22 @@
 
 .login .leftbox{
     float: left;
-    width: calc(100vh * (712 / 1024));
+    width: calc(100vh * (631 / 832));
     height: 100%;
     background-color: white;
     position: relative;
 }
 
 .login .rightbox{
     float: right;
-    width: calc(100vw - (100vh * (712 / 1024)));
+    width: calc(100vw - (100vh * (631 / 832)));
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }
-.imagebox{
+.login .imagebox{
     width: 100%;
     height: 100%;
     background-image: url(../../assets/images/login-background.png);

src/pages/MainPage/index.jsx

@@ -1,7 +1,7 @@
 import React,{useEffect} from 'react'
 import './style.css'
 import { useNavigate } from 'react-router-dom'
-import logo from '../../assets/images/logo.svg'
+import Header from '../../components/Header/index'
 
 const Main = () => {
     const navigate = useNavigate()
@@ -12,13 +12,14 @@ const Main = () => {
     })
   return (
     <div>
-        <div className='header'>
-            <div className='logo'><img src={logo} alt='logo'></img></div>
-            <div className='rightbox'>
-                <div className='search'></div>
-                <div className='profile'></div>
+        <Header/>
+        <div className='banner'>
+            <div className='button-box'>
+                <div className='button'></div>
+                <div className='button'></div>
+                <div className='button'></div>
+                <div className='button'></div>
             </div>
-
         </div>
     </div>
   )

src/pages/MainPage/style.css

@@ -1,43 +1,21 @@
-.header{
-    height: 100px;
+.banner{
     width: 100vw;
-    border-bottom: 1px solid lightgray;
-}
-.logo{
-    width: 100px;
-    margin-left: 20px;
-    height: 100%;
-    float: left;
-    position:relative;
-}
-.logo img{
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%,-50%);
+    height: 400px;
+    background-color: red;
 }
-.header .rightbox{
-    width: 400px;
-    margin-right:20px;
+.banner .button-box{
+    width: fit-content;
     height: 100%;
-    float: right;
-    position: relative;
-}
-.search{
-    height: 50px;
-    width: 300px;
-    background-color: blue;
-    float: left;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
+    display: grid;
+    grid-template-columns: 100px 100px;
+    align-items: center;
+    justify-content: space-evenly;
+    grid-gap: 80px;
 }
-.profile{
-    height: 50px;
-    width: 50px;
-    border-radius: 100%;
-    background-color: red;
-    float: right;
-    top: 50%;
-    transform: translateY(50%);
+.banner .button-box .button{
+    width: 150px;
+    height: 150px;
+    background-color: white;
+    border: 1px solid black;
+    border-radius: 10px;
 }

src/pages/SignUpPage/index.jsx

@@ -13,12 +13,12 @@ const SignUP = () => {
     }
     })
     return (
-        <div className='login'>
+        <div className='signup'>
                 <div className='leftbox'>
                     <div className='imagebox'/>
                 </div>
                 <div className='rightbox'>
-                    <div className='logincomp'>
+                    <div className='signupcomp'>
                         <SignUp/>
                     </div>
                 </div>

src/pages/SignUpPage/style.css

@@ -3,29 +3,29 @@
     margin: 0;
 }
 
-.login{
+.signup{
     width: 100vw;
     height: 100vh;
     background-color: #fff;
 }
 
-.loginbox{
+.signupbox{
     width: 90vw;
     height: 85vh;
     box-shadow: 0 0 30px rgba(0, 0, 0, 0.35);
 }
 
-.login .leftbox{
-    float: left;
-    width: calc(100vh * (712 / 1024));
+.signup .leftbox{
+    float: right;
+    width: calc(100vh * (631 / 832));
     height: 100%;
     background-color: white;
     position: relative;
 }
 
-.login .rightbox{
-    float: right;
-    width: calc(100vw - (100vh * (712 / 1024)));
+.signup .rightbox{
+    float: left;
+    width: calc(100vw - (100vh * (631 / 832)));
     height: 100%;
     display: flex;
     flex-direction: column;
@@ -35,17 +35,17 @@
 .imagebox{
     width: 100%;
     height: 100%;
-    background-image: url(../../assets/images/login-background.png);
+    background-image: url(../../assets/images/signup-backgound.png);
     background-size: cover;
     background-position: center;
 }
 
 @media (max-width: 1000px) {
-    .login .rightbox {
+    .signup .rightbox {
         margin: 0 auto;
         width: 100%;
     }
-    .login .leftbox{
+    .signup .leftbox{
         display: none;
     }
 }