chore: 메인 페이지 구현 #4

src/App.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import logo from './logo.svg';
+import Main from 'pages/main';
 
 function App() {
   return (
     <div className="App">
-      Hello, World!
+      <Main />
     </div>
   );
 }

src/components/header/index.style.tsx

@@ -9,15 +9,15 @@ const Container = styled.div<WrapperProps>`
   height: 100px;
   background-color: ${props => {
     if (props.inversion) {
-      return '#FFFFFF';
+      return 'transparent';
     } else {
       return '#161A2F';
     }
   }};
   display: flex;
   align-items: center;
   padding-left: 120px;
-  font-weight: 500;
+  font-weight: 600;
   
   .title {
     padding: 0 20px;

src/components/logo/index.tsx

@@ -9,7 +9,7 @@ interface LogoProps {
 }
 
 function Logo(props: LogoProps) {
-  return <Wrapper image={props.inversion ? inversionLogo : defaultLogo} type={props.type} />;
+  return <Wrapper className="logo" image={props.inversion ? inversionLogo : defaultLogo} type={props.type} />;
 }
 
 export default Logo;

src/index.css

@@ -1,4 +1,5 @@
 body {
   margin: 0;
   font-family: 'pretendard';
+  color: #161A2F;
 }

src/pages/main/index.style.tsx

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 100vw;
+  height: 100vh;
+  background: linear-gradient(#FFFFFF, #9BA4B4);
+  font-weight: 700;
+  
+  .content > .logo {
+    float: left;
+    margin-left: 220px;
+    margin-top: 350px;
+  }
+
+  .content > .title {
+    float: left;
+    margin-left: 60px;
+    margin-top: 370px;
+    font-size: 8cqh;
+  }
+
+  .content > .image {
+    float: left;
+    margin-left: 200px;
+    margin-top: 150px;
+    width: 528px;
+    height: 541px;
+  }
+`

src/pages/main/index.tsx

@@ -0,0 +1,17 @@
+import Header from "@components/header";
+import { Container } from "./index.style";
+import Logo from "@components/logo";
+import mainImage from "@assets/image/main-tire.png";
+
+function Main() {
+  return <Container>
+    <Header inversion={true}></Header>
+    <div className="content">
+      <Logo inversion={false} type='large' />
+      <div className="title">Outfit Of Tire</div>
+      <img className="image" src={mainImage} alt="tire_example" />
+    </div>
+  </Container>
+}
+
+export default Main;