From 8b4cc99a6ed23f46f52a47b432a6902e9ec45bd5 Mon Sep 17 00:00:00 2001
From: Jinwoo Lee <binaryWooo@gmail.com>
Date: Thu, 25 Jan 2024 12:52:48 +0900
Subject: [PATCH] =?UTF-8?q?chore:=20=EB=A9=94=EC=9D=B8=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84=20#4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx                           |  4 ++--
 src/components/header/index.style.tsx |  4 ++--
 src/components/logo/index.tsx         |  2 +-
 src/index.css                         |  1 +
 src/pages/main/index.style.tsx        | 29 +++++++++++++++++++++++++++
 src/pages/main/index.tsx              | 17 ++++++++++++++++
 6 files changed, 52 insertions(+), 5 deletions(-)
 create mode 100644 src/pages/main/index.style.tsx
 create mode 100644 src/pages/main/index.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 857c7a4..4561998 100644
--- a/src/App.tsx
+++ b/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>
   );
 }
diff --git a/src/components/header/index.style.tsx b/src/components/header/index.style.tsx
index 79bfda5..9972098 100644
--- a/src/components/header/index.style.tsx
+++ b/src/components/header/index.style.tsx
@@ -9,7 +9,7 @@ const Container = styled.div<WrapperProps>`
   height: 100px;
   background-color: ${props => {
     if (props.inversion) {
-      return '#FFFFFF';
+      return 'transparent';
     } else {
       return '#161A2F';
     }
@@ -17,7 +17,7 @@ const Container = styled.div<WrapperProps>`
   display: flex;
   align-items: center;
   padding-left: 120px;
-  font-weight: 500;
+  font-weight: 600;
   
   .title {
     padding: 0 20px;
diff --git a/src/components/logo/index.tsx b/src/components/logo/index.tsx
index 56238ed..8cfb514 100644
--- a/src/components/logo/index.tsx
+++ b/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;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
index b8d3b1b..0f63816 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,5 @@
 body {
   margin: 0;
   font-family: 'pretendard';
+  color: #161A2F;
 }
\ No newline at end of file
diff --git a/src/pages/main/index.style.tsx b/src/pages/main/index.style.tsx
new file mode 100644
index 0000000..aeb046d
--- /dev/null
+++ b/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;
+  }
+`
\ No newline at end of file
diff --git a/src/pages/main/index.tsx b/src/pages/main/index.tsx
new file mode 100644
index 0000000..dfcb25f
--- /dev/null
+++ b/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;
\ No newline at end of file